Comment générer une adresse numérique courte et unique pour n’importe quel emplacement en utilisant AngularJS et PHP

introduction

Les adresses postales sont généralement longues et parfois difficiles à retenir. Il existe un certain nombre de scénarios dans lesquels une adresse plus courte serait souhaitable. Par exemple, le fait d’être en mesure d’envoyer une courte adresse composée de quelques caractères seulement permettrait d’assurer une livraison plus rapide des services d’ambulance d’urgence. Pieter Geelen et Harold Goddijn ont développé leMapcode system en 2001 pour faciliter la création d'une adresse abrégée pour n'importe quelle adresse physique dans le monde.

Dans ce didacticiel, vous allez développer une application Web utilisant l’API de Google Maps pour générer une adresse numérique courte pour l’adresse de votre choix. Pour ce faire, clonez le code de base de cette application à partir de GitHub, puis ajoutez-y du code qui la rendra pleinement fonctionnelle. Cette application sera également capable de récupérer l'adresse physique d'origine à partir d'un mapcode donné.

Conditions préalables

Pour compléter ce tutoriel, vous aurez besoin des éléments suivants:

Accès à un serveur Ubuntu 18.04. Ce serveur doit avoir un utilisateur non -root avec les privilègessudo et un pare-feu configuré. Pour configurer cela, vous pouvez suivre nosInitial Server Setup Guide for Ubuntu 18.04.
Une pile de lampe installée sur votre machine. Cela est nécessaire car l’application que vous allez développer dans ce tutoriel utilise AngularJS et PHP, et l’adresse numérique générée par l’application sera stockée dans une base de données MySQL. Suivez notre guide surHow To Install Linux, Apache, MySQL, PHP (LAMP) stack on Ubuntu 18.04 pour configurer cela.
Git installé sur votre serveur. Vous pouvez suivre le tutorielContributing to Open Source: Getting Started with Git pour installer et configurer Git.

[[step-1 -—- getting-a-google-api-key]] == Étape 1 - Obtenir une clé API Google

Dans ce didacticiel, vous utiliserez JavaScript pour créer une interface avec Google Maps. Google attribue des clés d'API pour permettre aux développeurs d'utiliser l'API JavaScript sur Google Maps, que vous devrez obtenir et ajouter au code de votre application Web.

Pour obtenir votre propre clé API, accédez aux“Get API Key” page de Google. Cliquez sur le boutonGET STARTED à l'étape 1, et une fenêtre contextuelle s'ouvrira comme indiqué dans l'image suivante:

SélectionnezMaps en cliquant sur la case à cocher et appuyez surCONTINUE. Si vous n'êtes pas déjà connecté à un compte Google, vous serez invité à le faire. Ensuite, la fenêtre vous demandera de donner un nom au projet, qui peut être ce que vous voulez:

Ensuite, il vous sera demandé de saisir vos informations de facturation. Notez que Google fournit des clés d'API dans le cadre d'un essai gratuit, mais que vous devez configurer et activer la facturation pour les récupérer.

Après avoir entré ces informations, votre clé API apparaîtra à l'écran. Copiez-le et stockez-le dans un emplacement où vous pourrez le récupérer facilement, car vous devrez l'ajouter ultérieurement au code de votre projet.

Après avoir obtenu votre clé API, vous pouvez commencer à créer les bases de votre application en créant une base de données MySQL.

[[step-2 -—- creation-the-database]] == Étape 2 - Création de la base de données

L'application Web décrite dans ce didacticiel accepte une adresse de l'utilisateur et génère un code de carte pour celle-ci, ainsi que la latitude et la longitude de l'emplacement spécifié. Vous allez stocker ces données dans une base de données MySQL afin de pouvoir les récupérer ultérieurement en entrant simplement l'adresse numérique correspondante.

Commencez par ouvrir le shell MySQL et authentifier avec votre mot de passe:

mysql -u root -p

À l'invite, créez une base de données appeléedigitaladdress à l'aide de la commande suivante:

CREATE DATABASE IF NOT EXISTS `digitaladdress`;

Ensuite, sélectionnez cette nouvelle base de données pour pouvoir y créer une table:

USE `digitaladdress`;

Après avoir sélectionné la base de donnéesdigitaladdress, créez une table appeléelocations à l'intérieur pour y stocker l'adresse physique, sa longitude, sa latitude et le code de carte que votre application créera à partir de ces données. Exécutez l'instructionCREATE TABLE suivante pour créer la tablelocations dans la base de données:

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

Cette table comporte huit colonnes:digitaladdress,state,zip,street,town,house,latitude etlongitude. La première colonne,digitaladdress, estindexed en utilisant la commandeKEY. Les index dans MySQL fonctionnent de la même manière que dans une encyclopédie ou un autre ouvrage de référence. Chaque fois que vous ou votre application émettez une requête contenant une instructionWHERE, MySQL lit chaque entrée de chaque colonne, ligne par ligne, ce qui peut devenir un processus extrêmement gourmand en ressources à mesure que votre table accumule de plus en plus d'entrées. L'indexation d'une colonne de ce type prend les données de la colonne et les stocke par ordre alphabétique dans un emplacement distinct, ce qui signifie que MySQL n'aura pas à parcourir toutes les lignes du tableau. Il suffit de rechercher les données que vous recherchez dans l'index, puis de passer à la ligne correspondante de la table.

Après avoir ajouté cette table, quittez l’invite MySQL:

exit

Avec votre base de données et votre table configurées, ainsi que votre clé d’API Google Maps, vous êtes prêt à créer le projet lui-même.

[[step-3 -—- creation-the-project]] == Étape 3 - Création du projet

Comme indiqué dans l'introduction, nous allons cloner le code de base de ce projet depuis GitHub, puis ajouter du code supplémentaire pour rendre l'application fonctionnelle. Au lieu de vous guider dans le processus de création de chaque fichier et d'ajouter tout le code vous-même, la raison en est d'accélérer le processus d'exécution de l'application. Cela nous permettra également de nous concentrer sur l'ajout et la compréhension du code permettant à l'application de communiquer avec les API Google Maps et Mapcode.

Vous pouvez trouver le code squelette du projet complet surthis GitHub project page. Utilisez la commandegit suivante pour cloner le projet sur votre serveur:

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

Cela créera un nouveau dossier appelédigiaddress dans votre répertoire personnel. Déplacez ce répertoire vers la racine Web de votre serveur. Si vous avez suivi le tutoriel de la pile LAMP lié dans les prérequis, ce sera le répertoire/var/www/html:

sudo mv digiaddress/ /var/www/html/

Ce projet contient plusieurs fichiers PHP et JS auxquels vous ajouterez du code plus tard dans ce tutoriel. Pour afficher la structure des répertoires, installez d'abord le packagetree à l'aide deapt:

sudo apt install tree

Exécutez ensuite la commandetree avec le répertoiredigiaddress donné comme argument:

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

Vous pouvez voir dans cette sortie que le projet se compose de six fichiers PHP et de deux fichiers JavaScript. Ensemble, ces fichiers créent les deux fonctionnalités principales de l’application: créer un code de carte à partir d’une adresse physique et décoder un code de carte pour récupérer l’adresse physique d’origine. Les fichiers suivants activent la première fonctionnalité:

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

Le fichierindex.php contient le code de l’interface utilisateur (UI) de l’application, qui consiste en un formulaire dans lequel les utilisateurs peuvent entrer une adresse physique. Le fichierindex.php appelle le fichiergeoimplement.php chaque fois qu'un utilisateur soumet le formulaire. geoimplement.php appelle l'API Google Maps et lui transmet l'adresse. Le serveur Google répond ensuite avec un JSON contenant les informations de l'adresse spécifiée, y compris sa latitude et sa longitude. Ces informations sont ensuite transmises au fichiergenerateDigitalAddress.php qui appelle l'API Mapcode pour obtenir un mapcode pour l'emplacement donné, comme spécifié par sa latitude et sa longitude. Le code de carte obtenu, ainsi que la latitude, la longitude et l'adresse physique, sont ensuite stockés dans la base de données créée à l'étape 2. db.php agit comme une aide pour cette opération. Le fichiercreateDigitalAddressApp.js effectue un certain nombre d'opérations qui contrôlent les éléments UX vus dans l'application, y compris la définition d'un marqueur et d'un rectangle de délimitation sur l'interface Google Maps.

Les trois fichiers restants activent la deuxième fonction de l'application, c'est-à-dire la récupération d'une adresse physique à partir d'un code de carte donné:

findaddress.php
fetchaddress.php
findAddressApp.js

Le fichierfindaddress.php définit l'interface utilisateur de l'application, qui est distincte de celle définie dansindex.php. L'application accepte en entrée un code de carte généré précédemment et affiche l'adresse physique correspondante stockée dans la base de données. Chaque fois qu'un utilisateur soumet ce formulaire,findaddress.php envoie un appel àfetchaddress.php qui récupère ensuite le mapcode respectif de la base de données. Le fichierfindAddressApp.js contient le code d'aide pour définir un marqueur et un rectangle de délimitation sur l'interface Google Maps.

Testez l'installation en visitanthttp://your_server_ip/digiaddress dans votre navigateur, en veillant à modifieryour_server_ip pour refléter l'adresse IP de votre serveur.

[.Remarque]##

Note: Si vous ne connaissez pas l’adresse IP de votre serveur, vous pouvez exécuter la commandecurl suivante. Cette commande imprimera le contenu de la page deicanhazip.com, un site Web qui affiche l'adresse IP de la machine qui y accède:

curl http://icanhazip.com

Une fois là-bas, vous verrez cette rubrique en haut de la fenêtre de votre navigateur:

Generate Digital Address

Cela confirme que vous avez correctement téléchargé les fichiers du projet. Avec cela, poursuivons avec le développement de la fonction principale de l’application: générer un code de carte.

[[step-4 -—- development-the-application-39-s-ui]] == Étape 4 - Développement de l'interface utilisateur de l'application

Bien que le code général de l'interface de l'application soit inclus dans les fichiers que vous avez téléchargés à l'étape précédente, vous devez néanmoins apporter quelques modifications et ajouts à certains de ces fichiers pour rendre l'application fonctionnelle et attrayante pour les utilisateurs. Nous allons commencer par mettre à jour le code pour développer l’interface utilisateur de l’application.

Ouvrez le fichierindex.php en utilisant votre éditeur préféré. Ici, nous utiliseronsnano:

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

Recherchez la ligne de code suivante: