Ota käyttöön ensimmäinen tehtäväluettelosovellus: 8 vaihetta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 09:01

Jos olet täysin aloittanut koodauksen tai sinulla on jonkinlainen taustakoodaus, saatat miettiä, mistä aloittaa oppiminen. Sinun on opittava kuinka, mitä, minne koodata ja sitten, kun koodi on valmis, kuinka ottaa se käyttöön, jotta se näkyy.

Hyvä uutinen on, että koodaus ei ole vaikeaa.

Kohdeyleisö: Tämä opetusohjelma on tarkoitettu aloittelijoille, jotka haluavat aloittaa uran verkkokehityksessä ja joilla on ymmärrystä verkkoteknologioista yleensä.

Rakennusaika: 90 minuuttia.

Vaikeusaste: Helppo.

Vaihe 1: Mitä rakennamme?

Tämän opetusohjelman loppuun mennessä:

• Luo yksinkertainen tehtäväluettelosovellus HTML5: n avulla.
• Integroi Bootstrap sovellukseemme lisätäksesi hyvännäköistä ja nopeaa muotoilua.
• Käytä JavaScript- ja JQuery -kirjastoa lisätäksesi dynaamista käyttäytymistä sovellukseemme.
• Ota sovelluksemme käyttöön pilvessä Zietin avulla/nyt.

Toiminnassa:

Vaihe 2: Johdatus HTML: ään, Bootstrapiin, JavaScriptiin ja JQueryyn

Mikä on HTML?

Hypertekstimerkintäkieltä (HTML) voidaan ajatella "Internetin kieleksi". HTML on tavallinen merkintäkieli, jota käytetään verkkosivujen luomiseen. Se oli alun perin tarkoitettu tieteellisten asiakirjojen jakamiseen. HTML: ään vuosien aikana tehdyt mukautukset tekivät mahdolliseksi kuvata useita muita asiakirjatyyppejä, jotka voidaan näyttää Internetin verkkosivuina.

Ainoa vaatimus HTML -sivun näyttämiseen on selain, kuten Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome tai Apple Safari.

Mikä on Bootstrap?

Bootstrap on suosituin HTML-, CSS- ja JavaScript -kehys reagoivien, mobiililaitteille tarkoitettujen ensimmäisten verkkosivustojen luomiseen. Bootstrap on Twitterin kehittämä avoimen lähdekoodin projekti. se koostuu CSS -luokista, joita voidaan soveltaa elementteihin, jotta ne voidaan muotoilla johdonmukaisesti, ja JavaScript -koodista, joka parantaa lisäominaisuuksia.

Mikä on JavaScript?

JavaScript on ohjelmointikieli, jota käytetään asiakaspuolen ohjelmointiin verkkosovelluksissa. Selain käyttää JavaScript -koodia, ja sen avulla verkkosovellusten ohjelmoijat voivat rakentaa dynaamista verkkosisältöä, kuten komponentteja, jotka näyttävät tai piilotetaan dynaamisesti, muuttaa ulkonäköä ja vahvistaa käyttäjän syöttämät tiedot.

Mikä on JQuery?

JQuery on nopea, pieni ja monipuolinen JavaScript-kirjasto, joka tekee HTML-asiakirjojen läpikäynnistä ja manipuloinnista, tapahtumien käsittelystä ja animaatiosta paljon helpompaa.

Kaikki JQueryn teho on käytettävissä JavaScriptin kautta, joten JavaScriptin vahva ymmärtäminen on välttämätöntä koodin ymmärtämiseksi, jäsentämiseksi ja virheenkorjaamiseksi.

Lisätietoja:

HTML

JavaScript

JQuery

Bootstrap

Vaihe 3: Ensimmäinen sivusi HTML -koodilla

VAIHE 1: Luo uusi kansio:

mkdir yksinkertainen todolist

VAIHE 2: Luo uusi tiedosto simple-todolist-kansioon ja nimeä se index.html.

cd yksinkertainen todolist

kosketa index.html

VAIHE 3: lisää seuraava koodi hakemistoon index.html.

Tehtävälista

Minun tehtävälista

VAIHE 4: Avaa index.html selaimessasi.

Näet Minun tehtävälistani näkyy (katso yllä oleva kuva).

Vaihe 4: Bootstrapin lisääminen

Tässä osiossa lisäämme Bootstrap-tuen index.html-sivullemme lisätäksemme nopeaa ja hyvää muotoilua tehtäväluettelosovellukseen.

Huomautus: Tässä sovelluksessa käytämme Bootstrap 3: ta, käytät mitä tahansa muuta CSS -kehystä, kuten semanttista käyttöliittymää.

VAIHE 1: lisää Bootstrap CSS -tiedosto head -tunnisteeseen:

VAIHE 2: lisää Bootstrap- ja JQuery CDN -skriptitiedostot body -tunnisteen loppuun:

VAIHE 3: Avaa index.html selaimessasi.

Onnittelut, olemme onnistuneesti lisänneet Bootstrap -tuen sivullemme muutamassa vaiheessa.

Vaihe 5: Viimeistele käyttöliittymä

