การสร้างแอป

ในการสร้างแอปพลิเคชัน คุณควรสร้างเลย์เอาต์ เพจ เติมเนื้อหา และตั้งค่าการโต้ตอบของเว็บแอป

เค้าโครง

ก่อนหน้านี้ เราได้แนะนำ แนวคิดของเลย์เอาต์ ในการเริ่มต้นการสร้างเลย์เอาต์ คุณต้องร่างโครงสร้างแอปพลิเคชันของคุณก่อนและระบุเทมเพลตเพจที่จะใช้

หากคุณพลาดบางสิ่งบางอย่างไม่ต้องกังวล คุณสามารถเพิ่มรายการโครงร่างได้ตามต้องการ

รายการเค้าโครง

รายการเค้าโครงจะแสดงเค้าโครงทั้งหมดของแอปพลิเคชันเว็บของคุณ ที่นี่ คุณสามารถดำเนินการต่างๆ และจัดการเค้าโครงได้

หากต้องการเข้าถึง รายการเค้าโครง ให้เลือกแท็บที่ 4 บนแถบเครื่องมือด้านซ้ายในแท็บ UI Designer หรือใช้ปุ่มลัด 4 เค้าโครงแอปพลิเคชันทั้งหมดของคุณจะแสดงที่นี่

ทุกแอปพลิเคชันจะต้องมีเค้าโครงอย่างน้อยหนึ่งรูปแบบ เมื่อคุณสร้างแอปพลิเคชันใหม่ เค้าโครงหนึ่งหรือหลายเค้าโครงจะถูกสร้างขึ้นโดยอัตโนมัติ ขึ้นอยู่กับเทมเพลตแอปพลิเคชันที่เลือก หนึ่งในนั้นถูกทำเครื่องหมายเป็น **ค่าเริ่มต้น**

ในรายการโครงร่าง คุณสามารถดำเนินการต่อไปนี้กับโครงร่าง:

• เลือก,
• เพิ่มใหม่,
• เปลี่ยนชื่อ
• ทำซ้ำ,
• ลบ.

เค้าโครงเริ่มต้น

โครงร่างเริ่มต้นจะถูกเลือกโดยอัตโนมัติจากรายการโครงร่างเมื่อสร้างเพจใหม่ อย่างไรก็ตาม สามารถแทนที่ด้วยเค้าโครงอื่นได้หากจำเป็น

การใช้เค้าโครงเริ่มต้นจะเพิ่มความเร็วในการพัฒนา ดังนั้นเราขอแนะนำให้ใช้เค้าโครงที่ใช้บ่อยที่สุดเป็นค่าเริ่มต้น โปรดทราบว่าสามารถตั้งค่าเค้าโครงเป็นค่าเริ่มต้นได้ครั้งละหนึ่งเค้าโครงเท่านั้น การแทนที่โครงร่างเริ่มต้นจะไม่ส่งผลต่อเพจที่มีอยู่ เว้นแต่โครงร่างเริ่มต้นจะถูกลบออก

โครงร่างเริ่มต้นจะถูกทำเครื่องหมายด้วยไอคอนรูปดาวสีน้ำเงินในรายการโครงร่าง

สร้างเค้าโครงใหม่

คุณสามารถออกแบบเค้าโครงที่แตกต่างกันสำหรับประเภทเพจที่แตกต่างกันได้ ทำตามขั้นตอนเหล่านี้เพื่อสร้างโครงร่างใหม่:

