<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Kaushal Sharma</title>
    <description>The latest articles on DEV Community by Kaushal Sharma (@skazi019).</description>
    <link>https://dev.to/skazi019</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F832124%2F4aaca805-7837-4892-97b8-a27f3f6946cb.jpeg</url>
      <title>DEV Community: Kaushal Sharma</title>
      <link>https://dev.to/skazi019</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/skazi019"/>
    <language>en</language>
    <item>
      <title>A simple guide to using the Useless Facts API</title>
      <dc:creator>Kaushal Sharma</dc:creator>
      <pubDate>Fri, 01 Jul 2022 12:02:20 +0000</pubDate>
      <link>https://dev.to/skazi019/a-simple-guide-to-using-the-useless-facts-api-gm3</link>
      <guid>https://dev.to/skazi019/a-simple-guide-to-using-the-useless-facts-api-gm3</guid>
      <description>&lt;p&gt;So, over the course of two weeks filled with pain and despair due to sickness, I created a simple API in django rest framework&lt;br&gt;
to learn about itself and also apply concepts like Token Authentication, Scoped Rate Limiting, and how to document APIs to name a few.&lt;/p&gt;

&lt;p&gt;Now, realizing that getting data is not so cheap and also scraping someone else's website can put unnessesary load on their website&lt;br&gt;
and their wallet, I'm making whatever data I've collected available to everyone else through these APIs.&lt;/p&gt;


&lt;h3&gt;
  
  
  Steps to using these APIs
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Step 1&lt;/strong&gt;: Call the &lt;code&gt;/auth/login/&lt;/code&gt; endpoint, or &lt;code&gt;/auth/registration/&lt;/code&gt; if you are a new user, to get back a &lt;em&gt;Token&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Note- All demonstration done using &lt;a href="https://httpie.io/cli"&gt;httpie&lt;/a&gt;, but you can see how to do it using curl in the swagger doc &lt;a href="https://uselessfacts.fly.dev/swagger/"&gt;here&lt;/a&gt;&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;http POST https://uselessfacts.fly.dev/auth/login/ &lt;span class="nv"&gt;username&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&amp;lt;your-registered-username&amp;gt; &lt;span class="nv"&gt;password&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&amp;lt;your-registered-password&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;OR&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;http POST https://uselessfacts.fly.dev/auth/registration/ &lt;span class="nv"&gt;username&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&amp;lt;your-choice-of-username&amp;gt; &lt;span class="nv"&gt;password1&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&amp;lt;your-choice-of-password&amp;gt;  &lt;span class="nv"&gt;password2&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&amp;lt;same-as-password1&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You'll get back the following response -&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="s2"&gt;"key"&lt;/span&gt;: &lt;span class="s2"&gt;"c596a03fd15783e14d512c843a7ee4ba84ea77eb"&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is the token we were talking about&lt;/p&gt;



&lt;p&gt;&lt;strong&gt;Step 2&lt;/strong&gt;: Send this &lt;em&gt;Token&lt;/em&gt; as &lt;em&gt;Authorization&lt;/em&gt; while calling the &lt;code&gt;v1&lt;/code&gt; APIs to get back the useless facts!&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;http POST https://uselessfacts.fly.dev/v1/random-fact/ &lt;span class="s1"&gt;'Authorization: Token c596a03fd15783e14d512c843a7ee4ba84ea77eb'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;OR&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;http POST https://uselessfacts.fly.dev/v1/fact/145/ &lt;span class="s1"&gt;'Authorization: Token c596a03fd15783e14d512c843a7ee4ba84ea77eb'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And upon successful request you'll get back the useless fact like below&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="s2"&gt;"data"&lt;/span&gt;: &lt;span class="o"&gt;{&lt;/span&gt;
        &lt;span class="s2"&gt;"fact"&lt;/span&gt;: &lt;span class="s2"&gt;"California consumes more bottled water than any other product."&lt;/span&gt;,
        &lt;span class="s2"&gt;"id"&lt;/span&gt;: 145
    &lt;span class="o"&gt;}&lt;/span&gt;,
    &lt;span class="s2"&gt;"status"&lt;/span&gt;: &lt;span class="s2"&gt;"success"&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can check out other respones in the swagger documentation &lt;a href="https://uselessfacts.fly.dev/swagger/"&gt;here&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now the most important step, like a good person make sure you logout as well!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 3&lt;/strong&gt;: To logout call the &lt;code&gt;/auth/logout/&lt;/code&gt; endpoint with no body with sending the &lt;em&gt;Token&lt;/em&gt; in authorization just like we did in the previous step&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;http POST https://uselessfacts.fly.dev/auth/logout/ &lt;span class="s1"&gt;'Authorization: Token c596a03fd15783e14d512c843a7ee4ba84ea77eb'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Upon successful request you should get the following response -&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="s2"&gt;"detail"&lt;/span&gt;: &lt;span class="s2"&gt;"Successfully logged out."&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can explore all the other available endpoints as well as the models in the swagger documentation mentioned above.&lt;/p&gt;

&lt;p&gt;You can get in touch with me here or on &lt;a href="https://www.linkedin.com/in/kaushal-sharma-/"&gt;LinkedIn&lt;/a&gt; OR &lt;a href="https://www.instagram.com/kaushal_dev.py/"&gt;Instagram&lt;/a&gt; !&lt;/p&gt;

</description>
      <category>api</category>
      <category>opensource</category>
      <category>showdev</category>
      <category>django</category>
    </item>
    <item>
      <title>Create and Deploy your first Flask app</title>
      <dc:creator>Kaushal Sharma</dc:creator>
      <pubDate>Tue, 17 May 2022 10:31:43 +0000</pubDate>
      <link>https://dev.to/skazi019/create-and-deploy-your-first-flask-app-2o4c</link>
      <guid>https://dev.to/skazi019/create-and-deploy-your-first-flask-app-2o4c</guid>
      <description>&lt;p&gt;So, you’ve been banging your head for some time now trying to understand -&lt;/p&gt;



&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;what is this Flask framework and how do I use it&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;



&lt;p&gt;I know, I’ve been there too. But don’t worry, you don’t have to go through all the pain of searching articles for days to understand it’s functionalities.&lt;/p&gt;



&lt;p&gt;Here, we’ll make a simple weather application using Flask to understand it’s functionalities and also cover some core concepts like -&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Creating and maintaining virtual environments using &lt;strong&gt;&lt;em&gt;pipenv&lt;/em&gt;&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;How does &lt;strong&gt;routes&lt;/strong&gt; work in Flask&lt;/li&gt;
&lt;li&gt;How to render HTML &lt;strong&gt;Templates&lt;/strong&gt; in Flask&lt;/li&gt;
&lt;li&gt;Interacting with public APIs&lt;/li&gt;
&lt;li&gt;Passing data from &lt;strong&gt;Python&lt;/strong&gt; to &lt;strong&gt;HTML&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;How to get and process &lt;strong&gt;user input&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;How to serve &lt;strong&gt;static files&lt;/strong&gt;(CSS, JS, images etc) in Flask&lt;/li&gt;
&lt;li&gt;How to work with &lt;strong&gt;environment variables&lt;/strong&gt; in python&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Deploying&lt;/strong&gt; your ****Flask app on Heroku&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Right, the list seems quite a bit for a simple app but trust me, you’ll zoom past it in no time!&lt;/p&gt;



&lt;p&gt;Here’s what we’re gonna build - &lt;a href="https://kaushalsharma-flaskweatherapp.herokuapp.com/" rel="noopener noreferrer"&gt;Live app&lt;/a&gt;&lt;/p&gt;


&lt;div&gt;
  &lt;iframe src="https://loom.com/embed/ea615549ba9c43cb9f7812a31b5a7f90"&gt;
  &lt;/iframe&gt;
