[TUTO] CREER UNE APP METEO EN AJAX EN 30 MINUTES (FETCH, ASYNC & AWAIT) 🛫

[@tjat55]

Encore une symphonie du Maestro Lior.

[@quattroquatre3113]

Le jour ou j'apprends fetch je tombe sur cette vidéo si ca n'est pas un cadeau du ciel 🙏🙏 Merci Lior pour ce contenu de l'or en barre

[@LiorCHAMLA]

[@m8mstudio]

Bravo, je découvre la chaine, enfin un tuto super carré, clair, précis, complet, parfaitement expliqué, logique, etc. Tout y est ! Ouf, ça fait plaisir.

[@LiorCHAMLA]

Merci beaucoup :)

[@ragabnadim]

Merci beaucoup, simple et pratique

[@mathieu_b5]

Tout ce qu'on peut faire en 30 minutes avec toi :O ! Je m'abonne, tu le mérites. J'ai eu un cours sur les fetch il y a pas longtemps et il m'a fallut 4h pour retourner le problème dans tous les sens. Quelle simplicité quand tu l'expliques !

[@LiorCHAMLA]

C'est parce que tu l'as déjà vu que t'as l'impression que c'est simple :) Merci en tout cas !

[@julienaz2274]

Cette vidéo est tellement riche, il faudrait la partager dans toutes les formations JS

[@LiorCHAMLA]

Elle est surtout vieille :D

[@julienaz2274]

@@LiorCHAMLA Tu veux dire qu'elle n'est plus d'actualité ? Ou alors elle est vieille par son format de présentation ? ^^

[@LiorCHAMLA]

@@julienaz2274 les deux mon capitaine 👌

[@eurz]

J'adore ta pédagogie. Tu ne te contente pas juste de dire "il faut faire ca” 🙏

[@LiorCHAMLA]

Merci :)

[@ginger1818]

Bonjour! Je suis novice et en formation en web developpement fullstack . Merci pour ton excellente pedagogie, grace à toi, certains sujets deviennent beaucoup plus simples!! Pour ce tuto, j ai utilisé le ipstack à la place de freegeoip et tout fonctionne parfaitement :)

[@LiorCHAMLA]

PARFAIT 👌 courage pour la suite 💪

[@Laberyio]

Moi qui avait du mal avec l'Ajax et les requetes xhttp , ce tuto m'aide beaucoup a y voir plus clair , très bien fait merci

[@LiorCHAMLA]

Just Sparkle de rien, merci à toi :-)

[@pierrebaudoux1061]

Super tuto ! Merci. J'ai bien réussi à récupérer les data. Aurais tu quelques conseils pour afficher le résultat dans la popup d'un marker d'une map à l'ouverture de la popup (affiché en cliquant sur le marker...) stp ?

[@damienstephan5825]

Merci pour cette vidéo qui explique tout très clairement et m' a beaucoup aidé. Bravo !

[@LiorCHAMLA]

Merci à toi d'avoir regardé :)

[@filouDcode]

Je sais que je "déterre" ce tuto mais je suis tombé dessus par hasard en regardant ta bibliothèque de vidéos, mais franchement tu devrais être médaillé de la légion d'honneur de la pédagogie. Quand tu code tout a l'air tellement logique et évident c'est un régal, en revanche le côté négatif c'est que quand je me met au clavier j'ai un peu l'impression de coder avec des moufles 😂

[@LiorCHAMLA]

Mais meeerciii beaucoup ♥️

[@issiakahimstar1023]

Pouce bleu amplement mérité. Bravo!!!

[@WadiiLagnadi]

C'est magnifique vraiment bravo

[@LiorCHAMLA]

Merci

[@julesimbert1084]

tu est le meilleur continue

[@LiorCHAMLA]

Merci Jules !

[@philippedragon2291]

Bravo Lior ! un tuto bien fait.

[@LiorCHAMLA]

Merci mon Philippe ! J'espère que tu aimeras les autres !

[@ghilasam4496]

merci c top !! donc si je comprends bien on a pas besoin finalement d'utiliser l'@IP dit le début, que la ville nous suffit, pourquoi tu as utilisé dit le début ? merci d'avance

[@LiorCHAMLA]

Ce tuto est très vieux franchement je ne me souviens plus ce que j'ai dit ou pas :)

[@ghilasam4496]

@@LiorCHAMLA hhh mdr pas grave ! merci qua meme

[@louislefort6067]

Simple et efficace. Merci.

[@LiorCHAMLA]

De rien, merci à toi d'avoir visionné ;-)

[@alexfaure6031]

