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

103 lines
3.0 KiB
Markdown

# 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.
```bash
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.
```yaml
---
# 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
<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.
```javascript
// 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.
```bash
cli app run -p ./chemin/vers/app
```
La page d'accueil devrait être accessible à l'adresse http://localhost:8080.