İlk işlər siyahısı tətbiqinizi yerləşdirin: 8 addım
İlk işlər siyahısı tətbiqinizi yerləşdirin: 8 addım

Mündəricat:

Anonim
İlk İş Siyahısı Tətbiqinizi yerləşdirin
İlk İş Siyahısı Tətbiqinizi yerləşdirin

Kodlaşdırmaq üçün tamamilə yenisinizsə və ya bir az arxa plan kodunuz varsa, öyrənməyə haradan başlayacağınızı düşünə bilərsiniz. Necə, nəyi, harada kod yazmalı və sonra kod hazır olduqdan sonra onu hamının görməsi üçün necə yerləşdirməyi öyrənməlisiniz.

Yaxşı xəbər, kodlaşdırmanın çətin olmamasıdır.

Hədəf Auditoriyası: Bu dərslik veb inkişafında karyera qurmaq istəyən, ümumiyyətlə veb texnologiyaları anlayışına sahib olanlar üçün nəzərdə tutulmuşdur.

Yaradılma müddəti: 90 dəqiqə.

Çətinlik: Asan.

Addım 1: Nə İnşa Edirik?

Bu dərsliyin sonunda biz:

  • HTML5-dən istifadə edərək sadə işlər siyahısı yaradın.
  • Gözəl görünüş və sürətli üslub əlavə etmək üçün tətbiqimizlə Bootstrap -ı birləşdirin.
  • Tətbiqimizə bəzi dinamik davranışlar əlavə etmək üçün JavaScript və JQuery kitabxanasından istifadə edin.
  • Ziet/now istifadə edərək tətbiqimizi buludda yerləşdirin.

Fəaliyyətdə:

Addım 2: HTML, Bootstrap, JavaScript və JQuery -yə giriş

HTML nədir?

Hiper Mətn İşarəti Dili (HTML) "internet dili" olaraq düşünülə bilər. HTML, veb səhifələr yaratmaq üçün istifadə olunan standart işarələmə dilidir. Əvvəlcə elmi sənədlərin paylaşılması üçün hazırlanmışdır. İllər keçdikcə HTML -ə uyğunlaşma, internetdə veb səhifələr kimi göstərilə biləcək bir neçə digər sənəd növünü təsvir etməyə imkan verdi.

HTML səhifəsini göstərmək üçün lazım olan yeganə tələb Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome və ya Apple Safari kimi bir veb brauzeridir.

Bootstrap nədir?

Bootstrap, həssas, mobil ilk veb saytlar qurmaq üçün ən populyar HTML, CSS və JavaScript çərçivəsidir. Bootstrap, Twitter tərəfindən hazırlanmış açıq mənbə layihəsidir. elementləri ardıcıl olaraq tərtib etmək üçün tətbiq oluna bilən CSS siniflərindən və əlavə inkişaf etdirən JavaScript kodundan ibarətdir.

JavaScript nədir?

JavaScript, veb tətbiqlərində müştəri tərəfi proqramlaşdırma üçün istifadə olunan bir proqramlaşdırma dilidir. JavaScript kodu brauzer tərəfindən idarə olunur və veb tətbiq proqramçılarına dinamik olaraq göstərən və ya gizlədilən, görünüşünü dəyişdirən və istifadəçi girişini təsdiqləyən komponentlər kimi dinamik veb məzmunu yaratmağa imkan verir.

JQuery nədir?

JQuery, sürətli, kiçik və xüsusiyyətlərlə zəngin JavaScript kitabxanasıdır, HTML sənədlərinin keçidi və manipulyasiya, hadisələrin idarə edilməsi, animasiya kimi şeyləri daha asanlaşdırır.

JQuery -nin bütün gücünə JavaScript vasitəsi ilə daxil olur, buna görə də JavaScript -i yaxşı başa düşmək, kodunuzu anlamaq, qurmaq və düzəltmək üçün vacibdir.

Ətraflı Məlumat Üçün:

HTML

JavaScript

JQuery

Bootstrap

Addım 3: HTML ilə ilk səhifəniz

HTML ilə ilk səhifəniz
HTML ilə ilk səhifəniz

ADIM1: yeni bir qovluq yaradın:

mkdir sadə-todolist

ADIM2: sadə todolist qovluğunda yeni bir fayl yaradın və index.html adlandırın.

cd sadə-todolist

toxunma index.html

ADIM3: index.html -ə aşağıdakı kodu əlavə edin.

Ediləcək işlər siyahısı

Etməli işlərim siyahısı

ADIM 4: Brauzerinizdə index.html açın.

Görəcəyim İşlərin Siyahısı göstərilir (yuxarıdakı fotoya baxın).

Addım 4: Bootstrap əlavə edin

Bootstrap əlavə olunur
Bootstrap əlavə olunur

Bu bölmədə, Yapılacaklar siyahısı tətbiqinə sürətli və yaxşı bir üslub əlavə etmək üçün index.html səhifəmizə Bootstrap dəstəyi əlavə edəcəyik.

Xəbərdarlıq: Bu tətbiqdə Bootstrap 3 -dən istifadə edəcəyik, siz Semantik UI kimi hər hansı digər CSS çərçivəsindən istifadə edirsiniz.

ADIM1: baş etiketinə Bootstrap CSS faylını əlavə edin:

ADIM2: bədən etiketinin sonuna Bootstrap və JQuery CDN skript faylları əlavə edin:

ADIM 3: Brauzerinizdə index.html açın.

Təbrik edirik, bir neçə addımda səhifəmizə Bootstrap dəstəyini uğurla əlavə edirik.

