Premiers pas4 / 4

Installer

Le mode développeur installe le plugin sur un Hodi de test, puis le remet à jour à chaque sauvegarde : Hodi redémarre tout seul pour le charger.

À faire

Dans l'aperçu, le mode développeur du Hodi de test est actif : il montre un code.
2Sur la ligne surlignée, taper ce code à la fin de la commande.
3Dans Serveur › Plugins, Hello world apparaît alors avec le badge En développement.

Retour Terminer

1{2  "id": "hello-world",3  "name": "Hello world",4  "version": "0.1.0",5  "api": 2,6  "settings": [7    {8      "key": "greeting",9      "type": "text",10      "default": "Salut"11    }12  ]13}

1import type { ServerPlugin } from '@hodi-app/plugin-sdk/server'23const plugin: ServerPlugin = {4  routes: {5    'POST /hello': async (_request, ctx) => {6      const { greeting } = ctx.settings()7      return { body: { text: `${greeting} !` } }8    }9  }10}1112export default plugin

1import { useState } from 'react'2import {3  Button, SettingRow, definePlugin, usePluginApi4} from 'hodi:sdk'56const HelloCard = () => {7  const api = usePluginApi()8  const [text, setText] = useState('Dire bonjour')9  const sayHello = async () => {10    const response = await api('/hello', { method: 'POST' })11    setText((await response.json()).text)12  }13  return (14    <SettingRow label={text} hint="Réponse de ta route">15      <Button look="primary" onClick={sayHello}>16        Dire bonjour17      </Button>18    </SettingRow>19  )20}2122definePlugin({ settingsPage: HelloCard })

1$ npx hodi-plugin dev \2    --server http://localhost:3000 \3    --code

45✓ plugin.json6✓ server/index.ts7✓ web/index.tsx8✓ locales/fr.json, locales/en.json910Installé : Hello world 0.1.011En attente d’un changement…

AperçuEn direct

Plugins

Ce que l'admin du serveur voit.

DiagnosticSignale un article mal lu0.2.2

Mode développeurCode : 482913Actif