Polymer Projeleri için Gerekli Kurulumlar, Proje Oluşturma ve Faydalı Geliştirme Araçları (IDE)

Merhaba sevgili yazılım aşıkları,

Artık yeni bir JS Framework öğrenmenin zamanı geldi. Yoksa işe yaramaz bir yazılımcı olacağız. O yüzden sözü fazla uzatmadan Hemen işe başlıyorum :)

Polymer Proje şablonlarını bilgisayarımıza indirmek, geliştirme yapabilmek için Plymer CLI bilgisayarımızda kurulu olması gerekiyor. Bu kurulumu yapabilmek için bilgisayarımızda kurulu olması gereken bağımlılıklarda var şimdi bu süreci adım adım inceleyelim.

İlk olarak aşağıdaki linklerden gerekli kurulum dosyalarını bilgisayarımıza indirip kurulum işlemlerini tamamlamamız gerekiyor.

Node.js

Git

Kurulumların tamamlandığına emin olmak için yada çalıştığınız versiyonları öğrenmek için Çalıştırmanız gereken komutlar

Aşağıda verdiğim komutları Windows kullanıcıları Command Prompt Mac kullanıcıları ise Terminal üzerinden çalıştırabilirler.

node --version
git --version

Bilgisayarımızda kurulu npm paketlerini güncellemenizde fayda var. Çalıştırmanız gereken komut:

npm install npm@latest -g

Global olarak bower paketinin bilgisayarımızda kurulu olması gerekiyor. Çalıştırmanız gereken komut:

npm install -g bower

Bu adıma kadar sorun yaşamadıysak Plymer CLI kurulumu yapabilmemiz için gereksinimleri tamamladınız. Artık aşağıdaki komut ile Plymer CLI kurulumunu yapabilirsiniz.

npm install -g polymer-cli

polymer-cli bizim polymer uygulamamızı geliştirirken, test ederken, build ederken ve diğer bir çok uygulama geliştirme sürecinde elimiz kolumuz olacak.

Bower ile Ploymer Projesi Oluşturabilir miyiz ?

Takibi oluşturabiliriz. Hemen başlayalım.

İlk alarak Projeyi oluşturmak istediğimiz dizini Windows kullanıcıları Command Promd , Mac kullanıcıları Terminal üzerinden açıyoruz. ve aşağıdaki komutu giriyoruz. Bizden bower yapılandırması için bazı bilgiler isteyecek. Konu eksiyi olan arkadaşlar için ilgili dokümanın adresini aşağıya ekliyorum.

Bower

bower init

Bu komuttu çalıştırıp bizden istenen bilgileri girdikten sonra proje dizinimiz üzerinde bower.json dosyası oluşacak. Bu adıma kadar sorun yoksa bower üzerinden polymer dosyalarını indirebiliriz. Bunun için aşağıdaki komutu giriyoruz.

bower install Polymer/polymer --save

Yukarıdaki komutu çalıştırdıktan sonra proje dizinimiz in aşağıdaki gibi gözükmesi gerekiyor.

Artık web projelerinin göz bebeği index.html dosyamızı ekleyebiliriz:) index dosyasının head bölümüne polymer.html ve webcomponent-loader.js dosyalarını eklememiz gerekiyor. Son görünün aşağıdaki gibi

Visual Studio Code kullanıyorsanız eklediğimiz dosyaların yolunun doğru olduğunu kontrol etmek için dosya üzerine gelip Ctrl + sol click kombinasyonunu kullanabilirsiniz.

Bu aşamaya kadar sorunsuz biz şekilde geldiysek aşağıdaki komutu çalıştırarak. Web projemizin tarayıcı üzerinde açılmasını sağlayabiliriz.

polymer serve --open

Boş bir sayfanın bizi karşılaması gerekiyor. Sayfanın Console bölümüne bastığı bir hata yoksa her şey yolunda demektir.

Her proje oluştururken bu bower süreçelerini takip etmem mi gerekiyor? Dediğinizi duyar gibiyim.

Bu işlem için şu an iki seçeneğimiz var. Birincisi: ve kolay yolu Chrome Dev Editor aracını kullanmak. İkincisi ise Polymer CLI yardımı ile proje dosyarını bilgisayarımıza otomatik olarak indirmek. Chrome Dev Editör ünden kısaca aşağıda bahsettim. Polymer CLI ın tek görevi proje init etmek diğer bir deyişle proje dosyalarını bilgisayarımıza indirmek olmadığı için önümüzdeki yazılara bıraktım.

Fakat Diğer yazıları beklemek istemeyen ve çılgınlar gibi öğrenmek isteyen arkadaşlar :) aşağıdaki linki hemen ziyaret edebilirler.

Polymer CLI Commands - Polymer Project

Chrome Dev Editor

Polymer projesi geliştirirken kullanabileceğimiz güzel bir editör.Aşağıdaki link den bilgisayarımıza indirebilirsiniz.

Chrome Dev Editor

Uygulamayı açtığımızda sol alt bölümde kırmızı (+) işaretli bir buton çıkıyor. Tıkladığımızda New Project ekranı açılıyor. Buradan istediğimiz proje şablonunu seçip projeyi oluşturuyoruz. Şimdilik siz JavaScript web app(using Polymer paper elements) seçeneğini seçin. Neden bu kadar ısrarlı bir şekilde diğer seçeneklerden birini seçmek istiyorsunuz anlamış değilim doğrusu :)

Aşağıdaki resimdeki gibi sol bölümde proje için oluşturulan dosyalar listeleniyor. Proje açılır açılmaz Editor otomatik olarak proje için gerekli Bower paketlerini indirmeye başlıyor. Projemizin dosya listesinin hem altındaki Getting Bower pakages… bildiriminden bu işlemin devam ettiğini anlayabiliriz. Yükleme işlemi tamamlandıktan sonra Sol üstteki Run butona tıklayarak projemizi çalıştırabiliriz.

Eğer yeni bir bower paketi yüklemek istersek aşağıda verdiğim numaralardan anlaşılacağı gibi 3 adımda bu işlemi gerçekleştirebiliriz.

1. bower.json dosyasına yüklemek istediğimiz bower paketini ekliyoruz.
2. proje dosyaları içerisindeki bower_component klasörüne sağ tıklıyoruz.
3. Bower Update seçeneğine tıklıyoruz

Son olarak html uzantılı bir dosya açıkken Editörün sol alt kısmında çıkan Open in Plymer Designer butonuna da dikkat çektikten sonra(Yazımızın konusu olmadığı için incelemedim ama sizin incelemenizde fayda var) yazıyı sonlandırabilirim.

Yararlı olması dileklerimle. İyi çalışmalar diliyorum.