Elabore uma documentação técnica especificando um aplicativo que terá duas telas, cada tela dividida em componentes distintos. Deve haver comunicação e parametrização entre os componentes conforme estudado nesse material. Para cada parametrização, por exemplo, ComponenteA recebe como input uma data inicial e uma data final para mostrar um calendário, especifique na sua documentação os nomes dos inputs e seu significado, faça o mesmo para os outputs, eventos que o componente apresenta. Importante apresentar um código de exemplo de uso do seu componente, exemplo: Observações: ● Os nomes dos seus componentes têm que ser intuitivos e carregar significado para quem irá usá-lo. ● Não é necessário implementar os componentes. ● Pense que sua documentação será lida por outros desenvolvedores, seja o mais didático possível. ● Você pode criar protótipos de tela e adicionar ao seu documento se quiser, ou até mesmo fazer um print de componentes existentes. O importante é que faça sentido ter o componente em sua especificação das telas.
More Questions From This User See All
Lista de comentários
Resposta:
Aplicativo: Calendário de Eventos
Introdução:
O aplicativo Calendário de Eventos consiste em duas telas principais: a tela de visualização mensal do calendário e a tela de detalhes do evento selecionado. Cada tela é dividida em componentes distintos que interagem entre si por meio de comunicação e parametrização.
Tela 1: Visualização Mensal do Calendário
- Componente 1: Calendário
- Componente 2: Lista de Eventos
Componente 1: Calendário
- Descrição: Responsável por exibir o calendário mensal com os dias e eventos marcados.
- Inputs:
- dataInicial: data de início do mês a ser exibido no calendário.
- dataFinal: data de fim do mês a ser exibido no calendário.
- Outputs:
- eventoSelecionado: evento selecionado pelo usuário no calendário.
Componente 2: Lista de Eventos
- Descrição: Responsável por exibir a lista de eventos do mês selecionado.
- Inputs:
- dataInicial: data de início do mês a ser exibido na lista de eventos.
- dataFinal: data de fim do mês a ser exibido na lista de eventos.
- Outputs:
- eventoSelecionado: evento selecionado pelo usuário na lista de eventos.
Exemplo de uso do Componente 1 (Calendário):
```
import React, { useState } from 'react';
import Calendar from './components/Calendar';
const App = () => {
const [dataInicial, setDataInicial] = useState(new Date());
const [dataFinal, setDataFinal] = useState(new Date());
const handleEventoSelecionado = (evento) => {
console.log('Evento selecionado:', evento);
};
return (
<div>
<Calendar
dataInicial={dataInicial}
dataFinal={dataFinal}
onEventoSelecionado={handleEventoSelecionado}
/>
</div>
);
};
export default App;
```
Tela 2: Detalhes do Evento Selecionado
- Componente 1: Informações do Evento
- Componente 2: Botões de Ação
Componente 1: Informações do Evento
- Descrição: Responsável por exibir os detalhes do evento selecionado.
- Inputs:
- eventoSelecionado: evento selecionado pelo usuário na tela de visualização mensal do calendário.
- Outputs:
- nenhum.
Componente 2: Botões de Ação
- Descrição: Responsável por exibir os botões de ação relacionados ao evento selecionado.
- Inputs:
- eventoSelecionado: evento selecionado pelo usuário na tela de visualização mensal do calendário.
- Outputs:
- nenhum.
Observações:
- Os nomes dos componentes foram escolhidos de forma intuitiva para facilitar o entendimento e uso por parte dos desenvolvedores.
- A implementação dos componentes não é necessária para a elaboração desta documentação.
- Protótipos de tela ou prints de componentes existentes podem ser adicionados ao documento para melhor visualização e compreensão.
- A documentação foi elaborada de forma didática, considerando que será lida por outros desenvolvedores.