Créer une application web

Pour créer l’application Web pour le site Web du parc, vous allez utiliser ArcGIS Instant Apps. Instant Apps inclut une bibliothèque de modèles d’application et plusieurs options de configuration qui vous offrent la possibilité de concevoir une application sur mesure selon les besoins de votre public.

Remarque :

Si vous devez créer des fonctionnalités pour interagir avec le public et promouvoir les activités de loisir de plein air, utilisez la Solution Recreation Outreach. Ce didacticiel porte sur la création d’applications Web et natives. Les étapes décrites ici rassemblent les points à prendre en compte en vue de stimuler l’intérêt pour les activités de plein air.

Choisir un modèle d’application Web

Vous allez tout d’abord vous connecter à ArcGIS Online et choisir un modèle approprié avec Instant Apps.

  1. Connectez-vous à votre compte d’organisation ArcGIS.
    Remarque :

    Si vous ne disposez pas d’un compte d’organisation, consultez les options disponibles pour accéder aux logiciels.

  2. Sur le ruban, cliquez sur Content (Contenu).

    Option Content (Contenu)

    Vous accédez à votre page Content (Contenu) qui répertorie tout le contenu de votre compte. Cette page inclut également des options de création de contenu, ainsi que des applications.

  3. Cliquez sur Create app (Créer une application) et sélectionnez Instant Apps.

    Option Instant Apps dans le menu Créer une application

    La page de la bibliothèque Instant Apps s’affiche dans un nouvel onglet du navigateur. La bibliothèque inclut des modèles d’application contribuant à filtrer les fonctionnalités dont ils sont dotés. Étant donné que vous souhaitez convertir, à terme, votre application Web en une application native en utilisant ArcGIS AppStudio, vous allez rechercher les modèles qui sont compatibles avec AppStudio.

  4. Dans Search app capabilities (Rechercher des fonctionnalités d’application), saisissez AppStudio et sélectionnez appstudio.

    Zone de recherche avec AppStudio en tant que terme de recherche

    La bibliothèque est filtrée pour afficher les modèles prenant en charge la fonctionnalité de compatibilité avec AppStudio. Vous souhaitez que votre application offre la possibilité d’afficher l’élévation des sentiers de randonnée.

    Pour afficher l’élévation d’un itinéraire linéaire (un sentier, par exemple), utilisez un profil d’élévation. Il s’agit d’une coupe transversale en deux dimensions d’un paysage qui décrit les augmentations et les diminutions de l’élévation. Vous allez filtrer encore plus la bibliothèque pour afficher les modèles qui ont des fonctions de profil d’élévation.

  5. Dans Search app capabilities (Rechercher des fonctionnalités d’application), saisissez Profil d’élévation et sélectionnez profil d’élévation.

    Zone de recherche avec Profil d’élévation en tant que termes de recherche

    La fonctionnalité est ajoutée sous forme d’une filtre. À présent, la bibliothèque contient un élément : le modèle Nearby (À proximité). Vous allez vérifier la description de l’application pour vérifier qu’il s’agit bien de l’application désirée.

  6. Dans Nearby (Proximité), cliquez sur le bouton options et sélectionnez App description (Description de l’application).

    Option Description de l’application

    Une fenêtre s’affiche et présente le texte de description de l’application. La description indique que ce modèle guide les utilisateurs vers les points d’intérêt selon la recherche d’une localisation et fournit des feuilles de route. Associé aux fonctionnalités AppStudio et au profil d’élévation, ce modèle semble correspondre exactement à ce que vous désirez pour aider les visiteurs du parc à rechercher les sentiers de randonnée à proximité et en savoir plus à leur propos.

  7. Dans la fenêtre de description, cliquez sur Close (Fermer).
  8. Dans Nearby (Proximité), cliquez sur Choose (Sélectionner).
    Conseil :

    Pour prévisualiser un modèle d’application avant de le sélectionner, cliquez sur Sample (Exemple) pour étudier un exemple d’application utilisant le modèle.

    Bouton Sélectionner pour le modèle À proximité

    La fenêtre Create App (Créer une application) apparaît avec les options permettant de définir un titre et des balises de recherche pour votre application.

  9. Dans Give your app a title (Donner un titre à votre application), saisissez Sentiers de randonnée des Monts de Santa Monica.
  10. Dans Add tags (Ajouter des balises), saisissez Los Angeles et Randonnées, en appuyant sur Entrée après chacune :
  11. Vous pouvez également sélectionner un dossier dans lequel enregistrer l’application.

    Fenêtre Créer une application avec le titre et les balises spécifiées

  12. Cliquez sur Create App (Créer une application).

    L’application est créée et la page de configuration d’application s’affiche.

