Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Velo de la photo de profil de Wix Hacker Noon

@voileVelo de Wix

Velo est une plate-forme de développement complète qui vous permet de créer, gérer et déployer rapidement des applications Web professionnelles.

Wix Velo est un produit innovant qui vous permet de créer des applications Web robustes sans configuration. Travaillez dans Visual Builder de Wix, ajoutez des fonctionnalités et des interactions personnalisées à l’aide des API Velo et profitez du codage sans serveur à la fois en front-end et en back-end. Avec Velo, votre application Web peut s’exécuter en une fraction du temps qu’elle prend normalement. Pour vous présenter Velo, nous avons notre propre version d’un « Hello World! » Exemple: un site Web de conversion de devises simple qui utilise le API Wix Fetch pour vous connecter à un fournisseur tiers. Les visiteurs du site Web sélectionnent la devise source et cible dans les listes déroulantes et saisissent un montant à convertir. Les résultats sont affichés dans une zone de texte.

Suivez les étapes suivantes pour vous familiariser avec la structure et la syntaxe de base de Velo.

Étape 1: créer un nouveau site Wix

  1. Connectez-vous à votre compte Wix ou Ouvrez un compte Wix si vous n’en avez pas encore.
  2. Ouvrez un modèle vierge dans l’éditeur.

Étape 2: Activez Velo

Activez Velo dans l’éditeur Wix pour pouvoir travailler avec du code sur votre site.

Étape 3: ajouter des éléments à la page

Pour ajouter des éléments de page dans l’éditeur Wix:

  1. Cliquez sur le côté gauche de l’éditeur Ajouter.
  2. Ajoutez les éléments de page ci-dessous à votre site.
  • Au fur et à mesure que vous ajoutez chaque élément, mettez son identifiant dans le Propriétés et événements Panneau de commande qui apparaît sur le côté droit du panneau de code. Pour chaque élément, utilisez le nom indiqué ci-dessous moins le hashtag. Le tableau suivant est une liste complète des éléments et où les trouver dans le menu Ajouter.

Élément: La liste déroulante
Position dans le menu « Ajouter »:
Entrée utilisateur
la description: Pour sélectionner la devise source
JE VOUDRAIS: sourceCurrency

élément: La liste déroulante
Position dans le menu Ajouter: Entrée utilisateur
la description: Pour sélectionner la devise cible
JE VOUDRAIS: targetCurrency

élément: Contribution
Position dans le menu Ajouter: Entrée utilisateur
la description: Saisissez le montant à convertir
JE VOUDRAIS: sourceAmount

élément: Champ de texte
Position dans le menu Ajouter: Entrée utilisateur
la description: Pour afficher le montant converti
JE VOUDRAIS: targetCurrency

élément: Bouton
Position dans le menu Ajouter: Bouton
la description: Pour déclencher la conversion de devises lorsque vous cliquez dessus
JE VOUDRAIS: CalculateButton

Étape 4: ajouter du code

REMARQUES:
Tout le code de cet exemple est ajouté à une seule page du site. Dans cette section, nous avons décomposé le code en petits blocs, suivis d’explications. Pour voir le code complet de cet exemple sans commentaires, défiler vers le bas jusqu’à la fin du tutoriel.

Voir nos Référence API Dans cet exemple, vous en apprendrez plus sur le code basé sur Velo.

