Nasadenie prvej aplikácie zoznamu úloh: 8 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:57

Ak ste v kódovaní úplne nový alebo máte nejaké kódovanie na pozadí, možno vás zaujíma, kde sa začať učiť. Musíte sa naučiť, ako, čo, kam kódovať a potom, akonáhle je kód pripravený, ako ho nasadiť, aby ho celý videl.

Dobrou správou je, že kódovanie nie je ťažké.

Cieľové publikum: Tento tutoriál je určený pre začiatočníkov, ktorí chcú začať kariéru vo vývoji webových aplikácií a majú všeobecné znalosti o webových technológiách.

Čas stavby: 90 minút.

Náročnosť: Ľahká.

Krok 1: Čo postavíme?

Na konci tohto tutoriálu budeme:

• Vytvorte jednoduchú webovú aplikáciu so zoznamom úloh pomocou HTML5.
• Integrujte Bootstrap s našou aplikáciou a pridajte dobre vyzerajúci a rýchly štýl.
• Na pridanie dynamického správania do našej aplikácie použite knižnicu JavaScript a JQuery.
• Nasadenie našej aplikácie v cloude pomocou Ziet/teraz.

V akcii:

Krok 2: Úvod do HTML, Bootstrap, JavaScript a JQuery

Čo je HTML?

Hyper Text Markup Language (HTML) je možné chápať ako „jazyk internetu“. HTML je štandardný značkovací jazyk, ktorý sa používa na vytváranie webových stránok. Pôvodne bol navrhnutý na zdieľanie vedeckých dokumentov. Vďaka úpravám HTML v priebehu rokov bolo vhodné popísať niekoľko ďalších typov dokumentov, ktoré je možné zobrazovať ako webové stránky na internete.

Jedinou požiadavkou, ktorá je potrebná na zobrazenie stránky HTML, je webový prehliadač, napríklad Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome alebo Apple Safari.

Čo je to Bootstrap?

Bootstrap je najobľúbenejší rámec HTML, CSS a JavaScript na vytváranie responzívnych webových stránok pre mobilné zariadenia. Bootstrap je open source projekt vyvinutý spoločnosťou Twitter. pozostáva z tried CSS, ktoré je možné použiť na prvky na ich konzistentné štýlovanie, a kódu JavaScript, ktorý vykonáva ďalšie vylepšenia.

Čo je to JavaScript?

JavaScript je programovací jazyk, ktorý sa používa na programovanie na strane klienta vo webových aplikáciách. JavaScript kód je spustený prehliadačom a umožňuje programátorom webových aplikácií vytvárať dynamický webový obsah, napríklad komponenty, ktoré sa dynamicky zobrazujú alebo sú skryté, menia vzhľad a overujú vstupy používateľov.

Čo je JQuery?

JQuery je rýchla, malá a na funkcie bohatá JavaScriptová knižnica, vďaka ktorej sú veci ako prechod dokumentov HTML a manipulácia, spracovanie udalostí, animácia oveľa jednoduchšie.

K všetkej sile JQuery je prístup prostredníctvom JavaScriptu, takže silné porozumenie JavaScriptu je nevyhnutné pre pochopenie, štruktúrovanie a ladenie kódu.

Pre viac detailov:

HTML

JavaScript

JQuery

Bootstrap

Krok 3: Vaša prvá stránka s HTML

KROK 1: vytvorte nový priečinok:

mkdir simple-todolist

KROK 2: vytvorte nový súbor v priečinku simple-todolist a pomenujte ho index.html.

cd jednoduché-todolistické

dotknite sa index.html

KROK 3: pridajte nasledujúci kód do index.html.

Zoznam úloh

Môj zoznam úloh

KROK 4: Otvorte vo svojom prehliadači index.html.

Uvidíte, že sa zobrazuje môj zoznam úloh (pozri fotografiu vyššie).

Krok 4: Pridanie bootstrapu

V tejto sekcii pridáme podporu Bootstrap na našu stránku index.html, aby sme do aplikácie Zoznam úloh pridali rýchly a dobrý štýl.

Upozornenie: V tejto aplikácii použijeme Bootstrap 3, použijete akýkoľvek iný rámec CSS, napríklad sémantické používateľské rozhranie.

KROK 1: Pridajte súbor CSS Bootstrap do značky head:

KROK 2: Pridajte súbory skriptov Bootstrap a JQuery CDN na koniec tagu body:

KROK 3: Otvorte index.html vo svojom prehliadači.

Blahoželáme, v niekoľkých krokoch sme úspešne pridali podporu Bootstrap na našu stránku.

Krok 5: Dokončite používateľské rozhranie