&lt;/div&gt;


&lt;p&gt;And let’s get right into it!&lt;/p&gt;



&lt;h3&gt;
  
  
  Creating and maintaining virtual environments using &lt;em&gt;pipenv&lt;/em&gt;
&lt;/h3&gt;

&lt;p&gt;First, we’ll create a new folder for our project, I’ll name it “SimpleFlaskWeatherApp”, and then initialise a virtual environment.&lt;/p&gt;



&lt;p&gt;For creating a virtual environment i’ll be using &lt;strong&gt;&lt;em&gt;pipenv&lt;/em&gt;&lt;/strong&gt; rather than virtualenv or pyenv. &lt;strong&gt;&lt;em&gt;pipenv&lt;/em&gt;&lt;/strong&gt; was first released in 2018 and it aims to simply the workflow by bringing the packaging concepts from bundlers, npm, yarn etc to python!&lt;/p&gt;



&lt;p&gt;It automatically creates and manages the virtualenv for your projects by creating a &lt;code&gt;Pipfile&lt;/code&gt; and &lt;code&gt;Pipfile.lock&lt;/code&gt; without you having to do anything except installing the packages you need!&lt;/p&gt;



&lt;p&gt;First install pipenv by entering the command in your terminal-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;pip &lt;span class="nb"&gt;install &lt;/span&gt;pipenv
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;if you have multiple versions of python then type the command,&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;python3.x &lt;span class="nt"&gt;-m&lt;/span&gt; pip &lt;span class="nb"&gt;install &lt;/span&gt;pipenv
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;where x would be your choice of python version installed on your system&lt;/p&gt;

&lt;p&gt;Now, to create a virtual env, go into your project folder and type -&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;pipenv shell
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;p&gt;this should create a virtualenv for your project with the name of your project folder followed by some random characters.&lt;/p&gt;

&lt;p&gt;In my case, you can see it on the right of the image, it’s “SimpleFlaskWeatherApp-0rR_1i25”&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff2ko05ip40o0qf6ezyoy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff2ko05ip40o0qf6ezyoy.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;



&lt;p&gt;If you list the contents of your directory, you would see that &lt;code&gt;pipenv&lt;/code&gt; has created a &lt;code&gt;Pipfile&lt;/code&gt; which it would use to manage your entire project dependency. It looks something like this -&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftarw2g1gdg8fv56pzkdn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftarw2g1gdg8fv56pzkdn.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you now want to install any python package, simple type the following command&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;pipenv &lt;span class="nb"&gt;install &lt;/span&gt;flask
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;p&gt;This would install and make the package available to your project and also add it to your &lt;code&gt;Pipfile&lt;/code&gt; automatically!&lt;/p&gt;

&lt;p&gt;If you later want to pass this environment to someone else then you don’t have to create a requirements.txt, just give them your &lt;code&gt;Pipfile.lock&lt;/code&gt; file. Then all they have to do is run the command &lt;code&gt;pipenv install&lt;/code&gt; and &lt;strong&gt;pipenv&lt;/strong&gt; will automatically create a virtualenv and install all the packages that are required and re-create the exact same environment.&lt;/p&gt;

&lt;p&gt;How cool is that!&lt;/p&gt;



&lt;p&gt;After installing flask, our Pipfile looks something like this -&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpb7xr1vch41oo1qxf5gr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpb7xr1vch41oo1qxf5gr.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you want to exit your virtual environment, simply type &lt;code&gt;exit&lt;/code&gt; and press enter. And to activate it again, type &lt;code&gt;pipenv shell&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Since we’ve covered pipenv, let’s move on to creating our project!&lt;/p&gt;



&lt;p&gt;For context, this is what our project directory looks like -&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4uloekbc9a2vcyx22m03.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4uloekbc9a2vcyx22m03.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;



&lt;h3&gt;
  
  
  How does routes work in Flask
&lt;/h3&gt;

&lt;p&gt;Go ahead and create a file called &lt;strong&gt;app.py,&lt;/strong&gt; we’ll write a starter code for a basic flask application like below -&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;flask&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;Flask&lt;/span&gt;

&lt;span class="n"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Flask&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;__name__&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="nd"&gt;@app.route&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;/&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;index&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;&amp;lt;h1&amp;gt;This is working!&amp;lt;/h1&amp;gt;&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;

&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;__name__&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;__main__&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="n"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;run&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and run the python file&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;python app.py
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;you should get the following output -&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9v8i1tj0itlc72b9oc9d.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9v8i1tj0itlc72b9oc9d.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;



&lt;p&gt;In a flask application, the function following the &lt;code&gt;app.route&lt;/code&gt; is the logic that should be run if a user open the route specified in the &lt;code&gt;@app.route&lt;/code&gt; decorator&lt;/p&gt;

&lt;p&gt;Since we wrote &lt;code&gt;@app.route('/')&lt;/code&gt; , where “/” means the index route, if the user opens &lt;a href="http://localhost:5000" rel="noopener noreferrer"&gt;localhost:5000&lt;/a&gt;, the &lt;code&gt;index&lt;/code&gt; function logic would be executed and whatever the function returns would be returned to the user.&lt;/p&gt;



&lt;h3&gt;
  
  
  How to render HTML Templates in Flask
&lt;/h3&gt;

&lt;p&gt;We’ve returned the html as a string for now just to test whether our application works or not, but this is not practical if you want to render more complex pages with data that will be returned by us later in this article.&lt;/p&gt;



&lt;p&gt;So, instead of writing the html as a string we will create HTML files and return them instead. &lt;/p&gt;

&lt;p&gt;Go ahead and create a &lt;code&gt;templates&lt;/code&gt; folder in your project directory and inside this templates directory create an html file called &lt;code&gt;index.html&lt;/code&gt;&lt;/p&gt;



&lt;p&gt;Our directory structure looks something like this -&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgkenh7g8v0cosw52km4s.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgkenh7g8v0cosw52km4s.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;



&lt;p&gt;Inside the index.html, write a simple html code as follows -&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;html&lt;/span&gt; &lt;span class="na"&gt;lang=&lt;/span&gt;&lt;span class="s"&gt;"en"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;charset=&lt;/span&gt;&lt;span class="s"&gt;"UTF-8"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;http-equiv=&lt;/span&gt;&lt;span class="s"&gt;"X-UA-Compatible"&lt;/span&gt; &lt;span class="na"&gt;content=&lt;/span&gt;&lt;span class="s"&gt;"IE=edge"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"viewport"&lt;/span&gt; &lt;span class="na"&gt;content=&lt;/span&gt;&lt;span class="s"&gt;"width=device-width, initial-scale=1.0"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;title&amp;gt;&lt;/span&gt;Flask Weather App&lt;span class="nt"&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;This template is working&lt;span class="nt"&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;p&gt;Now, in our app.py, along with &lt;code&gt;Flask&lt;/code&gt; module also import &lt;code&gt;render_template&lt;/code&gt; module which will allow us to serve html files to the users.&lt;/p&gt;

&lt;p&gt;And in the &lt;code&gt;index&lt;/code&gt; function, simply type &lt;code&gt;return render_template('index.html')&lt;/code&gt;&lt;/p&gt;



&lt;p&gt;So our code looks like this now -&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;flask&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;Flask&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;render_template&lt;/span&gt; &lt;span class="c1"&gt;# new
&lt;/span&gt;
&lt;span class="n"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Flask&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;__name__&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="nd"&gt;@app.route&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;/&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;index&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;render_template&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;index.html&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;# new
&lt;/span&gt;
&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;__name__&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;__main__&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="n"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;run&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;p&gt;Now, if you run your application, you should see the output as below -&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp4y8gq902lny0o9s52po.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp4y8gq902lny0o9s52po.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;



