Forem: Roger

Crear una Ruta en Next JS

Roger — Tue, 07 Jan 2025 22:49:04 +0000

Veremos como agregar rutas a nuestra aplicación.

Dentro de la carpeta app debemos crear otra carpeta con el nombre de nuestra ruta y dentro crear un archivo page.tsx y dentro debemos crear un funcional componente.

export default funcion AboutPage() {
    return (
        <>
            <span className="text-5xl">About Page</span>
        </>
    )
}

Esto es todo lo que necesitamos

En el url debemos escribir el nombre de la carpeta que creamos dentro del app

http://localhost:3000/[nombreDeLaCarpteCreada]
http://localhost:3000/about

Y al acceder veremos el texto que hemos puesto anteriormente

Todas estas rutas están basadas en Server Components

Server Components

El cliente no recibe JavaScript a menos que lo requiera. Básicamente primero es generado de lado del servidor y luego se le manda al cliente.

export default funcion AboutPage() {
    return (
        <>
            <span className="text-5xl">About Page</span>
            <p>{1 + 1}</p> {/* Javascript */}
        </>
    )
}

Esto funciona aun si apagamos el JavaScript en el navegador.

Porque todos los componentes dentro de app son generados del lado del servidor. (Server Components)

Agregar Carpeta

Si intentamos crear una carpeta para englobar nuestras rutas, este cambiara nuestra url:

localhost:3000/general/about

Para quitar esto, en nuestro archivo la carpeta debe ser nombrada como (general) para que Next no la lea como parte de la ruta

localhost:3000/about

Como Crear Un Proyecto Con Next JS

Roger — Tue, 07 Jan 2025 22:47:16 +0000

Documentación Oficial

Introduction | Next.js (nextjs.org)

¿Como iniciar un proyecto de Next.JS?

Creación de Ambiente de trabajo
1. Crear carpeta donde se va a desarrollar la app
En la terminal correr el comando

npx create-next-app [nombre del proyecto]

Pasos para configurar el proyectó
1. Usar TypeScrip (Yes)
2. ESLint (Yes)
3. Tailwind CSS (Yes)
4. src/directory (No)
5. App Router (Yes)
6. Import Alias (No)
Se realizará la instalación.
Correr la App

cd [nombre del proyecto]
npm run dev

💡

3.d

En el punto 3.d se configura (No) solo cuando el proyecto no es muy grande

Si el proyecto es grande se recomienda utilizar (Yes) para esta configuracion

Modificaciones y Turbo Pack

El archivo inicial es el que se encuentra en la carpeta de app/page.tsx

Si queremos ver algunos cambios debemos borrar los datos que tenemos ahí tsx y escribir lo que queremos ver.

export default function Home() {
    return (
    <main className="flex flex-col items-center justify-between p-24">
        <span className="text-5xl">Hola Mundo</span>
    </main>
    )
}

Estos cambios se van refrescando automáticamente

Configurar TURBOPACK

Esto nos permite hacer un refresh de los cambios más rápido, para activarlo debemos dirigirnos al package.json

Y en los scripts agregar --turbo en dev

"scripts": {
    "dev": "next dev --turbo"
}

Ahora en la terminal al correr el npm run dev se ejecutará el modo turbo.

Manipulación de Arrays en JavaScript 😎Part 2

Roger — Sat, 11 Jun 2022 00:35:52 +0000

👋 Hola!, el día de hoy continuaremos con la segunda parte de la sección de Manipulación de Arrays en JavaScript, si no has leído la primer parte puedes dar click aqui. En los cuales vimos los métodos de:

Así que ahora en esta sección veremos los métodos de:

Indicé

Some
Every
Find y FindIndex
Includes

Some

Ahora veremos el metodo de some este método nos permite verificar si algún elemento de un arreglo cumple con una condición.
Este evalúa si almenos uno de los elementos del array cumple con la condición, si no cumple con ninguno devuelve false.

Como puedes ver este metodo a diferencia de map, filter y reduce este no devuelve un nuevo arreglo, sino que nos devuelve un boolen ósea true o false .

Por ejemplo:

const num = [1, 52, 33, 12, 65, 66, 37, 81, 99, 107]

const newNum = num.some(function(value) {
    return value < 5
})

console.log(newNum)

// Output

true

Nos da true debido a que al menos uno de los elementos del array cumple con la condición, en este caso seria el de el numero 1 que es menor a 5. Aunque todos los demás elementos no cumplen con la condición por este 1 nos devuelve true.

Ahora pasemos al código:

Vamos a hacer un arreglo de alumnos, los cuales tendrán las propiedades de nombre, edad, promedio y materia, ejemplo:

const alumnos = [
  {
    nombre: "Juan",
    edad: 20,
    promedio: 2,
    materia: "Fisica",
  },
  {
    nombre: "Esteban",
    edad: 20,
    promedio: 6,
    materia: "Programacion",
  },
  {
    nombre: "Jorge",
    edad: 20,
    promedio: 8,
    materia: "Algebra",
  },
  {
    nombre: "Pedro",
    edad: 18,
    promedio: 5,
    materia: "Matematicas",
  },
  {
    nombre: "Maria",
    edad: 19,
    promedio: 7,
    materia: "Ingles",
  },
  {
    nombre: "Ana",
    edad: 21,
    promedio: 9,
    materia: "Geografia",
  },
  {
    nombre: "Juan",
    edad: 20,
    promedio: 8,
    materia: "Matematicas",
  },

]

Ahora lo que queremos, es saber si existen estudiantes que han reprobado alguna materia (promedio < 6), entonces en lugar de andar comprobando uno por uno vamos a utilizar el método de some de la siguiente forma:

const res = alumnos.some(alumno => alumno.promedio < 6)

console.log('Alumos reprobado? :',res)

Y en nuestra terminal veremos los siguiente:

Alumos reprobado? : true

Como pudes ver no nos retorna un arreglo con los alumnos que han reprobado, si no solo nos dice si existe alguno o no. Como lo vimos anteriormente some solo retorno true o false y no un arreglo con los alumnos que han reprobado.

Ahora si nosotros cambiamos las calificaciones para que todos aprueben nos devuelve false y nos muestra los siguientes:

Alumos reprobado? : false

Porque ninguno cumplió con las condiciones.

Como resumen, lo que hace some es comprobar en cada elemento si existe la condición que nosotros le entregamos, si es asi nos devuelve true y si no es así nos devuelve false.

Ahora como reto para ti es:

Crear un arreglo de objetos que contenga los siguientes datos: nombre, edad, promedio y materia. Y debes comprobar si alguno de los alumnos ha reprobado, si ha reprobado, debes retornar un mensaje que diga El alumno {nombre} ha reprobado {materia}. (Recuerda que puedes utilizar métodos que vimos en las clases anteriores)

Muchas Suerte 🎉, no olvides compartir tu respuesta en los comentarios.

Ir A Indice 👆

Every

En esta parte vamos a ver el método de every que se puede decir que es lo contrario al método some, en este caso every nos permite verificar si todos los elementos de un arreglo cumplen con una condición.

Como su traducción es todos, este método nos permite verificar si todos los elementos del arreglo cumplen con la condición, si no cumplen con ninguno devuelve false.

Por ejemplo veremos la diferencia con el método de some:

const num = [1,2,3,4,5,6,7,8,9,10]

const res1 = num.some(numero => numero % 2 === 0)
const res2 = num.every(numero => numero % 2 === 0)

console.log('Some: ',res1)
console.log('Every: ',res2)

En nuestra terminal veremos lo siguiente:

Some:  true
Every:  false

Como puedes ver el método some nos devuelve true pero every nos devuelve false, porque alguno de los elementos del arreglo no cumplen con la condición.

Ahora pasemos al código con un ejemplo diferente, vamos a tener un arreglo de clientes y tenemos que ver que todos los clientes sean mayores de edad:

const clientes = [
    {
        nombre: 'Juan',
        edad: 30
    },
    {
        nombre: 'Pedro',
        edad: 20
    },
    {
        nombre: 'Maria',
        edad: 25
    },
    {
        nombre: 'Luis',
        edad: 40
    },
    {
        nombre: 'Ana',
        edad: 35
    }
]

Entonces nosotros en ves de comprobar uno por uno si cada cliente es mayor de edad, vamos a utilizar el método de every:


