เครื่องมือสำหรับนักพัฒนาเว็บขนาดเล็ก

Thomas Steiner

ประสบการณ์การใช้งานสำหรับนักพัฒนาแอป

หลังจากที่พูดถึงมินิแอปในแต่ละหัวข้อไปแล้ว ต่อไปก็อยากจะพูดถึงประสบการณ์การใช้งานของนักพัฒนาซอฟต์แวร์สำหรับ แพลตฟอร์ม Super App ที่หลากหลาย การพัฒนามินิแอปในทุกแพลตฟอร์มจะเกิดขึ้นใน IDE ที่แพลตฟอร์ม Super App ให้บริการฟรี แต่ยังมีอีกหลายรายการ แต่ฉันอยากเน้นตัวเลือกยอดนิยม 4 อย่าง และที่ 5 สำหรับ Quick App เพื่อเปรียบเทียบ

IDE ของมินิแอป

IDE ส่วนใหญ่มีให้บริการเป็นภาษาจีนเท่านั้น เช่นเดียวกับ Super App คุณต้องตรวจสอบว่าได้ติดตั้งเวอร์ชันภาษาจีนแล้ว ไม่ใช่เวอร์ชันภาษาอังกฤษ (หรือต่างประเทศ) ซึ่งบางครั้งก็ให้บริการด้วย เนื่องจากเวอร์ชันนี้อาจไม่ใช่เวอร์ชันล่าสุด หากคุณเป็นนักพัฒนาซอฟต์แวร์ macOS โปรดทราบว่าไม่ได้ลงนามใน IDE ทั้งหมด ซึ่งหมายความว่า macOS ปฏิเสธที่จะเรียกใช้โปรแกรมติดตั้ง คุณสามารถข้ามส่วนนี้ไปด้วยตนเองตามที่ความช่วยเหลือของ Apple สรุปไว้

• เครื่องมือสำหรับนักพัฒนาเว็บของ WeChat
• เครื่องมือสำหรับนักพัฒนาเว็บของ Alipay
• เครื่องมือสำหรับนักพัฒนาเว็บของ Baidu
• เครื่องมือสำหรับนักพัฒนาเว็บของ ByteDance
• เครื่องมือสำหรับนักพัฒนาเว็บแบบลัด

โปรเจ็กต์เริ่มต้นสำหรับมินิแอป

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

• การสาธิต WeChat
• การสาธิต Alipay
• การสาธิต Baidu
• การสาธิต ByteDance
• การสาธิตแอปด่วน

ขั้นตอนการพัฒนา

หลังจากเปิด IDE และโหลดหรือสร้างมินิแอป (การสาธิต) แล้ว ขั้นตอนแรกคือให้ลงชื่อเข้าสู่ระบบเสมอ โดยปกติแล้วคุณต้องสแกนคิวอาร์โค้ดด้วย Super App (ที่คุณลงชื่อเข้าสู่ระบบอยู่แล้ว) ที่สร้างขึ้นจาก IDE คุณแทบจะไม่ต้องป้อนรหัสผ่าน เมื่อคุณเข้าสู่ระบบแล้ว IDE จะรับรู้ตัวตนของคุณและช่วยให้คุณสามารถเริ่มเขียนโปรแกรม แก้ไขข้อบกพร่อง ทดสอบ และส่งแอปเข้ารับการตรวจสอบได้ ดูภาพหน้าจอของ IDE ทั้ง 5 รายการที่กล่าวถึงในย่อหน้าข้างต้น

คุณจะเห็นได้ว่าองค์ประกอบพื้นฐานของ IDE ทั้งหมดคล้ายกันมาก คุณมีตัวแก้ไขโค้ดที่ยึดตาม Monaco Editor อยู่เสมอ ซึ่งเป็นโปรเจ็กต์เดียวกับที่ขับเคลื่อน VS Code ด้วย ใน IDE ทั้งหมดจะมีโปรแกรมแก้ไขข้อบกพร่องตามฟรอนท์เอนด์ของเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome โดยจะมีการแก้ไขเพิ่มเติมในภายหลัง (ดูโปรแกรมแก้ไขข้อบกพร่อง) IDE ตาม จะนำมาใช้เป็น NW.js หรือเป็นแอป Electron เครื่องมือจำลองใน IDE จะรับรู้เป็น แท็ก NW.js <webview> หรือแท็ก Electron <webview> ซึ่งอ้างอิงตาม แท็ก Chromium <webview> หากสนใจการทำงานของ IDE ภายใน คุณมักจะตรวจสอบรายการเหล่านั้นได้ด้วย Chrome DevTools โดยใช้แป้นพิมพ์ลัด Control+Alt+I (หรือ Command+Option+I ใน Mac)

เครื่องมือจำลอง การทดสอบ และแก้ไขข้อบกพร่องของอุปกรณ์จริง

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

