Démarrage

Démarrage rapide

Créez votre première mini-app en 3 étapes.

Créez votre première mini-app en quelques minutes avec seulement HTML, CSS et JavaScript.

Étape 1 — Créer la structure

TEXT

mon-app/
├── index.html      # Point d'entrée (obligatoire)
├── manifest.json   # Métadonnées (obligatoire)
├── app.js          # Votre logique JavaScript
└── style.css       # Vos styles

Étape 2 — Configurer le manifest

Le fichier manifest.json est la carte d'identité de votre application.

JSON

{
    "id": "com.monentreprise.monapp",
    "name": "Ma Super App",
    "version": "1.0.0",
    "description": "Une description incroyable",
    "icon": "icon.png"
}

Étape 3 — Écrire le code

index.html — Le point d'entrée de votre application :

HTML

<!DOCTYPE html>
class="code-keyword"><html lang="fr">
class="code-keyword"><head>
    class="code-keyword"><meta charset="UTF-8">
    class="code-keyword"><meta name="viewport" content="width=device-width, initial-scale=1.0">
    class="code-keyword"><title>Ma Super Appclass="code-keyword"></title>
    class="code-keyword"><link rel="stylesheet" href="style.css">
class="code-keyword"></head>
class="code-keyword"><body>
    class="code-keyword"><h1>Bienvenue !class="code-keyword"></h1>
    class="code-keyword"><button id="btn">Dire bonjourclass="code-keyword"></button>
    
    class="code-keyword"><script src="app.js">class="code-keyword"></script>
class="code-keyword"></body>
class="code-keyword"></html>

app.js — Votre logique applicative :

class=class="code-string">"code-comment">// On attend toujours que le SDK Ondes soit prêt
document.addEventListener(class=class="code-string">"code-string">'OndesReady', async () => {
    console.log(class=class="code-string">"code-string">'✅ Ondes SDK prêt !');
    
    class=class="code-string">"code-comment">// Exemple: Récupérer lclass=class="code-string">"code-string">'utilisateur courant
    const user = await Ondes.User.getProfile();
    
    document.getElementById('btnclass=class="code-string">"code-string">').addEventListener('clickclass=class="code-string">"code-string">', () => {
        class=class="code-string">"code-comment">// Afficher un toast natif
        Ondes.UI.showToast({
            message: class=class="code-string">"code-string">`Bonjour ${user.username} !`,
            type: 'success'
        });
    });
});

Structure d'une Mini-App

Fichier	Requis	Description
`index.html`	✅ Oui	Le point d'entrée. C'est ce fichier qui est chargé par la WebView.
`manifest.json`	✅ Oui	Contient les métadonnées essentielles (nom, version, permissions...).
`*.js`	Non	Vos scripts. Vous pouvez avoir plusieurs fichiers JS.
`*.css`	Non	Vos feuilles de styles.
`assets/`	Non	Dossier recommandé pour vos images, polices, sons, etc.

Événement OndesReady

Ne jamais utiliser Ondes.* directement sans attendre OndesReady. Le bridge est injecté de manière asynchrone après le chargement de la page.

PrécédentIntroduction Suivant Le Manifest