Narzędzia deweloperskie w wersji miniaplikacji

Thomas Steiner

Środowisko programistyczne

Teraz, gdy już omówiliśmy miniaplikacje swoje, skoncentruję się na ich obsłudze dla programistów różnych platform. Tworzenie miniaplikacji na wszystkich platformach odbywa się w IDE, które są udostępniane bezpłatnie przez superaplikacje. Chociaż jest ich więcej, chcę skupić się na 4 najpopularniejszych i piątej, aby porównać ją z szybkimi aplikacjami.

IDE aplikacji mini

Podobnie jak superaplikacje, większość IDE jest dostępna tylko w języku chińskim. Warto się upewnić, że instalujesz wersję chińską, a nie dostępną czasem w języku angielskim (lub za granicą), ponieważ może ona nie być aktualna. Jeśli jesteś deweloperem systemu macOS, pamiętaj, że nie wszystkie IDE są podpisane, co oznacza, że macOS odmawia uruchomienia instalatora. Możesz to zrobić na własne ryzyko, zgodnie z opisem w Centrum pomocy Apple.

Miniprojekty startowe aplikacji

Aby szybko rozpocząć pracę z miniaturami aplikacji, wszyscy dostawcy superaplikacji oferują aplikacje demonstracyjne, które można od razu pobrać i przetestować. Czasami są też zintegrowane z kreatorami „New Project” (Nowy projekt) w różnych IDE.

Proces programowania

Po uruchomieniu IDE i wczytaniu lub utworzeniu (demonstracyjnej) miniaplikacji zawsze pierwszym krokiem jest zawsze zalogowanie się. Zwykle wystarczy zeskanować kod QR za pomocą superaplikacji (w której użytkownik jest już zalogowany) wygenerowanej przez IDE. Bardzo rzadko musisz podać hasło. Gdy się zalogujesz, IDE zna Twoją tożsamość i umożliwia rozpoczęcie programowania, debugowania, testowania oraz przesyłania aplikacji do sprawdzenia. Poniżej możesz zobaczyć zrzuty ekranu z 5 środowiskami IDE wspomnianymi w akapicie powyżej.

Okno aplikacji WeChat DevTools z symulatorem, edytorem kodu i debugerem.
Narzędzia deweloperskie WeChat z symulatorem, edytorem kodu i debugerem.
Okno aplikacji Alipay DevTools z edytorem kodu, symulatorem i debugerem.
Narzędzia deweloperskie Alipay z edytorem kodu, symulatorem i debugerem.
Okno aplikacji narzędzi deweloperskich Baidu z symulatorem, edytorem kodu i debugerem.
Narzędzia deweloperskie Baidu z symulatorem, edytorem kodu i debugerem.
Okno aplikacji ByteDance DevTools z widocznym symulatorem, edytorem kodu i debugerem.
Narzędzia deweloperskie w ByteDance z symulatorem, edytorem kodu i debugerem.
Okno aplikacji Quick App DevTools przedstawiające edytor kodu, symulator i debuger.
Szybkie narzędzia deweloperskie z edytorem kodu, symulatorem i debugerem.

Jak widać, podstawowe elementy wszystkich IDE są bardzo podobne. Zawsze masz edytor kodu oparty na Monaco Editor, czyli tym samym projekcie, który obsługuje VS Code. We wszystkich IDE dostępny jest debuger oparty na frontendzie Narzędzi deweloperskich w Chrome (z pewnymi modyfikacjami), które omówimy później (patrz Debugger). IDE na se są implementowane jako aplikacje NW.js lub Electron. Symulatory w IDE są realizowane jako tag NW.js <webview> lub tag Electron <webview>, który z kolei jest oparty na tagu <webview> Chromium. Jeśli interesują Cię elementy wewnętrzne IDE, często możesz je sprawdzić w Narzędziach deweloperskich w Chrome ze skrótem klawiaturowym Control+Alt+I (lub Command+Option+I na Macu).

