edge/doc/apps/my-first-app.md
William Petit 8ca31d05c0
All checks were successful
arcad/edge/pipeline/head This commit looks good
feat(app,manifest): validation + extendable metadatas
2023-04-11 11:05:09 +02:00

2.6 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.

Voir le fichier manifest.yml d'exemple

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.