Taller Jugando con JS

¡Bienvenido al taller Jugando con JS!, puede que te preguntes ¿Por qué tiene ese nombre?, no se le ocurrió algo más original, solo lo puso por darle un nombre, está loco, jeje, puede que se te ocurran múltiples respuestas a la pregunta anterior, realmente opte por este nombre ya que desde mi punto de vista considero que para poder adquirir un nuevo conocimiento es nesesario hacerlo de la manera mas amena y divertida, prácticamente verlo como un video juego en el que conforme se adquiere conocimiento se sube de nivel, se obtiene ese trofeo de platino(Muy válido en PS4), o imaginar que estamos jugando con piezas de lego las cuales al unirlas de la manera correcta conseguimos esa loca creación que teníamos en mente jejeje.

Este taller se tiene pensado para realizarse en 4 entradas, esto puede variar ya que se podría extender dependiendo de las sugerencias que se realicen, tambien si se considera necesario profundizar en un tema, en lo largo del taller se desarrollara un pokedex el cual cumplirá con los siguiente requerimientos.

  1. Listara los primeros 150 pokemons.
  2. Facilitara el filtrado de los pokemons por tipo.
  3. Mostrará la información de un pokémon seleccionado.
  4. Facilitara la búsqueda de un pokémon por nombre.
  5. Podremos votar por nuestro pokémon favorito.

Para cubrir los requerimientos deseados se utilizarán los siguientes juguetes.

  1. JavaScript con sus nuevas especificaciones (EcmaScript 6).
  2. Node JS.
  3. Como servidor utilizaremos express.
  4. Para el armado de los componentes utilizaremos ReactJS.
  5. Construiremos nuestra API que consultara un JSON , de contar con tiempo usaremos Mongo.
  6. GitHub, donde colocaremos el código que vamos realizando.
Nota: Para el manejo de estilos de nuestro pokédex utilizaremos bootstrap en conjunto bootswatch(temas de para bootstrap), cabe mencionar que no utilizaremos jQuery para nada.

Tomando en cuenta todo lo anterior y si jugamos de manera correcta el resultado será:

Vista previa del pokédex Fig-01

Después de una breve introducción, iniciaremos con la configuracion basica de nuestro ambiente de trabajo.

Instalando Node JS

Primero tenemos que entender que Node JS no es un servidor tampoco es considerado como un Framework, pero la comunidad lo considera como una librería y entorno de ejecución de E/S dirigida por eventos y por lo tanto asíncrona que es ejecutada sobre el intérprete de JS V8 desarrollado por google el cual es utilizado por su navegador chrome, dicho motor permite a Node JS proporciona un entorno de ejecución del lado del servidor que compila y ejecuta javascript a velocidades increíbles, lo que se puede traducir en menor coste de infraestructura un ejemplo claro de esto es linkedin el cual pasó de tener 15 servidores a 4.

Framework : Es mucho más que una librería. Impone algunas condiciones a nuestra aplicación e incluso puede definir su arquitectura. Es un marco que define las reglas del juego a las que nos tenemos que atener.
Librería : Proporciona funciones y métodos muy concretos para simplificar tareas complejas, a diferencia de un framework nuestra aplicación no tiene que adaptarse ya que la librería la adaptamos a nuestras necesidades.
simplificando mucho podríamos decir que nuestro código llama a las funciones de una librería mientras que un framework llamará a nuestro código, que sería algo así como piezas integradas en su estructura.

¿Que resuelve node? : La meta número uno declarada de Node JS es “proporcionar una manera fácil para construir programas de red escalables”.
Lo que node definitivamente no es : Node JS es un programa de servidor. Sin embargo, el producto base de Node definitivamente No es como Apache o Tomcat.(Fuente: sitio oficial de node).

Considerando lo dicho anteriormente podríamos resumir que Node JS es una manera de ejecutar JS del lado del servidor si así es del lado del servidor y esto se logra gracias al motor V8, es importante mencionar que la definición manejada puede que no diga mucho, si quieres aprender más sobre el tema te recomiendo el articulo siguiente.

Dependiendo del sistema operativo la instalación de Node JS puede variar considerando esto mostraremos la instalación en:

Windows y Mac: La instalación es tan sencilla que solo basta con acceder al sitio de Node JS y descargar el instalador.

Linux : Para este caso todo se puede realizar desde la consola utilizando los siguientes comandos.

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs
Nota: Durante el desarrollo del pokédex se utiliza la versión 6 de Node JS.

Hasta este punto ya tenemos una idea básica de lo que es Node JS ya contamos con la instalación, por lo que podremos daremos inicio a la construcción del pokédex.

1.- Abre la consola de tu Sistema Operativo.

2.- Crea una carpeta en la que estará nuestro pokédex.

mkdir pokedex

3.- Entra a la carpeta creada.

cd pokedex

4.- Crear nuestro package.json.

package.json : Archivo que contiene metadatos relevantes para el proyecto como pueden ser las dependencias del proyecto, nombre, version, etc …
npm init

Al ejecutar el comando anterior se nos solicitarán ciertos datos(Algunos son opcionales y en algunos casos ya tiene valores por defecto) los cuales conformarán el cuerpo base de nuestro package.json.

name : Nombre de nuestro aplicativo por default toma el nombre de la carpeta(el nombre no puede tener espacios en blanco).
version : Numero de version de nuestro aplicativo por default pondrá 1.0.0.
description : Breve introducción de la funcionalidad del aplicativo.
main : Archivo principal del aplicativo por default pone index.js.
scripts : En este apartado pondremos colocar tareas (Esto lo veremos más adelante).
repository : Url de nuestro repositorio en git.
keywords : Palabras que facilitaran la búsqueda en npm(manejador de paquetes en node), las palabras que se coloquen en este apartado no tienen que llevar espacios en blanco, todas las pablras tiene que estar separadas por comas.
author : Nombre del autor.
license : Tipo de licencia con la que cuenta nuestro aplicativo por defecto pone ISC( Internet Systems Consortium).
bugs : Url en la que se podremos reportar problemas con la aplicación (Esta opcion se genera al brindar la url de nuestro repositorio).
homepage : Url de la pagina principal (Esta opcion se genera al brindar la url de nuestro repositorio).

👍 Al terminar de brindar la data solicitada en nuestra carpeta de proyecto podremos ver un archivo como este.

Package.json del taller Fig-02.

Hasta este punto solo tenemos lo básico para iniciar nuestro taller posiblemente muchos consideren que vamos algo lento, pero tomen en cuenta que este taller tambien está dirigido para personas que están iniciando con la magia de JS 😅.

En siguiente capitulo

Iniciaremos con la instalación de las dependencias y con la configuración de nuestro servidor, recuerden comentarios y sugerencias por:

  1. - sistema de comentarios de medium
  2. Via correo electronico jorge.mendez.ortega@gmail.com


Bonus 😸

Al contar ya con la instalación de node y validar que realmente podemos ejecutar js generemos un ejemplo que imprima las tablas de multiplicar.

  1. Crearemos un archivo llamado “TablasDeMultiplicar”.
  2. Colocaremos el siguiente código dentro de nuestro poryecto.
Ejemplo para comprobar que podemos correr js desde la consola. Fig-03

3. Desde consola podemos ejecutar el comando siguiente.

node TablasDeMultiplicar.js
//podemos no poner la extensión
node TablasDeMultiplicar.js
Nota: el ejemplo anterior solo es con fines didácticos.

Siguiente ▶️