How to create a simple Open Weather App with PHP, Vue.js, and Docker
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 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.
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
Below the result:
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.