/encurtador-url

Encurtador de URL back-end e front-end

Primary LanguageVue

EncurtadorDeURL

Encurtador de URL 🖥️ 📝

Olá! Essa é uma aplicação de encurtamento de URL EncurtadorDeURL!

Com ele, você pode criar URLs mais curtas, monitorar número de acessos, deletar suas URLs criadas, além de conhecer as 100 URLs mais acessadas.

Uma verdadeira mão-na-roda para criar links mais curtos!

Requisitos

Instalação

Essa é uma aplicação em NodeJS e Vue.JS, que possui dois componentes principais (front e back):

  • Front-end Essa aplicação consome nossa API e nos retorna os dados no Front-End;
  • Back-end Onde a mágica acontece! Nosso back-end utiliza o banco de dados MySQL, onde são salvas nossas URLs;
Estrutura do aplicativo
encurtador-url/
├── README.md # este arquivo
├── encurtador-back-end # responsável por processar nossos dados através de requisições
│   ├── package.json # principal componente da aplicação
│   ├── package-lock.json # arquivo responsável por otimizar a instalação em outros ambientes
│   ├── app.js # inicia a aplicação
│   └── src
│       ├── config
│       │   ├── .env
│       │   └── db.js
│       ├── routes
│       │   ├── index.js
│       │   ├── logged.js
│       │   ├── login.js
│       │   ├── register.js
│       │   └── urls.js
│       ├── utils
│       │   ├── utils.js
│       │   └── server.js
│       ├── models
│       │   ├── Users.js
│       │   └── Url.js
├── encurtador-front-end # responsável por ser uma interface amigável para nosso back-end
│   ├── package.json # principal componente da aplicação
│   ├── package-lock.json # arquivo responsável por otimizar a instalação em outros ambientes
│   ├── babel.config.js
│   ├── jsconfig.json
│   ├── vue.config.js
│   ├── README.md
│   ├── public
│   │   ├── favicon.ico
│   │   ├── index.html
│   └── src
│       ├── App.vue
│       ├── main.js
│       ├── components
│       │   ├── FooterHome.vue
│       │   ├── FormLoginRegister.vue
│       │   ├── HeaderHome.vue
│       │   └── MainHome.vue
│       ├── helpers
│       │   └── actionsLocalStorage.js
│       ├── pages
│       │   ├── HomePage.vue
│       │   ├── LoginPage.vue
│       │   ├── MyUrlsPagePage.vue
│       │   ├── RankingUrlPage.vue
│       │   └── RegisterPage.vue
│       ├── routes
│       │   └── router.js
│       ├── services
│       │   └── api.js
Com quem devo me preocupar primeiro?

  • Como o back-end é o coração 💚 dessa aplicação, é possível utilizar ele sem um Front-end, nesse caso, é possível consumi-lo através de requisições REST, através de seu aplicativo de requisições favorito, como Postman, Insomnia, HTTPie, etc!

    • É recomendável roda-lo primeiro para garantir que o front-end tem da onde conseguir as informações de tarefas!

  • O front-end, por outro lado, dá uma cara mais elegante 🌟 para nosso app, e é preferencialmente recomendado para consumo do nosso back-end!

    • É recomendável deixa-lo por segundo, já que ainda que o front funcione, ele precisa de uma API para consumir - papel do nosso back-end.
Instalando o back-end
  • Acesse a pasta ./encurtador-url/encurtador-back-end;
  • Instalar a aplicação utilizando o comando npm install;
  • O processo não deve retornar erros. Warns (Avisos) não impedem seu funcionamento;
  • Rodar a aplicação com npm start;
  • Esse aplicativo requer, excepcionalmente, um arquivo .env, já contido na pasta /config no repositório;
    • Neste arquivo deve-se ser inserido o link de uma banco de dados MongoDB. (MONGO_URI='o link aqui').
  • Por padrão, essa aplicação funciona a partir da porta 3333;
Instalando o front-end
  • Acesse a pasta ./encurtador-url/encurtador-front-end;
  • Instalar a aplicação utilizando o comando npm install;
  • O processo não deve retornar erros. Warns (Avisos) não impedem seu funcionamento;
  • Rodar a aplicação com npm run serve;
  • Por padrão, essa aplicação funciona a partir da porta 8080;