Commencer à coder avec Velo

Bonjour !

Bienvenue dans le cours sur Velo pour débutants.

Je m’appelle Joshua, je suis conseiller en développement pour Velo.

Je vais vous présenter les bases de la plateforme Velo by Wix.

Velo by Wix est une plateforme qui fonctionne directement au-dessus de Wix et vous permet d’ajouter des fonctionnalités personnalisées et de l’interactivité à votre site Web en utilisant JavaScript.

Ce cours s’adresse donc aux développeurs comme aux non-développeurs, mais cela sera beaucoup plus facile si vous avez déjà un peu d’expérience en JavaScript dans votre arsenal.

Pour commencer, nous allons activer le mode développeur pour activer Velo.

Nous pouvons donc ajouter notre propre code JavaScript, comme je l’ai mentionné, et cela fonctionne en tandem avec Wix, ce qui vous permet d’utiliser les mêmes outils Wix, en plus d’ajouter du code.

Et nous pouvons juste activer le mode développeur ici.

Vous verrez que notre environnement commence à changer.

Nous avons donc notre Panneau de code en bas, et sur le côté droit ici, notre Panneau de propriétés, dans lequel nous pouvons contrôler toutes nos différentes identifications pour nos éléments sur la page que nous pouvons faire glisser et déposer.

Comme vous le savez, avec Wix, vous pouvez glisser et déposer des éléments et ce que vous voyez correspond à ce que vous obtenez sur l’Éditeur.

Ainsi, lorsque je clique sur différents éléments de la page, vous voyez dans le panneau des propriétés tous les différents identifiants des éléments sur lesquels je clique.

Par exemple, vous pouvez voir que sur le côté droit nous avons « bouton 11 ».

Si je clique sur ce texte, cela donne « text37 ».

Nous verrons plus en détail comment identifier ces éléments sur la page beaucoup plus facilement.

Ainsi, dans notre Panneau de code, nous disposons également d’autres outils intégrés, comme la saisie semi-automatique et même une commande linter qui nous permet de voir toutes les erreurs dans notre code.

Allons sur notre page Velo pour débutants et je vais vous montrer à quoi ressemble la saisie automatique.

Nous allons simplement enlever un peu de ce code ici.

Commençons à écrire une déclaration de code d’importation.

C’est ainsi que nous allons importer certaines des API que nous avons déjà créées dans Velo.

Comme vous le voyez, la saisie semi-automatique me propose déjà certaines des API disponibles avant même que je ne finisse le mot.

Nous pouvons sélectionner l’API que nous voulons : choisissons wixData, et le tour est joué.

Cela veut dire que je n’ai même pas eu à finir de saisir la phrase.

Je peux avoir le code juste là, prêt à être utilisé.

Alors, passons à notre barre latérale Velo, que vous voyez sur le côté.

Cette section nous amène à toutes nos pages principales pour le code des pages.

Et c’est ici que nous allons pouvoir contrôler notre code front-end.

Nous avons donc les pages Home, Velo for Beginners, Hello Velo et quelques autres pages déjà sur le site.

Mais comme vous le remarquez dans le panneau de code, cela commence à changer, ce qui nous aide à organiser notre code et à savoir sur quelle page nous...

nous trouvons à ce moment-là.

Ensuite, nous avons aussi Global en bas ici.

Cela affiche la page de code de notre masterpage.js.

Il s’agit donc du code qui nous permet de travailler sur l’ensemble de notre site Web et non sur une page particulière.

Un bon exemple serait un en-tête épinglé que l’on voudrait voir nous suivre tout le long de la page lorsque nous la faisons défiler du haut vers le bas.

Sur le côté gauche ici aussi, nous avons notre option Fichiers de code.

Les fichiers de code nous permettent de travailler avec notre code back-end.

Lorsque je clique sur d’autres fichiers de code sur le côté, cela ouvre d’autres onglets à côté de notre code front-end, juste pour nous aider à mieux nous organiser.

Nous avons également un cours sur le back-end, qui se concentrera beaucoup plus sur les fichiers de code.

Je vous encourage donc à le consulter.

Ensuite, nous avons un moyen de rechercher notre code.

Donc comme vous le voyez ici, j’ai déjà écrit quelque chose.

Cela me permet simplement de savoir sur quelle page je peux trouver wixData utilisé.

J’utilise parfois cette fonction quand j’ai oublié où j’en étais, ou l’emplacement d’un code que j’ai créé, ou même le nom d’une fonction dont je ne suis pas sûr de la page où elle se trouve.

C’est génial pour les sites Web complexes que je construis.

Et ensuite, nous avons nos Bases de données, notre Gestionnaire de contenu.

C’est là que nous pouvons stocker toutes les données que nous voulons concernant nos sites Web sans avoir à faire appel à un fournisseur externe.

Le fait de stocker ces données en interne permet d’augmenter la rapidité des développeurs et vous aide à savoir exactement où se trouvent vos données à tout moment.

Il existe de nombreux autres outils avec lesquels vous pouvez interagir, comme nos ensembles de données, qui vous permettent de connecter différents éléments de la page à la base de données sans avoir à écrire le moindre code.

L’onglet Outils Velo dépasse un peu le cadre de ce cours, mais je vais tout de même en parler maintenant.

Nous avons donc un gestionnaire de version qui vous permet de diffuser différents pourcentages de votre site Web aux visiteurs qui viennent sur votre site.

Si je veux que 50% de mes utilisateurs voient un certain type de changement, je peux configurer cela avec notre Gestionnaire de version.

Notre Gestionnaire de secrets est un autre endroit où vous pouvez stocker toutes vos clés API cachées afin de ne pas les exposer au public.

Nous disposons également de journaux et d’un système de surveillance, afin que vous puissiez surveiller votre site Web et détecter les différentes erreurs qui peuvent survenir.

La prochaine option que nous avons sur la barre latérale de Velo est Aide Velo.

L’onglet Aide Velo contient toutes les ressources dont nous avons besoin pour interagir avec notre communauté et en savoir plus sur Velo.

Nous avons notre forum, qui vous permet d’interagir avec la communauté et d’avoir des discussions, et il y a également notre onglet Référence API.

C’est une fonctionnalité excellente qui détaille toutes les différentes API que nous avons intégrées à Velo à partir du front-end et du back-end.

Il y a même des API qui vous permettent de vous connecter à d’autres services externes, comme notre API http-functions.

Notre documentation entre encore plus dans le détail et vous donne des exemples d’utilisation de Velo avec tous les différents types de scénarios.

Dans ce cours, nous vous avons montré comment utiliser cet environnement.

Dans le prochain cours, nous vous montrerons comment coder avec Velo et ajouter un peu plus d’interactivité à votre site.