const mayoresDeEdad = clientes.every(cliente => cliente.edad >= 18)
console.log(mayoresDeEdad)

Ahora en nuestra terminal veremos lo siguiente:

true

Ahora supondremos que hay una promoción, y si los clientes tienen el mismo nombre del dueño , entonces les daremos una promoción, para verificar esto, lo haremos de la siguiente manera.

const res = clientes.every(cliente => cliente.nombre === 'Roger')

console.log('Se les da promocion? ', res)

Y en nuestra terminal veremos lo siguiente:

Se les da promoción? :  false

Ahora como reto para ti es:

Crear un arreglo de productos, en el cual debe tener las propiedades de: nombre, precio, descuento y cantidad. Y debes comprobar si todos los productos tienen un descuento, si todos tienen un descuento, debes retornar un mensaje que diga Todos los productos tienen descuento, si algún producto no tiene descuento, entonces debes retornar el nombre del producto que no tiene descuento. (Recuerda que puedes utilizar métodos que vimos en las clases anteriores)

Muchas Suerte 🎉, no olvides compartir tu respuesta en los comentarios.

Ir A Indicé 👆

Find y Find Index

Ahora veremos el método de find este método nos permite poder buscar un elemento dentro de un arreglo. Así que nos puede servir para buscar algún elemento dentro del arreglo. Este nos va a retornar el primer elemento que coincide con la condición que le entregamos. Esto es porque no esta haciendo un filtro, si no esta haciendo una búsqueda.

Por ejemplo:

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const res = nums.find(num => num > 5)
console.log(res)

// Output
6

Ahora para que esto quede mas claro vamos al código, vamos a crear un arreglo de productos, en el cual tendrán las condiciones de: nombre, precio, caducado y disponible. Debemos buscar un producto que este caducado.

const productos = [
    {
        nombre: 'Leche',
        precio: 100,
        caducado: false,
        disponible: true
    },
    {
        nombre: 'Arroz',
        precio: 200,
        caducado: true,
        disponible: true
    },
    {
        nombre: 'Aceite',
        precio: 300,
        caducado: false,
        disponible: true
    },
    {
        nombre: 'Sal',
        precio: 400,
        caducado: false,
        disponible: true
    },
    {
        nombre: 'Galletas',
        precio: 100,
        caducado: true,
        disponible: true
    },
]

Esto lo haremos de la siguiente manera:

const res = productos.find(producto => producto.caducado === true)

console.log('Producto caducado: ', res)

En nuestra terminal veremos lo siguiente:

Producto caducado:  { nombre: 'Arroz', precio: 200, caducado: true, disponible: true }

Pero como puedes ver solo nos paso el primer producto que encontró caducado, pero que pasa si buscamos algo que no existe, en ese caso, nos devuelve un undefined.

findIndex

Lo que hace el método de findIndex es buscar un elemento dentro de un arreglo, pero este método nos va a retornar el índice del elemento que coincide con la condición que le entregamos. A diferencia de find que ese nos retorna todo el elemento.

Por ejemplo:

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const res = nums.findIndex(num => num % 2 === 0)
console.log('Primer numero par: ', res)

Y en nuestra terminal veremos lo siguiente:

Primer numero par:  1

Esto quiere decir que el primer numero par del arreglo se encuentra en la posición 1.

Ahora como reto para ti es:

Como reto para ti es crear un arreglo de empleados, en el cual debe tener las propiedades de: nombre, edad y ventas. Debes hacer una búsqueda del vendedor que mas ventas ha tenido (Recuerda que puedes utilizar métodos que vimos en las clases anteriores)

Muchas Suerte 🎉, no olvides compartir tu respuesta en los comentarios.

Ir A Indicé 👆

Includes

Este método nos va a retornar un booleano, si el elemento que le entregamos esta dentro del arreglo. Si esta dentro del arreglo, entonces retornara true, si no esta dentro del arreglo, entonces retornara false. A diferencia de otros métodos que nos entregan elementos o arreglos, este entrega un booleano.
Por ejemplo:

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const res = nums.includes(10)
console.log('Incluye? :', res)

Si vemos esto en nuestra terminal veremos lo siguiente:

Incluye? : true

Ahora como reto para ti es:

Crear un arreglo el cual contenga los días de la semana, y debes hacer una búsqueda de los días que no sean Lunes, Martes, Miércoles o Jueves.

Muchas Suerte 🎉, no olvides compartir tu respuesta en los comentarios.

Ir A Indice 👆

Si quieres ver mas tutoriales como este puedes entrar a mi perfil y ahí encontraras una gran variedad de tips y tutoriales.👉Tips y Tutoriales..

Manipulación de Arrays en JavaScript 😎Part 1

Roger — Wed, 01 Jun 2022 18:28:06 +0000

Manipulacion de Arrays en JavaScript

👋 Hola, el día de hoy te voy a explicar como manipular arreglos en JavaScript. Veremos varios de los principales conceptos que tu debes conocer para poder manipular arreglos en JavaScript, esto es de mucho beneficio al momento de trabajar con algunas librerías tando del lado del cliente como del servidos. Esta es la primer parte, aquí veremos los siguientes conceptos:

Índice

ForEach
Map
Filter
Reduce

Y muchos mas.
Espero que te guste y te ayude a aprender mas sobre JavaScript. Recuerda que puedes guardar este post para que lo puedas leer en tu futuro, comencemos 🚀.

ForEach

Vamos a iniciar con el primer método, este es forEach, forEach nos permite recorrer un arreglo y ejecutar una función por cada elemento del arreglo. Recuerda que en JavaScript podemos tener un arreglo con diferentes tipos de datos, como números, booleans, objetos, arrays, etc.
Como por ejemplo este arreglo:

[🐥, 🐄, 🥔, 🌽]

Puedes utilizar estos métodos y también utilizar for pero estos métodos que nos da JavaScript son mas eficientes y con una mejor sintaxis. Aquí las diferencias:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
numbers.forEach((number) => console.log(number))
// vs

for (let i = 0; i < numbers.length; i++) {
  const item = numbers[i]
  console.log(item)
}

Como puedes ver estamos haciendo lo mismo para la sintaxis cumbiamba bastante, y se complica mas cuando se deben hacer operaciones mas complejas.

Ahora si pasemos al código, vamos a crear un array de letras, con los elementos que quieras. Primero utilizaremos for para recorrer este array

const letras = ['a', 'b', 'c', 'd']

for (let i = 0; i < letras.length; i++) {
  const item = letras[i]
  console.log(item)
}

Como puedes ver tenemos en total 5 líneas de código, esto mismo se puede hacer de una manera mucho mas fácil con los métodos de array. Vamos a tomer letras y ejecutar .forEach() ahí tenemos una arrow function, es la función que se ejecuta en cada uno de los elementos, y le decimos que queremos en cada uno de los items:

const letras = ['a', 'b', 'c', 'd']

letras.forEach((item) => console.log(item))

Como puedes ver a diferencia de utilizar for ahora hemos hecho exactamente lo mismo, pero con una mejor sintaxis y en tan solo 1 linea de código. El forEach ya nos entrega cada elemento.

Ahora esto quizá lo entiendas mejor llevándolo a la practica es por eso que ahora crearemos un archivo index.html y crearemos una pequeña pagina en la cual pondremos un script y un div:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Metodos de Arrays</title>
  </head>
  <body>
    <div id="app"></div>

    <script></script>
  </body>
</html>

Dentro de nuestro script, vamos a poner unos productos, el fin de esto es renderizarlos utilizando forEach, ahora crearemos los productos:

const productos = [
  {
    nombre: 'Camisa',
    precio: 50,
  },
  {
    nombre: 'Pantalon',
    precio: 100,
  },
  {
    nombre: 'Zapatos',
    precio: 150,
  },
]

Ahora que tenemos los productos, primero debemos seleccionar el div en donde queremos renderizar nuestros productos:

const app = document.getElementById('app')

Recuerda que todo este código lo debes introducir en tu etiqueta script, se tiene que ver algo así:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Metodos de Arrays</title>
  </head>
  <body>
    <div id="app"></div>

    <script>
      const productos = [
        {
          nombre: 'Camisa',
          precio: 50,
        },
        {
          nombre: 'Pantalon',
          precio: 100,
        },
        {
          nombre: 'Zapatos',
          precio: 150,
        },
      ]
      const app = document.getElementById('app')
    </script>
  </body>