Choisir une carte

Vous allez ensuite configurer le modèle en fonction de vos besoins. Vous allez commencer par sélectionner une carte à afficher dans votre application. Cette carte indiquera les sentiers de randonnées, et leurs points de départ, dans les Monts de Santa Monica.

  1. Si nécessaire, fermez la fenêtre Welcome to the App Setup (Bienvenue dans la configuration d’application).

    La page de configuration d’application est définie sur le mode express par défaut. Ce mode inclut un sous-ensemble simplifié de tous les paramètres d’application pour attirer l’attention sur les paramètres les plus importants et vous guider pendant le processus de configuration.

    Vous pouvez désactiver le mode express pour voir tous les paramètres, ou rechercher des paramètres spécifiques s’ils sont nécessaires, mais ce mode convient dans le cadre du présent scénario. La première étape consiste à choisir une carte pour votre application.

  2. Cliquez sur Step 1. Map (Étape 1. Carte).

    Step 1. Option Carte

    Vous allez sélectionner une carte Web des sentiers de randonnée des Monts de Santa Monica qui a déjà été créée pour vous. D’ordinaire, vous devrez certainement créer vous-même la carte que vous voulez afficher dans votre application, mais pour les besoins de ce didacticiel, vous allez considérer que vous avez déjà créé la carte.

    Remarque :

    Pour en savoir plus sur la création des cartes Web, essayez Démarrer avec ArcGIS Online.

  3. Cliquez sur Select a map (Sélectionner une carte).

    Bouton Sélectionner une carte

    La fenêtre Select a map (Sélectionner une carte) apparaît. Par défaut, la fenêtre affiche des cartes que vous possédez. La carte que vous allez utiliser appartient au compte d’administration Learn ArcGIS.

  4. Cliquez sur My Content (Mon contenu) et choisissez ArcGIS Online.

    Option ArcGIS Online

    La fenêtre affiche maintenant toutes les cartes qui sont partagées publiquement sur ArcGIS Online.

  5. Dans la barre de recherche, saisissez Santa Monica Trails Nearby owner:Learn_ArcGIS.

    Recherche des sentiers de randonnée de Santa Monica

    La liste des cartes est filtrée pour n’afficher qu’un résultat : Santa Monica Trails - Nearby, appartenant à Learn_ArcGIS.

  6. Pour Santa Monica Trails - Nearby, cliquez sur Select a map (Sélectionner une carte).

    Bouton Sélectionner une carte dans le résultat de la recherche

    L’aperçu de l’application est mis à jour pour afficher la carte des sentiers.

    Carte montrant les sentiers de randonnée, et leurs points de départ, dans les Monts de Santa Monica

Configurer les fonctionnalités

Une application ne se contente pas d’afficher une carte. Elle contient également des fonctionnalités qui changent la façon dont les utilisateurs interagissent et dont ils tirent parti de l’application. Les fonctionnalités principales que vous souhaitez que votre application possède sont la possibilité de rechercher les sentiers de randonnée à proximité, la possibilité d’afficher le profil d’élévation des randonnées et la possibilité de présenter les feuilles de route des randonnées.

