Narzędzia deweloperskie w wersji miniaplikacji

Thomas Steiner

Środowisko programistyczne

Po omówieniu samych miniaplikacji per se chcę się skupić na doświadczeniu deweloperów na różnych platformach superaplikacji. Tworzenie miniaplikacji na wszystkich platformach odbywa się w środowiskach IDE udostępnianych bezpłatnie przez platformy superaplikacji. Jest ich więcej, ale chcę się skupić na 4 najpopularniejszych i 5 – dla porównania z szybką aplikacją.

Środowiska IDE miniaplikacji

Podobnie jak superaplikacje, większość IDE jest dostępna tylko w języku chińskim. Zainstaluj chińską wersję, a nie angielską (lub zagraniczną), która czasami jest dostępna, ponieważ może nie być aktualna. Jeśli jesteś deweloperem macOS, pamiętaj, że nie wszystkie środowiska IDE są podpisane, co oznacza, że macOS odmawia uruchomienia instalatora. Możesz na własne ryzyko pominąć ten krok, postępując zgodnie z instrukcjami w pomocy Apple.

• Narzędzia deweloperskie WeChat
• Narzędzia deweloperskie Alipay
• Narzędzia deweloperskie Baidu
• Narzędzia deweloperskie ByteDance
• Narzędzia deweloperskie Quick App

Projekty startowe miniaplikacji

Aby szybko rozpocząć tworzenie miniaplikacji, wszyscy dostawcy superaplikacji oferują aplikacje demonstracyjne, które można od razu pobrać i przetestować. Czasami są one też zintegrowane z kreatorami „Nowy projekt” w różnych środowiskach IDE.

• Wersja demonstracyjna WeChat
• Prezentacja Alipay
• Wersja demonstracyjna Baidu
• Wersja demonstracyjna ByteDance
• Wersja demonstracyjna Quick App

Proces programowania

Po uruchomieniu IDE i wczytaniu lub utworzeniu (demonstracyjnej) miniaplikacji pierwszym krokiem jest zawsze zalogowanie się. Zwykle wystarczy zeskanować kod QR za pomocą superaplikacji (w której jesteś już zalogowany), wygenerowany przez IDE. Hasło musisz wpisywać bardzo rzadko. Po zalogowaniu się środowisko IDE rozpoznaje Twoją tożsamość i umożliwia rozpoczęcie programowania, debugowania, testowania i przesyłania aplikacji do sprawdzenia. Poniżej znajdziesz zrzuty ekranu 5 środowisk IDE wymienionych w akapicie powyżej.

Jak widać, podstawowe komponenty wszystkich środowisk IDE są bardzo podobne. Zawsze masz do dyspozycji edytor kodu oparty na Monaco Editor, czyli tym samym projekcie, który jest podstawą VS Code. We wszystkich środowiskach IDE jest dostępny debugger oparty na interfejsie Narzędzi deweloperskich w Chrome z pewnymi modyfikacjami, o których dowiesz się więcej w dalszej części (patrz Debugger). Same środowiska IDE są implementowane jako aplikacje NW.js lub Electron, a symulatory w środowiskach IDE są realizowane jako tag <webview> NW.js lub tag <webview> Electron, które z kolei są oparte na tagu <webview> Chromium. Jeśli interesują Cię wewnętrzne mechanizmy IDE, możesz je często po prostu sprawdzić za pomocą Narzędzi deweloperskich w Chrome, używając skrótu klawiszowego Ctrl+Alt+I (lub Command+Option+I na Macu).

Testowanie i debugowanie na symulatorze i rzeczywistym urządzeniu

Symulator jest podobny do trybu urządzenia w Narzędziach deweloperskich w Chrome. Możesz symulować różne urządzenia z Androidem i iOS, zmieniać skalę i orientację urządzenia, a także symulować różne stany sieci, obciążenie pamięci, zdarzenie odczytu kodu kreskowego, nieoczekiwane zakończenie działania i tryb ciemny.