Narzędzia deweloperskie w Chrome używane do sprawdzenia Narzędzi deweloperskich w Baidu i pokazania tagu WebView symulatora w panelu Elementy Narzędzi deweloperskich w Chrome.
Podczas sprawdzania Narzędzi deweloperskich Baidu w Narzędziach deweloperskich w Chrome symulator działa jako tag Electron <webview>.

Symulator oraz rzeczywiste testowanie i debugowanie

Symulator jest porównywalny z informacjami zawartymi w trybie 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, wykorzystanie pamięci, zdarzenie odczytu kodu kreskowego, nieoczekiwane zakończenie i tryb ciemny.

Wbudowany symulator pozwala jedynie zorientować się, jak działa aplikacja, ale testowanie na urządzeniu, jak w przypadku zwykłych aplikacji internetowych, jest niezastąpione. Wystarczy zeskanować kod QR, aby przetestować miniaplikację, która jest w fazie rozwoju. Na przykład skanowanie kodu QR generowanego przez IDE za pomocą rzeczywistego urządzenia w ByteDance DevTools powoduje utworzenie wersji miniaplikacji hostowanej w chmurze, którą można od razu przetestować na urządzeniu. Działa to w przypadku ByteDance, gdzie adres URL za kodem QR (przykład) przekierowuje na hostowaną stronę (przykład), która zawiera linki ze specjalnymi schematami URI, np. snssdk1128://, by wyświetlić podgląd miniaplikacji w różnych superaplikacjach ByteDance, takich jak Douyin czy Toutiao (tutaj znajdziesz przykład). Inni dostawcy superaplikacji nie przechodzą przez stronę pośrednią, ale bezpośrednio otwierają podgląd.

ByteDance DevTools pokazujący kod QR, który użytkownik może zeskanować za pomocą aplikacji Douyin, aby zobaczyć aktualną miniaplikację na urządzeniu.
Narzędzia deweloperskie w ByteDance z kodem QR, który użytkownik może zeskanować za pomocą aplikacji Douyin, aby przeprowadzić natychmiastowe testy na urządzeniu.
Pośrednia strona docelowa, na której można wyświetlić podgląd miniaplikacji ByteDance w różnych superaplikacjach firmy, otwartej w standardowej przeglądarce na komputerze w celu przeanalizowania wstecznego procesu.
Strona docelowa Intermediate ByteDance do wyświetlania podglądu miniaplikacji (otwarta w przeglądarce na komputerze, aby pokazać przepływ).

Jeszcze ciekawszą funkcją jest zdalne debugowanie w chmurze. Po prostu zeskanujesz specjalny kod QR wygenerowany przez IDE, miniaplikacja otworzy się na urządzeniu fizycznym, a na komputerze pojawi się okno Narzędzi deweloperskich w Chrome, które umożliwia zdalne debugowanie.

Telefon komórkowy z miniaplikacjami z fragmentami interfejsu wyróżnionymi przez debuger ByteDance DevTools uruchomiony na laptopie, który go sprawdza.
Bezprzewodowe zdalne debugowanie miniaplikacji na prawdziwym urządzeniu przy użyciu narzędzi ByteDance DevTools.

Debuger

Debugowanie elementów

Funkcja debugowania miniaplikacji jest już znana każdemu, kto kiedykolwiek korzystał z Narzędzi deweloperskich w Chrome. Istnieją jednak pewne ważne różnice, które sprawiają, że przepływ pracy jest dostosowywany do miniaplikacji. Zamiast panelu Elements w Narzędziach deweloperskich w Chrome możesz skorzystać z niestandardowego panelu dostosowanego do języka HTML. Na przykład w WeChat panel nazywa się Wxml, co oznacza WeiXin Markup Language. W Narzędziach deweloperskich Baidu nazywa się on Swan Element. ByteDance DevTools wywołuje go Bxml. Alipay nadaje mu nazwę AXML, a szybka aplikacja odwołuje się do panelu po prostu jako UX. Języki znaczników omówię w dalszej części.

