Val Town Code SearchReturn to Val Town

4  const TEXT = "⏰ 8 часов работать";
5
6  const url = `https://api.telegram.org/bot${TOKEN}/sendMessage`;
7
8  fetch(url, {

8## Hono
9
10This app uses [Hono](https://hono.dev/) as the API framework. You can think of Hono as a replacement for [ExpressJS](https://expressjs.com/) that works in serverless environments like Val Town or Cloudflare Workers. If you come from Python or Ruby, Hono is also a lot like [Flask](https://github.com/pallets/flask) or [Sinatra](https://github.com/sinatra/sinatra), respectively.
11
12## Serving assets to the frontend
20### `index.html`
21
22The most complicated part of this backend API is serving index.html. In this app (like most apps) we serve it at the root, ie `GET /`. 
23
24We *bootstrap* `index.html` with some initial data from the server, so that it gets dynamically injected JSON data without having to make another round-trip request to the server to get that data on the frontend. This is a common pattern for client-side rendered apps.
25
26## CRUD API Routes
27
28This app has two CRUD API routes: for reading and inserting into the messages table. They both speak JSON, which is standard. They import their functions from `/backend/database/queries.ts`. These routes are called from the React app to refresh and update data.
29
30## Errors
31
32Hono and other API frameworks have a habit of swallowing up Errors. We turn off this default behavior by re-throwing errors, because we think most of the time you'll want to see the full stack trace instead of merely "Internal Server Error". You can customize how you want errors to appear.

1// --- api.ts ---
2// Funções de API para o backend do Val.town, chamadas pelo frontend.
3
4import { blob } from "https://esm.town/v/std/blob"; // Importa std/blob para persistência

3
4// Importações para a lógica do Backend (executada no servidor Val.town)
5// Nota: Funções de utils, aiConverter e api são importadas diretamente aqui para o backend.
6import { convertToAI, deleteFlowchart, exportJSON, importJSON, loadFlowchart, saveFlowchart } from "./api.ts"; // Funções da API, incluindo deleteFlowchart
7
8// ==============================================================================
10// O código real está em utils.ts. Este arquivo main.tsx importa e usa.
11// ==============================================================================
12// Importado via 'api.ts' -> 'aiConverter.ts' -> 'utils.ts'
13
14// ==============================================================================
16// O código real está em aiConverter.ts. Este arquivo main.tsx importa e usa.
17// ==============================================================================
18// Importado via 'api.ts'
19
20// ==============================================================================
21// SEÇÃO 3: Funções de API (Backend)
22// O código real está em api.ts. Este arquivo main.tsx importa e usa.
23// ==============================================================================
24// (As funções saveFlowchart, convertToAI, etc. são usadas abaixo no roteamento)
432                    <button class="glass-button" data-node-type="input">📝 Entrada</button>
433                    <button class="glass-button" data-node-type="output">📤 Saída</button>
434                    <button class="glass-button" data-node-type="api">🌐 API</button>
435                    <button class="glass-button" data-node-type="end">⏹️ Fim</button>
436                    <button class="glass-button" id="saveFlowchart">💾 Salvar</button>
482                        <li>📝 <strong>Entrada:</strong> Coleta de dados ou informações.</li>
483                        <li>📤 <strong>Saída:</strong> Exibição ou entrega de resultados.</li>
484                        <li>🌐 <strong>API:</strong> Interação com serviços externos via API.</li>
485                        <li>⏹️ <strong>Fim:</strong> Ponto de saída do fluxograma.</li>
486                    </ul>
505// SEÇÃO 6: Ponto de Entrada do Val.town (Backend HTTP Handler)
506// Este é o principal handler HTTP para o Val.town.
507// Ele roteia as requisições para as funções de API ou serve o HTML.
508// ==============================================================================
509
517  const valName = "testefluxo"; // Nome do seu Val/Projeto
518
519  // Roteamento da API
520  if (path === "/api/save-flowchart" && req.method === "POST") {
521    return await saveFlowchart(req);
522  }
523
524  if (path === "/api/convert-to-ai" && req.method === "POST") {
525    return await convertToAI(req);
526  }
527
528  if (path === "/api/load-flowchart" && req.method === "GET") {
529    return await loadFlowchart(req);
530  }
531
532  if (path === "/api/export-json" && req.method === "POST") {
533    return await exportJSON(req);
534  }
535
536  if (path === "/api/import-json" && req.method === "POST") {
537    return await importJSON(req);
538  }
539
540  if (path === "/api/delete-flowchart" && req.method === "DELETE") { // Nova rota para excluir
541    return await deleteFlowchart(req);
542  }
543
544  // Se não for uma rota de API, serve o HTML principal
545  return new Response(getMainHTML(username, valName), {
546    headers: {

292      newNode.subtype = "Texto";
293      break;
294    case "api":
295      newNode.icon = "🌐";
296      newNode.subtypes = ["GET", "POST", "PUT", "DELETE"];
477    const flowchartName = prompt("Nome do fluxograma para salvar (ou deixe vazio para ID automático):");
478    if (flowchartName !== null) { // Permite salvar com nome vazio (gera ID automático)
479      const response = await fetch("/api/save-flowchart", {
480        method: "POST",
481        headers: { "Content-Type": "application/json" },
490    const flowchartId = prompt("ID do fluxograma para carregar:");
491    if (flowchartId) {
492      const response = await fetch(`/api/load-flowchart?id=${flowchartId}`);
493      const result = await response.json();
494      if (result.success) {
504
505  document.getElementById("exportJson")?.addEventListener("click", async () => {
506    const response = await fetch("/api/export-json", {
507      method: "POST",
508      headers: { "Content-Type": "application/json" },
535          try {
536            const jsonData = JSON.parse(event.target?.result as string);
537            const response = await fetch("/api/import-json", {
538              method: "POST",
539              headers: { "Content-Type": "application/json" },
560
561  document.getElementById("convertToAI")?.addEventListener("click", async () => {
562    const response = await fetch("/api/convert-to-ai", {
563      method: "POST",
564      headers: { "Content-Type": "application/json" },

1// --- aiConverter.ts ---
2// Lógica de conversão de fluxograma para instruções de IA, usada em api.ts.
3
4import {
87        instructions.push({ type: "display_output", content: node.text, format: node.subtype });
88        break;
89      case "api":
90        instructions.push({
91          type: "make_api_call",
92          endpoint: node.text,
93          method: node.subtype,

9export function calculateEstimatedDuration(steps: any[]): number {
10  const baseDuration = steps.length * 2;
11  const complexSteps = steps.filter(s => ["make_api_call", "database_operation"].includes(s.type)).length;
12  return baseDuration + (complexSteps * 5);
13}
35  steps.forEach(step => {
36    switch (step.type) {
37      case "make_api_call":
38        permissions.add("network_access");
39        break;
60  const dependencies = new Set<string>();
61  steps.forEach(step => {
62    if (step.type === "make_api_call") {
63      dependencies.add("http_client");
64    }

253
254```typescript
255// DOM APIs
256globalThis.localStorage = mockLocalStorage;
257globalThis.fetch = mockFetch;
258globalThis.crypto.randomUUID = mockUUID;
259
260// Browser APIs
261navigator.clipboard = mockClipboard;
262globalThis.alert = mockAlert;

105- **Deno Standard Library**: For assertions
106- **Mock DOM**: Simulated browser environment
107- **Mock APIs**: localStorage, fetch, crypto.randomUUID
108- **Test Helpers**: Utilities for creating mock data
109

39};
40
41// Mock fetch for API calls in tests
42const originalFetch = globalThis.fetch;
43globalThis.fetch = async (input: RequestInfo | URL, init?: RequestInit) => {