Construeix un registre d’activitats personals: 6 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:10

El meu amic de Londres, Paul, volia trobar una manera de fer un seguiment del seu menjar, activitat i ubicació en un únic tauler. Va ser llavors quan se li va ocórrer la idea de crear un senzill formulari web que enviés dades a un tauler. Posava tant el formulari web com el tauler en una pàgina web i registrava les seves activitats sobre la marxa. A partir d’aquí es va crear el registre d’activitats. El codi d’aquest tutorial és tot Paul, excepte alguns lleugers canvis de color, personalització del tauler i argot (traducció britànica a nord-americana feta per mi).

Per a aquest projecte utilitzarem:

• CodePen
• Estat inicial
• Netlify

Creem un rastrejador d'activitats personals, però seguint aquest tutorial i aquest codi, podeu convertir-lo en un formulari web i un rastrejador per a qualsevol cosa que vulgueu. Comencem!

Pas 1: CodePen

CodePen és un entorn de desenvolupament. Us permet escriure el codi al navegador i veure’n els resultats a mesura que aneu. Tenim codi en HTML, CSS i JavaScript per crear un formulari web amb desplegables, quadres de text i geolocalització. Podeu inscriure-us gratuïtament amb l’única estipulació que no podeu fer privat del vostre codi, que tractarem més endavant.

En primer lloc, registreu-vos a CodePen. Un cop ho feu, podeu Fork my project amb tot el codi ja creat. Això crearà una còpia del codi al vostre propi tauler. Veureu HTML a l’esquerra, CSS al centre i JavaScript a la dreta. Si sou experts en tot això, oblideu de llegir la resta i feu els canvis que vulgueu. Si no coneixeu aquests idiomes, tinc alguns suggeriments a continuació sobre els canvis que podeu fer fàcilment.

HTML

Aquest fragment de codi és el format de tots els desplegables i quadres. És aquí on podeu canviar el tipus de coses que feu un seguiment i les llistes als desplegables. Al menú desplegable Exercici, podeu canviar els tipus d'activitat (actualment Pesos, Running, Ioga i Cardio). Podeu afegir alguna cosa a la llista seguint el format o afegir més opcions. El mateix passa amb el tipus de carn, la mida i el tipus de cafè i la mida de la cervesa. Al quadre de text Brossa podeu canviar les paraules de marcador de posició (actualment patates fregides, xocolata, etc.). Es pot fer el mateix amb el pes (lliures), l’exercici físic (minuts) i la cervesa (% abv).

També podeu utilitzar aquest esquema i canviar completament els títols, les opcions desplegables i els espais reservats per fer que aquest web formi qualsevol tipus de rastrejador que vulgueu.

CSS

Aquest fragment de codi estableix el color de fons, l'alineació del text i l'alineació de les columnes. Si voleu canviar el fons de rosa fastigós a alguna cosa més agradable, feu servir un selector de colors en línia per trobar el valor de color adequat. Podeu alinear el text o les columnes a la dreta, a l'esquerra o al centre.

JavaScript

Aquest fragment de codi funciona amb el botó de geolocalització i el botó d'enviament. Aquí no hi ha molt, recomanaria canviar.

Exporta

Un cop hàgiu definit tot el que vulgueu, feu clic al botó d'exportació de la part inferior dreta i seleccioneu Exporta com a.zip. Això baixarà el codi en un fitxer zip i el veureu a la carpeta de descàrregues.

Pas 2: estat inicial

L'estat inicial ens permetrà crear un tauler personalitzat de l'activitat de la qual seguim. Podeu inscriure-us a una prova gratuïta de 14 dies. Després, és gratuït per als estudiants amb una adreça de correu electrònic edu o 9,99 $ al mes per al pla individual.

Un cop hàgiu iniciat la sessió o us hi hàgiu registrat, aneu al prestatge del dipòsit i creeu un dipòsit de flux de dades nou fent clic al botó Crea un dipòsit de flux (+ núvol). Podeu editar el nom pel que vulgueu o canviar-lo més endavant. He triat Personal Activity Tracker. Si marqueu la casella Tema clar, donareu al tauler el fons blanc. Feu clic a Finalitzat i es crearà el dipòsit de transmissió.

Més endavant necessitarem informació de la configuració del dipòsit per introduir-la al codi HTML (API Endpoint i iframe incrustat).

Pas 3: codi de Visual Studio

Com que faig servir la versió gratuïta de CodePen, tot el meu codi és públic. Per aquest motiu, no vull posar els meus extrems d'API i iframe incrustats al codi, ja que heu de mantenir privades les vostres claus d'accés a l'estat inicial. Visual Studio Code em permetrà editar el meu codi localment des del fitxer zip que he baixat de CodePen. Podeu descarregar la versió més recent de forma gratuïta des del seu lloc web.

