Nasazení první aplikace seznamu úkolů: 8 kroků
Nasazení první aplikace seznamu úkolů: 8 kroků

Obsah:

Anonim
Nasaďte svoji první aplikaci seznamu úkolů
Nasaďte svoji první aplikaci seznamu úkolů

Pokud jste v kódování úplně noví nebo máte nějaké kódování na pozadí, možná si říkáte, kde se začít učit. Musíte se naučit, jak, co, kam kódovat a poté, jakmile je kód připraven, jak jej nasadit, aby ho celý viděl.

Dobrou zprávou je, že kódování není obtížné.

Cílové publikum: Tento tutoriál je určen začátečníkům, kteří chtějí začít s kariérou ve vývoji webu, mít znalosti o webových technologiích obecně.

Čas sestavení: 90 minut.

Obtížnost: Snadné.

Krok 1: Co budeme stavět?

Na konci tohoto kurzu budeme:

  • Vytvořte jednoduchou webovou aplikaci Seznam úkolů pomocí HTML5.
  • Integrujte Bootstrap s naší aplikací a přidejte dobře vypadající a rychlý styl.
  • Přidejte do naší aplikace dynamické chování pomocí knihovny JavaScript a JQuery.
  • Nasadit naši aplikaci v cloudu pomocí Ziet/nyní.

V akci:

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

Co je HTML?

Hyper Text Markup Language (HTML) lze považovat za „jazyk internetu“. HTML je standardní značkovací jazyk, který se používá k vytváření webových stránek. Původně byl navržen pro sdílení vědeckých dokumentů. Díky úpravám HTML v průběhu let bylo vhodné popsat několik dalších typů dokumentů, které lze zobrazit jako webové stránky na internetu.

Jediným požadavkem, který je k zobrazení stránky HTML potřeba, je webový prohlížeč, například Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome nebo Apple Safari.

Co je to Bootstrap?

Bootstrap je nejpopulárnější framework HTML, CSS a JavaScript pro vytváření responzivních webových stránek pro mobily. Bootstrap je open source projekt vyvinutý společností Twitter. Skládá se z tříd CSS, které lze použít na prvky pro jejich konzistentní styl, a kódu JavaScript, který provádí další vylepšení.

Co je JavaScript?

JavaScript je programovací jazyk, který se používá pro programování na straně klienta ve webových aplikacích. JavaScriptový kód spouští prohlížeč a umožňuje programátorům webových aplikací vytvářet dynamický webový obsah, například komponenty, které dynamicky zobrazují nebo jsou skryté, mění vzhled a ověřují vstup uživatelů.

Co je JQuery?

JQuery je rychlá, malá a na funkce bohatá JavaScriptová knihovna, díky čemuž jsou věci jako procházení dokumentů HTML a manipulace, zpracování událostí, animace mnohem jednodušší.

Veškerá síla JQuery je přístupná prostřednictvím JavaScriptu, takže mít silné znalosti JavaScriptu je nezbytné pro pochopení, strukturování a ladění kódu.

Více podrobností:

HTML

JavaScript

JQuery

Bootstrap

Krok 3: Vaše první stránka s HTML

Vaše první stránka s HTML
Vaše první stránka s HTML

KROK 1: vytvořte novou složku:

mkdir simple-todolist

KROK 2: Vytvořte nový soubor ve složce simple-todolist a pojmenujte jej index.html.

cd simple-todolist

dotkněte se index.html

KROK 3: přidejte následující kód do index.html.

Seznam úkolů

Můj seznam úkolů

KROK 4: Otevřete ve svém prohlížeči index.html.

Uvidíte, že se zobrazuje seznam mých úkolů (viz fotografie výše).

Krok 4: Přidání bootstrapu

Přidání bootstrapu
Přidání bootstrapu

V této části přidáme podporu Bootstrap na naši stránku index.html, abychom do aplikace Seznam úkolů přidali rychlý a dobrý styl.

Upozornění: V této aplikaci použijeme Bootstrap 3, použijete jakýkoli jiný rámec CSS, například sémantické uživatelské rozhraní.

KROK 1: Přidejte soubor CSS Bootstrap do tagu head:

KROK 2: Přidejte soubory skriptů Bootstrap a JQuery CDN na konec tagu body:

KROK 3: Otevřete ve svém prohlížeči index.html.

Blahopřejeme, úspěšně jsme přidali podporu Bootstrap na naši stránku v několika krocích.

Krok 5: Dokončete uživatelské rozhraní

