En İyi HTML, CSS, Javascript Uygulaması: Chrome Uzantısı

Codecademy'i yeni bitiren insanlar için.

Programlamayı öğrenirken, kendi kendine çalışmanın en etkili yolu bir ürün geliştirmek. Bu yaklaşım, programlama becerilerinizi geliştirmek için herhangi bir programlama kursu almaktan çok daha hızlıdır.

Normalde, insanlar web programlamada HTML, CSS ve temel Javascript ile programlamayı öğrenmeye başlarlar, ancak sunucu tarafı kısmına ulaşmadan önce anlamlı bir uygulama yapmak zordur.

Bu yüzden öğrencileri hep böyle ikna etmeye çalıştım.

Sunucu tarafı öğrenmeye ve bir uygulama başlatmaya başlarsanız eğlenceli olacak. Lütfen pes etmeyin.

ancak birçok öğrenci HTML ve CSS aşamasındayken programlamayı bırakıyor.

(Belki, insanları programlama okumaya teşvik etmek için HTML ile başlamak iyi bir fikir değildir.)

Bir gün işe başlamak için Chrome tarayıcımı açtım. Ardından, yalnızca HTML, CSS ve Javascript kullanarak oluşturabileceğiniz en iyi uygulamayı kullandığımı fark ettim.

moment

Kısacası, bu uzantıyı Chrome'a ​​yüklerseniz, her yeni sekme açtığınızda süper güzel bir resmin üzerine bir karşılama mesajı gelecektir. İndirme sayısı zaten birkaç milyon. Bunu kullanmadıysanız, kurmanızı şiddetle tavsiye ederim. Belki bu uygulamayı yeni sekme başına yalnızca 2-3 saniye deneyimleyebilirsiniz, ancak o küçük an için rahatlayabilirsiniz.

Bu uygulamayı klonlamaya çalışalım!

1. Aşama: Hazırlanacak şeyler

  • HTML
  • CSS
  • JavaScript
  • Güzel resim:
  • manifest.json (Chrome'dan yüklenecek)

Uygulamayı hızlı bir şekilde geliştirme yöntemim geleceğe değil, şimdiye odaklanmaktı. Tabii ki, sizin solo projeniz olmadığında somut bir plan yapmak önemlidir. Fakat! Öz motivasyonun ömrü çok kısadır, bu yüzden bir şeyi geliştirmek gibi hissettiğinizde daha çabuk bitirebilirsiniz. Ürününüzü geliştirecek başka seçenekler hakkında düşünmeye başlarsanız, projenizi asla bitiremezsiniz.

Hadi basit tutalım.

Bir büyük resim, bir büyük tebrik mesajı ve belki de şimdiki zamanlardan oluşan bir web sitesi hazırlıyoruz.

Resim bul

Unsplash web sitesine giderseniz, tonlarca harika lisanssız resim bulabilirsiniz.

Norveç’te olduğumdan bu resmi kullanmaya karar verdim.
Teşekkürler Vidar Nordli-Mathisen. (Yeteneklerini kabul etmek her zaman önemlidir.)

Fotoğraf Vidar Nordli-Mathisen Unsplash'ta

Proje yapmak

Basit Basit Basit

Bir HTML dosyası, bir CSS, bir Javascript ve bir manifest dosyası.

Tüm ihtiyacımız olan bu.

Tamam, bu ilk versiyon.

Bu basit bir web sayfası. Şimdi, Chrome'dan yüklenebilmek için aşağıdaki manifest.json dosyasını eklemelisiniz.

“Chrome_url_overrides” bu uygulamadaki en önemli özelliktir.

Uzantı sayfasına git“Ambalajı aç” düğmesine tıklayınProje klasörünüzün içindeki seç düğmesine tıklayınMütevazi uzantımız…Yeni sekmeyi her açtığınızda, basit web sayfanızı gösterir.

İşte gidiyoruz, ilk projemizi yeni bitirdik.

Yalnızca bu işlevle kullanabilirsiniz. Belki de metninizi “motive etmek imkansız”, “sadece yap”, “biz dünyayız” gibi bir şeyle motive etmek istediğiniz bir şeye göre düzenleyebilirsiniz. Ya da belki aile fotoğrafını onun yerine koyabilirsin.

Ama bunu bundan daha iyi hale getirelim.

2. Aşama: Eklenecek şeyler

  • Şimdiki zaman
  • İsim değiştirme fonksiyonu
  • Resim değiştirme fonksiyonu

Bu üç yeni özelliği eklemek için HTML dosyasını aşağıdaki gibi değiştirdim.

CSS de değişmeli.

Sonra yeni sayfa aşağıdaki gibi olacaktır.

Oh, Momentum sanıyordum :)

