เมื่ออยู่ในหน้าจอ Page Designer สำหรับออกแบบเว็บเพจ ผู้ใช้สามารถทำตามขั้นตอนด้านล่างเพื่อสร้างแอพมือถืออย่างง่าย
ระบบเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าจอการตั้งค่าเพจซึ่งคุณสามารถเพิ่มเนื้อหาลงในเพจของคุณได้ สำหรับการเพิ่มเนื้อหา ผู้ใช้สามารถลากและวางองค์ประกอบ UI ที่ต้องการใต้แผงส่วนประกอบลงในหน้าจอการออกแบบ
ตอนนี้, เพื่อสร้างตัวอย่าง "Hello World" หน้ามือถือ, คลิกที่ไอคอนเพื่อ อัปโหลดภาพไปยังแอพและเรียกดูรูปภาพที่อัปโหลด ลากรูปภาพจากแผงรูปภาพทางด้านซ้ายแล้ววางที่ด้านบนของคอนเทนเนอร์ (Container)
Symbol
Description
ที่จับลาก(Drag Handle) ใช้สิ่งนี้เพื่อลากข้อความไปยังแถวอื่น
เลือกคอนเทนเนอร์(Select Container) ใช้ตัวเลือกนี้เพื่อเลือก Div., Col., Row หรือ full containe
ทำซ้ำ(Duplicate) คัดลอกและทำซ้ำองค์ประกอบที่เลือก
แก้ไข(Edit) ใช้ตัวเลือกนี้เพื่อเขียน แก้ไข หรือเปลี่ยนแบบอักษรเนื้อหาหรือสไตล์ของกล่องข้อความนี้
เชื่อมต่อข้อมูล(Connect to Data) เชื่อมต่อกับข้อมูลจาก Microflow หรือร้านค้าหรือฐานข้อมูลในเครื่องเพื่อสร้างเนื้อหาแบบไดนามิก
การแปล(Translation) รองรับหลายภาษาในหน้าเพจ
การลบ(Delete)
ลากและวาง component Heading คลิกที่ component Heading และเลือก ในแถบเมนูที่ด้านบนของ Heading เพื่อแก้ไข
เปลี่ยนชื่อข้อความเริ่มต้น "Heading" เป็น "Hello World" โดยใช้ไอคอนแก้ไข
บันทึกการเปลี่ยนแปลงไปยังหน้าของคุณโดยคลิกที่ไอคอนบันทึก ที่แถบด้านบน
ตั้งแต่เวอร์ชัน 4.0.19.10 ขึ้นไป ผู้ใช้สามารถสร้างแอพพลิเคชันได้จาก AppSpace เท่านั้น จากนั้นผู้ใช้สามารถสร้างหน้าภายในแอพพลิเคชัน เมื่อสร้างเพจแล้ว AppSpace จะนำคุณไปยัง Page Designer เพื่อออกแบบเพจ
ตอนนี้ ให้คุณดูวิธีสร้างหน้ามือถือ Hello World อย่างง่าย
วิธีสร้างเพจมือถือจาก AppSpace หากต้องการสร้างแอพพลิเคชันบน AppSpace ให้เข้าสู่ระบบ AppSpace ก่อน จากนั้นคลิกที่ปุ่มสร้างแอพใหม่
เมื่อสร้างแอพพลิเคชัน ผู้ใช้สามารถสร้างเป็นเว็บแอพพลิเคชัน (Web App) หรือแอพมือถือ (Mobile App) เลือกแพลตฟอร์มมือถือสำหรับแอพพลิเคชันของคุณและป้อนรายละเอียด
คลิกปุ่ม Create เพื่อสร้างแอพพลิเคชัน
เมื่อสถานะแสดง 100% แสดงว่าแอพพลิเคชันของคุณถูกสร้างขึ้นแล้ว คลิกที่ปุ่ม Done เพื่อปิดหน้าต่างสถานะ
คลิกที่ไอคอนแอพพลิเคชันเพื่อเปิดแอพของคุณ ระบบจะเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าส่วนประกอบ
คลิกไอคอน Create Pages
ป้อนรายละเอียดเพจและคลิก Start Design เพื่อเปลี่ยนเส้นทางไปยัง Page Designe
แอพแสดงตัวอย่างบนเบราว์เซอร์ (Preview App on browser) เมื่อคุณสร้างเพจใน Page Designer เสร็จแล้ว คุณสามารถดูตัวอย่างเพจของคุณโดยใช้ยูทิลิตี้ build-in ที่จัดทำโดย Page Designer ที่เรียกว่า PlayMe สำหรับการคลิกที่ปุ่ม PlayMe ที่ด้านบนขวาของหน้าจอการตั้งค่า
นอกจากนี้ยังมีให้ในหน้าจอแอพพลิเคชันใน PageDesigner
เมื่อคุณคลิกที่ PlayMe ให้รอสักครู่เพื่อให้แอพพลิเคชันมือถือของคุณสร้างหน้าทั้งหมดภายในแอพพลิเคชันของคุณ เมื่อเสร็จสิ้น ข้อความ "Build successful" จะแสดงขึ้นโดยเชื่อมโยงกับ URL ซึ่งแสดงว่าสร้างสำเร็จ ขณะนี้ผู้ใช้สามารถดูตัวอย่างแอพได้ที่ URL ที่ให้มาพร้อมกับข้อความ
หากต้องการดูตัวอย่างหน้านี้บนเบราว์เซอร์ในแท็บใหม่หรือหน้าต่างใหม่ ผู้ใช้เพียงแค่เข้าถึง URL: http://(IP Application server)/(Namespace) ในตัวอย่างตัวอย่างนี้ Namespace คือ 'com.team'
ดูตัวอย่างแอพบนมือถือโดยใช้ PlayMe (Preview App on mobile using PlayMe) ผู้ใช้ยังสามารถดาวน์โหลด PlayMe App จาก Google Play
เมื่อติดตั้ง Play Me บนมือถือแล้ว คุณสามารถดูตัวอย่างแอพ ONEWEB ที่คุณสร้างโดยการสแกน QR Code บนแอพ Play Me สำหรับการสร้าง QR Code สำหรับแอพพลิเคชันของคุณ ให้ไปที่แท็บ Deployment ในตัวออกแบบเพจของคุณ
ระบบจะแสดง QR Code เพื่อสแกนแอพพลิเคชัน
ตอนนี้คุณสามารถดูตัวอย่างแอพบนโทรศัพท์มือถือได้แล้ว
สร้างไฟล์ zip ของแอพพลิเคชันของคุณหากยังไม่มี หากต้องการสร้างไฟล์ zip ให้คลิกที่ปุ่ม Build Zip . เมื่อสร้างไฟล์ zip บนเซิร์ฟเวอร์แล้ว ผู้ใช้สามารถดูเวอร์ชันและสถานะของ build ได้ คลิก เพื่อขยายตัวเลือกเมนูและเลือก Play Me
จากเวอร์ชัน 4.0.0.19 ONEWEB Page Designer สามารถสร้างแอพพลิเคชันมือถือเป็น APK สำหรับ androidg หรือ IPA สำหรับ iOS และส่งไปยังร้านค้า หน้าจอสำหรับหน้า CI/CD มีอยู่ในส่วนการปรับใช้ของแอพมือถือ ผู้ใช้สามารถเลือกได้ทั้ง Android หรือ iOS ส่วนต่อไปนี้จะอธิบายขั้นตอนทีละขั้นตอนในการอัปโหลดแอพบนอุปกรณ์เคลื่อนที่ของคุณไปยังร้านค้าสำหรับทั้ง Android และ Ios
หมายเหตุ: CI ย่อมาจาก Continuous Integration และ CD ย่อมาจาก Continuous Deployment
วิธีสร้างแอพ Android สำหรับ APK ที่ไม่ได้ลงชื่อคุณสามารถเริ่มสร้างได้ทันที แต่สำหรับ Signed APK คุณต้องเพิ่มรายละเอียดต่อไปนี้เพื่อเริ่มการสร้าง
Keystore file “.jks” Alias name Keystore password Password.
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการลงนามแอพ โปรดติดตาม ลิ้งค์นี้
APK ที่ลงนามแล้วสามารถปล่อยให้ทดสอบภายในบน Google Play Console เพื่อที่คุณต้องทำดังต่อไปนี้
สร้างบัญชี Google Developer
สร้างบัญชีบริการสำหรับโครงการ "Google Play Android Developer" คุณจะได้รับอีเมลและคีย์ส่วนตัวในรูปแบบ JSON
เพิ่มผู้ใช้จากอีเมลที่คุณได้รับในขั้นตอนที่ 2 และให้สิทธิ์สำหรับแอพ
อัปโหลดคีย์ส่วนตัว (JSON) ไปยัง Page Designer
วิธีสร้างแอพ iOS
ในการสร้างแอพ iOS คุณต้องมีบัญชี Apple Developer โปรดทำตามขั้นตอนด้านล่างเมื่อคุณมีบัญชีนักพัฒนา Apple ที่ถูกต้อง
ส่งออกไฟล์ Certificate ในรูปแบบ ".p12" จากโปรแกรม Keychain Access ใน Mac OS หรือใช้ Certificate Signing Request (CSR) ของ Page Designer เพื่อสร้าง Certificate (.cer) สำหรับข้อมูลเพิ่มเติมเกี่ยวกับใบรับรอง iOS โปรดติดตาม ลิ้งค์นี้
สร้างโปรไฟล์การจัดเตรียมในบัญชี Apple Developer
สร้างโปรไฟล์การจัดเตรียมในบัญชี Apple Developer
ลงชื่อเข้าใช้บัญชี Apple Developer ของคุณและเลือกใบรับรอง ตัวระบุ และโปรไฟล์
เลือกประเภทโปรไฟล์ที่ต้องการและกดดำเนินการต่อ
เลือก App ID แล้วกด Continue
เลือกใบรับรอง (ใบรับรองที่ใช้โดยโปรแกรม) ที่คุณต้องการรวมในโพรไฟล์การตั้งค่านี้ แล้วคลิก
ดำเนินการต่อ
เลือกอุปกรณ์ที่คุณต้องการรวมอยู่ในโปรไฟล์ ใบรับรองเป็นคู่กุญแจสาธารณะ / ส่วนตัวเพื่อระบุ
บุคคลที่พัฒนาแอพพลิเคชัน
สร้างชื่อสำหรับโปรไฟล์ของคุณและคลิก "สร้าง"
อัปโหลดใบรับรองและโปรไฟล์การจัดสรรบนแอพใน Page Designer
ตอนนี้ คุณสามารถสร้าง iOS สำหรับการพัฒนา/การเผยแพร่
IPA ที่สร้างขึ้นสำหรับการจัดจำหน่ายสามารถปล่อยให้ทดสอบบน App Store
ป้อน Apple ID, App ID และรหัสผ่านเฉพาะแอพพลิเคชันเพื่อเชื่อมต่อกับ App Store
เมื่อคุณป้อนรายละเอียดแล้ว คุณสามารถกดปุ่ม Build Android ใต้ส่วน Release เพื่อสร้าง APK ที่ลงนามแล้ว
กดปุ่มการดำเนินการ ของ build ที่ลงนามแล้วเลือก Play Store
กดปุ่มดำเนินการ บน IPA ที่สร้างขึ้นสำหรับการจัดจำหน่าย และเลือก App Store
