Sobre o geralista.net.br

1. Visão Geral da Interface

O GeraLista foi desenvolvido para ser simples e intuitivo. A página está dividida em abas e módulos de navegação rápida que permitem alternar entre o cadastro de itens e a visualização final da sua lista.

Ao entrar no GeraLista, você sempre terá em mãos uma lista básica, gerada por nós e uma galeria extensa de imagens.Ao entrar em qualquer navegador Web ou pelo aplicativo, o sistema cria automaticamente uma lista inicial.

Figura 1: Tela inicial com os cartões de atalho e navegação do sistema.

• Menu/Abas: Permite alternar rapidamente entre Categorias, Produtos e Lista Final.
• Modo Claro ou Escuro: Para maior conforto na edição ou leitura.
DICA:Clique no menu para Limpar todas as compras, Imprimir sua lista e compartilhar nosso aplicativo com os amigos.

2. Gestão de Categorias

• CATEGORIAS: Antes de adicionar produtos, é recomendável organizar suas categorias (ex: Hortifrúti, Laticínios, Limpeza). Isso facilita a filtragem dos itens durante as compras.
• ORDENAÇÃO: Ordene as categorias de acordo com os lugares da sua compra. Utilize as setas (PC ou Celular) ou simplesmente arraste(PC) para a posição adequada.
DICA: Utilize bem este recurso de posicionamento de categorias, pois você pode criar supermercados específicos, ou lojas específicas ou departamentos específicos. Ex: Se vou passar primeiro no Banco, depois na farmácia, depois vou a feira, depois ao mercado. Colocaria as categias na ordem de locomoção e dentro destas categorias você vai colocar todos os produtos que vai comprar: ↣ Importante: banco, parafusos ↣ Farmácia: aspirina, sal de fruta ↣ Feira: alface, cebola, alho, limão ↣ Mercado: açucar, leite, etc...

Figura 2: Formulário para criação e ordenação de categorias.

• Digite o nome da categoria no campo indicado.
• Clique em Salvar Categoria.
• Você pode editar ou excluir categorias existentes a qualquer momento na lista abaixo do formulário.
• Pode ainda move-las para que aparecem na ordem de suas compras.
• DICA: Use Emojis para personalizar suas categorias.

3. Cadastro e Edição de Produtos

No card de Cadastrar Produto, você define o nome do item, associa a uma categoria, insere preço estimado, descrição opcional e escolhe uma imagem explicativa.

Figura 3: Formulário de cadastro com opção de upload e pré-visualização de imagem.

• Nome do Produto: Informe o título do item (ex: Queijo Muçarela).
• Preço e Descrição: Preencha o valor unitário estimado e observações específicas.
• Pré-visualização: O miniquadro 70x70 mostra instantaneamente a thumbnail da imagem selecionada.
• DICA: Utilize ponto, dois pontos, caracteres especiais para criar uma subdivisão dos produtos. Ex: Você pode criar categorias: Verduras, Legumes e Frutas, mas também pode criar uma única categoria chamada 'HortiFruti' e usar ., .., •, ›; iniciando um nome com os mesmos caracteres este se agruparão por ordem alfabética naturalmente.

4. Seleção de Imagens e Galeria

Você pode enviar uma foto do seu dispositivo ou escolher uma imagem rápida através do botão GALERIA integrando imagens pré-carregadas.

Figura 4: Modal da Galeria para escolha rápida de ícones e fotos de produtos.

• Clique no botão GALERIA para abrir a janela modal de seleção.
• Clique sobre a imagem desejada; o modal fechará automaticamente aplicando a imagem ao produto.
• Se preferir usar um arquivo próprio, utilize o botão Escolher arquivo diretamente na página.
• DICA: Use e abuse da GALERIA, a imagem fica retida localmente e pode ser reutilizada facilmente. Ex: Folhas podem ser utilizadas para: cheiro verde, coentro, salsa, rúcula, etc...

5. Gerenciando a Lista de Compras

Criação, Edição e Exclusão de suas listas.

Figura 5: Visualização da Criação de listas de compras organizada por categoria.

• Ajuste quantidades ou remova produtos diretamente na lista.
• Exporte ou imprima sua lista usando o painel de ações rápidas no topo. (Em Construção)
• DICA: Você não precisa sair jogando tudo fora e começando de novo, vá guardando suas listas. Ex: Eu sempre tenho lista de Galinhada, Feijoada, Churrasco, Final de Mês, etc... Quando vou fazer a festa é só abrir a lista que os produtos a serem comprados já estarão listados.

6. Gerenciando os Encartes

Esta área é para cadastrar seus links de panfletos, propagandas, encartes de supermercados, é uma área para ser temporária, pois as promoções quase sempre são por curto tempo.

Figura 6: Visualização de Encartes promocionais.

• Digite o nome do Encarte (nome do supermercado, nome da farmácia,etc...
• Coloque a data de validade e inclua a URL do site, ou Seja: "Cole o endereço da internet (link) onde o seu panfleto está salvo."
  • Abra o panfleto na internet (pode ser no Google Drive, Sites, instagram, Facebook ou apenas a imagem na Internet).Copie o texto completo que aparece na barra de endereços do topo do seu navegador (começa com www. ou https://).Cole esse texto no campo de cadastro acima.Dica de ouro para o usuário evitar errosEvite caminhos do seu computador: Endereços que começam com C:\Users\ ou file:// não funcionam. O panfleto precisa estar publicado ou guardado na internet para que você consiga ver.
• Clique em Adicionar Encarte.
• DICA: Você pode até usar encartes do Instagram ou Facebook, Clique nos 3 pontinhos (•••) do post e clique em Copiar o Link, depois cóle-o na url do encarte. Obs: As vezes pode não funcionar, pois muitos usuários ou o próprio META bloqueiam links externos, mas vale a pena tentar.
• DICA 2: Use a navegação dupla, clique em 🌓, abrirá uma nova janela dividida em duas partes que arrastando você pode redimensionar, na parte superior você verifica sua lista e na inferior o seu encarte.

7. Gerenciamento de Backups, Ajudas e Contato

Tentamos tornar tudo muito intuitivo, acesse o detalhamento de cada sessão do nosso site ou aplicativo nesta sessão.

Figura 5: Visualização da Área de Configurações, Ajudas e Contato.

• A primeira opção é esta página com suporte e dicas a nosso aplicação e no final dela uma área para contato.Lenbrando que para enviar uma mensagem você precisará estar conectado a Internet.
• Depois temos os Backups ou cópias de segurança dos seus dados, nos utilizamos o armazenamento em Web Storage (localStorage): Uma tecnologia moderna, explicada na API de Armazenamento na Web que guarda dados de forma mais eficiente e com mais espaço. Os backups são no formato TXT (texto) exatamente o que seu navegador guarda. Para que você possa usar o programa em outro navegador ou disposito, precisará de ter uma cópia de Backup, é exatamente o que fazemos nesta área.
• Aí você poderá guardar já gerado o arquivo .txt ou copiando o texto para memória.
• E também, importar os dados para restauração do sistema ou seja buscando o arquivo .txt ou colando o texto na área específica.
• E por fim poderá apagar todo o conteúdo já gerado, é claro que depois do backup...
• DICA: Cole sua configuração em um email ou no whatsApp, fica muito fácil de restaurar sua lista em qualquer lugar.
• DICA 2: Deixe sua vida mais colorida. Selecione seu tema preferido: Claro, Escuro, Rosa, Azul ou Preto.