En premier lieu, vous allez spécifier la distance de recherche que les visiteurs appliquent pour rechercher les sentiers à proximité et leurs points de départ.

  1. Dans la fenêtre de configuration, cliquez sur Back (Retour).

    Bouton Retour

    Vous revenez à la liste des paramètres essentiels. L’étape suivante dans la liste est About (À propos), qu’il est possible d’ajuster afin de modifier le texte figurant dans l’application et destiné à aider les utilisateurs à mieux comprendre son utilisation. L’application contient déjà un texte par défaut décrivant les différentes méthodes pour rechercher des localisations sur la carte ; vous n’allez pas modifier ce paramètre.

    La troisième étape, Nearby (À proximité) contient les paramètres de la fonctionnalité de recherche de l’application.

  2. Cliquez sur Step 3. Nearby (Étape 3. À proximité).

    Option Step 3. Nearby (Étape 3. À proximité)

    Vous allez sélectionner les couches qui seront incluses dans les résultats de recherche. Vous désirez que les utilisateurs soient en mesure de rechercher à la fois les sentiers et les points de départ.

  3. Dans Layers to include in results (Couches à inclure dans les résultats), cochez SAMO Public Trailheads and Access Points et SAMO Public Trails.

    Paramètre Couches à inclure dans les résultats

    La distance de recherche par défaut est de 2 kilomètres, ce qui n’est pas élevé pour un parc d’une superficie de 638 kilomètres carrés (soit environ 246 miles kilomètres). Vous allez augmenter la distance et changer également l’unité de mesure pour choisir les miles.

  4. Dans Maximum search distance (Distance de recherche maximale), saisissez 5. Pour Search Units (Unités de recherche), choisissez miles.

    Paramètres Distance de recherche maximale Unités de recherche

    Vous avez configuré la fonctionnalité de recherche. À présent, vous allez configurer un profil d’élévation permettant aux visiteurs de voir l’élévation du sentier pour qu’ils déterminent le sentier à emprunter. Le profil d’élévation n’est pas inclus dans la liste des paramètres essentiels dans la fenêtre Express, vous allez donc le rechercher.

  5. Cliquez sur Search settings (Paramètres de recherche).

    Option Paramètres de recherche

  6. Dans la fenêtre Search settings (Paramètres de recherche), saisissez Elevation et cliquez sur Add elevation profile link to popup (Ajouter un lien vers le profil d’élévation à la fenêtre contextuelle).

    Résultat de recherche Ajouter un lien vers le profil d’élévation à la fenêtre contextuelle pour les entités linéaires

    Étant donné que ce paramètre n’apparaît pas en mode express, vous êtes invité à désactiver le mode express pour pouvoir continuer.

  7. Dans la fenêtre Turn off express mode (Désactiver le mode express), cliquez sur Continue (Continuer).

    La fenêtre Results (Résultats) s’ouvre et montre tous les paramètres des résultats de recherche disponibles.

  8. Activez Add elevation profile link to popup (Ajouter un lien vers le profil d’élévation à la fenêtre contextuelle).

    Option Ajouter un lien vers le profil d’élévation à la fenêtre contextuelle

    Dorénavant, les profils d’élévation sont disponibles pour la couche des sentiers.

    Une autre option qui s’affiche est l’option pour visant à afficher la feuille de route. Vous désirez que les utilisateurs puissent étudier les feuilles de route pour atteindre les points de départ des sentiers ; vous allez donc activer cette option.

  9. Activez Show directions (Afficher une feuille de route). Dans Layers to include directions link in the results (Couches où inclure un lien vers la feuille de route dans les résultats), cochez SAMO Public Trailheads and Access Points.

    Option Afficher une feuille de route

    Vous avez activé et configuré toutes les fonctionnalités que vous vouliez que votre application possède.

Terminer l’application

Vous allez maintenant apporter quelques dernières modifications à votre application. En premier lieu, vous allez créer un filtre personnalisé pour la couche des sentiers afin que les visiteurs puissent rechercher spécifiquement les routes carrossables du parc.

  1. Dans la fenêtre Results (Résultats), cliquez sur Back (Retour).
  2. Cliquez sur Filter (Filtrer).

    Option Filtrer

  3. Activez l’option Enable filtering (Activer le filtrage). Dans Select layer (Sélectionner), sélectionnez SAMO Public Trails.

    Paramètres Activer le filtrage et Sélectionner une couche

  4. Dans Custom filters (Filtres personnalisés), cliquez sur Add Filter (Ajouter un filtre).

    Pour ajouter le filtre, vous allez créer une expression. La couche des sentiers de randonnée comporte des informations attributaires à propos de chaque type de randonnée. Vous pouvez utiliser ces informations pour créer une expression qui applique un filtre selon le type de sentier paved park road (route goudronnée du parc).

  5. Cliquez sur Add expression (Ajouter une expression).

    Bouton Add Expression (Ajouter une expression)

  6. Créez l’expression Type is Paved park road (Type est Paved park road).

    L’expression affichant Type est Paved park road

    Vous allez également donner un nom au filtre. Ce nom apparaîtra dans l’application, il doit donc expliquer l’objet du filtre.

  7. Dans Filter display name (Nom d’affichage du filtre), saisissez Paved park road.

    Paramètre Nom d’affichage du filtre

  8. Cliquez sur Save (Enregistrer).

    Vous allez ajouter une autre petite fonctionnalité, en l’occurrence un bouton permettant aux utilisateurs de changer de fond de carte pour afficher l’image satellite de la zone. Cette fonctionnalité est utile pour les utilisateurs désireux de voir ce à quoi ressemble le terrain.

  9. Dans la fenêtre de configuration, cliquez sur Interactivity (Interactivité).

    Option Interactivité dans la fenêtre de configuration

  10. Dans la fenêtre Interactivity (Interactivité), cliquez sur Modify (Modifier).
  11. Activez Basemap toggle (Bouton de basculement du fond de carte). Dans Select basemap (Sélectionner un fond de carte), cliquez sur Imagery (Imagerie).

    Options Bouton de basculement du fond de carte et Sélectionner un fond de carte

    Votre application Web est terminée. Elle possède toutes les fonctionnalités désirées, ainsi que des fonctionnalités supplémentaires permettant aux visiteurs de planifier leurs randonnées.

