Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Google Lighthouse

4/16
Recursos

Es una herramienta oficial de Google que viene con Chrome, con la cual podemos hacer un diagn贸stico a una Web App. Estos diagn贸sticos se centran en Performance y Accesibilidad, pero tambi茅n tiene una herramienta para diagnosticar si nuestra Web App se considera una PWA o no y que pasos debemos de tomar para que lo sea.

Lighthouse no sustituye hacer pruebas con un dispositivo m贸vil real, siempre realiza pruebas en un dispositivo m贸vil.

El diagnostico de Performance nos muestra dos de los conceptos m谩s importantes en performance: First meaningful Paint y First interactive.

First meaningful Paint o primer pintado significativo, esto se帽ala cuanto tiempo tardo el navegador en renderizar la aplicaci贸n de una forma que tenga sentido. Generalmente queremos que este situado entre 1 y 2 segundos.

First interactive o primera interacci贸n, se帽ala el tiempo cuando ya se carg贸 React, inicializo la aplicaci贸n y que podamos correr comandos dentro de la aplicaci贸n.

驴C贸mo bajamos estos tiempos?

Para bajar el Time To First Meaningful Paint podemos hacer Server Side Rendering, reducir el tama帽o de nuestro HTML y CSS o simplemente teniendo servidores m谩s r谩pidos.
El Time To Interactive tiene mucho que ver con el framework que estemos utilizando, usualmente queremos que tarde menos de 5 segundos.

Aportes 25

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

La API se actualizo ahora hay que cambiar baseUrl y las peticiones fetch():
.

const baseUrl = "https://www.themealdb.com/api/json/v1/1";

async function getLatest() {
  const request = await fetch(`${baseUrl}/search.php?f=b`);
  const data = await request.json()
  const recipes = data.meals.map((m) => normalizeMeal(m))

  return recipes
}

async function getRecipe(recipeId) {
  const request = await fetch(`${baseUrl}/lookup.php?i=${recipeId}`)
  const data = await request.json()
  if( ! data.meals ) return null
  const recipe = normalizeMeal(data.meals.shift())

  return recipe
}

Si se bajaron el c贸digo fuente de la anterior clase y les dio problemas en correrlo yo realice los siguientes pasos:
Instalar isomorphic-fetch que se lo utiliza en el proyecto pero en el package.json no habia.

npm i isomorphic-fetch

La API se actualizo el 煤nico cambio que hay que hacer es en el archivo mealdb-api.js es cambiar la version del API a v2

const baseUrl = 'https://www.themealdb.com/api/json/v2/1'

20-04-2022.
1-Descargar proyecto en recursos
2-Abrir proyecto en VScode, all铆 abrir terminal y ejecutar:
$ npm i isomorphic-fetch

3-En el archivo mealdb-api.js, cambiar la baseUrl por:
baseUrl = 鈥https://www.themealdb.com/api/json/v1/1

4- En el mismo archivo cambiar la liner fetch, quedando as铆:
const request = await fetch(${baseUrl}/search.php?s=b)

!! funciona para seguir el curso

Miren la diferencia entre hacer el lighthouse en el computador

ha hacerlo en el celular

Hola Devs:
-Nueva baseUrl = https://www.themealdb.com/api/json/v1/1
-Nueva url en el fetch = ${baseUrl}/search.php?s=b
Recuerden, #NuncaParesDeAprender 馃挌

Disculpen mi ignorancia, descargu茅 el repo, abr铆 la consola, ubiqu茅 la carpeta del proyecto y ejecut茅 npm run dev. Me arroj贸 este error

