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

87 lines
2.6 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.
[Voir le fichier `manifest.yml` d'exemple](./manifest.md)
## 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.