Publier l'application

Tout ce qu’il vous reste à faire est de publier l’application et la partager pour que tout le monde puisse la consulter.

  1. Cliquez sur le bouton Publish (Publier).

    Bouton Publier

  2. Dans la fenêtre Publish (Publier), cliquez sur Confirm (Confirmer).

    Une fenêtre s’affiche vous demandant si vous souhaitez partager le contenu Premium. La couche Sentiers de randonnée des Monts de Santa Monica est un service Premium du fait de ses possibilités de calcul d’itinéraires.

    Si vous n’autorisez pas du contenu Premium, les utilisateurs qui ne possèdent pas un compte ArcGIS risquent de ne pas être en mesure de voir la couche des sentiers de randonnée lorsqu’ils utilisent votre application. Si vous autorisez le contenu Premium, votre application consomme des crédits dans votre organisation chaque fois que votre application est consultée. Vous ne devriez pas autoriser le contenu Premium que si vous être certain que votre organisation peut en supporter le coût.

    Dans le présent scénario, vous êtes un cadre travaillant pour une agence gouvernementale ; vous allez donc autoriser le contenu Premium de manière à ce que tous les utilisateurs puissent voir le contenu de l’application. Toutefois, pour les besoins de ce didacticiel, vous allez laisser le contenu Premium non autorisé pour éviter une dépense inutile de crédits.

  3. Dans la fenêtre Authorize premium content (Autoriser le contenu Premium), cliquez sur Continue without authorizing (Continuer sans autoriser).

    Votre application est publiée. La fenêtre Share (Partager) s’affiche avec des options destinées à partager votre application ; l’application n’est pour le moment pas partagée. Vous allez la partager avec le public de telle sorte que n’importe qui puisse y accéder.

    Remarque :

    Puisque vous avez choisi de ne pas autoriser le contenu Premium pour les besoins de ce didacticiel, les utilisateurs ne possédant pas de compte ArcGIS risquent de ne pas être en mesure de voir la couche des sentiers de randonnée dans l’application.

  4. Cliquez sur Change share settings (Modifier les paramètres de partage).

    Option Modifier les paramètres de partage

  5. Dans la fenêtre Share (Partager), sélectionnez Everyone (public) (Tout le monde (public)). Cliquez sur Save (Enregistrer).
  6. Cliquez sur Afficher l'application.

    Votre application web est terminée et apparaît dans un nouvel onglet du navigateur. Toute personne dotée de l’URL de l’application peut y accéder.

    Vous allez ensuite configurer une application native bénéficiant des mêmes fonctionnalités que l’application Web. Lors de la configuration de l’application native, vous allez utiliser l’application Web comme base, et copierez donc l’ID de l’application Web à partir de l’URL pour vous y référer ultérieurement.

  7. Vous pouvez également tester les fonctionnalités de votre application telles que la barre de recherche ou le filtre.
  8. Dans l’URL, copiez les chaînes de lettres et les nombres après id=.

    ID dans l’URL

  9. Collez l’ID à un emplacement où vous pourrez le retrouver facilement par la suite (par exemple, dans un document Notepad), puis fermez l’application.

    Vous utiliserez cet ID ultérieurement dans le didacticiel.

Vous avez créé et publié une application Web avec Instant Apps.


Créer une application native

Vous avez créé une application Web à laquelle les visiteurs du parc peuvent accéder sur Internet avant leur arrivée. De nombreuses fonctionnalités de l’application sont utiles aux utilisateurs même lorsqu’ils ont démarré leur randonnée. Pour répondre aux besoins des utilisateurs, vous allez créer une application native, c’est-à-dire une application qu’on installe sur un smartphone et qu’il est possible d’utiliser en mode hors connexion. Cette application contient les mêmes fonctionnalités que l’application Web, ainsi que d’autres fonctionnalités personnalisées qui tirent parti des ressources matérielles du smartphone, telle que la fonction de synthèse vocale.

