Как создать короткий и уникальный цифровой адрес для любого местоположения, используя AngularJS и PHP

Вступление

Почтовые адреса обычно длинные, а иногда их трудно запомнить. Есть ряд сценариев, где более короткий адрес был бы желателен. Например, возможность отправки короткого адреса, состоящего всего из пары символов, может обеспечить более быструю доставку услуг скорой помощи. Питер Гилен и Гарольд Годдин разработалиMapcode system в 2001 году, чтобы упростить создание краткого адреса для любого физического адреса в мире.

В этом руководстве вы разработаете веб-приложение, которое использует API Карт Google для создания короткого цифрового адреса для любого адреса по вашему выбору. Это можно сделать путем клонирования базового кода для этого приложения из GitHub, а затем добавления к нему кода, который сделает его полностью функциональным. Это приложение также сможет извлечь исходный физический адрес из заданного кода карты.

Предпосылки

Для завершения этого урока вам понадобится следующее:

Доступ к серверу Ubuntu 18.04. На этом сервере должен быть пользователь, отличный отroot, с привилегиямиsudo и настроенным брандмауэром. Чтобы настроить это, вы можете следить за нашим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. Получение ключа Google API

В этом руководстве вы будете использовать JavaScript для создания интерфейса к Google Maps. Google назначает ключи API, чтобы позволить разработчикам использовать JavaScript API на Картах Google, которые вам нужно будет получить и добавить в код своего веб-приложения.

Чтобы получить собственный ключ API, зайдите в“Get API Key” page Google. Нажмите кнопкуGET STARTED на шаге 1, и откроется всплывающее окно, как показано на следующем изображении:

ВыберитеMaps, установив флажок и нажавCONTINUE. Если вы еще не вошли в учетную запись Google, вам будет предложено сделать это. Затем в окне вас попросят указать название проекта, которое может быть любым:

После этого вам будет предложено ввести платежную информацию. Обратите внимание, что Google предоставляет ключи API как часть бесплатной пробной версии, но для этого необходимо настроить и включить выставление счетов для их получения.

После ввода этой информации ваш ключ API появится на экране. Скопируйте и сохраните его в том месте, где вы можете легко получить его, так как позже вам потребуется добавить его в код проекта.

Получив ключ API, вы можете приступить к созданию основы вашего приложения, создав базу данных MySQL.

[[step-2 -—- Creating-the-database]] == Шаг 2 - Создание базы данных

Веб-приложение, описанное в этом руководстве, принимает адрес пользователя и генерирует для него код карты, а также широту и долготу указанного местоположения. Вы будете хранить эти данные в базе данных 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 иlongitudeс. Первый столбецdigitaladdress представляет собойindexed с использованием командыKEY. Индексы в MySQL работают аналогично тому, как они работают в энциклопедии или другой справочной работе. Каждый раз, когда вы или ваше приложение выдает запрос, содержащий операторWHERE, MySQL считывает каждую запись в каждом столбце, строка за строкой, что может стать чрезвычайно ресурсоемким процессом, поскольку ваша таблица накапливает все больше и больше записей. Индексирование столбца, подобного этому, берет данные из столбца и сохраняет их в алфавитном порядке в отдельном месте, что означает, что MySQL не придется просматривать каждую строку в таблице. Нужно только найти искомые данные в индексе и затем перейти к соответствующей строке в таблице.

После добавления этой таблицы выйдите из командной строки MySQL:

exit

После настройки базы данных и таблицы, а также ключа API Карт Google вы готовы создать сам проект.

[[step-3 -—- create-the-project]] == Шаг 3 - Создание проекта

Как упоминалось во введении, мы будем клонировать базовый код для этого проекта из GitHub, а затем добавим дополнительный код, чтобы сделать приложение функциональным. Причина того, что вместо того, чтобы проводить процесс создания каждого файла и добавления всего кода самостоятельно, заключается в том, чтобы ускорить процесс запуска приложения. Это также позволит нам сосредоточиться на добавлении и понимании кода, который позволяет приложению взаимодействовать как с Google Maps, так и с API-интерфейсами Mapcode.

