How to create a simple Open Weather App dockerized

By on May 10th, 2020 in Docker, Programming

Introduction

Weeks ago I was looking for something to build during this quarantine, something to publish on my Github. I wanted a web app idea, so I took a look at a list of available API. There’s enough APIs out there: Linkedin, Youtube, Genius, Instagram, and more. In this article, I’ll describe how to create a simple Open Weather App dockerized working with Docker, Composer, Git, etc.

check this project that merges Youtube and Wikipedia APIs

The idea

The idea was to create a simple API application allowing me to cover different topics in a short time, one weekend, not more! My goal was to realize some API endpoints with a modern frontend, working with Docker, Composer, Git, etc.

What I chose

I chose to consume Open Weather API as data source and I decided to build a simple widget made in Vuejs. Check this project made in Vuejs that consumes APIs by FourSquare. To speed up the development, I opted for using Lumen. I decided to dockerize the app so the installation process would be very easy.

Preparation

Let me describe how to create a simple Open Weather App dockerized working with Docker, Composer, Git, etc. First of all I prepared the development environment using a dockerized LEMP stack that I previously prepared. Check the lemp-stack on my Github: php:7.3-fpm, nginx:1.13.6, the latest version of MariaDB (10.4.12) and the latest version of phpmyadmin (yes I am lazy! 😀 ).

After that I installed Lumen using composer. I got my Open Weather API KEY (here) that I stored in the .env file. Then I finally started to build my endpoints that I tested using Insomnia, below a screenshot:


Get forecast with Insomnia

Build the widget

I was ready to build a simple widget that showing the current weather condition, temperature and a forecast. What about Javascript? The choice felt on Vuejs because I already knew it and I like it. I decided to show the next 24 hours forecast (3-hours forecast). With the main ViewModel (Vue Instance) and two components, one for the current condition and one for the forecast, the widget was quickly built. I like Vuejs and the reactive concept and I like work on frameworks, but I like more Vanilla Javascript! For that reason I used for example the Javascript Fetch API against other solutions. Internationalization is based on browser language.

Below the result:

Conclusion

I published this simple project on my Github account. It’s easy to install and make it working on your computer, with only 5 commands. Overall, the development took me several hours in a couple of days (a weekend). Thanks to this simple project I covered several different topics in which I am interested.

There’s still room for improvement. Since I installed MariaDB, might be cool to implement a time based scheduled command to store the current situation and the forecast, check if they match and so on.


Leggi l’articolo in italiano.


Leave a Reply

Your email address will not be published. Required fields are marked *

No comments yet. Be the first one!