İlk Yapılacaklar Listesi Uygulamanızı Dağıtın: 8 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:18

Kodlama konusunda tamamen yeniyseniz veya biraz arka plan kodlamanız varsa, öğrenmeye nereden başlayacağınızı merak ediyor olabilirsiniz. Nasıl, ne, nerede kodlanacağını ve sonra kod hazır olduğunda, bütünün görmesi için nasıl dağıtılacağını öğrenmen gerekiyor.

İyi haber şu ki, kodlama zor değil.

Hedef Kitle: Bu eğitim, web geliştirme alanında kariyer başlatmak isteyen, genel olarak web teknolojilerini anlayan yeni başlayanlar için hazırlanmıştır.

Yapım Süresi: 90 Dakika.

Zorluk: Kolay.

Adım 1: Ne İnşa Edeceğiz?

Bu eğitimin sonunda şunları yapacağız:

• HTML5 kullanarak basit bir Yapılacaklar Listesi Web Uygulaması oluşturun.
• İyi görünümlü ve hızlı stil eklemek için Bootstrap'ı uygulamamızla entegre edin.
• Uygulamamıza bazı dinamik davranışlar eklemek için JavaScript ve JQuery kitaplığını kullanın.
• Uygulamamızı Ziet/now kullanarak bulutta dağıtın.

Eylemde:

2. Adım: HTML, Bootstrap, JavaScript ve JQuery'ye Giriş

HTML nedir?

Hyper Text Markup Language (HTML) "internetin dili" olarak düşünülebilir. HTML, web sayfaları oluşturmak için kullanılan standart biçimlendirme dilidir. Başlangıçta bilimsel belgeleri paylaşmak için tasarlanmıştır. Yıllar içinde HTML'ye yapılan uyarlamalar, internette web sayfaları olarak görüntülenebilen diğer birçok belge türünü tanımlamayı uygun hale getirdi.

Bir HTML sayfasını görüntülemek için gereken tek gereksinim, Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome veya Apple Safari gibi bir web tarayıcısıdır.

Bootstrap nedir?

Bootstrap, duyarlı, mobil ilk web siteleri oluşturmak için en popüler HTML, CSS ve JavaScript çerçevesidir. Bootstrap, Twitter tarafından geliştirilen açık kaynaklı bir projedir. tutarlı bir şekilde stil vermek için öğelere uygulanabilen CSS sınıflarından ve ek geliştirme gerçekleştiren JavaScript kodundan oluşur.

JavaScript nedir?

JavaScript, web uygulamalarında istemci tarafı programlama için kullanılan bir programlama dilidir. JavaScript kodu tarayıcı tarafından çalıştırılır ve web uygulaması programcılarının dinamik olarak gösterilen veya gizlenen bileşenler gibi dinamik web içeriği oluşturmasına, görünümü değiştirmesine ve kullanıcı girdisini doğrulamasına olanak tanır.

JQuery nedir?

JQuery, hızlı, küçük ve zengin özelliklere sahip bir JavaScript kitaplığıdır; HTML belgesi geçişi ve manipülasyon, olay işleme, animasyon gibi şeyleri çok daha basit hale getirir.

JQuery'nin tüm gücüne JavaScript aracılığıyla erişilir, bu nedenle JavaScript'i güçlü bir şekilde kavramak, kodunuzu anlamak, yapılandırmak ve hata ayıklamak için çok önemlidir.

Daha fazla ayrıntı için:

HTML

JavaScript

JQuery

Önyükleme

3. Adım: HTML ile İlk Sayfanız

ADIM1: yeni bir klasör oluşturun:

mkdir basit-todolist

ADIM2: basit-todolist klasörü içinde yeni dosya oluşturun ve index.html olarak adlandırın.

cd basit-todolist

index.html'ye dokunun

ADIM3: index.html'ye aşağıdaki kodu ekleyin.

Yapılacaklar listesi

Yapılacaklar Listem

ADIM4: Tarayıcınızda index.html dosyasını açın.

Yapılacaklar Listem'in görüntülendiğini göreceksiniz (yukarıdaki fotoğrafa bakın).

Adım 4: Bootstrap Ekleme

Bu bölümde, Yapılacaklar Listesi Uygulamasına hızlı ve iyi bir stil eklemek için index.html sayfamıza Bootstrap desteği ekleyeceğiz.

Uyarı: Bu uygulamada Bootstrap 3 kullanacağız, Semantic UI gibi başka bir CSS çerçevesi kullanacaksınız.

ADIM1: Head etiketine Bootstrap CSS dosyası ekleyin:

ADIM2: body etiketinin sonuna Bootstrap ve JQuery CDN komut dosyaları ekleyin:

ADIM3: Tarayıcınızda index.html dosyasını açın.

Tebrikler, birkaç adımda başarılı bir şekilde Bootstrap desteğini sayfamıza ekledik.

Adım 5: Kullanıcı Arayüzü'nü tamamlayın

