Dans une vidéo récente intitulée 'Key Concepts to become a Wized Expert', Alex Iglesias, le CTO de Finsweet et nouveau Product Owner de Wized, ainsi que Rohan Ganachari, le responsable marketing de Wized, nous ont guidés à travers quatre concepts fondamentaux pour maîtriser jusqu'à 90% des cas d'utilisation de Wized. Dans cet article, nous allons explorer ces quatre idées en détail, en partageant ce que nous avons appris et comment ces concepts peuvent être appliqués dans vos propres projets.

Wized, le Webflow du Javascript

Wized est un outil no-code qui vous permet de construire des applications web complexes dans Webflow. Il vous permet d'utiliser Webflow comme interface pour votre application web et d'intégrer nativement votre site web avec les bases de données les plus courantes ou avec n'importe quelle base de données disposant d'une API REST. Wized vous permet de créer des fonctionnalités de connexion personnalisées, des flux de paiement Stripe, des interactions utilisateur complexes, et bien plus encore.

Enfin, pour citer Alex Iglesias, le CTO de Finsweet et nouveau Product Owner de Wized,

"Wized est pour Javascript, ce qu'est Webflow pour HTML et CSS".

So, tout comme Webflow a démocratisé la création de sites web en rendant le HTML et le CSS accessibles à tous, Wized vise à faire de même pour la programmation d'applications web avec Javascript.

Note : Développement (Webflow) vs Programmation (Wized)

On observera que lorsqu'on parle de Wized le language utilisé change et n'est pas le même que Webflow. On parle jamais de "développement" mais toujours de "programmation".

Les 4 concepts clés de Wized

Ces quatre concepts JavaScript sont essentiels pour comprendre comment Wized fonctionne.

1. Les variables

Dans le contexte de Wized et du développement JavaScript, les variables jouent un rôle fondamental. Elles agissent comme des "conteneurs" pour stocker des "valeurs".

Une analogie utile pour comprendre les variables est de les considérer comme des conditions évaluées dynamiquement. Cela signifie qu'elles peuvent changer de valeur en fonction des actions de l'utilisateur ou d'autres événements dans votre application. Par exemple, vous pouvez avoir une variable qui détermine si un utilisateur est connecté ou non. Cette variable pourrait être définie sur "true" lorsque l'utilisateur se connecte, et sur "false" lorsqu'il se déconnecte.

En fonction de la valeur de cette variable, différentes actions peuvent être déclenchées dans votre application. Si la variable est "true" (l'utilisateur est connecté), vous pouvez afficher un message de bienvenue personnalisé. Si elle est "false" (l'utilisateur est déconnecté), vous pouvez rediriger l'utilisateur vers la page de connexion.

2. Les expressions

Une expression est une instruction qui produit une valeur à partir d'une ou plusieurs autres valeurs. Pour illustrer ce concept, prenons un exemple simple en mathématiques : 2+2=3

Ici, "2+2" est l'expression et "4" est le résultat de cette expression.

Mais les expressions en programmation ne sont pas limitées à des calculs simples. Elles peuvent aussi être utilisées pour contrôler le comportement de votre application. Par exemple, imaginez que vous avez un bouton sur votre site web. Vous pouvez créer une expression qui change la valeur d'une variable lorsque ce bouton est cliqué. Si la variable est initialement "true", l'expression pourrait la changer en "false" lorsque le bouton est cliqué, et inversement.

C'est là que réside la véritable puissance des expressions : elles vous permettent de manipuler des valeurs et de contrôler le comportement de votre application de manière dynamique et interactive.

3. Les fonctions

Dans le domaine de la programmation, les fonctions sont des éléments essentiels qui permettent de structurer et d'organiser votre code. Une fonction est une sorte de "machine" qui prend une entrée (ou plusieurs), effectue des opérations, souvent en utilisant des expressions, et produit une sortie. Une fonction peut donc contenir un groupe d'expression.

Pour faire une comparaison avec les lightbox Webflow, vous pouvez penser à une fonction comme à une lightbox. Une lightbox est un outil qui prend une image (l'entrée), l'affiche de manière agrandie avec un fond sombre (l'opération), et permet à l'utilisateur de la fermer pour revenir à la page d'origine (la sortie). De la même manière, une fonction prend des entrées, effectue des opérations sur elles, et produit une sortie.

Tips pour générer et écrire vos fonctions JavaScript ? Utilisez ChatGPT (Attention à bien lui donner l'ensemble du contexte)

Découvrir comment j'utilise ChatGPT pour m'aider avec JavaScript dans cette vidéo →

4. Http Requests

Les requêtes HTTP permettent d'envoyer et de recevoir des données entre le front-end et le back-end de votre application, offrant ainsi la possibilité d'ajouter, de mettre à jour et de supprimer des données via ces requêtes.

HTTP, qui signifie Hypertext Transfer Protocol, est donc le moyen par lequel ces deux parties communiquent et échangent des données.

Conclusion (Récap)

En maîtrisant ces quatre concepts, vous serez bien équipé pour tirer le meilleur parti de Wized !

• Les Variables : Elles agissent comme des "conteneurs" pour stocker des "valeurs" et peuvent être utilisées pour contrôler le comportement dynamique de votre application.
• Les Expressions : Ce sont des instructions qui produisent une valeur à partir d'une ou plusieurs autres valeurs. Elles sont essentielles pour manipuler des valeurs et contrôler le comportement de votre application de manière dynamique et interactive.
• Les Fonctions : Elles sont des éléments essentiels qui permettent de structurer et d'organiser votre code. Une fonction prend une entrée, effectue des opérations, souvent en utilisant des expressions, et produit une sortie.
• Les Requêtes HTTP : Elles permettent d'envoyer et de recevoir des données entre le front-end et le back-end de votre application, offrant ainsi la possibilité d'ajouter, de mettre à jour et de supprimer des données.

En apprendre plus sur l'outil de programmation Wized ?

• Voir la vidéo de présentation de Wized (Version française by Digidop)
• Voir la vidéo Key Concepts to become a Wized Expert de Wized (english version only)