Sprawdzanie obrazu za pomocą panelu „Wxml” narzędzia WeChat DevTools. Widać, że używany tag to tag „image”.
Sprawdzanie elementu <image> za pomocą Narzędzi deweloperskich weChat.

Elementy niestandardowe

Sprawdzenie komponentu WebView na prawdziwym urządzeniu za pomocą strony about://inspect/#devices pokazuje, że Narzędzia deweloperskie WeChat celowo ukrywały prawdę. Tam, gdzie w Narzędziach deweloperskich w WeChat pojawiło się <image>, widzę właśnie element niestandardowy o nazwie <wx-image> z jedynym elementem podrzędnym <div>. Warto zauważyć, że ten element niestandardowy nie korzysta z modelu Shadow DOM. Więcej o tych komponentach dowiesz się później.

Sprawdzanie miniaplikacji WeChat na prawdziwym urządzeniu za pomocą Narzędzi deweloperskich w Chrome. Gdy Narzędzia deweloperskie w WeChat pokazały, że patrzę na tag „image”, w Narzędziach deweloperskich w Chrome widać, że mam do czynienia z elementem niestandardowym „wx-image”.
Sprawdzanie elementu <image> za pomocą Narzędzi deweloperskich w WeChat pokazuje, że jest to w rzeczywistości element niestandardowy <wx-image>.

Debugowanie CSS

Kolejna różnica to nowa jednostka długości rpx dla piksela responsywnego w różnych dialektach CSS (więcej informacji o tej jednostce znajdziesz w dalszej części). Narzędzia deweloperskie WeChat korzystają z jednostek CSS niezależnych od urządzenia, dzięki czemu programowanie na urządzenia o różnych rozmiarach jest bardziej intuicyjne.

Sprawdzanie widoku z określonym górnym i dolnym dopełnieniem „200rpx” w Narzędziach deweloperskich WeChat.
Sprawdzanie dopełnienia określonego w pikselach elastycznych (200rpx 0) widoku za pomocą Narzędzi deweloperskich weChat.

Kontrola wydajności

W przypadku miniaplikacji wydajność jest najważniejsza. Nic dziwnego, że WeChat DevTools i niektóre inne narzędzia deweloperskie mają zintegrowane narzędzie kontrolne inspirowane aplikacją Lighthouse. Główne obszary audytów to: całość, skuteczność, doświadczenie i sprawdzone metody. Widok IDE można dostosować. Na zrzucie ekranu poniżej tymczasowo ukryłem edytor kodu, aby zwiększyć ilość miejsca na ekranie dla narzędzia do kontroli.

Przeprowadzanie kontroli wydajności za pomocą wbudowanego narzędzia kontrolnego. Wyniki wyświetlają się w kategoriach Suma, Skuteczność, Doświadczenie i Sprawdzona metoda (każdy wynik to 100 punktów na 100 punktów).
Wbudowane w Narzędzia dla programistów WeChat narzędzie do kontroli, które obejmuje dane dotyczące sumy, wydajności, doświadczenia i sprawdzonych metod.

Naśmiewanie się z API

Zamiast wymagać od dewelopera skonfigurowania osobnej usługi, fałszowanie odpowiedzi interfejsu API jest bezpośrednio częścią narzędzi deweloperskich weChat. Za pomocą łatwego w użyciu interfejsu deweloper może konfigurować punkty końcowe interfejsu API i pożądane przykładowe odpowiedzi.

Skonfigurowanie próbnej odpowiedzi dla punktu końcowego interfejsu API w Narzędziach deweloperskich WeChat.
Zintegrowana funkcja ośmieszania odpowiedzi interfejsu API dostępna w narzędziach WeChat DevTools.

Podziękowania

Ten artykuł napisali Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent oraz Keith Gu.