</html>

Yo lo estoy poniendo por partes para que sea mas fácil de entender, continuemos.

Ahora vamos a hacer el uso de forEach para recorrer nuestros productos, y luego ejecutar la lógica para introducir los elementos dentro del div:

productos.forEach((producto) => {
  app.innerHTML += `
        <div>
            <h2>${producto.nombre}</h2>
            <p>$${producto.precio}</p>
        </div>
    `
})

Pero de esta manera igual estamos recorriendo objetos, como puedes ver, estamos renderizando el nombre y el precio para que el usuario lo pueda ver. Si ejecutamos nuestro html veremos lo siguiente:

Ya lograste iterar y dar un resultado, utilizando métodos de array.

Ahora como reto para ti es:

Crear un arreglo de productos, los cuales deben tener: nombre, precio, debe indicar si es un producto nuevo o no y si el producto lo han pedido (indicado con un input checkbox).

Muchas Suerte 🎉, no olvides compartir tu respuesta en los comentarios.

Ir A Indice 👆

Map

Ahora aprenderemos map el elemento mas útil para hacer transformaciones, varios lenguajes de programación lo utilizan y también algunos frameworks. El map lo que hace es transformar, el array original en un nuevo array, pero con los elementos transformados.

[🥚, 🐄, 🐥, 🥖]

//Map

[🍟, 🍔, 🍗, 🥪]

Al utilizar map, siempre tenemos el mismo numero de elementos que el array original, si el original contenía 4 elementos el nuevo array también contendrá 4 elementos.

Vamos al código, vamos a crear un array de números, y lo que queremos es que nos devuelva un array con los números multiplicados por 2 pero que este se guarde en otra constante:

const numeros = [1, 2, 3, 4, 5]

const numeroMultiplicados = numeros.map((numero) => numero * 2)

Si hacemos un console.log() de numeros y otro de numerosMultiplicados veremos que numeros sigue siendo el mismo pero que dentro de numerosMultiplicados tenemos un nuevo array con los numeros multiplicados. Ya que map genera un nuevo array con la transformación.

Ahora veremos un ejemplo dentro de html haciendo lo del ejercicio anterior pero ahora utilizando map:

const app = document.getElementById('app')
const producto = productos.map((producto) => {
  return `
        <div>
            <h2>${producto.nombre}</h2>
            <p>$${producto.precio}</p>
        </div>
    `
})
app.innerHTML = producto.join('')

Map Reloadaed

En pocas palabras map es un método que transforma, pero ahora veremos un poco mas profundo map.

Ahora vamos a utilizar map, en un archivo de .js y tendremos un array de productos, con un nombre, precio y si esta disponible:

const productos = [
    {
        nombre: 'Camisa',
        precio: 50,
        disponible: true,
    },
    {
        nombre: 'Pantalon',
        precio: 100,
        disponible: true,
    },
    {
        nombre: 'Zapatos',
        precio: 150,
        disponible: false,
    },
    {
        nombre: 'Bicicleta',
        precio: 200,
        disponible: true,
    },
]

Ahora map puede funcionar para transformar, podemos tomar todos los objetos de un array para transformarlos en lo que quiera.

Vamos a suponer que de este array solo quiero saber el precio, entonces si hacemos un map:

productos.map((producto) => producto.precio)

Ya no tenemos un array de objetos, ahora tenemos un array de números, y puedes hacer un console.log() para verlo:

console.log('Productos: ', productos)
precios = productos.map(producto => producto.precio)
console.log('Precios: ',precios)

Veremos algo como esto:

Productos:  [
  { nombre: 'Camisa', precio: 50, disponible: true },
  { nombre: 'Pantalon', precio: 100, disponible: true },
  { nombre: 'Zapatos', precio: 150, disponible: false },
  { nombre: 'Bicicleta', precio: 200, disponible: true }
]
Precios:  [ 50, 100, 150, 200 ]

Como vemos sigue cumpliendo con lo visto, nos devolvió un array con 4 elementos, porque en el array de productos tenemos 4 objetos.

Esto nos puede para limpiar datos o para filtrar datos, sirve para seleccionar datos de un array.

Ahora que pasa si lo que queremos es agregar un elemento el objeto, tenemos nombre, precio y disponible pero queremos agregar una propiedad que nos muestre el IVA del precio tomando en cuenta que el IVA es del 16% este 16% se debe agregar al precio original.

Pero no queremos transformar el array original, solo agregar un atributo sin modificar le array original. Esto si lo hacemos de la siguiente manera:

const precioIva = productos.map((producto) => {
  producto.iva = producto.precio * 0.16 + producto.precio
  return producto
})

console.log('Precios con IVA: ', precioIva)

Vamos a ver el si se agrego el atributo a los objetos, pero igual queremos ver que el array original no se modifico:

console.log('Original: ', productos)
console.log('Precios con IVA: ', precioIva)

Si vemos esto en la consola nos aparece lo siguiente:

Original:  [
  { nombre: 'Camisa', precio: 50, disponible: true, iva: 58 },
  { nombre: 'Pantalon', precio: 100, disponible: true, iva: 116 },
  { nombre: 'Zapatos', precio: 150, disponible: false, iva: 174 },
  { nombre: 'Bicicleta', precio: 200, disponible: true, iva: 232 }
]
Precios con IVA:  [
  { nombre: 'Camisa', precio: 50, disponible: true, iva: 58 },
  { nombre: 'Pantalon', precio: 100, disponible: true, iva: 116 },
  { nombre: 'Zapatos', precio: 150, disponible: false, iva: 174 },
  { nombre: 'Bicicleta', precio: 200, disponible: true, iva: 232 }
]

Como vemos el original se ha cambiado, y se supone que map no es mutable, lo que sucede es que estamos creando una copia pero esta esta copiando una referencia de memoria y aquí cometemos ese error, debemos tener mucho cuidado con esto. Esto es muy común que pase con objetos ya que estos tienen referencia en memoria.

Para que esto no suceda en ves de retornar y hacer la modificación en el objeto vamos a asegurarnos de generar un nuevo objeto, vamos a utilizar el spred operator que nos entrega ECMAScript 6, esto se copia sin la referencia de memoria, y luego agregamos el valor que queremos agregar:

const precioIva = productos.map((producto) => {
  iva = producto.precio * 0.16 + producto.precio
  return {
    ...producto,
    iva 
  }
})

Ahora si vemos el console.log nos aparecerá esto:

Original:  [
  { nombre: 'Camisa', precio: 50, disponible: true },
  { nombre: 'Pantalon', precio: 100, disponible: true },
  { nombre: 'Zapatos', precio: 150, disponible: false },
  { nombre: 'Bicicleta', precio: 200, disponible: true }
]
Precios con IVA:  [
  { nombre: 'Camisa', precio: 50, disponible: true, iva: 58 },
  { nombre: 'Pantalon', precio: 100, disponible: true, iva: 116 },
  { nombre: 'Zapatos', precio: 150, disponible: false, iva: 174 },
  { nombre: 'Bicicleta', precio: 200, disponible: true, iva: 232 }
]

Como podemos ver esta ves no se modifico el arreglo original, esta es la forma en que debes trabajar con objetos y map a la ves, sin copiar la referencia de memoria.

Ahora como reto para ti es:

Crear un array con objetos cada objeto debe tener las siguientes propiedades: nombre, apellido, correo y sueldo. Tu tarea es agregar una nueva propiedad que nos muestre el sueldo en dólares, sin que se modifique el array original.

Muchas Suerte 🎉, no olvides compartir tu respuesta en los comentarios.

Ir A Indice 👆

Filter

Ahora veremos otro concepto, que es el de filter, este es una función que nos permite filtrar datos de un array, y nos devuelve un array con los datos que cumplen con la condición van a ser parte del nuevo array, por lo tanto filter es inmutable. Puede que el array ya lo halla transformado map, pero que ahora nosotros vamos a quererlo filtrar con base a una condición. por ejemplo:

[🍕,🍔,🍟,🌭,🍿,🥞,🧇,🍳,🥚,🥯,🍖,🍗,🥩,🍚]
// Filtrando la comida de la lista por comida vegana
[🍟,🍿,🍚]