• กด CTRL/⌘+L หรือเปิดรายการเค้าโครง (ทางลัด 4 ) จากแถบเครื่องมือด้านซ้ายของ UI Designer และคลิก ปุ่มบวก บนส่วนหัวของแผง
• ระบุ ชื่อเค้าโครง ในโมดอลที่ปรากฏขึ้น เราขอแนะนำให้ใช้ชื่อที่อ่านได้ซึ่งสะท้อนถึงโครงสร้างของเค้าโครงเพื่อการระบุอย่างรวดเร็วเมื่อกำหนดเค้าโครงให้กับเพจ
• เลือกเทมเพลตเค้าโครง:
  • ฐาน: เทมเพลตเปล่าที่ไม่มีองค์ประกอบเพิ่มเติม เหมาะสำหรับหน้าที่ไม่มีการนำทาง เช่น หน้าการตรวจสอบสิทธิ์หรือหน้าแสดงข้อผิดพลาด
  • แถบด้านข้างซ้าย: เทมเพลตพร้อมเมนูแถบด้านข้าง เหมาะสำหรับแผงผู้ดูแลระบบ, CMS, ERP ฯลฯ
  • เมนูด้านบน: เทมเพลตพร้อมเมนูด้านบน เหมาะสำหรับเว็บไซต์หรือหน้า Landing Page
• เปิดใช้งานการตั้งค่าเค้าโครงเริ่มต้น หากเค้าโครงนี้เป็นค่าเริ่มต้น
• คลิก ปุ่มสร้าง

คุณสามารถสร้างเลย์เอาต์ได้ไม่จำกัดจำนวน

การเปลี่ยนชื่อเค้าโครง

หากต้องการเปลี่ยนชื่อเค้าโครง ให้ดับเบิลคลิกที่ชื่อเค้าโครง ทำการเปลี่ยนแปลงที่จำเป็น แล้วกด Enter เพื่อบันทึก หรือกด Esc เพื่อย้อนกลับการเปลี่ยนแปลง

การทำซ้ำเค้าโครง

หากต้องการทำซ้ำเลย์เอาต์ พร้อมด้วยเนื้อหาและการตั้งค่า ให้ทำดังนี้

1. วางเมาส์เหนือเค้าโครงที่คุณต้องการทำซ้ำ
2. คลิกไอคอนทำซ้ำ

เค้าโครงที่ซ้ำกันจะปรากฏในรายการโดยอัตโนมัติโดยมีดัชนีเพิ่มอยู่ในชื่อ หากคุณทำซ้ำชุดเค้าโครงเป็นค่าเริ่มต้น เค้าโครงต้นฉบับจะไม่ถูกแทนที่โดยเค้าโครงที่สร้างขึ้นใหม่

กำลังลบเค้าโครง

หากต้องการลบเค้าโครง:

1. วางเมาส์เหนือเค้าโครงที่คุณต้องการลบ
2. คลิกที่ไอคอนถังขยะ
3. ยืนยันการลบ.

หากต้องการลบเค้าโครงที่เชื่อมโยงกับเพจใดๆ คุณควรกำหนดเค้าโครงสำหรับหน้าที่เชื่อมโยงใดๆ ใหม่ก่อนที่จะลบ ซึ่งสามารถทำได้ผ่านโมดอลการยืนยันหรือด้วยตนเองสำหรับแต่ละหน้า

หากต้องการลบเค้าโครงเริ่มต้น คุณควรตั้งค่าเค้าโครงอื่นเป็นค่าเริ่มต้น

❗️ สิ่งสำคัญ: คุณไม่สามารถเลิกทำการลบเลย์เอาต์ได้

การตั้งค่าเค้าโครง

คลิกเค้าโครงเป้าหมายในรายการเค้าโครงเพื่อเข้าถึงการตั้งค่าจากแถบด้านข้างการตั้งค่าด้านซ้าย

จากส่วนหัวของแถบด้านข้างการตั้งค่า คุณสามารถเปลี่ยนชื่อเค้าโครงที่เลือกได้โดยคลิกที่ชื่อหรือลบออก

คุณสามารถตั้งค่าเค้าโครงที่เลือกเป็นค่าเริ่มต้น และดูหน้าที่เชื่อมโยงทั้งหมดได้ที่นี่ หากต้องการแก้ไขเพจที่เชื่อมโยง ให้คลิกที่เพจนั้นในรายการ

