{"id":356989,"date":"2023-05-22T09:33:23","date_gmt":"2023-05-22T08:33:23","guid":{"rendered":"https:\/\/blog.jetbrains.com\/?post_type=pycharm&#038;p=356989"},"modified":"2023-05-26T15:42:14","modified_gmt":"2023-05-26T14:42:14","slug":"creer-une-application-django-dans-pycharm","status":"publish","type":"pycharm","link":"https:\/\/blog.jetbrains.com\/fr\/pycharm\/2023\/05\/creer-une-application-django-dans-pycharm\/","title":{"rendered":"Cr\u00e9er une application Django dans PyCharm"},"content":{"rendered":"<p>L&#8217;id\u00e9e \u00e0 la base de Django est de permettre aux d\u00e9veloppeurs de cr\u00e9er des applications rapidement. La ma\u00eetrise de ce framework permet de r\u00e9duire consid\u00e9rablement le chemin entre le concept et l&#8217;obtention d&#8217;une application web op\u00e9rationnelle. Si vous voulez aller encore plus vite, vous pouvez apprendre \u00e0 cr\u00e9er des applications Django dans PyCharm.<\/p>\n<p>Ce tutoriel vous guide \u00e0 travers les \u00e9tapes de la cr\u00e9ation d&#8217;une application Django simple qui indique la temp\u00e9rature de l&#8217;air l\u00e0 o\u00f9 vous vous trouvez et permet de prendre connaissance des conditions m\u00e9t\u00e9o \u00e0 diff\u00e9rents endroits.<\/p>\n<p>Gr\u00e2ce \u00e0 ce tutoriel, vous apprendrez comment&nbsp;:<\/p>\n<ul>\n<li>Cr\u00e9er un projet Django dans PyCharm<\/li>\n<li>\u00c9crire des mod\u00e8les, des vues et des gabarits<\/li>\n<li>Faire des appels d&#8217;API et traiter les r\u00e9ponses<\/li>\n<li>Vous connecter \u00e0 des bases de donn\u00e9es et y importer des donn\u00e9es.<\/li>\n<\/ul>\n<p>Pour obtenir l&#8217;int\u00e9gralit\u00e9 du code de l&#8217;application, vous pouvez cloner le <a title=\"https:\/\/github.com\/denis-mashutin\/weather-app-tutorial\" href=\"https:\/\/github.com\/denis-mashutin\/weather-app-tutorial\" target=\"_blank\" rel=\"noreferrer noopener\">r\u00e9f\u00e9rentiel<\/a>. Pour plus d&#8217;informations sur le clonage, consulte la <a href=\"https:\/\/www.jetbrains.com\/help\/pycharm\/cloning-repository.html\" target=\"_blank\" rel=\"noopener\">documentation PyCharm<\/a>.<\/p>\n<p><!--more--><\/p>\n<h2 class=\"wp-block-heading\">Pr\u00e9requis<\/h2>\n<p>Ce tutoriel s&#8217;adresse aux d\u00e9veloppeurs qui ont d\u00e9j\u00e0 plusieurs ann\u00e9es d&#8217;exp\u00e9rience avec Python. Par cons\u00e9quent, nous partons du principe que Python est d\u00e9j\u00e0 install\u00e9 sur votre ordinateur. Mais si ce n&#8217;est pas le cas, pas de souci ! Vous pouvez t\u00e9l\u00e9charger et installer la version de Python de votre choix lorsque vous commencerez votre premier projet dans PyCharm.<\/p>\n<p>La prise en charge de Django est une fonctionnalit\u00e9 professionnelle, vous devez utiliser <a href=\"https:\/\/www.jetbrains.com\/fr-fr\/pycharm\/download\/\" target=\"_blank\" rel=\"noreferrer noopener\">PyCharm Professional<\/a>. Il y a une p\u00e9riode d&#8217;essai gratuit de 30 jours pour les nouveaux utilisateurs et les \u00e9tudiants et enseignants b\u00e9n\u00e9ficient d&#8217;une <a href=\"https:\/\/www.jetbrains.com\/fr-fr\/community\/education\/\" target=\"_blank\" rel=\"noreferrer noopener\">licence gratuite<\/a>. Ce tutoriel a \u00e9t\u00e9 con\u00e7u dans <strong>PyCharm 2023.1<\/strong>, avec la <a href=\"https:\/\/www.jetbrains.com\/help\/pycharm\/2023.1\/new-ui.html\" target=\"_blank\" rel=\"noopener\">nouvelle interface utilisateur<\/a> activ\u00e9e.<\/p>\n<p>Pour en savoir plus et acc\u00e9der aux instructions d&#8217;installation pour les diff\u00e9rents syst\u00e8mes d&#8217;exploitation, consultez la <a href=\"https:\/\/www.jetbrains.com\/help\/pycharm\/installation-guide.html\" target=\"_blank\" rel=\"noopener\">documentation de PyCharm<\/a>.<\/p>\n<h2 class=\"wp-block-heading\">Cr\u00e9er une application op\u00e9rationnelle<\/h2>\n<p>Les premi\u00e8res \u00e9tapes nous permettront d&#8217;obtenir une premi\u00e8re version basique et op\u00e9rationnelle de notre application.<\/p>\n<h3 class=\"wp-block-heading\">Cr\u00e9er un projet Django dans PyCharm<\/h3>\n<p>Pour cr\u00e9er votre projet, lancez PyCharm et cliquez sur <strong>New Project<\/strong>. Si PyCharm est d\u00e9j\u00e0 lanc\u00e9 , s\u00e9lectionnez <strong>File | New Project<\/strong> dans le menu principal.<\/p>\n<p>Dans la fen\u00eatre <strong>New Project<\/strong>, sp\u00e9cifiez ce qui suit&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-334829\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/image-47.png\" alt=\"Cr\u00e9ation d'un projet Django dans PyCharm\" width=\"1600\" height=\"1300\"><\/figure>\n<\/div>\n<ol>\n<li>Choisissez <strong>Django<\/strong> comme type de projet.<\/li>\n<li>Saisissez le nom du r\u00e9pertoire dans lequel votre projet se trouvera. Cela sera \u00e9galement le nom de votre projet.<\/li>\n<li>Cr\u00e9ez un environnement virtuel pour votre nouveau projet Django dans lequel PyCharm installera vos d\u00e9pendances. Pour ce tutoriel, nous allons s\u00e9lectionner l&#8217;option <strong>virtualenv<\/strong>.<\/li>\n<li>PyCharm est maintenant pr\u00eat pour la cr\u00e9ation d&#8217;une application Django dans votre projet. Veillez \u00e0 nommer votre application d\u00e8s maintenant.<\/li>\n<\/ol>\n<p>Pour commencer, cliquez sur <strong>Create<\/strong> afin que PyCharm cr\u00e9e la structure de fichiers et installe Django et les autres d\u00e9pendances requises.&nbsp;<\/p>\n<p>Cliquez sur l&#8217;ic\u00f4ne <strong>Run<\/strong> en haut de la fen\u00eatre pour d\u00e9marrer le serveur Django&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-334851\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/run_for_the_first_time.png\" alt=\"Ex\u00e9cution du serveur Django\" width=\"1956\" height=\"1328\"><\/figure>\n<\/div>\n<p>La fen\u00eatre d&#8217;outils <strong>Run<\/strong> s&#8217;ouvre. Cliquez sur le lien pour ouvrir la fen\u00eatre du navigateur&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-334885\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/django_server_running-1.png\" alt=\"Page du serveur Django dans le navigateur\" width=\"1980\" height=\"1194\"><\/figure>\n<\/div>\n<p>Et voil\u00e0, il n&#8217;a fallu que quelques minutes pour obtenir un serveur Django ex\u00e9cutable dans PyCharm. C&#8217;est un bon d\u00e9but, mais le meilleur reste \u00e0 venir.<\/p>\n<h3 class=\"wp-block-heading\">Cr\u00e9er votre premi\u00e8re vue<\/h3>\n<p>Il s&#8217;agit maintenant de cr\u00e9er la logique de l&#8217;application. Dans Django, cela se fait en \u00e9crivant des classes ou des fonctions dans <strong>views.py<\/strong>.<\/p>\n<p>Vous pouvez examiner la structure de votre projet \u00e0 tout moment en cliquant sur l&#8217;ic\u00f4ne dossier dans le coin sup\u00e9rieur gauche de la fen\u00eatre de PyCharm ou en appuyant sur <strong>\u23181<\/strong> \/ <strong>Alt+1<\/strong>:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-334873\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/project_tool_window.png\" alt=\"Acc\u00e8s \u00e0 la fen\u00eatre d'outils Project\" width=\"363\" height=\"554\"><\/figure>\n<\/div>\n<p>Ce tutoriel fournit des raccourcis qui permettent de gagner beaucoup de temps, par exemple appuyer deux fois sur <strong>\u21e7 (Maj)<\/strong> pour ouvrir la fen\u00eatre <strong>Search Everywhere<\/strong>. Ce raccourci vous permet litt\u00e9ralement de tout trouver, notamment les fichiers, param\u00e8tres et actions de votre projet.<\/p>\n<p>Nous allons l&#8217;utiliser pour ouvrir rapidement <strong>views.py<\/strong>.<\/p>\n<p>Saisissez <kbd>views<\/kbd>, placez le curseur sur <strong>views.py<\/strong> <strong>meteo<\/strong> et appuyez sur <strong>Entr\u00e9e<\/strong>&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-334897\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/find_views.png\" alt=\"Utilisation de Search Everywhere\" width=\"666\" height=\"243\"><\/figure>\n<\/div>\n<p>Un onglet d&#8217;\u00e9diteur avec <strong>views.py<\/strong> s&#8217;ouvre. Commen\u00e7ons par \u00e9crire la fonction <code>temp_here<\/code>, qui renverra la temp\u00e9rature qu&#8217;il fait actuellement l\u00e0 o\u00f9 nous nous trouvons.&nbsp;<\/p>\n<p>Collez le code suivant dans l&#8217;\u00e9diteur&nbsp;:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import requests\n\n\ndef temp_here():\n    location = geocoder.ip('me').latlng\n    endpoint = \"https:\/\/api.open-meteo.com\/v1\/forecast\"\n    api_request = f\"{endpoint}?latitude={location[0]}&amp;longitude={location[1]}&amp;hourly=temperature_2m\"\n    return requests.get(api_request).json()<\/pre>\n<p>Que se passe-t-il alors? Tout d&#8217;abord, nous importons la biblioth\u00e8que <code>requests<\/code>, qui est requise pour faire des appels d&#8217;API. Si l&#8217;instruction d&#8217;importation est soulign\u00e9e par une ligne ondul\u00e9e rouge, cela signifie que le paquet n&#8217;est pas disponible dans l&#8217;interpr\u00e9teur Python s\u00e9lectionn\u00e9.<\/p>\n<p>Survolez-la avec le curseur et s\u00e9lectionnez <strong>Install package requests<\/strong>.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-334980\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/install_requests.gif\" alt=\"Installer la biblioth\u00e8que de requ\u00eates\" width=\"875\" height=\"240\"><\/figure>\n<\/div>\n<p>Pour obtenir la temp\u00e9rature actuelle, <code>temp_here<\/code> fait un appel \u00e0 l&#8217;<a href=\"https:\/\/open-meteo.com\/en\/docs\" target=\"_blank\" rel=\"noreferrer noopener\">API Weather Forecast<\/a>. C&#8217;est une API gratuite qui ne n\u00e9cessite pas de cl\u00e9 d&#8217;API. Tout ce que nous avons besoin de conna\u00eetre est le point de terminaison (<a href=\"https:\/\/api.open-meteo.com\/v1\/forecast\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/api.open-meteo.com\/v1\/forecast<\/a>) et les coordonn\u00e9es. Pour ces derni\u00e8res, nous allons utiliser <a href=\"https:\/\/geocoder.readthedocs.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Geocoder<\/a>, une biblioth\u00e8que Python tr\u00e8s simple qui permet de relever les coordonn\u00e9es de diff\u00e9rents endroits.<\/p>\n<p>Placez le caret sur <code>geocoder<\/code>, qui est mis en \u00e9vidence par une ligne ondul\u00e9e rouge, et appuyez sur <strong>\u2325Entr\u00e9e<\/strong> \/ <strong>Alt+Entr\u00e9e<\/strong> pour voir les correctifs rapides disponibles. S\u00e9lectionnez <strong>Install and import package \u2018geocoder\u2019<\/strong>&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335005\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/install_geocoder.png\" alt=\"Installation et importation d'un paquet Python\" width=\"597\" height=\"274\"><\/figure>\n<\/div>\n<p>PyCharm installe le paquet et ajoute l&#8217;instruction d&#8217;importation au d\u00e9but du fichier.<\/p>\n<p>Que pensez-vous de faire une requ\u00eate de test pour s&#8217;assurer que tout fonctionne comme pr\u00e9vu ? Le moyen le plus simple de le faire est d&#8217;appeler la fonction dans la console Python.&nbsp;<\/p>\n<p>Utilisons un autre raccourci&nbsp;pour gagner du temps : <strong>Find action<\/strong>. Pas besoin de parcourir des menus avec la souris ou de m\u00e9moriser des douzaines de raccourcis, il suffit d&#8217;appuyer sur <strong>\u21e7\u2318A<\/strong> \/ <strong>Ctrl+Maj+A<\/strong> et de rechercher <strong>Run File in Python Console<\/strong>.<\/p>\n<p>Il n&#8217;est pas n\u00e9cessaire de saisir les mots en entier, Vous pouvez utiliser une suite de lettres comme <kbd>'rufipy'<\/kbd> et obtenir malgr\u00e9 tout le r\u00e9sultat voulu&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335016\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/rufipy.png\" alt=\"\" width=\"670\" height=\"174\"><\/figure>\n<\/div>\n<p>Lorsque vous ex\u00e9cutez la commande, PyCharm charge les importations et la d\u00e9finition de fonction dans la console. Maintenant, appelez <code>temp_here<\/code>. Vous pouvez appuyer sur la touche <strong>Tab<\/strong> pour la saisie semi-automatique du code&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335028\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/autocompletion_python_console.png\" alt=\"Saisie semi-automatique dans la console Python\" width=\"708\" height=\"285\"><\/figure>\n<\/div>\n<p>Examinez la r\u00e9ponse de l&#8217;API dans la sortie de la console. C&#8217;est une cha\u00eene tr\u00e8s longue, mais vous en trouverez une repr\u00e9sentation claire ci-dessous.<\/p>\n<p>Si vous souhaitez explorer la r\u00e9ponse vous-m\u00eame, faites comme suit&nbsp;:<\/p>\n<ol>\n<li>Cliquez sur la sortie de la console 3 fois et copiez-la dans le presse-papiers en appuyant sur <strong>\u2318C<\/strong> \/ <strong>Ctrl+C<\/strong>.<\/li>\n<li>Cr\u00e9ez un fichier en appuyant sur <strong>\u21e7\u2318N<\/strong> \/ <strong>Ctrl+Alt+Maj+Insert<\/strong> et s\u00e9lectionnez le type de fichier <strong>JSON<\/strong> (commencez simplement \u00e0 saisir <kbd>'js\u2026'<\/kbd>).<\/li>\n<li>Collez la r\u00e9ponse et appliquez l&#8217;action <strong>Reformat Code<\/strong>. Vous pouvez utiliser <strong>Find action<\/strong> ou appuyer sur <strong>\u2325\u2318L<\/strong> \/ <strong>Ctrl+Alt+L<\/strong>.<\/li>\n<\/ol>\n<p>Les informations requises sont contenues dans l&#8217;\u00e9l\u00e9ment <code>hourly<\/code> sous la cl\u00e9 <code>temperature_2m<\/code>. Cette cl\u00e9 pointe vers une liste de valeurs.<\/p>\n<p>Pour obtenir la temp\u00e9rature actuelle, nous devons passer l&#8217;heure actuelle en indice. Par exemple, s&#8217;il est 14&nbsp;h&nbsp;30, nous prendrons le 14e \u00e9l\u00e9ment de la liste.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335039\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/api_response_explained.png\" alt=\"Exploration de la r\u00e9ponse de l'API\" width=\"800\" height=\"637\"><\/figure>\n<\/div>\n<p>V\u00e9rifions si <code>temp_here()['hourly']['temperature_2m'][14]<\/code> fournit les informations requises.<\/p>\n<p>Remplacez <kbd>14<\/kbd> par la valeur correspondant \u00e0 l&#8217;heure qu&#8217;il est actuellement et saisissez le code dans la console&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335061\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/manual_request_console.png\" alt=\"Envoi d'une requ\u00eate \u00e0 l'API depuis la console Python\" width=\"574\" height=\"270\"><\/figure>\n<\/div>\n<p>Nous obtenons 14,9&nbsp;\u00b0C pour notre position. Et vous&nbsp;?<\/p>\n<p>Nous allons modifier la fonction afin qu&#8217;elle puisse extraire la temp\u00e9rature actuelle \u00e0 partir de la r\u00e9ponse de l&#8217;API&nbsp;:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"5-9\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">def temp_here():\n    location = geocoder.ip('me').latlng\n    endpoint = \"https:\/\/api.open-meteo.com\/v1\/forecast\"\n    api_request = f\"{endpoint}?latitude={location[0]}&amp;longitude={location[1]}&amp;hourly=temperature_2m\"\n    now = datetime.now()\n    hour = now.hour\n    meteo_data = requests.get(api_request).json()\n    temp = meteo_data['hourly']['temperature_2m'][hour]\n    return temp<\/pre>\n<p>N&#8217;oubliez pas d&#8217;importer <code>datetime<\/code>&nbsp;:<\/p>\n<figure class=\"wp-block-video aligncenter\"><video src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/import_datetime.mp4\" controls=\"controls\" width=\"300\" height=\"150\"><\/video><\/figure>\n<p>Cliquez sur <strong>Rerun<\/strong> dans le coin sup\u00e9rieur gauche de la barre d&#8217;outils de la console Python pour recharger la d\u00e9finition de fonction mise \u00e0 jour, puis appelez de nouveau <code>temp_here<\/code> :<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335092\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/rerun_same_result.png\" alt=\"Appel de la fonction mise \u00e0 jour depuis la console Python\" width=\"687\" height=\"222\"><\/figure>\n<\/div>\n<p>Si le r\u00e9sultat est diff\u00e9rent de celui que vous aviez avant de modifier le code de la fonction <code>temp_here<\/code>, cela peut \u00eatre d\u00fb \u00e0 une valeur <code>TIME_ZONE<\/code> incorrecte dans <strong>settings.py<\/strong>.&nbsp;<\/p>\n<p>Pour plus d&#8217;informations, consultez la <a href=\"https:\/\/docs.djangoproject.com\/en\/4.1\/ref\/settings\/#std-setting-TIME_ZONE\" target=\"_blank\" rel=\"noreferrer noopener\">documentation Django<\/a>.<\/p>\n<p>Pour acc\u00e9der rapidement \u00e0 ce param\u00e8tre, appuyez deux fois sur <strong>\u21e7 (Maj)<\/strong>, passez \u00e0 <strong>Symbols<\/strong> en appuyant plusieurs fois sur la touche <strong>Tab<\/strong>, puis commencez \u00e0 saisir <kbd>'time\u2026'<\/kbd>.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335103\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/time_zone_settings.png\" alt=\"Rechercher des param\u00e8tres avec Search Everywhere\" width=\"681\" height=\"267\"><\/figure>\n<\/div>\n<p>Nous allons maintenant transformer <code>temp_here<\/code> en fonction d&#8217;affichage. Afin d&#8217;\u00eatre reconnue en tant que vue par Django, cette fonction doit accepter l&#8217;objet <strong>HttpRequest<\/strong> comme premier param\u00e8tre, g\u00e9n\u00e9ralement appel\u00e9 <code>request<\/code>. Elle doit \u00e9galement renvoyer l&#8217;objet <strong>HttpResponse<\/strong>.<\/p>\n<p>Voici ce \u00e0 quoi <strong>views.py<\/strong> doit ressembler&nbsp;:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"8,16\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">from datetime import datetime\n\nimport geocoder as geocoder\nimport requests\nfrom django.http import HttpResponse\n\n\ndef temp_here(request):\n    location = geocoder.ip('me').latlng\n    endpoint = \"https:\/\/api.open-meteo.com\/v1\/forecast\"\n    api_request = f\"{endpoint}?latitude={location[0]}&amp;longitude={location[1]}&amp;hourly=temperature_2m\"\n    now = datetime.now()\n    hour = now.hour\n    meteo_data = requests.get(api_request).json()\n    temp = meteo_data['hourly']['temperature_2m'][hour]\n    return HttpResponse(f\"Here it's {temp}\")<\/pre>\n<p>Comme vous pouvez le voir, nous n&#8217;avons pas chang\u00e9 grand-chose&nbsp;: <code>temp_here<\/code> accepte d\u00e9sormais <code>request<\/code> comme argument et renvoie <code>HttpResponse<\/code> avec une cha\u00eene.<\/p>\n<p>Si vous pr\u00e9f\u00e9rez utiliser des degr\u00e9s Fahrenheit au lieu de degr\u00e9s Celsius, il suffit d&#8217;ajouter le param\u00e8tre <code>temperature_unit<\/code> dans la requ\u00eate de l&#8217;API&nbsp;:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">api_request = f\"{endpoint}?latitude={location[0]}&amp;longitude={location[1]}&amp;hourly=temperature_2m&amp;temperature_unit=fahrenheit\"<\/pre>\n<p>Si vous pr\u00e9f\u00e9rez les degr\u00e9s Celsius, ignorez simplement cette modification.<\/p>\n<h3 class=\"wp-block-heading\">Configuration des URL<\/h3>\n<p>Pour configurer l&#8217;acc\u00e8s \u00e0 notre application depuis un navigateur, mettez \u00e0 jour <strong>urls.py<\/strong>. Appuyez deux fois sur <strong>Maj<\/strong> et saisissez les url \u00e0 rechercher, puis ouvrez-les comme indiqu\u00e9 ci-dessus.<\/p>\n<p>Ajoutez la ligne suivante \u00e0 <code>urlpatterns<\/code>. Vous pouvez utiliser l&#8217;action <strong>Reformat Code<\/strong> <strong>\u2325\u2318L<\/strong> \/ <strong>Ctrl+Alt+L<\/strong> pour restaurer facilement les retraits apr\u00e8s le collage&nbsp;:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">path(\"\", include('meteo.urls')),<\/pre>\n<p>N&#8217;oubliez pas d&#8217;importer <code>include<\/code> depuis <code>django.urls.include<\/code>.<\/p>\n<p><code>meteo.urls<\/code> est d\u00e9sormais signal\u00e9 comme une r\u00e9f\u00e9rence non r\u00e9solue par une ligne jaune ondul\u00e9e, car le fichier n&#8217;existe pas encore. Cela sera corrig\u00e9 \u00e0 l&#8217;\u00e9tape suivante.<\/p>\n<p>Les projets Django contiennent souvent plusieurs applications. Bien que cela ne soit pas le cas ici, il faut prendre en compte le futur d\u00e9veloppement du projet. C&#8217;est pourquoi nous cr\u00e9ons un fichier <strong>urls.py<\/strong> pour chaque application dans le dossier correspondant et les incluons tous dans le fichier <strong>urls.py<\/strong> du projet.<\/p>\n<p>Nous allons donc cr\u00e9er <strong>urls.py<\/strong> dans le dossier de l&#8217;application <strong>meteo<\/strong>.<\/p>\n<p>Faites un clic droit sur le r\u00e9pertoire <strong>meteo<\/strong> dans la fen\u00eatre d&#8217;outils <strong>Project<\/strong>.<\/p>\n<p>S\u00e9lectionnez <strong>New &gt; Python File<\/strong> et tapez <kbd>urls<\/kbd>.<\/p>\n<p>Le fichier que vous venez de cr\u00e9er s&#8217;ouvre. Remplissez-le avec le code suivant&nbsp;:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">from django.urls import path\nfrom . import views\n\n\nurlpatterns = [\n    path('meteo\/', views.temp_here, name='temp_here'),\n]<\/pre>\n<p>D\u00e9sormais lorsqu&#8217;on ouvre <kbd>&lt;server_address&gt;\/meteo<\/kbd> dans le navigateur, la fonction <code>temp_here<\/code> de <strong>views.py<\/strong> est appel\u00e9e et le navigateur affiche le rendu du r\u00e9sultat renvoy\u00e9 par la fonction.<\/p>\n<h3 class=\"wp-block-heading\">Cela fonctionne&nbsp;!<\/h3>\n<p>R\u00e9ex\u00e9cutez le serveur Django en cliquant sur le bouton <strong>Rerun<\/strong> dans le coin sup\u00e9rieur droit et confirmez l&#8217;action&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335121\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/stop_and_rerun.png\" alt=\"R\u00e9-ex\u00e9cution du serveur Django\" width=\"844\" height=\"397\"><\/figure>\n<\/div>\n<p>Ouvrez <a href=\"http:\/\/127.0.0.1:8000\/meteo\/\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/127.0.0.1:8000\/meteo\/<\/a> dans votre navigateur. Vous devriez voir quelque chose de semblable \u00e0 ce qui suit&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335132\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/image-49.png\" alt=\"Page d'application dans le navigateur\" width=\"410\" height=\"207\"><\/figure>\n<\/div>\n<p>Si vous n&#8217;avez pas envie d&#8217;ouvrir le navigateur et de saisir l&#8217;adresse, ou d&#8217;actualiser la page manuellement \u00e0 chaque fois que vous red\u00e9marrez le serveur Django, vous pouvez configurer PyCharm pour qu&#8217;il le fasse \u00e0 votre place.<\/p>\n<p>Ouvrez la liste d\u00e9roulante dans le widget <strong>Run<\/strong> et s\u00e9lectionnez <strong>Edit configurations<\/strong>&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335143\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/edit_confiurations.png\" alt=\"Modification de la configuration d'ex\u00e9cution\" width=\"265\" height=\"215\"><\/figure>\n<\/div>\n<p>S\u00e9lectionnez la configuration de votre projet dans le volet de gauche, cochez la case <strong>Run browser<\/strong> et ajoutez <kbd>meteo<\/kbd> \u00e0 l&#8217;URL&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335154\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/run_browser.png\" alt=\"Configuration de l'URL\" width=\"1040\" height=\"676\"><\/figure>\n<\/div>\n<p>Cliquez sur <strong>OK<\/strong> pour appliquer les modifications.<\/p>\n<p>Techniquement, l&#8217;application fonctionne. Toutefois, son rendu dans le navigateur n&#8217;est pas tr\u00e8s esth\u00e9tique et elle ne donne toujours pas la possibilit\u00e9 d&#8217;obtenir la m\u00e9t\u00e9o d&#8217;une localisation al\u00e9atoire. Dans les prochaines \u00e9tapes, nous allons ajouter un gabarit et importer des donn\u00e9es pour r\u00e9soudre ces probl\u00e8mes.<\/p>\n<h2 class=\"wp-block-heading\">Am\u00e9liorer l&#8217;exp\u00e9rience<\/h2>\n<h3 class=\"wp-block-heading\">Ajout d&#8217;un gabarit<\/h3>\n<p>Revenons \u00e0 <strong>views.py<\/strong> et modifions \u00e0 nouveau la fonction <code>temp_here<\/code>. Si vous \u00eates toujours dans <strong>meteo\/urls.py<\/strong>, vous pouvez y acc\u00e9der en un rien de temps. Maintenez <strong>\u2318<\/strong> \/ <strong>Ctrl<\/strong>, survolez <code>temp_here<\/code> avec le curseur et cliquez dessus lorsqu&#8217;il se transforme en hyperlien&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335165\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/go_to_temp_here_from_urls-1.gif\" alt=\"Navigation vers une d\u00e9finition de fonction\" width=\"640\" height=\"480\"><\/figure>\n<\/div>\n<p>Ajoutez une ligne avant l&#8217;instruction return et saisissez <kbd>template = loader<\/kbd>.<\/p>\n<p>Appuyez sur <strong>\u2325Entr\u00e9e<\/strong>\/ <strong>Alt+Entr\u00e9e<\/strong> et utilisez un correctif rapide pour importer <code>loader<\/code> depuis <code>django.template.loader<\/code>&nbsp;:<\/p>\n<figure class=\"wp-block-video aligncenter\"><video src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/import_loader.mp4\" controls=\"controls\" width=\"300\" height=\"150\"><\/video><\/figure>\n<p>Utilisez ensuite <code>get_template()<\/code> pour charger <strong>index.html<\/strong> en tant que gabarit&nbsp;:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">    template = loader.get_template('index.html')<\/pre>\n<p>Remplacez maintenant l&#8217;instruction return par les deux lignes suivantes&nbsp;:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">    context = {'temp': temp}\n    return HttpResponse(template.render(context, request))<\/pre>\n<p><strong>Index.html<\/strong> est mis en \u00e9vidence par une ligne jaune ondul\u00e9e, car il n&#8217;existe pas encore. Survolez-le avec le curseur et s\u00e9lectionnez <strong>Create template index.html<\/strong>.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335187\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/create_template.png\" alt=\"Cr\u00e9ation du fichier de mod\u00e8le\" width=\"550\" height=\"148\"><\/figure>\n<\/div>\n<p>Cliquez sur <strong>OK<\/strong>. PyCharm va cr\u00e9er <strong>index.html <\/strong>et l&#8217;ouvrir pour modification.<\/p>\n<p>Le fichier est maintenant vide. Nous allons utiliser un <strong>mod\u00e8le dynamique<\/strong> pour le remplir avec un gabarit de code html. Tapez <kbd>html:5<\/kbd> et appuyez sur la touche <strong>Tab<\/strong>&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335198\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/html_live_template.gif\" alt=\"Utilisation du mod\u00e8le dynamique\" width=\"893\" height=\"359\"><\/figure>\n<\/div>\n<p>Le contenu visible d&#8217;une page html est situ\u00e9 entre les balises <code>&lt;body&gt;&lt;\/body&gt;<\/code>.&nbsp;<\/p>\n<p>Ins\u00e9rez-y le code suivant&nbsp;:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;h1&gt;Temperature at your location:&lt;\/h1&gt;\n&lt;h2&gt;{{ temp }} \u2103&lt;\/h2&gt;<\/pre>\n<p>Ici, <code>temp<\/code> est une variable qui est transf\u00e9r\u00e9e au gabarit \u00e0 partir des vues. Les noms et les valeurs des variables doivent \u00eatre enregistr\u00e9s dans un dictionnaire et transmis lors du rendu d&#8217;un gabarit. C&#8217;est ce que nous avons fait en affectant <code>{\u2018temp\u2019&nbsp;: temp}<\/code> \u00e0 la variable de contexte dans <strong>views.py <\/strong>ci-dessus.&nbsp;<\/p>\n<p>La repr\u00e9sentation Unicode du symbole de degr\u00e9s Celsius est <code>&amp;#8451<\/code>. Pour les degr\u00e9s Farenheit, utilisez <code>&amp;#8457<\/code>.&nbsp;<\/p>\n<p>Maintenant, r\u00e9ex\u00e9cutez le serveur Django pour voir les modifications et vous assurer que l&#8217;application fonctionne comme pr\u00e9vu. Si vous avez modifi\u00e9 la configuration d&#8217;ex\u00e9cution comme expliqu\u00e9 ci-dessus, la fen\u00eatre du navigateur doit s&#8217;ouvrir automatiquement&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335209\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/image-50.png\" alt=\"Page d'application g\u00e9n\u00e9r\u00e9e depuis le gabarit\" width=\"448\" height=\"178\"><\/figure>\n<\/div>\n<h3 class=\"wp-block-heading\">Cr\u00e9ation d&#8217;une base de donn\u00e9es et d&#8217;un mod\u00e8le<\/h3>\n<p>Pour obtenir de l&#8217;API les donn\u00e9es sur la temp\u00e9rature \u00e0 une certaine position, il faut fournir les coordonn\u00e9es de cette position.<\/p>\n<p>Nous allons utiliser la <a href=\"https:\/\/www.kaggle.com\/datasets\/juanmah\/world-cities\" target=\"_blank\" rel=\"noopener\">base de donn\u00e9es World cities <\/a> de <a href=\"https:\/\/www.kaggle.com\/juanmah\" target=\"_blank\" rel=\"noreferrer noopener\">Juanma Hern\u00e1ndez<\/a> avec la licence <a href=\"https:\/\/creativecommons.org\/licenses\/by\/4.0\/\" target=\"_blank\" rel=\"noreferrer noopener\">CC BY 4.0<\/a>. T\u00e9l\u00e9chargez la base de donn\u00e9es et extrayez <strong>worldcities.csv<\/strong> de l&#8217;archive. Vous devez vous inscrire sur <a href=\"https:\/\/www.kaggle.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Kaggle<\/a> si vous n&#8217;y avez pas de compte.<\/p>\n<p>Nous devons \u00e9galement ajouter la base de donn\u00e9es <strong>db.sqlite3<\/strong>, cr\u00e9\u00e9e automatiquement par Django, \u00e0 notre projet PyCharm.<\/p>\n<p>Pour ce faire&nbsp;:<\/p>\n<ol>\n<li>Ouvrez la fen\u00eatre d&#8217;outils <strong>Database<\/strong> en cliquant sur l&#8217;ic\u00f4ne de base de donn\u00e9es \u00e0 gauche. Vous pouvez \u00e9galement acc\u00e9der \u00e0 l&#8217;ensemble des fen\u00eatres d&#8217;outils en appuyant sur <strong>\u2318E<\/strong> \/<strong> Ctrl+E<\/strong>&nbsp;:<\/li>\n<\/ol>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335243\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/open_database_tool_window.png\" alt=\"Acc\u00e8s \u00e0 la fen\u00eatre d'outil Database\" width=\"500\" height=\"392\"><\/figure>\n<\/div>\n<ol start=\"2\">\n<li>Cliquez sur <strong>+<\/strong> dans le coin sup\u00e9rieur gauche de la fen\u00eatre d&#8217;outils, puis s\u00e9lectionnez <strong>Data Source &gt; SQLite<\/strong>. Vous pouvez commencer \u00e0 taper <kbd>sq\u2026<\/kbd> pour atteindre l&#8217;option voulue plus vite&nbsp;:<\/li>\n<\/ol>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335257\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/create_sql_source.png\" alt=\"Cr\u00e9ation d'une source de donn\u00e9es SQL Lite\" width=\"509\" height=\"327\"><\/figure>\n<\/div>\n<ol start=\"3\">\n<li>Cliquez sur <strong>\u2026<\/strong> pr\u00e8s du champ <strong>File<\/strong> et recherchez le fichier <strong>db.sqlite3<\/strong> dans votre dossier de projet.<\/li>\n<li>Il peut \u00eatre n\u00e9cessaire d&#8217;installer, de mettre \u00e0 jour ou de changer le pilote de base de donn\u00e9es. En cas d&#8217;avertissement en bas de la fen\u00eatre, cliquez sur le lien pour ex\u00e9cuter l&#8217;action requise&nbsp;:<\/li>\n<\/ol>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335270\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/image-51.png\" alt=\"Installation\/s\u00e9lection du pilote de base de donn\u00e9es\" width=\"800\" height=\"676\"><\/figure>\n<\/div>\n<ol start=\"5\">\n<li>Cliquez sur <strong>OK<\/strong>.<\/li>\n<\/ol>\n<p>Pour importer des donn\u00e9es dans la base, faites glisser et d\u00e9placez <strong>worldcities.csv<\/strong> vers <strong>db.sqlite3<\/strong> dans la fen\u00eatre d&#8217;outils <strong>Database<\/strong>. Dans la bo\u00eete de dialogue qui s&#8217;ouvre, supprimez les colonnes inutiles pour ne garder que <strong>city, lat, lng, country<\/strong> et <strong>id<\/strong>&nbsp;:<\/p>\n<figure class=\"wp-block-video aligncenter\"><video src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/dnd_csv_to_db.mp4\" controls=\"controls\" width=\"300\" height=\"150\"><\/video><\/figure>\n<p>D\u00e9sormais, la base de donn\u00e9es <strong>db.sqlite3<\/strong> contient le tableau <strong>worldcities<\/strong>&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335292\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/worldcities_table_in_db.png\" alt=\"Table worldcities dans la structure de base de donn\u00e9es\" width=\"457\" height=\"180\"><\/figure>\n<\/div>\n<p>Vous pouvez faire un double-clic dessus pour en afficher le contenu dans l&#8217;\u00e9diteur.<\/p>\n<p>Django utilise des mod\u00e8les pour interagir avec les bases de donn\u00e9es. Nous allons cr\u00e9er un mod\u00e8le pour activer la lecture des donn\u00e9es depuis la table <strong>worldcities<\/strong>.<\/p>\n<ol>\n<li>Lancez la console de t\u00e2ches <strong>manage.py<\/strong> en appuyant sur <strong>\u2325R<\/strong> \/ <strong>Ctrl+Alt+R<\/strong>.&nbsp;<\/li>\n<li>Saisissez <kbd>inspectdb worldcities<\/kbd> et appuyez sur <strong>Entr\u00e9e<\/strong>.<\/li>\n<li>Copiez la classe <code>Worldcities<\/code> de la sortie de la console dans <strong>meteomodels.py<\/strong>.<\/li>\n<li>Remplacez <code>null=True<\/code> par <code>primary_key=True<\/code> pour le champ id.<\/li>\n<\/ol>\n<p>Vous devriez obtenir quelque chose comme cela :<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"9\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">from django.db import models\n\n\nclass Worldcities(models.Model):\n    city = models.TextField(blank=True, null=True)\n    lat = models.FloatField(blank=True, null=True)\n    lng = models.FloatField(blank=True, null=True)\n    country = models.TextField(blank=True, null=True)\n    id = models.IntegerField(blank=True, primary_key=True)\n\n    class Meta:\n        managed = False\n        db_table = 'worldcities'<\/pre>\n<h3 class=\"wp-block-heading\">Ajouter des fonctionnalit\u00e9s<\/h3>\n<p>Jusqu&#8217;\u00e0 pr\u00e9sent, nous n&#8217;avions qu&#8217;une seule fonction (<code>temp_here<\/code>) dans <strong>views.py<\/strong> qui renvoyait des informations sur la temp\u00e9rature actuelle \u00e0 notre position. Nous allons ajouter une autre fonction pour afficher la temp\u00e9rature de la position demand\u00e9e. Elle doit \u00e9galement obtenir les donn\u00e9es de temp\u00e9rature actuelle depuis l&#8217;API. Par cons\u00e9quent, conform\u00e9ment aux bonnes pratiques de Python, nous devons d\u00e9placer cette fonctionnalit\u00e9 vers une fonction distincte.<\/p>\n<p>Dans PyCharm, cette op\u00e9ration se fait simplement avec la refactorisation <strong>Extract method<\/strong>.<\/p>\n<p>S\u00e9lectionnez les lignes \u00e0 d\u00e9placer vers une autre fonction et appuyez sur <strong>\u2325\u2318M<\/strong> \/ <strong>Ctrl+Alt+M<\/strong>. Vous pouvez \u00e9galement utiliser <strong>Find Action<\/strong>&nbsp;:<\/p>\n<figure class=\"wp-block-video aligncenter\"><video src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/extract_method.mp4\" controls=\"controls\" width=\"300\" height=\"150\"><\/video><\/figure>\n<p>Sp\u00e9cifiez <code>get_temp<\/code> dans le champ <strong>Method name<\/strong> et cliquez sur <strong>OK<\/strong>. Nous obtenons ainsi une fonction <code>get_temp<\/code> qui accepte <code>location<\/code> comme seul param\u00e8tre.<\/p>\n<p>La fonction <code>temp_here<\/code> l&#8217;appelle pour recevoir la temp\u00e9rature \u00e0 la position actuelle.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335315\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/after_extract_method.png\" alt=\"Le r\u00e9sultat de la refactorisation Extract Method\" width=\"892\" height=\"528\"><\/figure>\n<\/div>\n<p>Nous allons cr\u00e9er la fonction <code>temp_somewhere<\/code>. Elle doit transf\u00e9rer les coordonn\u00e9es d&#8217;une ville al\u00e9atoire \u00e0 <code>get_temp<\/code>.<\/p>\n<p>Commen\u00e7ons par un peu de prototypage dans la console Python. Ouvrez-la et collez le code suivant (si <code>ImportError<\/code> se produit, fermez et rouvrez la console)&nbsp;:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">from meteo.models import Worldcities\nrandom_item = Worldcities.objects.all().order_by('?').first()<\/pre>\n<p>Nous devons obtenir les donn\u00e9es de la table <strong>worldcities<\/strong>. Pour ce faire, nous devons importer le mod\u00e8le <code>Worldcities<\/code> depuis <strong>models.py<\/strong>.<\/p>\n<p>Ensuite, nous allons randomiser tous les objets avec <code>order_by(\u2018?\u2019)<\/code> et obtenir le premier objet avec <code>first()<\/code>. L&#8217;onglet <strong>Variables<\/strong> se trouve dans \u00e0 droite de la fen\u00eatre d&#8217;outils <strong>Python console<\/strong>. D\u00e9veloppez le n\u0153ud <strong>random_item<\/strong> pour voir le contenu de <code>random_item<\/code>&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335326\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/manual_request_2.png\" alt=\"Inspection de la variable dans l'onglet Variables de la console Python\" width=\"800\" height=\"266\"><\/figure>\n<\/div>\n<p>Le code complet de la fonction <code>temp_somewhere<\/code> devrait ressembler \u00e0 cela :<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">def temp_somewhere(request):\n    random_item = Worldcities.objects.all().order_by('?').first()\n    city = random_item.city\n    location = [random_item.lat, random_item.lng]\n    temp = get_temp(location)\n    template = loader.get_template(\"index.html\")\n    context = {\n        'city': city,\n        'temp': temp\n    }\n    return HttpResponse(template.render(context, request))<\/pre>\n<p>En plus de la temp\u00e9rature, <code>context<\/code> contient maintenant le nom de la ville. Nous allons modifier le gabarit de fa\u00e7on \u00e0 ce qu&#8217;il restitue aussi ces informations.<\/p>\n<p>Vous avez peut-\u00eatre remarqu\u00e9 l&#8217;ic\u00f4ne <strong>&lt;&gt;<\/strong> dans la goutti\u00e8re. Cliquez dessus pour passer rapidement \u00e0 <strong>index.html<\/strong>&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335337\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/gutter_icon.png\" alt=\"Ic\u00f4ne de goutti\u00e8re pour un acc\u00e8s rapide au fichier de gabarit\" width=\"613\" height=\"277\"><\/figure>\n<\/div>\n<p>Remplacez le texte entre les balises <code>&lt;h1&gt;&lt;\/h1&gt;<\/code> par <code>{{ city }}<\/code>&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335348\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/replace_h1.png\" alt=\"Remplacement d'un en-t\u00eate par une variable\" width=\"674\" height=\"400\"><\/figure>\n<\/div>\n<p>Cliquez sur l&#8217;ic\u00f4ne de goutti\u00e8re pour acc\u00e9der rapidement \u00e0 la fonction <code>temp_here<\/code>&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335359\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/gutter_icon_2.png\" alt=\"Ic\u00f4ne de goutti\u00e8re pour un acc\u00e8s rapide au fichier Python\" width=\"670\" height=\"332\"><\/figure>\n<\/div>\n<p>Nous devons la modifier de fa\u00e7on \u00e0 ce qu&#8217;elle transf\u00e8re \u00e9galement la variable <code>city<\/code>&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335370\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/modified_temp_here.png\" alt=\"Mise \u00e0 jour de la fonction temp_here\" width=\"604\" height=\"225\"><\/figure>\n<\/div>\n<p>La fonction <code>temp_here<\/code> est appel\u00e9e lorsque la page <kbd>https:\/\/127.0.0.1\/meteo<\/kbd> est ouverte dans le navigateur, que nous avons configur\u00e9 dans <strong>meteo\/urls.py<\/strong>.<\/p>\n<p>Revenez \u00e0 cet endroit et sp\u00e9cifiez que <code>temp_somewhere<\/code> doit \u00eatre appel\u00e9 en cas d&#8217;acc\u00e8s \u00e0 <kbd>https:\/\/127.0.0.1\/meteo\/discover<\/kbd>&nbsp;:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"3\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">urlpatterns = [\n    path('meteo\/', views.temp_here, name='temp_here'),\n    path('meteo\/discover', views.temp_somewhere, name='temp_somewhere'),\n]<\/pre>\n<p>Revenez \u00e0 <strong>index.html<\/strong> et ajoutez des liens \u00e0 la page <strong>\/discover<\/strong> et \u00e0 la page d&#8217;accueil. Cette derni\u00e8re affichera toujours la temp\u00e9rature \u00e0 la position actuelle. Les mod\u00e8les dynamiques et la saisie semi-automatique du code permettent de gagner beaucoup de temps&nbsp;:<\/p>\n<figure class=\"wp-block-video aligncenter\"><video src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/completion_add_links_to_template.mp4\" controls=\"controls\" width=\"300\" height=\"150\"><\/video><\/figure>\n<p>Pour utiliser des mod\u00e8les dynamiques pour les paragraphes et les liens dans des fichiers html, saisissez <kbd>p<\/kbd> ou <kbd>a<\/kbd>, puis appuyez sur la touche de <strong>Tab<\/strong>.<\/p>\n<p>Pour voir la liste compl\u00e8te des mod\u00e8les dynamiques disponibles, ouvrez les param\u00e8tres (<strong>\u2318<\/strong> \/ <strong>Ctrl+Alt+S<\/strong>), allez \u00e0 <strong>Editor &gt; Live Templates<\/strong>, puis d\u00e9veloppez le n\u0153ud <strong>Zen HTML<\/strong> dans le volet de droite&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335392\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/live_templates_settings.png\" alt=\"Configurer les param\u00e8tres de mod\u00e8les dynamiques\" width=\"800\" height=\"584\"><\/figure>\n<\/div>\n<p>Vous pouvez ex\u00e9cuter \u00e0 nouveau le serveur et vous amuser avec l&#8217;application.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335403\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/play_with_links.gif\" alt=\"\" width=\"351\" height=\"205\"><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\">Ne vous arr\u00eatez pas l\u00e0<\/h2>\n<p>L&#8217;application est fonctionnelle, mais peut encore \u00eatre am\u00e9lior\u00e9e. Le point d&#8217;am\u00e9lioration le plus \u00e9vident a priori est l&#8217;aspect visuel, mais il est aussi possible d&#8217;ajouter des fonctionnalit\u00e9s.<\/p>\n<h3 class=\"wp-block-heading\">Utiliser CSS<\/h3>\n<p>L&#8217;utilisation de CSS est la solution la plus simple et rapide pour am\u00e9liorer l&#8217;aspect de votre application Django. Vous pouvez par exemple utiliser <a href=\"https:\/\/simplecss.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Simple.CSS<\/a>.<\/p>\n<p>Placez la ligne suivante quelque part entre les balises <code>&lt;head&gt;&lt;\/head&gt;<\/code> dans <strong>index.html<\/strong>&nbsp;:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.simplecss.org\/simple.min.css\"&gt;<\/pre>\n<p>Voici \u00e0 quoi ressemble l&#8217;application ensuite&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335414\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/image-52.png\" alt=\"Application de feuilles de style CSS\" width=\"296\" height=\"333\"><\/figure>\n<\/div>\n<p>Remplacer les liens par des boutons permet d&#8217;am\u00e9liorer encore un peu plus la pr\u00e9sentation&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335425\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/image-53.png\" alt=\"Remplacement des liens par des boutons\" width=\"319\" height=\"347\"><\/figure>\n<\/div>\n<p>Pour ce faire, remplacez les liens entre les balises <code>&lt;p&gt;&lt;\/p&gt;<\/code> dans <strong>index.html<\/strong> par le code html suivant&nbsp;:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div style=\"display: flex;\"&gt;\n    &lt;form action=\".\/discover\"&gt;\n        &lt;input type=\"submit\" value=\"Check other places\"\/&gt;\n    &lt;\/form&gt;\n    &amp;nbsp;\n    &lt;form action=\".\"&gt;\n        &lt;input style=\"background: #dc3545\" type=\"submit\" value=\"Home\"\/&gt;\n    &lt;\/form&gt;\n&lt;\/div&gt;<\/pre>\n<p>Vous pouvez voir les r\u00e9sultats de la modification de <strong>index.html<\/strong> sans avoir \u00e0 quitter PyCharm pour aller dans un navigateur. Survolez le coin sup\u00e9rieur droit de la fen\u00eatre de l&#8217;\u00e9diteur et s\u00e9lectionnez <strong>Built-in Preview<\/strong>&nbsp;:<\/p>\n<figure class=\"wp-block-video\"><video src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/built_in_preview.mp4\" controls=\"controls\" width=\"300\" height=\"150\"><\/video><\/figure>\n<h3 class=\"wp-block-heading\">Utiliser Bootstrap<\/h3>\n<p><a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap<\/a> est un outil frontend puissant et gratuit. Pour l&#8217;appliquer rapidement \u00e0 votre application Django, modifiez <strong>index.html<\/strong> de la fa\u00e7on suivante (pour plus d&#8217;informations, consultez le <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/introduction\/#quick-start\" target=\"_blank\" rel=\"noreferrer noopener\">guide de prise en main de Bootstrap<\/a>)&nbsp;:<\/p>\n<ol>\n<li>Ajoutez la balise <code>link<\/code> dans la section head du fichier html (remplacez l&#8217;entr\u00e9e simple.css ins\u00e9r\u00e9e lors de l&#8217;\u00e9tape pr\u00e9c\u00e9dente)&nbsp;:<\/li>\n<\/ol>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3\/Jr59b6EGGoI1aFkw7cmDA6j6gD\" crossorigin=\"anonymous\"&gt;<\/pre>\n<p>2. Ajoutez le code suivant entre les balises <code>&lt;body&gt;&lt;\/body&gt;<\/code>&nbsp;:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"container text-center\"&gt;\n    &lt;h1&gt;{{ city }}&lt;\/h1&gt;\n    &lt;h2&gt;{{ temp }} \u2103&lt;\/h2&gt;\n    &lt;div class=\"btn-group\" role=\"group\"&gt;\n        &lt;button type=\"button\" class=\"btn btn-outline-primary\" onclick=\"location.href='.\/discover'\"&gt;Check other places\n        &lt;\/button&gt;\n        &lt;button type=\"button\" class=\"btn btn-danger\" onclick=\"location.href='.'\"&gt;Home&lt;\/button&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha1\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;<\/pre>\n<p>Regardez le r\u00e9sultat&nbsp;:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335471\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/bootstrap.gif\" alt=\"Utilisation de Bootstrap dans l'application\" width=\"300\" height=\"178\"><\/figure>\n<\/div>\n<p>Bootstrap offre de nombreuses possibilit\u00e9s de personnalisation de vos applications. Vous trouverez toutes les informations n\u00e9cessaires dans la <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/introduction\/\" target=\"_blank\" rel=\"noreferrer noopener\">documentation<\/a>.<\/p>\n<h3 class=\"wp-block-heading\">\u00c0 vous de jouer<\/h3>\n<p>Nous avons ajout\u00e9 le champ <code>country<\/code> provenant de la base de donn\u00e9es <strong>worldcities<\/strong> au mod\u00e8le <code>Worldcities<\/code>, mais n&#8217;avons pas encore utilis\u00e9 ces donn\u00e9es dans l&#8217;application. Vous pouvez maintenant tester vos comp\u00e9tences en essayant de cr\u00e9er une application qui affiche les du pays en plus des villes. Vous devriez obtenir un r\u00e9sultat similaire \u00e0 ceci :<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-335482\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2023\/03\/check_yourself.gif\" alt=\"Ajouter des informations sur le pays \u00e0 l'application\" width=\"262\" height=\"286\"><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\">R\u00e9sum\u00e9<\/h2>\n<p>Dans ce tutoriel, nous avons vu comment&nbsp;:<\/p>\n<ul>\n<li>Cr\u00e9er des projets Django dans PyCharm<\/li>\n<li>Cr\u00e9er des vues et des gabarits<\/li>\n<li>Faire des appels d&#8217;API et traiter les r\u00e9ponses<\/li>\n<li>Se connecter \u00e0 des bases de donn\u00e9es et importer des donn\u00e9es<\/li>\n<li>Am\u00e9liorer l&#8217;aspect de l&#8217;application en utilisant CSS et Bootstrap.<\/li>\n<\/ul>\n\n\n<p><\/p>\n\n\n\n<p><em>Article original en anglais de<\/em> :<\/p>\n\n\n    <div class=\"about-author \">\n        <div class=\"about-author__box\">\n            <div class=\"row\">\n                <div class=\"about-author__box-img\">\n                    <img decoding=\"async\" src=\"https:\/\/secure.gravatar.com\/avatar\/?s=200&#038;r=g\" width=\"200\" height=\"200\" alt=\"\" loading=\"lazy\"  class=\"avatar avatar-200 wp-user-avatar wp-user-avatar-200 photo avatar-default\">\n                <\/div>\n                <div class=\"about-author__box-text\">\n                                                        <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n","protected":false},"author":813,"featured_media":358063,"comment_status":"closed","ping_status":"closed","template":"","categories":[2347],"tags":[],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/pycharm\/356989"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/pycharm"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/types\/pycharm"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/users\/813"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/comments?post=356989"}],"version-history":[{"count":10,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/pycharm\/356989\/revisions"}],"predecessor-version":[{"id":358089,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/pycharm\/356989\/revisions\/358089"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/media\/358063"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/media?parent=356989"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/categories?post=356989"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/tags?post=356989"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/cross-post-tag?post=356989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}