lwc recipes

Recettes de composants Web Lightning

Une collection d'exemples de code faciles à comprendre pour les composants Web Lightning. Chaque recette montre comment coder une tâche spécifique dans le moins de lignes de code possible tout en suivant les meilleures pratiques. Un lien « Afficher la source » vous amène directement au code sur GitHub. De « Hello World » à l'accès aux données et aux bibliothèques tierces, il y a une recette pour cela !

Apprenez-en davantage sur cette application en complétant le projet Démarrage rapide : Explorez le projet Trailhead de l'application échantillon de recettes LWC ou en regardant cette courte vidéo de présentation.

Cet exemple d'application est conçu pour s'exécuter sur Salesforce Platform. Si vous souhaitez découvrir les composants Web Lightning sur n'importe quelle plate-forme, veuillez visiter https://lwc.dev et essayer notre exemple d'application de composants Web Lightning LWC Recipes OSS.

Table des matières

• Installation de l'application à l'aide d'une organisation Scratch : il s'agit de l'option d'installation recommandée. Utilisez cette option si vous êtes un développeur qui souhaite découvrir l'application et le code.

• Installation de l'application à l'aide d'un package déverrouillé : cette option permet à quiconque de découvrir l'exemple d'application sans installer d'environnement de développement local.

• Installation de l'application à l'aide d'une organisation Developer Edition ou d'un Trailhead Playground : utile pour gérer les badges Trailhead ou si vous souhaitez que l'application soit déployée dans un environnement plus permanent qu'une organisation Scratch.

• Instructions d'installation facultatives

• Visites de codes

Installer l'application à l'aide d'une organisation Scratch

1. Configurez votre environnement. Suivez les étapes du projet Démarrage rapide : Lightning Web Components Trailhead. Les étapes comprennent :

• Activer Dev Hub dans votre Trailhead Playground

• Installer la CLI Salesforce

• Installer le code Visual Studio

• Installez les extensions Visual Studio Code Salesforce, y compris l'extension Lightning Web Components

2. Si vous ne l'avez pas déjà fait, autorisez votre organisation hub et fournissez-lui un alias ( myhuborg dans la commande ci-dessous) :

   sf org login web -d -a myhuborg

3. Clonez le dépôt lwc-recipes :

   git clone https://github.com/trailheadapps/lwc-recipes
   cd lwc-recipes

4. Créez une organisation scratch et fournissez-lui un alias ( lwc-recipes dans la commande ci-dessous) :

   sf org create scratch -d -f config/project-scratch-def.json -a lwc-recipes

5. Transférez l'application vers votre organisation scratch :

   sf project deploy start

6. Attribuez l'ensemble d'autorisations de recettes à l'utilisateur par défaut :

   sf org assign permset -n recipes

7. Importer des exemples de données :

   sf data tree import -p ./data/data-plan.json

8. Ouvrez l'organisation scratch :

   sf org open

9. Dans Configuration , sous Thèmes et image de marque , activez le thème Recipes Lite ou Recipes Blue .

10. Dans le lanceur d'applications, cliquez sur Afficher tout , puis sélectionnez l'application LWC .

Installation de l'application à l'aide d'un package déverrouillé

Suivez cet ensemble d'instructions si vous souhaitez déployer l'application dans un environnement plus permanent qu'une organisation Scratch ou si vous ne souhaitez pas installer les outils de développement locaux. Vous pouvez utiliser des organisations sans suivi des sources, telles qu'une organisation gratuite Developer Edition ou Trailhead Playground.

Assurez-vous de partir d'un tout nouvel environnement pour éviter les conflits avec tout travail antérieur que vous avez pu effectuer.

1. Connectez-vous à votre organisation

2. Cliquez sur ce lien pour installer le package déverrouillé Recettes dans votre organisation.

3. Sélectionnez Installer pour tous les utilisateurs

4. Importer les données du compte et des contacts :

• Cliquez ici pour accéder au fichier Comptes-Contacts.csv . Faites un clic droit sur la fenêtre du navigateur et enregistrez le fichier sous Accounts-Contacts.csv .

• Dans Configuration , saisissez Importation de données dans la case Recherche rapide et cliquez sur Assistant d'importation de données .

• Cliquez sur Lancer l'assistant .

• Cliquez sur Comptes et contacts , puis cliquez sur Ajouter de nouveaux enregistrements .

• Faites glisser le fichier Accounts-Contacts.csv que vous venez d'enregistrer vers la zone de téléchargement.