Remarque :

Pour que votre application soit en mesure de fonctionner en mode hors connexion, votre carte Web doit comporter des zones hors connexion. Pour apprendre à créer des zones hors connexion, consultez le didacticiel Réaliser une enquête de pré-énumération.

Choisir un modèle d’application native

Pour créer l’application native, vous allez utiliser ArcGIS AppStudio et choisir le même modèle que celui que vous avez utilisé pour créer l’application Web.

  1. Ouvrez ArcGIS AppStudio.
    Remarque :

    Si vous ne disposez pas de ArcGIS AppStudio, vous pouvez le télécharger gratuitement à partir de la page des ressources ArcGIS AppStudio. Exécutez le fichier téléchargé pour ouvrir l’assistant d’installation. Suivez les instructions de l’assistant pour installer le programme logiciel.

  2. Cliquez sur Sign In (Connexion) et sélectionnez Sign In (Connexion).

    Option Sign In (Connexion)

  3. Connectez-vous via votre compte ArcGIS.
  4. Cliquez sur Nouvelle application.

    Bouton New App (Nouvelle application)

    Remarque :

    Si vous n’avez jamais créé d’application dans AppStudio, il est possible que le bouton New App (Nouvelle application) se trouve à un emplacement différent de celui indiqué dans l’image.

    La fenêtre New App (Nouvelle application) s’affiche. Elle répertorie plusieurs modèles et styles. Vous souhaitez choisir le modèle d’application Nearby (À proximité), qui est identique à celui que vous avez utilisé pour créer votre application Web.

  5. Cliquez sur l’onglet Templates (Modèles).

    Onglet Modèles

  6. Dans la liste des modèles, cliquez sur Nearby (À proximité).

    Modèle À proximité

    Un résumé et une description du modèle sélectionné s’affichent.

  7. Sous la description, cliquez sur Create (Créer).

    L’application est créée et répertoriée avec vos autres applications. Si c’est la première fois que vous utilisez AppStudio, il s’agit de la seule application. Des informations supplémentaires sur celle-ci, notamment son nom, s’affichent dans la fenêtre latérale.

  8. Vérifiez que la nouvelle application est sélectionnée dans la liste d’applications. Dans la fenêtre latérale, cliquez sur le bouton Edit Title (Mettre à jour le titre).

    Bouton Edit Title (Mettre à jour le titre)

  9. Remplacez le titre par Sentiers de Santa Monica et cliquez sur le bouton Saves changes (Enregistrer les modifications).

    Bouton Save Changes (Enregistrer les modifications)

Configurer les paramètres