นอกจากนี้ คุณสามารถสร้างตรรกะทางธุรกิจสำหรับโครงร่างได้

เค้าโครงตรรกะทางธุรกิจ

ในแท็บตรรกะทางธุรกิจ เลือกทริกเกอร์เพื่อตั้งค่าการดำเนินการ สิ่งนี้จะเปิดตัวแก้ไขกระบวนการทางธุรกิจ โดยเน้นที่ทริกเกอร์ที่เลือก

ที่นี่ คุณสามารถสร้างโฟลว์การดำเนินการสำหรับทริกเกอร์อย่างน้อย 1 รายการ เช่น การใช้การนำทาง การแก้ไขคุณสมบัติตามเงื่อนไข การสลับการมองเห็น การส่งข้อมูล และอื่นๆ โปรดดูคำแนะนำของเราเกี่ยวกับการสร้างกระบวนการทางธุรกิจสำหรับข้อมูลเพิ่มเติม

🔔 เพื่อประสิทธิภาพสูงสุดของแอปพลิเคชัน ให้สร้างกระบวนการทางธุรกิจที่ซับซ้อนที่ฝั่งแบ็กเอนด์

การแก้ไขเค้าโครง

โครงร่างซึ่งเป็นส่วนประกอบส่วนกลางและเทมเพลตเพจ จะใช้การแก้ไขทั้งหมดกับเพจที่เชื่อมโยงทั้งหมดโดยอัตโนมัติ

หากต้องการแก้ไขเค้าโครง ให้เลือกรายการเป้าหมายในรายการเค้าโครง และเพิ่มส่วนประกอบที่จำเป็นจากแผงองค์ประกอบ UI โดยการลากและวางลงในพื้นที่แคนวาส

ขณะแก้ไขเค้าโครง โปรดจำไว้ว่าเทมเพลตนั้นมีส่วนประกอบของคอนเทนเนอร์เพจที่ไม่สามารถเปลี่ยนแปลงได้ สิ่งนี้จะกำหนดตำแหน่งของเนื้อหาเพจของคุณภายในเทมเพลต คอนเทนเนอร์เพจถูกเน้นด้วยสีเขียวและไม่สามารถมีส่วนประกอบภายในได้ขณะอยู่ในโหมดแก้ไขเค้าโครง เนื้อหาถูกกำหนดโดยตรงบนเพจ และขนาดคอนเทนเนอร์ของเพจจะถูกกำหนดโดยองค์ประกอบหลัก

หน้า

หลังจากสร้างเค้าโครงที่จำเป็นแล้ว เวลาที่ดีที่สุดในการเริ่มสร้างเพจแอปพลิเคชันเว็บ หลังจากสร้างเค้าโครงที่จำเป็นแล้ว เวลาที่ดีที่สุดในการเริ่มสร้างเพจแอปพลิเคชันเว็บ เว็บแอปพลิเคชันแต่ละหน้ามีเนื้อหาที่แสดงบนเว็บเบราว์เซอร์ของผู้ใช้ตาม URL เป้าหมาย

ต้นไม้หน้า

Pages Tree แสดงโครงสร้างของเว็บไซต์ของคุณ - หน้าเว็บไซต์ของคุณและโฟลเดอร์ที่เก็บหน้าเหล่านั้น ที่นี่ คุณสามารถดำเนินการต่างๆ และจัดระเบียบเพจและโฟลเดอร์ได้

หากต้องการเปิดแผนผังเพจ ให้เลือกแท็บที่ 3 จากแถบเครื่องมือด้านซ้ายของ UI Designer หรือกด 3 ที่นี่จะแสดงหน้าแอปพลิเคชันทั้งหมดของคุณ

ทุกแอปพลิเคชันจะต้องมีอย่างน้อยหนึ่งหน้า เมื่อคุณสร้างแอปพลิเคชันใหม่ จะมีการสร้างเพจหนึ่งหรือหลายเพจแล้ว ขึ้นอยู่กับเทมเพลตแอปพลิเคชันที่เลือก

