Az első teendőlista alkalmazás telepítése: 8 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:40

Ha teljesen új a kódolásban, vagy rendelkezik valamilyen háttérkódolással, akkor elgondolkodhat azon, hogy hol kezdje el a tanulást. Meg kell tanulnia, hogyan, mit, hol kell kódolni, majd miután elkészült a kód, hogyan kell telepíteni, hogy az egész lássa.

Nos, a jó hír az, hogy a kódolás nem nehéz.

Célközönség: Ez az oktatóanyag azoknak a kezdőknek szól, akik szeretnének karriert kezdeni a webfejlesztésben, és általában megértik a webes technológiákat.

Építési idő: 90 perc.

Nehézség: Könnyű.

1. lépés: Mit fogunk építeni?

Ennek az oktatóanyagnak a végén:

• Hozzon létre egy egyszerű teendőlista webes alkalmazást HTML5 használatával.
• Integrálja a Bootstrap alkalmazást a jó megjelenésű és gyors stílus hozzáadásához.
• A JavaScript és a JQuery könyvtár használatával dinamikus viselkedést adhat az alkalmazásunkhoz.
• Telepítse alkalmazásunkat a felhőben a Ziet/most segítségével.

Működésben:

2. lépés: Bevezetés a HTML -be, a Bootstrap -ba, a JavaScriptbe és a JQuery -be

Mi a HTML?

A Hyper Text Markup Language (HTML) úgy tekinthető, mint "az internet nyelve". A HTML a szabványos jelölőnyelv, amelyet weboldalak létrehozására használnak. Eredetileg tudományos dokumentumok megosztására tervezték. Az évek során a HTML -hez való alkalmazkodás lehetővé tette számos más típusú dokumentum leírását, amelyek weboldalakként jeleníthetők meg az interneten.

A HTML -oldal megjelenítéséhez egyetlen követelmény egy webböngésző, például a Microsoft Internet Explorer (IE), a Mozilla Firefox, a Google Chrome vagy az Apple Safari.

Mi az a Bootstrap?

A Bootstrap a legnépszerűbb HTML, CSS és JavaScript keretrendszer a reszponzív, mobil első webhelyek létrehozásához. A Bootstrap egy nyílt forráskódú projekt, amelyet a Twitter fejlesztett ki. CSS osztályokból áll, amelyek alkalmazhatók az elemekre, hogy következetesen stílusosak legyenek, és JavaScript kódból, amely további fejlesztéseket végez.

Mi a JavaScript?

A JavaScript egy olyan programozási nyelv, amelyet webalkalmazások ügyféloldali programozására használnak. A JavaScript kódot a böngésző futtatja, és lehetővé teszi a webalkalmazás -programozók számára, hogy dinamikus webes tartalmat, például dinamikusan megjelenítő vagy elrejtett összetevőket hozzanak létre, megváltoztassák a megjelenést és érvényesítsék a felhasználói adatokat.

Mi az a JQuery?

A JQuery gyors, kicsi és funkciókban gazdag JavaScript-könyvtár, sokkal egyszerűbbé teszi a HTML dokumentumok bejárását, a manipulációt, az eseménykezelést és az animációt.

A JQuery minden ereje a JavaScripten keresztül érhető el, ezért a JavaScript erős megértése elengedhetetlen a kód megértéséhez, strukturálásához és hibakereséséhez.

További részletekért:

HTML

JavaScript

JQuery

Bootstrap

3. lépés: Az első oldal HTML -szel

1. LÉPÉS: hozzon létre egy új mappát:

mkdir egyszerű-todolist

2. LÉPÉS: hozzon létre új fájlt az egyszerű-todolist mappában, és nevezze el index.html.

cd egyszerű-todolist

érintse meg az index.html fájlt

3. LÉPÉS: adja hozzá a következő kódot az index.html fájlhoz.

Feladatlista

Saját teendők

4. LÉPÉS: Nyissa meg az index.html fájlt a böngészőjében.

Látni fogja, hogy megjelenik a Teendők listája (lásd a fenti fotót).

4. lépés: Bootstrap hozzáadása

Ebben a részben a Bootstrap támogatást adjuk hozzá index.html oldalunkhoz, hogy gyors és jó stílust adjunk a Teendőlista alkalmazáshoz.

Megjegyzés: Ebben az alkalmazásban a Bootstrap 3 -at fogjuk használni, bármely más CSS keretrendszert, például a szemantikus felhasználói felületet.

1. LÉPÉS: Bootstrap CSS fájl hozzáadása a head címkéhez:

2. LÉPÉS: adjon hozzá Bootstrap és JQuery CDN parancsfájlokat a törzscímke végéhez:

3. LÉPÉS: Nyissa meg az index.html fájlt a böngészőjében.

Gratulálunk, néhány lépésben sikeresen hozzáadtuk a Bootstrap támogatást oldalunkhoz.

5. lépés: Töltse ki a felhasználói felületet

