หลักสูตรความผิดพลาด 101
10 โมดูล
5 สัปดาห์ที่ผ่านมา

มันทำงานอย่างไร

คลิกเพื่อคัดลอก

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


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

อินเตอร์เฟซ

ในการพัฒนาเว็บแอปพลิเคชันของคุณด้วย AppMaster ขั้นตอนแรกคือการออกแบบอินเทอร์เฟซ กระบวนการพัฒนาเกี่ยวข้องกับงานสามระดับ:

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

เค้าโครง

Build and using layouts in AppMaster Web Designer

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

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

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

หน้า

Build and usage pages in AppMaster Wed Designer

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

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

องค์ประกอบ UI

Using UI elements with drag-and-drop in AppMaster Web Designer

องค์ประกอบ UI เป็นส่วนที่เป็นส่วนประกอบพื้นฐานของเว็บแอปพลิเคชันของคุณ สิ่งเหล่านี้แสดงถึงองค์ประกอบของเนื้อหาของคุณ เช่น ข้อความ ปุ่ม รูปภาพ ตาราง และอื่นๆ

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

ดังนั้น AppMaster Web App Designer จึงขอนำเสนอเป็นตัวแก้ไขแบบ WYSIWYG ("สิ่งที่คุณเห็นคือสิ่งที่คุณได้รับ") สำหรับการสร้างเว็บแอปพลิเคชัน

การปรับแต่ง

AppMaster Web Designer web app Theme Builder

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

ในการตั้งค่าแอปพลิเคชัน คุณสามารถตั้งค่ามุมมองแอปพลิเคชันในเบราว์เซอร์และในผลการค้นหา: ชื่อแอปพลิเคชัน คำอธิบาย ไอคอน Fav

ตรรกะทางธุรกิจ

เมื่อสร้างอินเทอร์เฟซแอปพลิเคชันแล้ว คุณสามารถเริ่มสร้างตรรกะทางธุรกิจได้ ซึ่งรวมถึง:

  • การสร้างฐานข้อมูลท้องถิ่น (เร็ว ๆ นี้!)
  • การสร้างตัวแปรทั่วโลก
  • การกำหนดค่าการทำงานของส่วนประกอบและทริกเกอร์แอปพลิเคชัน
  • การสร้างกระบวนการทางธุรกิจทั่วไป
  • การดำเนินการกระบวนการทางธุรกิจตามกำหนดเวลา (SOON!)
  • การตั้งค่าการแปลเป็นภาษาต่างๆ (เร็วๆ นี้!)

บริการของบุคคลที่สาม

คุณสามารถรวมบริการของบุคคลที่สามจากไลบรารีโมดูลของเราเพื่อปรับปรุงการทำงานของแอปพลิเคชันเว็บของคุณ ที่นั่น คุณจะพบโมดูลของการอนุญาตเครือข่ายโซเชียล (Google, Apple, Linked In, Facebook), ปฏิทิน, โมดูลแผนที่ต่างๆ, บริการชำระเงิน และอื่นๆ อีกมากมาย รายการการผสานรวมทั้งหมดที่มีอยู่สามารถพบได้ในส่วนโมดูลใน AppMaster Web App Designer (เร็วๆ นี้!)

Was this article helpful?
ยังคงมองหาคำตอบ?