Aplicação de exemplo contendo Backend em Flask e Frontend em Vue e ainda um banco de dados SQL.
Objetivo geral: Criar uma pequena aplicação para que um usuário possa gerenciar uma lista de contatos.

Table of Contents

• Before start
• Requirements
• Installation
• Backend
  • Queries and Routes
  • Starting up backend
  • Testing backend
• Frontend
  • Starting up frontend
  • Creating new contact
  • Updating contact
  • Removing contact

Foi desenvolvido alguns scripts para facilitar a instalção e operação, mas é possível executar õs comandos de maneira manual

Para utilizar esse projeto, você vai precisar de:

• Linux OS (Debian ou Ubuntu)
• python3.8+
• python3-pip
• python3-venv
• nodejs 10+
• npm

Aplicativos e demais dependências serão instaladas automaticamente ao chamar o script install-dependencies.sh
Obs. Para fazer a instalação de pacotes adicionais você vai precisar de acesso root

• Faça um clone do repositório em uma pasta que voc6e possua acesso completo (leitura/escrita/execução)
• No Shell execute:

$ chmod +x install-*
$ sudo ./install-dependencies.sh /path/to/install

Obs. Substitua /path/to/install pelo caminho absoluto desejado para instalação da aplicação. Se omitido a aplicação será instalada em /opt/BrunoNatali/

Assim que o sistema estiver pronto para receber os pacotes das stacks mencionadas execute no Shell:

$ ./install-apps.sh

Quando for solicitado para escolher a isntalação do Vue, selecione os defaults para Vue 2 e aparte ENTER

O Backend foi escrito em FLask, Flask é um pequeno framework web escrito em Python.
Sua estrutura de pastas é demonstrada a seguir:

+-- database
|   +-- schema.sql  # Estrutura do banco de dados
+-- project
|   +-- __init__.py
|   +-- models.py   # Estrutura de manipulação do banco
|   +-- server.py   # Aplicação principal, API de interface
+-- test
|   +-- __init__.py
|   +-- server_test.py
+-- create_db.py    # Script básico para criação inicial do banco

O endereço utilizado do servidor para essa documentação será 127.0.0.1, mas para efeitos de demonstração o servidor escuta no "0.0.0.0", então se seu linux tiver conectado à um roteador você poderá acessar o servidor de fora em um endereço local.

As respostas serão dadas em JSON.

• Listando os contatos
  • [GET] http://127.0.0.1/
  • [JSON] {["id": 1, "contact_name": "nome", "contact_phone": "+55119000080000"], ...}
• Adicionando um novo contato
  • [POST] http://127.0.0.1/new/?contact_name=nome&contact_phone=+55119000080000
  • [JSON] {"status": 1}
  • [JSON-ERR] {"status": 0, "error": "SQL error | Phone exists"}
• Alterando um telefone
  • [GET] http://127.0.0.1/update/1?method=update&contact_phone=+15962547896
  • [JSON] {"status": 1}
  • [JSON-ERR] {"status": 0, "error": "SQL error | Phone exists | Not found"}
• Removendo um contato
  • [GET] http://127.0.0.1/update/1?method=delete
  • [JSON] {"status": 1}
  • [JSON-ERR] {"status": 0, "error": "SQL error | Phone exists | Not found"}

Obs. Se alguma query ou path URL não for cumprido, um HTTP 400 será retornado.

Para iniciar o Backend apenas rode o script 'run-back-end.sh':

$ cd /path/to/install && ./run-back-end.sh

Lembrando de trocar "/path/to/install" pelo local escolhido para instalação da aplicação
Ou você pode executar ele manualmente da seguinte forma:

$ cd /path/to/install/backend && FLASK_APP=project/server.py python -m flask run --host=0.0.0.0

O teste unitário do backend é feito utilizando a ferramenta pytest. Mesmo numa aplicação tão pequena de demonstração, algumas dezenas de testes podem ser executados, mas como o objetivo dessa parte, para esse projeto, é garantir o funcionamento mínimo e a execução de testes unitários, são feitos 4 testes que incluiem validação das rotas e comunicação com o banco de dados.
Para executar o teste:

$ cd /path/to/install/backend
$ source env/bin/activate
$ python -m pytest

O frontend é capaz de executar todas as fuções previstas de CRUD, interagindo com o backend e posicionando o cliente sobre o resultado.

Segue a tela principal, onde é listado os contatos:

Obs. A Documentação nessa seção não está concluida, para maiores informações navegue nas pastas e arquivos de client\src, todos eles integram esse projeto

Para iniciar o frontend foi criado um script, run-fron-end.sh, dessa forma basta entrar na pasta do projeto e executar:

$ ./run-fron-end.sh 

Obs. O frontend irá iniciar em modo de desenvolvimento, pois ainda não existe uma certificação de que tudo esteja funcionando corretamente e livre de bugs.

A criação de um novo contato a partir do backend é feita através do botão "Novo contato", localizado na perte superior esquerda.

Essa requisição é feita para o backend seguindo a documentação.

Deve se preencher os campos:

• Nome, com o nome do novo contato
• Telefone, com o telefone desse contato

Segue exemplo do modal que irá aparecer:

Para atualizar um contato, clique em "Update" ao lado do contato que deseja atualizar, altere o número de telefone e clique no botão "Atualizar".

Se tudo ocorrer como planejado, a mensagem "Contato atualizado" deve aparecer na tela.

Para remover um contato, basta clicar no botão "Delete" ao lado do contato, a mensagem "Contato removido" confirma a remoção.
[ATENÇÃO] Não existe confirmação para a remoção do contato.