คุณสามารถดำเนินการต่อไปนี้บนเพจและโฟลเดอร์:

• เลือก,
• เพิ่มหน้าหรือโฟลเดอร์ใหม่
• เปลี่ยนชื่อ
• ย้ายหน้าและโฟลเดอร์ไปยัง/ออกโฟลเดอร์
• ทำซ้ำ,
• ลบ.

หน้าดัชนี

หน้าดัชนีคือหน้าแรกของใบสมัครของคุณ เมื่อแอปพลิเคชันของคุณทำงาน หน้านี้จะถูกแสดงผลก่อนหากคุณไม่ได้สร้างการเปลี่ยนเส้นทางใดๆ

หน้าดัชนีทำเครื่องหมายไอคอนบ้านในแผนผังหน้า และไม่สามารถสลับไปยังหน้าอื่นได้ ตามค่าเริ่มต้น เพจนี้จะเชื่อมโยงกับโครงร่างเริ่มต้นที่สร้างขึ้นโดยอัตโนมัติ แต่คุณสามารถเปลี่ยนได้ในการตั้งค่าเพจ

สร้างเพจใหม่

หากต้องการเพิ่มเพจลงในเว็บแอปพลิเคชันของคุณ:

1. กด CTRL/⌘+P หรือเปิดแผนผังเพจ (ทางลัด 3 ) จากแถบเครื่องมือด้านซ้ายของ UI Designer และคลิก ปุ่มบวก บนส่วนหัวของแผง
2. ระบุ URL ของเพจ ในรูปแบบโมดอลที่ปรากฏขึ้น
3. เลือก โฟลเดอร์หลัก สำหรับเพจ หรือปล่อยฟิลด์ว่างไว้เพื่อวางเพจไว้ที่ราก
4. เลือก เค้าโครงหน้า
5. คลิกปุ่ม สร้าง

💡 หากต้องการสร้างเส้นทางแบบซ้อนโดยไม่ต้องสร้างโฟลเดอร์ ให้ระบุเส้นทางแบบเต็มไปยังหน้าเป้าหมายในช่อง URL ของหน้า เช่น การตั้งค่า/โปรไฟล์ หน้าโปรไฟล์จะถูกสร้างขึ้นซ้อนกับโฟลเดอร์การตั้งค่าในกรณีนี้

คุณสามารถสร้างเพจและโฟลเดอร์สำหรับเว็บแอปพลิเคชันของคุณได้ไม่จำกัด

🔔 เว็บแอปที่สร้างด้วย AppMaster Studio จะสร้างการกำหนดเส้นทางแอปตาม URL ของเพจ ดังนั้นในรูปแบบการสร้างเพจ ให้ใช้ URL ของเพจในรูปแบบที่ถูกต้อง และเพื่อความเข้าใจที่ดีที่สุด ให้ใช้ URL ที่จำง่าย

สร้างโฟลเดอร์ใหม่

คุณสามารถสร้างโฟลเดอร์เพื่อจัดระเบียบการนำทางและสร้างเราเตอร์ที่เหมาะสมสำหรับเพจต่างๆ หากต้องการสร้างโฟลเดอร์ใหม่:

• กด CTRL/⌘+SHIFT+P หรือเปิดแผนผังเพจ (ทางลัด 3) จากแถบเครื่องมือด้านซ้ายของ UI Designer และคลิกปุ่มโฟลเดอร์บนส่วนหัวของแผง
• ระบุ ชื่อโฟลเดอร์ ในโมดอลที่ปรากฏขึ้น
• เลือก โฟลเดอร์หลัก หากจำเป็นเพื่อสร้างเราเตอร์ที่ซ้อนกัน
• คลิกปุ่ม สร้าง

องค์ประกอบ UI

