ColorsApp

ColorsApp es una aplicación desarrollada con Vue JS para ayudar a los usuarios en su trabajo diario copiando los códigos hexadecimales de los colores dentro de una paleta determinada.

Puedes ingresar desde estos links:

https://miapp.digital/colors ó https://color-app-vue.herokuapp.com/colors

Al hacer clic en un color se ve lo siguiente:

La paleta de colores es obtenida a través de una API de prueba.

https://reqres.in/api/colors

Comenzando 🚀

Estas instrucciones te permitirán obtener una copia del proyecto en funcionamiento en tu máquina local para propósitos de desarrollo y pruebas.

Mira Deployment para conocer como desplegar el proyecto.

Pre-requisitos 📋

Antes de instalar el proyecto debes tener instalado Node JS en tu máquina local y además un editor de texto para el desarrollo

Editor de texto (Recomiendo Visual Studio Code)

https://code.visualstudio.com/

Node JS (Recomiendo versión LTS)

https://nodejs.org/

Vue JS y Vue CLI

https://vuejs.org/

$ npm install -g vue

https://cli.vuejs.org/

$ npm install -g @vue/cli
$ npm install -g @vue/cli-service-global

Instalación 🔧

Antes de realizar la instalación verifica que tengas instalado correctamente Node JS, npm y Vue, de la siguiente forma:

$node --version
@vue/cli 4.3.1 (Esto debería verse como resultado)

$npm --version
6.14.5 (Esto debería verse como resultado)

$vue --version
@vue/cli 4.3.1 (Esto debería verse como resultado)

Para instalar el proyecto debes descargarlo como zip o clonarlo desde esta dirección:

https://github.com/gonzafg2/ColorsApp.git

Luego de tener los archivos en tu computadora debes instalar node de la siguiente forma. Ejecuta este comando dentro de la carpeta donde están todos los archivos del proyecto

$ npm install

Esto instalará todas las dependencias necesarias para correr la aplicación en tu equipo.

Luego de esto, se creará una carpeta llamada "node_modules".

Si todo salió correctamente puedes ver la app ejecutando el siguiente comando:

$ npm run serve

Esto creará un servidor local para visualizar el proyecto al cual puedes acceder ingresando a alguna de estas direcciones: (Pueden ser diferentes en tu equipo)

DONE  Compiled successfully in 9051ms 

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.1.81:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

Despliegue 📦

Puedes hacer deploy ejecutando el siguiente comando en tu terminal:

$ npm run build

Lo que dará como resultado la creación de una carpeta llamada "dist", con los archivos necesarios y minificados para la ejecución en producción.

 File                                   Size              Gzipped

  dist/js/chunk-vendors.22378ff0.js      940.40 KiB        246.79 KiB
  dist/js/bundle-colors.0fe9718f.js      18.74 KiB         5.73 KiB
  dist/js/app.ddb23e04.js                5.66 KiB          2.42 KiB
  dist/js/bundle-about.64130b02.js       1.36 KiB          0.68 KiB
  dist/css/chunk-vendors.94bc0478.css    210.20 KiB        30.74 KiB
  dist/css/app.9eac813c.css              145.25 KiB        23.14 KiB
  dist/css/bundle-about.e93e686c.css     0.67 KiB          0.25 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

Construido con 🛠️

En este proyecto se han utilizado las siguientes tecnologías:

• HTML5 y CSS3 - Como lenguajes de etiquetas y estilos.
• VueJS - El framework web escrito en javascript más versátil, simple y amigable de usar.
• Vue-CLI - Herramienta para complementar Vue JS.
• Vue-Router - Herramienta para complementar Vue JS.
• Bootstrap-Vue - Framework para CSS adaptado a las etiquetas de Vue JS.
• NodeJS y npm - Manejador de dependencias.
• Axios - Utilizado para realizar llamadas a una API de forma sencilla, basado en promesas.
• Vue Clipboard - Usado para realizar el copiado de un elemento al ser clickeado.
• Heroku - Usado para hacer deploy y como hosting de la aplicación.

Autor ✒️

Por ahora hay un sólo autor:

• Gonzalo Fleming - Desarrollo Inicial - gonzafg2

También puedes mirar la lista de todos los contribuyentes quíenes han participado en este proyecto.

Licencia 📄

Este proyecto está bajo la Licencia MIT - mira el archivo LICENSE para detalles

Expresiones de Gratitud 🎁

• Puedes comentar a otros sobre este proyecto. 📢
• O invitarme una cerveza 🍺 o un café ☕.
• O también dar las gracias públicamente 🤓.
• Etc.

---

⌨️ con ❤️ por GFleming 😊