Esimese ülesannete loendi rakenduse juurutamine: 8 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:47

Kui olete kodeerimisega täiesti kursis või teil on taustkodeering, võiksite mõelda, kust alustada õppimist. Peate õppima, kuidas, mida, kuhu kodeerida ja seejärel, kui kood on valmis, kuidas seda kogu jaoks nähtavaks teha.

Hea uudis on see, et kodeerimine pole keeruline.

Sihtrühm: see õpetus on mõeldud algajatele, kes soovivad alustada karjääri veebiarenduse alal ja kellel on arusaam veebitehnoloogiatest üldiselt.

Ehitusaeg: 90 minutit.

Raskusaste: lihtne.

Samm: mida me ehitame?

Selle õpetuse lõpuks teeme järgmist:

• Looge lihtne ülesannete loendi veebirakendus HTML5 abil.
• Integreerige Bootstrap meie rakendusega, et lisada nägus ja kiire stiil.
• Kasutage JavaScripti ja JQuery teeki, et lisada meie rakendusele dünaamiline käitumine.
• Kasutage meie rakendust Zietis/praegu pilves.

Tegevuses:

2. samm: HTML -i, Bootstrapi, JavaScripti ja JQuery sissejuhatus

Mis on HTML?

Hüperteksti märgistuskeelt (HTML) võib pidada "Interneti keeleks". HTML on standardne märgistuskeel, mida kasutatakse veebilehtede loomiseks. See oli algselt mõeldud teaduslike dokumentide jagamiseks. HTML -i kohandamine aastate jooksul muutis sobivaks kirjeldada mitut muud tüüpi dokumente, mida saab Internetis veebilehtedena kuvada.

Ainus nõue, mida HTML -lehe kuvamiseks on vaja, on veebibrauser, näiteks Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome või Apple Safari.

Mis on Bootstrap?

Bootstrap on kõige populaarsem HTML -i, CSS -i ja JavaScripti raamistik reageerivate, mobiilsete esmaste veebisaitide loomiseks. Bootstrap on avatud lähtekoodiga projekt, mille on välja töötanud Twitter. see koosneb CSS -klassidest, mida saab elementidele rakendada, et neid järjekindlalt kujundada, ja JavaScripti koodist, mis teeb täiendavaid täiustusi.

Mis on JavaScript?

JavaScript on programmeerimiskeel, mida kasutatakse veebirakendustes kliendipoolseks programmeerimiseks. JavaScripti koodi käitab brauser ja see võimaldab veebirakenduste programmeerijatel luua dünaamilist veebisisu, näiteks komponente, mis näitavad või peidetakse dünaamiliselt, muuta välimust ja kinnitada kasutaja sisendit.

Mis on JQuery?

JQuery on kiire, väike ja funktsioonirikas JavaScripti teek, mis muudab näiteks HTML-dokumentide läbimise ja manipuleerimise, sündmuste käsitlemise, animatsiooni palju lihtsamaks.

Kogu JQuery võimule pääseb juurde JavaScripti kaudu, nii et JavaScripti tugev mõistmine on teie koodi mõistmiseks, struktureerimiseks ja silumiseks hädavajalik.

Lisateabe saamiseks:

HTML

JavaScript

JQuery

Bootstrap

3. samm: teie esimene leht HTML -iga

1. samm: looge uus kaust:

mkdir lihtne-todolist

2. SAMM: looge kausta simple-todolist uus fail ja pange sellele nimi index.html.

cd lihtne-todolist

puudutage index.html

3. SAMM: lisage järgmine kood saidile index.html.

Nimekiri

Minu ülesannete nimekiri

4. SAMM: avage oma brauseris index.html.

Näete, et kuvatakse Minu ülesannete loend (vt ülaltoodud fotot).

Samm 4: Bootstrapi lisamine

Selles jaotises lisame Bootstrapi toe meie lehele index.html, et lisada ülesannete loendile kiire ja hea stiil.

Märkus. Selles rakenduses kasutame Bootstrap 3, teie kasutate mõnda muud CSS -i raamistikku, näiteks semantilist kasutajaliidest.

1. SAMM: lisage Bootstrap CSS -fail päise märgendisse:

2. SAMM: lisage keha märgendi lõppu Bootstrap ja JQuery CDN skriptifailid:

3. SAMM: avage brauseris index.html.

Õnnitleme! Lisasime Bootstrapi toe oma lehele mõne sammuga edukalt.

Samm: täitke kasutajaliides

