Birinchi ishlar ro'yxati ilovasini joylashtiring: 8 qadam

2024 Muallif: John Day | [email protected]. Oxirgi o'zgartirilgan: 2024-01-30 13:24

Agar siz kodlashni mutlaqo yangi bilsangiz yoki fon kodlashni bilsangiz, qaerdan o'rganishni boshlashingiz mumkin. Siz qanday, nima, qaerda kod yozishni, keyin esa kod tayyor bo'lgach, uni hamma ko'rishi uchun qanday joylashtirishni o'rganishingiz kerak.

Yaxshi xabar shundaki, kodlash qiyin emas.

Maqsadli auditoriya: Ushbu qo'llanma veb -ishlab chiqish sohasida karerasini boshlamoqchi bo'lgan, umuman veb -texnologiyalar haqida tushunchaga ega bo'lgan yangi boshlanuvchilar uchun mo'ljallangan.

Qurilish vaqti: 90 daqiqa.

Qiyinchilik: oson.

1 -qadam: Biz nimani quramiz?

Ushbu dars oxirida biz:

• HTML5 yordamida oddiy ishlar ro'yxati veb-ilovasini yarating.
• Chiroyli va tezkor uslubni qo'shish uchun Bootstrap -ni bizning ilovamiz bilan birlashtiring.
• JavaScript va JQuery kutubxonasidan foydalanib, ilovamizga dinamik harakatlarni qo'shing.
• Ziet/now yordamida bizning ilovamizni bulutda joylashtiring.

Amalda:

2 -qadam: HTML, Bootstrap, JavaScript va JQuery -ga kirish

HTML nima?

Hyper Text Markup Language (HTML) ni "Internet tili" deb hisoblash mumkin. HTML - bu veb -sahifalarni yaratish uchun ishlatiladigan standart belgilash tili. U dastlab ilmiy hujjatlarni almashish uchun mo'ljallangan edi. Bir necha yillar davomida HTML -ga moslashuvlar Internetda veb -sahifalar sifatida ko'rsatilishi mumkin bo'lgan boshqa hujjatlar turlarini tavsiflashga imkon berdi.

HTML -sahifani ko'rsatish uchun yagona talab - bu Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome yoki Apple Safari kabi veb -brauzer.

Bootstrap nima?

Bootstrap - bu tezkor, mobil, birinchi veb -saytlarni yaratish uchun eng mashhur HTML, CSS va JavaScript asoslari. Bootstrap - bu Twitter tomonidan ishlab chiqilgan ochiq manbali loyihadir. U elementlarga izchil uslub berish uchun qo'llanilishi mumkin bo'lgan CSS sinflaridan va qo'shimcha takomillashtirishni ta'minlaydigan JavaScript kodidan iborat.

JavaScript nima?

JavaScript-bu veb-ilovalarda mijozlar tomonidan dasturlash uchun ishlatiladigan dasturlash tili. JavaScript kodi brauzer tomonidan boshqariladi va veb -ilovalar dasturchilariga dinamik ko'rinadigan yoki yashirilgan, tashqi ko'rinishini o'zgartiradigan va foydalanuvchi ma'lumotlarini tasdiqlaydigan dinamik veb -tarkibni yaratishga imkon beradi.

JQuery nima?

JQuery tez, kichik va JavaScript-ga boy bo'lgan kutubxona bo'lib, u HTML-hujjatlarni almashish, manipulyatsiya, hodisalarni boshqarish, animatsiya kabi ishlarni ancha soddalashtiradi.

JQuery -ning barcha kuchlariga JavaScript orqali kirish mumkin, shuning uchun JavaScript -ni yaxshi bilish sizning kodingizni tushunish, tuzish va tuzatish uchun zarur.

Batafsil ma'lumot uchun:

HTML

JavaScript

JQuery

Bootstrap

3 -qadam: HTML bilan birinchi sahifangiz

1 -QADAM: yangi papka yarating:

mkdir oddiy-todolist

2-QADAM: oddiy todolist papkasida yangi fayl yarating va uni index.html deb nomlang.

CD oddiy-todolist

index.html ga teging

3 -QADAM: index.html -ga quyidagi kodni qo'shing.

Ro'yxatini qilish

Mening ishlar ro'yxatim

4 -QADAM: Brauzeringizda index.html -ni oching.

Siz "Mening ishlar ro'yxatim" ko'rsatilishini ko'rasiz (yuqoridagi rasmga qarang).

4 -qadam: Bootstrap qo'shish

Bu bo'limda biz bajaradigan ishlar ro'yxati ilovasiga tez va yaxshi uslub qo'shish uchun index.html sahifamizga Bootstrap yordamini qo'shamiz.

Eslatma: Ushbu ilovada biz Bootstrap 3 -dan foydalanamiz, siz boshqa har qanday CSS -dan, masalan, Semantic UI -dan foydalanasiz.

1 -QADAM: Bootstrap CSS faylini bosh tegiga qo'shing:

2 -QADAM: asosiy yorliq oxiriga Bootstrap va JQuery CDN skript fayllarini qo'shing:

3 -QADAM: brauzeringizda index.html -ni oching.

Tabriklaymiz, biz bir necha bosqichda o'z sahifamizga Bootstrap qo'llab -quvvatlashini muvaffaqiyatli qo'shamiz.