Manifest.json güncelleniyor

Şimdi iki özellik ekleyeceğiz.

Her şeyden önce, bu uygulamaya bir giriş formu ekleyeceğiz, böylece kullanıcılar adlarını koyabilirler. Bu formu “Merhaba, Jungwon Seo” mesajı altında ekleyeceğiz.

Bu çirkin, düzeltelim

Giriş etiketi için yeni stil.

Tamam, çok daha iyi.

Bundan sonra, bu bilgilerin nasıl saklanacağını düşünmemiz gerekiyor.

“Çerez” kullanacağız, ancak HTML dosyasını yalnızca Chrome Tarayıcı'dan açarsanız “çerez” kullanamazsınız. Bir Chrome uzantısı olarak yükledikten sonra test etmeye çalışın.

Önceki yayında depolama izni hakkında yanlış bilgi vardı. ‘Çerez’ kullanmak için ‘depolama’ iznine ihtiyacınız yoktur.

Ayrıca, hala jQuery kullanmayı tercih ettiğimden ekleyelim.

JQuery CDN'i eklemeye çalıştım ama…

Endişelenmeyin, yalnızca manifest.json içine bir özellik daha eklememiz gerekiyor.

Güzel, şimdi script.js dosyasında kodlamaya hazırız.

İlk yapmak istediğim şey:

  1. Kullanıcıların adını yazmasını sağlayın.
  2. Çerezte saklayın (en popüler kodu kullanalım)
  3. Giriş formunu silin ve karşılama mesajı içinde kaybolun.

Şimdi, bu gerçek bir geliştirici gibi düşünmemiz gereken ilk şey.

Durum 1: İlk defa açtığınızda.
Durum 2: Adınızı yazdıktan sonra açtığınızda.

Neyin görünür olması ve neyin olmaması gerektiğine karar vermeliyiz.

Dava 1:
Zaman: Geçerli zaman
Tebrik Mesajı: Adın ne?
Giriş formu: Görünür

Durum 2:
Zaman: Geçerli zaman
Tebrik Mesajı: Merhaba !
Giriş formu: Görünmez

Ve bu iki durumu birbirinden ayırmanın yolu, çerezin “kullanıcı adı” anahtarına sahip olup olmadığını kontrol etmektir.

Zaman güncelleme fonksiyonu ile yeni script.js aşağıdaki gibi olacaktır.

İsmi yazmadan önceAdını yazdıktan sonra

Tamam, çalışıyor gibi görünüyor.

Tabii ki, geçiş etkileri gibi hala geliştirmemiz gereken bazı şeyler var.

Ama sana vereceğim.

Şimdi başka ne var?

Kullanıcıların resimlerini değiştirmelerini sağlayan işlevselliği eklememiz gerekir.

Splash API'yi kaldır

Uygulamanızı kolayca kaydedebilir ve bu sayfadan bir simge alabilirsiniz.

Unsplash API kullanmak için, uygulamanızı geliştirici sayfasına kaydetmeniz gerekir.