Pärast Bootstrapi toe edukat lisamist meie rakendusele. Nüüd jätkame ja võistleme kasutajaliidese (kasutajaliidese) abil, et kasutajal oleks võimalik uusi ülesandeid lisada. Ülesannete loend saab loendisse uusi objekte lisada ja olemasolevaid üksusi eemaldada.

1. SAMM: lisage järgmine kood saidile index.html.

Lisa uus ülesanne Lisa Kustuta kõik!

Minu ülesannete loend

2. SAMM: avage brauseris fail index.html.

Samm: loogika lisamine rakendusele

Kui sisestate ülesande nime ja klõpsate nuppu Lisa, ei juhtu praegu midagi. Parandame selle.

Selle sammu lõpuks muudame oma indeksi.html dünaamiliseks leheks, nii et see käitub kasutajate vahel.

1. SAMM: looge Simple-Todolist'i sees uus kaust, pange sellele js nimi ja sellele failile uus failinimi script.js:

mkdir js

cd js puuduta script.js

2. SAMM: linkige script.js saidiga index.html, lisades peasildi lõppu järgmise koodi:

3. SAMM: lisage failile script.js järgmine kood

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

var ülesanded = 0 $ ("#removeAll"). hide (); / * lisa uus ülesannete käitleja */ $ ("#add"). on ("click", (event) => {event.preventDefault (); event.stopPropagation (); var val = $ ("input"). val (); if (val! == "") {ülesanded += 1; var elm = $ ("

• "); $ ("#mylist "). lisama (elem); $ (" input "). val (" "); / * eemalda unikaalne ülesannete käitleja * / $ (". text-right "). on (" clikc ", funktsioon (sündmus) {event.preventDefault (); event.stopPropagation (); ülesanded -= 1; $ (this).parent.remove ();}); /* näita nuppu RemoveAll, kui meil on rohkem kui 3 ülesanded */ kui (ülesanded> 2) {$ ("#remveAll"). show ();}/ *removeAll handler */ $ ("#removeAll"). on ("click", event => {event.preventDefault (); event.stopPropagation (); $ (". keelatud"). õed -vennad (). eemalda (); ülesanded = 0; $ ("#removeAll"). hide ();});}});});

  Märkus. Minu GitHubi hoidlast saate hankida kas klooni või alla laadida postiindeksi, mis säästab teid puudutamisest.

  git kloon github.com/ahmnouira/simple-todolist

  4. SAMM: testige koodi

  Avage oma brauser ja sisestage ülesanne, seejärel klõpsake nuppu Lisa, näete, et loendisse lisatakse uus ülesanne. Kui lisate 3 ülesannet, märkate, et ilmub tühjendusKõik nupp, see nupp võimaldab meil eemaldada kõik lisatud ülesanded, saab eemaldada ka ainult ühe ülesande ostmise, klõpsates selle nupul.

  Samm: (valikuline) Rakenduse juurutamine

  

  Siiani oleme loonud lihtsa ülesannete loendi rakenduse, nüüd on aeg see pilves kasutusele võtta ja oma tööd teistega üle maailma jagada.

  Selle saavutamiseks kasutame pilveplatvormi nimega ZEIT Now.

  Mis on ZEIT praegu?

  ZEIt Now on staatiliste saitide ja serverivabade funktsioonide pilvplatvorm, mis võimaldab arendajatel majutada koheselt juurutatavaid veebisaite ja veebiteenuseid, seda kõike nullkonfiguratsiooniga.

  1. Installi kohe CLI

  ZEIT Now -ga juurutamiseks peate installima Now CLI.

  Tähtis: veenduge, et olete installinud npm.

  npm -v # kontrollige, kas npm installitakse

  npm install -g kohe@hiljemalt # installige Now CLI viimane versioon globaalselt kohe -v # chech, kui Now CLI on installitud ja printige selle versioon

  2. Juurutada

  Kõik, mida pead tegema, on liikuda kataloogi ja seejärel oma käsk ühe käsuga juurutada:

  nüüd --prod # juurutage rakendus

  Pärast juurutamist saate eelvaate URL -i, mis määratakse igale juurutusele, et jagada viimaseid muudatusi aadressi all.

  minu rakendus:

  8. samm: järeldus

  See on kõik!

  Uurige koodi vabalt, seadistades uusi funktsioone ja laiendades rakendust ning jagage oma kogemusi ja küsimusi kommentaaride alal.

  Minu tööde vaatamiseks külastage minu avatud lähtekoodiga GitHubi.

  myYouTube.

  myLinkedIn

  Tänan, et leidsite aega minu juhendit lugeda ^^.

  Head päeva.

  Ahmed Nouira