2 min read

Setup VS Code untuk Development SAP Fiori

Setup VS Code untuk Development SAP Fiori
Photo by Nangialai Stoman / Unsplash

Jika kalian seorang developer SAP Fiori, pasti sudah familiar dengan SAP Business Application Studio (BAS) sebagai IDE utama untuk membangun aplikasi. Namun, tidak semua orang ingin selalu bergantung pada cloud environment. Ada kalanya kita membutuhkan fleksibilitas untuk bekerja secara lokal, baik untuk kecepatan, eksperimen, maupun integrasi dengan tool lain di laptop kita.

Nah, kabar baiknya: SAP Fiori dapat dikembangkan secara lokal menggunakan Visual Studio Code (VS Code). Dengan sedikit konfigurasi, kita bisa menyiapkan development environment sendiri di laptop, lengkap dengan extension dan tooling yang mirip dengan BAS.

Pada artikel ini, kita akan membahas langkah demi langkah cara melakukan setup Visual Studio Code untuk Development SAP Fiori.

Requirements

  • VS Code (Link)
  • SAP Fiori Tools - Extension Pack (Link)
  • Node.JS + NPM (Link)
  • Cloud Foundry CLI (Link)
  • Git (Link)

1. Install VS Code

VS Code akan menjadi IDE utama untuk melakukan development aplikasi Fiori.
Download dan install Visual Studio Code melalui link berikut.

2. Install Node.JS + NPM

Node.js digunakan untuk menjalankan aplikasi Fiori secara lokal, sedangkan NPM (Node Package Manager) berfungsi untuk menambahkan third-party library.
Download dan install Node.JS + NPM melalui link berikut.
Sesuaikan dengan Operating System yang kalian gunakan. Kemudian copy installation script ke Terminal.

Instalasi Node.JS + NPM untuk Windows

3. Install Cloud Foundry CLI

Cloud Foundry CLI digunakan untuk melakukan deployment aplikasi Fiori ke Cloud Foundry atau ABAP Environment.
Download dan install Cloud Foundry CLI melalui link berikut.

Setelah berhasil menginstal Cloud Foundry CLI, terdapat plugins yang perlu diinstal.

cf install-plugin -r CF-Community Targets
cf install-plugin -r CF-Community copyenv
cf install-plugin -r CF-Community html5-plugin
cf install-plugin -r CF-Community multiapps
cf install-plugin -r CF-Community ServiceInfo

Jika repo CF-Community belum ada, maka repo bisa ditambahkan dengan perintah berikut.

cf add-plugin-repo CF-Community https://plugins.cloudfoundry.org

4. Install VS Code Extension

Agar pengalaman development di VS Code mirip dengan BAS, kita perlu menambahkan SAP Fiori Tools – Extension Pack.
Extension dapat diinstal melalui link berikut, atau dengan mencarinya di VS Code dengan keyword:

SAPSE.sap-ux-fiori-tools-extension-pack
VS Code Extension

5. Install Git

Git pada SAP Fiori digunakan untuk mengatur source code, memfasilitasi kerja tim, menjaga kualitas aplikasi, dan mendukung otomasi deployment. Download dan install Git melalui link berikut.