Wbudowany symulator wystarczy, aby zorientować się, jak działa aplikacja, ale testowanie na urządzeniu, podobnie jak w przypadku zwykłych aplikacji internetowych, jest niezastąpione. Testowanie miniappki w trakcie tworzenia jest proste – wystarczy zeskanować kod QR. Na przykład w ByteDance DevTools zeskanowanie kodu QR wygenerowanego dynamicznie przez IDE za pomocą prawdziwego urządzenia powoduje otwarcie w chmurze wersji mini aplikacji, którą można od razu przetestować na urządzeniu. W przypadku ByteDance działa to tak, że adres URL za kodem QR (example) przekierowuje na hostowaną stronę (example), która zawiera linki ze specjalnymi schematami URI, np. snssdk1128://, aby wyświetlić podgląd miniaplikacji w różnych superaplikacjach ByteDance, takich jak Douyin czy Toutiao (przykład). Inni dostawcy superaplikacji nie przechodzą przez stronę pośrednią, ale otwierają podgląd bezpośrednio.

Jeszcze bardziej atrakcyjną funkcją jest zdalne debugowanie podglądu w chmurze. Po zeskanowaniu specjalnego kodu QR wygenerowanego przez IDE mini aplikacja otworzy się na urządzeniu fizycznym, a na komputerze pojawi się okno Narzędzi deweloperskich Chrome do zdalnego debugowania.

Debuger

Debugowanie elementów

Debugowanie miniaplikacji jest bardzo podobne do debugowania w Narzędziach deweloperskich w Chrome. Istnieją jednak pewne istotne różnice, które sprawiają, że przepływ pracy jest dostosowany do miniaplikacji. Zamiast panelu Elementy w Narzędziach deweloperskich w Chrome środowiska IDE miniaplikacji mają dostosowany panel, który jest dopasowany do ich konkretnego dialektu HTML. Na przykład w przypadku WeChat panel nazywa się Wxml, co oznacza WeiXin Markup Language. W narzędziach deweloperskich Baidu nazywa się to Swan Element. Narzędzia deweloperskie ByteDance nazywają go Bxml. Alipay nazywa go AXML, a aplikacja ekspresowa odnosi się do panelu po prostu jako UX. Zajmę się tymi językami znaczników później.

Elementy niestandardowe w GA4

Sprawdzenie widoku WebView na prawdziwym urządzeniu za pomocą about://inspect/#devices wykazało, że Narzędzia deweloperskie WeChat celowo ukrywały prawdę. W miejscu, w którym WeChat DevTools wyświetlał <image>, w rzeczywistości znajduje się element niestandardowy o nazwie <wx-image>, którego jedynym elementem podrzędnym jest <div>. Warto zauważyć, że ten element niestandardowy nie korzysta z Shadow DOM. Więcej informacji o tych komponentach znajdziesz później.

Debugowanie CSS

Kolejną różnicą jest nowa jednostka długości rpx dla piksela elastycznego w różnych dialektach CSS (więcej informacji o tej jednostce znajdziesz w dalszej części). Narzędzia WeChat DevTools używają jednostek długości CSS niezależnych od urządzenia, aby ułatwić tworzenie aplikacji na urządzenia o różnych rozmiarach.

Kontrola skuteczności

Wydajność jest najważniejsza w przypadku miniaplikacji, więc nic dziwnego, że Narzędzia deweloperskie WeChat i inne narzędzia deweloperskie mają zintegrowane narzędzie do audytu inspirowane Lighthouse. Obszary audytów to: Ogółem, Skuteczność, Wrażenia i Sprawdzone metody. Widok IDE można dostosować. Na zrzucie ekranu poniżej tymczasowo ukryłem edytor kodu, aby mieć więcej miejsca na ekranie dla narzędzia do audytu.

Symulowanie interfejsu API

Zamiast wymagać od programisty skonfigurowania osobnej usługi, symulowanie odpowiedzi interfejsu API jest bezpośrednio częścią narzędzi deweloperskich WeChat. Za pomocą prostego interfejsu deweloper może skonfigurować punkty końcowe API i odpowiedzi testowe.

Podziękowania

Ten artykuł został sprawdzony przez Joe Medleya, Kayce Basques, Milicę Mihajliję, Alana Kenta i Keitha Gu.