อินเทอร์เฟซผู้ใช้ของแอปประกอบด้วยองค์ประกอบต่างๆ ได้แก่ ช่องป้อนข้อมูล ปุ่ม รูปภาพ ช่องทำเครื่องหมาย ปฏิทิน รูปภาพ และไอคอน ซึ่งแต่ละองค์ประกอบมีจุดประสงค์เฉพาะ

AppMaster มีโปรแกรมแก้ไขภาพแบบลากและวางที่ช่วยให้คุณสามารถเลือกและวางองค์ประกอบต่างๆ บนหน้าได้โดยตรง แทนที่จะต้องเขียนโค้ดและดูตัวอย่างได้ทันที

การเพิ่มองค์ประกอบ

หากต้องการเพิ่มองค์ประกอบลงบนผืนผ้าใบ:

1. เปิด แผงองค์ประกอบ UI พร้อมรายการองค์ประกอบ UI (ทางลัด 1 )
2. เลือกองค์ประกอบที่จำเป็นหรือใช้แถบค้นหา
3. ลากองค์ประกอบที่เลือกลงบนเพจหรือเค้าโครงแคนวาส

หากต้องการวางองค์ประกอบการลากภายในเป้าหมาย ให้วางองค์ประกอบไว้เหนือองค์ประกอบเป้าหมาย

หากต้องการเพิ่มองค์ประกอบก่อนหรือหลังองค์ประกอบ ให้ลากองค์ประกอบไว้เหนือเส้นขอบของเป้าหมายจนกระทั่งตัวคั่นปรากฏขึ้น

ตัวแบ่งขึ้นอยู่กับทิศทางของคอนเทนเนอร์หลัก:

• หากคอนเทนเนอร์หลัก Direction เป็น Vertical องค์ประกอบต่างๆ จะถูกเพิ่มจากด้านบนหรือด้านล่าง
• หากคอนเทนเนอร์หลัก Direction เป็นแนวนอน องค์ประกอบจะถูกเพิ่มจากด้านซ้ายหรือขวา

ปรับแต่งองค์ประกอบ

ทุกองค์ประกอบที่คุณเพิ่มลงบนผืนผ้าใบจะมีชุดการตั้งค่าที่ปรับแต่งได้ครอบคลุม ด้วยคุณสมบัติขององค์ประกอบ คุณสามารถจัดการทั้งลักษณะที่ปรากฏขององค์ประกอบและข้อมูลที่จะแสดงได้

ในการกำหนดค่าองค์ประกอบ:

• เลือกส่วนประกอบเป้าหมายบนผืนผ้าใบ
• ไปที่แผงลักษณะที่ปรากฏ ซึ่งเป็นแท็บแรกบนแถบด้านข้างขวา
• ภายในแผง ให้เลือกรายการการตั้งค่าเฉพาะที่คุณต้องการแก้ไข
• ป้อนค่าที่คุณต้องการในช่องที่กำหนด

Canvas ตอบสนองแบบเรียลไทม์ แสดงการปรับเปลี่ยนของคุณทันที

สำหรับคำแนะนำเพิ่มเติม ให้วางเคอร์เซอร์ของเมาส์ไว้เหนือการตั้งค่าสั้นๆ เพื่อแสดงคำแนะนำเครื่องมือ โดยให้คำอธิบายที่กระชับเกี่ยวกับฟังก์ชันของการตั้งค่านั้น

นอกเหนือจากคุณสมบัติเชิงโต้ตอบเหล่านี้ AppMaster ยังปรับปรุงความสามารถในการปรับแต่งผ่านบล็อกกระบวนการทางธุรกิจพิเศษ ตั้งค่าคุณสมบัติ และ ตั้งค่าข้อมูล บล็อกเหล่านี้ให้การเข้าถึงระดับสูง ซึ่งช่วยให้คุณสามารถแก้ไขการตั้งค่าของแต่ละองค์ประกอบโดยทางโปรแกรมในเว็บแอปพลิเคชันของคุณ