แม้ว่าเครื่องมือจำลองในตัวจะเพียงพอให้คุณรับรู้ถึงลักษณะการทำงานของแอป แต่การทดสอบในอุปกรณ์ก็ไม่อาจแทนที่ได้อีก เหมือนอย่างกับเว็บแอปทั่วไป ทดสอบแอปขนาดเล็กที่อยู่ระหว่างการพัฒนาได้ง่ายๆ เพียงสแกนคิวอาร์โค้ดเท่านั้น เช่น ใน ByteDance DevTools การสแกนคิวอาร์โค้ดที่สร้างขึ้นแบบไดนามิกโดย IDE ด้วยอุปกรณ์จริงจะนำไปสู่แอปเวอร์ชันที่โฮสต์บนระบบคลาวด์ซึ่งสามารถทดสอบในอุปกรณ์ได้ทันที วิธีที่ใช้ได้ผลกับ ByteDance คือ URL หลังคิวอาร์โค้ด (ตัวอย่าง) เปลี่ยนเส้นทางไปยังหน้าที่โฮสต์ (ตัวอย่าง) ซึ่งมีลิงก์ที่มีรูปแบบ URI พิเศษ เช่น snssdk1128:// เพื่อแสดงตัวอย่างมินิแอปในแอปขั้นสูงใน ByteDance ต่างๆ เช่น Douyin หรือ Toutiao (ดูตัวอย่าง) ผู้ให้บริการแอปขั้นสูงรายอื่นๆ ไม่ได้ไปที่หน้ากลาง แต่เปิดตัวอย่างโดยตรง

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

Debugger

การแก้ไขข้อบกพร่องขององค์ประกอบ

ประสบการณ์การแก้ไขข้อบกพร่องมินิแอปเป็นประสบการณ์ที่ทุกคนเคยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome อย่างไรก็ตาม มีความแตกต่างที่สำคัญบางอย่างที่ทำให้เวิร์กโฟลว์ได้รับการปรับให้เหมาะกับมินิแอป IDE ของมินิแอปขนาดเล็กมีแผงที่ปรับแต่งให้เหมาะกับภาษา HTML เฉพาะภาษา แทนที่จะใช้แผงองค์ประกอบของ Chrome DevTools เช่น ในกรณีของ WeChat แผงควบคุมมีชื่อว่า Wxml ซึ่งย่อมาจากภาษามาร์กอัปของ WeiXin ใน Baidu DevTools จะใช้ชื่อว่า Swan Element ByteDance DevTools เรียก Bxml Alipay ตั้งชื่อว่า AXML และ Quick App เรียกแผงข้อมูลนี้ว่า UX ผมจะเจาะลึกภาษามาร์กอัปเหล่านี้ภายหลัง

องค์ประกอบที่กำหนดเองขั้นสูง

การตรวจสอบ WebView บนอุปกรณ์จริงผ่าน about://inspect/#devices เผยให้เห็นว่า WeChat DevTools ตั้งใจซ่อนความจริงไว้ ขณะที่ WeChat DevTools แสดง <image> แต่จริงๆ แล้วสิ่งที่เรากำลังดูอยู่คือองค์ประกอบที่กำหนดเองชื่อ <wx-image> โดยมี <div> เป็นองค์ประกอบย่อยเพียงรายการเดียว โปรดทราบว่าองค์ประกอบที่กำหนดเองนี้ไม่ได้ใช้ Shadow DOM ดูเพิ่มเติมเกี่ยวกับคอมโพเนนต์เหล่านี้ภายหลัง

การแก้ไขข้อบกพร่อง CSS

ความแตกต่างอีกประการคือหน่วยความยาว rpx ใหม่สำหรับพิกเซลที่ตอบสนองตามอุปกรณ์ในภาษาต่างๆ ของ CSS (ดูเพิ่มเติมเกี่ยวกับหน่วยนี้ภายหลัง) WeChat DevTools ใช้หน่วยความยาวของ CSS ที่ไม่ขึ้นอยู่กับอุปกรณ์ ทำให้การพัฒนาสำหรับอุปกรณ์ขนาดต่างๆ เป็นเรื่องง่ายขึ้น

การตรวจสอบประสิทธิภาพ

ประสิทธิภาพถือเป็นส่วนสำคัญสำหรับมินิแอป จึงไม่น่าแปลกใจที่ WeChat DevTools และเครื่องมือสำหรับนักพัฒนาเว็บอื่นๆ จะมีเครื่องมือตรวจสอบที่ได้รับแรงบันดาลใจมาจาก Lighthouse การตรวจสอบด้านที่สำคัญคือภาพรวม ประสิทธิภาพ ประสบการณ์ และแนวทางปฏิบัติแนะนำ มุมมองของ IDE สามารถปรับแต่งได้ ในภาพหน้าจอด้านล่าง เราได้ซ่อนตัวแก้ไขโค้ดไว้ชั่วคราวเพื่อให้มีพื้นที่มากขึ้นสำหรับเครื่องมือตรวจสอบ

การเลียนแบบ API

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

ข้อความแสดงการยอมรับ

บทความนี้ได้รับการตรวจสอบโดย Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent และ Keith Gu