Comment partager des pages d'application et utiliser les paramètres d'URL pour les liens profonds dans une application Web

AVERTISSEMENT Ces composants ne fonctionnent plus. On a laissé ce contenu en ligne pour qu'il serve à apprendre, mais on ne recommande pas Adalo : pendant qu'on l'utilisait, Adalow était peu sécuritaire, incomplet et, en gros, à peu près impossible pour livrer quoi que ce soit.

__
De plus, la bibliothèque de composants Pragmaflow n’est plus maintenue : les mises à jour de la plateforme Adalo la brisaient à répétition.__

‍

Dans ce tutoriel, nous vous montrons comment utiliser les paramètres d’URL pour rediriger les utilisateurs vers des pages qu’on leur a partagées à partir d’une application mobile. ‍ Contexte : Cette fonction permet aux utilisateurs de Pepper (planwithpepper.com) de partager une version en lecture seule de leurs projets avec leurs amis. ‍

Elle servira bientôt aussi de base pour suivre des projets et y collaborer.

Application présentée : Pepper, l’application de gestion de projets conçue par des femmes, pour des femmes, pour garder en ordre les milliards de choses que vous faites. 👉🏽 [ PlanWithPepper.com ‍)

Code du composant JS———————————————————————————————————————–| const urlSearchParams = new URLSearchParams(window.location.search);const params = Object.fromEntries(urlSearchParams.entries())

;if (params.id){return params.id;}else { return Sorry we couldn’t find this project;}———————————————————————————————————–

Soutenez PragmaFlow sur PATREON 👷🏽👷🏽👷🏽 www.patreon.com/pragmaflow

‍

Transcription

‍

Bon. Bienvenue, la gang d'Addo. Aujourd'hui, on va voir comment partager des pages et comment utiliser les paramètres d'URL, et on peut en mettre plus d'un. Je vais vous montrer un cas concret. Ici, la page que je vais partager, c'est un projet dans une application de gestion de projets. Alors je vous montre le flux de travail.

Comment on a monté ça, et voilà. Bon, c'est parti. En passant, avant de commencer : le seul de nos composants qu'on utilise, c'est le composant JavaScript, qui est super utile. Alors, on regarde ça. Si je suis dans mon projet ici, le projet test de Mitch, on clique sur le menu, puis sur gérer le partage.

Et puis quand j'arrive ici, je peux cliquer. Créer un lien public. Et donc, en théorie, je pourrais copier ça, même si là, ça ne marche pas super bien. Heureusement, je m'y attendais, parce que c'est arrivé à la dernière prise. Alors voici le lien quand même. Quand je le colle, vous voyez qu'on s'en va sur share point plan with pepper point com.

Et je suis redirigé. Bon, côté design, cette page aurait besoin d'un peu d'amour. Mais vous voyez : projet partagé, lecture seule. Et si je vais ajouter une tâche ou quelque chose du genre, vous allez la voir apparaître. Bon. Alors dans la liste des tâches du projet : une tâche test. On l'ajoute.

Ensuite on va aller voir notre page de projet. Juste un petit rafraîchissement. Oh, en fait, c'est déjà là. Alors voilà. Vous voyez, je partage une version application Web de cette page. Elle charge ce projet à partir du lien. Comment on fait ça? C'est assez astucieux, et c'est vraiment important dans plein de cas.

Commençons par le. Bon. Quand on clique sur gérer le partage, on arrive sur une page d'options de partage. Comment on a monté ça? En gros, je voulais pouvoir activer et désactiver le lien public, pour qu'on puisse le révoquer. Et on peut aussi, bien sûr, le réactiver; il apparaît en dessous, et vous pouvez le copier-coller ou utiliser le bouton de partage pour l'envoyer.

Alors si on vient ici, si les dieux d'Addo veulent bien aujourd'hui. On va juste devoir patienter quelques secondes de plus, le temps que ça finisse par me laisser cliquer, charger pour vrai et faire son affaire. Attendez, tout le monde. Ça s'en vient, c'est sûr, d'une seconde à l'autre.

