Desarrollo con ReactJS y la API de OpenWeatherMap
ฝัง
- เผยแพร่เมื่อ 19 มี.ค. 2022
- En este vídeo aprenderemos a desarrollar una aplicación para monitorizar el tiempo con la API de OpenWeatherMap y ReactJS.
Para la comunicación HTTP utilizaremos la API Fetch de javascript.
*****************************************************************************
Código: github.com/CodenautaJorge/ope...
¡Permaneced atent@s a los siguientes vídeo-tutoriales que vamos a ir compartiendo!
somoscodenautas.com/
/ codenautas
/ somoscodenautas
![มองหน้ากันไม่ติด (Awkward) - โอ๊ต ปราโมทย์ FEAT. MAIYARAP [Official MV]](http://i.ytimg.com/vi/4b02SY_r6Gw/mqdefault.jpg)
recien voy 30 min y es genial tu forma de explicar, ni chat gpt supo como.
Gracias por el tutorial!!!
Muchas gracias por el video
Buenas , me ha gustado mucho el video, y aunque me queda por practicar, he cogido el concepto de como trabajar con una api, muchas gracias
explicas muy bien y es muy facil de entender, seria increible que hicieras un playlist enseñando algorithmos y te lo agradeceria mucho! espero lo tomes en consideracion
me salvaste con la parte del icono (estaba haciando un fetch para recuperarlo) y era mil veces mas facil gracias!
si pudiera darle like mil veces lo haria! me haz ayudado mucho. nuevo sub y sigue asi!!! Eres grandioso
Gracias!
te doy 15/10. gracias por tu aportacion
Gracias mi rey, Messirve :D
Excelente video ,dejo like y sub , ojalá subas más material
Exelente tu canal
Bro, buenisimo! Muchas gracias por tu aporte. Estoy practicando React y aun hay muchas cosas que estoy practicando, así no sea código propio supongo que con ir haciendo proyectos de videos poco a poco pueda ir entendiendo e ir teniendo mejor lógica, muchas gracias!
Gracias a ti!
buen trabajo amigo!!!
Muchas gracias, ¡muy buena explicación!
Gracias 😊
Muy buen video.
gracias por tan buen video, tengo una duda nunca habia usado React, apague la pc depues de hacer el proyecto y ahora no se como abrir la app de nuevo, espero me puedan ayudar, tambien tengo un problema, tengo que hacer que la app muestre la temperatura pronostico de los siguientes 3 dias, no se como hacer eso.
Buenas!!! Excelente video. En mi caso el spinner me queda girando todo el tiempo; no sabría en que me estaré equivocando
Hola, gracias! El spinner viene controlado por una variable booleana, por lo que si esta variable no pasa a false el spinner seguirá visualizándose... quizás se deba a esto el problema.
@@Codenautas Si, justamente. Estaba pasando mal las props y por ende la vble que pasaba era un objeto no booleano🤦♂, mala mía. Solucionado, gracias!!
Lo de las siguientes 3, 6 y 9 horas no me funciona correctamente, siempre me muestra a las 09h, 12h y 15h, ya vi el video varias veces y no veo diferencia entre los codigos, podias ayudarme
Que buen proyecto, no pude copiar el código porque no utilizo zoom se ve super pequeño...
Hola Luís, en la descripción del vídeo tienes el enlace a github donde encontrarás el código
Bro como agrego iconos de la api y que cambié de icono segun el clima de x ciudad?
Para acceder a los iconos que devuelve la api tienes la url de forecast: "api.openweathermap.org/data/2.5/forecast?appid=&lang=es"
De todos modos en los docs de OpenWeather tienes la info.
Si quieres cambiar el estilo de un elemento en función de un dato de temperatura sólo tienes que integrar una condición en el momento de mostrarlo y modificar su estilo.
hola ! excelente video tengo una consulta unicamente esta api cuanto tiempo dura ? o despues de 14 dias deja de tener funcionamiento ?
Hola, según creo el api key te sirve de forma "ilimitada" si me equivoco, corregidme!!
Muy buen vídeo, una duda, al final cuando hago el proceso de forecast se quiebra el código y me sale esto por consola: TypeError: undefined is not an object (evaluating 'forecast.list[1]'), ya compare con el git del proyecto y no veo algún error en mi código , antes de realizar la parte de forecast si estaba funcionando correctamente, tienes idea de como solucionarlo?, gracias de ante mano .
Hola!, por lo que dices parece que no le es posible acceder al dato en concreto que se obtiene a través de la llamada a la api,...
¿Has pasado al componente Card como prop forecast? ==> const Card = ({loadingData, showData, weather, forecast}) => {
Un saludo
@@Codenautas me pasa lo mismo y no he logrado solucionarlo....... Ayudame!
gracias!
a mi me pasas igual. quizas se actualizo la api y no incluye mas esa propiedad
quizas de ignorante. el const [location, setLocation] = useState(""); para que se utiliza?? porque el Location no se le da uso??
Hola maximiliano, pues sí, al final no se utiliza el state location y directamente se hace uso del prop loc, ya que el state hace que al establecer el valor no se actualice inmediatamente.
Se puede quitar ese state sin problema!!
En el min 40 cuando veo el codigo, desaparecio la barra del buscador y no se que podria fallar, antes de terminar el primer dia estaba bien y hoy no.
Hola! No sé bien a que te refieres, pero en la descripción del código tienes el acceso a todos los archivos alojados en github. Puedes cambiar o comparar tu componente Form.js con el mío
@@Codenautas para que me vuelva a aparecer la barra de busqueda tuve que poner en el app.js el nombre de los componentes (form y card) y al seguir viendo el video y siguiendo el proyecto directamente me aparece la pantalla en negro. No se a que se debera el problema que tengo yo, capaz a alguno mas le ocurre.
termine el video y me tira el siguiente error: "Uncaught TypeError: Cannot read properties of undefined (reading '1')"
me dice que los errores son de los iconos (iconUrl3...) y de las horas (forecastDate3...).
clone el github y tiene el mismo error
Hola! quizás se deba a que han cambiado la estructura de la api donde se encuentra el acceso a los iconos y el path posiblemente es diferente. Puedes comprobarlo en la documentación de OpenWeather. Es lo primero que yo haría, comprobar esto.
Tengo un problema: mi api consume correctamente los datos, se muestran en consola, pero cuando hago el render condicional no aparece nada. S+olo se renderiza el h1 que puse de prueba en caso de que sea falso... ¿alguna idea? aparece como undefined
Código:
"""
const App = () => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const consumingAPI = async () => {
const res = await getWeather("bogotá");
setData(res);
setLoading(false);
};
useEffect(() => {
consumingAPI();
}, []);
return (
Weather App
Testeo
{ data ?
(
{data}
) : qué pasa, no funciona
}
);
}
""""
Hola!, prueba a hacer el return así (no sé si será el problema, pero veo un fallo de sintaxis...):
return (
Weather App
Testeo
{ data === true ? (
{data}
):(
qué pasa, no funciona
)
}
);