AngularJSとPHPを使用して任意の場所の短くて一意のデジタルアドレスを生成する方法

前書き

通常、郵便住所は長く、覚えにくい場合があります。短いアドレスが望ましいいくつかのシナリオがあります。たとえば、2、3人のキャラクターのみで構成される短い住所を送信できるようにすると、救急車のサービスをより迅速に配信できます。 PieterGeelenとHaroldGoddijnは、2001年にMapcode systemを開発し、世界中の物理アドレスの短い形式のアドレスを簡単に作成できるようにしました。

このチュートリアルでは、Google Maps APIを使用して、選択した住所の短いデジタルアドレスを生成するWebアプリを開発します。これを行うには、GitHubからこのアプリの基本コードを複製し、完全に機能するコードを追加します。このアプリは、指定されたマップコードから元の物理アドレスを取得することもできます。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Ubuntu 18.04サーバーへのアクセス。このサーバーには、sudo特権を持つroot以外のユーザーがいて、ファイアウォールが構成されている必要があります。これを設定するには、Initial Server Setup Guide for Ubuntu 18.04をたどることができます。
マシンにインストールされたLAMPスタック。このチュートリアルで開発するアプリケーションはAngularJSとPHPを使用し、アプリケーションが生成するデジタルアドレスはMySQLデータベースに保存されるため、これが必要です。これを設定するには、How To Install Linux, Apache, MySQL, PHP (LAMP) stack on Ubuntu 18.04に関するガイドに従ってください。
サーバーにインストールされたGit。チュートリアルContributing to Open Source: Getting Started with Gitに従って、Gitをインストールおよびセットアップできます。

[[step-1 -—- getting-a-google-api-key]] ==ステップ1— GoogleAPIキーを取得する

このチュートリアルでは、JavaScriptを使用してGoogleマップへのインターフェースを作成します。 GoogleはAPIキーを割り当てて、デベロッパーがGoogleマップでJavaScript APIを使用できるようにします。これは、Webアプリのコードを取得して追加する必要があります。

独自のAPIキーを取得するには、Googleの“Get API Key” pageにアクセスしてください。手順1のGET STARTEDボタンをクリックすると、次の画像に示すようなポップアップが開きます。

チェックボックスをクリックしてMapsを選択し、CONTINUEを押します。まだGoogleアカウントにログインしていない場合は、ログインするよう求められます。次に、ウィンドウにプロジェクトの名前を入力するように求められます。プロジェクトの名前は任意です。

これに続いて、お支払い情報の入力を求められます。 Googleは無料の試用版の一部としてAPIキーを提供していますが、それらを取得するには請求を設定して有効にする必要があります。

この情報を入力すると、APIキーが画面に表示されます。後でプロジェクトコードに追加する必要があるため、簡単に取得できる場所にコピーして保存します。

APIキーを取得したら、MySQLデータベースを作成して、アプリケーションの基盤の構築を開始できます。

[[step-2 -—-データベースの作成]] ==ステップ2—データベースの作成

このチュートリアルで説明するWebアプリケーションは、ユーザーから住所を受け取り、指定された場所の緯度と経度とともにその住所のマップコードを生成します。このデータをMySQLデータベースに保存して、それぞれのデジタルアドレスを入力するだけで後で取得できるようにします。

MySQLシェルを開き、パスワードで認証することから始めます。

mysql -u root -p

プロンプトで、次のコマンドを使用してdigitaladdressというデータベースを作成します。

CREATE DATABASE IF NOT EXISTS `digitaladdress`;

次に、この新しいデータベースを選択して、その中にテーブルを作成できるようにします。

USE `digitaladdress`;

digitaladdressデータベースを選択した後、その中にlocationsというテーブルを作成して、物理アドレス、経度、緯度、およびアプリケーションがこのデータから作成するマップコードを格納します。次のCREATE TABLEステートメントを実行して、データベース内にlocationsテーブルを作成します。

CREATE TABLE `locations` (
  `digitaladdress` varchar(50) DEFAULT NULL,
  `state` varchar(30) DEFAULT NULL,
  `zip` varchar(30) DEFAULT NULL,
  `street` varchar(30) DEFAULT NULL,
  `town` varchar(30) DEFAULT NULL,
  `house` varchar(30) DEFAULT NULL,
  `latitude` varchar(30) DEFAULT NULL,
  `longitude` varchar(30) DEFAULT NULL,
  KEY `digitaladdress` (`digitaladdress`)
);

このテーブルには、digitaladdress、state、zip、street、town、house、latitude、および％の8つの列があります。（t7）s。最初の列digitaladdressは、KEYコマンドを使用したindexedです。 MySQLのインデックスは、エンサイクロペディアまたは他の参照作業での動作と同様に機能します。ユーザーまたはアプリケーションがWHEREステートメントを含むクエリを発行するたびに、MySQLは各列のすべてのエントリを行ごとに読み取ります。これは、テーブルにエントリが増えるにつれて、非常にリソースを消費するプロセスになる可能性があります。このように列にインデックスを付けると、列からデータが取得され、アルファベット順に別の場所に保存されます。つまり、MySQLはテーブル内のすべての行を調べる必要がなくなります。インデックスで探しているデータを見つけて、テーブルの対応する行にジャンプするだけです。

このテーブルを追加したら、MySQLプロンプトを終了します。

