Aggiunta funzionalità Bridge Troll

Questa settimana, durante la mia lezione open source, mi è stato assegnato il compito di aggiungere una funzionalità a un progetto u rce aperto chiamato bridge-troll creato dal mio professore David Humphrey. La funzionalità che è stata richiesta per essere aggiunta a questo progetto può essere vista qui. Quindi fondamentalmente ciò attorno a cui ruota questa caratteristica è che attualmente il progetto bridge-troll rende solo lo sfondo sulla mappa come un colore chiaro che non è molto ottimale per l’uso notturno. Quindi ciò che è stato richiesto era di aggiungere un tema scuro che verrà regolato in base all’ora corrente dell’utente, rispetto al tramonto nella sua posizione.

Il primo passo è stato eseguire il fork del repository e clonarlo localmente. Dopodiché ho dovuto eseguire i comandi mostrati di seguito.

Tutti questi comandi hanno avuto successo e non mi hanno causato alcun problema. Quindi la prima cosa che dovevo ricercare era il repository SunCalc raccomandato dal mio professore nel suo numero. Questo repository può essere visto qui. Quindi questo repository contiene molte funzioni che possono essere utilizzate per calcolare la posizione del sole, le fasi della luce solare, la posizione della luna e così via in base a una posizione e un’ora.

Dopo che npm ha installato questo repository, mi sono reso conto che dovevo usare var returnedTime = suncalc.getTimes (currentTime, lat, lng); poiché questo restituirà un oggetto con molte proprietà che posso usare . Le proprietà che dovevo usare erano sunriseEnd e sunsetStart poiché indica rispettivamente quando inizia la notte e quando inizia la luce del giorno. Dopo aver confrontato questo con il CurrentTime individuato, posso decidere se eseguire il rendering di un tema scuro o di un tema chiaro.

Quindi le mie modifiche possono essere viste negli screenshot qui sotto.


Come puoi vedere, nel base-ui.js ho chiamato un metodo, theme, che prendeva la latitudine e la longitudine già definite in questa funzione. Stava chiamando la funzione nel file theme.js e in base a questo avrebbe ottenuto l’oggetto sunCalc memorizzato in returnedTime e un normale oggetto data in currentTime . L'istruzione if controlla se è notte e se una qualsiasi delle condizioni è vera, imposterà titleURL sul tema scuro. Se non è vero, imposterà titleURL sul tema chiaro.

Questo laboratorio è stato una buona esperienza di apprendimento per me in termini di aggiunta di funzionalità ai repository esistenti. Ho anche lavorato con due miei colleghi che mi hanno aiutato a far rimbalzare più idee tra di noi, rendendo l'esperienza di apprendimento ancora migliore. Questo problema non era difficile da risolvere, tuttavia richiedeva l'apprendimento della libreria SunCalc e di tutte le proprietà associate a un oggetto SunCalc. Questo era importante da notare poiché dovevamo eseguire alcuni console.log per capire come le proprietà erano memorizzate nell'oggetto, poiché dovevamo accedere alle proprietà sunriseEnd e sunsetStart per il nostro codice. Comunque è tutto per questa settimana e ci vediamo nel mio prossimo post sul blog!