Visual Studio Code ile SAP UI5/Fiori Uygulamaları Geliştirmek
Bir süredir SAP UI5/Fiori uygulamaları konusunda çalışmalar yapan biri olarak, maalesef WebIDE’nin şu an için en hızlı yol olmadığını düşünenlerdenim. (Network sorunları ve editör bug’ları gibi problemler ile karşılaşabiliyoruz.)
Bu görüş kişiden kişiye değişebilir. Kullanışlı bir araç olduğuna ve sürekli geliştirildiğine şüphe yok. On-premise versiyonunu kullanmak tabii ki daha mantıklı. Geliştirmeleri lokalde yapıp git ile kolaylıkla dağıtabiliyoruz.
Fakat WebIDE’nin avantajları olduğu gibi dezavantajlarıda var. Benim için yavaş olması büyük problem. Bu nedenle farklı IDE’lerde denemeler yaptım ve bazı blog yazıları okudum. Alternatif pratik yollar öğrendim.
Diğer IDE’lere baktığımızda kuşkusuz ilk sırada Eclipse gelir. İçerisine SAP ABAP dahil olmak üzere, bir çok aracı kolaylıkla entegre edip kullanabilir durumdayız. Genelde UI5 uygulamalarının geliştirildiği yer olduğunu söylersek yanlış olmaz. Ayrıca buraya bir çok alternatif IDE sıralayabiliriz. (Webstorm, Brackets, Atom gibi..)
Ben çalışmalarımda genel olarak şu ana kadar kullandığım en iyi IDE’lerden biri olan Visual Studio Code kullanıyorum. UI5 ile arayüz tasarımını ve uygulamanın genel yapısını pratik bir şekilde nasıl oluşturabilirim diye araştırırken Visual Studio Code kullanmaya başladım. VSCode’u farklı projeler yaparken de kullanıyordum. Oldukça hızlı, eklenti kütüphanesi de bir hayli geniş. Belkide benim için çok daha konforlu bir ortam sağladığı için olabilir, işlerimi çok pratik bir şekilde yapabiliyorum.
Bunun için tüm projelerimi bir projeden başlattığım basit bir iskelet uygulama yapısı oluşturdum. Projeyi kopyalayıp hızlı bir şekilde geliştirme aşamasına geçmiş oluyorum.
Bu yazıda, araştırdığım ve gördüğüm yöntemler arasında kendim için en pratik olduğunu düşündüğüm iki alternatif paylaşıyor olacağım. Siz de kendinize uygun olan alternatif üzerinden devam edebilirsiniz. Umarım faydalı olur. İyi çalışmalar dilerim.
(Not: Aşağıdaki yönergeler, MacOS işletim sistemine sahip bir bilgisayarda denenmiştir.)
Alternatif 1
Hangi Araçlara İhtiyacımız Var?
Aşağıdaki araçların sisteminizde yüklü olması gerekiyor. Yoksa kurulum işlemlerini bağlantılardan yapabilirsiniz.
VSCode Eklentileri;
Hazırladığım boş template’i aşağıdaki bağlantıdan indirebilirsiniz. Ya da SAP Cloud Cockpit üzerinde WebIDE aracılığı ile kendiniz için oluşturabilirsiniz.
⬇️ ui5-starter-template ⬇️
Proje klasörünü VSCode içerisine tanımladıktan sonra package.json dosyasını oluşturacağız.
Root içerisinde aşağıdaki komutu çalıştırıyorum. Bu bize package.json isimli bir dosya oluşturacak.
yarn init
package.json dosyası aşağıdaki şekilde görünmeli.
Aşağıdaki komut ile UI5 Tooling dosyası oluşturacağım.
ui5 init
Klasör yapısı aşağıdaki gibi görünmeli.
Dosyaları oluşturduk. Şimdi build edeceğiz. Bu komutu girdikten sonra klasörlerimiz arasına “dist” isimli bir distribution klasörü gelmiş olacak.
ui5 build
Build işlemi tamamlandıktan sonra, VSCode içerisine yüklediğimiz Browser Sync eklentisini kullanabilmek için package.json içerisine aşağıdaki komutları girmemiz gerekiyor. Bu eklenti yaptığımız değişiklikleri anlık olarak görmemizi sağlıyor. Çok kullanışlı bir araç.
"scripts": {
"dev": "browser-sync start -s \"webapp/\" -f . --no-notify",
"prod": "browser-sync start -s \"dist/\" -f . --no-notify",
"build": "ui5 build"}
package.json dosyası aşağıdaki gibi görünmeli.
Şimdi uygulamayı çalıştırabilir durumdayız. Aşağıdaki komutu çalıştırıyorum.
yarn dev
Artık proje içerisinde yapacağımız tüm güncellemeleri anlık olarak localhost’da görebiliyoruz. UI tarafı için çalışırken gerçekten oldukça kolaylık sağlıyor. IDE’nin hızlı olması da büyük avantaj.
Not: Projenin çalışabilmesi için, index.html dosyası içerisinde openui5 javascript kütüphanesinin yüklendiği bir bölüm var. Proje oluşturduğunuzda burası default olarak src=”resources/sap-ui-core.js” şeklinde geliyor. Burayı src=”https://openui5.hana.ondemand.com/resources/sap-ui-core.js" şeklinde değiştirmelisiniz.
http://localhost:3000'e gidersek aşağıdaki gibi bir görüntü ile karşılaşacağız.
Şimdi OpenUI5 kütüphanesinden bir kaç element ekleyerek bitirelim. SAP Fiori’nin klasik tile yapısını aşağıdaki kod ile oluşturmuş olduk.
Bu Yöntem ile Form Uygulaması Hazırlamak
Oluşturduğumuz starter template içerisine openui5 kütüphanesinden kullanmak istediğimiz elementleri hızlı bir şekilde ekleyerek kısa süre içerisinde basit bir form yapısı oluşturdum.
Aynı zamanda mobil cihazlar için bir çalışma yapıyorsak bu yöntemi aynı şekilde uygulayabiliriz.
Alternatif 2
Gruntfile.js dosyası ile proje oluşturmak
Bu alternatifte de gruntfile.js dosyası ile task’larımızı sıraya sokarak aynı şekilde bir çalışma ortamı yaratmış olacağız.
Hangi Araçlara İhtiyacımız Var?
Aşağıdaki aracın sisteminizde yüklü olması gerekiyor. Yoksa kurulum işlemlerini bağlantıdan yapabilirsiniz.
Node.js’i kurduktan sonra uygulamamızı lokalde çalıştırabilmek için bazı dependency ve araçlara ihtiyacımız olacak. Bunun için aşağıdaki adımları sırasıyla uygulayalım.
Proje klasörünü VSCode içerisine tanımlayıp, terminalde klasör içerisine giriyorum.
Ardından aşağıdaki kodları sırasıyla çalıştıracağım.
İlk komut, sizden bazı değerler isteyecek. Bu aşamada default gelen değerleri seçerek ilerleyebilirsiniz. Uygulamamız için gerekli araçların ve dependency’lerin belirtildiği package.json isimli bir dosya oluşturmuş olduk.
Diğer komut ise, uygulama için belirtilen gerekli araçlar ve dependency’leri kuracaktır.
npm initnpm install grunt grunt-contrib-clean grunt-contrib-connect grunt-contrib-copy grunt-openui5 — save-dev
Şimdi uygulamayı çalıştırabilmek için package.json dosyasına bazı komutlar girmemiz gerekiyor.
Dosyayı güncellediğimizde aşağıdaki gibi görünmeli. Sizde bu şekilde görünmüyor ise aşağıdaki script bölümünü eklediğinizden emin olun.
“scripts”: {“start”: “grunt serve”,“build”: “grunt build”},
SAPUI5-Runtime ve SAPUI5 Kütüphanesinin İndirilmesi
SAPUI5-Runtime, WebIDE içerisine entegre olarak gelir. Bu nedenle projenizi deploy ederken veya oluştururken otomatik olarak eklenmiş olur. Bunun için ekstra bir çaba harcamazsınız.
Biz VSCode üzerinde lokal geliştirme yapacağımız için SDK dosyasını indirip runtime’da bazı ayarlamalar yapmamız gerekiyor.
⬇️ Bu bağlantıdan güncel SAP UI5 SDK dosyalarını indirelim. ⬇️
SDK indirildiğinde, dosyaları proje klasörünün root’una çıkartabilirsiniz. Fakat birden çok proje klasörü olacak ise her seferinde bunu kopyalamak biraz saçma oluyor. Tüm projelerinizden ulaşılabilecek bir yere çıkartmanız alan kullanımı açısından daha faydalı olacaktır. Daha sonra proje içerisinde doğru dosya yolunu gösterip tek sdk klasöründen tüm projelere kaynak aktarabilirsiniz.
Grunt Kullanımı
Grunt, bir javascript task runner’dır. Türkçe’si biraz saçma olabiliyor..😅 Grunt, görevleri otomatik olarak bir sıra halinde gerçekleştirmek için kullanılan bir araçtır. Aşağıdaki işlemler için de kullanılabilir.
- Compiling,
- Unit Testing,
- Code Linting
Sırasıyla, UI5 uygulamamızı çalıştırırken bir web server oluşturulması gerekiyor. Daha sonra içerisine uygulamamızın deploy edilmesi ve sapui5 runtime ile bağlanması gibi aşamalar var. Bu noktada grunt devreye giriyor. Grunt, uygulamamızı çalıştıracak, oluşturacak ve dağıtmak için görevler tanımlamamızı sağlayacaktır.
Projemizin root’unda “Gruntfile.js” isimli bir dosya oluşturacağım. Aşağıdaki gibi görünmeli.
⬇️ Grunt.js dosyasını bu bağlantıdan indirebilirsiniz. ⬇️
Bu dosya çalıştırabileceğimiz tüm Grunt görevlerini tanımlar. Detaylı bakacak olursak;
grunt.initConfig: Çeşitli yapılandırma ayarlarının belirtildiği yerdir.
connect: Web sunucusunun yapılandırıldığı yerdir. Uygulamanın hangi port üzerinde koşacağı vs gibi bilgiler yer alır.
openui5_connect: SAPUI5-Runtime yolunu belirten önemli bir yapılandırma bölümüdür. Lütfen bu dosya yolunun doğru klasöre işaret ettiğinden emin olun.
UI5 için bir çok yapılandırma seçeneği bulunuyor. Detaylı bilgi için buraya tıklayın.
openui5_preload: Derleme işleminin önyükleme adımını yapılandırır.
Uygulamamızı Çalıştıralım
Bu aşamada, klasör yapısı aşağıdaki gibi görünmelidir.
Şimdi projemizi çalıştıralım. Herşey yolunda giderse 8080 portuna deploy edilecek.
VSCode terminal panelinde aşağıdaki komutu çalıştırıyorum.
npm run startUygulama başarılı bir şekilde http://localhost:8080 adresi üzerinde çalışır duruma geldi.
Sonuç
Artık çalıştırılabilir bir uygulamamız var. Bu uygulama üzerinden yeni uygulamalar türetip hızlı biçimde ilerleyebilirsiniz.
Bir önceki alternatifde de olduğu gibi, yaptığınız değişiklikler browser ekranında anlık olarak güncellenecektir. Buradaki en iyi nokta şu, lokal ortamda bu yöntemlerle çalışmak, WebIDE ile çalışmanızdan çok daha hızlı olacaktır.
Lokal ortamda SAPUI5 uygulamaları geliştirmek için herhangi bir IDE veya editörü kullanabilirsiniz. Kullandığımız yöntemler hemen hemen tüm geliştirme ortamlarına ve araçlarına uygulanabilir. Fakat benim tercihim Visual Studio Code olur. Denemenizi tavsiye ediyorum.
Herkese iyi çalışmalar dilerim.