Vous voulez que la conception de votre application reflète votre organisation ou les fonctions de l’application. Pour rendre votre application visuellement attractive et pour optimiser sa valeur informative, vous ajouterez des images, des descriptions et des icônes. Vous allez ensuite utiliser l’ID de l’application Web pour ajouter ses fonctionnalités à l’application native.

  1. Téléchargez le dossier zippé des images.
  2. Extrayez le dossier zippé des images dans un emplacement facile à mémoriser sur votre ordinateur, par exemple, le dossier Documents.

    Le dossier contient trois images que vous utiliserez pour donner à votre application une identité propre et lui assurer une certaine homogénéité.

  3. Dans AppStudio, dans la liste des applications, vérifiez que votre application Sentiers de Santa Monica est sélectionnée. Dans la fenêtre latérale, cliquez sur Settings (Paramètres).

    Bouton Settings (Paramètres)

    La fenêtre AppStudio Settings (Paramètres AppStudio) s’ouvre. Vous allez commencer par mettre à jour la miniature.

  4. Dans la fenêtre AppStudio Settings (Paramètres AppStudio), dans l’onglet Details (Détails), cliquez sur la miniature par défaut.

    Miniature par défaut

  5. Dans la fenêtre Open (Ouvrir), accédez à l’image thumbnail-santa-monica-trails et double-cliquez dessus, à partir du dossier que vous avez téléchargé.

    Miniature Sentiers de Santa Monica

    Un message s’affiche, vous informant qu’une copie de cette image va remplacer la miniature actuelle.

  6. Cliquez sur Oui.

    La miniature est remplacée. Ensuite, vous allez remplacer le résumé de l’application par une série de balises qui communiquent les finalités de l’application.

  7. Dans Summary (Résumé), supprimez le texte existant et saisissez Découvrir - Randonnée - Loisirs.

    Vous allez également ajouter une icône représentant l’application sur les smartphones et autres appareils.

  8. Cliquez sur l’onglet Resources (Ressources). Dans App Icon (Icône de l’application), cliquez sur l’icône par défaut.

    Icône par défaut

  9. Dans la fenêtre Choose image (Choisir une image), accédez à l’image icon-santa-monica-trails et double-cliquez dessus, à partir du dossier que vous avez téléchargé.

    Icône Sentiers de Santa Monica

  10. Dans la fenêtre Copy File (Copier le fichier), cliquez sur Yes (Oui).

    L’icône est ajoutée. Vous allez également ajouter une image d’arrière-plan.

  11. Cliquez sur l’onglet Properties (Propriétés). Dans l’onglet Start Screen (Écran de démarrage), dans Background image (Image d’arrière-plan), cliquez sur l’image d’arrière-plan par défaut.

    Image d’arrière-plan par défaut

  12. Dans la fenêtre Open (Ouvrir), accédez à l’image background-santa-monica-trails et double-cliquez dessus, à partir du dossier que vous avez téléchargé.

    Arrière-plan Sentiers de Santa Monica

  13. Dans la fenêtre Copy file (Copier le fichier), cliquez sur Yes (Oui).

    L’arrière-plan est ajouté. Vous allez changer la couleur principale de l’application pour qu’elle corresponde à la couleur verte de vos images.

  14. Dans Brand color (Couleur personnalisée), tapez #339689.

    Couleur personnalisée définie sur le ton #339689

  15. En bas de la fenêtre AppStudio Settings (Paramètres AppStudio), cliquez sur Apply (Appliquer).

    Vos modifications sont appliquées. La fenêtre AppStudio Settings (Paramètres AppStudio) reste ouverte. Vous allez utiliser cette fenêtre pour ajouter l’ID de votre application Web à l’application native. Ce faisant, les utilisateurs pourront accéder aux fonctionnalités de l’application Web en utilisant l’application native.

  16. Dans la fenêtre AppStudio Settings (Paramètres AppStudio), sous l’onglet Properties (Propriétés), cliquez sur l’onglet Gallery (Galerie).
  17. Dans Nearby web apps (Applications Web Nearby), supprimez le texte existant et collez l’ID de votre application Web. Ajoutez id: au début de l’ID.

    Option Applications Web Nearby (À proximité)

  18. Cliquez sur Apply (Appliquer). Une fois les paramètres appliqués, fermez la fenêtre AppStudio Settings (Paramètres AppStudio).

Tester l’application sur un ordinateur de bureau

Vous avez configuré et personnalisé votre application. Vous allez maintenant la tester sur votre ordinateur.

  1. Dans AppStudio, vérifiez que votre application Sentiers de Santa Monica est sélectionnée. Dans la fenêtre latérale, cliquez sur Run (Exécuter).

    bouton Run

    Votre application s’ouvre dans une nouvelle fenêtre.

    Application native sur le bureau

    Le comportement de l’application bureautique est similaire à celui de l’application sur un smartphone.

  2. Cliquez sur Démarrer.

    L’application affiche la carte des sentiers et des points de départ sur votre application Web. Les instructions indiquent les différentes manières de trouver des points d’intérêt à proximité.

    L’application native sur l’ordinateur de bureau montrant la carte des sentiers et des points de départ

  3. Appliquez un zoom avant et arrière sur la carte.
  4. Cliquez à n’importe quel endroit de la carte.

    Lorsque vous cliquez sur la carte, une punaise apparaît avec un rayon de recherche de 5 miles tracé autour d’elle. N’importe quel sentier et départ de randonnée compris dans ce rayon est répertorié en bas de l’application.

    L’application native avec son rayon de recherche de 5 miles

  5. Si nécessaire, cliquez sur la carte ou faites-la défiler pour voir les sentiers à proximité jusqu’à ce qu’un sentier apparaisse au bas de l’application. Pour le sentier, cliquez sur Elevation (Élévation).

    Bouton Elevation (Élévation)

    La carte effectue un zoom avant sur le sentier et affiche un profil d’élévation indiquant les variations de l’élévation le long du sentier.

    Profil d’élévation dans l’application native

  6. Fermez le profil d’élévation. Pour le même sentier que vous venez d’examiner, cliquez sur Details (Détails).

    Bouton Details (Détails)

    D’autres informations concernant le sentier apparaissent.

  7. Fermez la page des détails. Sur la carte, cliquez sur un point de départ de randonnée (signalé par un carré noir et un randonneur).
  8. Pour le point de départ, cliquez sur Details (Détails).

    La page de détails des points de départ inclut un bouton Directions (Feuilles de route). Ce bouton affiche des informations sur le calcul d’itinéraires pour rejoindre le point de départ de la randonnée. Pour les besoins de ce didacticiel, vous n’allez ajouter aucune clé mais vous pouvez en savoir plus en consultant la rubrique Octroyer une licence à votre application de niveau Lite.

    Lorsque les utilisateurs exécutent l’application sur un smartphone, ils verront d’autres options de calcul d’itinéraires basées sur les capacités de leur smartphone.

  9. Fermez l’application Sentiers de Santa Monica.