Pour ajouter le code:

  1. Double clic Code de la page d’accueil en bas de l’éditeur pour ouvrir le Panneau de code.
  2. Ajoutez le code suivant en haut du code sur l’onglet avant cela onReady Une fonction:
    // The getJSON function in wix-fetch lets you retrieve a
    // JSON resource from the network using HTTPS.
    import {getJSON} from 'wix-fetch';
    
    // Set the URL of the 3rd-party service.
    const url = "https://api.exchangeratesapi.io/latest";
    
    // Define the currency option values and text for the dropdowns.
    let currencyOptions = [
      { "value": "USD",  "label": "US Dollars"},
      { "value": "EUR",  "label": "Euros"},
      { "value": "JPY",  "label": "Japanese Yen"},
    ];

    3. Ajoutez le code suivant au onReady Une fonction. Le code de la fonction onReady est exécuté lors du chargement de la page.

    $w.onReady(function () {
      // Set the currency options for the dropdowns.
      populateDropdowns();
    
      // Set the onClick event handler for calculateButton to calculate the target amount.
      $w('#calculateButton').onClick((event) => {
        calculateCurrency();
      })
    });

    le $ w function peut sélectionner des éléments sur une page par ID ou par type afin que nous puissions exécuter des fonctions et définir les propriétés des éléments. Utilisez cette syntaxe pour sélectionner un élément par ID $ w (« # myElementId ») et cette syntaxe par type $ w (« ElementType »).

    Ici, nous sélectionnons le bouton et définissons un onClick Gestionnaire d’événements pour calculer le montant cible.

    4. Ajoutez du code pour définir les fonctions:

    populateDropdowns ()

    // Populate the dropdowns.
    function populateDropdowns(){
      //Set the dropdown options.
      $w("Dropdown").options = currencyOptions;
      // Set the first dropdown option as the initial option.
      $w("Dropdown").selectedIndex = 0;
    }

    Ici, nous sélectionnons tous les menus déroulants par type. Avec un coup de téléphone $ w Avec le type d’élément « Dropdown », nous sélectionnons toutes les listes déroulantes de la page.

    calculer la devise ()

    // Calculate the target amount.
    function calculateCurrency() {
      // Initial amount 
      let initialAmount = $w("#sourceAmount").value;
      // Original currency
      let sourceSymbol = $w("#sourceCurrency").value;
      // Target currency
      let targetSymbol = $w("#targetCurrency").value;
      // Define the full url.
      let fullUrl = `${url}?base=${sourceSymbol}&symbols=${targetSymbol}`;
        
      // Call the wix-fetch API function to retrieve the JSON resource.
      getJSON(fullUrl)
      .then(json => {
        // Set the target amount as the initial amount multiplied by
        // the conversion rate.
        $w("#targetAmount").value = initialAmount * json.rates[targetSymbol];
      }
    )}

    Nous utilisons Littéraux de modèle pour définir l’URL complète contenant la devise source et la devise de destination.

    L’API Wix Fetch getJSON La fonction obtient la ressource JSON à l’aide de l’URL complète. getJSON renvoie un promessequi est résolu en un objet JSON.

    Nous multiplions le taux récupéré par le montant de départ et l’affectons à la zone de texte targetAmount.

    Étape 5: voyez-le en action

    Il est maintenant temps de tester votre site Web:

  1. Cliquez sur Aperçu en haut à droite de l’éditeur.
  2. Saisissez un montant dans la devise source.
  3. Cliquez sur le bouton Calculer et voyez le résultat de la devise convertie dans la zone de texte Montant cible.
  4. Publier Votre site Web pour le mettre en ligne et le préparer pour la production.

C’est ça! En quelques minutes, vous avez créé une application Web dans Velo! Aucune configuration, aucune administration de l’infrastructure du serveur, juste l’intégration des API Velo dans le Wix Visual Builder.

Prochaines étapes

Après avoir découvert Velo, voyez ce que vous pouvez faire d’autre:

  • Appelez simplement le code backend depuis le frontend Modules Web.
  • Travailler avec Wix constructeur visuel.
  • Ajoutez des fonctionnalités et personnalisez votre site en utilisant API Veil. Voici quelques exemples de ce que vous pouvez faire:

Exemple de code

Voici le code complet de cet exemple sans commentaires:

import {getJSON} from 'wix-fetch';

const url = "https://api.exchangeratesapi.io/latest";

let currencyOptions = [
  { "value": "USD",  "label": "US Dollars"},
  { "value": "EUR",  "label": "Euros"},
  { "value": "JPY",  "label": "Japanese Yen"},
];

$w.onReady(function () {
  populateDropdowns();
 
  $w('#calculateButton').onClick((event) => {
    calculateCurrency();
  })
});

function populateDropdowns(){
  $w('Dropdown').options = currencyOptions;
  $w('Dropdown').selectedIndex = 0;
}

function calculateCurrency() {
  let initialAmount = $w("#sourceAmount").value;
  let sourceSymbol = $w("#sourceCurrency").value;
  let targetSymbol = $w("#targetCurrency").value;
  let fullUrl = `${url}?base=${sourceSymbol}&symbols=${targetSymbol}`;

  getJSON(fullUrl)
  .then(json => {
    $w("#targetAmount").value = initialAmount * json.rates[targetSymbol];
  }
)}

Publié précédemment à https://support.wix.com/de/article/getting-started-with-velo-by-wix

Mots clés

Rejoignez Hacker Noon

Créez votre compte gratuit pour débloquer votre expérience de lecture personnalisée.



Source link

Recent Posts