Node Bluuweb - EmilioAG48/test GitHub Wiki

Posible dirección para comprobar: http://localhost:3000/

Curso Node.js, (bluuweb)

Página con teoría:
https://bluuweb.github.io/node/01-fundamentos/#%C2%BFque-es-node-js
En YouTube está curso completo de node:
https://www.youtube.com/watch?v=gXFS4OQ34UI&list=PLPl81lqbj-4IEnmCXEJeEXPepr8gWtsl6&index=5
https://www.youtube.com/watch?v=mG4U9t5nWG8&list=PLPl81lqbj-4IEnmCXEJeEXPepr8gWtsl6&index=2

Video 2

exports, require : importar de otros archivos (js). https://www.youtube.com/watch?v=eyFlEH6cwFQ&list=PLPl81lqbj-4IEnmCXEJeEXPepr8gWtsl6&index=2

Video 3

al instalar node.js, se instaló npm, que contiene muchos paquetes (express).
package.json: Si ejecutamos: npm init -y, Se nos creará un archivo el cual tendrá información sobre nuestro proyecto, un listado de los paquetes que vamos a usar.

Dentro del json:

  • en Scripts se pueden poner rutas para ejecutar.
  • en dependencias irán los paquetes que vayamos instalando.

Todos los paquetes deben tener una página donde el desarrollador explica como utilizar el paquete.

Cuando instala un paquete con npm, puede realizar 2 tipos de instalación:
Local: npm install package-name (se crea la carpeta node_modules)
Local: npm i package-name (version corta)

Desde el terminal.
(ejp: npm i cowsay). en la página nos ha indicado el desarrollador como se hace.
Esta acción instala los paquetes. y en las dependencias del json se ha añadido el (nombre, versión) del paquete que hemos instalado.
Nos indica el desarrollador que debemos hacer un require en el (xxx.js) principal, y tambien un console.log. Al ejecuar en la consola node (nombre del archivo), ahora nos sale dibujada una vaca.
si borramos la carpeta que nos descargó, ejecutamos (npm i) y como tiene el json, sabe los paquetes que tiene que instalar.
para ver el js desde el terminal ...> node app.js, que se llama asi en este ejemplo, y veremos la vaca.

Global: npm install -g
Si lo instalamos de forma global, podemos desde el terminal en cualquier directorio poner (cowsay hola) y la vaca dice hola.

npx: esto ejecuta un paquete de npm sin necesidad de instalarlo de forma global o local. Por ejemplo si ejecutamos en la terminal CMD: npx cowsay "Hola mundo"

video 4. Fundamentos de HTTP.

https://www.youtube.com/watch?v=gXFS4OQ34UI&list=PLPl81lqbj-4IEnmCXEJeEXPepr8gWtsl6&index=5

  • requerimos el http, que node ya lo trae, no hace falta instalar el paquete.
  • Creamos el servidor, a través de una función de flecha con los parámetros ( req res).Requerimiento y Respuesta. Nosotros requerimos y obtenemos una respuesta. (ojo, ahora desde el terminal nosotros somos la respuesta.).
  • creamos un puerto.
  • ponemos el servidor a la escucha por si recibe algo por el puerto. (hacemos un listen con una función de flecha.).
  • si ejecutamos (node app.js) desde la terminal, nos devuelve el contenido del listen.
  • si abrimos el navegador y ponemos (localhost 3000), recibe "escuchando".. que es la respuesta del servidor. Hubo un requerimiento y recibe una respuesta.
    Cada vez que modificamos algo, debemos reiniciar la llamada desde el terminal.(de momento). Para evitar esto instalamos un paquete de forma global, Nodemon.

Nodemon: Esta herramienta se instala a través de npm y nos sirve para estar escuchando cambios en nuestra configuración de node.js y reinicia automáticamente el servidor.

npm i nodemon Desde el terminal para instalarlo.

  • Ahora para utilizar el paquete pondremos : (nodemon app.js). Y de esta forma cualquier modificación en (app.js) será reiniciado automáticamente el servidor, y al actualizar la página web se actualiza. lo hemos hecho dinámico.

