A Aplicação consiste em um chat para a área de vendas, onde o objetivo é que as empresas possam interagir em tempo real com os clientes ou futuros clientes, através de um chat similar ao telegram.
A solução também inclui um painel web, para que a empresa possa gerenciar/receber os pedidos vindos do aplicativo, criar seus grupos de chat, gerir usuários, produtos a venda e encomendas.
O Aplicativo mobile, é focado para os clientes, onde poderão entrar em um grupo, tendo a possibilidade de interagir em tempo real no chat, utilizando textos, imagens e audio. Também terão acesso a abas de produtos onde poderão fazer os pedidos.
Painel web:
https://github.com/WillRy/shopping-spa
Construído no modelo de SPA (SPA: Single Page Application), utilizando o angular 6.
App:
https://github.com/WillRy/shopping-mobile
Construído utilizando Ionic 3
API:
https://github.com/WillRy/shopping-api
Construída utilizando o Laravel Framework.
Banco de dados:
É utilizado o mysql para persistência dos dados e o Firebase Realtime Database para a construção do chat.
As tecnologias foram usadas nas versões:
- [email protected]
- [email protected]
- [email protected]
- [email protected]
- Firebase
- MySQL
O Aplicativo mobile construído em Ionic, contém as seguintes funcionalidades:
- Cadastro com número de telefone
- Troca de número de telefone
- Área de chats
- Área de produtos
- Área de pedidos
Logo ao entrar no aplicativo, o usuário se depara com as seguintes opções:
Na criação de usuários, o usuário pode criar a sua conta utilizando o número de telefone, que será validado utilizando os serviços do Firebase.
Após confirmar o número de telefone, caso já tenha registro na base de dados, será direcionado para a tela principal do aplicativo, onde terão 3 abas: Grupos, produtos e pedidos.
Caso não tenha cadastro, será enviado para a tela de cadastro.
Nesta aba, é possível visualizar os grupos do qual você faz parte, sendo possível enviar textos, gravar mensagem de áudio e enviar imagens no chat.
Nesta aba, há uma lista de produtos disponíveis para serem encomendados
Os vendedores, através do painel administrativo, podem adicionar uma pessoa em um grupo de chat ou podem gerar links de convite, onde ao acessar o link, o aplicativo será aberto e será feito a solicitação de entrada no grupo.
A Aplicação conta com uma integração ao Firebase Cloud Messaging, que permite direcionar push notifications para os usuários, toda nova mensagem ou aprovação na solicitação de entrada em grupo, o usuário irá receber a notificações para alertar das mudanças.
O Painel foi construído utilizando o Angular, devido a seu ótimo ambiente para construções de SPAs, com lazy loading, code splitting e entre outros recursos.
Este painel só é acessível para os vendedores e administradores do sistema, pois possui funcionalidades administrativas, como:
- Categoria
- Produto
- Usuário
- Entradas
- Saidas
- Chats
- Pedidos
Listagem de categorias de produtos, podendo editar e remover
Listagem de produtos, onde é possível criar/editar e remover. Também é possível adicionar categorias a um produto ou fotos.
Módulo onde é possível registrar a entrada e saída de produtos contidos no estoque
Módulo onde é possível administrar os chats do sistema, sendo possível criar novas salas, administrar membros e criar links de convites
Para executar a aplicação, é necessário:
É necessário criar um projeto no firebase, registrando uma versão para:
web e mobile
Após registrar o projeto, é necessário, criar um arquivo de config do firebase para a SPA(web), um para a API e outro arquivo para o mobile
Para a API:
- Gerar uma chave admin-sdk (service account)
- Inserir o arquivo .json gerado, na raiz da API
O arquivo de admin-sdk, assemelha-se a este formato:
{
"type": "service_account",
"project_id": "",
"private_key_id": "",
"private_key": "",
"client_email": "",
"client_id": "",
"auth_uri": "",
"token_uri": "",
"auth_provider_x509_cert_url": "",
"client_x509_cert_url": ""
}
- Gerar o arquivo de autenticação
- Criar um arquivo chamado firebase-config.ts na raiz do projeto, no seguinte modelo:
export default {
apiKey: '',
authDomain: '',
databaseURL: '',
projectId: '',
storageBucket: '',
messagingSenderId: '',
appId: ''
};
Preencher os dados, com os valores presentes, na config gerada no firebase
O Aplicativo requrer a instalação das dependências comuns para a execução do Ionic3
- Gerar o arquivo google-services.json
- Inserir este arquivo na pasta /platforms/android/app
git clone https://github.com/WillRy/shopping-spa
npm install
ng serve
Os endpoints disponíveis da API estão no arquivo: Insomnia-endpoints.json
git clone https://github.com/WillRy/shopping-api
composer install
php artisan migrate
php artisan db:seed
php artisan serve