SAP UI5 Flexible Programming Model – Part 2

Merhaba Lits Consulting takipçileri! Bu yazıda, SAP UI5 Flexible Programming Model kullanarak örnek uygulamamızı oluşturmak için gerekli ortamları kuracağız. Adım adım rehberimizle, FPM’nin gücünü keşfedecek ve nasıl en iyi şekilde kullanabileceğinizi öğreneceksiniz.

Geliştirmemizi bu örnekte SAP Business Application Studio ile yapacağız. Dilerseniz geliştirmenizi aynı adımları ilgili SAP eklentileri ile Visual Studio Code’da da yaparak tamamlayabilirsiniz.

Projenin ilk halini buradan açıp şekilde gösterildiği gibi URL’i kopyalıyoruz.

github,sap,ui5,flex,programming

Business Application Studio’da “Depoyu Klonla” dedikten sonra linki 2. adımdaki gibi yapıştırıyoruz. Path’ini diğer projelerimizde yaptığımız gibi “/home/user/projects/” olarak seçip ilerliyoruz. Açılır pencerede de “Klonu Aç” butonuna basıyoruz.

sap,business,application,studio,clone,repo,repository


Karşımıza GitHub’dan klonladığımız dosyalar gelince bash terminalini ( Ctrl + Shift + ” ) kısayoluyla açıyoruz. “Dependency”leri yüklemek için ve programı çalıştırabilmek için şekildeki gibi “npm install” komutunu terminale yazıyoruz.

batch,terminal,npm,install,fiori,ui5


Oluşan “Data Model”ı görmek için “package.json” dosyasına girip “start: cds run” satırına gelip “Run Script” ya da “Betiği Çalıştır” komutunu seçiyoruz.

sap,package,json,run,script


“Run Script” komutunu seçtikten sonra terminale otomatik olarak “npm run start” komutunun gelmesini sağladığımızı ve 1. adımdaki gibi “localhost”unuzun aktifleşme sürecini göreceksiniz. 2. adımda yeni bir sekmede yerel sunucunuzu çalıştırabilirsiniz.

batch,powershell,terminal,localhost,4004


Böylece burada “metadata” ve oluşmuş “data model”lerini görebilirsiniz. Fakat henüz bir Fiori ekranı oluşmadı.

sap,ui5,fiori,metadata,cds,server,web,application


Eğer Travel “Fiori preview” komutuna basıp açılan Fiori ekranında filtrelere gözatarsanız ilgili filtreleri tanımladığımızı göreceksiniz.

Bu yazının devamında, SAP UI5 Flexible Programming Model kullanarak bir örnek uygulama geliştireceğiz ve “Filter Building Block” opsiyonunu kullanacağız.

Projenin İlk Hali: https://github.com/aalpkilic/ui5-travel-fpm-init
Projenin Son Hali: https://github.com/aalpkilic/ui5-travel-fpm

Kullanılan teknolojiler sürekli değiştiği ve geliştiği için bu yazıyı okuduğunuz tarihe göre değişen hatalar alabilirsiniz. Yorum kısmında görüşlerinizi, önerilerinizi ve sorularınızı bekliyor olacağız!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir