Merge pull request #11 from rede5/codex/add-hello-world-function-in-appwrite

Add hello-world Appwrite function and dashboard tester

README.md

@@ -31,7 +31,7 @@ Ambiente monorepo com três camadas principais: **Landing (Fresh + Deno)**, **Da
      - `apiKey` (string)
      - `label` (string)
 6. Ative o provedor **Email/Password** em *Authentication* e crie um usuário de teste.
-7. Implante as Functions `sync-github` e `check-cloudflare-status` (fontes em `appwrite-functions/`).
+7. Implante as Functions `hello-world`, `sync-github` e `check-cloudflare-status` (fontes em `appwrite-functions/`).
 
 ## Variáveis de ambiente
 Copie o arquivo de exemplo e preencha com os IDs anotados:
@@ -46,7 +46,7 @@ Campos principais:
 ## Estrutura de pastas
 - `landing/`: app Fresh (Deno) para a landing page.
 - `dashboard/`: painel React + Vite com integrações Appwrite (auth, Functions, Database, Realtime).
-- `appwrite-functions/`: funções `sync-github` e `check-cloudflare-status`.
+- `appwrite-functions/`: funções `hello-world`, `sync-github` e `check-cloudflare-status`.
 
 ## Rodando os ambientes
 1) **Appwrite local (opcional)**

appwrite-functions/hello-world/function.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://appwrite.io/docs/schemas/functions.json",
+  "name": "hello-world",
+  "entrypoint": "src/index.js",
+  "runtime": "node-20.0",
+  "commands": ["npm install"],
+  "ignore": ["node_modules", ".npm", "npm-debug.log", "build"]
+}

appwrite-functions/hello-world/package-lock.json

@@ -0,0 +1,13 @@
+{
+  "name": "hello-world",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "hello-world",
+      "version": "1.0.0",
+      "license": "MIT"
+    }
+  }
+}

appwrite-functions/hello-world/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "hello-world",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "src/index.js",
+  "license": "MIT",
+  "scripts": {}
+}

appwrite-functions/hello-world/src/index.js

@@ -0,0 +1,13 @@
+export default async function ({ req, res, log }) {
+  const payload = req.body ? JSON.parse(req.body) : {};
+  const name = payload.name?.trim() || 'Appwrite';
+
+  const message = `Hello, ${name}! Your function is deployed and responding.`;
+  log(`hello-world executed for ${name}`);
+
+  return res.json({
+    message,
+    inputName: name,
+    timestamp: new Date().toISOString()
+  });
+}

dashboard/src/App.tsx

@@ -2,6 +2,7 @@ import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
 import DashboardLayout from './layouts/DashboardLayout'
 import { PrivateRoute } from './contexts/Auth'
 import Cloudflare from './pages/Cloudflare'
+import Hello from './pages/Hello'
 import Github from './pages/Github'
 import Home from './pages/Home'
 import Login from './pages/Login'
@@ -14,11 +15,12 @@ function App() {
         <Route path="/login" element={<Login />} />
 
         <Route element={<PrivateRoute />}>
-          <Route element={<DashboardLayout />}>
-            <Route index element={<Home />} />
-            <Route path="/github" element={<Github />} />
-            <Route path="/cloudflare" element={<Cloudflare />} />
-            <Route path="/settings" element={<Settings />} />
+            <Route element={<DashboardLayout />}>
+              <Route index element={<Home />} />
+              <Route path="/hello" element={<Hello />} />
+              <Route path="/github" element={<Github />} />
+              <Route path="/cloudflare" element={<Cloudflare />} />
+              <Route path="/settings" element={<Settings />} />
           </Route>
         </Route>
 

dashboard/src/layouts/DashboardLayout.tsx

@@ -1,10 +1,11 @@
-import { Cloud, Github, Home, LogOut, Settings, Terminal } from 'lucide-react'
+import { Cloud, Github, Home, LogOut, Settings, Sparkles, Terminal } from 'lucide-react'
 import { NavLink, Outlet, useNavigate } from 'react-router-dom'
 import { TerminalLogs } from '../components/TerminalLogs'
 import { useAuth } from '../contexts/Auth'
 
 const navItems = [
   { label: 'Overview', to: '/', icon: Home },
+  { label: 'Hello World', to: '/hello', icon: Sparkles },
   { label: 'GitHub Repos', to: '/github', icon: Github },
   { label: 'Cloudflare Zones', to: '/cloudflare', icon: Cloud },
   { label: 'Settings', to: '/settings', icon: Settings },

dashboard/src/pages/Hello.tsx

@@ -0,0 +1,78 @@
+import { type Models } from 'appwrite'
+import { useState } from 'react'
+import { functions } from '../lib/appwrite'
+
+export default function Hello() {
+  const [name, setName] = useState('')
+  const [execution, setExecution] = useState<Models.Execution | null>(null)
+  const [message, setMessage] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  const handleExecute = async () => {
+    setLoading(true)
+    setError(null)
+    setMessage(null)
+
+    try {
+      const executionResult = await functions.createExecution(
+        'hello-world',
+        name.trim() ? JSON.stringify({ name }) : undefined,
+      )
+
+      setExecution(executionResult)
+
+      const payload = executionResult.responseBody ? JSON.parse(executionResult.responseBody) : {}
+      setMessage(payload.message || 'Função executada com sucesso.')
+    } catch (err) {
+      console.error(err)
+      setError('Não foi possível executar a função hello-world.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <header className="rounded-xl border border-slate-800/70 bg-slate-900/60 p-5 shadow-lg shadow-slate-950/50">
+        <p className="text-xs uppercase tracking-[0.3em] text-cyan-300">Funções</p>
+        <h1 className="mt-2 text-2xl font-semibold text-slate-50">Hello World</h1>
+        <p className="mt-2 text-sm text-slate-400">
+          Teste rápido da função <span className="text-cyan-300">hello-world</span> implantada no Appwrite.
+        </p>
+
+        <div className="mt-4 flex flex-col gap-3 sm:flex-row">
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="Nome opcional para o cumprimento"
+            className="w-full rounded-lg border border-slate-800 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-400"
+          />
+          <button
+            type="button"
+            onClick={handleExecute}
+            disabled={loading}
+            className="rounded-lg bg-cyan-500 px-4 py-2 text-sm font-semibold text-slate-900 transition hover:bg-cyan-400 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {loading ? 'Executando...' : 'Executar função'}
+          </button>
+        </div>
+
+        {error ? <p className="mt-3 text-sm text-red-300">{error}</p> : null}
+        {execution ? (
+          <p className="mt-2 text-xs text-slate-400">Execução #{execution.$id} • Status: {execution.status}</p>
+        ) : null}
+      </header>
+
+      <div className="rounded-xl border border-slate-800/70 bg-slate-950/60 p-5 shadow-inner shadow-slate-950/60">
+        <h2 className="text-lg font-semibold text-slate-50">Resultado</h2>
+        {message ? (
+          <p className="mt-3 text-sm text-slate-200">{message}</p>
+        ) : (
+          <p className="mt-3 text-sm text-slate-400">Aguardando execução.</p>
+        )}
+      </div>
+    </div>
+  )
+}