'Yeni Uygulama'yı tıklatarak kendi hesabınızı kaydedebilirsiniz.

Demo ürün için, saatte en fazla 50 istek kullanmanıza izin verilir. Ve bu bizim için yeterli.

Sadece aşağıdaki formu doldurup istediğiniz şekilde doldurmanız yeterli.

Herhangi bir isim yazın

Uygulamayı oluşturursanız, yönlendirilen web sitesinden ‘Keys’ bölümünü göreceksiniz.

Bu uygulamayı sildim, denemek için hiçbir sebep yok.

Sadece 'Erişim Anahtarını' kopyalamanız ve javascript değişkeninize 'ACCESS_KEY' atamanız yeterlidir.

Arama API'sını kullanacağız.

İşte senaryo. Tüm insanların farklı ilgi alanları vardır. Bu yüzden önce onların ilgi alanlarını sormak istiyorum, sonra da bu görüntüyü Unsplash API'sini kullanarak arayacağım. Bundan sonra, görüntüyü her 12 saatte bir güncellemeye devam edeceğim (aynı anahtar kelime, farklı resim).

Böylece AJAX işlevi aşağıdaki gibi olacaktır.

İlgilendiğiniz yeri yazdıktan sonra bu fonksiyon çağrılacaktır.

O zaman, beklediğiniz gibi, yine bir geliştirici olmak zorundayız.

Durum 1–1: İlk defa
Durum 1–2: Adından sonra
2. Durum: İlginizi yazdıktan sonra
Durum 3: 12 saat sonra.

Tamam, tek tek karar verelim.

Durum 1–1'de, görüntü ile ilgili tüm kısımları gizlememiz yeterli. Bunu atla.

Durum 1-2'de sadece ilgi için girdi formunu gösterir.

Durum 2'de, AJAX'ı arayın ve görüntü bilgisini kaydedin.

3. Durumda, son kullanma süresini 12 saate ayarlayalım ve çerez boşsa, tekrar AJAX isteğini arayın.

Anahtar kelime: Londra

Evet çalışıyor.

Faz 3: Son dokunuşlar

Fotoğrafçıya kredi vermek zorunlu değildir, ancak neden olmasın?

Birkaç kod daha yazabilir ve fotoğrafçının adını ve sayfasını sol üst tarafa aktarabiliriz.

Çerezleri ilk kez kontrol ederken fotoğrafçının bilgilerini kullanabilmemiz için.

Bir şey daha, peki biri çıkarlarını değiştirmek isterse?

İnsanların ilgi alanlarını yeniden yazmalarına izin veren bu işlevi ekleyelim.

Düğmesine basmadan önce

İşte gidiyorsun. “Yeni bir ilgi alanı seç” düğmesini tıklarsanız, daha önce ilginizi yazdığınız giriş formunu açmanız tetiklenir.

Düğmesine tıkladıktan sonra

Aşama 4: Kendi ürününüzü yaratın.

Sadece süreci baştan sona deneyimlemenizi istiyorum. Yine de, öğrendiğiniz beceriyi gerçekten özümsemek için bunu kendiniz geliştirmelisiniz.

Rastgele resmi seçmenin yolu gibi dahil etmenin iyi olacağını düşündüğünüz bazı işlevler olmalıdır. Veya bazı kodlarımın yetersiz kaldığını düşünebilirsiniz. Aynı ürünün sürümünüzü daha iyi bir kodla geliştirebilirsiniz.

İyi şanslar ve pes etmeyin!

Tam sürüm burada bulunabilir: https://github.com/thejungwon/MyChromeExtension

Bu hikaye, sevdiğimiz ürünleri şekillendiren insanları ve fikirleri öğrenmek için her gün 10.000'in üzerinde okuyucunun geldiği Kayda Değer'de yayınlanmaktadır.

Journal ekibi tarafından sunulan daha fazla ürün ve tasarım hikayesi görmek için yayınımızı takip edin.