Вы можете найти скелетный код всего проекта наthis GitHub project page. Используйте следующую командуgit, чтобы клонировать проект на свой сервер:

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

Это создаст новую папку с именемdigiaddress в вашем домашнем каталоге. Переместите этот каталог в корневой каталог вашего сервера. Если вы следовали руководству по стеку LAMP, указанному в предварительных требованиях, это будет каталог/var/www/html:

sudo mv digiaddress/ /var/www/html/

Этот проект содержит несколько файлов PHP и JS, к которым вы добавите код позже в этом руководстве. Чтобы просмотреть структуру каталогов, сначала установите пакетtree, используяapt:

sudo apt install tree

Затем запустите командуtree с каталогомdigiaddress в качестве аргумента:

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

Из этого вывода видно, что проект состоит из шести файлов PHP и двух файлов JavaScript. Вместе эти файлы создают две основные функции приложения: создание кода карты по физическому адресу и декодирование кода карты для получения исходного физического адреса. Следующие файлы включают первую функциональность:

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

Файлindex.php содержит код для пользовательского интерфейса (UI) приложения, который состоит из формы, в которой пользователи могут вводить физический адрес. Файлindex.php вызывает файлgeoimplement.php каждый раз, когда пользователь отправляет форму. geoimplement.php вызывает API Карт Google и передает ему адрес. Затем сервер Google отвечает JSON, содержащим информацию об указанном адресе, включая его широту и долготу. Затем эта информация передается в файлgenerateDigitalAddress.php, который вызывает API-интерфейс Mapcode для получения кода карты для данного местоположения в соответствии с его широтой и долготой. Полученный код карты вместе с широтой, долготой и физическим адресом затем сохраняются в базе данных, созданной на шаге 2. db.php действует как помощник для этой операции. ФайлcreateDigitalAddressApp.js выполняет ряд операций, которые управляют элементами UX, отображаемыми в приложении, включая установку маркера и прямоугольника границы в интерфейсе Google Maps.

Оставшиеся три файла включают вторую функцию приложения, то есть получение физического адреса из заданного кода карты:

findaddress.php
fetchaddress.php
findAddressApp.js

Файлfindaddress.php определяет пользовательский интерфейс приложения, который отличается от того, который определен вindex.php. Приложение принимает ранее сгенерированный код карты в качестве входных данных и отображает соответствующий физический адрес, хранящийся в базе данных. Когда пользователь отправляет эту форму,findaddress.php отправляет вызовfetchaddress.php, который затем извлекает соответствующий код карты из базы данных. ФайлfindAddressApp.js содержит вспомогательный код для установки маркера и ограничивающего прямоугольника в интерфейсе Google Maps.

Проверьте установку, посетивhttp://your_server_ip/digiaddress в своем браузере, не забудьте изменитьyour_server_ip, чтобы он отражал IP-адрес вашего сервера.

[.Примечание]##

Note: Если вы не знаете IP-адрес своего сервера, вы можете выполнить следующую командуcurl. Эта команда распечатает содержимое страницыicanhazip.com, веб-сайта, который показывает IP-адрес машины, обращающейся к нему:

curl http://icanhazip.com

Оказавшись там, вы увидите этот заголовок в верхней части окна вашего браузера:

Generate Digital Address

Это подтверждает, что вы правильно загрузили файлы проекта. После этого давайте приступим к разработке основной функции приложения: генерации кода карты.

[[step-4 -—- development-the-application-39-s-ui]] == Шаг 4. Разработка пользовательского интерфейса приложения

Несмотря на то, что стандартный код для интерфейса приложения включен в файлы, загруженные на предыдущем шаге, вам все же необходимо внести несколько изменений и дополнений в некоторые из этих файлов, чтобы сделать приложение функциональным и привлекательным для пользователей. Мы начнем с обновления кода для разработки пользовательского интерфейса приложения.

Откройте файлindex.php с помощью предпочитаемого вами редактора. Здесь мы будем использоватьnano:

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

Найдите следующую строку кода: