Uvedite svojo prvo aplikacijo seznama opravil: 8 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:04

Če ste kodiranje popolnoma novi ali imate kodiranje v ozadju, se morda sprašujete, kje se učiti. Morate se naučiti, kako, kaj, kje kodirati in nato, ko je koda pripravljena, kako jo uvesti, da jo lahko vidite v celoti.

No, dobra novica je, da kodiranje ni težko.

Ciljna publika: Ta vadnica je namenjena začetnikom, ki želijo začeti kariero na področju spletnega razvoja, razumejo spletne tehnologije na splošno.

Čas izdelave: 90 minut.

Težavnost: Enostavno.

1. korak: Kaj bomo zgradili?

Do konca te vadnice bomo:

• Ustvarite preprosto spletno aplikacijo s seznamom opravil z uporabo HTML5.
• Integrirajte Bootstrap z našo aplikacijo, da dodate lep videz in hitro oblikovanje.
• Uporabite knjižnico JavaScript in JQuery, če želite naši aplikaciji dodati nekaj dinamičnega vedenja.
• Razmestite našo aplikacijo v oblaku z uporabo programa Ziet/now.

V akciji:

2. korak: Uvod v HTML, Bootstrap, JavaScript in JQuery

Kaj je HTML?

Jezik označevanja hiperbesedila (HTML) lahko razumemo kot "jezik interneta". HTML je standardni jezik označevanja, ki se uporablja za ustvarjanje spletnih strani. Prvotno je bil zasnovan za izmenjavo znanstvenih dokumentov. Zaradi prilagoditev HTML skozi leta je bilo primerno opisati več drugih vrst dokumentov, ki so lahko prikazani kot spletne strani na internetu.

Edina zahteva, ki je potrebna za prikaz strani HTML, je spletni brskalnik, na primer Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome ali Apple Safari.

Kaj je Bootstrap?

Bootstrap je najbolj priljubljen okvir HTML, CSS in JavaScript za izdelavo odzivnih mobilnih spletnih mest. Bootstrap je odprtokodni projekt, ki ga je razvil Twitter. sestoji iz razredov CSS, ki jih je mogoče uporabiti za elemente za dosledno oblikovanje, in kode JavaScript, ki izvaja dodatno izboljšanje.

Kaj je JavaScript?

JavaScript je programski jezik, ki se uporablja za programiranje na strani odjemalca v spletnih aplikacijah. Kodo JavaScript vodi brskalnik in programerjem spletnih aplikacij omogoča izdelavo dinamične spletne vsebine, na primer komponent, ki dinamično prikazujejo ali so skrite, spreminjajo videz in preverjajo uporabniški vnos.

Kaj je JQuery?

JQuery je hitra, majhna in s funkcijami bogata knjižnica JavaScript, ki poenostavlja stvari, kot so premikanje dokumentov HTML in upravljanje, upravljanje dogodkov, animacija.

Do vse moči JQuery dostopate prek JavaScripta, zato je dobro razumevanje JavaScript bistveno za razumevanje, strukturiranje in odpravljanje napak vaše kode.

Za več podrobnosti:

HTML

JavaScript

JQuery

Bootstrap

3. korak: Vaša prva stran s HTML -jem

1. KORAK: ustvarite novo mapo:

mkdir preprost-todolist

KORAK 2: ustvarite novo datoteko v mapi simple-todolist in jo poimenujte index.html.

cd simple-todolist

dotaknite se index.html

KORAK 3: dodajte naslednjo kodo v index.html.

Seznam opravil

Moj seznam opravkov

4. KORAK: Odprite index.html v brskalniku.

Videli boste, da se prikaže Moj seznam opravil (glejte zgornjo fotografijo).

4. korak: Dodajanje zagonskega pasu

V tem razdelku bomo na stran index.html dodali podporo Bootstrap, da bomo aplikaciji Seznam opravil dodali hiter in dober slog.

Opomba: V tej aplikaciji bomo uporabljali Bootstrap 3, vi uporabite kateri koli drug okvir CSS, na primer semantični uporabniški vmesnik.

1. KORAK: Dodajte datoteko CSS Bootstrap v oznako head:

KORAK 2: dodajte datoteke skriptov Bootstrap in JQuery CDN na koncu oznake telesa:

3. KORAK: Odprite index.html v brskalniku.

Čestitamo, na našo stran smo v nekaj korakih uspešno dodali podporo Bootstrap.

5. korak: Dokončajte uporabniški vmesnik