&lt;p&gt;The &lt;code&gt;render_template&lt;/code&gt; function looks for the html template specified inside the templates folder that we created earlier.&lt;/p&gt;



&lt;h3&gt;
  
  
  Interacting with public APIs
&lt;/h3&gt;

&lt;p&gt;Now that we have our flask application set up to render html templates, let’s start working with public APIs.&lt;/p&gt;

&lt;p&gt;We’ll be using the Current Weather Data of &lt;a href="https://openweathermap.org/api" rel="noopener noreferrer"&gt;openweathermap.org&lt;/a&gt; to get weather data for free&lt;/p&gt;

&lt;p&gt;Sign up on the website and subscribe to the Current Weather Data API. &lt;/p&gt;

&lt;p&gt;They should provide you with an &lt;strong&gt;API key&lt;/strong&gt; to access that API. You can find it &lt;a href="https://home.openweathermap.org/api_keys" rel="noopener noreferrer"&gt;here&lt;/a&gt;. We’ll be using this API Key to make API calls to get the current weather data!&lt;/p&gt;

&lt;p&gt;First, Let’s do a simple call to the API and make sure that the API is returning data as expected.&lt;/p&gt;



&lt;p&gt;We’ll call the API using the &lt;code&gt;requests&lt;/code&gt; library in python as follows -&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;API&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;http://api.openweathermap.org/data/2.5/weather?q={city}&amp;amp;units=imperial&amp;amp;appid={api_key}&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;
&lt;span class="n"&gt;city&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;Mumbai&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;
&lt;span class="n"&gt;api_key&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;&amp;lt;your_openweather_api_key&amp;gt;&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;
&lt;span class="k"&gt;try&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="n"&gt;weather&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;requests&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;API&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;format&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="n"&gt;city&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;city&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;api_key&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;api_key&lt;/span&gt;&lt;span class="p"&gt;)).&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="k"&gt;except&lt;/span&gt; &lt;span class="nb"&gt;Exception&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Error in fetching data&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;p&gt;It is always a good idea to use &lt;code&gt;try except&lt;/code&gt; blocks wherever you are not sure about the output&lt;/p&gt;

&lt;p&gt;Now this piece of code will make a call to the API using the &lt;code&gt;city&lt;/code&gt; and &lt;code&gt;api_key&lt;/code&gt; variables and store the result in &lt;code&gt;weather&lt;/code&gt; variable&lt;/p&gt;

&lt;p&gt;but before we can display this result to the user, we must first &lt;strong&gt;check&lt;/strong&gt; that infact, we have got back a &lt;strong&gt;correct result&lt;/strong&gt;!&lt;/p&gt;

&lt;p&gt;In &lt;code&gt;HTTP&lt;/code&gt; status codes, &lt;strong&gt;200&lt;/strong&gt; means that the API call was &lt;strong&gt;success&lt;/strong&gt; and you have received some data and &lt;strong&gt;404&lt;/strong&gt; means there was some &lt;strong&gt;error&lt;/strong&gt; when you sent the API request.&lt;/p&gt;

&lt;p&gt;We’ll be checking the status code of our API call by checking the key value &lt;code&gt;cod&lt;/code&gt; that would be present in the &lt;code&gt;weather&lt;/code&gt; variable after the API call was made. if the value of &lt;code&gt;cod&lt;/code&gt; is 200, that means we have correct data, if it is 404 or if we did not receive an output from the API, then it means we made a mistake while calling the API.&lt;/p&gt;



&lt;p&gt;The code for that would be like this -&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;weather&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;cod&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
                &lt;span class="c1"&gt;# We got correct result
&lt;/span&gt;        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;render_template&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;index.html&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;else&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="c1"&gt;# We got incorrect/no result
&lt;/span&gt;        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;render_template&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;error.html&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Create an &lt;code&gt;error.html&lt;/code&gt; file alongside your &lt;code&gt;index.html&lt;/code&gt; file in the &lt;strong&gt;templates&lt;/strong&gt; folder, and just write a simple code to let you know that some error has occured&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;Some error ocurred while making the API call&lt;span class="nt"&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Ideally, you should have proper error handling for all the status codes like &lt;code&gt;4xx&lt;/code&gt; and &lt;code&gt;5xx&lt;/code&gt; , but for the context of this article is should suffice.&lt;/p&gt;



&lt;p&gt;Our code for &lt;code&gt;app.py&lt;/code&gt; looks something like this now -&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;requests&lt;/span&gt;
&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;flask&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;Flask&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;render_template&lt;/span&gt;

&lt;span class="n"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Flask&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;__name__&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="nd"&gt;@app.route&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;/&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;index&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt;
    &lt;span class="n"&gt;URL&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;http://api.openweathermap.org/data/2.5/weather?q={city}&amp;amp;units=imperial&amp;amp;appid={api_key}&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;
    &lt;span class="n"&gt;city&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;Mumbai&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;
    &lt;span class="n"&gt;api_key&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;&amp;lt;your_openweather_api_key&amp;gt;&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;
    &lt;span class="k"&gt;try&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="n"&gt;weather&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;requests&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;URL&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;format&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
            &lt;span class="n"&gt;city&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;city&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;api_key&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;api_key&lt;/span&gt;&lt;span class="p"&gt;)).&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="k"&gt;except&lt;/span&gt; &lt;span class="nb"&gt;Exception&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Error in fetching data&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;weather&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;cod&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;render_template&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;index.html&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;else&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;render_template&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;error.html&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;__name__&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;__main__&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="n"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;run&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;p&gt;If you restart the app and open &lt;strong&gt;localhost:5000&lt;/strong&gt;, you would still get the “&lt;strong&gt;This template is working&lt;/strong&gt;” message which we wrote in the html.&lt;/p&gt;



&lt;h3&gt;
  
  
  Passing data from &lt;strong&gt;Python&lt;/strong&gt; to &lt;strong&gt;HTML&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;You must be wondering&lt;/p&gt;



&lt;blockquote&gt;
&lt;p&gt;Why is the data that we received from the API call not showing in our template?&lt;/p&gt;
&lt;/blockquote&gt;



&lt;p&gt;That’s because we have to pass that data, or infact any data that we want to show to the user, to the template in the &lt;code&gt;render_template&lt;/code&gt; function&lt;/p&gt;



&lt;p&gt;Here’s how we would do it -&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;render_template&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;index.html&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;weather&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;weather&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;p&gt;And in your &lt;code&gt;index.html&lt;/code&gt; file, simply write the variable name enclosed within &lt;strong&gt;two curly braces&lt;/strong&gt; like below -&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;...
&lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;This template is working&lt;span class="nt"&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;{{ weather }}&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
...
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now if you restart your app and refresh the page, you should be able to see the data that is returned by the API we called!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fckvnvha40e8nqufqdgpi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fckvnvha40e8nqufqdgpi.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Sweet! now we can pass data from our python code and show it to the user!&lt;/p&gt;



&lt;p&gt;Python frameworks like &lt;strong&gt;Flask&lt;/strong&gt; or &lt;strong&gt;Django&lt;/strong&gt; use a templating language for html called &lt;strong&gt;Jinja2&lt;/strong&gt; which enables us to pass data from our python code and display it to the user and also get data from the html given by user and use it in our python logic, which is how we were able to pass the data from python to html.&lt;/p&gt;



&lt;blockquote&gt;
&lt;p&gt;But we do not want to show the user all of the data. how do we select only certain parts it?&lt;/p&gt;
&lt;/blockquote&gt;



&lt;p&gt;Since it’s a &lt;strong&gt;dictionary&lt;/strong&gt;, we can access it the way we acess a dictionary, but there is a twist to it.&lt;/p&gt;

