Sisällysluettelo:
2025 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2025-01-13 06:57
Ystäväni Lontoosta, Paul, halusi löytää tavan seurata ruokaa, toimintaa ja sijaintia yhdellä kojelaudalla. Silloin hän keksi idean luoda yksinkertainen verkkolomake, joka lähettäisi tiedot kojelautaan. Hän laittoi sekä verkkolomakkeen että koontinäytön verkkosivulle ja kirjaa toimintansa liikkeellä ollessasi. Sieltä aktiviteettiloki luotiin! Tämän opetusohjelman koodi on kaikki Paul, lukuun ottamatta joitain pieniä värin muutoksia, kojelaudan mukauttamista ja slangia (minä olen tehnyt englannista amerikkalaiseen käännökseen).
Tässä projektissa aiomme käyttää:
- CodePen
- Alkuperäinen tila
- Netlify
Luomme henkilökohtaisen toiminnan seurannan, mutta tämän opetusohjelman ja koodin avulla voit tehdä tästä verkkolomakkeen ja -seurannan mitä tahansa! Aloitetaan!
Vaihe 1: CodePen
CodePen on kehitysympäristö. Sen avulla voit kirjoittaa koodisi selaimeen ja nähdä sen tulokset. Meillä on koodi HTML: ssä, CSS: ssä ja JavaScriptissä luodaksemme verkkolomakkeen, jossa on avattavat valikot, tekstikentät ja maantieteellinen sijainti. Voit rekisteröityä ilmaiseksi ja sillä ehdolla, että et voi tehdä koodistasi yksityistä, jota käsittelemme myöhemmin.
Rekisteröidy ensin CodePeniin. Kun olet tehnyt sen, voit haaroittaa projektini kaikella jo luodulla koodilla. Tämä luo kopion koodista omaan koontinäyttöön. Näet HTML vasemmalla, CSS keskellä ja JavaScript oikealla. Jos olet asiantuntija kaikissa näissä asioissa, muista lukea loput ja tehdä muutoksia haluamallasi tavalla! Jos olet uusi näillä kielillä, minulla on alla muutamia ehdotuksia muutoksista, joita voit tehdä helposti.
HTML
Tämä koodi on kaikkien avattavien valikkojen ja laatikoiden muoto. Täällä voit muuttaa seurattavien asioiden tyyppiä ja luetteloita avattavista valikoista. Pudotusvalikosta Harjoitus voit muuttaa harjoitustyyppejä (tällä hetkellä painot, juoksu, jooga ja sydän). Voit lisätä luetteloon jotain muotoa noudattaen tai lisätä vaihtoehtoja. Sama koskee lihatyyppiä, kahvin kokoa ja tyyppiä sekä oluen kokoa. Roskapostikentässä voit muuttaa paikkamerkkisanoja (tällä hetkellä sirut, suklaa jne.). Sama voidaan tehdä painon (lbs), harjoituksen (minuuttia) ja oluen (abv %) osalta.
Voit myös käyttää tätä ääriviivaa ja muuttaa kokonaan otsikoita, avattavia valintoja ja paikkamerkkejä, jotta voit tehdä tästä verkkolomakkeesta minkä tahansa haluamasi seurannan.
CSS
Tämä koodiosa asettaa taustavärin, tekstin kohdistuksen ja sarakkeiden kohdistuksen. Jos haluat muuttaa taustan pahoinvoivasta vaaleanpunaisesta miellyttävämpään, käytä online -värinvalitsinta löytääksesi oikea väri -arvo. Voit tasata tekstin tai sarakkeet oikealle, vasemmalle tai keskelle.
JavaScript
Tämä koodi toimii maantieteellisen sijainnin painikkeella ja lähetä -painikkeella. Täällä ei ole paljon, suosittelen vaihtamista.
Viedä
Kun olet asettanut kaiken haluamallesi, napsauta vientipainiketta oikeassa alakulmassa ja valitse Vie.zip -muodossa. Tämä lataa koodin zip -tiedostoon ja näet sen latauskansioosi.
Vaihe 2: Alkutila
Alkutilan avulla voimme luoda mukautetun hallintapaneelin toiminnastamme, jota seuraamme. Voit rekisteröityä 14 päivän ilmaiseen kokeiluun. Sen jälkeen se on ilmainen opiskelijoille, joilla on edu -sähköpostiosoite, tai 9,99 dollaria kuukaudessa henkilökohtaisesta suunnitelmasta.
Kun olet kirjautunut sisään tai kirjautunut sisään, siirry ämpärihyllyysi ja luo uusi tietovirran ryhmä napsauttamalla Luo stream -ämpäri -painiketta (+pilvi). Voit muokata nimeä haluamaksesi tai muuttaa sitä myöhemmin, valitsin Personal Activity Tracker. Jos valitset Valoteema -ruudun, kojelautaan tulee valkoinen tausta. Napsauta Valmis ja stream -ryhmäsi luodaan.
Tarvitsemme tietoja säilön asetuksista myöhemmin HTML -koodiin (API -päätepiste ja iframe -upotus).
Vaihe 3: Visual Studio Code
Koska käytän CodePenin ilmaista versiota, kaikki koodini ovat julkisia. Tästä syystä en halua laittaa sovellusliittymän päätepisteitä ja iframe -upotusta koodiin, koska sinun on pidettävä alkuperäisen tilan käyttöavaimet yksityisinä. Visual Studio Code antaa minun muokata koodiani paikallisesti CodePenistä lataamani zip -tiedoston avulla. Voit ladata uusimman version ilmaiseksi heidän verkkosivuiltaan.
Pura kooditiedostot ja avaa kyseinen kansio Visual Studio Codessa. Täältä voit muokata HTML -koodia. Tiedoston yläosassa näkyy "ENTER API ENDPOINTS HERE". Löydät sovellusliittymän päätepisteen siirtymällä alkuperäiseen tilaan luomaasi säilöön, napsauttamalla asetuksia ja Tiedot -välilehden alla näet sovellusliittymän päätepisteen. Kopioi ja liitä tämä HTML -koodiin. HTML -koodin alareunassa näkyy "ENTER EMBED SHARE HERE". Siirry jälleen alkuperäiseen tilaan, siirry asetuksiin ja Jakaminen -välilehteen. Napsauta Jaa julkisesti -ruutua ja näet Jaa upottamalla. Kopioi vain upotusjako -ruudun URL -osoite (se näyttää "https://iot.app.initialstate.com/embed/#/tiles/xxxxxx"). Liitä se lainausmerkkeihin. Tallenna tiedosto ja olemme valmiit luomaan verkkosivumme.
Vaihe 4: Netlify
Netlify on all-in-one-alusta, jonka avulla voit rakentaa, ottaa käyttöön ja hallita verkkoprojekteja. Voit rekisteröityä ilmaiseksi, joten tee se. Kun olet rekisteröitynyt, näet pääsivullasi ruudun, jossa lukee: "Haluatko ottaa uuden sivuston käyttöön muodostamatta yhteyttä Gitiin? Vedä ja pudota kansiosivustosi tähän." Vedä siis päivitetty CodePen -tiedostokansio sinne ja pudota se. Sieltä se ottaa käyttöön koodisi ja luo linkin uudelle verkkosivullesi. Napsauta linkkiä ja näet verkkolomakkeen ja koontinäytön.
Sinun on lähetettävä joitain tietoja, jotta laatat näkyvät. Täytä siis verkkolomake ja paina Lähetä. Kun olet tehnyt sen, siirry alkuperäisen tilan hallintapaneeliin. Täältä voimme muuttaa laattojen tyyppejä, muuttaa laattojen kokoa, siirtää asettelua, säätää datavärejä miellyttävämmäksi silmille ja lisätä reaaliaikaisia lausekkeita emojien kartoitukseen. Sinulla on kaksi vaihtoehtoa saada koontinäyttö sopimaan upotuskoon kanssa: säädä laatat sopimaan tai säädä upotuksen kokoa koodissa.
Vaihe 5: Mukauta koontinäyttöäsi
Mittarikaaviot
Kojelaudassa käytin kahden tyyppisiä mittareita: kaari ja neste. Jos haluat muuttaa laattojen tyyppiä, napsauta ruutua hiiren kakkospainikkeella ja valitse Muokkaa laattaa. Tämä avaa laattojen kokoonpanon. Oluen koolle valitsin mittarikartan laatatyypiksi ja nesteen mittatyyliksi. Muutin myös otsikon, signaalinäppäimen värin ja minimi-/maksimiarvot. Painon ja oluen ABV: ssä käytin kaarimittaria.
Kartta hymiöihin
Yhdistin harjoitustyypin ja lihatyypin emojiksi käyttämällä reaaliaikaisia lausekkeita, joten riippuen siitä, minkä kohteen valitsin avattavasta luettelosta, tietty emoji tulee näkyviin. Näet valokuvissa käyttämäni koodin. Voit lisätä hymiöitä Mac -tietokoneeseen näppäilemällä Ctrl+komento+välilyönti tai Windows tällä sivustolla.
Lähetä hymiöitä verkkolomakkeella
Junkin kaltaisissa asioissa haluan lähettää hymiöitä suoraan kojelautaan. Kopioin ja liitän emojin verkkolomakkeen tekstikenttään ja napsautan Lähetä, niin emoji näkyy hallintapaneelissani!
Täydellisen kojelaudan mukauttaminen vaatii paljon leikkiä ja vaihtoehtoja on loputtomasti.
Taustakuva
Voit lisätä taustakuvan hallintapaneeliin, jotta saat enemmän persoonallisuutta tai kontekstia.
Vaihe 6: Johtopäätös
Vaikka Paavali rakensi tämän aktiivisuusseurannaksi, hän tarjosi muita ideoita siitä, miten tätä voitaisiin käyttää pienin muutoksin:
- Paras kahvi/olut/ravintola kaupungissa Tracker
- Missä ystäväni tai lapseni ovat juuri nyt ja mitä he tekevät? Seuraaja
- Interaktiivinen golf -tuloskortti - pisteet ja radat
- Varjoliitolentojen kirjaaja - (Paulilla on paljon viileämpiä harrastuksia kuin minulla)
Nyt voit seurata mitä tahansa ja kaikkea. Tämä koodi tarjoaa kuoren kaikentyyppisille verkkolomakkeille, jotka haluat luoda. Joten leiki ja ole luova ja näytä minulle, mitä sinulla on! Ja tietysti, tsemppiä Paavalille, joka auttoi tämän luomisessa!