Créer une application web – Help center

Objectifs de la section

Comprendre la relation entre les cartes et les applications
Apprendre à créer une application
Comprendre le rôle des formulaires dans la plateforme
Apprendre à créer un formulaire sur mesure
Apprendre à partager une application publiquement

Prérequis

Avoir complété et compris le tutoriel précédent sur les cartes

Quelle est la relation entre les cartes et les applications web ?

La section Applications web permet de débuter avec une Carte, puis de l'enrichir avec divers outils, comme un éditeur de données, une fonction de recherche, une fonction d'impression, etc. Il s'agit donc d'un outil puissant de visualisation et d'analyse, mais également de collaboration puisque les applications peuvent être partagées et éditées en temps réel par plusieurs utilisateurs.

Comment créer une application ?

Pour créer une application, cliquer sur le bouton [+] dans la barre de menu, puis sélectionner Application cartographique web.

Dans la nouvelle fenêtre qui s'ouvre, saisir un nom significatif pour l'application. Dans le cas présent, inscrire le nom Application_wards.

Pour créer une application, il est nécessaire de lui attribuer une Carte. Dans la liste déroulante, sélectionner la carte Tutoriel_wards créée au tutoriel précédent.

Ensuite, il est possible de voir la liste de tous les outils qu'il est possible d'ajouter à l'Application. Pour en ajouter ou en supprimer un, il suffit de sélectionner ou désélectionner la case correspondante.

S'assurer que la case « Explorateur de sources de données » soit cochée, puis cliquer sur le bouton « Créer » au bas de la page. Cet outil permet de faire apparaître tous les enregistrements présents dans une couche de données dans une fenêtre de l'application.

« Application_wards » sera maintenant créée. La sélectionner dans le menu des Applications, puis cliquer sur le bouton « Jouer » pour la lancer.

Oops... la plateforme nous signale qu'il y a une erreur! Mais pourquoi donc? Il s'agit en fait d'une configuration manquante dans les formulaires attachés à nos sources de données.

Quel est le rôle des formulaires dans la plateforme ?

Les Formulaires sont rattachés aux sources de données et permettent de configurer celles-ci de diverses façons à travers la structure JSON. D'une part, ils sont responsables de l'affichage des données lors d'un clic sur un enregistrement dans la Carte et d'autre part, ils sont utilisés pour la configurations de certaines fonctionnalités dans les Applications.

Comment créer un formulaire sur mesure ?

Tel que l'indique le message d'erreur lors de l'ouverture de notre Application, les sources de données présentes dans la Carte ne disposent pas de l'option "browsable" : true spécifiée dans leur formulaire par défaut. Il faudra donc ajouter cette option.

Toutefois, avant de procéder, localiser le bouton [ + ] apparaissant sur la couche de données « Points of interest ». Ce bouton est utilisé pour ajouter de nouvelles entrées à la source de données (ici, un nouveau point).

Cliquer sur ce bouton, puis cliquer n'importe où sur la carte afin de créer un nouveau point. Remarque la forme du formulaire et les champs qui y sont présents.

Cliquer sur le bouton « Annuler », puis, cliquer sur le lien formulaire apparaissant dans la colonne « Modifier le formulaire » pour la source de donnes « Points of interest ».

Dans la nouvelle fenêtre qui s'ouvre, on peut maintenant voir le nom du formulaire, sa description, ainsi que son contenu au format JSON.

Note : Ce tutoriel ne s'attardera pas à la structure et à toutes les options possibles des formulaires. Pour plus d'information, consulter la documentation de la plateforme (NomUtilisateur > Documentation > Formulaires).

Commençons tout d'abord par régler le problème d'affichage de notre Application. Pour ce faire, naviguer jusqu'au bas du contenu JSON, puis ajouter la ligne suivante:

,"browsable" : true

Cliquer sur le bouton « Sauvegarder » au bas de la page, puis une fois fait, retourner à l'application Application_wards. Nous pouvons maintenant remarquer que le message d'erreur a été remplacé par une fenêtre vide. C'est tout à fait normal puisque notre source de données est actuellement vide.