Descomprimiu els fitxers de codi i obriu aquesta carpeta a Visual Studio Code. A partir d’aquí podeu editar el codi HTML. Cap a la part superior del fitxer veureu "ENTER ENDPOINTS API AQUÍ". Podeu trobar el punt final de l’API si aneu al dipòsit que heu creat a l’Estat inicial, feu clic a Configuració i a la pestanya Dades veureu el punt final de l’API. Copieu-lo i enganxeu-lo al codi HTML. A la part inferior del codi HTML, veureu "ENTRAR A COMPARTIR EMBED AQUÍ". Torneu a anar al vostre dipòsit a l'estat inicial, aneu a la configuració i a la pestanya Compartir. Feu clic al quadre Comparteix públicament i veureu Compartir per incrustar. Copieu només l'URL al quadre per compartir incrustat (es mostrarà com "https://iot.app.initialstate.com/embed/#/tiles/xxxxxx"). Enganxeu-ho a les cometes. Deseu el fitxer i estem preparats per crear la nostra pàgina web.

Pas 4: Netlify

Netlify és una plataforma tot en un que us permet construir, desplegar i gestionar un projecte web. Podeu inscriure-us gratuïtament, així que feu-ho. Un cop us hàgiu registrat, a la pàgina principal veureu un quadre que diu: "Voleu desplegar un lloc nou sense connectar-vos a Git? Arrossegueu i deixeu anar el lloc de la carpeta aquí". Arrossegueu-hi la carpeta actualitzada del fitxer CodePen i deixeu-la anar. Des d'allà desplegarà el vostre codi i crearà un enllaç a la pàgina web nova. Feu clic a l'enllaç i veureu el formulari web i el tauler.

Heu d’enviar algunes dades perquè apareguin les fitxes. Ompleu el formulari web i feu clic a Envia. Un cop ho feu, aneu al tauler de l'estat inicial. A partir d’aquí podem canviar els tipus de mosaic, canviar la mida de les fitxes, moure el disseny, ajustar els colors de les dades perquè resultin més agradables a la vista i afegir algunes expressions en temps real per assignar-les als emojis. Teniu dues opcions per fer que el tauler de control s’adapti a la mida de la inserció: ajusteu els mosaics perquè s’adapti o ajusteu la mida de la inserció al codi.

Pas 5: personalitzeu el tauler

Gràfics de calibre

He utilitzat dos tipus d’indicadors al tauler: arc i líquid. Per canviar el tipus de mosaic, feu clic dret sobre el mosaic i seleccioneu Edita el mosaic. Això obrirà el configurador de rajoles. Per a la mida de la cervesa, he seleccionat Gauge Chart com a tipus de rajola i Liquid com a Gauge Style. També he canviat el títol, el color de la clau del senyal i els valors mínim / màxim. Per al Weight & Beer ABV he utilitzat l'estil de l'arc de mesurament.

Mapa a Emojis

He assignat el tipus d’exercici i el tipus de carn a emojis mitjançant Expressions en temps real, de manera que, segons quin element he seleccionat a la llista desplegable, apareixerà un emoji específic. Podeu veure el codi que he fet servir a les fotos. Podeu afegir emojis en un Mac teclejant control + ordre + barra espaiadora o al Windows des d’aquest lloc web.

Enviar emojis en un formulari web

Per a coses com Junk, m'agrada enviar emojis directament al meu tauler. Copio i enganxo els emoji al quadre de text del formulari web i faig clic a Envia i apareix l'emoji al meu tauler.

Es necessita molt de joc per personalitzar el tauler perfecte i les opcions són infinites.

Imatge de fons

Podeu afegir una imatge de fons al tauler per proporcionar-vos dades amb més personalitat o context.

Pas 6: Conclusió

Tot i que Paul va construir això com a rastrejador d'activitats, va oferir altres idees de com es podria utilitzar amb alguns canvis menors:

• Millor cafè / cervesa / restaurant de Town Tracker
• On són els meus amics o fills ara mateix i què fan? Rastrejador
• Interactive Golf Scorecard: seguiment de puntuacions i cursos
• Paragliding Flight Logger - (Paul té aficions molt més fresques que jo)

Ara podeu fer un seguiment de qualsevol cosa i tot. Aquest codi proporciona l'intèrpret d'ordres per a qualsevol tipus de formulari web que vulgueu crear. Així que juga i crea’t i mostra’m el que tens. I, òbviament, aplaudeix Paul per ajudar a crear això.