Implementirajte svoju prvu aplikaciju za popis obaveza: 8 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:34

Ako ste tek počeli kodirati ili imate pozadinsko kodiranje, možda se pitate odakle početi učiti. Morate naučiti kako, što, gdje kodirati, a zatim, kada je kôd spreman, kako ga rasporediti kako bi ga vidjeli cijeli.

Pa, dobra vijest je da kodiranje nije teško.

Ciljna publika: Ovaj je vodič namijenjen početnicima koji žele započeti karijeru u web razvoju, imaju razumijevanje web tehnologija općenito.

Vrijeme izrade: 90 minuta.

Poteškoća: Lako.

Korak 1: Što ćemo izgraditi?

Do kraja ovog vodiča ćemo:

• Izradite jednostavnu web-aplikaciju s popisom zadataka pomoću HTML5.
• Integrirajte Bootstrap s našom aplikacijom za dodavanje lijepog izgleda i brzog oblikovanja.
• Koristite JavaScript i JQuery knjižnicu za dodavanje dinamičkog ponašanja našoj aplikaciji.
• Implementirajte našu aplikaciju u oblak koristeći Ziet/now.

Na djelu:

Korak 2: Uvod u HTML, Bootstrap, JavaScript i JQuery

Što je HTML?

Jezik označavanja hiperteksta (HTML) može se smatrati "jezikom interneta". HTML je standardni jezik za označavanje koji se koristi za izradu web stranica. Izvorno je dizajniran za razmjenu znanstvenih dokumenata. Adaptacije HTML -a tijekom godina učinile su prikladnim opisivanje nekoliko drugih vrsta dokumenata koji se mogu prikazati kao web stranice na internetu.

Jedini uvjet koji je potreban za prikaz HTML stranice je web preglednik, kao što su Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome ili Apple Safari.

Što je Bootstrap?

Bootstrap je najpopularniji HTML, CSS i JavaScript okvir za izradu responzivnih, mobilnih prvih web stranica. Bootstrap je projekt otvorenog koda koji je razvio Twitter. sastoji se od CSS klasa koje se mogu primijeniti na elemente za njihovo dosljedno oblikovanje i JavaScript koda koji izvodi dodatna poboljšanja.

Što je JavaScript?

JavaScript je programski jezik koji se koristi za programiranje na strani klijenta u web aplikacijama. JavaScript kôd pokreće preglednik i omogućuje programerima web aplikacija izradu dinamičkog web sadržaja, kao što su komponente koje se prikazuju ili su skrivene dinamički, mijenjaju izgled i provjeravaju unos korisnika.

Što je JQuery?

JQuery je brza, mala i JavaScript biblioteka bogata značajkama, čini stvari poput prelaska HTML dokumenata i manipulaciju, upravljanje događajima, animaciju mnogo jednostavnijim.

Svim moćima JQueryja pristupa se putem JavaScripta, stoga je dobro poznavanje JavaScripta neophodno za razumijevanje, strukturiranje i ispravljanje pogrešaka u vašem kodu.

Za više detalja:

HTML

JavaScript

JQuery

Bootstrap

Korak 3: Vaša prva stranica s HTML -om

KORAK 1: stvorite novu mapu:

mkdir jednostavan-todolist

KORAK 2: stvorite novu datoteku unutar mape simple-todolist i dajte joj ime index.html.

cd simple-todolist

dodirni indeks.html

KORAK 3: Dodajte sljedeći kôd u index.html.

Popis obaveza

Moj popis obaveza

KORAK 4: Otvorite index.html u svom pregledniku.

Vidjet ćete da se prikazuje Moja lista obaveza (pogledajte gornju fotografiju).

Korak 4: Dodavanje Bootstrapa

U ovom odjeljku dodat ćemo podršku za Bootstrap na našu stranicu index.html kako bismo brzo i dobro oblikovali aplikaciju To-Do List App.

Napomena: U ovoj aplikaciji koristit ćemo Bootstrap 3, vi koristite bilo koji drugi CSS okvir, poput semantičkog korisničkog sučelja.

KORAK 1: Dodajte Bootstrap CSS datoteku u oznaku head:

KORAK 2: dodajte datoteke skripti Bootstrap i JQuery CDN na kraj oznake tijela:

KORAK 3: Otvorite index.html u svom pregledniku.

Čestitamo, uspješno smo dodali podršku za Bootstrap na našu stranicu u nekoliko koraka.

Korak 5: Dovršite korisničko sučelje

