Pular para o conteúdo principal

Criando uma Feature no Workspace

Neste tutorial, nós construiremos uma pequena feature vertical no workspace hub. Começaremos definindo a lógica central, a exporemos por meio da API e, finalmente, a consumiremos no frontend web.

Isso nos ensinará como as diferentes camadas (Core, API, Web) interagem dentro de nossos contextos delimitados.

Passo 1: Definir a Lógica Central (Core)​

Começaremos na camada Core, que armazena nossos modelos de domínio e funções puras.

Navegue até workspaces/hub/packages/core/src/ e crie um novo arquivo chamado greeter.ts.

Adicione o seguinte código:

export function getGreeting(name: string): string {
  return `Hello, ${name}! Welcome to the hub.`;
}

Agora, vamos exportá-lo para que outros pacotes possam usá-lo. Abra workspaces/hub/packages/core/src/index.ts e adicione:

export * from './greeter';

Passo 2: Expor a Lógica na API​

Em seguida, passaremos para a camada de API para criar um endpoint que usa nossa nova função core.

Navegue até workspaces/hub/apps/api/src/routes/ e crie um novo arquivo chamado greet.ts.

Adicione a seguinte rota do Fastify:

import { FastifyInstance } from 'fastify';
import { getGreeting } from '@tupynambalucas-hub/core';

export default async function (fastify: FastifyInstance) {
  fastify.get('/greet', async (request, reply) => {
    const { name = 'Developer' } = request.query as { name?: string };
    const message = getGreeting(name);
    return { message };
  });
}

Passo 3: Consumir a API no Frontend Web​

Finalmente, exibiremos esta saudação em nosso frontend React.

Navegue até workspaces/hub/apps/web/src/components/ e crie o arquivo GreetingPanel.tsx.

Adicione o seguinte componente React:

import React, { useEffect, useState } from 'react';

export function GreetingPanel() {
  const [message, setMessage] = useState('Loading...');

  useEffect(() => {
    fetch('/api/greet?name=Explorer')
      .then((res) => res.json())
      .then((data) => setMessage(data.message))
      .catch(() => setMessage('Failed to load greeting.'));
  }, []);

  return (
    <div className="greeting-panel">
      <h2>{message}</h2>
    </div>
  );
}

Passo 4: Verificar o Recurso​

Agora, nós executaremos o servidor de desenvolvimento para ver nosso recurso em ação.

pnpm dev --filter=@tupynambalucas-hub/*

Abra seu navegador em http://localhost:3000. Você deverá ver seu novo componente renderizando o texto:

Hello, Explorer! Welcome to the hub.

Conclusão​

Bom trabalho! Nós implementamos com sucesso uma feature vertical criando a lógica pura no Core, servindo-a através da API e renderizando-a na camada Web. Esse padrão é a base para todo o desenvolvimento de features em nossa arquitetura.