SAP Fiori เป็น User experience (UX) แบบใหม่อันชาญฉลาดที่จะเปลี่ยนวิธีการทำงานของเราไปให้ดียิ่งขึ้น จากเดิมที่เราใช้งาน SAP ผ่าน SAP GUI ก็เปลี่ยนเป็นการทำงานผ่าน web base แทน ซึ่งเป็นกลุ่มของ Application ที่รองรับความต้องการทางธุรกิจในทุกส่วนงาน เช่น Finance, Procurement, Manufacturing และ Sales เป็นต้น
สำหรับการพัฒนา SAP Fiori ประกอบไปด้วย 2 ส่วน คือ Front-end และ Back-end ในบทความนี้ เราจะกล่าวถึงในส่วนของ Front-end โดยใช้ SAPUI5 ในการพัฒนา ซึ่งก่อนจะเริ่มต้นได้นั้น เราจะต้องมี Tool สำหรับใช้ในการพัฒนาก่อน โดยบทความนี้จะแนะนำเครื่องมือที่ใช้พัฒนา SAP Fiori แบบง่ายๆ ที่เรียกว่า “SAP Web IDE Personal Edition”
SAP Web IDE Personal Edition เป็นเครื่องมือพัฒนาแอปพลิเคชัน Fiori ผ่านเว็บบราวเซอร์ สามารถพัฒนาแบบ Offline ได้เนื่องจากตัวโปรแกรมจะถูกติดตั้งบนเครื่องคอมพิวเตอร์ของผู้ใช้งาน สำหรับวิธีการติดตั้ง SAP Web IDE Personal Edition ไม่ยุ่งยากอย่างที่คิดสามารถทำตามวิธีด้านล่างนี้
วิธีการติดตั้ง SAP Web IDE Personal Edition
ขั้นตอนที่ 1 ก่อนที่จะติดตั้ง SAP Web IDE Personal Edition จะต้งทำการตรวจสอบเวอร์ชั่น JDK ว่าเป็น Version 1.8 แล้วหรือไม่ วิธีการตรวจสอบโดยใช้ Command Prompt และพิมพ์คำสั่ง java -version
หากยังไม่ได้ติดตั้ง JDK สามารถดาวน์โหลดและติดตั้งได้ตามลิงค์นี้ Java Downloads | Oracle
ขั้นตอนที่ 2 สร้าง Folder สำหรับติดตั้ง Web IDE
ตัวอย่างภาพหน้า Folder สำหรับติดตั้ง Web IDE
ขั้นตอนที่ 3 ดาวน์โหลด SAP Web IDE Personal Edition ตามลิงค์นี้ SAP Development Tools
ตัวอย่างภาพหน้าดาวน์โหลด SAP Web IDE Personal Edition
ขั้นตอนที่ 4 หลังจากดาวน์โหลดเรียบร้อยแล้ว จะได้ไฟล์เป็นนามสกุล.zip ให้ทำการแตกไฟล์และ Copy ไปยัง Folder ที่สร้างไว้ในขั้นตอนที่ 2 (ตัวอย่างขั้นตอนที่จะเป็น Path C:\SAPWEBIDE)
ขั้นตอนที่ 5 หลังจากแตกไฟล์เรียบร้อยแล้ว จะมี Folder ที่ชื่อว่า eclipse แสดงขึ้นมาและภายใน Folder จะมีไฟล์ที่ชื่อว่า orion.exe ให้คลิกขวาที่ไฟล์นี้ เลือก Run as Administrator จะแสดงหน้าจอ Command Prompt ขึ้นมา (วิธีนี้ต้องทำทุกครั้งที่ใช้งาน SAP Web IDE)
ตัวอย่างภาพวิธีการ Run file orion.exe
ตัวอย่างภาพหน้าจอ Command Prompt หลังจาก Run file orion.exe
ขั้นตอนที่ 6 เปิดเว็บบราวเซอร์ ใส่ URL http://localhost:8080/webide/index.html จะแสดงหน้าจอตามภาพด้านล่าง
ตัวอย่างภาพหน้าจอ Origin
ก่อนจะเริ่มใช้ SAP web IDE ให้เลือก Create a new account เพื่อลงทะเบียนใช้งาน และเมื่อลงทะเบียนเรียบร้อยแล้ว ให้กดปุ่มเพื่อ Log in เข้าสู่ระบบ
ขั้นตอนที่ 7 หลังจาก Log in เข้าสู่ระบบ หาก Username และ Password ถูกต้อง จะแสดงหน้าจอของ SAP Web IDE
ตัวอย่างภาพหน้าจอ SAP Web IDE Personal Edition
วิธีการสร้าง SAPUI5 Application
ขั้นตอนที่ 1 สร้าง SAPUI5 Application จาก Project template
- เลือก Development
- เลือก Workspace
- คลิกขวาที่ Workspace เลือก New
- เลือก Project from Template
ตัวอย่างภาพหน้าจอวิธีการสร้าง SAPUI5 Project
ขั้นตอนที่ 2 จะแสดง Template ต่างๆ สามารถเลือกได้ตามความต้องการ สำหรับตัวอย่างนี้ ให้เลือกเป็น SAPUI5 application และกดปุ่ม Next
ตัวอย่างภาพหน้าจอวิธีการสร้าง SAPUI5 Project
ขั้นตอนที่ 3 ใส่ชื่อ Project Name และ Namespace และกดปุ่ม Next
ตัวอย่างภาพหน้าจอวิธีการสร้าง SAPUI5 Project
ขั้นตอนที่ 4 เลือก ViewType เป็น .xml และใส่ชื่อ ViewName ในตัวอย่างนี้ จะใส่ชื่อว่า View1 หลังจากนั้น กดปุ่ม Next
ตัวอย่างภาพหน้าจอวิธีการสร้าง SAPUI5 Project
ขั้นตอนที่ 5 จะแสดง Folder ชื่อ Project ที่สร้างจากขั้นตอนก่อนหน้าขึ้นมา เลือก View และทดสอบเพิ่มข้อความ “Hello World” ภายใต้ Content ตามภาพ และ Save (Ctrl + S)
ตัวอย่างภาพหน้าจอวิธีการสร้าง SAPUI5 Project
ขั้นตอนที่ 6 ทดสอบ Run Application โดยเลือกที่ชื่อโปรเจค และกดปุ่ม Run
ตัวอย่างภาพหน้าจอวิธีการสร้าง SAPUI5 Project
ขั้นตอนที่ 7 จะแสดงข้อความ “Hello World” แสดงที่ Web Browser
ตัวอย่างภาพหน้าจอวิธีการสร้าง SAPUI5 Project
หลังจากติดตั้งเสร็จเรียบร้อยแล้ว สามารถใช้โปรแกรมเพื่อพัฒนา SAP Fiori ได้ทันที สำหรับบทความนี้ หวังว่าจะเป็นประโยชน์ สำหรับท่านสนใจพัฒนา Application SAP Fiori และกำลังมองหา Tools ที่ใช้ในการพัฒนา ซึ่งเราจะได้เรียนรู้วิธีการตั้งค่า SAP Web IDE Personal Edition และวิธีการสร้าง Application SAP Fiori สำหรับผู้ที่ต้องการเริ่มต้นพัฒนา SAP Fiori อย่างแท้จริง
ที่มา: https://help.sap.com/viewer/825270ffffe74d9f988a0f0066ad59f0/CF/en-US/fb956be1440745f89f1445e605096af8.html
https://tools.hana.ondemand.com/#sapui5
https://www.michaelmanagement.com/blog/sap/how-to-set-up-sap-webide-personal-edition
https://blogs.sap.com/2020/07/17/sap-web-ide-personal-edition-setup-and-create-sapui5-application-for-beginner/