Personnaliser votre application par un code

Le modèle Nearby (À proximité) contient déjà tout le code nécessaire pour une application native utilisable. Cependant, que faire si vous vouliez que votre application en contienne davantage ? En changeant le code de l’application, vous pouvez ajouter des fonctionnalités, ce qui ne serait pas possible avec la seule utilisation du modèle.

Vous allez mettre à jour le code de votre application pour ajouter la fonction de synthèse vocale. Cette fonction permet à l’application d’utiliser les ressources du smartphone pour lire à voix haute le nom et la distance jusqu’au point de départ le plus proche.

  1. Dans AppStudio, dans la liste des applications, vérifiez que votre application Sentiers de Santa Monica est sélectionnée. Dans la fenêtre latérale, cliquez sur Edit (Mettre à jour).

    Bouton Modifier

    Qt Creator s’ouvre et présente les fichiers de code associés à votre application. Le modèle Nearby (À proximité) a des fichiers utilisant Qt Modeling Language (QML), un langage conçu pour créer des applications axées sur l’interface utilisateur, telles que des applis.

    Vous allez ajouter un nouveau composant QML à l’un des fichiers QML.

  2. Si la fenêtre Take a UI Tour (Suivre une visite d’interface utilisateur) apparaît, cliquez sur Cancel (Annuler).
  3. Dans la fenêtre Projects (Projets), dans le dossier Nearby, développez le dossier Nearby et le dossier views. Double-cliquez sur le fichier NearbyMapPage.qml.

    Fichier NearbyMapPage.qml

    Le fichier s’affiche dans la fenêtre de l’éditeur de Qt Creator. Les lignes 17 à 31 du fichier impliquent l’importation de différentes bibliothèques et structures nécessaires à l’exécution du reste du code. Tout d’abord, vous allez ajouter une ligne pour importer une structure d’application permettant la fonction de synthèse vocale.

  4. Après la ligne 28 (import ArcGIS.AppFramework.Platform 1.0), appuyez sur Entrée pour ajouter une ligne. Sur la nouvelle ligne (29), ajoutez le code suivant :
    import ArcGIS.AppFramework.Speech 1.0

    Importer une ligne à la ligne 29

    Vous allez ensuite ajouter un composant QML qui utilise la fonction de synthèse vocale. Vous allez donner à ce composant l’ID tts (text-to-speech) de manière à pouvoir vous y référer lorsque les utilisateurs recherchent des randonnées.

  5. Faites défiler l’écran jusqu’à la ligne 124. Ajoutez le composant suivant (veillez à garder les alinéas) :
    TextToSpeech {
        id: tts
    }

    Composant TextToSpeech

    Vous allez vous référer au nouveau composant QML après que les couches de carte ont été interrogées pour une recherche. Lorsque les utilisateurs effectuent une recherche de sentiers à proximité, la fonction de synthèse vocale indique le nom du sentier et la distance à laquelle se trouve.

    Votre code utilise le composant tts que vous avez ajouté et le composant say qui invite la fonction de synthèse vocale à prononcer le texte. Votre code définit ce qui est prononcé en combinant les références aux attributs des entités placées sur la carte et les chaînes de texte.

  6. Faites défiler l’affichage jusqu’à voir la ligne 2600 (//if results are not empty (//si les résultats ne sont pas vides)). Selon la manière dont vous avez ajouté les lignes précédentes, le numéro de la ligne peut différer légèrement.

    Cette partie du code définit la tâche à réaliser si une recherche est terminée et a des résultats valides.

  7. Après la ligne mapPageCarouselView.highlightResult(mapView.featuresModel.get(0).initialIndex); (ligne 2606 environ), appuyez sur Entrée. Dans la ligne vide, collez le code suivant :
    tts.say(mapView.featuresModel.get(0).search_attr + " is " + mapView.featuresModel.get(0).distance + " miles away");

    Composant pour prononcer le résultat de la recherche

    Conseil :

    Vous pouvez également appuyer sur Ctrl+F pour effectuer une recherche sur des mots spécifiques.

  8. Sur le ruban, cliquez sur File (Fichier) et choisissez Save "NearbyMapPage.qml" (Enregistrer "NearbyMapPage.qml").
    Conseil :

    Vous pouvez également appuyer sur Ctrl+Maj+S pour enregistrer vos modifications).

  9. Appuyez sur Alt+Maj+R pour exécuter le projet.

    Le projet s’exécute et une fenêtre s’affiche avec des messages généraux sur le code. À la fin de l’exécution du projet, la version bureautique de votre application apparaît.

  10. Si votre ordinateur de bureau possède la fonction de synthèse vocale, démarrez l’application et cliquez près d’un sentier sur la carte. (Assurez-vous que le volume de l’ordinateur n’est pas coupé).

    À présent, lorsque vous exécutez l’application sur un appareil doté de la fonction de synthèse vocale, le résultat de recherche le plus proche est lu à voix haute par votre appareil.

  11. Fermez la version bureautique de votre application.

Charger votre application

Votre application est terminée. Vous allez la charger dans votre organisation ArcGIS. Puis, vous la testerez sur un appareil mobile.

  1. Dans AppStudio, assurez-vous d’être connecté à votre compte ArcGIS.
  2. Dans la liste des applications, vérifiez que votre application Sentiers de Santa Monica est sélectionnée. Dans la fenêtre latérale, cliquez sur Upload (Charger).

    Bouton Upload (Charger)

    La fenêtre AppStudio Upload (Chargement AppStudio) s’ouvre. Cette fenêtre comporte des options pour partager votre sentier de randonnée avec votre organisation ou le public. Pour le moment, vous n’allez pas partager l’application bien qu’en conditions réelles, vous souhaiteriez la partager publiquement à terme.

  3. Dans la fenêtre AppStudio Upload (Chargement AppStudio), cliquez sur Upload (Charger).

    Lorsque le chargement touche à sa fin, un message indique que le chargement a réussi. Si vous apportez ultérieurement des modifications à l’application, vous pouvez l’actualiser en la chargeant une nouvelle fois.

  4. Fermez la fenêtre AppStudio Upload (Chargement AppStudio).

    Vous pouvez également tester votre application sur un appareil mobile.

  5. Sur votre appareil mobile Android ou iOS, téléchargez et installez ArcGIS AppStudio Player à partir de Google Play ou de l’Apple App Store.
    Remarque :

    Vous pouvez aussi créer un fichier d’installation .apk pour une application Android et un fichier .exe sous Windows pour installer l’application native sur votre appareil. Les étapes sont identiques pour n’importe quelle application AppStudio. Vous pouvez suivre les étapes décrites dans la section Create app installation files (Créer des fichiers d’installation d’application) du didacticiel Utiliser ArcGIS AppStudio pour créer une application mobile de signalement 311.

  6. Ouvrez AppStudio Player.
  7. Cliquez sur Connexion. Dans ArcGIS Online, cliquez sur Sign In (Se connecter) et connectez-vous avec votre compte ArcGIS.

    La liste de vos applications s’affiche. Cette liste inclut votre application recensant les sentiers de randonnée.

  8. Pour l’application Sentiers de Santa Monica, cliquez sur le bouton de téléchargement.
  9. Une fois que l’application a fini le téléchargement, cliquez dessus pour l’ouvrir.
  10. Dans l’application, cliquez près d’un sentier sur la carte et recherchez les sentiers de randonnée à proximité. Confirmez que le premier résultat dans le carrousel de fiches est lu par votre appareil. (Vous devrez peut-être activer le son de votre appareil mobile).

À partir d’une carte Web, vous avez créé une application Web dans un navigateur et une application native personnalisée exécutable sur un smartphone. Vos applications peuvent être utilisées par les visiteurs d’un parc national pour planifier plus efficacement leurs randonnées.

Vous pouvez utiliser Instant Apps et AppStudio pour créer des applications pour de multiples utilisations. Essayez différents modèles d’application pour réaliser des applications Web interactives, sur mesure et répondant aux besoins du public visé.

Vous trouverez d’autres didacticiels dans la bibliothèque des didacticiels.