เริ่มต้นพัฒนา SAP Fiori ง่ายๆ ด้วยตนเอง

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

  1. เลือก Development
  2. เลือก Workspace
  3. คลิกขวาที่ Workspace เลือก New
  4. เลือก 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/

ปรึกษาผู้เชี่ยวชาญ เพื่อรับคำแนะนำฟังก์ชันให้เหมาะสมกับธุรกิจของท่าน

คุณรจิตพิชญ์ (แพรว)

เบอร์ : (+66)62-859-3566

คุณวันทนีย์ (พิม)

เบอร์ : (+66)99-249-7651

คุณสุรพัฒน์ (ท็อป)

เบอร์ : (+66)86-754-5506

แชร์ :
Scroll to Top