Habitual — O aplicativo de comércio eletrônico em Flutter

Edilson Matola
5 min readFeb 28, 2023

Read this story in English.

Introdução

Como um ávido desenvolvedor Web e desenvolvedor Mobile com Flutter, decidi criar um aplicativo de comércio eletrônico chamado Habitual que não é apenas fácil de usar, mas também personalizável para atender a diferentes necessidades de negócios.

Antes de entrar nos detalhes do aplicativo, gostaria de compartilhar um pouco sobre a história. Tenho feito um curso na Udemy sobre UI/UX Design, que me proporcionou uma base sólida nos princípios do design.

Inspirado pelo curso, resolvi aceitar o desafio de realmente desenvolver do zero o design do app Habitual usando o Flutter. Nesta publicação, compartilharei os recursos do aplicativo, seu processo de desenvolvimento e como poderá acessar o source code em meu perfil do GitHub.

Recursos

O aplicativo foi projectado tendo em mente os princípios de design responsivo, tornando-o acessível e fácil de usar em vários dispositivos. Esteja você usando um desktop, um tablet ou um celular, o aplicativo se adapta ao tamanho da tela e oferece uma experiência de visualização ideal. O design responsivo garante que todos os recursos e funcionalidades estejam disponíveis para os usuários, independentemente do dispositivo.

Além do design responsivo, o aplicativo irá incluir uma variedade de recursos que o tornam uma plataforma completa para navegação e compra de produtos. Aqui estão alguns dos principais recursos do aplicativo:

O aplicativo irá possuir uma interface amigável que permite que os usuários naveguem facilmente por diferentes telas. Alguns dos recursos que o aplicativo oferece incluem:

  • Autenticação do usuário: Este recurso permite que o usuário se cadastre e faça o login no aplicativo, necessário para realizar compras e acessar o histórico de pedidos.
  • Listagem de produtos: o aplicativo possui uma seção que exibe todos os produtos disponíveis, completos com descrições, preços e imagens dos produtos.
  • Gerenciador de carrinho: os usuários podem adicionar itens ao carrinho e visualizar o custo total de suas compras antes de finalizar a compra.
  • Integração de pagamento: o aplicativo oferece suporte a diferentes métodos de pagamento, tornando conveniente para os usuários pagar por suas compras.
  • Rastreamento de pedidos: depois que os usuários fazem um pedido, eles podem acompanhar o andamento de sua remessa diretamente do aplicativo.
  • Checkout: O aplicativo inclui um recurso de checkout que permite que os usuários concluam suas compras com segurança e eficiência. Os usuários podem escolher o método de pagamento preferido, inserir as informações de envio e cobrança e acompanhar o status do pedido.
  • Perfil: o aplicativo inclui um recurso de perfil que permite aos usuários criar e gerenciar as informações de sua conta. Os usuários podem visualizar seu histórico de pedidos, atualizar suas informações de contato e gerenciar suas preferências.
  • Filtros de pesquisa: o aplicativo inclui filtros de pesquisa que permitem aos usuários encontrar rapidamente os produtos que estão procurando. Os usuários podem filtrar seus resultados de pesquisa com base em critérios como preço, categoria, marca e muito mais.
  • Páginas vazias personalizáveis: o aplicativo inclui páginas vazias personalizáveis que podem ser usadas para exibir mensagens personalizadas com imagens ou promoções quando não houver produtos ou resultados a serem exibidos.

Screenshots

Aqui estão alguns screenshots do como será o aplicativo em acção:

tela de produto, tela splash e a tela inicial
boarding tela e tela de finalização
tela de perfil

Processo de desenvolvimento

Estarei desenvolvendo activamente este aplicativo ao longo deste ano e documentarei meu progresso e compartilharei minhas ideias aqui no Medium.

Estarei usando o Flutter, que é uma poderosa estrutura de desenvolvimento de várias plataformas. Também usarei algumas dependências de terceiros no Flutter para acelerar o processo de desenvolvimento, que serão listados no readme do repositório do GitHub.

Para o back-end e a API, usarei Node.js, que é uma framework popular do JavaScript que facilita o desenvolvimento do back-end. Eu também estarei usando um sistema de gestão de banco de dados para armazenar os dados do aplicativo. Do momento, estou pensando em usar o PostgreSQL ou o MongoDB. Se tiver alguma sugestão, sinta-se à vontade para compartilhar sua opinião nos comentários.

Para facilitar a implantação do aplicativo, usarei o Docker, que é uma plataforma de conteinerização que permite fácil entrega e dimensionamento de aplicativos. Ao usar o Docker, poderei conteinerizar o aplicativo e todas as suas dependências, facilitando a implantação em diferentes ambientes.

No geral, o processo de desenvolvimento esta sendo uma grande experiência de aprendizado e estou animado para compartilhar o aplicativo com a comunidade open-source. Se tiver alguma dúvida sobre o processo de desenvolvimento ou as ferramentas utilizadas, sinta-se à vontade para perguntar nos comentários.

Mapa do Projecto

A primeira etapa do projeto será focada no desenvolvimento de UI, criando uma interface atraente e moderna que torne o aplicativo mais amigável e envolvente para seus clientes.

A segunda etapa será a integração do GetX, uma poderosa ferramenta de gestão de estado para Flutter, que melhorará o desempenho do aplicativo e a experiência do usuário, fornecendo uma experiência mais eficiente e fluxo de dados organizado.

Por fim, na terceira etapa, desenvolveremos a API, que permitirá a conexão com a loja de comércio eletrônico a outros aplicativos, bancos de dados e serviços e forneça uma experiência mais contínua e integrada para seus clientes.

O App será baseado na Arquitetura GetX. Se você não está familiarizado com o GetX, pode começar com a documentação oficial.

Agradecimento aos autores do design

Antes de concluir, gostaria de agradecer aos autores do design que inspiraram a aparência do aplicativo Habitual eCommerce. O design foi criado por Daniel Schiffano, que é um designer muito talentoso, apaixonado por criar interfaces bonitas e intuitivas. O curso foi criado por Andrei Neagoie, que é um desenvolvedor e professor que dirige a escola de tecnologia ZTM. O curso deles e o design foram fundamentais para dar ao aplicativo uma aparência elegante e moderna, e sou grato por sua contribuição.

GitHub link

Se estiver interessado em explorar o source code por trás do aplicativo, poderá encontrá-lo no meu perfil do GitHub em edilsonmatola. O repositório contém todos os arquivos e documentação necessários para configurar o aplicativo e personalizá-lo para atender às suas necessidades comerciais. Quer seja um desenvolvedor experiente ou iniciante, você também pode contribuir com o projecto enviando relatórios de bugs, pull requests de funcionalidades ou até mesmo alterações de código.

Conclusão

Espero que esta publicação tenha dado a você um vislumbre dos recursos do aplicativo de comércio eletrônico Habitual de código aberto que estou desenvolvendo no Flutter. O aplicativo será projetado para fornecer uma experiência de compra intuitiva e perfeita para os usuários e é personalizável para atender a diferentes necessidades de negócios.

Siga meu blog Medium para se manter atualizado sobre os desenvolvimentos mais recentes e as melhores práticas para desenvolvimento Web e móvel. Se você tiver algum comentário ou pergunta, não hesite em entrar em contato comigo no Twitter, Instagram e Github, na qual você é também em seguir.

Obrigado pela leitura, tenha um óptimo dia!

--

--

Edilson Matola

Full-Stack Web & Mobile App Developer Engineer | Livelong learner | Happy about sharing my knowledge to the community