Costruisci un registratore di attività personale: 6 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 09:59

Il mio amico di Londra, Paul, voleva trovare un modo per tenere traccia di cibo, attività e posizione in un'unica dashboard. Fu allora che ebbe l'idea di creare un semplice modulo web che inviasse i dati a una dashboard. Metteva sia il modulo web che la dashboard in una pagina web e registrava le sue attività in movimento. Da lì è stato creato il registratore di attività! Il codice in questo tutorial è tutto Paul, ad eccezione di alcune lievi modifiche al colore, alla personalizzazione della dashboard e al gergo (traduzione dal britannico all'americano fatta da me).

Per questo progetto utilizzeremo:

• CodicePen
• Stato iniziale
• Netlify

Creiamo un tracker di attività personale, ma seguendo questo tutorial e codice puoi trasformarlo in un modulo web e tracker per tutto ciò che desideri! Iniziamo!

Passaggio 1: CodePen

CodePen è un ambiente di sviluppo. Ti permette di scrivere il tuo codice nel browser e vederne i risultati mentre procedi. Abbiamo codice in HTML, CSS e JavaScript per creare un modulo web con menu a discesa, caselle di testo e geolocalizzazione. Puoi iscriverti gratuitamente con l'unica condizione che non puoi rendere privato il tuo codice, cosa che affronteremo in seguito.

Innanzitutto, iscriviti a CodePen. Una volta fatto, puoi eseguire il fork del mio progetto con tutto il codice già creato. Questo creerà una copia del codice nella tua dashboard. Vedrai HTML a sinistra, CSS al centro e JavaScript a destra. Se sei un esperto in tutte queste cose, dimentica di leggere il resto e apporta le modifiche che desideri! Se non conosci queste lingue, di seguito ho alcuni suggerimenti sulle modifiche che puoi apportare facilmente.

HTML

Questo pezzo di codice è il formato per tutti i menu a discesa e le caselle. È qui che puoi cambiare il tipo di cose che tieni traccia e gli elenchi nei menu a discesa. Nel menu a discesa Esercizio, puoi modificare i tipi di attività (attualmente Pesi, Corsa, Yoga e Cardio). Puoi aggiungere qualcosa all'elenco seguendo il formato o aggiungere più opzioni. Lo stesso vale per il tipo di carne, la dimensione e il tipo di caffè e la dimensione della birra. Nella casella di testo Posta indesiderata puoi modificare le parole segnaposto (attualmente patatine, cioccolato, ecc.). Lo stesso può essere fatto per Peso (libbre), Esercizio (minuti) e Birra (volt.%).

Puoi anche utilizzare questo schema e modificare completamente i titoli, le opzioni a discesa e i segnaposto per rendere questo modulo web qualsiasi tipo di tracker che desideri.

CSS

Questa parte di codice imposta il colore di sfondo, l'allineamento del testo e l'allineamento delle colonne. Se vuoi cambiare lo sfondo da un rosa nauseabondo a qualcosa di più piacevole, usa un selettore di colori online per trovare il giusto valore del colore. Puoi allineare il testo o le colonne a destra, a sinistra o al centro.

JavaScript

Questo pezzo di codice funziona con il pulsante di geolocalizzazione e il pulsante di invio. Non c'è molto qui che consiglierei di cambiare.

Esportare

Una volta che hai impostato tutto a tuo piacimento, fai clic sul pulsante di esportazione in basso a destra e seleziona esporta come.zip. Questo scaricherà il codice in un file zip e lo vedrai nella cartella dei download.

Passaggio 2: stato iniziale

Lo stato iniziale ci consentirà di creare una dashboard personalizzata dell'attività che monitoriamo. Puoi iscriverti per una prova gratuita di 14 giorni. Successivamente è gratuito per gli studenti con un indirizzo email edu o $ 9,99 al mese per il piano individuale.

Dopo aver effettuato l'accesso o effettuato la registrazione, vai al tuo scaffale del bucket e crea un nuovo bucket di flussi di dati facendo clic sul pulsante Crea bucket di flusso (+cloud). Puoi modificare il nome come preferisci o cambiarlo in seguito, ho scelto Personal Activity Tracker. Se selezioni la casella Tema chiaro, darai alla dashboard uno sfondo bianco. Fai clic su Fine e il tuo bucket di streaming verrà creato.

Avremo bisogno di informazioni dalle impostazioni del bucket in un secondo momento da inserire nel codice HTML (Endpoint API e incorporamento iframe).

Passaggio 3: codice di Visual Studio

Dato che sto usando la versione gratuita di CodePen, tutto il mio codice è pubblico. Per questo motivo, non voglio inserire i miei endpoint API e incorporare iframe nel codice poiché è necessario mantenere private le chiavi di accesso allo stato iniziale. Visual Studio Code mi consentirà di modificare il mio codice localmente dal file zip che ho scaricato da CodePen. Puoi scaricare l'ultima versione gratuitamente dal loro sito web.

Decomprimi i file di codice e apri quella cartella in Visual Studio Code. Da qui puoi quindi modificare il codice HTML. Nella parte superiore del file vedrai "INSERIRE ENDPOINT API QUI". Puoi trovare l'Endpoint API andando al bucket che hai creato in Stato iniziale, fai clic su Impostazioni e nella scheda Dati vedrai l'Endpoint API. Copia e incolla questo nel codice HTML. In fondo al codice HTML vedrai "INSERIRE EMBED SHARE QUI". Di nuovo vai al tuo bucket in stato iniziale, vai alle impostazioni e alla scheda Condivisione. Fai clic sulla casella Condividi pubblicamente e vedrai Condividi per incorporamento. Copia solo l'URL nella casella di condivisione incorporata (sarà simile a "https://iot.app.initialstate.com/embed/#/tiles/xxxxxx"). Incollalo tra virgolette. Salva il file e siamo pronti per creare la nostra pagina web.

Passaggio 4: Netlify

Netlify è una piattaforma all-in-one che ti consente di creare, distribuire e gestire un progetto web. Puoi iscriverti gratuitamente quindi fallo. Una volta che ti sei registrato, nella tua pagina principale vedrai una casella che dice "Vuoi distribuire un nuovo sito senza connetterti a Git? Trascina e rilascia la tua cartella sito qui." Quindi trascina lì la tua cartella di file CodePen aggiornata e rilasciala. Da lì distribuirà il tuo codice e creerà un collegamento alla tua nuova pagina Web. Fai clic sul collegamento e vedrai il modulo web e la dashboard.

Devi inviare alcuni dati per far apparire le tue tessere. Quindi compila il modulo web e premi invio. Una volta fatto, vai nella dashboard dello stato iniziale. Da qui possiamo cambiare i tipi di tessere, ridimensionare le tessere, spostare il layout, regolare i colori dei dati per essere più piacevoli agli occhi e aggiungere alcune espressioni in tempo reale da mappare agli emoji. Hai due opzioni per adattare la tua dashboard alle dimensioni di incorporamento: adatta le tue tessere per adattarle o regola le dimensioni di incorporamento nel codice.

Passaggio 5: personalizza la tua dashboard

Grafici degli indicatori

Ho usato due tipi di indicatori nel mio cruscotto: arco e liquido. Per modificare il tipo di riquadro, fai clic con il pulsante destro del mouse sul riquadro e seleziona Modifica riquadro. Questo aprirà il configuratore Tile. Per la dimensione della birra ho selezionato Gauge Chart come Tile type e Liquid come Gauge Style. Ho cambiato anche il titolo, il colore della chiave del segnale e i valori minimo/massimo. Per il Weight & Beer ABV ho usato lo stile del calibro ad arco.

Mappa per Emoji

Ho mappato il tipo di esercizio e il tipo di carne agli emoji utilizzando le espressioni in tempo reale, quindi a seconda dell'elemento selezionato dall'elenco a discesa, verrà visualizzata un'emoji specifica. Potete vedere il codice che ho usato nelle foto. Puoi aggiungere emoji su un Mac premendo control+command+spacebar o su Windows da questo sito web.

Invia emoji nel modulo web

Per cose come Junk mi piace inviare emoji direttamente alla mia dashboard. Copio e incollo l'emoji nella casella di testo del modulo web e faccio clic su Invia, quindi l'emoji viene visualizzata nella mia dashboard!

Ci vuole molto gioco per personalizzare la dashboard perfetta e le opzioni sono infinite.

Immagine di sfondo

Puoi aggiungere un'immagine di sfondo alla tua dashboard per dare ai tuoi dati più personalità o contesto.

Passaggio 6: conclusione

Mentre Paul lo ha costruito come tracker di attività, ha offerto altre idee su come potrebbe essere usato con alcune piccole modifiche:

• Il miglior caffè/birra/ristorante a Town Tracker
• Dove sono i miei amici o i miei figli in questo momento e cosa stanno facendo? Tracker
• Scorecard interattiva per il golf - Tracciatore di punteggi e percorsi
• Parapendio Flight Logger - (Paul ha hobby molto più interessanti di me)

Ora puoi tenere traccia di qualsiasi cosa. Questo codice fornisce la shell per qualsiasi tipo di modulo web che desideri creare. Quindi gioca e diventa creativo e mostrami cosa hai! E ovviamente, applausi a Paul per aver contribuito a creare questo!