103 lines
3.0 KiB
Markdown
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.
|