El proyecto

Cursos Empresas Blog Live Conf Precios

Resumen

Nuestro proyecto será Platzi Recetas: una PWA para ver recetas que utiliza la API de TheMealDB.
Solamente usaremos React, generado por Create React App, junto con React Router.

Jorge Méndez Ortega

student•

nunca me a gustado usar create-react-app se me hace muy chafa

Bernardo Aguayo Ortega

student•

es una opcion mur rápida, ideal en mi opinion para un curso que se centra en pwa y no en como hacer set up de react, sin embargo estoy de acuerdo contigo

Jorge De Jesus Tejeda Bello

student•

Igual, siento que me estoy volando una serie de pasos y siempre con la incertidumbre de el código que se esta corriendo por detrás.

Oscar Cornejo

student•

El instructor podría haber indicado que debemos descargar el proyecto y no estar adivinando de dónde se deben descargar los recursos.

Cristian Iñiguez

student•

Estuve viendo el proyecto y parece que la API cambió. Ahora para obtener las últimas recetas debemos tener cuenta de Patreon y donar.

Para que siga funcionando el proyecto hice este cambio, haciendo la petición a otra URL:

// mealdb-api.js

async function getLatest() {
  const request = await fetch(`${baseUrl}/random.php`); // ya no latest.php
  ...
}

Esto me trae una receta aleatoria (pero solo una). Si alguien encuentra una mejor alternativa avisa:

Jorge Londoño

student•

hola si de pronto a algunos les da problemas abrir el proyecto aquí algunas cosas que a mi me funcionaron:

primero instalar el isomorphic-fetch con este comando

npm i isomorphic-fetch

luego buscar actualizaciones con

npx npm-check-updates -u

instalar las actualizaciones con

npm install

y para abrirlo no usar npm run start o npm start sino

npm run dev

ahora si al abrir el proyecto en el navegador no se ven las recetas, deben de ir a mealdb-api.js y cambiar la baseUrl y el request de la funcion getLatest con

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

const request = await fetch(`${baseUrl}/search.php?f=b`);

Luis Felipe Medina Rodriguez

student•

bro me sigue dando el mismo error data.meals.map is not a function creo que como si pareciera que la api no funciona si le sirve a mi bro?

Jorge Londoño

student•

mira te comparto todo mi codigo del mealdb-api,

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
}

lo que pasa es que la api de donde se extraen los datos cambió sus requisitos entonces ya no funciona como el profesor lo planteó, por eso hay que cambiar las variables antes mencionadas.

Brian Dennis Vega Hidalgo

student•

se puede mesclar NextJs con un PWA ?

Diego Forero

Team Platzi•

En teoría si es posible.

Brian Dennis Vega Hidalgo

student•

Super muchas gracias GOLLUM23 y gabrielchaveme investigare y veré los proyectos ahora mismo .

Fernando Salazar

student•

Hola Roberto, Disculpa podrias compartir un gist o un json con tus plugins de vscode? Saludos.

PD: Estaria bueno que todos los profesores hagan esto al prncipio de todos los cursos.

Leonardo Moreno Faberón

student•

Consulta quiero aprender esta PWA sin embargo no quiero entrar con una "deuda tecnica" que necesito saber antes de meterme de cabeza.????? hasta ahora conzco : -html. -css. -js (lleve el curso basico y el de fundamentos de js). -php (pero creo q no tiene nada q ver con PWA).

que mas me hace falta para tomar este curso de PWA y entenderlo.???? please si alguien me puede dar el mapa lo agradeceria mucho.

Alex Camacho

teacher•

Si ya sabes manejar JS podrías pasar a utilizar un framework con React y de ahí mirar a trabajar con una PWA

Ramiro Contreras León

student•

Te recomiendo el curso de NPM porque hay muchas librerías que actualizar y corregir. También sin duda de React. Este curso esta un 50% desactualizado, así que te recomiendo estar preparado en minimamente esas dos cosas que mencione!

Pamela Cinthya Torres Gutiérrez

student•

una pregunta puedo utilizar este curso pero con otro proyecto que tenga en react?

Kevin Morales

student•

Claro que sí, puedes poner en práctica todo lo que vas aprendiendo en el curso con el proyecto que quieras. Lo importante es aprender 💪

Cristian Caballero

student•

Esta en algun lugar el proyecto para ir "haciendo" con el mismo proyecto y no solo ir "viendo" como el lo hace?

Israel Elias Laura Rosas

student•

Tengo que pasar los cursos de React para tomar este curso?

Oscar Barajas Tavares

Team Platzi•

No estas obligado a hacerlo, en este curso te enseñan a trabajar las PWA con lo básico, pero te recomendaría tomar el curso para tener mas nociones de como se trabaja con ReactJS.

Israel Elias Laura Rosas

