Check out our free templates made with AI and polished to perfection in Windframe
Get nowa month ago
Implemente um mockup da aplicacao que esta dividida em 3 YAMLs 1. **Aplicação** 2. **Menus e Navegação (Navigation Definitions)** 3. **Fluxos Específicos (Unified Flow Definitions)** * **Aplicações**: Uma estrutura que indica quais menus e fluxos cada aplicação utilizará; * **Menus**: Uma definição de hierarquia e opções disponíveis, que pode apontar para fluxos (flows) ou para ações diretas (ex: abrir URLs externas, etc); * **Flows**: Fluxos detalhados (como definido antes, o **Unified Flow Definition**) que são chamados pelos itens do menu ou mesmo diretamente por links externos. --- ### 1️⃣ **Application Definition (app\_telecom\_mobile.yaml)** ```yaml application_name: "Telecom Selfcare App Mobile" platform: "Flutter" navigation_definition: "nav_selfcare_mobile.yaml" flows_available: - "Activate_Prepaid_SIM.yaml" - "Request_Bill_Copy.yaml" - "Change_Plan.yaml" ``` --- ### 2️⃣ **Navigation Definition (nav\_selfcare\_mobile.yaml)** ```yaml menu_structure: - title: "Minha Conta" icon: "account_circle" items: - label: "Meu Plano" action: type: "navigate" route: "/my_plan" - label: "Consumo" action: type: "navigate" route: "/usage" - title: "Atendimentos" icon: "support_agent" items: - label: "Ativar Chip Pré-Pago" action: type: "flow" flow_ref: "Activate_Prepaid_SIM.yaml" - label: "Solicitar 2ª Via da Conta" action: type: "flow" flow_ref: "Request_Bill_Copy.yaml" - title: "Configurações" icon: "settings" items: - label: "Alterar Plano" action: type: "flow" flow_ref: "Change_Plan.yaml" - label: "Sair" action: type: "logout" ``` **Tipos de ação do menu:** * **navigate:** Vai para uma tela estática específica da aplicação. * **flow:** Executa um fluxo específico definido na Unified Flow Definition. * **external\_url:** Abre URL externa ou app externo. * **logout, custom:** Ações pré-definidas no app. --- ### 3️⃣ **Unified Flow Definition (Activate\_Prepaid\_SIM.yaml)** ```yaml flow_name: "Activate_Prepaid_SIM" flow_version: "1.0" steps: - step_id: verify_sim_number description: "Usuário insere o número do chip para ativação" inputs: - sim_number: type: string validation: regex(\d{13}) ui_hint: numeric_keyboard api: endpoint: POST https://api.telecom.com/validate-sim payload: simNumber: "{{sim_number}}" response: valid: boolean simType: enum ["prepaid", "postpaid"] - step_id: collect_user_info description: "Coletar dados cadastrais do usuário" conditions: previous_step.simType == "prepaid" inputs: - full_name: type: string - birth_date: type: date - cpf: type: string validation: regex(\d{11}) api: endpoint: POST https://api.telecom.com/register-user payload: simNumber: "{{sim_number}}" name: "{{full_name}}" dob: "{{birth_date}}" cpf: "{{cpf}}" response: registrationStatus: enum ["success", "failure"] - step_id: confirm_activation description: "Confirmar a ativação para o usuário" inputs: [] api: endpoint: POST https://api.telecom.com/activate-sim payload: simNumber: "{{sim_number}}" cpf: "{{cpf}}" response: activationStatus: enum ["activated", "error"] message: string ```
Windframe is an AI visual editor for rapidly building stunning web UIs & websites
Start building stunning web UIs & websites!