Este ejemplo nos muestra la comida que cumple con la condición de ser vegana y nos va a devolver un nuevo array, filter es un método que puede retornar hasta 0 elementos si es que ningún elemento cumple con la condición, pero nunca va a retornar mas elementos que el array original, a diferencia con map que retorna la misma longitud del array original.

Vamos a a ver esto en código para que quede mas claro, con un ejemplo con un array de números:

const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50]

Ahora que pasa si queremos filtrar los números que son pares, para esto debemos utilizar el método filter, y la condición que queremos cumplir es que el numero sea par, para ver que un numero par su modulo % debe ser igual a 0, por lo tanto debemos hacer lo siguiente:

const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50]

const pares = numeros.filter(numero => numero % 2 === 0)
console.log('Numeros Pares: ', pares)

Si vemos el resultado en la consola, podremos ver lo siguiente:

Numeros Pares:  [
   2,  4,  6,  8, 10, 12, 14, 16,
  18, 20, 22, 24, 26, 28, 30, 32,
  34, 36, 38, 40, 42, 44, 46, 48,
  50
]

Ahora vamos a otro ejemplo, ahora crearemos un array con nombres de personas, y queremos filtrar los nombres que empiezan con la letra A, para esto debemos hacer lo siguiente:

const nombres = ['Luis', 'Alan', 'Gerardo', 'Angel', 'Luisa', 'Sofia', 'Renata', 'Camila', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', ]

De este arreglo solo vamos a querer los nombres que comiencen con la letra 'A', así que utilizaremos un filter para filtrar los nombres que comiencen con la letra 'A' y lo guardaremos en una nueva constante:

const nombresA = nombres.filter(nombre => nombre.charAt(0) === 'A')
console.log('Nombres que empiezan con A: ', nombresA)

Si vemos esto en nuestra consola veremos lo siguiente:

Nombres que empiezan con A:  [
  'Alan', 'Angel', 'Ana',
  'Ana',  'Ana',   'Ana',
  'Ana',  'Ana',   'Ana',
  'Ana',  'Ana',   'Ana',
  'Ana',  'Ana'
]

Y este no modifica el array original, si hacemos un console.log() de los nombres originales y los filtrados veremos lo siguiente:

Original [
  'Luis',   'Alan',      'Gerardo', 'Angel',     'Luisa',  'Sofia',
  'Renata', 'Camila',    'Juan',    'Javier',    'Daniel', 'Jorge',
  'Miguel', 'Daniela',   'Sandra',  'Ana',       'Maria',  'Sebastian',
  'Juan',   'Javier',    'Daniel',  'Jorge',     'Miguel', 'Daniela',
  'Sandra', 'Ana',       'Maria',   'Sebastian', 'Juan',   'Javier',
  'Daniel', 'Jorge',     'Miguel',  'Daniela',   'Sandra', 'Ana',
  'Maria',  'Sebastian', 'Juan',    'Javier',    'Daniel', 'Jorge',
  'Miguel', 'Daniela',   'Sandra',  'Ana',       'Maria',  'Sebastian',
  'Juan',   'Javier',    'Daniel',  'Jorge',     'Miguel', 'Daniela',
  'Sandra', 'Ana',       'Maria',   'Sebastian', 'Juan',   'Javier',
  'Daniel', 'Jorge',     'Miguel',  'Daniela',   'Sandra', 'Ana',
  'Maria',  'Sebastian', 'Juan',    'Javier',    'Daniel', 'Jorge',
  'Miguel', 'Daniela',   'Sandra',  'Ana',       'Maria',  'Sebastian',
  'Juan',   'Javier',    'Daniel',  'Jorge',     'Miguel', 'Daniela',
  'Sandra', 'Ana',       'Maria',   'Sebastian', 'Juan',   'Javier',
  'Daniel', 'Jorge',     'Miguel',  'Daniela',   'Sandra', 'Ana',
  'Maria',  'Sebastian', 'Juan',    'Javier',
  ... 30 more items
]
Nombres que empiezan con A:  [
  'Alan', 'Angel', 'Ana',
  'Ana',  'Ana',   'Ana',
  'Ana',  'Ana',   'Ana',
  'Ana',  'Ana',   'Ana',
  'Ana',  'Ana'
]

Esto quiere decir que nuestro array original no se modifico.

En filter, podemos poner condiciones mas complejas, para esto vamos a utilizar el array de productos que utilizamos en map:

const productos = [
  {
    nombre: 'Camisa',
    precio: 50,
    disponible: true,
  },
  {
    nombre: 'Pantalon',
    precio: 100,
    disponible: true,
  },
  {
    nombre: 'Zapatos',
    precio: 150,
    disponible: false,
  },
  {
    nombre: 'Bicicleta',
    precio: 200,
    disponible: true,
  },
  {
    nombre: 'Mochila',
    precio: 250,
    disponible: false,
  },
  {
    nombre: 'Celular',
    precio: 300,
    disponible: true,
  },
  {
    nombre: 'Tablet',
    precio: 350,
    disponible: false,
  }
]

Y ahora queremos hacer un filtro, de todos los productos que están disponibles, en este caso tenemos 4, debemos hacer lo siguiente:

const disponible = productos.filter(producto => producto.disponible)

Solo ponemos producto.disponible porque esa propiedad ya es un boleano, si es true entonces el producto esta disponible, si es false entonces no esta disponible.

Si vemos esto en la consola nos aparece lo siguiente:

Productos disponibles:  [
  { nombre: 'Camisa', precio: 50, disponible: true },
  { nombre: 'Pantalon', precio: 100, disponible: true },
  { nombre: 'Bicicleta', precio: 200, disponible: true },
  { nombre: 'Celular', precio: 300, disponible: true }
]

Ahora haremos algo mas complejo, queremos ver los productos que estén disponibles, pero que aparte tengan un precio mayor a 250, esto lo podemos hacer de la siguiente forma:

const disponible = productos.filter(producto => producto.disponible && producto.precio > 250)

Si vemos esto en la consola veremos lo siguiente:

Productos disponibles y mayor a $250:  [ { nombre: 'Celular', precio: 300, disponible: true } ]

En este caso solo tenemos 1 elemento que cumple con eso.

Y podemos hacer cosas aun mas complejas, pero siempre nos devuelve un array que cumpla con los elementos de la condición.

Ahora haremos algo mas complejo, vamos a hacer un buscador, para que nosotros introduzcamos una palabra o un nombre y este nos devuelva un array con los productos que tengan esa palabra o nombre, esto lo haremos de la siguiente forma:

const buscar = query => {
  return productos.filter(producto => {
    return producto.nombre.includes(query)
  })
}

console.log('Buscador: ',buscar('C'))

En este caso estamos buscando los productos que contienen la letra C, y nos devuelve un array con los productos que cumplen con eso. En nuestra consola veremos algo como esto:

Buscador:  [
  { nombre: 'Camisa', precio: 50, disponible: true },
  { nombre: 'Celular', precio: 300, disponible: true }
]

Pero como puedes ver nos devuelve los que contiene la letra 'C' mayúscula, y no todos los que contiene la letra 'c'. Para esto debemos mejorar nuestro buscador de la siguiente forma:

const buscar = query => {
  return productos.filter(producto => {
    return producto.nombre.toLowerCase().includes(query.toLowerCase())
  })
}

console.log('Buscador: ',buscar('c'))

Si ahora vemos esto en la consola nos aparece lo siguiente:

Buscador:  [
  { nombre: 'Camisa', precio: 50, disponible: true },
  { nombre: 'Bicicleta', precio: 200, disponible: true },
  { nombre: 'Mochila', precio: 250, disponible: false },
  { nombre: 'Celular', precio: 300, disponible: true }
]

Lo que hicimos es que todos los nombres los pasamos a letras minúsculas, y luego le decimos que debe incluir la letra que le pasamos, pero esta letra igual la pasamos a minúscula, para que todos los nombres estén en minúscula y pueda coincidir con la búsqueda. De esta forma no afecta como introduzcamos la letra a buscar.

Así que para terminar recuerda que filter sirve para filtrar la información por medio de una condición.

Ahora como reto para ti es:

Crear un arreglo de productos que tenga las siguientes propiedades vendedor, producto, precio, vendido. Debes crear un buscador que busque el vendedor que ha vendido el producto que le pasemos por parámetro, y debes hacer una validación del buscador, si un producto no ha sido vendido o si ese producto no existe.

Muchas Suerte 🎉, no olvides compartir tu respuesta en los comentarios.

Ir A Indice 👆

Reduce

Ahora veremos reduce, es un método que contienen los arreglos en JavaScript, y nos permite ejecutar funciones reducer una función de reducer, recibe 2 argumentos:

El primero es un valor que esta siendo acumulado.
El segundo es el valor que se esta iterando del arreglo.

La función debe devolver el nuevo elemento que ese va a estar acumulando. Nos permite no solo reducciones si no mas operaciones bastantes útiles. Veremos algunos ejemplos:

const reducer = (acumulador, valorActual) => nuevoAcumulador

El nuevoAcumulador en la siguiente iteración tomo el argumento de acumulador, y así hasta que lleguemos al final del arreglo.

const reducido = [].reduce((acc, el) => acc + el, 0)

Como vemos estamos ejecutando la función en un arreglo vacío, este recibe 2 argumentos, el primero es el reducer (acc, el) => acc + el, y el segundo es el valor inicial que va a tener el acumulador cuando comience la iteración, en este caso es 0. Este reducer devuelve la suma del acumulador y el elemento que esta iterando.

Ahora vamos a darle unos valores al arreglo y ver lo que nos devuelve en la consola:

const reducido = [1, 2].reduce((acc, el) => acc + el, 0)
console.log(reducido)

En la consola nos devuelve el valor de:

Para ver esto de una mejor forma podemos hacerlo de la siguiente forma:

const reducido = [1, 2].reduce((acc, el) => {
  console.log(`Acumulador: ${acc}, Elemento: ${el}, Suma: ${acc + el}`);
  return acc + el;
}, 0)
console.log('Resultado: ', reducido)

Y en la consola veríamos lo siguiente:

Acumulador: 0, Elemento: 1, Suma: 1
Acumulador: 1, Elemento: 2, Suma: 3
Resultado:  3

Ahora veremos este ejemplo con mas números:

const numero = [1, 2, 3, 4, 5]
const resultado = numero.reduce((acc,el) => {
    console.log(`Acumulador: ${acc}, Elemento: ${el}, Suma: ${acc + el}`)
    return acc + el
}, 0)
console.log('Resultado: ', resultado)

Y en nuestra consola veremos lo siguiente:

Acumulador: 0, Elemento: 1, Suma: 1
Acumulador: 1, Elemento: 2, Suma: 3
Acumulador: 3, Elemento: 3, Suma: 6
Acumulador: 6, Elemento: 4, Suma: 10
Acumulador: 10, Elemento: 5, Suma: 15
Resultado:  15

Esto nos puede servir para hacer la suma de todos los elementos de un arreglo.

Indexar objetos

Ahora, iremos al código, veremos un ejemplo con un arreglo de autos, tendremos, el nombre, el año y el color:

const autos = [
  { nombre: 'Mustang', año: 2015, color: 'Azul' },
  { nombre: 'Camaro', año: 2018, color: 'Naranja' },
  { nombre: 'Challenger', año: 2017, color: 'Negro' },
  { nombre: 'Ferrari', año: 2019, color: 'Rojo' },
  { nombre: 'Lamborghini', año: 2015, color: 'Amarillo' },
]

Cuando tenemos un arreglo gigante de: 10k elementos, 100k elementos, 1millon de elementos, y queremos ir a buscar un elemento en particular del arreglo, podemos utilizar find, si lo llamamos una ves no tendremos ningún problema pero si lo llamamos varias veces, podemos destruir el performance de nuestra aplicación.

Lo que vamos a hacer es tomar este arreglo de autos y lo vamos a indexar:

const indexed = autos.reduce((acc, el) => ({
  ...acc,
  [el.nombre]: el,
}),{})

console.log(indexed)

Si vemos en la consola nos aparecerá lo siguiente:

{
  Mustang: { nombre: 'Mustang', 'año': 2015, color: 'Azul' },
  Camaro: { nombre: 'Camaro', 'año': 2018, color: 'Naranja' },
  Challenger: { nombre: 'Challenger', 'año': 2017, color: 'Negro' },
  Ferrari: { nombre: 'Ferrari', 'año': 2019, color: 'Rojo' },
  Lamborghini: { nombre: 'Lamborghini', 'año': 2015, color: 'Amarillo' }
}

Como podemos ver, ahora tenemos un objeto, que esta indexado por los nombres de los autos, así que si después quiero ir a buscar uno de los elementos, puedo utilizar el nombre del auto:

console.log(indexed['Challenger'])

// Output:
{ nombre: 'Challenger', 'año': 2017, color: 'Negro' }

De esta manera podemos indexar los objetos que se encuentran dentro de nuestro arreglo utilizando el método de reduce.

Anidados

Ahora vamos a tomar un arreglo que contiene elementos anidados, esto ocurre cuando queremos hacer mezclas o algún endpoint nos devuelve un arreglo que contiene mas arreglos, ahora lo que queremos hacer es dejar el arreglo que sea plano, sin anidación, esto quiere decir:

anidado = [1, [2, 3, 4], 5, [6, 7, 8]]
noAnidado = [1, 2, 3, 4, 5, 6, 7, 8]

Para transformarlo lo vamos a hacer de la siguiente manera:

const plano = anidado.reduce((acc, el) => acc.concat(el), [])
console.log('Anidados', anidado)
console.log('Plano', plano)

Lo que estamos haciendo es concatenando el acumulador con el elemento, y este comenzara en un arreglo vacío. Si vemos esto en la consola tendremos el siguiente resultado:

Anidados [ 1, [ 2, 3, 4 ], 5, [ 6, 7, 8 ] ]
Plano [
  1, 2, 3, 4,
  5, 6, 7, 8
]

Para ver que esta sucediendo podemos hacer un console.log de los elementos de la siguiente forma:

const plano = anidado.reduce((acc, el) => {
  console.table(`acc: ${acc}, el: ${el}, acc.concat(el): ${acc.concat(el)}`)
  return acc.concat(el)
}, [])

console.log('Resultado: ', plano)

Y en la consola veremos lo siguiente:

acc: , el: 1, acc.concat(el): 1
acc: 1, el: 2,3,4, acc.concat(el): 1,2,3,4
acc: 1,2,3,4, el: 5, acc.concat(el): 1,2,3,4,5
acc: 1,2,3,4,5, el: 6,7,8, acc.concat(el): 1,2,3,4,5,6,7,8
Resultado:  [
  1, 2, 3, 4,
  5, 6, 7, 8
]

Por lo tanto el método de reduce recibe una función llamada reducer la cual recibe como primer argumento el acumulador, y el segundo es el elemento que se esta iterando, y esta función devuelve el nuevo acumulador que se llama como argumento la siguiente forma, el método de reduce recibe como segundo argumento el cual es el valor inicial que tiene el acumulador:

reducer = (acc, el) => nuevoAcc
reduce(reducer, valorInicial)

Ahora como reto para ti es:

Crear un arreglo de videojuegos, y indexarlo por el nombre de los videojuegos, debe tener las propiedades de: nombre, precio, genero. Ejemplo:

const games = [
  { nombre: 'Mario', precio: '$100', genero: 'Accion' },
  { nombre: 'Zelda', precio: '$200', genero: 'Accion' },
  { nombre: 'GTA', precio: '$300', genero: 'Accion' },
  { nombre: 'Fifa', precio: '$400', genero: 'Deporte' },
  { nombre: 'PES', precio: '$500', genero: 'Deporte' },
  { nombre: 'NFS', precio: '$600', genero: 'Deporte' },
]

Tu segunda tarea es agregar una plataforma en una arreglo a cada videojuego, debes solo devolver el nombre del videojuego y la plataforma en un arreglo plano, ejemplo:

const games = [
  {
    nombre: 'Mario',
    precio: '$100',
    genero: 'Accion',
    plataforma: [['Nintendo', 'Nintendo Switch', 'Nintendo 3Ds'], ['Wii', 'Wii U']],
  },
  {
    nombre: 'Zelda',
    precio: '$200',
    genero: 'Accion',
    plataforma: [['Nintendo', 'Nintendo Switch', 'Nintendo 3Ds'], ['Wii', 'Wii U']],
  },
  {
    nombre: 'GTA',
    precio: '$300',
    genero: 'Accion',
    plataforma: [['XBOX360', 'XBOX-ONE'], ['PS3', 'PS4', 'PS5'], 'PC'],
  },
  {
    nombre: 'Fifa',
    precio: '$400',
    genero: 'Deporte',
    plataforma: [['XBOX360', 'XBOX-ONE'], ['PS3', 'PS4', 'PS5'], 'PC'],
  },
]

Muchas Suerte 🎉, no olvides compartir tu respuesta en los comentarios.

Ir A Indice 👆

Aquí termina la Parte 1, en las siguientes partes veremos las demás formas de manipular los arreglos de JavaScript.

Si quieres ver mas tutoriales como este puedes entrar a mi perfil y ahí encontraras una gran variedad de tips y tutoriales.👉Tips y Tutoriales..

Como conectarse a una API (Async, Await, Fetch)

Roger — Fri, 27 May 2022 16:29:02 +0000

👋 El dia de hoy te enseñare como conectarte a una API utilziando, Async, Await y Fetch, para esto vamos a utilizar la api de PokeAPI ya que es una API gratuita.

Iniciando Proyecto

Primero te recomiendo crear un pequeño proyecto con HTML y JavaScript esto es para que podamos visualizar en el navegador las respuestas de la API.
index.html



<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Conectar API</title>
</head>
<body>
  <h1>Como conectar una API</h1>
  <p>Veremos como conectar una API utilizando Async, Await y Fetch</p>

  <script src="main.js"></script>

</body>
</html>

main.js



console.log('Hello World!')

Conectando con la API

Ahora que tenemos los archivos listos, vamos a ir a PokeAPI y copiar el siguiente enlace:
https://pokeapi.co/api/v2/pokemon?limit=20&offset=0

Crearemos una función en nuestro main.js llamada llamandoApi y la llamamos para que se ejecute.



const llamandoApi = () => {
  console.log('Hello World')
}

llamandoApi()

Ahora utilizaremos fecth para llamar la API, y lo guardaremos en una constante llamada response pero como es asíncrono debemos utilizar await, siempre que utilicemos await en nuestra función debe ir async para que esto no nos genere un error, si no colocamos await a una promesa nos aparecerá algo como esto:



Promise {<pending>}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Object

Ahora haremos el llamado a la API:



const llamandoAPI = async () => {
  const respuesta = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20&offset=0')
  console.log(respuesta)
}

llamandoAPI()

Ahora si vas al navegador veras algo como esto:



Response {type: 'cors', url: 'https://pokeapi.co/api/v2/pokemon?limit=20&offset=0', redirected: false, status: 200, ok: true, …}

Ahora para que nosotros podamos validar esta llamada por si tiene algún error utilizaremos try catch



const llamandoAPI = async () => {
  try {
    const respuesta = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20&offset=0')
    console.log(respuesta)
  } catch (error) {
    console.log(error);
  } 
}

llamandoAPI()

Esto nos permitirá validar la respuesta a la API, y esto hará que nuestra aplicación no se rompa.

Accediendo a los datos

Ahora ya que tenemos la respuesta vamos a querer utilizar los datos, esto lo haremos utilizando el método de .json(), este nos permite acceder a la información json que nos devolvió la petición, este método de igual forma es asíncrono así que debe llevar la palabra await esto lo podemos guardar en una variable:



const llamandoAPI = async () => {
  try {
    const respuesta = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20&offset=0')

    const data =  respuesta.json()
    console.log(data)

  } catch (error) {
    console.log(error);
  } 
}

llamandoAPI()

Este objeto ya contiene todas las propiedades de los Pokemon:

Ahora si queremos acceder a algún valor, lo podemos manipular como un objeto cualquiera, en este caso accederemos al nombre del primer valor:



const llamandoAPI = async () => {
  try {
    const respuesta = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20&offset=0')

    const data = await respuesta.json()

    console.log(data.results[0].name)

  } catch (error) {
    console.log(error);
  } 
}

llamandoAPI()

Y en nuestra consola del navegador debemos ver:



bulbasaur

Si puedes ver todo eso del data se ve muy largo, para eso podemos utilizar destructuring del objeto de la siguiente forma:



const {results} = await respuesta.json()
console.log(results)

Y ahora solo veremos los Pokémon.
Si lo que quieres es ver todos los nombres de los Pokémon, podemos utilizar un for que nos muestro los nombres de cada Pokémon:



const llamandoAPI = async () => {
  try {
    const respuesta = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20&offset=0')

    const {results} = await respuesta.json()

    for (let i = 0; i < results.length; i++) {
      console.log(results[i].name)
    }

  } catch (error) {
    console.log(error);
  } 
}

llamandoAPI()

Esto lo podemos mejorar utilizando .map() también como vemos la respuesta nos devuelve 2 valores el de name y el de url así que podemos hacer destructuring de eso de la siguiente forma:



const llamandoAPI = async () => {
  try {
    const respuesta = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20&offset=0')

    const {results} = await respuesta.json()

    const pokemones = results.map(async (pokemon) => {
      const {name, url} = pokemon
      console.log(name, url)
    })

  } catch (error) {
    console.log(error);
  } 
}

llamandoAPI()

Y si lo estabas pensando estas en lo correcto, podemos hacer el llamado a cada uno de los Pokémon utilizando la url que nos pasa con fetch() de la siguiente forma:



const llamandoAPI = async () => {
  try {
    const respuesta = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20&offset=0')

    const {results} = await respuesta.json()

    const pokemones = results.map(async (pokemon) => {
      const {name, url} = pokemon
      const respuestaPokemon = await fetch(url)

    })

  } catch (error) {
    console.log(error);
  } 
}

llamandoAPI()

Y podemos aplicar lo antes visto, convertir la respuesta en un .json() y luego hacer destructuring de los datos que a nosotros nos interesa:



const llamandoAPI = async () => {
  try {
    const respuesta = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20&offset=0')

    const {results} = await respuesta.json()

    const pokemones = results.map(async (pokemon) => {
      const {name, url} = pokemon
      const respuestaPokemon = await fetch(url)
      const { types } = await respuestaPokemon.json()
      console.log(name, types[0].type.name)
    })

  } catch (error) {
    console.log(error);
  } 
}

llamandoAPI()

Si vemos esto en la consola del navegador, tendremos el nombre del Pokémon y su tipo:



bulbasaur grass
ivysaur grass
venusaur grass
charmander fire
charmeleon fire
charizard fire
wartortle water
blastoise water
squirtle water
caterpie bug
metapod bug
butterfree bug
weedle bug
kakuna bug
beedrill bug
pidgey normal
pidgeotto normal
pidgeot normal
rattata normal
raticate normal

Y de esta forma es como podemos hacer un llamado a alguna API.

Status

Como vimos al inicio, si llamamos la respuesta sin convertirla a json nos daba algo como esto:



Response {type: 'cors', url: 'https://pokeapi.co/api/v2/pokemon?limit=20&offset=0', redirected: false, status: 200, ok: true, …}

Como puedes ver ahí tenemos una propiedad llamada status, el status se basa en los Códigos de estado de respuesta HTTP, (te invito a que puedas profundizar mas este tema) esto nos da una pequeña lista:

Respuestas informativas (100–199).
Respuestas satisfactorias (200–299).
Redirecciones (300–399).
Errores de los clientes (400–499).
Errores de los servidores (500–599).

Si te preguntas esto de que me sirve para el llamado de una API pues funciona de mucho ya que puedes revisar el estado y dependiendo de este hacer una u otra cosa.

En este caso podemos ver el status que nos de la API haciendo destructuring o podemos hacerlo por separado ya que podemos utilizar los datos para pasarlos a json:



const data = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20&offset=0')
console.log(data.status)

Si vemos en nuestra consola nos devulve:

Y viendo en en listado tenemos que:

Respuestas satisfactorias (200–299). Entonces podemos hacer una validación, para que siempre y cuando la conexión sea satisfactoria entonces haga lo que le pidamos, y si no que nos devuelva el error. ```js

const response = await fetch(
'https://pokeapi.co/api/v2/pokemon?limit=20&offset=0'
)

if (response.status >= 200 && response.status < 300) {
const data = await response.json()
console.log(data)
}

 De esta forma nosotros validamos que la respuesta primero debe ser satisfactoria para nosotros poder utilizar los datos.

### Si quieres ver mas tutoriales como este puedes entrar a mi perfil y ahí encontraras una gran variedad de tips y tutoriales.👉[**Tips y Tutoriales.**](https://dev.to/rogerdimonte).

¿Qué es una API Rest?

Roger — Thu, 26 May 2022 15:57:06 +0000

👋 Hola el día de hoy en este articulo te enseñare que es una API Rest ya que este concepto es muy importante dentro del desarrollo web.

Conceptos básicos de API Rest

Primero veremos algunos de los principales conceptos básicos como:

Cliente: es el que consume la API Rest.
Servidor: es el que provee la API Rest.
Endpoint: es el punto de entrada de la API Rest.
URI: es la dirección de la API Rest.
Método: es el tipo de petición que se realiza a la API Rest.

La API Rest se encuentra dentro de una nube, un servidor que corre la aplicación, la nube que es nuestra API se debe conectar con algo que almacene la información, en este caso es un servidor de base de datos. Como MongoDB, MySQL, etc.

El cliente se conecta a la API Rest, la api va a la base de datos y busca la información que necesita, se los devuelve a la API Rest, y por ultimo la API Rest devuelve la información al cliente.

El cliente puede ser una aplicación móvil o una aplicación web.

Formas de conectarse

Para poder conectarnos a nuestra API Rest vamos a utilizar una forma estándar que existe en el mercado.

Endpoint	Descripcion
GET/users - /users:id	Es un método que nos permite obtener información. Lista un arreglo con los usuarios. Si utilizamos el id nos devuelve un solo usuario y este es un Objeto.
POST/users - /users	Es un método que nos permite crear un usuario.
PUT/users/:id	Se utiliza para reemplazar un usuario existente.
PATCH/users/:id	Se utiliza para actualizar un usuario existente parcialmente.
DELETE/users/:id	Se utiliza para eliminar un usuario existente.

Sabiendo esto, ya podemos comenzar a crear nuestra API Rest.
Si quieres crear tu primer app de expres puedes revisar mi articulo de Tu primer app de Express.

Si quieres ver mas tutoriales como este puedes entrar a mi perfil y ahí encontraras una gran variedad de tips y tutoriales.👉Tips y Tutoriales..

Introducción a Python 🐍

Roger — Wed, 25 May 2022 18:54:23 +0000

En este articulo aprenderás a utilizar Python, es solo una introducción y aprenderás lo básico para adentrarte en este hermoso lenguaje de programación.
Cabe recalcar que para esto, ya debes tener instalado Python, de igual forma te recomiendo instalar GitBash, para que puedas utilizar los mismos comandos que aquí ocuparemos.
Se veran los siguientes conceptos:

Índice 📖

REPL y Matemática básica ➗
Identación ➡️
Comentarios 💬
Variables 🅰️
Múltiples Variables 🆎
Concatenación ➕

REPL y Matemática básica ➗

Aquí conoceremos el REPL de Python, REPL significa Read Eval Print Loop,para conocer este lenguaje, y veremos las operaciones matemáticas básicas que puedes realizar en Python.

Para entrar el REPL en nuestra terminal debemos escribir Python o Python3 o py, nos abrirá una especie de interfaz de la terminal distinta, este es el REPL donde podemos ingresar instrucciones de Python sencillas. Veras algo como esto:

Aquí es donde puedes anotar las siguientes operaciones matemáticas.

Suma (+)

2 + 10

Resta (-)

5 - 2

Multiplicación (*)

 6 * 8

División (/)

22 / 2

La división retorna un numero del tipo float, esto quiere decir que contiene decimales.

Para salir del REPL, podemos escribir exit() o ctrl + d.

Ir a índice 👆

Identación ➡️

Las indentaciones en Python es una de las partes mas importantes. En este caso vamos a crear una carpeta dentro de workspace llamada introduccion-python.

Dentro crearemos un archivo llamado index.py, accedemos a el con nuestro editor de código.

mkdir workspace
cd workspace
mkdir introduccion-python
cd introduccion-python
touch index.py
nvim index.py (Tu editor de codigo)

Estos son comandos de Unix, para poder ejecutarlos debes trabajar en una terminal que los admita, si estas en MacOS o en Linux no tendrás problema, si estas en Windows te recomiendo instalar GitBash.

La indentacion en Python debe ser de 4 espacios, si esta no tiene los 4 espacios, puede que tu código no funcione, para ver esto, escribiremos el siguiente código:

if (2 > 1):
    print('2 es mayor que 1')

Si corremos esta sencilla app con python3 index.py en nuestra terminal, debemos ver lo siguiente:

2 es mayor que 1

Pero si nosotros este mismo if, lo escribimos sin la indentacion nos dará un error:

if (2 > 1):
print('2 es mayor que 1')

Si ejecutamos esto, nos saldrá un error como este:

Ir a índice 👆

Comentarios 💬

A veces, nosotros vamos a querer dejar notas dentro de nuestro código, para estudiarlas después, o para que un desarrollador las pueda ver en un futuro, para eso tenemos los comentarios. Los comentarios se ponen colocando el símbolo de numeral #, el interprete de Python va a ignorar lo que este, desde el numeral hacia la derecha, en la misma linea, por ejemplo:

#Este es mi primer comentario
texto = 'Hola mundo'
print(texto)

Como vimos anteriormente, el interprete solo ignora lo que este del lado derecho del numeral, esto quiere decir que lo que este del lado izquierdo si lo interpretara.

texto - 'Hola Mundo' #Este es un hola mundo
print(texto)

Al correr este script veremos que la parte izquierda no se a ignorado, solo lo de la derecha.

Si nosotros queremos hacer un comentario mas largo, o de múltiples líneas, podemos utilizar las triples comillas simples ''' o dobles """, esto nos permitirá escribir en mas de una linea, por ejemplo:

'''
Este es
Un comentario
En múltiples líneas
'''
"""
Este es
Un comentario
En múltiples líneas
"""

Ir a índice 👆

Variables 🅰️

Una variable en programación es como una cajita en la cual guardaremos algún dato. Vamos encontrar diferentes tipos de datos, como: Enteros int, flotantes float y strings texto, en secciones mas adelante hablaremos de los tipos de datos.

Las variables se declaran de la siguiente forma, el nombre de la variable debe ir del lado izquierdo del igual, y del lado derecho el valor que le queremos asignar.

amigos = 5
estatura = 1.85
frio = True
nombre = "Roger"

En Python existen diferentes formas de declarar variables, las podemos declarar de la siguiente manera:

mivar = 1
mi_var = 1
miVar = 1 #camelCase
_mi_var = 1

Las variables en Python no se pueden declarar con:
❌ No pueden tener números al inicio.
❌ No pueden tener guiones.
❌ No pueden tener espacios.

1var = 2 # X
var-1 = 2 # X
var 1 = 2 # X

Ir a índice 👆

Múltiples Variables 🆎

En Python existe algo llamado múltiples variables, estas muchas veces nos van a ayudar a resumir el código, un ejemplo puede ser el siguiente:

Sin múltiples variables.

a = 1
b = 1
c = 1

Con multiples variables.

a = b = c = 1

De esta forma tanto a, b, y c tendrían el mismo valor que es el de 1.

También se pueden declarar variables en una sola linea, por ejemplo:

Multiples lineas

a = 1
b = 2
c = 3

Una sola linea

a,b,c = 1,2,3

De esta forma a = 1, b = 2, y c = 3.
Ir a índice 👆

Concatenación ➕

La concatenación, sirve para unir 2 variables o mas utilizando el símbolo de +:

inicio = 'Hola'
final = 'Mundo'

print(inicio + final)

La salida de este print seria:

HolaMundo

Para que no este todo junto debemos dejar un espacio al final de la primera oración o al inicio de la segunda oración o también concatenar un espacio ' '.

# Opción 1
inicio = 'Hola '
final = 'Mundo'

print(inicio + final)

# Opción 2
inicio = 'Hola'
final = ' Mundo'

print(inicio + final)

# Opción 3
inicio = 'Hola'
final = 'Mundo'

print(inicio + ' ' + final)

Ahora nuestra salida será:

Hola Mundo

Ir a índice 👆

Felicitaciones 🎉

Felicidades, has terminado la introducción de Python, te recomiendo seguir estudiando y leyendo los artículos que puedas encontrar, en mi perfil puedes encontrar material relacionado. Ahora estas listo para adentrarte mas a este hermoso mundo de Python, Bye World!.

Si quieres ver mas tutoriales como este puedes entrar a mi perfil y ahí encontraras una gran variedad de tips y tutoriales.👉Tips y Tutoriales

Utilizar 'touch' en PowerShell

Roger — Mon, 23 May 2022 16:22:33 +0000

Si estas tratando de utilizar la PowerShell pero tu vienes de Linux/Unix puede que algunos comandos no los puedas utilizar aquí, como es el caso del comando touch, este comando es para crear archivos dentro de tu terminal, por ejemplo:



touch index.js

Si tu utilizas este comando en tu PowerShell, no va a funcionar, es por eso que hoy te voy a mostrar como poder utilizar este comando en tu PowerShell.

Implementa touch en PowerShell

Primero, debes abrir tu perfil en tu editor de código favorito, en mi caso es nvim.



nvim $PROFILE

Dentro, debemos colocar el siguiente código.



function Touch-File() {
    $fileName = $args[0]
    # Comprobar si el archivo existe
    if (-not(Test-Path $fileName)) {
        # Si no existe, crealo
        New-Item -ItemType File -Name $fileName
    }
    else {
        #Si existe, actualiza el timestamp
        (Get-ChildItem $fileName).LastWriteTime = Get-Date
    }
}

### Creando un alias para touch

# Checar si el alias touch existe
if (-not(Test-Path -Path Alias:Touch)) {
    New-Alias -Name Touch Touch-File -Force
}

Estamos haciendo un par de cosas aquí:

Primero, creamos una función llamada Touch-File
Dentro de la función, capturamos el primer argumento que se le pasa y lo asignamos a la variable $fileName
Después, comprobamos si el archivo existe. Si no es así, creamos un archivo vacío con el nombre de la variable $fileName. Esto se hace usando el cmdlet New-Item, especificando que el objeto que queremos es un archivo y pasando el nombre del archivo
Si el archivo existe, actualizamos su hora de última actualización. Esto se hace configurando la propiedad LastWriteTime del archivo
Finalmente, después de crear la función, creamos un alias para que podamos usar Touch-File o el Touch más corto. Usamos el parámetro –Force para que en caso de que ya exista el alias, lo re-vinculamos

Ten en cuenta que no puedes establecer el alias desde dentro de la función, ya que parece que no puede crear un alias para una función que no se ha analizado y vinculado por completo.

Para probar esto, debes cerrar y abrir una nueva ventana de PowerShell y pruébalo.



touch index.txt

Ahora deberías ver el nuevo archivo creado.

Si quieres ver mas tutoriales como este puedes entrar a mi perfil y ahí encontraras una gran variedad de tips y tutoriales.👉Tips y Tutoriales.

Nodemon & Express

Roger — Wed, 18 May 2022 16:05:51 +0000

👋En este post te voy a mostrar como implementar nodemon a tu aplicación de express, nodemon nos permite refrescar automáticamente nuestra aplicación de express al guardar nuestros cambios.

Si no sabes como crear una aplicación de express puedes ver mi articulo donde te enseño a crear una app de express.
Crea Tu Primer App De Express

Pasos

Primero debes iniciar un proyecto con npm init -y:

{
  "name": "nodemon",
  "version": "1.0.0",
  "description": "Utilizar nodemon para actualizar nuestro proyecto",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Roger",
  "license": "ISC"
}

Ahora debes instalar las siguientes dependencias.

npm i express

Y creamos una pequeña aplicación de express:

const express = require('express')

const app = express()
const PORT = process.env.PORT || 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(PORT, () => {
  console.log('Server is running on port: ' + PORT)
})

Seguido de esto debemos instalar la siguiente dependencia de desarrollo:

npm i -D nodemon

Despues de esto, dentro del package.json, debemos agregar la siguiente linea:

"scripts": {
    "start": "nodemon index.js"
  },

Y en nuestra terminal escribimos:

npm run start

Y veremos algo como esto en nuestra terminal:

> nodemon@1.0.0 start
> nodemon index.js

[nodemon] 2.0.16
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node index.js`
Server is running on port: 3000

Esto quiere decir que todo esta bien.
Ahora abrimos nuestro proyecto en el navegador http://localhost:3000/, y veremos el mensaje de bienvenida Hello World!, ahora cambiaremos el mensaje de bienvenida a Nodemon is watching!.

app.get('/', (req, res) => {
  res.send('Nodemon is watching!')
})

Guardamos nuestro proyecto, refrescamos la pagina, y veremos que cambio automáticamente el mensaje de bienvenida.
Y de esta forma es como puedes refrescar automáticamente tu aplicación de express.

Si quieres ver mas tutoriales como este puedes entrar a mi perfil y ahí encontraras una gran variedad de tips y tutoriales.👉Roger

Tu primer app de Express

Roger — Wed, 18 May 2022 15:35:39 +0000

👋 Te enseñare como crear una aplicación de express de una manera bastante fácil y dinámica.

Inicializando el proyecto.

Aquí podrás crear tu primer aplicación de express, es bastante fácil, y te servirá para futuros proyectos.

Primero deberás crear una carpeta en donde guardaras tu proyecto, le puedes poner el nombre que quieras (api, workspace, proyecto, etc.), después, debes escribir el siguiente comando en tu terminal:

npm init -y

Para esto ya debes tener instalado NodeJS

Y se nos creara un archivo package.json, que se vera de la siguiente manera:

{
  "name": "api",
  "version": "1.0.0",
  "description": "Mi primer app de express",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "roger",
  "license": "ISC"
}

El -y sirve para decirle que quieres aceptar todo lo que se instalara.

Seguido de esto debemos instalar las dependencias que utilizara nuestra aplicación con el comando de:

npm install -S express

Después de hacer la instalación se nos creara una carpeta llamada package-lock.json.

Creando tu primer app de express.

Para comenzar debes crear un archivo en el cual vas a ejecutar tu app, lo puedes nombrar como tu quieras (index.js, app.js, main.js, api.js, etc), y dentro deberás requerir a express de la siguiente forma:

const express = require('express')

require nos sirve para importar un modulo, en este caso el de express. Lo siguiente que necesitamos para inicializar una aplicación en express es que ejecutemos la función de express.

const express = require('express')

const app = express()

Después debemos indicar en que puerto queremos que se ejecute. Lo podemos hacer de 2 formas, declarando el puerto en una variable, o pasarle directamente el puerto, yo te recomiendo la primera pero ambas funcionan, y también le debemos pasar una función que queremos que se ejecute cuando la app este corriendo con éxito.

const express = require('express')

const app = express()
const PORT = 3000

app.listen(PORT, () => {
    console.log('Server is running on port: ' + PORT)
})

Ahora podremos correr nuestra aplicación en la terminal con el comando de:

node index.js (el nombre de tu archivo)

Y veras el siguiente mensaje en tu terminal:

Server is running on port: 3000

Ahora en tu navegador debes ir a la dirección de tu localhost que en este caso debes ir a http://localhost:3000/ y veras un mensaje como de error, pero eso quiere decir que todo esta bien.

Creando tu primer ruta.

Vamos a hacer una app sencilla, en app.get() le debemos pasar un string este string es para indicarle a express cual es la ruta del navegador para que se ejecute la función en el segundo argumento. Esto lo haremos de la siguiente manera:

const express = require('express')
const app = express()
const PORT = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

Cada cambio que realices en la aplicación debes reiniciar tu servidor.

Si ahora entras en tu navegador a http://localhost:3000/ veras el mensaje de Hello World!. Y si te preguntas que significa req y req.

Abreviacion	Significado
req	Request
res	Response

En request(req) es donde viene toda la petición de un cliente. En response(res) es para enviarle cosas al usuario como por ejemplo, el mas común de todos res.send(), con este podemos enviarle cosas al usuario. Debemos reiniciar nuestra APP, cada que hagamos un cambio, para que esto sea automático lo veremos mas adelante.

app.get('/', (req, res) => {
  res.status(200).send('Hola Mundo!')
})

.status() nos permite indicarle al cliente si es que la respuesta tuvo éxito, y si viene un dato acompañado de esta, en este caso, el dato es 'Hola Mundo!'.

Podemos llamar a .status() y a .send() en el mismo app.get().