Ko smo naši aplikaciji uspešno dodali podporo Bootstrap. Zdaj pa nadaljujmo in tekmujmo z uporabniškim vmesnikom (uporabniški vmesnik), ki uporabniku omogoča dodajanje novih nalog. Seznam opravil bo lahko dodal nove elemente na seznam in odstranil obstoječe.

1. KORAK: dodajte naslednjo kodo v index.html.

Dodaj novo nalogo Dodaj Počisti vse!

Moj seznam opravil

KORAK 2: odprite datoteko index.html v brskalniku.

6. korak: dodajanje logike aplikaciji

Ko vnesete ime opravila in kliknete gumb Dodaj, se trenutno ne zgodi nič. Odpravimo to.

Do konca tega koraka bomo indeks.html spremenili v dinamično stran, tako da bo obnašal interakcijo uporabnikov.

1. KORAK: ustvarite novo mapo v simple-todolist-u, poimenujte jo js in novo ime datoteke script.js v tej mapi:

mkdir js

cd js na dotik script.js

KORAK 2: povežite script.js z index.html, tako da na koncu oznake head dodate naslednjo kodo:

KORAK 3: datoteki script.js dodajte naslednjo kodo

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

var opravila = 0 $ ("#removeAll"). hide (); / * dodaj nov upravljalnik opravil */ $ ("#add"). on ("click", (event) => {event.preventDefault (); event.stopPropagation (); var val = $ ("input"). val (); if (val! == "") {opravila += 1; var elm = $ ("

• "); $ ("#mylist "). append (elem); $ (" input "). val (" "); / * odstranite edinstven upravljavec opravil * / $ (". text-right "). on (" clikc ", function (event) {event.preventDefault (); event.stopPropagation (); opravila -= 1; $ (to).parent.remove ();}); /* prikaži gumb RemoveAll, če imamo več kot 3 opravila */ if (opravila> 2) {$ ("#remveAll"). show ();}/ *removeAll rokovalnik */ $ ("#removeAll"). on ("klik", dogodek => {event.preventDefault (); event.stopPropagation (); $ (". disabled"). siblings (). remove (); tasks = 0; $ ("#removeAll"). hide ();});}});});

  Opomba: Lahko dobite klon ali prenesete ZIP kodo iz mojega skladišča GitHub, kar vas prihrani pred dotikom.

  git clone github.com/ahmnouira/simple-todolist

  KORAK 4: preizkusite kodo

  Odprite brskalnik in vnesite opravilo, nato kliknite Dodaj, videli boste, da je na seznam dodano novo opravilo, če dodate 3 opravila, boste opazili, da se prikaže gumb ClearAll, ta gumb nam omogoča, da odstranimo vsa dodana opravila, vi lahko tudi odstranite samo eno opravilo za nakup s klikom na njegov gumb.

  7. korak: (Izbirno) Razmestite aplikacijo

  

  Doslej smo zgradili preprosto aplikacijo seznama opravil, zdaj je čas, da jo namestimo v oblak in svoje delo delimo z drugimi po vsem svetu.

  Za to bomo uporabili oblačno platformo z imenom ZEIT Now.

  Kaj je zdaj ZEIT?

  ZEIt Now je oblačna platforma za statična spletna mesta in funkcije brez strežnika, ki razvijalcem omogoča gostovanje spletnih mest in spletnih storitev, ki se takoj uvedejo, vse to z ničelno konfiguracijo.

  1. Namestite zdaj CLI

  Za uvajanje z ZEIT Now boste morali namestiti Now CLI.

  pomembno: Prepričajte se, da imate nameščen npm.

  npm -v # preverite, ali je npm nameščen

  npm install -g now@latest # namestite zadnjo različico Now CLI po vsem svetu zdaj -v # chech, če je nameščen CLI Now in jo natisnite

  2. Razmestite

  Vse kar morate storiti je, da se premaknete v imenik in nato z enim ukazom razmestite aplikacijo:

  zdaj --prod # razmestite aplikacijo

  Ko boste razmeščeni, boste predogledni URL, ki je dodeljen vsaki uvedbi za skupno rabo najnovejših sprememb pod naslovom.

  moja aplikacija:

  8. korak: Zaključek

  To je vse!

  Kodo lahko raziščete tako, da nastavite nove funkcije in razširite aplikacijo ter delite svoje izkušnje in vprašanja na področju komentarjev.

  Če si želite ogledati več svojih del, obiščite mojo odprtokodno datoteko na GitHubu.

  myYouTube.

  myLinkedIn

  Hvala, ker ste imeli čas za branje mojih navodil ^^.

  Imej lep dan.

  Ahmed Nouira