Miután sikeresen hozzáadtuk a Bootstrap támogatást az alkalmazásunkhoz. Most folytassuk a versenyt a felhasználói felületen (User Interface), hogy a felhasználó új feladatokat adhasson hozzá. A teendők listája új elemeket adhat hozzá a listához, valamint eltávolíthatja a meglévőket.

1. LÉPÉS: adja hozzá a következő kódot az index.html fájlhoz.

Új feladat hozzáadása Hozzáadás Mindent töröl!

Feladatlistám

2. LÉPÉS: nyissa meg az index.html fájlt a böngészőjében.

6. lépés: A logika hozzáadása az alkalmazáshoz

Amikor megadja a feladat nevét, és rákattint a Hozzáadás gombra, jelenleg semmi sem történik. Ezt javítsuk ki.

Ennek a lépésnek a végére az index.html -t dinamikus oldalra fordítjuk, így az viselkedni fog a felhasználói interakciónak megfelelően.

1. LÉPÉS: hozzon létre egy új mappát az egyszerű-todolist-ban, nevezze el js-nek, és egy új fájl nevét script.js-nek a mappában:

mkdir js

cd js érintse meg a script.js fájlt

2. LÉPÉS: kapcsolja össze a script.js fájlt az index.html fájlhoz a következő kód hozzáadásával a head címke végén:

3. LÉPÉS: adja hozzá a következő kódot a script.js fájlhoz

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

var feladatok = 0 $ ("#removeAll"). hide (); / * új feladatkezelő hozzáadása */ $ ("#add"). on ("click", (event) => {event.preventDefault (); event.stopPropagation (); var val = $ ("input"). val (); if (val! == "") {task += 1; var elm = $ ("

• "); $ ("#mylist "). append (elem); $ (" input "). val (" "); / * távolítsa el az egyedi feladatkezelőt * / $ (". text-right "). on (" clikc ", function (event) {event.preventDefault (); event.stopPropagation (); task -= 1; $ (this).parent.remove ();}); /* show removeAll gomb, ha több mint 3 van feladatok */ if (feladatok> 2) {$ ("#remveAll"). show ();}/ *removeAll kezelő */ $ ("#removeAll"). on ("click", event => {event.preventDefault (); event.stopPropagation (); $ (". letiltva"). testvérek (). remove (); task = 0; $ ("#removeAll"). hide ();});}});});

  Megjegyzés: Klónozhatja vagy letöltheti a kód ZIP -kódját a GitHub tárolómból, ezáltal megmenti a megérintéstől.

  git clone github.com/ahmnouira/simple-todolist

  4. LÉPÉS: tesztelje a kódot

  Nyissa meg a böngészőt, és írjon be egy feladatot, majd kattintson a Hozzáadás gombra, és megjelenik egy új feladat a listában, ha hozzáad 3 feladatot, akkor észreveszi, hogy megjelenik a clearAll gomb, ez a gomb lehetővé teszi, hogy eltávolítsuk az összes hozzáadott feladatot, szintén csak egy feladatvásárlást távolíthat el a gombra kattintva.

  7. lépés: (Nem kötelező) Telepítse az alkalmazást

  

  Eddig egy egyszerű feladatlista alkalmazást készítettünk, most itt az ideje, hogy felhőbe helyezzük, és megosztjuk munkánkat másokkal szerte a világon.

  Ennek eléréséhez a ZEIT Now nevű felhőplatformot fogjuk használni.

  Mi a ZEIT most?

  A ZEIt Now egy felhőplatform a statikus webhelyekhez és a szerver nélküli funkciókhoz, lehetővé teszi a fejlesztők számára, hogy azonnal telepítsenek webhelyeket és webszolgáltatásokat, mindezt nulla konfigurációval.

  1. Telepítse most a CLI -t

  A ZEIT Now használatával történő telepítéshez telepítenie kell a Now CLI -t.

  fontos: Győződjön meg róla, hogy az npm telepítve van.

  npm -v # ellenőrizze, hogy az npm telepítve van -e

  npm install -g most@latest # telepítse a Now CLI utolsó verzióját globálisan most -v # chech, ha a Now CLI telepítve van, és nyomtassa ki a verzióját

  2. Telepítés

  Mindössze annyit kell tennie, hogy belép a könyvtárba, majd egyetlen paranccsal telepíti az alkalmazást:

  most --prod # telepítse az alkalmazást

  A telepítés után egy előnézeti URL -t kap, amely minden egyes telepítéshez hozzá van rendelve, hogy megoszthassa a cím alatti legújabb módosításokat.

  az alkalmazásom:

  8. lépés: Következtetés

  Ennyi az egész!

  Nyugodtan fedezze fel a kódot új funkciók beállításával, és bontsa ki az alkalmazást, és ossza meg tapasztalatait és kérdéseit a megjegyzés területen.

  Ha többet szeretne látni műveimről, látogasson el a GitHub nyílt forráskódjába.

  myYouTube.

  myLinkedIn

  Köszönöm, hogy volt időd elolvasni az utasítást ^^.

  Legyen szép napod.

  Ahmed Nouira