Vyplňte uživatelské rozhraní
Vyplňte uživatelské rozhraní

Poté, co do naší aplikace úspěšně přidáme podporu Bootstrap. Nyní pojďme soutěžit o uživatelské rozhraní (uživatelské rozhraní), aby uživatel mohl přidávat nové úkoly. Seznam úkolů bude moci přidávat nové položky do seznamu a také odstraňovat stávající položky.

KROK 1: Přidejte následující kód do index.html.

Přidat nový úkol Přidat Vymazat vše!

Můj seznam úkolů

KROK 2: otevřete ve svém prohlížeči soubor index.html.

Krok 6: Přidání logiky do aplikace

Přidání logiky do aplikace
Přidání logiky do aplikace

Když zadáte název úkolu a kliknete na tlačítko Přidat, v tuto chvíli se nic neděje. Pojďme to opravit.

Na konci tohoto kroku změníme náš index.html na dynamickou stránku, takže se bude chovat podle interakce uživatele.

KROK 1: Vytvořte novou složku uvnitř simple-todolist, pojmenujte ji js a nový název souboru script.js uvnitř této složky:

mkdir js

cd js klepněte na script.js

KROK 2: propojte script.js s index.html přidáním následujícího kódu na konec značky head:

KROK 3: přidejte následující kód do souboru script.js

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

var úkoly = 0 $ ("#removeAll"). hide (); / * přidat nový obslužný program úkolů */ $ ("#add"). on ("click", (event) => {event.preventDefault (); event.stopPropagation (); var val = $ ("input"). val (); if (val! == "") {úkoly += 1; var elm = $ ("

  • "); $ ("#mylist "). append (elem); $ (" input "). val (" "); / * odebrat jedinečný popisovač ú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 úkoly */ if (úkoly> 2) {$ ("#remveAll"). show ();}/ *handler removeAll */ $ ("#removeAll"). on ("click", event => {event.preventDefault (); event.stopPropagation (); $ (". disabled"). sourozenci (). remove (); tasks = 0; $ ("#removeAll"). hide ();});}});});

    Poznámka: Můžete získat buď klon, nebo stáhnout ZIP kódu z mého úložiště GitHub, což vám ušetří klepnutí.

    git clone github.com/ahmnouira/simple-todolist

    KROK 4: otestujte kód

    Otevřete prohlížeč a zadejte úkol, poté klikněte na Přidat, uvidíte, že nový úkol je přidán do seznamu, pokud přidáte 3 úkoly, všimnete si, že se objevilo tlačítko Vymazat vše, toto tlačítko nám umožňuje odstranit všechny přidané úkoly, vy lze také odebrat pouze jeden nákup úkolu kliknutím na jeho tlačítko.

    Krok 7: (Volitelné) Nasazení aplikace

    Doposud jsme vytvořili jednoduchou aplikaci pro seznam úkolů, nyní je čas ji nasadit v cloudu a sdílet naši práci s ostatními po celém světě.

    Abychom toho dosáhli, použijeme cloudovou platformu s názvem ZEIT Now.

    Co je to ZEIT nyní?

    ZEIt Now je cloudová platforma pro statické weby a funkce bez serveru, která umožňuje vývojářům hostovat webové stránky a webové služby, které se nasazují okamžitě, to vše s nulovou konfigurací.

    1. Instalovat nyní CLI

    K nasazení pomocí ZEIT Now budete muset nainstalovat Now CLI.

    důležité: Ujistěte se, že máte nainstalované npm.

    npm -v # zkontrolujte, zda se instaluje npm

    npm install -g now@latest # nainstalovat poslední verzi Now CLI globálně nyní -v # chech, pokud je nainstalována Now CLI a vytisknout verzi

    2. Nasadit

    Jediné, co musíte udělat, je přesunout se do adresáře a poté nasadit aplikaci jediným příkazem:

    nyní --prod # nasaďte aplikaci

    Po nasazení získáte náhledovou adresu URL, která je přiřazena ke každému nasazení a bude sdílet nejnovější změny pod touto adresou.

    moje aplikace:

    Krok 8: Závěr

    To je všechno!

    Neváhejte prozkoumat kód nastavením nových funkcí a rozbalením aplikace a sdílet své zkušenosti a dotazy v oblasti komentářů.

    Chcete -li zobrazit více mých prací, navštivte můj otevřený zdroj na GitHubu.

    myYouTube.

    myLinkedIn

    Děkujeme, že jste si našli čas přečíst si můj návod ^^.

    Hezký den.

    Ahmed Nouira