So generieren Sie mit AngularJS und PHP eine kurze und eindeutige digitale Adresse für jeden Standort

Einführung

Postanschriften sind in der Regel lang und manchmal schwer zu merken. Es gibt eine Reihe von Szenarien, in denen eine kürzere Adresse wünschenswert wäre. Die Möglichkeit, eine kurze Adresse zu senden, die nur aus wenigen Zeichen besteht, könnte beispielsweise eine schnellere Zustellung von Rettungsdiensten gewährleisten. Pieter Geelen und Harold Goddijn haben dieMapcode system im Jahr 2001 entwickelt, um die Erstellung einer Kurzadresse für jede physikalische Adresse auf der Welt zu vereinfachen.

In diesem Lernprogramm entwickeln Sie eine Web-App, die mithilfe der Google Maps-API eine kurze digitale Adresse für eine beliebige Adresse Ihrer Wahl generiert. Sie tun dies, indem Sie den Basiscode für diese App von GitHub klonen und dann Code hinzufügen, der sie voll funktionsfähig macht. Diese App kann auch die ursprüngliche physikalische Adresse von einem bestimmten Kartencode abrufen.

Voraussetzungen

Um dieses Tutorial abzuschließen, benötigen Sie Folgendes:

Zugriff auf einen Ubuntu 18.04 Server. Dieser Server sollte einen Nicht-root-Benutzer mitsudo-Berechtigungen und eine konfigurierte Firewall haben. Um dies einzurichten, können Sie unserenInitial Server Setup Guide for Ubuntu 18.04 folgen.
Ein LAMP-Stack ist auf Ihrem Computer installiert. Dies ist erforderlich, da die Anwendung, die Sie in diesem Lernprogramm entwickeln, AngularJS und PHP verwendet und die von der Anwendung generierte digitale Adresse in einer MySQL-Datenbank gespeichert wird. Befolgen Sie unsere Anleitung zuHow To Install Linux, Apache, MySQL, PHP (LAMP) stack on Ubuntu 18.04, um dies einzurichten.
Git auf Ihrem Server installiert. Sie können dem TutorialContributing to Open Source: Getting Started with Git folgen, um Git zu installieren und einzurichten.

[[Schritt 1 - Abrufen eines Google-API-Schlüssels]] == Schritt 1 - Abrufen eines Google API-Schlüssels

In diesem Tutorial verwenden Sie JavaScript, um eine Schnittstelle zu Google Maps zu erstellen. Google weist API-Schlüssel zu, um Entwicklern die Verwendung der JavaScript-API in Google Maps zu ermöglichen, die Sie benötigen, um den Code Ihrer Webanwendung abzurufen und zu ergänzen.

Um Ihren eigenen API-Schlüssel zu erhalten, gehen Sie zu“Get API Key” pagevon Google. Klicken Sie in Schritt 1 auf die SchaltflächeGET STARTED. Ein Popup wird geöffnet, wie in der folgenden Abbildung dargestellt:

Wählen SieMaps aus, indem Sie auf das Kontrollkästchen klicken undCONTINUE drücken. Wenn Sie noch nicht in einem Google-Konto angemeldet sind, werden Sie dazu aufgefordert. Anschließend werden Sie im Fenster aufgefordert, einen Namen für das Projekt anzugeben. Dieser kann beliebig sein:

Anschließend werden Sie aufgefordert, Ihre Zahlungsinformationen einzugeben. Beachten Sie, dass Google API-Schlüssel als Teil einer kostenlosen Testversion bereitstellt. Sie müssen jedoch die Abrechnung einrichten und aktivieren, damit Sie sie abrufen können.

Nach Eingabe dieser Informationen wird Ihr API-Schlüssel auf dem Bildschirm angezeigt. Kopieren Sie es und speichern Sie es an einem Ort, an dem Sie es leicht abrufen können, da Sie es später zu Ihrem Projektcode hinzufügen müssen.

Nachdem Sie Ihren API-Schlüssel erhalten haben, können Sie mit dem Aufbau der Grundlage Ihrer Anwendung beginnen, indem Sie eine MySQL-Datenbank erstellen.

[[Schritt-2 -—- Erstellen der Datenbank]] == Schritt 2 - Erstellen der Datenbank

