Premiers pas3 / 4

La carte

La carte, c'est ce que Hodi affiche du plugin. Elle se dessine avec les composants de Hodi : elle a tout de suite l'air de l'app.

À faire

Ouvrir web/index.tsx : c'est la partie du plugin qui s'affiche dans Hodi.
2Sur la ligne surlignée, ajouter look="primary" au bouton pour qu'il ressorte.
3Dans l'aperçu, le bouton Dire bonjour prend alors le style principal.

Retour Continuer

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 onClick={sayHello}>16        Dire bonjour17      </Button>18    </SettingRow>19  )20}2122definePlugin({ settingsPage: HelloCard })

AperçuEn direct

Hello world

Ton premier plugin.

SalutationSalut

Salut !Réponse de ta route