Histórico da Página
...
Abaixo seguirá um guia contendo as telas e botões do aplicativo para melhor entendimento.
Tela de Splash
...
Imagem 1 – Tela de Splash
A Tela de Splash é a primeira tela que aparece quando abrimos o aplicativo. Essa tela é uma tela de inicialização e é exibida enquanto o aplicativo está sendo carregado.
Tela de Login
...
Campo
...
1.4 - Alias
...
Acesso às outras telas do aplicativo
Imagem 2 – Tela de Login
A Tela de Login é a primeira autenticação do usuário no aplicativo. Nessa tela, após o preenchimento dos campos da tela , o
...
A Tela de Login é a primeira autenticação do usuário no aplicativo. Nessa tela, após o preenchimento dos campos da tela (1.1, 1.2), o aplicativo conversa com o Protheus para verificar se o usuário é válido ou não. Caso seja, o TOTVS Meu Posto permite o acesso do usuário ao resto do aplicativo. Caso não, o usuário não consegue prosseguir e o seguinte alerta é exibido:
Campo | Descrição |
---|
Usuário | Usuário Protheus |
Senha | Senha do usuário Protheus |
Exibir Senha | Toggle para exibir/ocultar senha do usuário Protheus |
Alias | "ALIAS" do usuário Protheus |
Entrar | Acesso às outras telas do aplicativo |
Imagem 3 – Tela de Login com Toast
...
Ao usar um usuário ou senha inválido, a tela apresenta um toast (1.6) , um alerta notificando o usuário que há um erro com os dados inseridos nos campos da tela. Obs.: Usuário e senha válidos no Protheus são necessários para o acesso ao TOTVS Meu Posto.
Tela de Configuração de Contatos
...
Campo
...
Campo | Descrição |
---|---|
Alerta | Alerta dizendo que o usuário ou senha esta inválido. |
Tela de Configuração de Contatos
Imagem 4 – Tela de Configuração de Contatos (sem contatos)
...
A tela de Configuração de Contatos serve para o usuário incluir formas de contato, como nome, e-mail e/ou telefone, do supervisor dos postos de trabalho. O usuário pode incluir quantas formas de contato que ele quiser. Após a inclusão dos contatos, o usuário clica o botão “Finalizar” (2.5) “Finalizar” para continuar para o resto do aplicativo.
...
aplicativo.
Campo | Descrição |
Instruções | Card de Instruções. |
Contato | Campo para inserir uma forma de contato com o supervisor dos postos. |
Incluir | Botão "Incluir", para inclusão dos contatos. |
Contatos Incluídos | Quando tiver contatos incluídos, aparecera uma lista dos contatos. |
Finalizar | Botão "Finalizar" que finaliza a configuração e segue para a proxima tela |
Abaixo é uma imagem da tela de configuração de contato depois da inclusão de contatos.
...
Campo
...
Imagem 5 – Tela de Configuração de Contatos (contatos inclusos)
...
À medida que o usuário inclui contatos, uma lista se forma abaixo da legenda “Contatos incluídos” (2. 6). Um botão “Excluir” (2.7) “Excluir” aparece ao lado de todo contato. Ao clicar esse botão, o contato ao lado do botão é excluído da memória do aplicativo.
Campo | Descrição |
---|---|
Contatos | Lista de Contatos incluídos. |
Excluir | Botão para Excluir os contatos. |
Tela de Acesso do Atendente
Após o atendente ter feito login e ter configurado seus contatos, a Tela de Acesso do Atendente aparecerá. Essa tela é uma tela de autenticação do usuário do aplicativo usando o Código do Atendente e a Senha atrelada a esse código.
Imagem 6 – Tela de Acesso do Atendente
Muito parecida como a Tela de Login (Imagem 2), essa tela tem campos para o código do atendente e senha (3. 1, 3.2). Ela também tem o botão toggle para exibir ou ocultar a senha. Além do toggle, a tela também apresenta botões de “Ajuda” (3.3) “Ajuda” e “Config.” (3.6) que levam para as telas de Ajuda e de Configuração Geral, respectivamente. Após preencher os campos, o usuário deve clicar o botão “Entrar” (3.2) “Entrar” que, se o código e senha estiverem certos, leva o usuário para a próxima tela: a Tela de Check-in. Porém, se o usuário usar um código do Atendente ou senha inválido, a tela apresenta um toast, um alerta, notificando o usuário que há um erro com os dados inseridos nos campos da tela, idêntico ao alerta na Tela de Login (Imagem 3; 1.6).
Campo | Descrição |
3.1 - Código do Atendente | Campo para o código do atendente. |
3.2 - Senha | Campo para a senha do atendente. |
3.3 - Exibir Senha | Botão Toggle para exibir/ocultar a senha do Atendente. |
3.4 - Entrar | Botão "Entrar" no aplicativo. |
3.5 - Ajuda | Botão "Ajuda". |
3.6 -Configuração | Botão "Configurar". |
...
Essa é a tela inicial do aplicativo após a configuração. A listagem dos postos de trabalho disponíveis, e seus respectivos horários, de entrada e saída, está presente na Tela de Check-in
na Tela de Check-in
Imagem 7 – Tela de Check-in
Cada card na tela é ou de entrada ou de saída. Ao clicar nos cards, o aplicativo leva o usuário para a Tela de Detalhes Check-in/Check-out, onde o usuário completa a entrada ou saída do posto de trabalho.
Campo | Descrição |
---|---|
4.1 - Card Check-in | Card de um dos Postos de Trabalho para dar entrada (check-in) e seu horario. |
4.2 - Card Check-out | Card de um dos Postos de Trabalho para dar saída (check-out) e seu horario. |
4.3 - Barra de Ferramenta | Ferramenta Tabs para a navegação dentro do aplicativo. |
Imagem 7 – Tela de Check-in
...
Ferramenta Tabs para a navegação dentro do aplicativo. |
O Tabs, uma ferramenta de navegação entre páginas, está presente na Tela de Check-in (4.2).
Tabs
O Tabs é uma ferramenta simples, mas eficaz, para a navegação dentro de um aplicativo mobile (Imagem 7 ; 4.2 ). Ele permite o usuário a acessar as páginas do aplicativo e mostrar a página atual onde o usuário está.
...
o usuário está.
Imagem 8 – Tabs
Quando o usuário está em uma das telas principais do aplicativo (Tela de Check-in, Tela de Agenda ou Tela de Ajuda), o ícone e nome da página entra em destaque no Tabs. Na Imagem 8, a página atual do usuário é a Tela de Check-in.
Campo | Descrição |
---|---|
Checkin | Botão "Checkin" no Tabs. |
Agenda | Botão "Agenda" no Tabs. |
Ajuda | Botão "Ajuda" no Tabs. |
Sair | Botão "Sair" no Tabs. |
Para mudar de página, o usuário pode simplesmente clicar nos outros ícones do Tabs (5.1, 5.2, 5.3). nos outros ícones do Tabs. O aplicativo levará o usuário até a página do ícone.
...
O último botão do Tabs, o botão “Sair” (5.4), não é um botão para a navegação dentro do aplicativo. É um botão para levar o usuário de dentro do aplicativo para fora, para a Tela de Acesso do Atendente. Por ea te
...
do Atendente.
...
Imagem 9 – Clicando botão “Sair” do Tabs enquanto página de Ajuda
...
O alerta para a confirmação da saída do app (5.5) aparece em qualquer tela quando o botão “Sair” (5.4) é acionado. Caso o usuário clique no botão “Não” (5.6), a ação de saída é cancelada. Caso clique o botão “Sim” (5.7), a ação de saída é executada, e o usuário é levado à Tela de Acesso do Atendente (Imagem 6)à Tela de Acesso do Atendente (Imagem 6).
Campo | Descrição |
---|---|
Mensagem | Alerta confirmando com usuário se ele realmente deseja sair. |
Não | Botão "Não" cancela a ação de sair do aplicativo. |
Sim | Botão "Sim" confirmada a saída do aplicativo. |
Tela de Detalhes Check-in/Check-out
Quando o atendente clica nos cards dos postos de trabalho (Imagem 7; 4.1, 4.3), a Tela de Detalhes de Check-in/Check-out surge. A tela é idêntica para check-in (entrada) e check-out (saída) porque os processos para os dois são iguais. O processo é explicado em mais detalhe seção “Funcionalidades: Realizando um Check-in/Check-out”.
Campo | Descrição |
---|---|
6.1 - Posto | Campo de Seleção do Posto. |
6.2 - ícone | Ícone da self. |
6.3 - Comentário | Campo para comentário. |
6.4 - Câmera | Botão "Câmera" para tirar self. |
6.5 - Adicionar | Botão para adicionar mais fotos. |
...
Imagens 10.1 e 10.2 – Tela de Detalhes Check-in/Check-out
...
Para realizar o Check-in ou Check-out, é necessário tirar uma Selfie. Usando o botão “Câmera” (6.5), o usuário terá acesso à câmera do celular, e assim, poderá tirar a Selfie. Assim que a Selfie for tirada, ela será exibida no ícone da Selfie (6.2)Selfie. Enquanto não tiver uma Selfie, o ícone da Selfie se mantém no padrão, como na imagem acima.
Campo | Descrição |
---|---|
Fazer Checkin | Botão fazer Checkin. |
Caso o usuário queira informar o seu supervisor de algo no posto de trabalho, o usuário pode inserir um comentário no campo para comentário (6.3). Se o usuário quiser mostrar algo no posto de trabalho, como algum defeito em um equipamento, ele pode tirar fotos adicionais usando o botão para adicionar mais fotos (6.4). O usuário pode tirar até três fotos adicionais.
...
um equipamento, ele pode tirar fotos adicionais usando o botão para adicionar mais fotos. O usuário pode tirar até três fotos adicionais.
Imagem 11 – Tela de Detalhes Check-in/Check-out com foto adicional
...
Após tirar uma foto adicional, o ícone da foto é criada (6.7). Se o ícone for clicado, a foto adicional expande e ocupa a tela toda. Caso o usuário queira excluir a foto, tem um botão “Excluir” que pode ser clicado para excluir a foto (6.8). Caso o usuário queira adicionar mais novas fotos, ele pode clicar o botão . Caso o usuário queira adicionar mais novas fotos, ele pode clicar o botão para adicionar mais fotos.
Campo | Descrição |
---|---|
Ícone | Ícone de foto adicional |
Excluir | Botão "Excluir". |
Adicionar | Botão para adicionar mais fotos |
...
. |
...
Se o atendente estiver na Tela de Detalhes Check-in/Check-out mas quiser trocar o posto selecionado, ele pode clicar o campo de seleção de Posto (6.1), e um Card de seleção de posto (6.10) aparece.
...
de Posto, e um Card de seleção de posto aparece.
Imagem 12.1 – Tela de Detalhes Check-in/Check-out (seleção de posto)
Dentro do Card de seleção de Posto (6.10), o atendente o posto que ele tinha selecionado (6.11). Caso o atendente clique o botão “Trocar”, ele volta para a Tela de Check-in, onde pode escolher outro Card para check-in ou check-out (Imagem 7; 4. 1, 4.3). Caso o atendente clique o botão “OK”, o Card de seleção de Posto fecha, e o atendente volta à Tela de Detalhesà Tela de Detalhes
Campo | Descrição |
---|---|
Card | Card de Seleção de Posto. |
Opção | Opção de Posto. |
Trocar | Botão "Trocar". |
OK | Botão "OK". |
Check-in/Check-out, onde o atendente pode voltar ao processo de realizar um check-in/check-out.
...
Depois que o usuário estiver satisfeito com o seu check-in/check-out, ele pode finalizar o processo ao clicar no botão “Fazer Checkin” (6. 6). O TOTVS Meu Posto então lançará um Card confirmando a finalização do check-in (6.14). Obs.: O app só permite a finalização se o atendente tirar uma Selfie antes.
...
a finalização do check-in. Obs.: O app só permite a finalização se o atendente tirar uma Selfie antes.
...
Imagem 12.2 – Card pós finalização do Check-in/Check-out
O atendente pode clicar ou no botão “Sair do App”, que levará ele à Tela de Acesso do Atendente (Imagem 6), ou no botão “Continuar Navegando”, que levará o atendente de volta para a Tela de Check-in (Imagem 7). a Tela de Check-in (Imagem 7).
Campo | Descrição |
---|---|
Card | Card Pós Finalização. |
Sair | Botão "Sair do App". |
Continuar Navegando | Botão "Continuar Navegando". |
Tela de Agenda
A tela de agenda serve para mostrar os pontos (entrada e saída) do dia de hoje e os do histórico para o atendente.
...
Imagem 13.1 – Tela de Agenda (Hoje)
A Tela de Agenda é apenas informativa. O usuário não consegue acessar os pontos listados clicando neles na Tela de Agenda. Essa tela é apenas uma lista de todos os check-ins que tem no dia, ou que já tiveram no histórico (7.4). Para navegar dentro da lista utitlizem a rolagem da tela.
Campo | Descrição |
---|---|
Hoje | Aba "Hoje". |
Data | Data de Hoje. |
Histórico | Aba "Histórico". |
Lista | Lista de Check-Ins de hoje. |
Caso queira ver os check-ins/check-outs passados, no histórico, clique na aba “Histórico” (7 .3).
...
Imagens 13.2 – Tela de Agenda (Histórico)
...
O atendente pode ver todos os check-ins/check-outs no histórico. Caso o check-in já tenha sido feito, um ícone “Check” aparecerá ao lado (7.5).
Campo | Descrição |
---|---|
Check | Ícone Check. |
Tela de Ajuda
A Tela de Ajuda é onde os contatos inseridos pelo usuário estarão disponíveis depois da Tela de Configuração de Contatos. Há duas maneira de acessar a Tela de Ajuda. A primeira é via a Tela de Acesso do Atendente (Imagem 6; 3.3) e a outra é via a ferramenta Tabs (Imagem 8; 5.3). Todavia, se o usuário acessar a Tela de Ajuda por meio da Tela de Acesso do Atendente, o Tabs não estará na tela, pois o usuário não está logado no aplicativo (Imagem 16).
...
Se nenhum contato foi inserido, a Tela de Ajuda aparecerá vazia (Imagem 14). Porém, se o usuário tiver inserido um ou mais contatos, os contatos aparecerão em uma lista (Imagem 15).
Imagem 14 – Tela de Ajuda (sem contatos) via Tabs
...
Imagem 15 – Tela de Ajuda (com contatos) via Tabs
É importante notar que a lista de contatos (8.1) está na tela de ajuda apenas para exibição. Não há como clicar nos contatos ou deletar eles. Para deletar os contatos, o usuário terá que ir para a Tela de Configuração Geral (Imagem 18).
Campo | Descrição | 8.2 - Voltar | Botão Voltar.
---|---|---|
Lista | Lista de Contatos. |
Imagem 16 – Tela de Ajuda (sem contatos) via Tela de Acesso do Atendente
...
A imagem 16 é a Tela de Ajuda quando ela é acessada pela Tela de Acesso do Atendente. Já que o atendente ainda não entrou com o seu código e senha, ele não tem acesso às páginas de Check-in e Agenda, e assim, a ferramenta Tabs não está disponível. Porém, há um botão “Voltar” (8.2); Esse botão leva o usuário de volta para a Tela de Acesso do Atendentede Acesso do Atendente.
Campo | Descrição |
---|---|
Voltar | Botão Voltar. |
Tela de Configuração Geral
Acesso à Tela de Configuração Geral é apenas possível a partir da Tela de Acesso do Atendente, clicando o botão “Config.” (Imagem 6; 3.6) Ao clicar, um alerta de verificação aparece na tela, pedindo o usuário e senha do atendente, os mesmos usados na Tela de Login (Imagem 2; 1.1, 1.3).).
Imagem 17 – Verificação do Usuário e Senha para a Tela de Configuração Geral
Após informar o usuário e senha válidos, o atendente terá acesso à Tela de Configuração Geral. Nela, o usuário poderá visualizar, adicionar, ou remover contatos, visualizar dados de Login, e sair do aplicativo.
Campo | Descrição |
---|---|
9.1 - Informe o usuário e senha | Alesrta para verificação do usuário e senha. |
9.2 - Usuário | Campo do Usuário do Atendente. |
9.3 - Senha | Campo da Senha do Atendente. |
9.4 - Cancelar | Botão "Cancelar", que cancela a ação e leva o usuário de volta para a tela Acesso do Atendente. |
9.5 - Confirmar | Botão "Confirmar", que leva o usuário para tela de Configuração Geral, caso o usuário e senha estejam corretos. Se um dos campos estiverem inválidos, o acesso é negado. |
Imagem 17 – Verificação do Usuário e Senha para a Tela de Configuração Geral
...
tela de Configuração Geral |
...
, caso o usuário e senha estejam corretos. Se um dos campos estiverem inválidos, o acesso é negado. |
poderá visualizar, adicionar, ou remover contatos, visualizar dados de Login, e sair do aplicativo.
Campo | Descrição |
---|---|
10.1 - Contatos Salvos | Campo "Contatos Salvos" expoe os contatos incluídos pelo Atendente. |
10.2 - Contatos | Campo "Adicionar Novo Contato" que insere uma forma de contato com o supervisor dos postos. |
10.3 - Configurações | Campo "Configurações" exibe informações sobre a Empresa e Filial do Atendente. |
10.5 - Incluir | Botão "Incluir", serve para inclusão de Contatos. |
...
inclusão de Contatos. |
...
Imagem 18 e 19 – Tela de Configuração Geral (sem contatos)
...
Muito similar à Tela de Configuração de Contatos, a Tela de Configuração Geral permite o usuário a adicionar mais contatos usando o campo “Adicionar novo contato” (10.2) e o botão “Incluir” (10. 5). Os campos de “Configurações” (10.3) e “Dados de Login” (10.6) são apenas informativos, não interativos. Os campos permitem a consulta rápida dos dados de Login e configurações.
Campos | Descrição |
Voltar | Volta para a tela anterior |
Dados de Login | Dados do perfil logado no aplicativo |
Sair | Volta para a pagina inicial do aplicativo |
Há também os botões “Voltar” e “Sair”. O botão “Voltar” (10.4) leva o atendente de volta à Tela de Acesso do Atendente (Imagem 6), e o botão “Sair” (10.7) “Sair” leva o atendente de volta à Tela de Login (Imagem 2). Se o botão “Sair” for acionado, um alerta aparecerá na tela do usuário (Imagem 20; 10.8).
...
, um alerta aparecerá na tela do usuário (Imagem 20;).
...
Imagem 20 – Alerta do Botão “Sair” na Tela de Configuração Geral
...
O alerta que aparece quando o usuário clica o botão “Sair” (10.8) explica ao usuário que todas as informações salvas dentro do aplicativo serão apagadas. Caso o usuário clique no botão “Confirmar” (10.10), todas as informações salvas serão deletadas. Caso clique no botão “Cancelar” (10.9), as informações continuarão salvas e o usuário será levado de volta à Tela de Configuração Geral (Imagem 18 e 19), as informações continuarão salvas e o usuário será levado de volta à Tela de Configuração Geral (Imagem 18 e 19).
Campos | Descrição |
---|---|
Tem Certeza | Alerta explicadno as consequencias de sair. |
Cancelar | Botão "Cancelar", para voltar a Tela de Configuração Geral |
Confirmar | Botão "Confirmar", para confirmar a saida do aplicativo para a tela de Login do Atendente. |
Na imagem 18, o campo “Contatos Salvos” está vazio. Se o atendente tiver inserido contatos, os contatos serão exibidos em uma lista (Imagem 21; 10.11), muito parecido com a lista de contatos na Tela de Configuração de Contatos (Imagem 5; 2.6).
...
Tela de Configuração de Contatos (Imagem 5).
...
Imagem 21 - Tela de Configuração Geral (com contatos)
À medida que o usuário inclui contatos, uma lista se forma abaixo da legenda “Contatos Salvos” (10. 11). Um botão “Excluir” (10.12) aparece ao lado de todo contato. Ao clicar esse botão, o contato ao lado do botão é excluído da memória do aplicativo.
Funcionalidades
Campo | Descrição |
---|---|
Contatos Salvos | Lista de Contatos apos inclusão. |
Lixeira | Botão "Excluir". |
Realizando um Check-in/Check-out
...
- Navegue para a Tela de Check-in (Imagem 7) usando a ferramenta Tabs (Imagem 8; 5.1);
- Clique no Card do posto de Trabalho que deseja (Ex.: Imagem 7; 4.1);
- Chegará na Tela de Detalhes Check-in/Check-out (Imagem 10.1, 10.2);
- Clique no botão “Câmera” (Imagem 10; 6.5);
- Tire uma Selfie – isso é obrigatório;
- Se não estiver satisfeito com a Selfie, clique no botão “Câmera” e tire uma nova Selfie;
- Se tiver algo que você queira que o seu supervisor saiba ou veja, escreva no campo para comentário (Imagem 10; 6.3) e/ou tire fotos adicionais usando o botão “Mais” (Imagem 10; 6.4) – isso é opcional;
- Se não estiver satisfeito com as fotos adicionais, clique no botão “Excluir” (Imagem 11***) e tire novas fotos adicionais;
- Quando estiver satisfeito com tudo, clique no botão finalizar (Imagem 11; ***).
Consultando a Agenda
Somente após as Telas de Login do Atendente, Configuração de Contatos e Acesso do Atendente, o usuário poderá consultar a Agenda.
...
- Navegue para a Tela de Agenda (Imagem 12, 13) usando a ferramenta Tabs (Imagem 8; 5.2);
- Aparecerá a agenda do dia de hoje;
- Deslize o dedo para cima e para baixo para ver todas as marcações de ponto para o dia de hoje;
- Navegue dentro da tela para o histórico (Imagem 13***) usando o botão “Histórico”;
- Deslize o dedo para cima e para baixo para ver todas as marcações de ponto dentro do histórico.
...
- Após a Tela de Login (Imagem 2), você irá para a Tela de Configuração de Contatos (Imagem 4);
- Leia as instruções na tela (Imagem 4; 2.3);
- Clique no campo para inserir uma forma de contato com o supervisor dos postos (Imagem 4; 2.1);
- Escreva a forma de contato que deseja dentro do campo;
- Assim que finalizar, clique no botão “Incluir” (Imagem 4; 2. 4);
- Repita os passos 3 a 5 quantas vezes necessárias;
- Os contatos aparecerão em uma lista abaixo da legenda “Contatos incluídos:” (Imagem 5; 2.6);
- Caso queira excluir um dos contatos recém adicionado, clique no botão “Excluir” (Imagem 5; 2.7)
- Assim que adicionou todos os contatos que queria, clique no botão “Finalizar” (Imagem 4; 2.5).
A segunda maneira de adicionar formas de contato é pela Tela de Configuração Geral. Essa segunda maneira é a mais comum quando o usuário quer acrescentar ou excluir contatos da lista que ele já tinha criado na Tela de Configuração de Contatos.
...
- Navegue para a Tela de Acesso do Atendente (Imagem 6);
- Se estiver dentro do aplicativo, clique no botão “Sair” no Tabs (Imagem 8; 5.4);
- Se estiver nas telas de Login do Atendente ou Configuração de Contatos, continue com o processo de Login e/ou configuração, pois chegará na Tela de Acesso do Atendente eventualmente;
- Se estiver realizando um check-in na Tela de Detalhes de Check-in/Check-out (Imagem 10, 11), complete o Check-in ou Check-out e use o Tabs para sair;
- Se estiver na Tela de Ajuda via a Tela de Acesso do Atendente (Imagem 16), apenas clique no botão “Voltar”;
- Se estiver na Tela de Configuração Geral, siga para o passo 3;
- Clique no botão “Config.” (Imagem 6; 3.3) para navegar para a Tela de Configuração Geral (Imagem 18, 19);
- Dentro da Tela de Configuração Geral, clique no campo para inserir uma forma de contato com o supervisor dos postos (Imagem 18; 10.2);
- Escreva a forma de contato que deseja dentro do campo;
- Assim que finalizar, clique no botão “Incluir” (Imagem 18; 10.5);
- Repita os passos 3 a 5 quantas vezes necessárias;
- Os contatos aparecerão abaixo da legenda “Contatos salvos” (Imagem 18; 10.1);
- Caso queira excluir um dos contatos recém adicionado, clique no botão “Excluir” (Imagem 21; 10.12)
- Assim que adicionou todos os contatos que queria, clique no botão “Voltar” (Imagem 19; 10.4) ou continue navegando na Tela de Configuração Geral.
...
Qual a diferença entre o botão “Sair” na ferramenta Tabs (Imagem 8; 5.4) e o botão “Sair” na Tela de Configuração Geral (Imagem 19; 10.7)?
A opção "Sair" na ferramenta Tabs sai da área do Atendente, retornando à tela de Acesso do Atendente. A opção "Sair" na tela de Configurações faz o logout completo do aplicativo, apagando os dados armazenados e restaurando ao status inicial.
...