Share
Les développeurs frontaux sont confrontés à de nombreux défis lors de la création de sites proposant des solutions répétitives. Tous les sites utilisent un squelette DOM similaire, ainsi que de nombreuses fonctionnalités et attributs communs. Volo a pour objectif de supprimer une partie de l'effort du processus, permettant aux développeurs de se concentrer sur les nouveaux aspects d'un projet, comme ceux-ci..
Si vous ajoutez un fichier JavaScript qui n'est pas compatible AMD, Volo tentera de le convertir pour vous..
Volo est une application qui aide les développeurs frontaux en automatisant leurs processus. Il vous permet de créer des projets basés sur un modèle. vous pouvez étendre ces modèles et configurer des commandes personnalisées pour automatiser des tâches répétitives.
Volo a été créé avec une relation très spéciale avec GitHub; il comprend les dépôts GIT, ainsi que les branches et les tags. Il n'y a pas de paquet ou de dépôt spécial Volo; si quelque chose est sur GitHub, vous pouvez l’utiliser dans votre projet. C’est ce qui distingue Volo des applications similaires.
Volo a été créé par James Burke, le même James Burke qui a créé la très populaire bibliothèque require.js.
Cela ne vous surprendra peut-être pas que Volo a un flux de travail très avisé; cela suppose que vous souhaitiez utiliser le bon format AMD pour les fichiers et que vous fournissiez des préréglages sur l'endroit où placer les fichiers.
Est-ce une mauvaise chose? Pas vraiment - vous devriez le faire de toute façon. En outre, vous pouvez remplacer les commandes si vous en avez besoin..
Commençons donc par quelques commandes de Volo..
Vous utiliserez probablement le créer commande en premier. J'ai mentionné que Volo est profondément enraciné dans GitHub, mais il est intéressant de noter que Volo n'utilise pas réellement GIT. Généralement, vous souhaitez simplement obtenir un instantané d’un référentiel, et non l’ensemble de son historique de validation; donc Volo ne télécharge que les fichiers du repo sans les données GIT réelles.
La méthode la plus simple pour référencer un modèle consiste à simplement fournir le nom du référentiel. Par exemple, si vous souhaitez copier un référentiel nommé 'starterTemplate', vous pouvez simplement taper la commande suivante:
volo create myApp starterTemplate
En supposant que le référentiel soit le premier résultat renvoyé par GitHub, Volo téléchargera et "installera" le modèle dans un nouveau répertoire appelé monApp.
C'est un peu risqué, surtout si vous préférez nommer vos pensions avec des titres très génériques. Heureusement, vous pouvez spécifier plus de détails pour affiner le jeu de résultats. Le système de filtrage est assez avancé pour déchiffrer votre entrée. Fondamentalement, vous pouvez utiliser:
volo create appName userName / repoName / [branch | tag]
Vous pouvez également omettre certaines informations. Par exemple, vous pouvez omettre le nom d'utilisateur GitHub, obligeant Volo à rechercher le premier projet portant le nom et la branche donnés..
Sinon, vous pouvez spécifier le nom d'utilisateur mais omettre la version / branche, et Volo téléchargera la dernière version étiquetée..
Si aucun tag n'est trouvé, Volo revient à la branche principale..
De plus, vous n'êtes pas obligé de spécifier une version exacte. Taper une expression comme "> 1.0"indique à Volo de télécharger une version supérieure à 1.0.
Dernier point mais non le moindre, vous n'avez pas besoin d'utiliser un dépôt de Github; vous passez simplement l'URL à l'archive zip que vous souhaitez utiliser comme modèle. Pour copier un dossier local, vous pouvez utiliser le format suivant:
local: / chemin / vers / répertoire
Il existe donc diverses options que vous pouvez utiliser pour sélectionner votre référentiel souhaité, et vous pouvez même omettre le nom du référentiel pour utiliser le propre modèle par défaut de Volo..
Vous ne savez pas qui est le propriétaire d'un repo populaire? Utilisez le chercher commander.
volo recherche repoName
Il utilise la même recherche GitHub que créer; vous pouvez donc être sûr que le premier dépôt dans vos résultats de recherche est celui que Volo téléchargera.
le chercher Cette commande sert uniquement à rechercher un repo ou à récupérer ses informations. En conséquence, il manque certaines des fonctionnalités présentes dans le créer commander. Par exemple, James a créé quelques modèles officiels que vous pouvez utiliser, mais vous pouvez ne pas connaître leurs noms..
L'exécution
volojs volojs / templateaffiche quelques bonnes options à utiliser.
Vous n'avez pas besoin d'être trop précis avec vos critères de recherche; Volo fait un travail décent pour trouver ce que vous voulez. C'est étonnamment rapide.
Si vous souhaitez plus d’informations sur un référentiel, telles que des numéros de version ou des liens, vous pouvez utiliser le nom approprié. Info commander. Un des résultats de volojs volojs / template est un repo nommé 'volojs / create-responsive-template'. Vous pouvez récupérer plus d'informations sur ce dépôt en tapant:
volo info volojs / create-responsive-template
En utilisant le créer, chercher, et Info commandes, nous pouvons supposer que nous avons créé notre application. Alors quelle est la prochaine?
Ensuite, nous devons ajouter des dépendances. C’est assez facile, et il utilise les mêmes options que le créer commande avec quelques ajouts. En plus de pouvoir spécifier un utilisateur GitHub, une branche / balise ou une URL vers un zip, le ajouter commande vous permet d'ajouter "#"pour intégrer un fichier spécifique à partir du référentiel. De nombreux dépôts ont généralement la bibliothèque JaveScript souhaitée, mais il est fourni avec des démos et de la documentation. Le plus souvent, vous ne voulez que la bibliothèque et ajouter commande vous permet de faire cela.
Imaginons que vous vouliez télécharger une bibliothèque appelée "foo.js". Vous pouvez simplement taper:
Ajouter un utilisateur / fooRepo / v1.5 # foo.js
Ceci télécharge le fichier zip entier de GitHub, extrait seulement les foo.js fichier et l'ajoute à votre projet. Cette fonctionnalité de hashtag n'est pas spécifique aux noms de fichiers; vous pouvez passer un nom de dossier pour ajouter uniquement le dossier spécifié à votre projet.
J'ai mentionné plus tôt que Volo s'attend à ce que vous pratiquiez la DMLA de manière appropriée. Donc, si vous ajoutez un fichier JavaScript qui n'est pas compatible AMD, Volo essaiera de le convertir pour vous. Le processus est assez simple.
Il commence par demander quelles dépendances votre fichier JavaScript utilise.
Vous pouvez soit passer les noms des dépendances dans une liste séparée par des virgules, ou éventuellement leur donner un nom de variable. Voici un exemple de ce que vous pouvez taper pour un plugin jQuery:
jquery1.9 = jQuery, jqueryui
Cela indique à Volo que la bibliothèque spécifiée nécessite le fichier nommé jquery1.9 et le passer sous le nom de variable jQuery. Ensuite, nous ajoutons une virgule pour déclarer la dépendance suivante: jqueryui.
Une fois que vous avez fini de déclarer vos dépendances, vous pouvez déclarer ce que vous souhaitez exporter à partir de votre script. Vous n’exportez généralement rien dans un plugin jQuery; cela est géré par jQuery lui-même. Mais si vous avez une bibliothèque JavaScript qui doit exporter quelque chose, il vous suffit de taper le nom de la variable souhaitée dans votre script. Vous pouvez utiliser cette fonction de conversion à la volée avec le amdifier commander:
volo amdify
Il suffit de passer le nom de fichier désiré.
Vous pouvez également renommer automatiquement un fichier téléchargé. Par exemple, vous voudrez peut-être ajouter un fichier nommé jquery.pluginName.1.3.min.js, mais ce n'est pas un fichier commode à référencer dans vos scripts. Vous pouvez passer un nouveau nom comme paramètre final à la ajouter commande, et Volo renommera le fichier.
En résumé, nous pouvons installer ce plugin pseudo jQuery depuis un dépôt en tapant ce qui suit:
volo add UserName / RepoName / v1.3 # jquery.pluginName.1.3.min.js nouveauNom.js
Volo téléchargera le référentiel spécifié, extraira uniquement le fichier donné pour le plug-in, vous demandera comment le convertir pour le rendre conforme à AMD et placez-le dans votre projet sous le nouveau nom. C'est beaucoup de contrôle et d'automatisation dans une commande très facile à utiliser.
Passons maintenant à Volofiles.
Volofiles vous permettent d’automatiser des tâches en créant des commandes de type macro. Par exemple, les utilisateurs de CoffeeScript et SCSS peuvent exécuter manuellement les commandes suivantes pour compiler leurs fichiers:
café -c café-lib / -o lib / café -c app.coffee sass css / main.scss css / main.css
C'est beaucoup de commandes à exécuter à plusieurs reprises. Naturellement, on peut ajouter ces commandes à un fichier bash, mais l'automatisation de plusieurs opérations implique très probablement un fichier bash semi-compliqué ou plusieurs fichiers bash. Avec Volo, vous créez un fichier nommé volofile. Dans ce fichier, vous créez un objet JavaScript contenant les commandes à exécuter. Ensuite, vous pouvez simplement les appeler comme s'il s'agissait de commandes natives.
Voici un échantillon volofile en utilisant des paramètres communs:
Accentsconagua
module.exports = 'hi': 'summary': 'Une commande pour dire bonjour', 'doc': 'Saisir le texte du doc ici ou charger un fichier', 'validate': function (namedArgs, arg1) if ( namedArgs.cancel == "true") return new Error ('Le paramètre "cancel" a été défini "); , 'run': ['echo "Hello World"', "echo" Comment allez-vous aujourd'hui? "']," nextCommand ": … Vous pouvez alors taper volo -h pour voir ces commandes et leur résumé. Entrer volo salut -h montre tout ce qui est dans le doc champ. le valider La clé est facultative et vous pouvez l'utiliser à des fins de test pour éventuellement quitter en cas de problème. Dernier point mais non le moindre, nous avons le courir propriété, qui contient la liste des commandes à exécuter. Vous pouvez entrer une simple chaîne ou un tableau de chaînes, et Volo traitera et exécutera chacune d’elles en conséquence..
Avec la commande ci-dessus, je pourrais taper:
volo salut
Pour obtenir le résultat, ou:
volo hi cancel = true
Pour déclencher le si instruction et quitte avec le message d'erreur fourni. C’est probablement l’exemple le plus élémentaire, et vous avez beaucoup plus d’options disponibles lors de la création de vos propres commandes..
J'ai mentionné que Volo traite chaque chaîne du courir propriété. L'exemple ci-dessus utilise le paramètre "dernier recours". Volo commence par rechercher certaines caractéristiques dans vos commandes et n'exécute la chaîne dans le terminal standard que s'il ne peut pas déterminer ce que vous voulez. Vous avez deux options auparavant, elles s'appellent 'v' et 'n'.
v' et 'n' Mots clésCes deux mots clés vous permettent d'injecter des fonctionnalités personnalisées dans vos chaînes d'exécution. Si vous avez besoin de lire des fichiers, d’exécuter des processus ou d’autres tâches spécifiques au système d’exploitation, vous souhaitez utiliser le 'v' mot-clé. Il suffit d'écrire la commande (par exemple. rm file.js) ne fonctionne que sur les systèmes d'exploitation prenant en charge la commande donnée. En utilisant vAvec ses commandes, vous assurez un support multi-plateforme de votre volofile. Par exemple, vous pouvez ajouter la chaîne d'exécution suivante si vous souhaitez copier un fichier d'un emplacement à un autre:
lancer: 'v.copyFile file_one file_two'
Cette commande est multi-plateforme. Pour voir la liste complète des 'v'options, jetez un oeil sur le fichier source. Vous pouvez ajouter des paramètres avec un espace (comme dans le terminal) au lieu d'utiliser des crochets.
Ensuite nous avons le n mot-clé, qui mappe aux modules exécutables node.js. Si vous spécifiez une commande sous le n mot-clé, Volo vérifie s’il peut trouver l’exécutable de node.js dans le fichier privé du projet en cours. node_modules dossier, et il revient au dossier de modules global node.js s’il n’en trouve pas un.
Node.js, ou plus précisément NPM, possède une très grande collection d'outils de développement de qualité créés par de nombreuses personnes intelligentes et créatives..
Volo exploite cette énorme ressource en vous permettant de charger leurs exécutables directement dans vos fichiers Volofiles. James Burke a même créé un modèle pour créer vos propres modules node.js spécialement pour Volo, mais nous y reviendrons dans une minute..
Un exemple d'utilisation du n mot-clé est le module CoffeeScript. Si vous voulez compiler un répertoire contenant des fichiers CoffeeScript, vous pouvez écrire la commande suivante:
'run': 'n.coffee -c coffee-lib / -o lib /'
Même si CoffeeScript n’est pas installé globalement, vous pouvez vous assurer qu’il fonctionnera sur tous les systèmes d’exploitation du système local. node_modules dossier.
Vous pouvez maintenant utiliser le modèle de commande que j'ai mentionné (à télécharger ici, d'ailleurs) pour créer une commande Volo réutilisable à utiliser dans tous vos projets. Par exemple, si vous avez un module qui sauvegarde votre application, vous pouvez l'inclure dans tous vos projets..
Créez un module NPM standard qui exporte les propriétés susmentionnées (
résumé,couriretc) et avez besoin du module dans votre Volofile.
Donc, avec votre paquet ajouté à NPM, vous pouvez simplement taper:
npm install commandName
Et dans votre volofile, tapez simplement:
module.exports = 'commandName': require ('node_modules / commandName / index'); Où index.js est le nom de votre extension. Parce que votre fichier exporte les propriétés nécessaires, les options seront directement injectées dans votre fichier volofile sous le nom de la commande donnée. Je n'appellerais pas vraiment cela une fonctionnalité personnalisée (c'est du JavaScript standard), mais c'est quand même bien de savoir que vous avez cette option.
Maintenant que la théorie n’a plus sa place, examinons un exemple concret. Nous allons construire une application en utilisant Volo.
Volo est un package NPM, son installation est donc aussi simple que:
(sudo) npm install -g volo
Pour cet article, je pensais créer une petite page Web pour générer une carte de votre région, indiquant les maires de FourSquare de vos sites préférés. Ce n'est pas une idée profonde incroyable, mais cela mettra Volo à l'épreuve.
Donc, pour commencer, nous avons besoin d'un repo. Vous pouvez trouver un certain nombre de modèles de base, créés spécifiquement pour Volo, en effectuant simplement une recherche dans GitHub. Le modèle par défaut est livré avec le strict nécessaire: un squelette HTML simple et un dossier JavaScript avec une configuration barebone AMD..
Vous obtenez également un fichier volofile avec une commande de construction pour compiler les fichiers JavaScript et CSS du projet..
Je ne vais pas utiliser le modèle standard, car j'aimerais avoir quelques ressources supplémentaires. Après une recherche rapide dans GitHub, j'ai trouvé un modèle officiel contenant les valeurs par défaut, le cadre d'amorçage et d'autres ressources..
Donc, pour créer notre nouveau projet (que j'ai nommé 'turf'), vous pouvez simplement taper ce qui suit dans une fenêtre de terminal:
volo create turf cd turf volojs / create-responsive-template
Cela crée le dossier du projet et télécharge un instantané du référentiel spécifié. Ensuite, pour télécharger d'autres ressources. Nous allons évidemment utiliser jQuery, ajoutons-le:
volo add jquery
Nous avons également besoin d'un moyen d'afficher une carte sur la page. Google Maps vient à l’esprit, nous allons donc utiliser une bibliothèque appelée gmaps. Le fichier JavaScript contient la bibliothèque entière. par conséquent, nous n'avons pas vraiment besoin du reste de la pension. En outre, vous pouvez voir que la bibliothèque est stockée dans une variable nommée GMaps, et il nécessite l'API Google Maps en tant que dépendance.
Il y a un petit problème avec cela: l'API Google Maps n'est pas conforme à AMD et est une bibliothèque asynchrone..
Lorsque vous chargez une seule URL, celle-ci continue de charger seule d'autres ressources. Cela rend problématique l’utilisation de require.js standard, mais il existe un plugin qui gère cette situation exacte. Cela fait partie d'un repo appelé "requirejs-plugins", mais encore une fois, nous n'avons pas besoin du repo complet. Donc, tapez ce qui suit dans la fenêtre du terminal:
volo add requirejs-plugins # src / async.js
Avec le plugin async, nous pouvons charger nos dépendances spéciales asynchrones.
Nous avons deux options pour installer le plugin actuel:
Je vais vous montrer comment utiliser les deux options. Pour convertir le fichier, ajoutez-le simplement. Volo détectera automatiquement que le fichier doit être converti:
volo add HPNeo / gmaps # gmaps.js
Volo a été créé avec une relation très spéciale avec GitHub; il comprend les dépôts GIT, ainsi que les branches et les tags.
Selon la page Github du projet, il s'appuie sur l'API Google Maps. La saisie de l'URL pose un petit problème car elle contient des caractères non pris en charge (le signe égal). Alors utilisons un espace réservé; il suffit de taper Google Maps et appuyez sur Entrée. Ensuite, nous devons spécifier ce que nous voulons exporter. Type GMaps (avec les deux lettres majuscules; c'est le nom de la variable) et appuyez sur Entrée. Volo finira de le convertir et de l’ajouter au js / lib dossier.
Pourquoi le js / lib dossier? Si vous regardez le package.json fichier à la racine de votre projet, vous verrez une entrée appelée baseUrl sous le amd propriété. Cela indique à Volo où placer tous les fichiers JavaScript téléchargés. Il y a en fait un certain nombre d'endroits où Volo se tourne pour décider où mettre les choses:
baseDir propriété sous une entrée nommée volo baseUrl propriété à nouveau sous volo baseUrl sous amd comme nous avons icijs dossier dans votre répertoire actueldes scripts dossier dans votre répertoire actuelSi aucun de ces emplacements n'existe, Volo place le fichier dans le répertoire en cours..
Avec le module installé, nous devons toujours remplacer l’espace réservé que nous avons créé pour l’API Google Maps. Ouvrez le www / js / lib / gmaps.js fichier et remplacez le paramètre fictif dans la première (ou deuxième) ligne par ce qui suit:
async! http: //maps.google.com/maps/api/js? sensor = false & libraries = places
Cela indique à Volo d'inclure le plug-in async et de lui transmettre l'URL de l'API Google Maps..
Le module GMaps est maintenant entièrement installé, mais vous devez entrer des coordonnées de longitude et de latitude spécifiques, ce que la plupart des utilisateurs ne connaîtront pas. Nous devrions donc avoir une sorte de plugin autocomplete qui convertit les noms de lieux en coordonnées.
Après une autre recherche rapide dans Github, j'ai trouvé un plugin jQuery appelé geocomplete by ubilabs. Il n’est pas non plus compatible AMD, mais nous utiliserons la fonctionnalité shim de require.js. Dans le terminal, tapez la commande suivante:
ajouter -amdoff ubilabs / geocomplete # jquery.geocomplete.js geocomplete
le amdoff Cette option empêche Volo de convertir le fichier et le dernier paramètre le renomme. jquery.geocomplete.js à geocomplete.js. Ce n'est pas obligatoire, mais cela rend le référencement plus pratique.
Maintenant ouvrez le www / js / app.js et remplacez la déclaration de configuration require.js en haut:
requirejs.config (baseUrl: 'js / lib', chemins: app: '… / app', shim: 'geocomplete': deps: ['jquery', 'async!! http: //maps.google .com / maps / api / js? sensor = false & libraries = places ']);
Juste pour parcourir les paramètres qui étaient déjà là, baseUrl require.js indique où rechercher les fichiers relatifs, et le paths.app option indique à require.js que si un nom de module a une référence à un emplacement nommé "app", il doit être remplacé par ce qui est spécifié ('… / app').
le cale section est ce que j'ai ajouté au fichier. Il indique à require.js de commencer par charger jQuery et l'API Google Maps lorsqu'un utilisateur charge un fichier nommé géocomplète. Vous pouvez éventuellement définir une autre propriété appelée exportations, le nom de la variable à exporter. Nous n'avons pas besoin d'exporter quoi que ce soit car il s'agit d'un plugin et il est attaché à l'objet jQuery.
À ce stade, nous disposons des fichiers nécessaires pour afficher la carte et récupérer les coordonnées nécessaires. Nous n'avons écrit aucun code, mais nous avons toutes les dépendances.
Pour commencer à prototyper notre application, nous devons écrire du HTML. Ouvrez le index.html déposer et supprimer tout ce qui se trouve à l'intérieur des balises body sauf le element at the bottom. You should be left with a file like the following:
Ensuite, ajoutez un champ de saisie de texte pour le champ de recherche et un espace réservé pour la carte réelle. Votre nouvelle zone de corps devrait ressembler à ceci:
C'est un peu plus que l'essentiel pour qu'il soit conforme aux règles CSS de bootstrap. J'ai donné au texte entré un identifiant de chercher et de la carte un identifiant de carte. Maintenant ouvrons le fichier JavaScript.
Volo est une application qui aide les développeurs frontaux en automatisant leurs processus.
Je vais le décomposer pour ceux d'entre vous qui sont nouveaux pour require.js. La principale raison d'utiliser quelque chose comme require.js est de s'assurer que les dépendances de vos scripts sont chargées quand et seulement quand votre script en a réellement besoin. Cela augmente la vitesse globale de votre site et simplifie vos fichiers HTML (vous n'avez pas besoin de faire référence à de nombreux scripts).
Vous pouvez voir que le script au bas du fichier HTML pointe vers la bibliothèque require.js, et qu'il comporte également data-main attribut qui s'exécute automatiquement une fois que require.js est prêt.
Si vous ouvrez js / app.js, notre section de configuration modifiée et une instruction require en bas. Notez que vous n'avez pas besoin de l'extension de fichier. Dans le fichier d'index, nous avons référencé js / app (sans le .js), et ici charger app / main.
Normalement, une référence à app / main mapperait vers un fichier appelé main.js dans un dossier appelé app (tous relatifs à la js / lib dossier). Mais rappelez-vous dans la configuration, nous avons dit toute référence à un emplacement appelé app, devrait être remplacé par … / App. Au lieu de chercher js / lib / app / main.js, require.js va récupérer js / app / main.js.
Ensuite, ouvrez js / app / main.js, supprimez tout et tapez ce qui suit:
define (['jquery', 'gmaps', 'geocomplete'], fonction ($, gmaps) $ (document) .ready (function () $ ("# recherche"). geocomplete ();) ) Le premier paramètre est un tableau de nos dépendances. La seconde est une fonction avec des noms de paramètres pour jQuery ($) et GMaps (gmaps). Rappelez-vous que geocomplete est un plugin jQuery, il n’ya donc aucune raison de lui attribuer un paramètre correspondant…
La fonction transmise en tant que deuxième paramètre est exécutée une fois le chargement des dépendances terminé..
Dans cette fonction, nous exécutons le géocomplète () méthode quand le document est prêt.
Vous pouvez maintenant ouvrir la page dans votre navigateur, et si tout s'est bien passé, la zone de texte devrait indiquer "Entrer un lieu". Commencez à taper et vous verrez des résultats.
Ensuite, nous devons gérer l’événement lorsqu’une correspondance est trouvée, c’est-à-dire lorsque l’utilisateur appuie sur la touche Entrée du nom d’un lieu. Ces événements sont: géocode: résultat et le géocode: erreur. Ajoutez le code pour gérer ces événements:
$ (document) .ready (function () $ ("# search"). geocomplete () .bind ("geocode: result", function (event, result) // On Result) .bind ("geocode: erreur ", fonction (événement, résultat) alert (" Emplacement introuvable "););); L'étape suivante consiste à récupérer la latitude et la longitude et à générer une nouvelle carte. Les lat / long sont stockés dans des propriétés nommées geometry.location.hb et geometry.location.ib, respectivement. Ajoutez le code suivant à l'intérieur du géocode: résultat gestionnaire:
var lat = result.geometry.location.hb; var lng = result.geometry.location.ib; var map = new gmaps (div: "#map", lat: lat, lng: lng, height: '380px');
Nous stockons les coordonnées et chargeons une nouvelle carte. Créer une carte est simple: nous passons l'ID du conteneur avec les coordonnées et la hauteur.
Vous devriez maintenant pouvoir rechercher et afficher une carte. Ensuite, nous devons nous connecter avec Foursquare et afficher les "maires" de votre ville.
Nous avons d’abord besoin d’une interface avec l’API foursquare. Pour gagner du temps et rester dans le sujet, j'ai créé un référentiel que nous pouvons cloner. Donc, dans la fenêtre du terminal, tapez:
git clone https://github.com/gmanricks/MayorAPI www / foursquare
Cela télécharge le dépôt et le place dans un dossier nommé foursquare sous le www annuaire.
Ensuite, ouvrez foursquare.php et insérez votre identifiant client et votre secret client dans les constantes de la classe. Si vous ne possédez pas déjà ces informations, vous pouvez les obtenir auprès de Foursquare en enregistrant une application..
L’autre fichier dans le repo (data.php) récupère les coordonnées de la carte via les paramètres GET et retourne un objet JSON. Donc, pour ajouter les maires à la carte, nous devons réécrire le géocomplète: résultat gestionnaire d'événements:
.bind ("geocode: result", fonction (event, result) var lat = result.geometry.location.hb; var lng = result.geometry.location.ib; $ .get ("foursquare / data.php? lat = "+ lat +" & lng = "+ lng, fonction (d) var map = nouvelles cartes (div:" #map ", lat: lat, lng: lng, hauteur: '380px'); var places = JSON .parse (d); if (places.error) alert ("La limite de débit a été atteinte"); else pour (index var en endroits) var place = places [index]; if (place.mayor. photo) var html = ''+''+'
'+''+''+ lieu.mayor.name +''+''; map.drawOverlay (lat: place.lat, lng: place.lng, content: html); ); ) Nous définissons d'abord le lat et lng variables, mais au lieu de créer immédiatement la carte, nous attendons que notre demande Ajax soit complétée. Nous faisons environ onze appels d'API en coulisse, cela peut donc prendre dix ou quinze secondes..
Ensuite, nous nous assurons que la limite de débit n'a pas été atteinte et alertons l'utilisateur de manière appropriée. Enfin, nous parcourons les résultats en les ajoutant à la carte à l’aide d’une commande de la bibliothèque GMaps..
Vous pouvez maintenant ouvrir la page et la tester. tout devrait fonctionner! Avec un peu de style et un peu de design, cela pourrait ressembler à ceci:
Notre application est complète et la dernière étape consiste à l'optimiser. Commençons par supprimer les fichiers que nous n'utilisons pas. dans le js / app / dossier, vous pouvez tout supprimer sauf le main.js fichier. dans le js / lib / dossier, supprimez les fichiers nommés appCache.js et network.js. Vous n'avez pas non plus besoin du manifeste.webapp fichier, mais vous pouvez garder si vous le souhaitez.
Maintenant ouvrez le volofile, et vous pouvez voir que le modèle est livré avec une commande de construction assez compliquée pour optimiser et configurer les fichiers JavaScript et CSS du projet. Nous n'avons pas besoin d'un script aussi élaboré, aussi supprimez tout du fichier et remplacez-le par ce qui suit:
module.exports = 'build': 'summary': 'Commande pour compiler les fichiers source', 'run': '' v.rm www-build ',' v.copyDir www www-build ',' v. rm www-build / js ',' outils de nœud / r.js -o baseUrl = www / js / lib paths.app =… / app paths.requireLib = requis name = app include = requireLib out = www-built / js / lib / require.js ',' v.rm www-build / css ',' outils de noeud / r.js -o cssIn = www / css / app.css out = www-build / css / app.css '] ;
Volo est un outil universel: vous obtenez ce que vous y mettez.
C'est beaucoup plus simple. Ici, nous créons une commande nommée construire cela supprime le folde construit précédent s'il existe. Il copie ensuite la totalité www dossier comme base pour notre version compilée. Ensuite, nous supprimons le js répertoire (nous le remplacerons par la version optimisée).
Ensuite, nous exécutons l’optimiseur de require.js pour compiler les fichiers JavaScript dans un seul fichier. Vous remarquerez peut-être qu'il renomme le produit final en require.js; c'e
'+'