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

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

IDE ของมินิแอป

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

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

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

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

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

หน้าต่างแอปพลิเคชัน WeChat DevTools ที่แสดงเครื่องมือจำลอง ตัวแก้ไขโค้ด และโปรแกรมแก้ไขข้อบกพร่อง
WeChat DevTools ที่มีเครื่องจำลอง ตัวแก้ไขโค้ด และโปรแกรมแก้ไขข้อบกพร่อง
หน้าต่างแอปพลิเคชัน Alipay DevTools แสดงตัวแก้ไขโค้ด เครื่องมือจำลอง และโปรแกรมแก้ไขข้อบกพร่อง
Alipay DevTools พร้อมตัวแก้ไขโค้ด เครื่องจำลอง และโปรแกรมแก้ไขข้อบกพร่อง
หน้าต่างแอปพลิเคชัน Baidu DevTools แสดงเครื่องจำลอง ตัวแก้ไขโค้ด และโปรแกรมแก้ไขข้อบกพร่อง
Baidu DevTools ที่มีเครื่องจำลอง ตัวแก้ไขโค้ด และโปรแกรมแก้ไขข้อบกพร่อง
หน้าต่างแอปพลิเคชัน ByteDance DevTools แสดงเครื่องมือจำลอง ตัวแก้ไขโค้ด และโปรแกรมแก้ไขข้อบกพร่อง
ByteDance DevTools พร้อมเครื่องจำลอง ตัวแก้ไขโค้ด และโปรแกรมแก้ไขข้อบกพร่อง
หน้าต่างแอปพลิเคชัน Quick App DevTools แสดงตัวแก้ไขโค้ด เครื่องมือจำลอง และโปรแกรมแก้ไขข้อบกพร่อง
Quick App DevTools ที่มีตัวแก้ไขโค้ด เครื่องจำลอง และโปรแกรมแก้ไขข้อบกพร่อง

คุณจะเห็นได้ว่าองค์ประกอบพื้นฐานของ 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 ที่ใช้ตรวจสอบเครื่องมือสำหรับนักพัฒนาเว็บของ Baidu ที่แสดงแท็ก WebView ของเครื่องมือจำลองในแผงองค์ประกอบของ Chrome DevTools
การตรวจสอบ Baidu DevTools ด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เผยให้เห็นว่าเครื่องมือจำลองจะทำงานเป็นแท็ก <webview> ของอิเล็กตรอน

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

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

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

ByteDance DevTools แสดงคิวอาร์โค้ดที่ผู้ใช้สแกนด้วยแอป Douyin เพื่อดูมินิแอปปัจจุบันในอุปกรณ์ได้
ByteDance DevTools แสดงคิวอาร์โค้ดที่ผู้ใช้สแกนด้วยแอป Douyin เพื่อทำการทดสอบในอุปกรณ์ได้ทันที
หน้า Landing Page ตัวกลางสำหรับแสดงตัวอย่างแอปจิ๋ว ByteDance ในแอปขั้นสูงต่างๆ ของบริษัท โดยเปิดในเบราว์เซอร์เดสก์ท็อปทั่วไปเพื่อย้อนกระบวนการทำวิศวกรรมย้อนกลับ
หน้า Landing Page ของ Intermediate ByteDance สำหรับการแสดงตัวอย่างแอปมินิ (เปิดในเบราว์เซอร์บนเดสก์ท็อปเพื่อแสดงโฟลว์)

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

โทรศัพท์มือถือที่ใช้มินิแอปที่ไฮไลต์ส่วนต่างๆ ใน UI โดยโปรแกรมแก้ไขข้อบกพร่อง ByteDance DevTools กำลังทำงานบนแล็ปท็อปกำลังตรวจสอบอยู่
แก้ไขข้อบกพร่องของมินิแอปจากระยะไกลได้แบบไร้สายในอุปกรณ์จริงด้วย ByteDance DevTools

Debugger

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

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

การตรวจสอบรูปภาพด้วยแผง &quot;Wxml&quot; ของ WeChat DevTools แสดงว่าแท็กที่กำลังใช้เป็นแท็ก &quot;รูปภาพ&quot;
การตรวจสอบองค์ประกอบ <image> ด้วย WeChat DevTools

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

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

ตรวจสอบแอป WeChat ขนาดจิ๋วที่ทำงานในอุปกรณ์จริงด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ส่วนที่ WeChat DevTools รายงานว่าฉันกำลังดูที่แท็ก &quot;image&quot; แต่ Chrome DevTools ทำให้ฉันรู้ว่าจริงๆ แล้วฉันกำลังจัดการกับองค์ประกอบที่กำหนดเอง &quot;wx-image&quot;
การตรวจสอบองค์ประกอบ <image> ด้วย WeChat DevTools เผยให้เห็นว่าจริงๆ แล้วเป็นองค์ประกอบที่กำหนดเอง <wx-image> รายการ

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

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

ตรวจสอบมุมมองโดยมีระยะห่างจากขอบด้านบนและด้านล่างเป็น &quot;200rpx&quot; ใน DevTools ของ WeChat
ตรวจสอบระยะห่างจากขอบที่ระบุในพิกเซลที่ปรับเปลี่ยนตามอุปกรณ์ (200rpx 0) ของมุมมองด้วยเครื่องมือสำหรับนักพัฒนาเว็บ WeChat

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

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

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

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

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

การตั้งค่าการจำลองการตอบกลับสำหรับปลายทาง API ใน WeChat DevTools
ฟีเจอร์จำลองการตอบกลับ API ที่ผสานรวมอยู่ของ WeChat DevTools

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

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