Google Lighthouse

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:
“Module not found: Can’t 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’t resolve ‘isomorphic-fetch’ in ‘D:\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`)

h