Vendosni aplikacionin tuaj të listës së parë të detyrave: 8 hapa

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:17

Nëse jeni plotësisht i ri në kodim ose keni ndonjë kodim në sfond, mund të pyesni se ku të filloni të mësoni. Ju duhet të mësoni se si, çfarë, ku të kodoni dhe më pas, pasi kodi të jetë gati, si ta vendosni atë për ta parë i tërë.

Epo, lajmi i mirë është se kodimi nuk është i vështirë.

Audienca e synuar: Ky tutorial ka për qëllim fillestarët që duan të fillojnë një karrierë në zhvillimin e uebit, të kenë njohuri për teknologjitë e uebit në përgjithësi.

Koha e ndërtimit: 90 minuta.

Vështirësia: E lehtë.

Hapi 1: Çfarë do të ndërtojmë?

Në fund të këtij tutoriali ne do të:

• Krijoni një aplikacion të thjeshtë në internet për listën e detyrave duke përdorur HTML5.
• Integroni Bootstrap me aplikacionin tonë për të shtuar një stil të bukur dhe të shpejtë.
• Përdorni bibliotekën JavaScript dhe JQuery për të shtuar disa sjellje dinamike në aplikacionin tonë.
• Vendosni aplikacionin tonë në cloud duke përdorur Ziet/tani.

Në veprim:

Hapi 2: Hyrje në HTML, Bootstrap, JavaScript & JQuery

Çfarë është HTML?

Hyper Text Markup Language (HTML) mund të mendohet si "gjuha e internetit". HTML është gjuha standarde e shënjimit që përdoret për të krijuar faqe në internet. Fillimisht ishte krijuar për ndarjen e dokumenteve shkencore. Përshtatjet në HTML gjatë viteve e bënë të përshtatshme përshkrimin e disa llojeve të tjera të dokumenteve që mund të shfaqen si faqe në internet në internet.

Kërkesa e vetme që nevojitet për të shfaqur një faqe HTML është një shfletues uebi, siç është Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome ose Apple Safari.

Çfarë është Bootstrap?

Bootstrap është korniza më e popullarizuar HTML, CSS dhe JavaScript për ndërtimin e uebfaqeve të para të lëvizshme. Bootstrap është një projekt me burim të hapur i zhvilluar nga Twitter. ai përbëhet nga klasa CSS që mund të aplikohen në elementë për t'i stiluar ato në mënyrë të vazhdueshme dhe kod JavaScript që kryen përmirësime shtesë.

Çfarë është JavaScript?

JavaScript është një gjuhë programimi që përdoret për programimin nga ana e klientit në aplikacionet në internet. Kodi JavaScript drejtohet nga shfletuesi dhe lejon programuesit e aplikacioneve në internet të ndërtojnë përmbajtje dinamike në internet, të tilla si komponentët që shfaqen ose fshihen në mënyrë dinamike, ndryshojnë pamjen dhe vërtetojnë hyrjen e përdoruesit.

Çfarë është JQuery?

JQuery është bibliotekë e shpejtë, e vogël dhe e pasur me veçori JavaScript, i bën gjërat si kalimi i dokumenteve HTML dhe manipulimi, trajtimi i ngjarjeve, animacioni shumë më i thjeshtë.

E gjithë fuqia e JQuery arrihet përmes JavaScript, kështu që të kesh një kuptim të fortë të JavaScript, është thelbësore për të kuptuar, strukturuar dhe korrigjuar kodin tuaj.

Për më shumë detaje:

HTML

JavaScript

JQuery

Rrip çizme

Hapi 3: Faqja juaj e parë me HTML

HAPI 1: krijoni një dosje të re:

mkdir thjeshtë-todolist

HAPI 2: krijoni skedar të ri brenda dosjes së thjeshtë-todolist dhe emërtojeni index.html.

cd thjeshtë-todolist

indeksi i prekjes.html

HAPI 3: shtoni kodin e mëposhtëm në index.html.

Lista e detyrave

Lista ime e detyrave

HAPI 4: Hapni index.html në shfletuesin tuaj.

Do të shihni që lista e detyrave të mia shfaqet (shikoni foton më lart).

Hapi 4: Shtimi i Bootstrap

Në këtë seksion ne do të shtojmë mbështetjen e Bootstrap në faqen tonë të index.html, në mënyrë që të shtojmë një stilim të shpejtë dhe të mirë në Aplikacionin Lista e detyrave.

Shënim: Në këtë aplikacion ne do të përdorim Bootstrap 3, ju përdorni çdo kuadër tjetër CSS, si UI Semantik.

HAPI 1: shtoni skedarin CSS Bootstrap në etiketën e kokës:

HAPI 2: shtoni skedarët e skripteve Bootstrap dhe JQuery CDN në fund të etiketës së trupit:

HAPI 3: Hapni index.html në shfletuesin tuaj.

Urime, ne shtojmë me sukses mbështetjen e Bootstrap në faqen tonë në disa hapa.

Hapi 5: Plotësoni UI