Nous allons donc ajouter un point avec le bouton [ + ] tel que vu précédemment et lui attribuer les valeurs suivantes:

Nom: Statue
Description: En marbre
date_construction : 1950
uuid : laisser à -1

Une fois fait, cliquer sur le bouton « Sauvegarder » pour valider. Une autre erreur apparaît!

Vous rappelez-vous du moment où nous avons créé la source de données « Points of interest » lors du premier tutoriel? Si nous retournons en voir la structure, il sera possible de constater que le champ date_construction est de type [date], alors qu'il est présenté sous format de texte dans notre formulaire!

Il est donc nécessaire de modifier notre formulaire pour correspondre à la réalité de notre source de données. Pour ce faire, cliquer sur Plus... dans le menu de navigation, puis sur Formulaires.

Identifier le formulaire Points of interest - Base Form dans la liste, puis cliquer sur l'icône de modification dans le menu apparaissant à droite. Dans la zone de configuration du formulaire, identifier la partie traitant du champ date_construction.

On remarque que chaque champ possède la configuration suivante :

label -> représente le texte affiché dans le formulaire
name -> représente le nom du champ dans la base de données
type -> représente le type de contrôle permettant d'entrer l'information

Donc, dans le cas présent, nous allons remplacer le type du champ date_construction :

"type":"text"

par

"type":"date"

De cette façon, le formulaire correspondra maintenant au type de champ requis par la source de données. De plus, il nous fournira un contrôle permettant d'entrer la date facilement. Nous allons également supprimer la section affichant le champ uuid puisque nous ne souhaitons pas qu'il soit entré manuellement. Pour ce faire, simplement sélectionner ce texte, puis l'effacer de la configuration JSON.

Note : Attention de supprimer la virgule du crochet fermant du champ date_construction (juste sous "type": "date") afin d'éviter une erreur JSON, tel qu'indiqué sur l'image ci-dessous.

Une fois la modification faite, cliquer sur le bouton « Sauvegarder ».

Nous allons maintenant retourner dans la section Applications Web, puis lancer Application_wards. Une fois cela fait, cliquer sur le bouton [ + ] de la couche Points of interest, puis ajouter le point sur la carte.

On remarque alors la disparition du champ uuid et l'apparition d'un contrôle de calendrier sur le champ date_construction à l'intérieur du formulaire.

Saisir le nom, la description et la date_construction de la manière souhaitée, puis cliquer sur le bouton « Sauvegarder ». Cela aura deux effets : l'apparition d'un point sur la carte et d'une nouvelle ligne de données dans le panneau de droite.

Comment partager une application web de manière publique ?

Maintenant que l'application est complétée, il serait intéressant d'avoir des coéquipiers pouvant ajouter de nouveaux points dans la carte. Pour cela, il serait intéressant de pouvoir la partager de manière à ce qu'elle soit accessible sans nécessiter une connexion à la plateforme.

Cliquer sur Applications web dans le menu du haut pour retourner au catalogue, puis sélectionner Application_wards. Dans le menu de droite, cliquer sur le bouton « Gérer les espaces ».

Dans la fenêtre qui apparaît, cliquer dans la zone de texte, puis saisir l'espace « Public ». Une fois fait, cliquer sur le bouton « Sauvegarder ».

L'application est désormais accessible publiquement. Maintenant, il ne reste qu'à la partager grâce à un hyperlien. Afin d'obtenir celui-ci, cliquer sur le bouton « Partager l'application web », puis copier le lien.

Une fois le lien copier, il ne reste qu'à le communiquer aux personnes voulues et elles auront accès à l'application directement depuis le navigateur web de leur choix.

Récapitulatif

Dans cette section, nous avons fait état de la relation existant entre les cartes et les applications web à l'intérieur de la plateforme développée par Mapgears.

Nous avons également vu comment créer, personnaliser et partager une application web avec le public.

Finalement, nous avons appris la relation existant entre les sources de données et les formulaires, ainsi qu'à personnaliser ceux-ci.

Pour plus d'information sur la section Applications web, consulter la documentation de la plateforme sous Profil > Documentation > Applications web.

Des questions ou besoin de précisions? Contactez-nous au support@mapgears.com