Je continue en attendant. Péniblement, peut-être, finalement, oui. Ça charge. Bon, super. On y est.  on finira par couper ça au montage, mais certainement pas dans la première version. Alors quand on clique sur le sky ici, dans la case à cocher, il se passe quelques affaires. Un : on bascule.

Je ne sais pas pourquoi c'est imbriqué sur trois niveaux ni pourquoi ça s'affiche comme ça, parce qu'on est juste allés dans projet courant, puis, oui, partage de lien ici. Alors on bascule, c'est tout. Est-ce que le partage de lien est activé pour ce projet. L'autre chose qu'on fait, c'est. Si c'est la première fois que ce projet est partagé et qu'il n'a pas de lien de partage de projet, alors il faut en créer un.

Alors ce que je fais ici, c'est utiliser une action personnalisée qui interroge une API de création d'UU ID. Et on fait ça parce que, évidemment, si je mettais juste l'ID à un, ou même à un nombre au hasard, ce serait probablement assez facile de changer ce paramètre dans l'URL et de tomber sur un projet qu'on n'est pas censé voir.

Et donc ici, on a la sécurité par l'obscurité. Vous voyez le lien ici. Et je vais peut-être juste le copier pour plus tard. Alors on fait un GET, et quand on lance la requête test, ce qui revient, c'est une sorte de chaîne très aléatoire qu'on peut utiliser comme ID de projet. Bon. Alors on fait ça seulement si le projet courant.

URL de partage. En gros, s'il n'y a pas encore d'URL, on la crée, et une fois qu'elle est créée, on met à jour le projet courant. J'ai juste mis l'URL au complet ici, ça me semblait bien plus simple. Alors l'URL, c'est l'URL de base. Le premier paramètre, c'est ID, et l'ID est égal à cette nouvelle valeur qu'on vient de récupérer.

Et on l'obtient avec cette action personnalisée, générer l'ID du projet, et on prend la réponse. La dernière chose, c'est que si cette réponse est vide, alors on ne va pas faire ça. Et honnêtement, il faudrait aussi que j'aie là un message d'erreur qui dit : « Hé, désolé, on n'a pas pu obtenir d'ID pour ce projet », ou peut-être un générateur aléatoire de secours ou quelque chose du genre.

Mais c'est le flux de travail de base pour l'instant. Bon. Alors c'est comme ça qu'on crée le lien. Maintenant, passons à la partie intéressante. Comment on fait pour que ce lien, en fait?

Ce que j'ai fait ici, c'est créer une deuxième application Web. Elle est liée et elle partage la même base de données. Ça rend super facile de charger les projets créés dans l'application Web d'origine. Là, il y a un petit groupe caché ici en bas, et ce groupe contient deux composants. L'un des deux, c'est un champ texte où je vais.

Mettre ce qui sort de mon JavaScript, du composant JavaScript, plutôt. Et l'autre, c'est le composant lui-même. Ce que le composant fait, c'est qu'il va chercher dans la, dans la recherche. Il prend l'URL dans la barre d'adresse. Puis il va chercher seulement les paramètres qui sont à la fin de l'URL.

Et si on regarde. Vous voyez que ce sont les paramètres, juste ici en haut. Alors attendez. Adal en a caché une partie, mais non, le voici. Alors on a notre point d'interrogation. ID égale, juste ici, et puis target, c'est un deuxième paramètre qu'Adal ajoute. C'est celui qu'on cherche. Alors ce qu'on, et vous pouvez juste prendre ce code, le copier-coller et le modifier un peu.

Mais je pense que ça vaut la peine d'expliquer, alors on récupère ces paramètres d'URL, et puis on dit pers.id, c'est-à-dire celui qui s'appelle ID. Alors s'il existe, on va le retourner, sinon on retourne : « Désolé, nous n'avons pas trouvé ce projet. » Et donc ça me permet d'utiliser le champ texte, même si en fait j'ai arrêté de faire ça. Au départ, j'utilisais le champ texte juste pour afficher un message d'erreur.

Et donc ici, on met ça à vrai, pour exécuter la fonction, puis changer la valeur d'entrée. Une fois que ça a roulé, ce qui arrive au chargement de la page, on change la valeur d'entrée pour le résultat. De notre composant JavaScript arbitraire. Et ce résultat va être juste ici, return pers.id.