&lt;p&gt;we cannot access the dictionary like &lt;code&gt;my_dict["key"]&lt;/code&gt; . To do it in html, or rather jinja, we would do &lt;code&gt;my_dict.key&lt;/code&gt;, we have to use the &lt;strong&gt;dot notation&lt;/strong&gt;!&lt;/p&gt;

&lt;p&gt;Let’s filter out the raw &lt;code&gt;weather&lt;/code&gt; data and keep only the useful bits! Our &lt;code&gt;index.html&lt;/code&gt; after filtering would look like this -&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;...
&lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;This template is working&lt;span class="nt"&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;{{ weather.timeOfDay }}&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;{{ weather.weather.0.main }}&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;{{ weather.name }} &lt;span class="nt"&gt;&amp;lt;span&amp;gt;&lt;/span&gt;{{ weather.sys.country }}&lt;span class="nt"&gt;&amp;lt;/span&amp;gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;{{ weather.main.temp }}&lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;
                &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;{{ weather.main.humidity }}&lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;
                &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;{{ weather.wind.speed }}&lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
...
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We can also use &lt;strong&gt;control flow&lt;/strong&gt; like &lt;code&gt;if else&lt;/code&gt; or &lt;code&gt;for loop&lt;/code&gt; in our html file! we’ll wrap all the divs containing reference to weather variable after our &lt;code&gt;h1&lt;/code&gt; tag under an if statement so that we only show the result from the API call if we have some data in the weather variable, else we do not show anything&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;This template is working&lt;span class="nt"&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
    {% if weather %}  &lt;span class="c"&gt;&amp;lt;!-- new --&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;{{ weather.timeOfDay }}&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
        . . .
        &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
    {% endif %}  &lt;span class="c"&gt;&amp;lt;!-- new --&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;p&gt;Now if you restart your app and refresh, you should see something like this -&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fylidw7by4dulrjadozrc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fylidw7by4dulrjadozrc.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is all the data that we have to show the user!&lt;/p&gt;



&lt;h3&gt;
  
  
  How to get and process user input
&lt;/h3&gt;

&lt;p&gt;Let’s now add a &lt;strong&gt;search box&lt;/strong&gt; that will allow the user to search for places they like and get details of those places. Add a &lt;code&gt;form&lt;/code&gt; and inside that form add a &lt;code&gt;input&lt;/code&gt; search box to get input of city and a &lt;code&gt;button&lt;/code&gt; to submit the query.&lt;/p&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;...
&lt;span class="nt"&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;This template is working&lt;span class="nt"&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;form&lt;/span&gt; &lt;span class="na"&gt;method=&lt;/span&gt;&lt;span class="s"&gt;"post"&lt;/span&gt; &lt;span class="na"&gt;action=&lt;/span&gt;&lt;span class="s"&gt;"{{ url_for('index') }}"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"search"&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"city"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"submit"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Submit&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;/form&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
    {% if weather %}
    ...
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The form in html needs the action attribute which would typically be a url the html will redirect to once the form is submitted. Here, we provide the url for our &lt;code&gt;index&lt;/code&gt; page itself using the &lt;code&gt;url_for&lt;/code&gt; function inside double curly braces. Note inside the &lt;code&gt;url_for&lt;/code&gt; we give the &lt;strong&gt;function name&lt;/strong&gt; and not the route, that’s because in flask the route and function name should be &lt;strong&gt;identical&lt;/strong&gt;!&lt;/p&gt;

&lt;p&gt;This is also one of &lt;strong&gt;Jinja2&lt;/strong&gt;’s features!&lt;/p&gt;



&lt;p&gt;Since now are are submitting a &lt;strong&gt;post&lt;/strong&gt; request from our page, we need to &lt;strong&gt;handle&lt;/strong&gt; that in our function as well.&lt;/p&gt;

&lt;p&gt;Flask let’s us &lt;strong&gt;identify&lt;/strong&gt; whether a &lt;strong&gt;request&lt;/strong&gt; is &lt;code&gt;GET&lt;/code&gt; request or a &lt;code&gt;POST&lt;/code&gt; request simply by doing &lt;code&gt;request.method&lt;/code&gt; inside the function.&lt;/p&gt;

&lt;p&gt;We will now update the index function in our app.py by checking the type of request the function is receiving. &lt;/p&gt;

&lt;p&gt;If the request is a &lt;code&gt;GET&lt;/code&gt; request then just render the index.html form without any processing or API calls since it’s the first time user is loading the page.&lt;/p&gt;

&lt;p&gt;If the request is a &lt;code&gt;POST&lt;/code&gt; request, then we would &lt;strong&gt;read&lt;/strong&gt; the &lt;strong&gt;city&lt;/strong&gt; name that was submitted by the user and make the &lt;strong&gt;API call&lt;/strong&gt; to get the weather data for that city and &lt;strong&gt;return&lt;/strong&gt; the data to our index.html so that we can show the data to the user&lt;/p&gt;



&lt;p&gt;Let’s update the index function to handle different types of requests,&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;crypt&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;methods&lt;/span&gt;
&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;requests&lt;/span&gt;
&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;flask&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;Flask&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;render_template&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;request&lt;/span&gt; &lt;span class="c1"&gt;# new
&lt;/span&gt;
&lt;span class="n"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Flask&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;__name__&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="nd"&gt;@app.route&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;/&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;methods&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;GET&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;POST&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; &lt;span class="c1"&gt;# new
&lt;/span&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;index&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;request&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;method&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;POST&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="c1"&gt;# new
&lt;/span&gt;        &lt;span class="n"&gt;URL&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;http://api.openweathermap.org/data/2.5/weather?q={city}&amp;amp;units=imperial&amp;amp;appid={api_key}&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;
                &lt;span class="n"&gt;city&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;request&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;form&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;city&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;# new
&lt;/span&gt;        &lt;span class="n"&gt;api_key&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;&amp;lt;your_openweather_api_key&amp;gt;&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;
        &lt;span class="k"&gt;try&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="n"&gt;weather&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;requests&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;URL&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;format&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
                &lt;span class="n"&gt;city&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;city&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;api_key&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;api_key&lt;/span&gt;&lt;span class="p"&gt;)).&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
        &lt;span class="k"&gt;except&lt;/span&gt; &lt;span class="nb"&gt;Exception&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Error in fetching data&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;weather&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;cod&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;render_template&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;index.html&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;weather&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;weather&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="k"&gt;else&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;render_template&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;error.html&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;else&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;render_template&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;index.html&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;__name__&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;__main__&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="n"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;run&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, if you &lt;strong&gt;restart&lt;/strong&gt; the app and &lt;strong&gt;refresh&lt;/strong&gt; the page, you’ll get an &lt;strong&gt;empty&lt;/strong&gt; page because when the page is first loaded the form is not submitted hence it is a &lt;code&gt;GET&lt;/code&gt; request. &lt;/p&gt;



&lt;p&gt;If you now enter a city name and press submit, you should get weather data for that city!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq5p8wvvm1l7kpulrq8rw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq5p8wvvm1l7kpulrq8rw.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;



&lt;p&gt;But this page looks a bit dull to be honest, let’s add some CSS styling and make it come alive!&lt;/p&gt;



&lt;h3&gt;
  
  
  How to serve static files(CSS, JS, images etc) in Flask
&lt;/h3&gt;