Bootstrap desteğini uygulamamıza başarıyla ekledikten sonra. Şimdi devam edelim ve kullanıcının yeni görevler eklemesine izin vermek için UI'yi (Kullanıcı Arayüzü) rekabet edelim. Yapılacaklar listesi, bir listeye yeni öğeler ekleyebilecek ve mevcut öğeleri kaldırabilecek.

ADIM1: index.html'ye aşağıdaki kodu ekleyin.

Yeni Görev Ekle Tümünü Temizle Ekle!

Görev Listem

ADIM2: index.html dosyasını tarayıcınızda açın.

Adım 6: Mantığı Uygulamaya Ekleme

Bir görev adı girip Ekle düğmesine tıkladığınızda şu anda hiçbir şey olmuyor. Bunu düzeltelim.

Bu adımın sonunda index.html sayfamızı dinamik bir sayfaya çevireceğiz, böylece kullanıcı etkileşimine göre davranacaktır.

ADIM1: simple-todolist içinde yeni bir klasör oluşturun, onu js olarak adlandırın ve bu klasörün içinde de script.js adlı yeni bir dosya adı verin:

mkdir js

cd js dokunmatik script.js

ADIM2: head etiketinin sonuna aşağıdaki kodu ekleyerek script.js'yi index.html'ye bağlayın:

ADIM3: script.js dosyasına aşağıdaki kodu ekleyin

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

var görevler = 0 $("#removeAll").hide(); /* yeni görev işleyici ekle */ $("#add").on("click", (event) => { event.preventDefault(); event.stopPropagation(); var val = $("input"). val(); if(val !=="") { görevler +=1; var karaağaç =$("

• "); $("#mylist").append(elem); $("input").val(""); /* benzersiz görev işleyiciyi kaldır */ $(".text-right").on(" clikc", function(event) { event.preventDefault(); event.stopPropagation(); görevler -=1; $(this).parent.remove(); }); /* 3'ten fazla olduğunda removeAll düğmesini göster görevler */ if(tasks > 2) { $("#remveAll").show(); } /* removeAll işleyici */ $("#removeAll").on("click", event => { event.preventDefault (); event.stopPropagation(); $(".disabled").siblings().remove(); görevler = 0; $("#removeAll").hide(); }); } }); });

  Not: GitHub depomdan kodun ZIP'ini kopyalayabilir veya indirebilirsiniz, bu sizi dokunmaktan kurtarır.

  git klon github.com/ahmnouira/simple-todolist

  ADIM4: kodu test edin

  Tarayıcınızı açın ve bir görev girin ve ardından Ekle'ye tıklayın, listeye yeni bir görev eklendiğini göreceksiniz, 3 görev eklerseniz bir clearAll düğmesinin göründüğünü fark edeceksiniz, bu düğme eklenen tüm görevleri kaldırmamıza izin veriyor, siz ayrıca düğmesine tıklayarak yalnızca bir görev satın alma işlemini kaldırabilir.

  7. Adım: (İsteğe bağlı) Uygulamayı Dağıtın

  

  Şimdiye kadar basit bir yapılacaklar listesi uygulaması oluşturduk, şimdi onu bulutta dağıtma ve çalışmalarımızı dünyanın her yerinden başkalarıyla paylaşma zamanı.

  Bunu başarmak için ZEIT Now adlı bulut platformunu kullanacağız.

  Şimdi ZEIT Nedir?

  ZEIt Now, statik siteler ve Sunucusuz İşlevler için bir bulut platformudur, geliştiricilerin anında dağıtılan web sitelerini ve web hizmetlerini barındırmasını sağlar, tüm bunları sıfır yapılandırma ile yapar.

  1. CLI'yi Şimdi Yükleyin

  ZEIT Now ile dağıtmak için Now CLI'yi yüklemeniz gerekir.

  önemli: npm'nin kurulu olduğundan emin olun.

  npm -v # npm'nin kurulup kurulmadığını kontrol edin

  npm install -g now@latest # Now CLI'nin son sürümünü şimdi global olarak yükleyin -v # Now CLI kuruluysa kontrol edin ve sürümü yazdırın

  2. Dağıt

  Tek yapmanız gereken dizine taşınmak ve ardından uygulamanızı tek bir komutla dağıtmak:

  şimdi --prod # uygulamayı dağıtın

  Dağıtıldıktan sonra, adres altındaki en son değişiklikleri paylaşmak için her dağıtıma atanan bir önizleme URL'si alırsınız.

  benim uygulamam:

  Adım 8: Sonuç

  Hepsi bu kadar!

  Yeni özellikler ayarlayarak ve uygulamayı genişleterek kodu keşfetmekten çekinmeyin ve yorum alanında deneyiminizi ve sorularınızı paylaşın.

  Daha fazla çalışmamı görmek için lütfen GitHub'daki açık kaynağımı ziyaret edin.

  benimYouTube'um.

  myLinkedIn

  Talimatımı okumak için zaman ayırdığınız için teşekkür ederiz ^^.

  İyi günler.

  Ahmed Nouira