"react-scripts" no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! platzi-recetas@0.1.0 dev: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the platzi-recetas@0.1.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?```

La api solo funciona para patreons al parecer

muchachos asi quedo el archivo que realiza las llamadas a la API de themealdb

// import 'isomorphic-fetch'

const baseUrl = 'https://www.themealdb.com/api/json/v1/1'

export default {
  getLatest,
  getRecipe
}

async function getLatest() {
  const request = await fetch(`${baseUrl}/search.php?f=b`)
  const data = await request.json()
  const recipes = data.meals.map((m) => normalizeMeal(m))

  return recipes
}

async function getRecipe(recipeId) {
  const request = await fetch(`${baseUrl}/lookup.php?i=${recipeId}`)
  const data = await request.json()
  if( ! data.meals ) return null
  const recipe = normalizeMeal(data.meals.shift())

  return recipe
}

function normalizeMeal(meal) {
  const newMeal = {}

  newMeal.id = meal.idMeal
  newMeal.name = meal.strMeal
  newMeal.category = meal.strCategory
  newMeal.origin = meal.strArea
  newMeal.instructions = meal.strInstructions.split('\n').filter((i) => i.trim() !== '')
  newMeal.thumbnail = meal.strMealThumb
  newMeal.tags = meal.strTags ? meal.strTags.split(',') : []
  newMeal.youtube = meal.strYoutube
  newMeal.ingredients = []
  newMeal.url = meal.strSource
  newMeal.dateModified = meal.dateModified

  for( let i=1; i<=20; i++ ) {
    if( meal[`strIngredient${i}`] !== '' && meal[`strMeasure${i}`] !== '' ) {
      newMeal.ingredients.push({
        ingredient: meal[`strIngredient${i}`],
        measure: meal[`strMeasure${i}`]
      })
    }
  }

  return newMeal
}


Clon茅 el proyecto, instal茅 las dependencias, luego hice npm run dev, y la p谩gina s贸lo me muestra el t铆tulo, intenta traer las recetas pero no lo logra.

Al inspeccionar p谩gina, voy a la consola y me muestra
SyntaxError: Unexpected token < in JSON at position 0 __stack_frame_overlay_proxy_console__ @ index.js:2178

En la actualidad no puedo consumir la API, por lo que voy a hacerla de otra tem谩tica, aqu铆 dejo algunas Apis que ustedes pueden consumir tambi茅n:
https://profile.es/blog/apis-front-end/

Consejos para mejorar las m茅tricas del Google LightHouse

En el curso de devtools ense帽an a como testear un celular conectado al computador por si quiere saben como hacerlo,
y ademas cuando corren el comando dev les aparece la url de local y de network con el de network pueden escribirlo en el celular y eso le abrira la aplicacion en el navegador

Actualmente para hacer algunas consultas a la api, hay que pagar por patreon, por lo que el codigo actual no funcionara.

Este es la api: https://www.themealdb.com/api.php

Alli pueden ver las peticiones que pueden hacer

Lo estoy haciendo con un proyecto personal y el First Meaningful Paint fue de 12 segundos. 馃幁

Wow 隆Qu茅 interesante herramienta la de Google Lighthouse!

woww que interesante, la verdad estoy realizando este curso en un proyecto personal que tengo y no tenia ni idea de la valioza herramienta que es Google lighthouse. Super espero que las dem谩s clases tambi茅n la pueda poner en practica

No conoc铆a esta herramienta y vaya que me ha sorprendido, con esta clase ya vali贸 la pena el curso. Excelente

Ayudaa鈥 porque cuando corro el comando npm run dev me salta:
鈥淢odule not found: Can鈥檛 resolve 鈥./pages/Home鈥 in '/home/priscila/Projects/Platzi/prueba-clic2ring/platzi-recetas/src鈥?
Les agradeceria

muy buena herramienta

./src/mealdb-api.js
Module not found: Can鈥檛 resolve 鈥榠somorphic-fetch鈥 in 鈥楧:\cursos react\pwa\platzi-recetas\src鈥 buenas compa帽ero que me hizo flata que tendre de mas alguien tiene un git clone completo que mi hizo falta instalar

Cuando le doy click a alguna receta me arroja un error dice que hay un problema

me sale este error: index.js:2178 SyntaxError: Unexpected end of JSON input

La api ahora requiere pagar 2 d贸lares para poder usarla pero pueden cambiar el filtro de b煤squeda por

const request = await fetch(`${baseUrl}/search.php?f=a`)
buenas noches. el lighthouse se me queda analizando y no avanza de la primera parte. se queda pegado en "Lighthouse Is warnning up..."

h