Coder avec Velo : Frontend
pour les développeurs

Bienvenue dans le cours sur le front-end de Velo.

Je m’appelle Joshua et je suis conseiller en développement.

Je vais vous montrer comment utiliser le front-end de Velo by Wix.

Tout au long de ce cours, nous allons faire un certain nombre de choses, de la création de gestionnaires d’événements statiques et dynamiques à la création d’un simple exemple de Hello World, en passant par l’utilisation des API internes de Wix, comme storage et window.

Nous allons également apprendre à utiliser certains de nos outils, comme la Version candidate, l’enregistrement et la surveillance.

Vous serez en mesure de combiner toutes ces compétences.

À la fin, vous serez un solide développeur front-end capable d’utiliser Velo by Wix.

Bienvenue dans cette leçon.

Nous allons faire le tour de l’Éditeur et nous concentrer sur le front-end.

Avant de commencer, il faut activer le Mode développeur pour activer Velo.

En haut de l’écran, cliquez sur Activer le mode développeur.

Le mode développeur nous permet d’ajouter notre propre code JS, de nous connecter aux outils internes de Wix et à nos propres API que nous allons étudier tout au long de ce cours.

Nous cliquons sur Activer le mode développeur et nous commençons sans aucune configuration.

J’ai donc déjà du code ici.

J’ai aussi de nouveaux éléments à l’écran, sur le panneau de code et la barre latérale Velo.

Nous allons commencer par le panneau de code ou IDE.

Le panneau de code comporte différents onglets en fonction de la page sur laquelle vous êtes.

Là, nous sommes sur la page Front-end de Velo.

Nous avons un autre onglet : masterpage.js.

masterpage.js est un fichier qui contrôle toutes les pages de votre site.

Vous pouvez ajouter du code ici pour que différentes fonctions se produisent sur chaque page.

Par exemple, vous avez vos en-têtes et vos pieds de page, vous avez peut-être une barre de recherche en haut de votre en-tête et vous voulez qu’elle apparaisse et fonctionne de la même manière sur chaque page.

Vous pouvez le faire.

Revenons à l’onglet Velo Front-end.

La navigation est facile.

Nous avons également notre panneau de code ou notre IDE.

Notre IDE a son propre linter ES.

Il est similaire à VS Code.

Il y a aussi le remplissage et la correction automatiques.

Si j’importe une nouvelle API, j’obtiens une liste à partir de la saisie automatique.

Je peux choisir un grand nombre d’API parmi wix-data, wix-crm-backend, wix-animations, wix-stores et bien d’autres.

Si je tape wixLocation, qui est une API front-end que nous allons étudier dans ce cours, vous verrez qu’elle est là.

J’obtiens également quelques erreurs.

Notre Éditeur nous permet de savoir si nous avons des doublons ou si quelque chose ne va pas dans notre code.

Je vais ici et je supprime wixLocation, puisque nous l’avons déjà dans notre code.

Nous pouvons aussi faire un clic droit sur Format pour que le code soit plus esthétique.

Lorsque nous sélectionnons différents éléments sur notre page, sur notre Éditeur, nous avons un nouvel élément dans notre panneau de code.

Il s’agit du Panneau de propriété.

Notre Panneau de propriété nous permet de gérer les différents éléments sur la page quand nous cliquons dessus.

Ici, il y a « welcomeMessage ».

Il s’agit de l’ID que j’ai défini.

Je peux toujours aller ici et modifier l’ID.

En dessous, nous avons Valeurs par défaut.

Ces valeurs par défaut sont Masqué et Réduit.

Elles dépendent de l’élément que vous avez sélectionné.

Les valeurs Masqué et Réduit peuvent être définies par défaut pour effectuer automatiquement ces actions quand la page se charge.

Nous pouvons même le faire par programmation, avec du code également, mais vous avez vos valeurs par défaut que vous pouvez sélectionner ici pour améliorer les choses.

En dessous, nous avons les Gestionnaires d'événements.

Ils contiennent tous nos différents gestionnaires d’événements statiques que nous pouvons ajouter en fonction de l’élément que nous avons choisi.

Cela dépend aussi du type de données.

Si c’est du texte ou un bouton, il y aura différents gestionnaires d’événements.

Revenons à la barre latérale Velo.

Elle comporte beaucoup d’options.

Pour le front-end, nous allons nous concentrer sur Code de la page.

Code de la page contient un dossier appelé Pages principales.

C’est là que je peux accéder aux différentes pages que j’ai dans mon projet.

Quand je clique sur les différentes pages, l’onglet change dans le panneau de code.

Chaque page a donc sa propre façon d’ajouter du code et de le contrôler.

En dessous, nous avons un espace pour les membres Wix.

Si j’ajoutais des boutiques Wix ou même les réservations ou les événements, cela ajouterait plus de pages front-end à mon option Code de page.

Ensuite, nous avons Fenêtres, que nous allons étudier pendant ce cours avec wix-window et wix-location.

Enfin, nous avons masterpage.js dont nous venons de parler.

Voilà donc tous les outils que vous pouvez utiliser pour votre développement front-end.

Vous pouvez également utiliser Outils Velo sur le côté pour examiner les onglets Gestionnaire de versions, Gestionnaire de secrets et Surveillance, dont nous allons parler un peu plus tard dans le cours.

Si vous avez besoin d’aide, vous pouvez cliquer sur Aide Velo et consulter Référence API.

Vous pouvez aussi jeter un œil à notre forum.

C’est ainsi que s’achève la présentation de l’Éditeur.

Nous vous donnons rendez-vous dans la prochaine leçon, où nous allons étudier un exemple très simple de Hello World avec Velo.