5 -qadam: foydalanuvchi interfeysini to'ldiring

Bootstrap yordam dasturini muvaffaqiyatli qo'shgandan so'ng. Keling, foydalanuvchiga yangi vazifalarni qo'shish uchun foydalanuvchi interfeysi (foydalanuvchi interfeysi) bilan raqobatlashamiz. Vazifalar ro'yxati ro'yxatga yangi elementlarni qo'shish, shuningdek, mavjud elementlarni o'chirish imkoniyatiga ega bo'ladi.

1 -QADAM: index.html -ga quyidagi kodni qo'shing.

Yangi vazifa qo'shing Hammasini o'chiring!

Mening vazifalarim ro'yxati

2 -QADAM: brauzeringizda index.html faylini oching.

6 -qadam: mantiqni ilovaga qo'shish

Vazifa nomini kiritganingizda va Qo'shish tugmasini bosganingizda, hozircha hech narsa bo'lmaydi. Buni tuzataylik.

Ushbu qadam oxirida biz index.html -ni dinamik sahifaga aylantiramiz, shuning uchun u foydalanuvchilar bilan o'zaro munosabatda bo'ladi.

1-QADAM: oddiy-todolist ichida yangi papka yarating, uni js deb nomlang va shu papkaning ichida script.js nomli yangi fayl nomini bering:

mkdir js

cd js sensorli skript.js

2 -QADAM: bosh tegining oxiriga quyidagi kodni qo'shib, script.js faylini index.html bilan bog'lang:

3 -QADAM: skript.js fayliga quyidagi kodni qo'shing

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

var vazifalari = 0 $ ("#removeAll"). hide ();. val (); agar (val! == "") {vazifalar += 1; var elm = $ ("

• $) clikc ", function (event) {event.preventDefault (); event.stopPropagation (); vazifalar -= 1; $ (bu).parent.remove ();}); vazifalar */ if (vazifalar> 2) {$ ("#remveAll"). show ();}/ *removeAll ishlovchi */ $ ("#removeAll"). ustida ("bosish", hodisa => {event.preventDefault (); event.stopPropagation (); $ (". o'chirilgan"). aka -uka (). remove (); vazifalar = 0; $ ("#removeAll"). yashirish ();});}});});

  Eslatma: Siz GitHub omboridan kodni zaxiralashni yoki klonni yuklab olishingiz mumkin, bu sizni tegishdan qutqaradi.

  git clone github.com/ahmnouira/simple-todolist

  4 -QADAM: kodni sinab ko'ring

  Brauzeringizni oching va vazifani kiriting, so'ngra Qo'shish -ni bosing, siz ro'yxatga yangi vazifa qo'shilganini ko'rasiz, agar siz 3 ta vazifani qo'shsangiz, clearAll tugmasi paydo bo'lganini ko'rasiz, bu tugma bizga barcha qo'shilgan vazifalarni olib tashlash imkonini beradi. Shuningdek, uning tugmachasini bosish orqali bitta vazifani sotib olish mumkin.

  7 -qadam: (Ixtiyoriy) Ilovani joylashtiring

  

  Hozircha biz oddiy ro'yxat ilovasini yaratdik, endi uni bulutda joylashtirish va o'z ishimizni butun dunyo bo'ylab boshqalar bilan bo'lishish vaqti keldi.

  Bunga erishish uchun biz ZEIT Now deb nomlangan bulutli platformadan foydalanamiz.

  ZEIT hozir nima?

  ZEIt Now - bu statik saytlar va Serversiz funktsiyalar uchun bulutli platforma bo'lib, u ishlab chiquvchilarga zudlik bilan joylashtiradigan veb -saytlar va veb -xizmatlarni joylashtirish imkonini beradi, bularning barchasi nol konfiguratsiyali.

  1. Hozir CLI ni o'rnating

  ZEIT Now bilan tarqatish uchun siz Now CLI -ni o'rnatishingiz kerak bo'ladi.

  muhim: npm o'rnatilganligiga ishonch hosil qiling.

  npm -v # npm o'rnatilishini tekshiring

  npm install -g now@latest # Now CLI -ning so'nggi versiyasini butun dunyo bo'ylab hozir -v # chech o'rnating, agar Now CLI o'rnatilgan bo'lsa va uni chop eting.

  2. O'rnatish

  Siz qilishingiz kerak bo'lgan yagona narsa katalogga o'tish va keyin ilovangizni bitta buyruq bilan joylashtirishdir:

  now --prod # ilovani joylashtiring

  Joylashtirilgandan so'ng, siz manzil bo'yicha so'nggi o'zgarishlarni baham ko'rish uchun har bir tarqatish uchun tayinlangan URLni olasiz.

  mening ilovam:

  8 -qadam: Xulosa

  Hammasi shu!

  Yangi funktsiyalarni o'rnatish va ilovani kengaytirish orqali kodni o'rganing, sharhlar bo'limida o'z tajribangiz va savollaringiz bilan o'rtoqlashing.

  Mening ishlarim haqida ko'proq ma'lumot olish uchun GitHub -dagi ochiq manbaga tashrif buyuring.

  myYouTube.

  myLinkedIn

  Mening ko'rsatmalarni o'qishga vaqt ajratganingiz uchun tashakkur ^^.

  Hayrli kun.

  Ahmad Nouira