Kun olemme onnistuneesti lisänneet Bootstrap -tuen sovellukseemme. Jatketaan nyt ja kilpailemme käyttöliittymästä (User Interface), jotta käyttäjä voi lisätä uusia tehtäviä. Tehtävälista voi lisätä uusia kohteita luetteloon ja poistaa olemassa olevia kohteita.

VAIHE 1: lisää seuraava koodi hakemistoon index.html.

Lisää uusi tehtävä Lisää Tyhjennä kaikki!

Oma tehtäväluettelo

VAIHE 2: avaa index.html -tiedosto selaimessasi.

Vaihe 6: Logiikan lisääminen sovellukseen

Kun kirjoitat tehtävän nimen ja napsautat Lisää -painiketta, mitään ei tapahdu tällä hetkellä. Korjataan se.

Tämän vaiheen loppuun mennessä muutamme index.html -sivuston dynaamiseksi sivuksi, jotta se käyttäytyy käyttäjien kanssa.

VAIHE 1: luo uusi kansio simple-todolistiin, anna sille nimi js ja uusi tiedostonimi se script.js kansioon:

mkdir js

cd js kosketa script.js

VAIHE 2: linkitä script.js hakemistoon index.html lisäämällä seuraava koodi head -tagin loppuun:

VAIHE 3: lisää seuraava koodi script.js -tiedostoon

$ (asiakirja).ready (() => {

var tehtävät = 0 $ ("#removeAll"). hide (); / * lisää uusi tehtävienkäsittelijä */ $ ("#add"). on ("click", (event) => {event.preventDefault (); event.stopPropagation (); var val = $ ("input"). val (); if (val! == "") {tehtävät += 1; var elm = $ ("

• "); $ ("#mylist "). append (elem); $ (" input "). val (" "); / * poista ainutlaatuinen tehtävänkäsittelijä * / $ (". text-right "). on (" clikc ", toiminto (tapahtuma) {event.preventDefault (); event.stopPropagation (); tehtävät -= 1; $ (this).parent.remove ();}); /* näytä removeAll -painike, kun meillä on enemmän kuin 3 tehtävät */ jos (tehtävät> 2) {$ ("#remveAll"). show ();}/ *removeAll -käsittelijä */ $ ("#removeAll"). on ("click", event => {event.preventDefault (); event.stopPropagation (); $ (". Disabled"). sisarukset (). remove (); task = 0; $ ("#removeAll"). hide ();});}});});

  Huomautus: Voit joko kloonata tai ladata koodin ZIP -koodin GitHub -arkistostani, mikä säästää sinua napauttamasta.

  git klooni github.com/ahmnouira/simple-todolist

  VAIHE 4: testaa koodi

  Avaa selaimesi ja kirjoita tehtävä ja napsauta sitten Lisää, niin näet uuden tehtävän, joka lisätään luetteloon. voi myös poistaa vain yhden tehtäväostoksen napsauttamalla sen painiketta.

  Vaihe 7: (Valinnainen) Ota sovellus käyttöön

  

  Tähän mennessä olemme rakentaneet yksinkertaisen tehtävälista -sovelluksen, nyt on aika ottaa se käyttöön pilvessä ja jakaa työmme muiden kanssa ympäri maailmaa.

  Tämän saavuttamiseksi käytämme ZEIT Now -nimistä pilvialustaa.

  Mikä on ZEIT nyt?

  ZEIt Now on pilvialusta staattisille sivustoille ja palvelimettomille toiminnoille, ja sen avulla kehittäjät voivat isännöidä heti käyttöönotettavia verkkosivustoja ja verkkopalveluja, kaikki tämä ilman kokoonpanoa.

  1. Asenna nyt CLI

  Jos haluat ottaa käyttöön ZEIT Now -ohjelman, sinun on asennettava Now CLI.

  Tärkeää: Varmista, että npm on asennettu.

  npm -v # Tarkista, asennetaanko npm

  npm install -g now@latest # asenna Now CLI: n viimeisin versio maailmanlaajuisesti nyt -v # chech jos Now CLI on asennettu ja tulosta sen versio

  2. Ota käyttöön

  Sinun tarvitsee vain siirtyä hakemistoon ja ottaa sitten sovelluksesi käyttöön yhdellä komennolla:

  nyt --prod # ottaa sovelluksen käyttöön

  Kun olet ottanut käyttöön, saat esikatselun URL -osoitteen, joka on määritetty jokaiselle käyttöönotolle jakamaan viimeisimmät muutokset osoitteen alle.

  sovellukseni:

  Vaihe 8: Johtopäätös

  Siinä kaikki!

  Voit vapaasti tutkia koodia asettamalla uusia ominaisuuksia ja laajentaa sovellusta sekä jakaa kokemuksesi ja kysymyksesi kommentti -alueella.

  Jos haluat nähdä lisää töitäni, käy avoimessa lähdekoodissani GitHubissa.

  myYouTube.

  myLinkedIn

  Kiitos, että sinulla oli aikaa lukea ohjeeni ^^.

  Hauskaa päivän jatkoa.

  Ahmed Nouira