edge/doc/apps/my-first-app.md

3.0 KiB

Créer ma première application

1. Télécharger le CLI

  1. Se rendre à l'adresse https://forge.cadoles.com/arcad/edge/releases

  2. Télécharger la dernière version du binaire cli disponible dans la page.

2. Créer l'arborescence de son application

L'arborescence d'une "Edge App" doit correspondre à une structure prédéfinie.

my-app
    |-> manifest.yml    # Le fichier "manifeste" décrivant votre application
    |-> public          # Répertoire contenant tous les fichiers accessibles publiquement
    |-> server
        |-> main.js     # Le point d'entrée pour le code "serveur" de votre application

3. Compléter le fichier manifest.yml

Ce fichier est le manifeste de votre application. Il permet au serveur d'identifier celle ci et de récupérer des informations la concernant.

---
# L'identifiant de votre application. Il doit être globalement unique. 
# Un identifiant du type nom de domaine inversé est en général conseillé (ex: tld.mycompany.myapp)
id: tld.mycompany.myapp

# Le titre de votre application.
title: My App

# Les mots-clés associés à votre applications.
tags: ["chat"]

# La description de votre application.
# Vous pouvez utiliser la syntaxe Markdown pour la mettre en forme.
description: |>
    A simple demo application

4. Créer la page d'accueil

Créer le fichier my-app/public/index.html:

<html>
    <head>
        <title>My App</title>
    </head>
    <body>
        <h1>My App</h1>
        <!-- Inclure le SDK -->
        <script type="text/javascript" src="/edge/sdk/client.js"></script>
        <script type="text/javascript">
            // On utilise le SDK via la variable globale "Edge"
            // pour se connecter au serveur de notre application.
            Edge.connect().then(() => {
                // Une fois connecté, on envoie un message au serveur.
                Edge.send({ "hello": "world" });
            });

            // On écoute les messages en provenance du serveur.
            Edge.addEventListener("message", (evt) => {
                console.log("New server message", evt.detail)
            });
        </script>
    </body>
</html>

5. Créer le fichier server/main.js

Ce fichier est nécessaire, même vide.

// La fonction "onInit()" (si déclarée) est automatiquement
// exécutée au démarrage du serveur de votre application.
function onInit() {

}

// La fonction "onClientMessage(ctx, message)" est automatiquement
// exécutée quand le serveur de votre application reçoit un
// message en provenance du client.
function onClientMessage(ctx, message) {
    console.log(message);

    // On utilise le module "net" pour renvoyer un message au client
    net.send(ctx, { "my": "message" });
}

6. Exécuter votre application en local

Utiliser le CLI téléchargé préalablement pour lancer votre nouvelle application localement.

cli app run -p ./chemin/vers/app

La page d'accueil devrait être accessible à l'adresse http://localhost:8080.