İlerici Web Uygulamaları (PWA)

Bu bölümde, ilk PWA'mızı yapılandırırken kullanacağımız geliştirme ortamının kurulumunu yapacağız.

Dark Sky API Anahtarının Alınması

Ders kapsamında kullanacağımız hava durumu web uygulamamızın verilerini Dark Sky API'dan alacağız. Dark Sky, ticari olmayan projelerinize ücretsiz olarak dahil edebileceğiniz, kullanımı kolay ve gelişmiş bir hava durumu servisidir. 

API anahtarı oluşturmak için aşağıdaki adımları takip ediniz:

1. https://darksky.net/dev/register adresini açın.
2. e-Posta adresinizi ve kullanmak istediğiniz parolayı belirterek kayıt formunu doldurun. 
3. e-Posta adresinize gönderilen onay iletisindeki bağlantıya tıklayarak e-posta adresinizi doğruladıktan sonra sisteme giriş yapın.
4. Dark Sky hesabınız ve güvenlik anahtarınız (Secret Key) oluşturulmuş olacaktır.

NOT: Dark Sky API anahtarı olmadan da hava durumu uygulamasını kullanabilirsiniz. Ama bu durumda uygulama gerçek veriler yerine uydurma veriler görüntüleyecektir.

Kodların Alınması ve Çalıştırılması

Hava durumu uygulamasının tüm kodları https://github.com/ikybs/ilk-pwam adresinden erişebileceğiniz bir Git deposunda tutulmaktadır. Uygulama kodlarını kopyalamak, düzenlemek ve çalıştırmak için kendi favori geliştirme ortamınızı kullanabilirsiniz. Fakat bu ders kapsamındaki kodlama görevlerini hızlı ve sorunsuz bir biçimde yapabilmeniz için benim tavsiyem Glitch olacaktır.

Glitch, özellikle kodlamaya yeni başlamış kişiler için iyi bir başlangıç noktası olacaktır. En basit haliyle Glitch'i, web uygulamaları geliştirmek için kullanabileceğiniz çevrimiçi bir araç olarak düşünebilirsiniz. Glitch hakkında daha detaylı bilgi almak isterseniz https://glitch.com/about adresini ziyaret edebilirsiniz.

Glitch'in Kullanımı

1. Google Chrome web tarayıcınızı kullanarak https://glitch.com adresini açın.
2. Ana sayfanın sağ üst köşesinde yer alan Sign in düğmesine tıklayarak kendinize bir Glitch hesabı oluşturun ve giriş yapın.
3. New Project düğmesine tıklayın ve açılan menüden Clone from Git Repo seçeneğini seçin.
4. Url alanına https://github.com/ikybs/ilk-pwam.git adresini kopyalayın ve OK düğmesine tıklayın.

Tebrikler, Glitch'te ilk projenizi oluşturdunuz. 

Artık uygulamayı çalıştırıp test edebilirsiniz. Bunun için;

1. Sol tarafta yer alan dosya gezgininden .env isimli dosyaya tıklayın.
2. Bir önceki bölümde oluşturduğunuz Dark Sky API anahtarını, 6. kod satırına kopyalayın. İşlemden sonra kod satırı, şuna benzer bir biçimde görünmelidir:  DARKSKY_API_KEY="9a1e413a408a7ff96a0df067bd8be63f"
3. Uygulamayı çalıştırmak için Show düğmesine tıklayın ve açılan menüden In a New Window seçeneğini seçin. 

Eveet! Artık çalışan bir çevrimiçi hava durumu uygulamanız var. Tarayıcınızın adres çubuğunda yazan url'i kaydedin. Çünkü bundan sonra hava durumu uygulamasına doğrudan erişmek için bu adresi kullanabilirsiniz.

Kendi Geliştirme Ortamınızı mı Kullanmak İstiyorsunuz?

Eğer aranızda web geliştirme konusunda deneyimli olan arkadaşlar varsa, doğal olarak kendi bilgisayarlarında favori kod editörlerini ve geliştirme ortamlarını kullanmak isteyebilirler. Bu durumda uygulama kodlarını kopyalamak ve çalıştırmak için aşağıdaki adımları takip etmeleri yeterli olacaktır:

1. Bilgisayarınızda Node.js'in güncel bir sürümünün kurulu olduğundan emin olun.
2. https://github.com/ikybs/ilk-pwam adresinden uygulama kodlarını bilgisayarınıza indirin veya Git ile klonlayın.
3. npm install komutu ile uygulama bağımlılıklarını yükleyin.
4. server.js dosyasının 12. kod satırına Dark Sky API anahtarınızı kopyalayın.
5. node server.js komutu ile uygulamayı çalıştırın.
6. Google Chrome'da adresi açın.

Çok iyi bir iş çıkardınız! Artık ilk PWA'nızı geliştirmeye hazırsınız.

Bir sonraki bölümde görüşmek üzere...