Open Weather: come creare una semplice applicazione con PHP, Vue.js e Docker


By on Sun May 10 in Docker, Programming


0
(0)

Introduzione

In questo articolo, descriverò come creare una semplice applicazione di previsione del tempo basato su Open Weather. Scritta in PHP utilizzando Lumen e Vue.js, per l’ambiente di sviluppo utilizzo Docker.

Settimane fa stavo cercando qualcosa da costruire durante questa quarantena, qualcosa da pubblicare sul mio Github. Cercavo un’idea per una web app, così ho dato un’occhiata a un elenco di API disponibili. Ci sono abbastanza API là fuori: Linkedin, Youtube, Genius, Instagram e altro.

Dai un’occhiata a questo progetto che unisce le API di Youtube e Wikipedia

L’idea

L’idea era di creare una semplice applicazione API che mi permettesse di coprire diversi argomenti in poco tempo, un weekend, non di più! Il mio obiettivo era quello di realizzare alcuni endpoint API con un frontend moderno, lavorando con Docker, Composer, Git, ecc.

Cosa ho scelto

Ho scelto di consumare Open Weather API come fonte di dati e ho deciso di costruire un semplice widget fatto in Vuejs. Guarda questo progetto realizzato in Vuejs che consuma le API di FourSquare. Per accelerare lo sviluppo, ho optato per l’utilizzo di Lumen. Ho deciso di dockerizzare l’app in modo che il processo di installazione fosse molto facile.

Preparazione

Lasciatemi descrivere come creare una semplice Open Weather App dockerizzata lavorando con Docker, Composer, Git, ecc. Prima di tutto, ho preparato l’ambiente di sviluppo utilizzando uno stack LEMP dockerizzato che ho preparato in precedenza. Controlla il lemp-stack sul mio Github: php:7.3-fpm, nginx:1.13.6, l’ultima versione di MariaDB (10.4.12), e l’ultima versione di PHPMyAdmin (sì, sono pigro! 😀 ).

Dopo di che, ho installato Lumen usando Composer. Ho ottenuto la mia Open Weather API KEY (qui) che ho memorizzato nel file .env. Poi ho finalmente iniziato a costruire i miei endpoint che ho testato usando Insomnia, qui sotto uno screenshot:


Get forecast with Insomnia

Costruire il widget

Ero dunque pronto a costruire una semplice app Open Weather con PHP, Vue.js e Docker.

Il widget mostrerà la condizione meteo attuale, la temperatura e le previsioni. Che dire di Javascript? La scelta è caduta su Vue.js perché lo conoscevo già e mi piaceva. Ho deciso di mostrare le previsioni delle prossime 24 ore (previsioni a 3 ore). Con il ViewModel principale (Vue Instance) e due componenti, uno per la condizione attuale e uno per la previsione, il widget è stato costruito rapidamente. Mi piace Vuejs e il concetto reattivo e mi piace lavorare sui framework, ma mi piace di più il Vanilla Javascript! Per questo motivo, ho usato per esempio l’API Javascript Fetch invece di altre soluzioni. L’internazionalizzazione è basata sulla lingua del browser.

Di seguito il risultato:

Open Weather App

Conclusioni

Ho pubblicato questo semplice progetto sul mio account Github. È facile da installare e da farlo funzionare sul vostro computer, con solo 5 comandi. Nel complesso, lo sviluppo mi ha preso diverse ore in un paio di giorni (un fine settimana). Grazie a questo semplice progetto ho coperto diversi argomenti a cui sono interessato.

C’è ancora spazio per migliorare. Siccome ho installato MariaDB, potrebbe essere bello implementare un comando programmato basato sul tempo per memorizzare la situazione attuale e le previsioni, controllare se corrispondono e così via.


How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.