Pasi të kemi shtuar me sukses mbështetjen e Bootstrap në aplikacionin tonë. Tani le të vazhdojmë dhe të konkurrojmë UI (Ndërfaqja e Përdoruesit) për ta lënë përdoruesin të shtojë detyra të reja. Lista e detyrave do të jetë në gjendje të shtojë artikuj të rinj në një listë, si dhe të heqë artikujt ekzistues.

HAPI 1: shtoni kodin e mëposhtëm në index.html.

Shto një detyrë të re Shtoni pastroni të gjitha!

Lista e detyrave të mia

HAPI 2: hapni skedarin index.html në shfletuesin tuaj.

Hapi 6: Shtimi i Logjikës në Aplikacion

Kur futni një emër detyre dhe klikoni në butonin Shto, asgjë nuk ndodh për momentin. Le ta rregullojmë atë.

Deri në fund të këtij hapi ne do ta kthejmë indeksin tonë. Html në një faqe dinamike, kështu që do të sillet ndaj ndërveprimit të përdoruesit.

HAPI 1: krijoni një dosje të re brenda thjeshtë-todolist, emërtojeni atë js dhe një skedar të ri emrin script.js brenda asaj dosje:

mkdir js

cd js shkrim prekës.js

HAPI 2: lidhni script.js me index.html duke shtuar kodin e mëposhtëm në fund të etiketës së kokës:

HAPI 3: shtoni kodin e mëposhtëm në skedarin script.js

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

detyrat var = 0 $ ("#removeAll"). fsheh (); / * shtoni mbajtës të ri të detyrave */ $ ("#shto"). në ("kliko", (ngjarjen) => {event.preventDefault (); event.stopPropagation (); var val = $ ("hyrje"). val (); nëse (val! == "") {detyrat += 1; var elm = $ ("

• "); $ ("#mylist "). shtoj (elem); $ (" hyrje "). val (" "); / * hiq trajtuesin unik të detyrave * / $ (". tekst-djathtas "). në (" clikc ", funksioni (ngjarja) {event.preventDefault (); event.stopPropagation (); detyrat -= 1; $ (kjo).parent.remove ();}); /* shfaq butonin removeAll kur kemi më shumë se 3 detyrat */ if (detyrat> 2) {$ ("#remveAll"). shfaq ();}/ *removeAll handler */ $ ("#removeAll"). on ("click", event => {event.preventDefault (); event.stopPropagation (); $ (". me aftësi të kufizuara"). vëllezërit e motrat (). hiqni (); detyrat = 0; $ ("#removeAll"). fshiheni ();});}})}});

  Shënim: Ju mund të merrni ose klononi ose shkarkoni ZIP të kodit nga depoja ime GitHub, kjo do t'ju kursejë nga përgjimi.

  git clone github.com/ahmnouira/sodple-todolist

  HAPI 4: testoni kodin

  Hapni shfletuesin tuaj dhe futni një detyrë pastaj klikoni Shto, do të shihni që një detyrë e re i shtohet listës, nëse shtoni 3 detyra do të vini re se është shfaqur një buton clearAll, ky buton na lejon të heqim të gjitha detyrat e shtuara, ju gjithashtu mund të heqë vetëm një detyrë të blerë duke klikuar në butonin e tij.

  Hapi 7: (Opsionale) Vendosni Aplikacionin

  

  Deri më tani kemi ndërtuar një aplikacion të thjeshtë të listës së detyrave, tani është koha ta vendosim atë në cloud dhe të ndajmë punën tonë me të tjerët në të gjithë botën.

  Për ta arritur këtë ne do të përdorim platformën cloud të quajtur ZEIT Tani.

  Çfarë është ZEIT Tani?

  ZEIt Tani është një platformë cloud për faqet statike dhe Funksionet pa server, u mundëson zhvilluesve të presin uebfaqe dhe shërbime në internet që vendosen menjëherë, e gjithë kjo me zero konfigurim.

  1. Instaloni Tani CLI

  Për t'u vendosur me ZEIT Tani, do t'ju duhet të instaloni Now CLI.

  e rëndësishme: Sigurohuni që keni të instaluar npm.

  npm -v # kontrolloni nëse npm instalohet

  npm install -g tani@fundit # instaloni versionin e fundit të Now CLI globalisht tani -v # kontrolloni nëse tani CLI është i instaluar dhe printoni versionin e tij

  2. Vendosni

  E tëra çfarë ju duhet të bëni është të futeni në drejtori dhe pastaj të vendosni aplikacionin tuaj me një komandë të vetme:

  tani --prod # vendos aplikacionin

  Pasi të vendoseni, do të merrni një URL paraprake që është caktuar në secilën vendosje për të ndarë ndryshimet më të fundit nën adresën.

  aplikacioni im:

  Hapi 8: Përfundimi

  Kjo është gjithçka që ka për të!

  Mos ngurroni të eksploroni kodin duke vendosur veçori të reja dhe zgjeroni aplikacionin, dhe ndani përvojën dhe pyetjet tuaja në zonën e komenteve.

  Për të parë më shumë veprat e mia, ju lutemi vizitoni burimin tim të hapur në GitHub.

  myYouTube.

  myLinkedIn

  Faleminderit që keni kohë për të lexuar udhëzimet e mia ^^.

  Kalofshi nje dite te bukur.

  Ahmed Nouira