Realizzare una web app con Open Weather e Docker

By on September 19th, 2020 in Docker, ita, Programming, Vue.js

In questo articolo descrivo come realizzare una semplice applicazione con Open Weather e Docker.

Settimane fa (n.d.a.: l’articolo originale risale a maggio 2020) cercavo qualcosa da realizzare durante questa quarantena. Cercavo qualcosa da pubblicare sul mio profilo Github. Volevo un’idea per un’applicazione web, così ho dato un’occhiata a una lista di API disponibili. Ci sono abbastanza API là fuori: Linkedin, Youtube, Genius, Instagram e altro ancora.

dai un’occhiata a questo progetto che utilizza le API di Youtube e Wikipedia

L’idea

L’idea era quella di creare una semplice applicazione che mi permettesse di trattare diversi argomenti in breve tempo, un weekend, non di più! Il mio obiettivo era quello di realizzare alcuni endpoint API con un frontend moderno, lavorando con Lumen, Vue.js, 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 realizzato in Vuejs.

Dai un’occhiata a 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 utilizzare Docker in modo che il processo di installazione fosse molto semplice.

Preparazione

Per prima cosa ho preparato l’ambiente di sviluppo utilizzando uno stack LEMP dockerizzato che avevo preparato in precedenza.

Controlla questo repository 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! 😀 ).

Lumen per il backend

Dopo di che ho installato Lumen usando composer.

Infine 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, sotto uno screenshot:

Costruire il widget

A questo punto ero pronto a costruire un semplice widget che mostrasse le condizioni meteo attuali, la temperatura e una previsione.

E Javascript? La scelta si è sentita su Vuejs perché lo conoscevo già e mi piace molto.

Ho deciso di mostrare le prossime 24 ore di previsione (previsione 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 su framework, ma mi piace di più Vanilla Javascript! Per questo motivo ho usato per esempio l’API Javascript Fetch invece di altre soluzioni come per esempio axios.

L’internazionalizzazione si basa sul linguaggio del browser.

Ecco il risultato:

Conclusione

Grazie per aver letto come realizzare una semplice applicazione con Open Weather e Docker. Ho pubblicato questo semplice progetto sul mio account Github. E’ facile da installare e farlo funzionare sul tuo computer, con soli 5 comandi. Nel complesso, lo sviluppo mi ha richiesto diverse ore in un paio di giorni (un fine settimana). Grazie a questo semplice progetto ho affrontato diversi argomenti a cui sono interessato.

C’è ancora spazio per migliorare. Ho installato anche MariaDB, quindi potrebbe essere interessante implementare un comando temporizzato per memorizzare la situazione attuale e le previsioni, controllare se corrispondono e così via.

Leave a Reply

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

No comments yet. Be the first one!