&lt;p&gt;First, create a &lt;strong&gt;static&lt;/strong&gt; folder in your project root directory alongside the &lt;strong&gt;templates&lt;/strong&gt; folder, and add a &lt;code&gt;style.css&lt;/code&gt; to it&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgotq3nmyjhrk3uzhbj4g.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgotq3nmyjhrk3uzhbj4g.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Add some basic code in your &lt;code&gt;style.css&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="k"&gt;@import&lt;/span&gt; &lt;span class="sx"&gt;url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;1,400&amp;amp;display=swap")&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="o"&gt;*,&lt;/span&gt;
&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="nd"&gt;::before&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt;
&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="nd"&gt;::after&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;-webkit-box-sizing&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;border-box&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
          &lt;span class="nl"&gt;box-sizing&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;border-box&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nt"&gt;body&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;100vh&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;100vw&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;font-family&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s1"&gt;"Source Sans Pro"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;sans-serif&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;margin&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;background&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;linear-gradient&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="no"&gt;blueviolet&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="no"&gt;skyblue&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And to load this CSS in your html file, add a &lt;code&gt;link&lt;/code&gt; tag to your html&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;...
&lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;charset=&lt;/span&gt;&lt;span class="s"&gt;"UTF-8"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;http-equiv=&lt;/span&gt;&lt;span class="s"&gt;"X-UA-Compatible"&lt;/span&gt; &lt;span class="na"&gt;content=&lt;/span&gt;&lt;span class="s"&gt;"IE=edge"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"viewport"&lt;/span&gt; &lt;span class="na"&gt;content=&lt;/span&gt;&lt;span class="s"&gt;"width=device-width, initial-scale=1.0"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"stylesheet"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"{{ url_for('static', filename='style.css') }}"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt; &lt;span class="c"&gt;&amp;lt;!-- new --&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;title&amp;gt;&lt;/span&gt;Flask Weather App&lt;span class="nt"&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
...
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;p&gt;To load the CSS input html, we again use &lt;code&gt;url_for&lt;/code&gt; but this time we give it &lt;strong&gt;two arguments&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The &lt;strong&gt;first&lt;/strong&gt; is the &lt;strong&gt;name&lt;/strong&gt; of our static folder which is &lt;strong&gt;static&lt;/strong&gt; and &lt;strong&gt;second&lt;/strong&gt; we give it a &lt;strong&gt;filename&lt;/strong&gt; which in our case is &lt;code&gt;style.css&lt;/code&gt;&lt;/p&gt;



&lt;p&gt;You should see something like this,&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6xel65f6w9vvsuhu8x4h.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6xel65f6w9vvsuhu8x4h.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And now you can customise your page however you like!&lt;/p&gt;

&lt;p&gt;Since styling a page is very subjective, i’ll leave it upto you now. However, if you want to style it like how it is in the video at the start, i’ll link my github repo at the end of this article!&lt;/p&gt;



&lt;h3&gt;
  
  
  How to work with environment variables in python
&lt;/h3&gt;

&lt;p&gt;Remember how we are using an API key to make the API calls. Well that &lt;strong&gt;API key&lt;/strong&gt; is specific to you and should always be &lt;strong&gt;hidden&lt;/strong&gt; from others. You should also never upload this key anywhere, even on github. &lt;/p&gt;

&lt;p&gt;But then you might ask, &lt;/p&gt;



&lt;blockquote&gt;
&lt;p&gt;How can we use it in out project, &lt;strong&gt;without&lt;/strong&gt; having it in our project ?!&lt;/p&gt;
&lt;/blockquote&gt;



&lt;p&gt;Well, we can make use of something called &lt;strong&gt;environment variables&lt;/strong&gt;. We can &lt;strong&gt;add&lt;/strong&gt; some variables to the &lt;strong&gt;environment&lt;/strong&gt; that is running our code, and &lt;strong&gt;access&lt;/strong&gt; those variables in our code whenever we want!&lt;/p&gt;



&lt;p&gt;To accomplish this, first create a &lt;code&gt;.env&lt;/code&gt; file in our project root directory&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd7o089pc9s87wjhr4pfh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd7o089pc9s87wjhr4pfh.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And inside this &lt;code&gt;.env&lt;/code&gt; file, assign your API key to a variable like so&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv8cs41ya4022spx1wmc6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv8cs41ya4022spx1wmc6.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Make sure you don’t add any &lt;strong&gt;quotes&lt;/strong&gt;, just &lt;strong&gt;paste&lt;/strong&gt; your key right after the equals to sign&lt;/p&gt;



&lt;p&gt;Now to access this API key in our project, we need to install a library called &lt;code&gt;python-dotenv&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;pipenv &lt;span class="nb"&gt;install &lt;/span&gt;python-dotenv
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And we now import and initialize the packages we just installed in our project&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;os&lt;/span&gt; &lt;span class="c1"&gt;#new
&lt;/span&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;crypt&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;methods&lt;/span&gt;
&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;requests&lt;/span&gt;
&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;flask&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;Flask&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;render_template&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;request&lt;/span&gt;
&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;dotenv&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;load_dotenv&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;find_dotenv&lt;/span&gt; &lt;span class="c1"&gt;# new
&lt;/span&gt;
&lt;span class="nf"&gt;load_dotenv&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;find_dotenv&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt; &lt;span class="c1"&gt;# new
&lt;/span&gt;
&lt;span class="n"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Flask&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;__name__&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="bp"&gt;...&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;find_dotenv&lt;/code&gt; function will &lt;strong&gt;find&lt;/strong&gt; the &lt;strong&gt;.env&lt;/strong&gt; file located in our project and the &lt;code&gt;load_dotenv&lt;/code&gt; function will &lt;strong&gt;load&lt;/strong&gt; it into our project so we can use it&lt;/p&gt;



&lt;p&gt;Now, to reference the api key variable in our &lt;strong&gt;.env&lt;/strong&gt; file in your project we will make use of the &lt;strong&gt;os&lt;/strong&gt; library that we imported,&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="bp"&gt;...&lt;/span&gt;
&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;request&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;method&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;POST&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="n"&gt;URL&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;http://api.openweathermap.org/data/2.5/weather?q={city}&amp;amp;units=imperial&amp;amp;appid={api_key}&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;
        &lt;span class="n"&gt;city&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;request&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;form&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;city&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="n"&gt;api_key&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;os&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getenv&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;OPENW_API_KEY&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;# new
&lt;/span&gt;        &lt;span class="k"&gt;try&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="n"&gt;weather&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;requests&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;URL&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;format&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
                &lt;span class="n"&gt;city&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;city&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;api_key&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;api_key&lt;/span&gt;&lt;span class="p"&gt;)).&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
        &lt;span class="k"&gt;except&lt;/span&gt; &lt;span class="nb"&gt;Exception&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Error in fetching data&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="bp"&gt;...&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Restart your app and you would see your application is working just like before!&lt;/p&gt;

&lt;p&gt;You can add any &lt;strong&gt;number&lt;/strong&gt; of environment &lt;strong&gt;variables&lt;/strong&gt; in the &lt;strong&gt;.env&lt;/strong&gt; file and use them anywhere in your project!&lt;/p&gt;

&lt;p&gt;By using environment variables, we can &lt;strong&gt;secure&lt;/strong&gt; &lt;strong&gt;information&lt;/strong&gt; that is &lt;strong&gt;private&lt;/strong&gt; to us so that no other person can misuse it&lt;/p&gt;



&lt;h3&gt;
  
  
  Deploying your Flask app on Heroku
&lt;/h3&gt;

&lt;p&gt;This project works fine on my laptop but - &lt;/p&gt;



&lt;blockquote&gt;
&lt;p&gt;what if i want to show it to the people online? How can I &lt;strong&gt;deploy&lt;/strong&gt; my project?&lt;/p&gt;
&lt;/blockquote&gt;



&lt;p&gt;That’s where &lt;strong&gt;&lt;a href="https://www.heroku.com/" rel="noopener noreferrer"&gt;heroku&lt;/a&gt;&lt;/strong&gt; comes in&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Heroku&lt;/strong&gt; is a &lt;strong&gt;cloud platform&lt;/strong&gt; that supports deployment of projects created in many different languages, even python!&lt;/p&gt;

&lt;p&gt;So go ahead and create an account. After you login, you would see the screen something like this&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2vupdnodw6i8zitc6bxy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2vupdnodw6i8zitc6bxy.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To deploy our flask weather application, we’ll have to create a new app on heroku. So click on new&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7of94xo8w8fp7ta1b0sv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7of94xo8w8fp7ta1b0sv.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;and select &lt;strong&gt;Create new app&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;after that, type in your &lt;strong&gt;App name&lt;/strong&gt; and click &lt;strong&gt;Create app&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwohfgm8w661jx3yhe7po.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwohfgm8w661jx3yhe7po.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After that scroll down to &lt;strong&gt;Deploying using Heroku Git&lt;/strong&gt; section&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp3v2o4cky2c8fchdspha.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp3v2o4cky2c8fchdspha.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;and simply follow these steps,&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiqffdqn2q059ize47lsl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiqffdqn2q059ize47lsl.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Let’s deploy our app!&lt;/p&gt;



&lt;p&gt;First log in to heroku in your terminal, When you type &lt;code&gt;heroku login&lt;/code&gt; it will open a browser to log you in.&lt;/p&gt;

&lt;p&gt;After you’ve logged in, make sure you are in your project root directory, type &lt;code&gt;git init&lt;/code&gt; to initialise a git repository&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqst6fs1up5dmy9hv9az7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqst6fs1up5dmy9hv9az7.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now add all the changes and commit to the main branch,&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git add &lt;span class="nb"&gt;.&lt;/span&gt;
git commit &lt;span class="nt"&gt;-m&lt;/span&gt; &lt;span class="s1"&gt;'pushing to heroku'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4jaaa56qki5l6ycvdz13.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4jaaa56qki5l6ycvdz13.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, set the remote as shown on the heroku website, and push your changes&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;heroku git:remote &lt;span class="nt"&gt;-a&lt;/span&gt; &amp;lt;name_of_you_app&amp;gt;
git push heroku main
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1zo5mcb0r8d9e9lurcai.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1zo5mcb0r8d9e9lurcai.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Note&lt;/strong&gt;: since we are using environment variables, &lt;strong&gt;any deployment platform does not support .env files&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;You’ll have to &lt;strong&gt;manually add your environment variables on the website in your app settings&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In heroku, go over to the settings tab, you should be able to see &lt;strong&gt;Reveal Config Vars&lt;/strong&gt; button, click on it.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0rvlarsu7rw2eq1m73ua.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0rvlarsu7rw2eq1m73ua.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It will now allow you to add your environment variables just as you did in your &lt;code&gt;.env&lt;/code&gt; file!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd50ly99xqgk7kmy3nqps.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd50ly99xqgk7kmy3nqps.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now if we open our app typing in the terminal,&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;heroku open
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We see an application error!&lt;/p&gt;



&lt;p&gt;This is because we have only &lt;strong&gt;pushed&lt;/strong&gt; our application to the platform, we haven’t &lt;strong&gt;run&lt;/strong&gt; it yet!&lt;/p&gt;

&lt;p&gt;To run you python or any application on platform like these, you need to have a &lt;strong&gt;Procfile&lt;/strong&gt;. *&lt;strong&gt;*Inside a **Procfile&lt;/strong&gt; you add all the process that you want the platform to execute. &lt;/p&gt;



&lt;p&gt;Let’s add a Procfile to our root project folder&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffiau5gmilkpgs8o0lsc7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffiau5gmilkpgs8o0lsc7.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Note that the &lt;strong&gt;Procfile does not have any extension&lt;/strong&gt;, this is super important!&lt;/p&gt;

&lt;p&gt;And inside the procfile add this line,&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fowbzf85t0tawg5nlxxbb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fowbzf85t0tawg5nlxxbb.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;



&lt;p&gt;Let’s also install gunicorn in our virtual environment by typing the following command in the terminal,&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;pipenv &lt;span class="nb"&gt;install &lt;/span&gt;gunicorn
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now follow the process to push the changes to heroku again,&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git add &lt;span class="nb"&gt;.&lt;/span&gt;
git commit &lt;span class="nt"&gt;-m&lt;/span&gt; &lt;span class="s1"&gt;'adding procfile'&lt;/span&gt;
git push heroku main
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And now if you open your application,&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2oce92ucu1er627rohvp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2oce92ucu1er627rohvp.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;TA-DA! our application is deployed and running online! 🥳&lt;/p&gt;

&lt;p&gt;Now you can share what you’ve built over the course of this article with other people!&lt;/p&gt;

&lt;p&gt;I know it was quite a long read but hope you got to learn something new, if not new then maybe a better way of doing things.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Likes&lt;/strong&gt; and &lt;strong&gt;Shares&lt;/strong&gt; would be deeply appreciated!&lt;/p&gt;

&lt;p&gt;Please do not hesitate to message me, you can &lt;strong&gt;text/follow&lt;/strong&gt; me on &lt;a href="https://www.linkedin.com/in/kaushal-sharma-/" rel="noopener noreferrer"&gt;LinkedIn&lt;/a&gt; or &lt;a href="https://www.instagram.com/kaushal_dev.py/" rel="noopener noreferrer"&gt;Instagram&lt;/a&gt; or &lt;a href="https://twitter.com/Kaushal_Shawrma" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Make sure you follow to not miss any future articles! 😉&lt;/p&gt;

&lt;p&gt;And as promised, &lt;a href="https://github.com/skazi019/FlaskWeatherApp" rel="noopener noreferrer"&gt;my github repository&lt;/a&gt;&lt;/p&gt;

</description>
      <category>python</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Speed up your Code!!!</title>
      <dc:creator>Kaushal Sharma</dc:creator>
      <pubDate>Tue, 05 Apr 2022 05:21:26 +0000</pubDate>
      <link>https://dev.to/skazi019/speed-up-your-code-39de</link>
      <guid>https://dev.to/skazi019/speed-up-your-code-39de</guid>
      <description>&lt;p&gt;One of the methods to speed up your applications could be to implement &lt;strong&gt;Caching&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Caching not only speeds up the response time for the users but it also reduces the resourse usage on the system making them efficient.&lt;/p&gt;

&lt;h2&gt;
  
  
  But what is caching?
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;In simple terms, Caching means storing frequently demanded things closer to those asking for it&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Let’s take a look at a simple analogy very beautifully depicted in &lt;a href="https://www.youtube.com/watch?v=6FyXURRVmR0" rel="noopener noreferrer"&gt;this youtube video&lt;/a&gt; about caching.&lt;/p&gt;

&lt;p&gt;Suppose you want to write an article about a certain topic and want to access books from the library for the content.&lt;/p&gt;

&lt;p&gt;Now, you &lt;strong&gt;could&lt;/strong&gt; go to the library every time you want to look at some piece of information from the books but that would be a very &lt;strong&gt;expensive&lt;/strong&gt; operation. Travelling from your home to the library, searching for the book, noting down the content, travelling back to your home, and repeating this whole process again and again.&lt;/p&gt;

&lt;p&gt;What you can do however, is that you can borrow these books from the library and take them home with you.&lt;/p&gt;

&lt;p&gt;So now, everytime you need to lookup some content from the books, they are right there within an arm’s reach at your house.&lt;/p&gt;

&lt;p&gt;In this analogy, the library sort of acts as a &lt;em&gt;hard drive&lt;/em&gt; which has a lot of contents(books) saved in it but accessing it frequently would be rather &lt;strong&gt;expensive&lt;/strong&gt;. And your house acts like a &lt;em&gt;cache&lt;/em&gt;, where you have only the books you’ll need to look up &lt;strong&gt;frequently&lt;/strong&gt; for information and accessing which is relatively &lt;strong&gt;cheap&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Python comes with a built-in module called &lt;em&gt;functools&lt;/em&gt; which contains higher order functions which either take other functions as arguments or return other functions.&lt;/p&gt;