Nakon što smo uspješno dodali podršku za Bootstrap našoj aplikaciji. Idemo sada i natjecati se u korisničkom sučelju (korisničkom sučelju) kako bi korisnik mogao dodati nove zadatke. Popis zadataka moći će dodati nove stavke na popis, kao i ukloniti postojeće.

KORAK 1: dodajte sljedeći kôd u index.html.

Dodaj novi zadatak Dodaj Obriši sve!

Moj popis zadataka

KORAK 2: otvorite datoteku index.html u svom pregledniku.

Korak 6: Dodavanje logike u aplikaciju

Kada unesete naziv zadatka i kliknete gumb Dodaj, trenutno se ništa ne događa. Ispravimo to.

Do kraja ovog koraka pretvorit ćemo naš index.html u dinamičku stranicu, tako da će se ponašati prema interakciji korisnika.

KORAK 1: stvorite novu mapu unutar simple-todolista, dajte joj ime js i novu datoteku po imenu script.js unutar te mape:

mkdir js

cd js touch script.js

KORAK 2: povežite script.js s index.html dodavanjem sljedećeg koda na kraj oznake head:

KORAK 3: Dodajte sljedeći kôd u datoteku script.js

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

var tasks = 0 $ ("#removeAll"). hide (); / * dodaj novi rukovatelj zadacima */ $ ("#add"). on ("click", (event) => {event.preventDefault (); event.stopPropagation (); var val = $ ("input"). val (); if (val! == "") {zadaci += 1; var elm = $ ("

• "); $ ("#mylist "). append (elem); $ (" input "). val (" "); / * uklonite jedinstveni rukovatelj zadacima * / $ (". text-right "). on (" clikc ", function (event) {event.preventDefault (); event.stopPropagation (); zadaci -= 1; $ (ovo).parent.remove ();}); /* prikaži gumb RemoveAll kada imamo više od 3 zadaci */ if (zadaci> 2) {$ ("#remveAll"). show ();}/ *removeAll rukovatelj */ $ ("#removeAll"). on ("klik", događaj => {event.preventDefault (); event.stopPropagation (); $ (". disabled"). siblings (). remove (); tasks = 0; $ ("#removeAll"). hide ();});}});});

  Napomena: Možete dobiti ili klonirati ili preuzeti ZIP kôd iz mog spremišta GitHub, što će vas spasiti od dodirivanja.

  git klon github.com/ahmnouira/simple-todolist

  KORAK 4: testirajte kôd

  Otvorite svoj preglednik i unesite zadatak, a zatim kliknite Dodaj, vidjet ćete da je novi zadatak dodan na popis, ako dodate 3 zadatka primijetit ćete da se pojavio gumb clearAll, ovaj gumb nam omogućuje uklanjanje svih dodanih zadataka, vi također možete ukloniti samo jedan zadatak kupiti klikom na njegov gumb.

  Korak 7: (Izborno) Implementirajte aplikaciju

  

  Do sada smo izgradili jednostavnu aplikaciju za popis zadataka, sada je vrijeme da je postavite u oblak i podijelite svoj rad s drugima širom svijeta.

  Da bismo to postigli, koristit ćemo cloud platformu pod nazivom ZEIT Now.

  Što je ZEIT sada?

  ZEIt Now je oblačna platforma za statičke web stranice i funkcije bez poslužitelja, a omogućuje programerima da ugoste web stranice i web usluge koje se odmah primjenjuju, a sve to s nultom konfiguracijom.

  1. Instaliraj sada CLI

  Za implementaciju sa ZEIT Now, morate instalirati Now CLI.

  važno: Provjerite imate li instaliran npm.

  npm -v # provjerite je li npm instaliran

  npm install -g now@latest # instalirajte posljednju verziju Now CLI -a globalno sada -v # chech ako je Now CLI instaliran i ispišite je

  2. Rasporedi

  Sve što trebate učiniti je premjestiti se u direktorij, a zatim primijeniti aplikaciju s jednom naredbom:

  sada --prod # implementaciju aplikacije

  Nakon implementacije dobit ćete URL za pregled koji je dodijeljen svakoj implementaciji za dijeljenje najnovijih promjena pod adresom.

  moja aplikacija:

  Korak 8: Zaključak

  To je sve!

  Slobodno istražite kôd postavljanjem novih značajki i proširivanjem aplikacije te podijelite svoje iskustvo i pitanja u području za komentare.

  Da biste vidjeli više mojih radova, posjetite moj otvoreni izvor na GitHubu.

  myYouTube.

  myLinkedIn

  Hvala vam što ste imali vremena pročitati moje upute ^^.

  Želim vam ugodan dan.

  Ahmed Nouira