Po úspešnom pridaní podpory Bootstrap do našej aplikácie. Teraz poďme súťažiť o používateľské rozhranie (používateľské rozhranie), aby používateľ mohol pridávať nové úlohy. Zoznam úloh bude môcť pridávať nové položky do zoznamu, ako aj odstraňovať existujúce položky.

KROK 1: Pridajte nasledujúci kód do index.html.

Pridať novú úlohu Pridať Vymazať všetko!

Môj zoznam úloh

KROK 2: otvorte vo svojom prehliadači súbor index.html.

Krok 6: Pridanie logiky do aplikácie

Keď zadáte názov úlohy a kliknete na tlačidlo Pridať, momentálne sa nič nedeje. Poďme to napraviť.

Na konci tohto kroku zmeníme náš index.html na dynamickú stránku, takže sa bude správať podľa interakcie používateľa.

KROK 1: Vytvorte nový priečinok v programe simple-todolist, pomenujte ho js a nový názov súboru script.js v tomto priečinku:

mkdir js

cd js dotknite sa script.js

KROK 2: prepojte skript.js s indexom.html pridaním nasledujúceho kódu na koniec značky head:

KROK 3: pridajte nasledujúci kód do súboru script.js

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

var úlohy = 0 $ ("#removeAll"). hide (); / * pridať nový obslužný program úloh */ $ ("#add"). na ("kliknutie", (udalosť) => {event.preventDefault (); event.stopPropagation (); var val = $ ("vstup"). val (); if (val! == "") {úlohy += 1; var elm = $ ("

• "); $ ("#mylist "). append (elem); $ (" input "). val (" "); / * odstrániť jedinečný obslužný program úloh * / $ (". text-right "). on (" clikc ", function (event) {event.preventDefault (); event.stopPropagation (); tasks -= 1; $ (this).parent.remove ();})); /* show removeAll button when we have more than 3 tasks */ if (tasks> 2) {$ ("#remveAll"). show ();}/ *handler removeAll */ $ ("#removeAll"). on ("click", event => {event.preventDefault (); event.stopPropagation (); $ (". invalid"). súrodenci (). remove (); tasks = 0; $ ("#removeAll"). hide ();});}});});

  Poznámka: Môžete získať buď klon, alebo stiahnuť PSČ kódu z môjho úložiska GitHub, čo vás ušetrí od klepania.

  git klon github.com/ahmnouira/simple-todolist

  KROK 4: vyskúšajte kód

  Otvorte prehliadač a zadajte úlohu, potom kliknite na položku Pridať a uvidíte, že sa do zoznamu pridá nová úloha. Ak pridáte 3 úlohy, všimnete si, že sa zobrazí tlačidlo Vymazať všetko. Toto tlačidlo nám umožňuje odstrániť všetky pridané úlohy, môžete tiež odstrániť iba jednu úlohu kúpiť kliknutím na jej tlačidlo.

  Krok 7: (Voliteľné) Nainštalujte aplikáciu

  

  Doteraz sme vytvorili jednoduchú aplikáciu pre zoznam úloh, teraz je načase ju nasadiť v cloude a zdieľať svoju prácu s ostatnými z celého sveta.

  Aby sme to dosiahli, použijeme cloudovú platformu s názvom ZEIT Now.

  Čo je to ZEIT teraz?

  ZEIt Now je cloudová platforma pre statické weby a funkcie bez serverov, ktorá umožňuje vývojárom hostovať webové stránky a webové služby, ktoré sa nasadia okamžite, to všetko s nulovou konfiguráciou.

  1. Nainštalovať CLI

  Na nasadenie pomocou ZEIT Now budete musieť nainštalovať Now CLI.

  dôležité: Uistite sa, že máte nainštalovaný npm.

  npm -v # skontrolujte, či sa inštaluje npm

  npm install -g now@latest # nainštalovať poslednú verziu Now CLI globálne teraz -v # chech, ak je Now CLI nainštalovaný a vytlačiť verziu

  2. Nasadiť

  Jediné, čo musíte urobiť, je presunúť sa do adresára a potom nasadiť aplikáciu jediným príkazom:

  teraz --prod # nasaďte aplikáciu

  Po nasadení získate ukážku adresy URL, ktorá je priradená ku každému nasadeniu, aby ste mohli zdieľať najnovšie zmeny pod touto adresou.

  moja aplikácia:

  Krok 8: Záver

  To je všetko, čo k tomu patrí!

  Neváhajte sa pozrieť na kód nastavením nových funkcií a rozšírením aplikácie a podeľte sa o svoje skúsenosti a otázky v oblasti komentárov.

  Ak chcete vidieť viac mojich diel, navštívte môj otvorený zdroj na GitHub.

  myYouTube.

  myLinkedIn

  Ďakujem, že ste si našli čas na prečítanie môjho pokynu ^^.

  Pekný deň.

  Ahmed Nouira