How to create a simple Open Weather App with PHP, Vue.js, and Docker
By Giuseppe Maccario on Sun May 10 in Docker, Programming
Introduction
In this article, I’ll describe how to create a simple Open Weather App with PHP, Vue.js, and Docker.
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 APIs. There’s enough APIs out there: Linkedin, Youtube, Genius, Instagram, and more.
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 the 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:
Build the widget
I was ready to build a simple Open Weather App with PHP, Vue.js, and Docker. The widget will show the current weather condition, temperature, and a forecast. What about Javascript? The choice felt on Vue.js 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 to 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 the 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.