student•

El de React o React Native?

Sebastian Duque Morales

student•

Hola, tengo una pregunta, como tal el curso no está orientado a hacer la app desde 0 sino a pasar una app ya creada a una PWA?

Ricardo Celis

teacher•

así es justamente!

Sebastian Duque Morales

student•

Ahh jaja, la idea era empezarla desde 0, recomiendan algún sitio donde la pueda empezar desde 0?

Wilson Fabian Pérez Sucuzhañay

student•

pero para el SEO no seria NEXT con PWA porque solo react puro ¿?

Daniel Esteves

student•

Esta es una manera de hacerla pero como tu la recomiendas también y de hecho es una de las mejores alternativas

Jhon Manuel Angulo Moncada

student•

como dicen los compañeros ya el API de themealdb cambio así que cambien en mealdb-api.js la parte del fetch de "/latest.php" a "search.php?f=c"

si desean bastantes recetas con la letra c o la s

Julio J Yépez

student•

Se deben instalar react-router-dom y react-helmet adicionalmente a los paquetes que instala create-react-app recetas

Julio J Yépez

student•

El package.json queda así:

{
  "name": "platzi-recetas",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-helmet": "^5.2.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "dev": "react-scripts start",
    "start": "serve ./build -s -p ${PORT:-4000}",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Julio J Yépez

student•

También se debe instalar serve:

npm i -S serve

Luis Felipe Medina Rodriguez

student•

TypeError: data.meals.map is not a function
    at Object._callee$ (mealdb-api.js:13)
    at tryCatch (runtime.js:62)
    at Generator.invoke [as _invoke] (runtime.js:296)
    at Generator.prototype.<computed> [as next] (runtime.js:114)
    at step (mealdb-api.js:18)
    at mealdb-api.js:18
__stack_frame_overlay_proxy_console__ @ index.js:2178

ayuda que podria ser? hice npm init -y npm install y aun asi noks

Jorge Londoño

student•

Hola luis en la pagina mealdb-api.js del proyecto en la funcion getLatest pon:

const request = await fetch(`${baseUrl}/search.php?f=b`)

porque la api cambió entonces no se puede usar la consulta con .../latest.php`)

Luis Felipe Medina Rodriguez

student•

bro ya me ayudaste y me sirvio muchisimas gracias eres un crack :sm

Kerlyn Mariño

student•

Hola, alguien sabe en qué otro curso hicieron Platzi Recetas? o de dónde lo puedo descargar porque en los videos siguientes no lo explican... solo van directamente a convertir el app en una PWA.

Massimo Di Berardino

student•

¡Hola Kerly! En esta clase, en la sección de archivos el profesor comparte el proyecto con el que van a trabajar durante todo el curso.

Angel Hayling

student•

platzi-recetas@0.1.0 start C:\Users\leoncito\Documents\Workspace\Front-end\react-class\PWA\pwa_clones\platzi-pwa serve ./build -s -p ${PORT:-4000}

ERROR: Unknown --listen endpoint scheme (protocol): null npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! platzi-recetas@0.1.0 start: serve ./build -s -p ${PORT:-4000} npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the platzi-recetas@0.1.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\leoncito\AppData\Roaming\npm-cache_logs\2019-06-11T21_48_31_619Z-debug.log

Andres Roberto Coello Goyes

student•

también tuve el mismo error pero basta con ejecutar npm run build

Wanda Peruzzo

student•

En lugar de serve ./build -s -p ${PORT:-4000} coloca serve ./build -s -p PORT:-4000 en el packjson

Rubén Maier Enzler

student•

no me queda claro una cosa, ¿el proyecto este de las "recetas" se realiza en algún curso o está hecho exclusivamente para el curso y nos delegan la responsabilidad de conocerlo cual construcción propia? ¿es un proyecto de solo react, react router, hntml y css básico o tiene a su vez código ya enfocado en la realización de una pwa?

Fernanda Aragon

student•

Hola, en todo el curso te dan las bases para crear una PWA con React, la aplicación utilizara React y React Router, que por ende usaras algo de estilos CSS y de maquetación de HTML.

Cristian Caballero

student•

Alguien mas tuvo este error al intentar correr el proyecto después de descargarlo? SyntaxError: Unexpected token < in JSON at position 0

Me da ese error en consola, esta relacionado con el archivo recetas/src/mealdb-api.js

Esto fue después de usar npm install y luego 'npm run dev', carga el sitio, pero vació y en consola veo el error que describí arriba

Wilson Marino Pablo Mendez

student•

Justamente me esta mostrando lo mismo. ¿Lograste solucionar?

Luis Martinez

student•

Alguien sabe qué extensión usa el profesor para que el logo del archivo en VSC sea el logo de react para los archivos react aunque sólo terminen en.js ?