Bonjour à tous, Merci Lior pour ton super tuto Quelqu'un a t'il réussi à corriger pour l'adresse IP avec ipstack ? (${ville})

[@Raphael-jo1rp]

Très bon tutoriel. En revanche, et juste pour savoir, qu'est-ce qui t'as fait préféré l'appel à deux APIs externes pour trouver l'adresse IP du client, alors qu'il existe la méthode "Geolocation.getCurrentPosition()" qui en plus gère en second paramètre les erreurs potentielles. Le faite que la fonctionnalité ne soit disponible que dans un contexte sécurisé (HTTPS) ? Je pense aussi qu'une gestion des erreurs (si le client entre une ville qui n'existe pas, ou qu'une température soit absente pour X raison du JSON par exemple) aurait été sympa, voir recommandé, à mettre en place. C'est toujours une bonne pratique il me semble :) Bon après, 30 minutes ça va vite, très vite même !

[@globalsystem1719]

Bonjour...tres belle video, super sens de la pédagogie. Puis je te demander quelle est est l’editeur de code que tu utilises ? ( ps: je developpe en windev et souhaite me mettre en complement au php) Merci par avance

[@LiorCHAMLA]

Je développe avec Visual Studio Code de Microsoft

[@Modricfoot]

Merci pour la vidéo :)

[@LiorCHAMLA]

De rien merci à toi :)

[@Don_Veno]

Bonjour je voulais savoir, qu'elles sont vos url pour les background-image pour le .clear, .clouds, .rain, .snow

[@LiorCHAMLA]

Je me rappelle plus, des images que j'ai trouvé sur Google Image :x

[@Don_Veno]

@@LiorCHAMLA d'accord merci pour votre retour 😄

[@mamemorthiam9746]

Bonjour j'ai essayer de faire cet appli mais j'ai des problèmes sur le background image sa ne passe

[@LiorCHAMLA]

Le tuto est très vieux tu sais, néanmoins si tu suis bien les choses tout devrait fonctionner pour le background au moins :p :p

[@RiddikFR]

salut j'aime bien ton coussin :) bonne vidéo merci

[@LiorCHAMLA]

Merci :)

[@zenixjunior4617]

Bien joué

[@LiorCHAMLA]

Merci :)

[@gregorybatte1471]

quand je vois la météo marseillaise je me dit vive la bretagne hein looool.... Encore merci pour cette vidéo 🙂

[@LiorCHAMLA]

:)

[@VariousSoundEffects]

Bonjour tu es le meilleur , franchement après quelque heures et beaucoup d’erreurs maintenant ça marche mais seulement une ville, sur le lien de openweather avec ${ville} ça me fais une erreur, et si je met la ville sans les crochets, et sur chrome ça m' affiche texte (Ville) et si j’écris le nom d'une ville comme (Lille) sur la ligne du code et la j'ai la ville avec la météo, seulement la ville, si je met une autre ville pas d météo. const meteo = await fetch('api.openweathermap.org/data/2.5/weather?q=lille&appid=ba99412d31367a2f60169d905ef3b403&units=metric') Merci encore.

[@gabrielmarkides8830]

salut, juste une petite question, est-il possible que tu mets les fichiers de ton code a dispo, car il y a quelques (comment dire) petites explication qui sont manquante. Dans ta vidéo, par exemple a la minute 7 .11 quand tu reviens sur le code, tu as du faire une modification dans le fichier index.html que tu n'as pas détail. Donc, il me semble qu'avec les codes ce serait plus facile de te suivre. ;) Merci

[@LiorCHAMLA]

Salut, je suis désolé mais je n'ai plus le code de ce tutorial mais tu as raison j'aurai du le mettre en ligne :( Par contre je ne vois pas ce qui change à la minute 7 dans l'index.html tu peux être plus précis ?

[@gabrielmarkides8830]

déjà merci pour ta réponse, c'est cool. Si tu regarde ton appli juste avant ton explication sur la compatibilité des fonctions sur les différents navigateurs (6.36) on peut lire Marseille voir l'icon et les degrés, ensuite quand tu reprends (7.08) on ne voit plus les info. C'est pour ça que je pense tu as modifié le code ;)

[@LiorCHAMLA]

Haaa oui, en effet j'aurai du le dire à voix haute, en fait j'ai juste vidé les spans etc pour que l'application soit vide, sans pour autant supprimer les balises elles-mêmes. Pour mes prochains tutos j'uploaderai les fichiers sur GitHub afin de donner les liens en description :-)

[@Zézé_la_Tulipe]