exit

データベースとテーブルをセットアップし、Google Maps APIキーを用意したら、プロジェクト自体を作成する準備が整いました。

[[step-3 -—- creating-the-project]] ==ステップ3—プロジェクトの作成

はじめに述べたように、このプロジェクトの基本コードをGitHubから複製し、アプリケーションを機能させるためのコードを追加します。この理由は、各ファイルを作成してすべてのコードを自分で追加するプロセスを説明するのではなく、アプリを実行するプロセスを高速化するためです。また、アプリがGoogle MapsとMapcode APIの両方と通信できるようにするコードの追加と理解に集中することができます。

プロジェクト全体のスケルトンコードはthis GitHub project pageにあります。次のgitコマンドを使用して、プロジェクトをサーバーに複製します。

git clone https://github.com/do-community/digiaddress.git

これにより、ホームディレクトリにdigiaddressという新しいフォルダが作成されます。このディレクトリをサーバーのWebルートに移動します。前提条件にリンクされているLAMPスタックチュートリアルに従った場合、これは/var/www/htmlディレクトリになります。

sudo mv digiaddress/ /var/www/html/

このプロジェクトには、このチュートリアルの後半でコードを追加するいくつかのPHPファイルとJSファイルが含まれています。ディレクトリ構造を表示するには、最初にaptを使用してtreeパッケージをインストールします。

sudo apt install tree

次に、引数として指定されたdigiaddressディレクトリを使用してtreeコマンドを実行します。

tree /var/www/html/digiaddress/

Outputdigiaddress/
├── README.md
├── db.php
├── fetchaddress.php
├── findaddress.php
├── generateDigitalAddress.php
├── geoimplement.php
├── index.php
└── js
    ├── createDigitialAddressApp.js
    └── findAddressApp.js

この出力から、プロジェクトが6つのPHPファイルと2つのJavaScriptファイルで構成されていることがわかります。これらのファイルを組み合わせて、アプリケーションの2つの主な機能を作成します。物理アドレスからマップコードを作成することと、マップコードをデコードして元の物理アドレスを取得することです。次のファイルは、最初の機能を有効にします。

index.php
geoimplement.php
generateDigitialAddress.php
db.php
createDigitialAddressApp.js

index.phpファイルには、アプリケーションのユーザーインターフェイス（UI）のコードが含まれています。このコードは、ユーザーが物理アドレスを入力できるフォームで構成されています。 index.phpファイルは、ユーザーがフォームを送信するたびにgeoimplement.phpファイルを呼び出します。 geoimplement.phpはGoogle Maps APIを呼び出し、アドレスを渡します。 Googleサーバーは、指定された住所の情報（緯度と経度を含む）を含むJSONで応答します。次に、この情報はgenerateDigitalAddress.phpファイルに渡されます。このファイルはMapcode APIを呼び出して、緯度と経度で指定された特定の場所のマップコードを取得します。結果のマップコードは、緯度、経度、物理アドレスとともに、手順2で作成したデータベースに保存されます。 db.phpは、この操作のヘルパーとして機能します。 createDigitalAddressApp.jsファイルは、Googleマップインターフェイスでのマーカーや境界長方形の設定など、アプリに表示されるUX要素を制御するいくつかの操作を実行します。

残りの3つのファイルは、アプリケーションの2番目の機能を有効にします。つまり、特定のマップコードから物理アドレスを取得します。

findaddress.php
fetchaddress.php
findAddressApp.js

findaddress.phpファイルは、index.phpで定義されたものとは異なるアプリケーションUIを定義します。アプリケーションは、以前に生成されたマップコードを入力として受け入れ、データベースに保存されている対応する物理アドレスを表示します。ユーザーがこのフォームを送信するたびに、findaddress.phpはfetchaddress.phpに呼び出しを送信し、fetchaddress.phpはデータベースからそれぞれのマップコードを取得します。 findAddressApp.jsファイルには、Googleマップインターフェイスでマーカーと境界長方形を設定するためのヘルパーコードが含まれています。

ブラウザでhttp://your_server_ip/digiaddressにアクセスしてインストールをテストし、サーバーのIPアドレスを反映するようにyour_server_ipを変更してください。

[。注意]＃＃

Note:サーバーのIPアドレスがわからない場合は、次のcurlコマンドを実行できます。このコマンドは、アクセスしているマシンのIPアドレスを示すWebサイトであるicanhazip.comのページコンテンツを出力します。

curl http://icanhazip.com

そこにアクセスすると、ブラウザウィンドウの上部に次の見出しが表示されます。

Generate Digital Address

これにより、プロジェクトファイルが正しくダウンロードされたことを確認できます。それで、アプリの主な機能であるマップコードの生成の開発に進みましょう。

[[step-4 -—- developing-the-application-39-s-ui]] ==ステップ4—アプリケーションのUIを開発する

アプリケーションインターフェイスのボイラープレートコードは前の手順でダウンロードしたファイルに含まれていますが、これらのファイルの一部にいくつかの変更と追加を加えて、アプリケーションが機能しユーザーを引き付けるようにする必要があります。アプリケーションのUIを開発するためのコードの更新を開始します。

好みのエディタを使用してindex.phpファイルを開きます。ここでは、nanoを使用します。

nano /var/www/html/digiaddress/index.php

次のコード行を探します。