Addım 5: UI -ni tamamlayın

UI -ni tamamlayın
UI -ni tamamlayın

Tətbiqimizə Bootstrap dəstəyini uğurla əlavə etdikdən sonra. İndi istifadəçiyə yeni vəzifələr əlavə etmək üçün istifadəçi interfeysi (UI) ilə yarışmağa davam edək. Görüləcək işlər siyahısına yeni maddələr əlavə etməklə yanaşı, mövcud elementləri silə biləcək.

ADIM1: index.html -ə aşağıdakı kodu əlavə edin.

Yeni Tapşırıq əlavə et Hamısını sil!

Vəzifələrim Siyahısı

ADIM2: brauzerinizdə index.html faylını açın.

Addım 6: Məntiqi Tətbiqə əlavə edin

Məntiqi Tətbiqə əlavə etmək
Məntiqi Tətbiqə əlavə etmək

Bir tapşırıq adı daxil edib Əlavə et düyməsini tıkladığınız zaman heç bir şey olmur. Gəlin bunu düzəldək.

Bu addımın sonunda index.html -ni dinamik bir səhifəyə çevirəcəyik, buna görə istifadəçi qarşılıqlı əlaqəsinə uyğun davranacaq.

ADIM1: sadə todolist içərisində yeni bir qovluq yaradın, adını js və bu qovluğun içərisində script.js olaraq adlandırın:

mkdir js

cd js touch script.js

ADIM2: baş etiketin sonuna aşağıdakı kodu əlavə edərək script.js faylını index.html ilə əlaqələndirin:

ADIM 3: script.js faylına aşağıdakı kodu əlavə edin

$ (sənəd).ready (() => {

var task = 0 $ ("#removeAll"). hide (); / * yeni tapşırıq işləyicisi əlavə edin */ $ ("#əlavə et"). on ("klik", (hadisə) => {event.preventDefault (); event.stopPropagation (); var val = $ ("giriş"). val (); əgər (val! == "") {vəzifələr += 1; var elm = $ ("

  • $) clikc ", funksiya (hadisə) {event.preventDefault (); event.stopPropagation (); vəzifələr -= 1; $ (bu).parent.remove ();}); /* 3 -dən çox olduğumuzda removeAll düyməsini göstərin vəzifələr */ if (vəzifələr> 2) {$ ("#remveAll"). show ();}/ *removeAll işləyicisi */ $ ("#removeAll"). on ("klik", hadisə => {event.preventDefault (); event.stopPropagation (); $ (". əlil"). bacı -qardaşlar (). remove (); task = 0; $ ("#removeAll"). hide ();});}});});

    Qeyd: GitHub depomdan ya klon əldə edə bilərsiniz, ya da kodun ZIP kodunu yükləyə bilərsiniz, bu sizi vurmaqdan xilas edəcək.

    git klon github.com/ahmnouira/simple-todolist

    ADIM 4: kodu sınayın

    Brauzerinizi açın və bir vəzifə daxil edin, sonra Əlavə et düyməsini basın, siyahıya yeni bir vəzifə əlavə olunduğunu görəcəksiniz, 3 vəzifə əlavə etsəniz clearAll düyməsinin göründüyünü görəcəksiniz, bu düymə bütün əlavə edilmiş vəzifələri silmək imkanı verir. düyməsini basaraq satın aldığı yalnız bir işi silə bilər.

    Addım 7: (İsteğe bağlı) Tətbiqi yerləşdirin

    İndiyə qədər sadə bir todo siyahısı tətbiqetməsini qurduq, indi onu buludda yerləşdirmək və işimizi dünyanın hər yerində başqaları ilə bölüşmək vaxtıdır.

    Buna nail olmaq üçün ZEIT Now adlı bulud platformasından istifadə edəcəyik.

    İndi ZEIT nədir?

    ZEIt Now, statik saytlar və Serversiz Funksiyalar üçün bir bulud platformasıdır, inkişaf etdiricilərə bütün bunları sıfır konfiqurasiya ilə dərhal yerləşdirən veb saytları və veb xidmətlərini yerləşdirməyə imkan verir.

    1. İndi CLI quraşdırın

    ZEIT İndi ilə yerləşdirmək üçün Now CLI qurmalısınız.

    vacib: npm yüklü olduğundan əmin olun.

    npm -v # npm qurulub quraşdırılmadığını yoxlayın

    npm install -g now@latest # Now CLI -nin son versiyasını qlobal miqyasda indi -v # chech, əgər İndi CLI quraşdırılıbsa versiyasını çap edin.

    2. Yerləşdirin

    Etməyiniz lazım olan yalnız qovluğa keçmək və sonra tətbiqinizi tək bir əmrlə yerləşdirməkdir:

    indi --prod # tətbiqi yerləşdirin

    Yerləşdirildikdən sonra, ünvanın altındakı ən son dəyişiklikləri bölüşmək üçün hər bir tətbiqdə təyin edilmiş bir önizləmə URL'si alacaqsınız.

    mənim tətbiqim:

    Addım 8: Nəticə

    Bütün bunlar var!

    Yeni funksiyalar təyin edərək kodu araşdırmaqdan və tətbiqini genişləndirməkdən, şərh sahəsindəki təcrübənizi və suallarınızı bölüşməkdən çekinmeyin.

    Əsərlərimi daha çox görmək üçün GitHubdakı açıq mənbəmə daxil olun.

    myYouTube.

    myLinkedIn

    Təlimatlarımı oxumağa vaxt ayırdığınız üçün təşəkkürlər ^^.

    Gözəl gün arzu edirəm.

    Əhməd Nouira