Die in diesem Lernprogramm beschriebene Webanwendung akzeptiert eine Adresse vom Benutzer und generiert einen Kartencode für diese Adresse sowie den Breiten- und Längengrad des angegebenen Standorts. Sie speichern diese Daten in einer MySQL-Datenbank, damit Sie sie später durch Eingabe der entsprechenden digitalen Adresse abrufen können.

Beginnen Sie, indem Sie die MySQL-Shell öffnen und sich mit Ihrem Passwort authentifizieren:

mysql -u root -p

Erstellen Sie an der Eingabeaufforderung mit dem folgenden Befehl eine Datenbank mit dem Namendigitaladdress:

CREATE DATABASE IF NOT EXISTS `digitaladdress`;

Wählen Sie als Nächstes diese neue Datenbank aus, damit Sie darin eine Tabelle erstellen können:

USE `digitaladdress`;

Erstellen Sie nach Auswahl derdigitaladdress-Datenbank eine Tabelle mit dem Namenlocations, in der die physische Adresse, der Längen- und Breitengrad sowie der Mapcode gespeichert werden, den Ihre Anwendung aus diesen Daten erstellen wird. Führen Sie die folgende AnweisungCREATE TABLE aus, um die Tabellelocations in der Datenbank zu erstellen:

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`)
);

Diese Tabelle enthält acht Spalten:digitaladdress,state,zip,street,town,house,latitude undlongitude. Die erste Spalte,digitaladdress, istindexed mit dem BefehlKEY. Indizes in MySQL funktionieren ähnlich wie in einer Enzyklopädie oder einem anderen Nachschlagewerk. Jedes Mal, wenn Sie oder Ihre Anwendung eine Abfrage mit einerWHERE-Anweisung ausgeben, liest MySQL jeden Eintrag in jeder Spalte zeilenweise. Dies kann zu einem äußerst ressourcenintensiven Prozess werden, da Ihre Tabelle immer mehr Einträge ansammelt. Indizieren einer solchen Spalte nimmt die Daten aus der Spalte und speichert sie alphabetisch an einem separaten Ort, was bedeutet, dass MySQL nicht jede Zeile in der Tabelle durchsuchen muss. Es muss nur die Daten finden, nach denen Sie suchen, und dann zur entsprechenden Zeile in der Tabelle springen.

Beenden Sie nach dem Hinzufügen dieser Tabelle die MySQL-Eingabeaufforderung:

exit

Wenn Sie Ihre Datenbank und Tabelle eingerichtet und Ihren Google Maps-API-Schlüssel zur Hand haben, können Sie das Projekt selbst erstellen.

[[Schritt-3 - Erstellen des Projekts]] == Schritt 3 - Erstellen des Projekts

Wie in der Einführung erwähnt, klonen wir den Basiscode für dieses Projekt von GitHub und fügen dann zusätzlichen Code hinzu, um die Anwendung funktionsfähig zu machen. Der Grund dafür ist, anstatt Sie durch den Prozess des Erstellens jeder Datei und des Hinzufügens des gesamten Codes selbst zu führen, den Prozess des Ausführens der App zu beschleunigen. Außerdem können wir uns darauf konzentrieren, den Code hinzuzufügen und zu verstehen, mit dem die App sowohl mit den Google Maps- als auch mit den Mapcode-APIs kommunizieren kann.

Den Skeleton-Code für das gesamte Projekt finden Sie unterthis GitHub project page. Verwenden Sie den folgenden Befehlgit, um das Projekt auf Ihren Server zu klonen:

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

Dadurch wird ein neuer Ordner mit dem Namendigiaddress in Ihrem Home-Verzeichnis erstellt. Verschieben Sie dieses Verzeichnis in das Webstammverzeichnis Ihres Servers. Wenn Sie das in den Voraussetzungen verknüpfte LAMP-Stack-Tutorial befolgt haben, ist dies das Verzeichnis/var/www/html:

sudo mv digiaddress/ /var/www/html/

Dieses Projekt enthält mehrere PHP- und JS-Dateien, denen Sie später in diesem Lernprogramm Code hinzufügen. Um die Verzeichnisstruktur anzuzeigen, installieren Sie zuerst das Pakettree mitapt:

sudo apt install tree

Führen Sie dann den Befehltree mit dem als Argument angegebenen Verzeichnisdigiaddress aus:

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

Sie können dieser Ausgabe entnehmen, dass das Projekt aus sechs PHP-Dateien und zwei JavaScript-Dateien besteht. Zusammen bilden diese Dateien die beiden Hauptfunktionen der Anwendung: Erstellen eines Kartencodes aus einer physischen Adresse und Dekodieren eines Kartencodes, um die ursprüngliche physische Adresse abzurufen. Die folgenden Dateien aktivieren die erste Funktionalität:

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

Die Dateiindex.phpenthält den Code für die Benutzeroberfläche der Anwendung, die aus einem Formular besteht, in dem Benutzer eine physische Adresse eingeben können. Die Dateiindex.php ruft die Dateigeoimplement.phpjedes Mal auf, wenn ein Benutzer das Formular sendet. geoimplement.php ruft die Google Maps-API auf und gibt die Adresse an diese weiter. Der Google-Server antwortet daraufhin mit einem JSON-Code, der die angegebenen Adressinformationen einschließlich Breiten- und Längengrad enthält. Diese Informationen werden dann an die DateigenerateDigitalAddress.phpübergeben, die die Mapcode-API aufruft, um einen Mapcode für den angegebenen Standort zu erhalten, der durch seinen Breiten- und Längengrad angegeben wird. Der resultierende Kartencode wird zusammen mit dem Breitengrad, dem Längengrad und der physischen Adresse in der Datenbank gespeichert, die Sie in Schritt 2 erstellt haben. db.php fungiert als Helfer für diese Operation. Die DateicreateDigitalAddressApp.js führt eine Reihe von Vorgängen aus, die die in der App angezeigten UX-Elemente steuern, einschließlich des Festlegens eines Markers und eines Begrenzungsrechtecks auf der Google Maps-Oberfläche.

Die verbleibenden drei Dateien ermöglichen die zweite Funktion der Anwendung - das Abrufen einer physischen Adresse von einem bestimmten Kartencode:

findaddress.php
fetchaddress.php
findAddressApp.js

Die Dateifindaddress.php definiert die Benutzeroberfläche der Anwendung, die sich von der inindex.php definierten unterscheidet. Die Anwendung akzeptiert einen zuvor generierten Kartencode als Eingabe und zeigt die entsprechende physikalische Adresse an, die in der Datenbank gespeichert ist. Immer wenn ein Benutzer dieses Formular sendet, sendetfindaddress.php einen Anruf anfetchaddress.php, der dann den entsprechenden Kartencode aus der Datenbank abruft. Die DateifindAddressApp.js enthält den Hilfecode zum Festlegen einer Markierung und eines Begrenzungsrechtecks auf der Google Maps-Oberfläche.

Testen Sie die Installation, indem Siehttp://your_server_ip/digiaddress in Ihrem Browser aufrufen und sicherstellen, dassyour_server_ip geändert wird, um die IP-Adresse Ihres Servers wiederzugeben.

[.Hinweis]##

Note: Wenn Sie die IP-Adresse Ihres Servers nicht kennen, können Sie den folgenden Befehlcurlausführen. Dieser Befehl druckt den Seiteninhalt vonicanhazip.com, einer Website, auf der die IP-Adresse des Computers angezeigt wird, der darauf zugreift:

curl http://icanhazip.com

Dort angekommen, sehen Sie diese Überschrift oben in Ihrem Browserfenster:

Generate Digital Address

Dies bestätigt, dass Sie die Projektdateien korrekt heruntergeladen haben. Fahren wir mit der Entwicklung der Hauptfunktion der App fort: Generieren eines Kartencodes.

[[Schritt-4 -—- Entwickeln der Anwendung-39-s-ui]] == Schritt 4 - Entwickeln der Benutzeroberfläche der Anwendung

Die Dateien, die Sie im vorherigen Schritt heruntergeladen haben, enthalten den Code für die Programmoberfläche. Sie müssen jedoch noch einige Änderungen und Ergänzungen an einigen dieser Dateien vornehmen, damit die Anwendung für die Benutzer funktionsfähig und ansprechend ist. Wir werden mit der Aktualisierung des Codes beginnen, um die Benutzeroberfläche der Anwendung zu entwickeln.

Öffnen Sie dieindex.php-Datei mit Ihrem bevorzugten Editor. Hier verwenden wirnano:

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

Suchen Sie nach der folgenden Codezeile: