Share
Ce tutoriel vous montrera comment créer un mashup de trois API différentes, y compris l'intégration à Google Maps. Cette idée est née lorsque je cherchais dans le répertoire des API de ProgrammableWeb deux API se complétant suffisamment pour que je puisse en utiliser une pour fournir des données à l'autre. Ce que je suis venu avec sera connu comme le "mashup de bière".
En parcourant le répertoire de ProgrammableWeb, j'ai trouvé un outil de géolocalisation IP appelé ipLoc. Il accepte simplement une adresse IP et renvoie les données pertinentes sur l'emplacement, telles que l'état, la ville, le pays, le code postal, etc..
J'ai ensuite trouvé le très cool Beer Mapping Project, qui contient un vaste répertoire de bars et de pubs non seulement des États-Unis, mais de nombreux autres pays. J'ai immédiatement constaté qu'il s'agissait d'un complément parfait à ipLoc, car l'API BeerMapping nécessite une ville (que nous pouvons obtenir de l'API ipLoc) pour renvoyer une liste de bars et de pubs locaux..
Enfin, je souhaitais également intégrer Google Maps dans ce mashup afin de tracer les adresses des bars et des pubs afin d'ajouter un peu d'interactivité à la page au lieu d'afficher chaque barre dans une simple liste HTML..
Je trouve généralement préférable de commencer les documents PHP avec certaines des variables que je souhaite définir globalement dans le script. J'ajoute ici une ligne qui réduit au silence les messages d'avertissement PHP (Google Maps en crache beaucoup si vous essayez de mapper une adresse invalide) et mes clés d'API BeerMashup et Google Maps. Nous finirons par utiliser ces clés API lorsque nous aurons leurs étapes respectives ci-dessous.
Étape 3. Configuration de la géolocalisation IP
L'API ipLoc vous permet soit de spécifier une adresse IP pour obtenir des données, soit d'utiliser l'adresse IP par défaut trouvée par le script..
Version par défaut: http://iploc.mwudka.com/iploc/json/
Version statique (l'adresse IP est codée en dur): http://iploc.mwudka.com/iploc/68.162.155.110/json/// Définir l'emplacement // Adresse IP du visiteur $ ip = getenv ("REMOTE_ADDR"); // via IPLoc $ iploc = fichier_get_contents ("http://iploc.mwudka.com/iploc/$ip/json/"); // Format: JSON $ ipdata = json_decode ($ iploc, true);Après quelques essais, j'ai réalisé que la version par défaut de l'API ipLoc consistait à rechercher l'emplacement (Scottsdale, AZ, États-Unis) du serveur de mon fournisseur d'hébergement plutôt que l'emplacement IP de mon ordinateur personnel (Pittsburgh, PA, États-Unis). Pour contourner ce problème, j’ai décidé d’utiliser la version IP statique de l’API (Ligne 2 ci-dessus) et de lui transmettre l’adresse IP détectée par le getenv ("REMOTE_ADDR") variable php.
Après avoir vérifié si les données ont bien été renvoyées sous forme de chaîne au format json décodé, nous devons extraire uniquement les données spécifiques que nous voulons transmettre à l’API BeerMapping, qui est la ville et Etat.
// Erreur lors de la vérification si ($ ipdata ['city']) $ city = $ ipdata ['city']; $ state = $ ipdata ['region']; $ location = $ ville. ",". $ state; else $ err = "Aucune donnée de localisation renvoyée pour votre adresse IP:". $ ip;Étape 4. Intégration de Google Maps
Cette étape doit être effectuée maintenant car la prochaine étape ajoutera les points de localisation à Google Maps - et Google Maps doit être initialisé avant que cela ne puisse se produire..
Pour rendre l'intégration de Google Maps aussi simple et facile que possible, j'ai fait appel à une excellente classe PHP appelée Phoogle de System Seven Designs. Cette classe s’occupe de tous les problèmes liés à l’API de Google Maps tout en nous permettant de nous soucier des données..
Pour que cela fonctionne, il suffit d'inclure le fichier de classe que nous avons téléchargé: phoogle.php, puis définissez certains paramètres de base de la carte, tels que la hauteur, la largeur, le niveau de zoom et votre clé API Google Maps. (Obtenez-en un ici).
// Phoogle - GoogleMaps PHP Class require_once 'phoogle.php'; $ map = new PhoogleMap (); $ map-> setAPIKey ($ gmaps_api); // Utilisation de la variable définie à l'étape 2 $ map-> setHeight (450); $ map-> setWidth (750); $ map-> zoomLevel = 6; $ map-> showType = false;Étape 5. API BeerMapping
Puisque nous avons la ville et l'état combinés dans la variable $ location À partir de l'étape 3, nous avons tout ce dont nous avons besoin pour extraire des données de l'API BeerMapping. Bien sûr, nous avons également besoin d’une de leurs clés d’API, qui peut être demandée ici (environ 30 secondes, du début à la fin).
Un appel de l'API BeerMapping ressemble à ceci selon leurs exemples:
Exemple réel: http://beermapping.com/webservice/loccity/71515667a86b8ec7f58cd22e3af86f6e/pittsburgh,paAprès avoir substitué nos variables à la clé API (étape 2) et à l'emplacement (étape 3), notre appel d'API BeerMapping ressemble à ceci:
Notre exemple: http://beermapping.com/webservice/loccity/$beer_api/$locationAprès un peu de jeu avec cette API, j'ai trouvé que l'emplacement ne pouvait pas avoir d'espaces. Ainsi, le code ci-dessous supprime d’abord l’espace entre le format "ville, état". Ensuite, il remplace tous les autres espaces de l'emplacement par des traits de soulignement "_"..
// Emplacement du format à utiliser avec l'API $ locationF = str_replace (",", ",", $ location); // Supprimer l'espace avant "Etat" $ locationF = str_replace ("", "_", $ locationF); // Remplacer l'espace par un trait de soulignement dans le nom "Ville"Leurs données ne peuvent être retournées qu'au format xml, nous pouvons donc extraire facilement les données retournées par cet appel avec la fonction PHP simplexml_load_file.
// BeerMapping - Format: XML $ beerdata = simplexml_load_file ("http://beermapping.com/webservice/loccity/$beer_api/$locationF");
Comme le montre l'image, nous chargeons d'abord le fichier entier dans la variable $ beerdata. Après avoir vérifié si nous avons retourné des résultats…
// Erreur lors de la vérification de $ beererr = $ beerdata-> location-> id; // $ beererr sera 0 s'il n'y a pas de lieux retournés si ($ beererr == '0') $ err = "Aucune brasserie n'a été trouvée dans". $ location; autre… L'étape suivante consiste à parcourir chaque barre / pub renvoyé dans l'appel, en extrayant toutes les données nécessaires pour pouvoir être transférées dans Google Maps (étape 4).
$ brasseries = $ beerdata-> emplacement; $ barcount = count ($ brasseries); //Combien? foreach ($ brasseries en tant que $ brasseries) $ name = $ brasseries-> nom; $ link = $ brasserie-> reviewlink; $ street = $ brasserie-> rue; $ ville = $ brasserie-> ville; $ state = $ brasserie-> state; $ zip = $ brasserie-> zip; $ phone = $ brasserie-> téléphone; // Point de localisation défini pour l'API Google Maps $ map-> addAddress ("$ street $ city $ state $ zip", "$ name
rue $
$ ville, $ état $ zip
Phone: $ phone ");?>La ligne 1 ci-dessus définit l'emplacement de la structure des "emplacements". La ligne 2 compte le nombre d '"emplacements" renvoyés par le résultat de l'API. Les lignes restantes utilisent une boucle foreach pour parcourir chaque "emplacement" et extraire ses informations d'adresse. La ligne 14 définit un "point" pour chaque brasserie sur notre carte Google..
Étape 6. Génération HTML
Après avoir terminé tout le code PHP que nous avons créé, nous pouvons maintenant l’afficher. Les premières lignes ci-dessous sont standard dans n'importe quel document HTML, mais nous revenons ensuite à l'utilisation de PHP. Nous vérifions d'abord si la variable $ err est FALSE - ce qui voudrait dire que le $ err variable est vide, ou que nous n'avons jamais reçu d'erreur. Si nous n'avons jamais eu d'erreur, nous cracherons la carte Google, sinon nous cracherons un message d'erreur.
Bars à proximité <?php echo $location; ?> 
Développé par Chris Cagle pour NETTUTS
"; $ map-> printGoogleJS (); $ map-> showMap (); echo"". $ emplacement." (". $ barcount." Bars)
"; else echo"". $ err."
";;?>Après avoir ajouté du texte et des CSS, vous avez maintenant une belle page Web qui affiche tous les bars et pubs à proximité de l'emplacement de la personne qui consulte la page Web..
Voir la démo de la page telle qu'elle est maintenant. Le mashup fonctionne très bien maintenant, mais nous avons encore une amélioration qui fera toute la différence en matière d’assurance-chômage..
Étape 7. Modification du code pour permettre aux visiteurs de saisir des emplacements
À ce stade, notre page fonctionne parfaitement, mais il y a une petite mise en garde: le visiteur ne peut voir que les barres de son emplacement actuel. Que se passe-t-il si le visiteur veut des barreaux de recherche dans une ville différente plutôt que celle que notre API IP lui a renvoyée? Tout visiteur voudrait avoir la possibilité de spécifier le lieu de la recherche dans.
Pour permettre cela, nous aurons un formulaire simple qui acceptera le visiteur dans une ville et un état, puis rechargera la page pour l'emplacement indiqué et ignorer complètement l'appel de l'API ipLoc. Nous allons insérer ce code juste avant notre
ligne à l'étape 6.
Pour que cela fonctionne, nous devrons envelopper le code que nous avons créé à l'étape ipLoc (étape 3) dans une instruction if qui vérifie si le formulaire a été soumis ou non. Si le formulaire * n'a pas été * soumis (ce qui se produira à chaque chargement initial de la page), il utilisera le code de géolocalisation IP ipLoc. Si le formulaire * a été soumis, cela prendra ce que l'utilisateur a soumis et définira notre $ location variable à celle.
// Définir l'emplacement si (isset ($ _ POST ['loc'])) // via l'entrée utilisateur $ location = $ _POST ['loc']; else // Adresse IP du visiteur $ ip = getenv ("REMOTE_ADDR"); // via IPLoc $ iploc = fichier_get_contents ("http://iploc.mwudka.com/iploc/$ip/json/"); // Format: JSON $ ipdata = json_decode ($ iploc, true); // Erreur lors de la vérification si ($ ipdata ['city']) $ city = $ ipdata ['city']; $ state = $ ipdata ['region']; $ location = $ ville. ",". $ state; else $ err = "Aucune donnée de localisation renvoyée pour votre adresse IP:". $ ip;Étape 8. Assembler tout
Voir la démo de l'application finale.
Vous pouvez afficher le code source du projet final (qui correspond en gros aux étapes ci-dessus) et voir comment j'ai fini par combiner 3 API distinctes dans une seule application. Promenez-vous dans le répertoire API sur ProgrammableWeb et voyez ce que vous pouvez créer vous-même. Travailler avec des API est ma nouvelle obsession, car il est excitant de pouvoir créer quelque chose de nouveau et d’utile à partir des données de quelqu'un d’autre. Si ce tutoriel vous a aidé à mashup plusieurs API, postez-les ici - j'aimerais les voir..
Accentsconagua