&lt;p&gt;The &lt;em&gt;functools&lt;/em&gt; module also contains some higher order functions like &lt;em&gt;lru_cache&lt;/em&gt; for caching which we’ll take a look later in the article.&lt;/p&gt;

&lt;p&gt;For now, let’s try to implement a simple cache all by ourselves in python!&lt;/p&gt;

&lt;p&gt;Save the below code in a .py file and try executing it. Let’s see what output do we get.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;requests&lt;/span&gt;

&lt;span class="n"&gt;cache&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;dict&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;

&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;get_article_from_server&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;url&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Fetching article from server...&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;requests&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;url&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;text&lt;/span&gt;

&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;get_article&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;url&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Getting article...&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;url&lt;/span&gt; &lt;span class="ow"&gt;not&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;cache&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="n"&gt;cache&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;url&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;get_article_from_server&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;url&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;cache&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;url&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;

&lt;span class="nf"&gt;get_article&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;https://realpython.com/sorting-algorithms-python/&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nf"&gt;get_article&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;https://realpython.com/sorting-algorithms-python/&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nf"&gt;get_article&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;https://realpython.com/sorting-algorithms-python/&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nf"&gt;get_article&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;https://realpython.com/sorting-algorithms-python/&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When we run the above code, we get the below output.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2aw8n0qdg7mr9boi11wg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2aw8n0qdg7mr9boi11wg.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;See how,&lt;br&gt;
&lt;br&gt;
 &lt;code&gt;Fetching article from server. . .&lt;/code&gt;&lt;br&gt;
&lt;br&gt;
 is printed only one time and that is the first time?&lt;/p&gt;

&lt;p&gt;That’s because once we have fetched the article, we are saving it in the cache we created before sending it as a response in the function &lt;em&gt;get_article&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Hence for the subsequent calls to the same article, we don’t have to fetch it from the server/internet, we can just read the contents we saved in cache earlier and return the result.&lt;/p&gt;

&lt;p&gt;But we can’t just build a cache from scratch everytime we need to use it. The cache we implemented above was relatively simple but what if we need more complex caching mechanisms? Thankfully python comes with some built-in functions/decorators that will help us do just that!&lt;/p&gt;

&lt;p&gt;Let’s take the problem of calculating factorial of a number. &lt;br&gt;
Below is what a simple code to calculate factorial will look like.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;factorial&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;n&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nf"&gt;factorial&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;n&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But the problem with this code is that, for each new value of &lt;em&gt;n&lt;/em&gt; it will &lt;strong&gt;re-calculate&lt;/strong&gt; the values.&lt;/p&gt;

&lt;p&gt;What do I mean by that is that if i calculate the factorial of 7 then i get 5040 as the output which was calculated by 7x6x5x4x3x2x1&lt;/p&gt;

&lt;p&gt;But now if I calculate factorial of 5, it will re-calculate 5x4x3x2x1 which it had already calculated earlier while calculating factorial of 7.&lt;/p&gt;

&lt;p&gt;These calculations can be &lt;strong&gt;stored&lt;/strong&gt; in the &lt;strong&gt;cache&lt;/strong&gt; and retreived without having to re-calculate again thereby saving computing resource and time making the overall system efficient!&lt;/p&gt;

&lt;p&gt;Let’s now modify the code to use cache instead.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;functools&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;cache&lt;/span&gt;

&lt;span class="nd"&gt;@cache&lt;/span&gt;
&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;factorial&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;n&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nf"&gt;factorial&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;n&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If we call &lt;em&gt;factorial(10)&lt;/em&gt;, the function will make 11 recursive calls since the cache is empty. But if we call &lt;em&gt;factorial(5)&lt;/em&gt; after this, the code won’t do any calculations at all, it will just look up the value in the cache and return it.&lt;/p&gt;

&lt;p&gt;And if we call &lt;em&gt;factorial(12)&lt;/em&gt;, the code will only make two recursive calls for 11 and 12 since the values up to 10 were already stored in the cache.&lt;/p&gt;

&lt;p&gt;Great! now we know how we can create a cache and apply it to a function which does some expensive operations so that we can speed up our code and make it more computationally efficient.&lt;/p&gt;

&lt;h2&gt;
  
  
  Let’s take a little detour and revisit the library example . . .
&lt;/h2&gt;

&lt;p&gt;You kept researching topics one after the other and as a result have bought home more books that you can keep!&lt;/p&gt;

&lt;p&gt;In terms of caching, what has happened here is that your cache has grown &lt;strong&gt;indefinitely&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The purpose of cache is to be &lt;strong&gt;small&lt;/strong&gt; and only store some of the data that is being &lt;strong&gt;frequently accessed&lt;/strong&gt; by the users, having your cache grow as big as your hard disk defeats it’s purpose as it will be significantly expensive to maintain this cache.&lt;/p&gt;

&lt;p&gt;So, what we need now is a mechanism or policy that would remove content/information from the cache which has lost it's relevance and is not accessed as frequently anymore. That is, we need some policy that would help us off-load some of the books stored in our house back to the library. This is where cache eviction policies come in.&lt;/p&gt;

&lt;h2&gt;
  
  
  Cache Eviction Policies
&lt;/h2&gt;

&lt;p&gt;There are many such strategies defined that will clear out your cache and maintain it’s size keeping it from growing indefinitely. let’s look at a brief of some of those policies.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;First-In First-Out&lt;/strong&gt; (FIFO) - 
The entires that gets added to the cache first, gets deleted first. That is, it evicts the oldest entries.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Last-In First-Out&lt;/strong&gt; (LIFO) - 
The entires that gets added to the cache last or the newest entries, gets deleted first. That is, it evicts the newest entries.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Least Recently Used&lt;/strong&gt; (LRU) - 
The entries that haven’t been used in a long time gets evicted from the cache.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Most Recently Used&lt;/strong&gt; (MRU) - 
The entry that was used most recently gets evicted from the cache.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Least Frequently Used&lt;/strong&gt; (LFU) - 
The entries that don’t get accessed too often gets evicted from the cache.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Let’s take a look at the working of LRU in a bit of detail . . .&lt;/p&gt;

&lt;p&gt;When you implement a cache with LRU strategy, it organises it’s items in the way they are being used by the users.&lt;/p&gt;

&lt;p&gt;Everytime you access an entry in the cache, the &lt;strong&gt;LRU&lt;/strong&gt; algorithm will move this entry to the &lt;strong&gt;top&lt;/strong&gt;(most recently used) of the cache.&lt;/p&gt;

&lt;p&gt;Now when the algorithm looks at the cache, it knows that the entries at the &lt;strong&gt;bottom&lt;/strong&gt; are stale and not being used by the users anymore hence it can be &lt;strong&gt;safely removed&lt;/strong&gt; from the cache to make way for newer entries.&lt;/p&gt;

&lt;p&gt;Take a look at the below image.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7emvtdxze04qe9wnbjvd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7emvtdxze04qe9wnbjvd.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here, when the user fetches article 1, the cache stores the article as most recent then serves it to the user.&lt;/p&gt;

&lt;p&gt;Now when the user request another article. . .&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd6th2xmjz0g7ard3pv02.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd6th2xmjz0g7ard3pv02.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The cache assigns the article 2 as most recent and pushes the article 1 down the list.&lt;/p&gt;

&lt;p&gt;In this way the LRU strategy identifies which entries need to be evicted from the cache so that the size of the cache can be managed.&lt;/p&gt;

&lt;p&gt;Let’s try implementing LRU strategy with the example of calculating fibonacci numbers&lt;/p&gt;

&lt;p&gt;Below is what a simple code to calculate fibonacci numbers would look like&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;fibonacci&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;n&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;n&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;fibonacci&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nf"&gt;fibonacci&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Since this is a recursive function, for a large value of &lt;em&gt;n&lt;/em&gt; this function would become computationally heavy.&lt;/p&gt;

&lt;p&gt;Let’s implement a cache on this function with LRU strategy.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;functools&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;lru_cache&lt;/span&gt;

&lt;span class="nd"&gt;@lru_cache&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;maxsize&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;16&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;fibonacci&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;n&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;n&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;fibonacci&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nf"&gt;fibonacci&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Similar to what we saw earlier, we can use the lru_cache decorator from functools built-in library to implement cache with the LRU eviction strategy.&lt;/p&gt;

&lt;p&gt;Here maxsize parameter defines the maximum size the cache can grow to.&lt;/p&gt;

&lt;p&gt;Now, if we call this function and get it’s cache info, we would get the output something like this.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsxlfttkolyjyeoh08or1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsxlfttkolyjyeoh08or1.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here,&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;hits&lt;/strong&gt; - the number of call that were returned from the cache&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;misses&lt;/strong&gt; - the number of calls that didn’t exist in the cache and had to be calculated&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;maxsize&lt;/strong&gt; - the maximum size of the cache. Since we defined out maxsize to be 16 it shows the same in the output&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;currsize&lt;/strong&gt; - the current size of the cache. Here we can see the cache is full&lt;/p&gt;

&lt;h3&gt;
  
  
  To sum up
&lt;/h3&gt;

&lt;p&gt;caching not only reduces the computing resource on your system but also makes your code run faster.&lt;/p&gt;

&lt;p&gt;Implementing caching in your code can drastically improve the user experience by giving the quick and optimal results.&lt;/p&gt;

&lt;h3&gt;
  
  
  Sources
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/watch?v=6FyXURRVmR0" rel="noopener noreferrer"&gt;https://www.youtube.com/watch?v=6FyXURRVmR0&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://docs.python.org/3/library/functools.html" rel="noopener noreferrer"&gt;https://docs.python.org/3/library/functools.html&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://realpython.com/lru-cache-python/" rel="noopener noreferrer"&gt;https://realpython.com/lru-cache-python/&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>python</category>
      <category>tutorial</category>
      <category>programming</category>
      <category>algorithms</category>
    </item>
    <item>
      <title>Write clean, reusable, and modular code</title>
      <dc:creator>Kaushal Sharma</dc:creator>
      <pubDate>Thu, 17 Mar 2022 11:28:40 +0000</pubDate>
      <link>https://dev.to/skazi019/write-clean-reusable-and-modular-code-3n0k</link>
      <guid>https://dev.to/skazi019/write-clean-reusable-and-modular-code-3n0k</guid>
      <description>&lt;p&gt;If you’ve ever searched for a job in tech or you’re just starting to code and looking for your first job and see -&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Must be able to write clean, maintainable and reusable code&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;In the top one or two bullet points of the requirements and not know how to do it? &lt;br&gt;
What recruiters are basically asking is, “Can you write modular code”&lt;/p&gt;

&lt;h3&gt;
  
  
  But what is Modular Programming and why should you care about it?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Modular programming means breaking up your code into small chunks, that often repeat itself over the lifetime of your code execution, into small and manageable modules which can be split across different files.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  And to answer why should you care about it?
&lt;/h3&gt;

&lt;p&gt;Well, Apart from breaking up one large problem into smaller, more feasible problems, additional reasons to make your code modular are -&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fghxty6mhj7ec0s31atig.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fghxty6mhj7ec0s31atig.jpeg" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It makes your code more &lt;strong&gt;Maintainable&lt;/strong&gt; - Ideally each module you create would be designed to tackle a certain singular problem, hence reducing the interdependency between each module. Therefore, if you were to make some changes in Module1, Module2 or the rest of your code would remain unaffected for the most part. This also facilitates collaboration between a team of programmer where each programmer can focus on one module at a time and making debugging a whole lot easier!&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiid3ymwzyhi7zjra43tz.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiid3ymwzyhi7zjra43tz.jpeg" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You can &lt;strong&gt;Reuse&lt;/strong&gt; your code across different modules, even projects! - Since your module would tackle a single problem independently, it is possible to use this module in other modules or even projects where you face the same problem statement making your code &lt;strong&gt;DRY&lt;/strong&gt;(&lt;strong&gt;Do not Repeat Yourself&lt;/strong&gt;), one of the many important software engineering principles.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcf0hieu18bqchtjzc5hd.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcf0hieu18bqchtjzc5hd.jpeg" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Variable Scoping&lt;/strong&gt; - Creating different modules and splitting them into different functions or even files allows you to use the same variable name, avoiding a debugging nightmare from spaghetti code!&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  But wait, you’ve already tried and it did not work? here’s why
&lt;/h3&gt;

&lt;p&gt;Because you may have forgotten to add your project directory to the list of directories the python interpreter searches for modules in!&lt;br&gt;
Which brings us to the next topic -&lt;/p&gt;

&lt;h3&gt;
  
  
  Module Search Path
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;One thing to note is that, the location of the module that you have created, should be present in the PYTHONPATH environment variable.&lt;/li&gt;
&lt;li&gt;The reason for this is whenever you “import” a module, the python interpreter will search for that module in list of directories. This list of directories contains

&lt;ul&gt;
&lt;li&gt;the current script’s directory,&lt;/li&gt;
&lt;li&gt;all the directories present in the PYTHONPATH variable&lt;/li&gt;
&lt;li&gt;the installation dependent directories which would’ve been configured at the time of python installation.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1fxvfwiih0ferdjmwnop.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1fxvfwiih0ferdjmwnop.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Let’s see what we’ve read till now in action
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Project Root -&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Go to your project root directory&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwsq49i5dms93jd1xcprp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwsq49i5dms93jd1xcprp.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Checking all the directories present in the list of directories of sys module. We see that our project root is missing here.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9h5cxu1t9j8ieu386edg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9h5cxu1t9j8ieu386edg.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Adding Project Root to sys.path&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Using the os built-in module, since we are already in our project root, we add the current working directory to the list of directories present in sys&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyaa3u1w179tnboab4wfl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyaa3u1w179tnboab4wfl.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now we’ve added our project root to the list of directories and we can proceed to import the modules!&lt;/p&gt;

&lt;p&gt;Now, when you type import, the interpreter should automatically show you the modules/directories available to import. Here we see both the directories we created(dir1 and dir2) which contain their respective modules.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxx4dxpkwxa2otess60z4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxx4dxpkwxa2otess60z4.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After selecting dir1 and adding a period(.), you should be able to see all the modules/directories contained in this directory. Here we see two modules, main and module1.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd9mswlgpjseh1nzwrhna.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd9mswlgpjseh1nzwrhna.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Using the module&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;After importing the module1 from dir1 and giving it an alias as mod1, we can use all of the module1’s objects in our current script!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbegszsnrteui2ey551u9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbegszsnrteui2ey551u9.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We can use the string object defined by variable a, as well as the function defined in the module1&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3f2p7bv6fizran8kxu8z.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3f2p7bv6fizran8kxu8z.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Similarly, we can import another module and use all of it’s objects in our current code&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpgohe2aizsngd5cxky72.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpgohe2aizsngd5cxky72.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In such a way, we can structure our code better so changing or update in any single module does not breaks other modules.&lt;/p&gt;

&lt;p&gt;Creating different modules for your code instead of just blurting it out in a single script also allows for ease in unit testing, which is also a primary requirement in many places.&lt;/p&gt;

&lt;p&gt;Now off you go writing clean and maintainable code!&lt;/p&gt;

</description>
      <category>python</category>
      <category>computerscience</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
