> For the complete documentation index, see [llms.txt](https://help.maisfy.com.br/maisfy-help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.maisfy.com.br/maisfy-help/readme-4/app-da-area-de-membros.md). # App da área de membros Menu lateral → **Área de Membros** → no menu de três pontos da área → **Criar App**. O app é a sua área de membros **instalada no celular do aluno**, com a sua marca, seu ícone e suas cores. Ele não passa por loja de aplicativos: o aluno abre o endereço, instala em dois toques, e o app passa a viver na tela de início dele como qualquer outro. ![Onde fica: menu de três pontos da área](https://3344509428-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD0KchSWN381W9S4GFEfY%2Fuploads%2FCuXjKrQbSoreZt9mD296%2Fam-app-caminho.jpg?alt=media) {% hint style="info" %} **Um app por área de membros.** Ele mostra os cursos daquela área, com as turmas e os acessos que o aluno já tem. Não é um app por curso. {% endhint %} ## O caminho inteiro O construtor tem **cinco abas**, e no alto ficam **Ver app** e **Publicar**. Enquanto você não publica, o app fica marcado como **Rascunho** — e nada do que você mexe chega ao aluno. | Aba | O que você resolve nela | | -------------- | ------------------------------------------- | | **Identidade** | Ícone, nome e endereço | | **Tema** | Cores, modo claro/escuro e cantos | | **Masterpage** | A casca: barra de cima e barra de navegação | | **Telas** | O conteúdo de cada tela, bloco a bloco | | **Avisos** | O que chega no sininho — e como notificação | ## 1. Identidade | Campo | | | --------------- | --------------------------------------------------------------------------- | | **Ícone** | O que aparece na tela de início do celular. Ao enviar, você recorta na hora | | **Nome do app** | Aparece abaixo do ícone | | **Nome curto** | Usado quando o nome completo não cabe | | **Endereço** | O link do app, no formato `seunome.maisfy.app.br` | {% hint style="danger" %} **O endereço só dá para mudar antes de publicar.** Depois ele é o atalho que está instalado no celular de cada aluno — trocar quebraria todos. Escolha com calma. {% endhint %} {% hint style="warning" %} **O ícone precisa ser quadrado e ter no mínimo 512×512 pixels.** Não é recomendação: o **Publicar** recusa e diz o tamanho que você mandou. Sem ícone válido o app instalaria com o ícone genérico do navegador — e quem já instalou não volta atrás. {% endhint %} ## 2. Tema ![A aba Tema, com preview ao vivo](https://3344509428-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD0KchSWN381W9S4GFEfY%2Fuploads%2FGr5d26yknUOL7BwzE4BQ%2Fam-app-tema.jpg?alt=media) Duas cores mandam no app inteiro: * **Cor primária** — botões, links e destaques * **Cor secundária** — gradientes e detalhes Você pode digitar o código da cor ou partir de uma **paleta sugerida**: Roxo e ciano, Laranja e âmbar, Verde e menta, Azul e céu, Índigo e lilás. Há um **Restaurar padrão** se você se perder. | Ajuste | Opções | | --------------- | --------------------------------------- | | **Tema padrão** | Claro, Escuro ou **Do aparelho** | | **Cantos** | Reto, Suave, Arredondado ou Bem redondo | {% hint style="info" %} **O tema padrão não prende o aluno.** Ele pode alternar claro/escuro dentro do app; o que você escolhe aqui é **como o app abre na primeira vez**. "Do aparelho" segue a preferência do celular dele. {% endhint %} O **preview** ao lado reage a cada mudança — use-o, é a forma mais rápida de ver se a cor escolhida sobrevive no fundo escuro. ## 3. Masterpage — a casca do app ![A casca: barra superior e barra de navegação](https://3344509428-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD0KchSWN381W9S4GFEfY%2Fuploads%2FeK2Oi9rO3f16LtR1uv67%2Fam-app-masterpage.jpg?alt=media) É a moldura que envolve **todas** as telas. **Barra superior** — o cabeçalho fixo no topo. Dá para desligar inteira, ou manter e escolher o que ela mostra: * **Botão de busca** * **Sino de notificações** — é por onde chegam os avisos **Barra de navegação** — as abas de baixo. Vem com **Início**, **Cursos** e **Perfil**; você **arrasta para reordenar** e remove o que não quiser. {% hint style="warning" %} Desligar o **sino** tira o caminho pelo qual o aluno vê os avisos dentro do app. Se você pretende usar a aba Avisos, deixe-o ligado. {% endhint %} ## 4. Telas São **sete telas**. Seis são obrigatórias — sem elas o app não publica: | Tela | Para que serve | Obrigatória | | -------------------- | --------------------------------------------- | ----------- | | **Login** | Entrada do aluno | Sim | | **Home** | A primeira tela depois de entrar | Sim | | **Meus cursos** | A lista do que ele tem acesso | Sim | | **Detalhe do curso** | Módulos e aulas de um curso | Sim | | **Aula / Player** | Onde ele assiste | Sim | | **Perfil** | Dados e configurações dele | Sim | | **Vitrine** | O que você vende, para quem ainda não comprou | Não | ### O editor ![O editor de telas, com a biblioteca de blocos](https://3344509428-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD0KchSWN381W9S4GFEfY%2Fuploads%2FEVqZ66dEyg4QDWvAkUvL%2Fam-app-editor.jpg?alt=media) Cada tela se monta por **blocos**, arrastados da biblioteca à esquerda. Você alterna entre **Celular** e **Tablet**, desfaz e refaz, e cada bloco tem subir, descer, editar, duplicar e excluir. **Blocos de conteúdo** — você acrescenta onde quiser: **Título**, **Texto**, **Imagem** e **Botão**. **Blocos de dados** — são o conteúdo vivo da plataforma. A maioria já vem posta na tela a que pertence e não se acrescenta à mão: | Bloco | Onde vive | | --------------------------------------------- | ------------------ | | Formulário de login | Login | | Continuar assistindo | Home | | Lista de cursos | Home e Meus cursos | | Cabeçalho do curso · Módulos e aulas | Detalhe do curso | | Player · Conteúdo da aula · Navegação da aula | Aula | | Cabeçalho do perfil | Perfil | Três são **opcionais**, e esses você escolhe acrescentar: | Bloco | Onde cabe | O que faz | | ------------------------------------------------------- | -------------- | ------------------------------------- | | **Novidades** | Vitrine e Home | Mostra os seus cursos | | **Ofertas** | Vitrine e Home | Mostra os checkouts que você escolher | | [**Tutor de IA**](/maisfy-help/readme-4/tutor-de-ia.md) | Aula | Põe o tutor dentro da aula, no app | ### Escrever com o nome do aluno Nos blocos de texto você usa marcadores que viram o dado de quem está lendo: | Marcador | Vira | | ------------------------ | ------------------------ | | `{{student.first_name}}` | O primeiro nome do aluno | | `{{student.name}}` | O nome completo | | `{{course.title}}` | O título do curso aberto | | `{{app.name}}` | O nome do app | ## 5. Avisos ![A aba Avisos, com um aviso automático](https://3344509428-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD0KchSWN381W9S4GFEfY%2Fuploads%2FGeJv8pEEnVw79jcieOAq%2Fam-app-avisos.jpg?alt=media) Aviso é o recado que **chega no sininho do app**. Em **Novo aviso** você define: | Campo | | | --------------- | ----------------------------------------------- | | **Para quem** | A área inteira, um **produto** ou uma **turma** | | **Título** | Até 120 caracteres | | **Mensagem** | Até 1.000 caracteres | | **Botão** | Um texto curto e o link para onde ele leva | | **Validade** | Depois dela o aviso some do sininho | | **Notificação** | Manda também como **notificação no celular** | {% hint style="warning" %} **Só recebe quem estava matriculado na hora do envio.** Aluno que entrar depois não vê aquele aviso — ele não é um mural, é um disparo. {% endhint %} A lista mostra, de cada aviso, para qual turma foi, quando, se a notificação está na fila e **quantos alunos leram**. ### Avisos automáticos Você não precisa escrever recado toda vez que publica conteúdo: **módulo novo e aula nova geram aviso sozinhos**, para as turmas que recebem aquele conteúdo. Eles aparecem na lista com o selo **Automático**. {% hint style="info" %} A notificação no celular só chega a quem **autorizou** quando o app perguntou. Quem recusou continua vendo o aviso no sininho — só não recebe o toque. {% endhint %} ## Publicar **Ver app** abre o rascunho para você conferir. **Publicar** é o que leva ao aluno. O Publicar confere duas coisas e recusa dizendo exatamente o que falta: 1. **As seis telas obrigatórias** precisam existir 2. **O ícone** precisa estar definido, quadrado e com 512×512 no mínimo {% hint style="info" %} Publicar tira um **retrato** do app. Continuar editando depois não mexe no que o aluno vê — ele só recebe quando você publicar de novo. Dá para mexer à vontade sem medo de quebrar o que está no ar. {% endhint %} ## Como o aluno instala ![O app no celular do aluno](https://3344509428-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD0KchSWN381W9S4GFEfY%2Fuploads%2FpXMCdwHCDFhhHL9KYWBj%2Fam-app-celular.jpg?alt=media) Ele abre o endereço do app no navegador do celular e usa a opção de **adicionar à tela de início** — no iPhone, pelo botão de compartilhar do Safari; no Android, pelo menu do Chrome. A partir daí o app abre em tela cheia, sem barra de navegador. {% hint style="info" %} **Não há loja de aplicativos envolvida.** Nada de App Store, Play Store, revisão ou taxa — e nada para o aluno procurar. Você manda o link, ele instala. {% endhint %} Antes de entrar, quem abre o endereço vê a **Vitrine** com o botão **Entrar** — é por isso que ela vale a pena mesmo sendo opcional: o link do app serve para vender, não só para entregar. ## Perguntas que aparecem **"Mudei o tema e o aluno continua vendo o antigo."** Falta publicar. Enquanto estiver como Rascunho, o que você mexe fica só no construtor. **"Posso trocar o endereço depois?"** Não. Ele vira o atalho instalado no celular de quem já baixou. **"O aluno precisa instalar para usar?"** Não. O endereço funciona no navegador normalmente; instalar só dá o ícone na tela de início e a tela cheia. **"E quem já usa a área de membros pelo site?"** Continua igual. O app é mais uma porta para o mesmo conteúdo, as mesmas turmas e o mesmo progresso.