Hello ! J'en suis à la moitié et j'ai rencontré un problème sous Firefox Ce dernier semble avoir des problèmes pour gérer fetch et renvoie un "typeError : Network when attempting to fetch resource". A priori, ça aurait un lien avec le CORS (un paramètre du fetch ?) mais je n'ai pas pu aller plus loin. Voilu !

[@LiorCHAMLA]

Kikoo Jérôme, je pense pas que ça ait un rapport avec Firefox vu qu'il comprend bien l'API fetch (caniuse.com/#feat=fetch), mais je n'ai jamais eu ce problème. As tu testé sous chrome histoire de voir ? Et au fait, sur quel appel as tu cette erreur ? OpenWeatherMap ou un autre ?

[@Zézé_la_Tulipe]

Hola ! Alors sous Chrome, ça marche bien. Sous firefox, quand je mets fetch('api.ipify.org/?format=json') dans la console, il me renvoie la promesse ET le TypeError. Note : Ca fonctionne correctement avec OpenWeatherMap Et voila un des topics d'erreur relative à fetch sur firefox, mais il m'aide guère. github.com/github/fetch/issues/310 C'est mystérieux... merci Lior !

[@LiorCHAMLA]

Jérome ce que tu devrais tenter de faire c'est développer en mode (sur ton localhost ou avec un live-server par exemple, voire même sous Cloud9) car en file:// il est possible que fetch fasse une erreur. Fais un essai :-)

[@Zézé_la_Tulipe]

Sur Codepen, ça passe avec Chrome mais pas avec Firefox qui me laisse un bel écran blanc. Au passage ^^ codepen.io/Djitzu/pen/MEePmL

[@loulou81400]

+liorChamla, j'ai voulu réaliser le tuto mais rien ne fonctionn, je n'ai aucune erreur dans la console, mais du coup tout est vide !! je ne comprends pas pourquoi, je me ndemande si cela ne vient pas de l'API de ipify !! dommage car le tuto est vraiment bien fait !!

[@LiorCHAMLA]

Frederic Guerra bizarre que ça ne marche pas sans qu'il n'y ait d'erreur. Es tu sur d'avoir bien tout fait ?

[@loulou81400]

+liorChamla, en fait c'est la facon de récupérer l'API de la ville qui a changé, il faut une ID maintenant et l'adresse a changé!! tout marche du coup, par contre la je ne peux pas changer de ville, cela ne le prends pas en compte !! voici ce qu'il m'a fallu mettre : ville = await fetch(`api.ipstack.com/${ip}?access_key=0a6a395150135680ee8ff10615eae821

[@LiorCHAMLA]

Non non, toi tu appelles carrément un autre service qui s'appelle "ipstack". Moi ce que j'utilise dans le tuto c'est bien www.ipify.org/ Enfin tant mieux si ça marche avec un autre service :-) Bravo !

[@loulou81400]

+liorChamla, en fait j'ai ipify c'est sur freegeoip que ça coincé, car freegeoip n'existe plus, il l'ont remplacer par le lien dont je t'ai envoyé la copie, je pense que c'est la que je me suis trompé, j'ai créer mon compte, reçu ma clé API, maisil y a un truc qui doit clocher car au final je ne peux recevoir les coordonnés que de ma ville... Voici le lien vers le post github... github.com/apilayer/freegeoip/blob/master/README.md

[@LiorCHAMLA]

Ben oui le but de IPStack (donc le nouveau FreeGeoIp) c'est de te filer la ville qui correspond à une adresse IP. Si tu lui files ton adresse IP c'est sur qu'il te file ta ville. Et c'est le but au final.

[@thibauds1061]

Bonjour ! J'ai cette erreur qui s'affiche sur ma console "VM718:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0" Quelqu'un a une idée ? Et aussi merci pour ce contenu :)

[@LiorCHAMLA]

Le JSON que tu reçois contient un caractère non permis, compliqué de comprendre ici ce qui se passe mais a priori y a quelque chose qui cloche dans ce que tu es sensé recevoir en JSON

[@thibauds1061]

Ah oui je vais regarde ça ! une énigme c'est sympa de temps en temps :P Merci pour ta réponse :)

[@ggousier]

Const ip. En français ça sonne pas terrible MDR !

[@LiorCHAMLA]

Haha

[@mounirboucenine]

Merci Lior pour tes vidéos mais celle ci n'est plus à jour. Freegeoip n'existe plus

[@LiorCHAMLA]

Bah faut en trouver un autre qui fonctionne a peu près pareil, ça doit pas manquer :x

[@chainedown4927]

Code source stp

[@LiorCHAMLA]

Ca fait très longtemps que je n'ai plus le code de cette vidéo ^^