Cette application restera volontairement simple : elle affichera un compte du nombre de produits actuellement dans le catalogue de votre dev store, directement depuis un écran ajouté à l'administration Shopify. L'objectif n'est pas la complexité, mais de comprendre le cycle complet, du code généré jusqu'à l'installation réelle.

Générer le projet

Depuis un dossier où vous avez le droit d'écrire, différent de atelier-lumiere-theme puisqu'une application est un projet séparé d'un thème, lancez :

Cette commande vous pose plusieurs questions : un nom pour votre application (par exemple atelier-lumiere-app), puis le choix d'un modèle de départ. Choisissez le modèle React Router, la base recommandée actuellement par Shopify pour une nouvelle application : elle inclut déjà l'authentification, une base de données légère pour stocker les jetons d'accès, et une structure de projet prête à l'emploi.

Pourquoi React Router, et pas Remix

Si vous avez déjà lu un article qui recommande Remix comme base pour une nouvelle application Shopify, sachez que Remix a évolué vers React Router, qui en est la suite directe. Le modèle React Router est désormais le chemin recommandé pour un nouveau projet ; Remix reste maintenu pour les projets déjà existants, mais n'est plus le point de départ conseillé pour un tout nouveau développement.

Un premier coup d'œil au projet généré

Ouvrez le dossier généré dans votre éditeur de code. Vous y retrouvez un fichier shopify.app.toml, celui évoqué au guide précédent, où seront déclarés les scopes de votre application, ainsi qu'un dossier app contenant le code de l'interface et de la logique métier, dans un style proche d'un projet web classique plutôt que d'un thème Liquid.

Lancer l'application en développement

Depuis ce dossier, lancez :

Cette commande vous guide vers une connexion (le compte développeur créé au guide 4), crée automatiquement une application dans le Dev Dashboard reliée à votre code local, met en place une petite base de données locale pour stocker les informations de session, et ouvre un tunnel réseau entre votre ordinateur et votre dev store, pour que Shopify puisse afficher votre interface encore en développement.

Ce que vous devriez voir

Une adresse s'affiche dans le terminal. En l'ouvrant, ou en appuyant sur la touche indiquée pour prévisualiser l'application, vous êtes invité à installer votre application sur votre dev store, avec un écran qui liste les permissions demandées, exactement le mécanisme d'autorisation présenté au guide 20. Après avoir accepté, vous arrivez sur l'écran d'accueil de votre application, intégré directement dans l'administration Shopify.

Le modèle React Router propose généralement un bouton qui génère des produits de test : utilisez-le, ou basculez vers votre dev store pour vérifier que ces produits apparaissent bien réellement dans Produits, exactement comme n'importe quel produit créé manuellement dans le parcours Shopify : les bases.

Arrêter proprement

Pour arrêter le serveur de développement, Ctrl+C dans le terminal suffit, exactement comme pour shopify theme dev au guide 9. Relancez shopify app dev plus tard pour reprendre votre session, sans perdre la configuration déjà établie.

Vérifiez que vous avez compris

Vous avez lancé shopify app dev, et l'application apparaît bien installée sur votre dev store. Si vous arrêtez cette commande avec Ctrl+C, l'application reste-t-elle installée et visible dans l'administration de votre dev store ?

Oui, l'installation elle-même persiste. Ce qui s'arrête, c'est le serveur local qui fait fonctionner le code de votre application pendant le développement : sans lui actif, l'interface de l'application dans l'administration peut ne plus répondre correctement, mais l'installation en tant que telle reste enregistrée jusqu'à ce que vous la désinstalliez explicitement.

Chapitre terminé