Todo este proceso se ha hecho mucho más sencillo con express.

video 5. Introducción a Express

https://www.youtube.com/watch?v=VmH4tPbbDsM&list=PLPl81lqbj-4IEnmCXEJeEXPepr8gWtsl6&index=6
Mediante express hacemos nuestro sitio web dinámico, conectarnos a base de datos.
npm i express: instalaremos primero express desde el terminal.

get: mediante esta función el cliente hace una petición. Es lo que solicitamos mediante el navegador, solicitamos información al servidor, y respondemos con lo que hay dentro del get.

Tenemos los archivos generales de nuestra aplicación que subiremos a un servidor.
Creamos una carpeta public que es donde accederán los usuarios. Allí almacenamos los archivos estáticos (imágenes, vídeos..) y archivos dinámicos.
Para el servicio de archivos estáticos como, por ejemplo, imágenes, archivos CSS y archivos JavaScript, utilizamos la función de middleware incorporado express.static de Express.

  • Cree una carpeta public.
  • app.use(express.static(__dirname + "/public")); (Esto se llama middleware porque ejecutamos la funcion antes de hacer las solicitudes 'get, post..'.

En el ejemplo que esta haciendo el vídeo:

video 6 Template Engines (EJS) con Express

https://www.youtube.com/watch?v=1cHUZQFb4bo&list=PLPl81lqbj-4IEnmCXEJeEXPepr8gWtsl6&index=7

  • Instalar EJS: npm i ejs desde el terminal.
    Crea carpeta view para almacenar archivos EJS para luego trabajar con ellos (express los renderiza para convertirlos en archivos que el navegador pueda leer. HTML,CSS,JS). los ejs el navegador no los lee.

  • <%= titulo %> : estos símbolos con el ( = )nos permiten recibir parámetros (dinámicos) de otros archivos. solo datos puros.

  • <%- include("templates/cabecera__") %> : este símbolo con el (- ) Y ( include ) permite recibir también HTML.

Renderizar y plantillas.

  • bootstrap

Ojo: en el buscador sale versión 5.0 y en el video trabaja con versión 4.5.
https://getbootstrap.com/docs/4.5/getting-started/introduction/

video 7: Navbar Responsive con Bootstrap

https://www.youtube.com/watch?v=a_hdvhq1KBs&list=PLPl81lqbj-4IEnmCXEJeEXPepr8gWtsl6&index=9

el video 8 no lo hacemos.

video 9: Router Express

  • modificar script en package.json y usar: npm run dev , ejecutando así la script que queremos.

cuando vemos app.use, estamos usando middleware

Instalar en visual studio:

  • ejs language support
  • ejs snippets

video 10: conexión a mongoDb
Hasta ahora estábamos trabajando de forma estática con nuestra base de datos.
Vamos a trabajar con mongoDB, que nos permite hacerlo en la nube. Nos registramos en mongoDB
trabajaremos con una base de datos no relacional, aunque también las hay relacionales.
creamos un cluster. instalamos mongoose. nos permite trabajar de forma cómoda en la base de datos. npm install mongoose.
realizamos la conexión a base de datos.

Siempre que nos conectemos a una base de datos necesitaremos: un usuario
una password
una uri.
y una conexión con mongoose.

Creamos la base de datos desde mongodb, y la colección (tabla).
insertamos los primeros documentos: nombre, descripción. (campos).
En database Access creamos el usuario. y esos datos los guardamos en app.js, en las constantes que habíamos creado.
La uri la obtenemos en los clusters.
Rellenamos los datos

video 11: variables de entorno
sirven para ocultar información delicadas (claves, port ...)
configurar las variables: en heroku.
dotenv: librería de terceros, una vez instalado lo configuramos.
creamos directorio (.env),
allí llevamos las variables: user, password, dbname..
para ingnorar este archivo al subirlo a github lo ponermos en (.gitignore).
en heroku rellenamos las variables que queremos proteger (credenciales).
en deploy de heroku vemos las variables.