Skip to content

Latest commit

 

History

History
143 lines (102 loc) · 6.54 KB

README.md

File metadata and controls

143 lines (102 loc) · 6.54 KB
Raw

Primeira next level week

O repositório compreende as atividades aplicadas durante a primeira Next Level Week. Evento online de programação realizado pela Rocketseat, do qual apresenta ferramentas e tecnologias que norteiam a stack do Javascript. A categoria o qual participei chama-se launchbase e foi ministrada pelo instrutor Mayk Brito.

Tela inicial do Ecoleta

Imagem ilustrativa da tela inicial do Ecoleta.

Figura 1

O projeto ♻️ Ecoleta consiste numa proposta de marketplace direcionado a instituições que lidem com a coleta e processamento de resíduos recicláveis, e indivíduos que desejam realizar o correto descarte de materiais utilizados por tais empresas. A tela principal da aplicação (figura 1) possui duas funcionalidades, a primeira dispõe o formulário para cadastrar o ponto de coleta (figura 2), e a segunda, consiste na tela para buscar pontos de coleta registrados na plataforma (figura 3).

Cadastrar pontos de coleta

Cadastrar pontos de coleta

Figura 2

O cadastro de ponto de coleta representado na figura 2, possui os seguintes requisitos:

  • ✏️ Campos do tipo texto para receber: nome da entidade; endereço; numero/complemento.

  • 🖼️ Campo do tipo url para receber o link de uma imagem que represente a identidade ponto de coleta cadastrado.

  • 🌆 Campos do tipo select para selecionar o estado (UF) e cidade que se situa o ponto de coleta.

  • ⚙️ Campos do tipo select utilizam a API (Application Programming Interface) do IBGE (Instituto Brasileiro de Geografia e Estatística) para popular a listagem de estados e suas cidades.

  • 🔓 O campo para selecionar uma cidade é liberado apos a escolha do estado, para então popular o select com as cidades e municípios correspondentes ao estado.

  • ❎ Ao fundo do formulário situa-se o campo para selecionar os itens de coleta, o qual permite-se assinalar quais insumos recicláveis o novo ponto de coleta está recebendo.

Pesquisar pontos de coleta

Buscar pontos de coleta

Figura 3

A funcionalidade pesquisar pontos de coleta ilustrado na figura 3, compreende os seguintes requisitos:

  • 🔎 A busca por pontos de coleta é realizada informando o nome de uma cidade no dialogo de pesquisa.

  • 🔧 O SQL utilizado na função de pesquisa utiliza o operador like, então, a busca retornará resultados informando apenas partes do nome de uma cidade, pois o operador like vasculhará na coluna cidade do banco de dados, sequencias de caracteres que correspondam ao valor informado.

  • ✅ Caso a pesquisa retorne resultado, é informado quantos itens foram encontrados, para cada um apresentam-se os dados cadastrais mais relevantes.

  • ⁉️ Caso a pesquisa não encontre correspondência de caracteres no texto informado, é apresentado a mensagem de nenhum local encontrado.

Tecnologias e ferramentas envolvidas

  • VScode: editor de texto utilizado para escrever o código.

    • Live Server: extensão do vscode utilizado para monitorar modificações em arquivos HTML e CSS, para então atualizar o browser com tais modificações. O pluguim é utilizado quando o back-end não está implementado/configurado.

  • NodeJS 12.18.3: ambiente de desenvolvimento e execução do back-end javascript.

    • Express 4.17.1: framework para criação de rotas da aplicação.

    • Nunjucks 3.2.1: templating engine utilizado para modularizar trechos de código da aplicação, e aplicar estruturas de repetição ou condicionais caso necessário.

    • Sqlite3 4.2.0: banco de dados relacional da aplicação. Observa-se que o armazenamento dos dados ocorre em um arquivo dentro da aplicação.

    • Nodemon 2.0.4: apos instalar o nodejs, o uso desta biblioteca serve para monitorar mudanças em arquivos do projeto, e aplicar o auto restart durante a execução. Observa-se que sua utilização ocorre durante a faze de construção do projeto, então, a mesma deve ser instalada como dependência de desenvolvimento com o comando: npm install nodemon -D.

🖥 Execução do projeto

  • ⬇️ Faça o download do projeto, e guarde o diretório "nlw" em local fácil de achar no seu computador.

  • 👩‍💻 Abra o diretório "nlw" com o terminal e execute o comando npm install para baixar as dependências do projeto.

  • ▶️ Para executar a aplicação, use o camando npm run start na pasta "nlw".

  • 🔗 Abra o seu navegador, e digite a URL localhost:3000 na barra de endereços.

✨ Agradecimentos

NLW Rocketseat diego3g maykbrito

📜 Licença

Repositório licenciado pela MIT LICENSE.

Feito com 💚 por Heitor Monteiro