• Cliquez sur Suivant , Suivant et Démarrer l'importation .

5. Si vous tentez le démarrage rapide sur Trailhead, cette étape est obligatoire, mais sinon, ignorez :

• Accédez à Configuration > Utilisateurs > Ensembles d'autorisations .

• Cliquez sur recettes .

• Cliquez sur Gérer les affectations .

• Vérifiez votre utilisateur et cliquez sur Ajouter des affectations .

6. Dans Configuration , sous Thèmes et image de marque , activez le thème Recipes Lite ou Recipes Blue .

7. Dans le lanceur d'applications, cliquez sur Afficher tout , puis sélectionnez l'application Recettes LWC .

Installation de l'application à l'aide d'une organisation Developer Edition ou d'un Trailhead Playground

Suivez cet ensemble d'instructions si vous souhaitez déployer l'application dans un environnement plus permanent qu'une organisation Scratch. Cela inclut les organisations dont les sources ne sont pas suivies, telles qu'une organisation gratuite Developer Edition ou Trailhead Playground.

Assurez-vous de partir d'un tout nouvel environnement pour éviter les conflits avec les travaux antérieurs que vous avez pu effectuer.

1. Clonez ce dépôt :

   git clone https://github.com/trailheadapps/lwc-recipes
   cd lwc-recipes

2. Autorisez votre organisation Trailhead Playground ou Developer et fournissez-lui un alias ( mydevorg dans la commande ci-dessous) :

   sf org login web -s -a mydevorg

3. Exécutez cette commande dans un terminal pour déployer l'application.

   sf project deploy start -d force-app

4. Attribuez l’ensemble d’autorisations recipes à l’utilisateur par défaut.

   sf org assign permset -n recipes

5. Importez des exemples de données.

   sf data tree import -p ./data/data-plan.json

6. Si votre organisation n'est pas déjà ouverte, ouvrez-la maintenant :

   sf org open -o mydevorg

7. Dans Configuration , sous Thèmes et image de marque , activez le thème Recipes Lite ou Recipes Blue .

8. Dans le lanceur d'applications, sélectionnez l'application LWC .

Instructions d'installation facultatives

Ce référentiel contient plusieurs fichiers pertinents si vous souhaitez intégrer des outils de développement Web modernes dans vos processus de développement Salesforce ou dans vos processus d'intégration continue/déploiement continu.

Formatage des codes

Prettier est un formateur de code utilisé pour garantir un formatage cohérent dans votre base de code. Pour utiliser Prettier avec Visual Studio Code, installez cette extension à partir de Visual Studio Code Marketplace. Les fichiers .prettierignore et .prettierrc sont fournis dans le cadre de ce référentiel pour contrôler le comportement du formateur Prettier.

Avertissement La version actuelle du plugin Apex Prettier nécessite l'installation de Java 11 ou supérieur.

Pelucheux de code

ESLint est un outil de peluchage JavaScript populaire utilisé pour identifier les erreurs stylistiques et les constructions erronées. Pour utiliser ESLint avec Visual Studio Code, installez cette extension à partir de Visual Studio Code Marketplace. Le fichier .eslintignore est fourni dans le cadre de ce référentiel pour exclure des fichiers spécifiques du processus de peluchage dans le contexte du développement de composants Web Lightning.

Hook de pré-validation

Ce référentiel est également livré avec un fichier package.json qui facilite la configuration d'un hook de pré-commit qui applique le formatage et le peluchage du code en exécutant Prettier et ESLint à chaque fois que vous effectuez des modifications git commit .

Pour configurer le hook de pré-commit de formatage et de linting :

1. Installez Node.js si vous ne l'avez pas déjà fait

2. Exécutez npm install dans le dossier racine de votre projet pour installer les modules ESLint et Prettier (Remarque : les utilisateurs Mac doivent vérifier que les outils de ligne de commande Xcode sont installés avant d'exécuter cette commande.)

Prettier et ESLint s'exécuteront désormais automatiquement chaque fois que vous validez des modifications. La validation échouera si des erreurs de peluchage sont détectées. Vous pouvez également exécuter le formatage et le linting à partir de la ligne de commande à l'aide des commandes suivantes (consultez package.json pour la liste complète) :

npm run lint
npm run prettier

Visites de codes

Code Tours sont des procédures pas à pas guidées qui vous aideront à mieux comprendre le code de l'application. Pour pouvoir les exécuter, installez l'extension CodeTour VSCode.