Narzędzia usprawniające przepływ pracy programistów podczas tworzenia aplikacji hybrydowych Apache Cordova są stale ulepszane od czasu wprowadzenia interfejsu wiersza poleceń Cordova (CLI) kilka lat temu. Interfejs CLI znacznie poprawił, zautomatyzował i ustandaryzował typowe zadania programistyczne, które wcześniej polegały na ręcznych procesach tworzenia lub modyfikowania plików konfiguracyjnych lub bezpośredniej manipulacji kodem natywnym.
Ponieważ Cordova jest oprogramowaniem typu open source, inni mogą swobodnie budować na nim i rozpowszechniać własne narzędzia dostosowane do określonej struktury JavaScript (na przykład Ionic robi to) lub do określonych przypadków użycia (CLI PhoneGap firmy Adobe dodaje możliwość interakcji z ich chmurą Usługa PhoneGap Build).
Microsoft pracuje nad ścisłą integracją ekosystemu Cordova z linią produktów Visual Studio, w tym darmowym i międzyplatformowym Edytorem Visual Studio Code. W ramach tej inicjatywy firma Microsoft korzysta z otwartego źródła TACO (Tools for Apache CORdova), alternatywnego interfejsu CLI, którego celem jest dalsza poprawa produktywności programistów, niezależnie od tego, jaki wybierzesz framework JavaScript lub lokalną platformę programistyczną.
TACO jest w pełni kompatybilny ze zwykłym CLI Cordova i możesz bez problemu używać poleceń „taco” i „cordova” w tym samym projekcie. Przyjrzyjmy się, jakich korzyści programiści korzystający z systemu Mac OS mogą spodziewać się po dodaniu TACO do swoich zestawów narzędzi.
Instalacja
Zakładając, że mamy już zainstalowany Node.js, uzyskanie TACO jest proste:
sudo npm install -g taco-cli
Po zakończeniu możemy sprawdzić, czy TACO CLI zainstalował się poprawnie za pomocą:
taco -version
Który w momencie pisania powinien wyprowadzić:
1.2.1
Tworzenie aplikacji
Przejdźmy dalej i użyjmy TACO CLI, aby utworzyć aplikację Cordova o nazwie „TACOApp” w folderze „TACOApp” i z identyfikatorem aplikacji „com.moduscreate.tacoapp”:
taco create TACOApp com.moduscreate.tacoapp TACOApp
Spowoduje to pobranie Cordova w razie potrzeby (aktualna wersja w momencie pisania to 5.4.1) i utworzenie pustej aplikacji w „TACOApp”.
Patrząc na to, co dla nas powstało, widzimy:
ls -lF TACOApp -rw-rw-rw- 1 simon staff 6259 Apr 29 20:49 config.xml drwxr-xr-x 3 simon staff 102 Apr 29 20:49 hooks/ drwxr-xr-x 4 simon staff 136 Apr 29 20:49 merges/ -rw-r--r-- 1 simon staff 2 Apr 29 20:49 package.json drwxr-xr-x 2 simon staff 68 Apr 29 20:49 platforms/ drwxr-xr-x 2 simon staff 68 Apr 29 20:49 plugins/ drwxr-xr-x 5 simon staff 170 Apr 29 20:49 res/ -rw-r--r-- 1 simon staff 50 Apr 29 20:49 taco.json drwxr-xr-x 6 simon staff 204 Apr 29 20:49 www/
Wygląda to tak, jak oczekiwalibyśmy od zwykłej aplikacji Cordova utworzonej przy użyciu Cordova CLI, z dodatkiem folderu o nazwie „res” i pliku o nazwie „taco.json”.
„res” zawiera pewne standardowe zasoby wspierające aplikację Hello World, którą tworzy dla nas CLI — ikony, ekrany powitalne i pliki konfiguracyjne specyficzne dla platformy.
Plik „taco.json” informuje TACO, która wersja Cordova CLI i który „zestaw” (znany zestaw numerów wersji wtyczek, które dobrze ze sobą współpracują) zostały użyte podczas tworzenia aplikacji. Więcej informacji na temat zestawów TACO znajduje się w „dokumentacji”.
Dodawanie platform
Aby nasza aplikacja działała na danej rodzinie urządzeń, musimy dodać jedną lub więcej platform Cordova. Dodajmy Androida i iOS i zobaczmy, co TACO robi inaczej tutaj:
taco platform add android
Spowoduje to utworzenie i skonfigurowanie platformy Cordova Android dla naszego projektu, a kiedy to zrobimy, możemy spodziewać się wyników podobnych do:
Success! Platform(s) android added to the project.
Korzystając ze zwykłego przepływu pracy Cordova CLI, musielibyśmy teraz zainstalować zestawy SDK i narzędzia Androida na odpowiednich poziomach dla wersji Androida, na które kierujemy, lub zrobiliśmy to osobno przed rozpoczęciem naszego projektu aplikacji.
TACO CLI różni się tutaj od „waniliowej” Cordova. Zawiera przydatne dodatkowe polecenie, które może uzyskać dla nas pakiety SDK i wymagania specyficzne dla platformy.
taco install-reqs android
Spowoduje to zainstalowanie wymaganych narzędzi i zestawów SDK, które nie są jeszcze obecne na komputerze lokalnym, dzięki czemu aplikacja będzie gotowa do skompilowania.
Podobnie możemy dodać obsługę platformy iOS do naszej nowej aplikacji za pomocą:
taco platform add ios taco install-reqs ios
Podobnie jak w przypadku normalnego projektu Cordova CLI, nasz folder projektu zawiera teraz:
platforms/android platforms/ios
Dodawanie wtyczek
Wtyczki działają zgodnie z oczekiwaniami.
taco plugin add cordova-plugin-camera
doda wtyczkę aparatu dla wszystkich zainstalowanych platform, w wersji ustawionej przez zestaw TACO, z którego korzysta aplikacja. Zestaw to zestaw wtyczek, o których wiadomo, że dobrze współpracują z daną wersją Cordova. Więcej dokumentacji na ten temat znajduje się tutaj. Jeśli na pewno chcesz mieć najnowszą wersję wtyczki, po prostu użyj:
taco plugin add cordova-plugin-camera@latest
Budowanie aplikacji lokalnie
Aby zbudować aplikację, po prostu mówimy TACO, którą platformę chcemy zbudować, w taki sam sposób, jak przy użyciu zwykłego CLI Cordova:
taco build android taco build ios
Działają one dokładnie tak, jak w przypadku zwykłego projektu Cordova CLI.
Uruchamianie aplikacji
Po zbudowaniu naszej aplikacji będziemy chcieli ją uruchomić i debugować, zarówno na prawdziwym urządzeniu, jak i przy użyciu emulatorów. TACO ma tutaj również dodatkową funkcjonalność w porównaniu z waniliowym CLI Cordova.
Emulatory i urządzenia
TACO pozwala nam uruchomić naszą aplikację w emulatorze, ponownie używając tego samego polecenia, które każdy zaznajomiony z Cordova CLI rozpozna:
taco emulate ios taco emulate android
Aplikacja szablonowa, którą generuje TACO, różni się wizualnie od tej, którą dostarcza zwykły Cordova CLI, ale ma tę samą logikę wykrywania zdarzeń „urządzenie gotowe”. Schemat TACO wygląda tak:
TACO pozwala również programistom uruchamiać swoje aplikacje na urządzeniach podłączonych do ich komputera lub na skonfigurowanym zdalnym serwerze kompilacji Mac dla programistów Windows, którzy chcą uruchomić aplikację na iOS.
Zakładając, że jesteśmy na Macu i mamy podłączone urządzenie iOS,
taco run ios
uruchomi aplikację na podłączonym urządzeniu i uruchomi ją.
Przeładuj na żywo
TACO pozwala nam uruchomić naszą aplikację (na urządzeniu lub w emulatorze) w sposób, który pozwala nam zmieniać zasoby HTML / JS / CSS / obrazu bez konieczności wykonywania kolejnego cyklu kompilacji i emulacji.
Zarówno polecenia run, jak i emulate obsługują przeładowanie na żywo (przy użyciu BrowserSync). Oto przykład użycia go z symulatorem iOS:
taco emulate ios --livereload
Następnie możemy edytować źródło aplikacji, która zostanie ponownie załadowana, gdy zapiszemy nasze zmiany.
Synchronizacja urządzenia
Inną funkcją, którą TACO oferuje w porównaniu z waniliowym interfejsem Cordova CLI, jest możliwość uruchamiania aplikacji na wielu urządzeniach i odzwierciedlania zdarzeń z jednego w drugim.
Jest to bardzo przydatne podczas demonstracji lub testowania na różnych platformach. Oto przykład, w którym po lewej stronie mamy iPhone'a z naszą aplikacją, a po prawej telefon z Androidem Moto X również ją uruchamia. Są to oba urządzenia fizyczne. Ich wyniki są rejestrowane za pomocą QuickTime dla iPhone'a i doskonałego Vysora dla Androida.
Oba urządzenia muszą być podłączone do komputera Mac, a włączenie tego zachowania jest tak proste, jak:
taco run -device --devicesync
Funkcja Live Reload jest również dostępna podczas działania synchronizacji urządzenia, dzięki czemu możesz zmieniać pliki aplikacji i widzieć zmiany na obu platformach jednocześnie. Synchronizacja urządzeń może również współpracować z emulatorem dla jednej lub obu platform, a nie z urządzeniami fizycznymi.
Wniosek
Firma Microsoft oferuje kilka przydatnych ulepszeń dla programistów pracujących z Cordova. Niezależnie od tego, czy chodzi o nowy projekt, czy o usprawnienie przepływu pracy w aplikacji w toku, programiści powinni przyjrzeć się bliżej TACO CLI.
Funkcje przeładowania na żywo i synchronizacji urządzeń to ogromny wzrost produktywności. Istnieje również możliwość korzystania ze zdalnego serwera kompilacji, który pozwala programistom pracującym na komputerach z systemem Windows uczestniczyć w tworzeniu aplikacji, które muszą działać na iOS. W tym krótkim spojrzeniu na TACO nie omówiliśmy wszystkich jego funkcji ani integracji z wieloplatformowym edytorem Visual Studio Code. Aby uzyskać więcej informacji, zalecamy zapoznanie się z oficjalną dokumentacją.
Jakich narzędzi używasz, aby pracować wydajnie podczas tworzenia aplikacji Cordova? Chcielibyśmy usłyszeć od Ciebie. Jeśli znasz kogoś, kto uznałby ten artykuł za pouczający, podziel się nim! I śledź mnie na Twitter lub Modus Create: Front End Development.