Alors ce qu'on obtient, c'est ceci juste ici, ce paramètre qui s'appelle ID. Bon. Pour ceux qui savent déjà comment marchent les paramètres, je suis peut-être allé un peu trop dans le détail. Et pour les autres, maintenant, vous le savez. Alors passons à la suite. La prochaine chose qu'on va faire, c'est l'écran de la liste des projets suivis.

Attendez. Tiens, c'est drôle. Ce lien-là est censé se déclencher au clic, mais on ne s'en sert pas, alors je ne sais pas trop pourquoi il est là. Je l'efface, en espérant que je n'ai rien brisé. Bon. Alors on a le changement de valeur d'entrée. Et donc maintenant ce qui se passe, c'est que cette valeur d'entrée est mise à jour pour afficher l'ID dans l'URL, celui-ci, bon. Maintenant, comment on va chercher le projet pour vrai, une fois revenus dans le monde habituel d'alwa? Alors on va charger une liste de projets où l'URL de partage du projet contient le paramètre. Donc cet ID. J'utilise « contient » parce que j'ai mis l'URL au complet là, mais elle va toujours contenir cet ID.

Et ça a évité beaucoup de traitement de texte, pour ainsi dire. Ce n'est pas si facile à. La condition suivante, c'est que l'URL de partage du projet n'est pas vide. Et c'est vraiment important, parce que si je ne mets pas ça et que quelqu'un va juste à l'URL racine sans mettre d'ID, il va obtenir une liste de. Tous les projets qui n'ont pas d'idée, et ce serait vraiment grave.

Alors j'ai mis ça comme une des mesures de sécurité, et puis l'autre, c'est que le partage de lien est à vrai. Alors il y a vraiment une propriété qui est basculée, et je vous ai montré que c'était la propriété principale. Ici, quand on clique sur cette case. Alors c'est ce à quoi on, c'est le partage de lien. Alors j'ai mis une deuxième sécurité là juste pour m'assurer qu'on ne partage pas par accident des données qu'on n'est pas censés partager. Un peu plus de sécurité, en général, ça ne fait pas de tort.

Alors c'est pas mal tout, assez simple, je pense. Je vous fais juste un petit récapitulatif de comment tout ça marche, depuis le début. Alors quand. On va cliquer sur cette case, un. On met le partage de lien du projet à vrai. Et encore une fois, je ne sais pas pourquoi ça affiche trois niveaux de projet courant. C'est peut-être juste parce que je suis passé par trois pages.

Alors on met le partage de lien à vrai. Et bien sûr, ça va faire apparaître celui-ci, ici, parfois visible, et c'est la condition. Bon. Maintenant, passé ce point, on génère l'U I D avec l'appel d'API que je vous ai montré tantôt, puis on met à jour le projet pour qu'il ait cette URL de partage de projet.

Et comme ça, si quelqu'un clique sur partager le lien, il peut faire exactement ça. Partager l'URL complète. De l'autre côté. Si vous regardez la, donc la page qui va charger ça. C'est l'application Web. Elle est faite d'une liste qui charge le. L'ID d'URL à partir, essentiellement, du composant JavaScript. On a une condition qui exige qu'un ID d'URL soit défini et que le partage de lien soit à vrai.

Et puis à partir du composant JavaScript, juste pour faire le pont, ce qu'on fait, c'est récupérer l'URL, récupérer les paramètres de l'URL. Vérifier s'il y a un paramètre ID et le retourner, sinon retourner un message d'erreur. Et ce qu'on fait avec cette valeur de retour, c'est changer l'entrée.

Qui est minuscule et groupée ici. Et cette entrée, encore une fois, va être la source de cette liste juste ici. Bon. J'espère que c'était clair. J'espère que j'ai bien expliqué. Bonne chance et amusez-vous bien. Et dites-nous si vous avez des questions, si vous voulez d'autres bons trucs comme celui-là, comment utiliser nos composants et avez besoin de télécharger des choses à faire.

Et en général, comment bâtir des affaires vraiment géniales, alors abonnez-vous, et on se revoit dans la prochaine vidéo.

‍