Apache Cordova projekt PDF

Preview

Summary

Apache Cordova projekt...

Description

Sieciowe Systemy Informacyjne

Framework: Apache Cordova Prowadzący projekt: ...

Wykonał:

SPIS TREŚCI 1. Wstęp 1.1. Aplikacja internetowa

3 3

1.2. Aplikacja natywna 1.3. Aplikacja hybrydowa 1.3.1. Frameworki aplikacji hybrydowych

3 3 3

2. Apache Cordova 2.1. Historia 2.2. Opis 2.3. Zależność środowiska docelowego od środowiska deweloperskiego 2.4. Architektura 2.5. Wtyczki

4 4 4 4 5 8

3. Instrukcja użycia 3.1. Instalacja 3.2. Pierwszy projekt 3.4. Plik config.xml 3.5. Konfigurowanie ikony aplikacji

8 8 9 11 12

4. Przykłady 13 4.1. Konwersja projektu Angulara na aplikację mobilną za pomocą frameworka Apache Cordova 13 4.2.1. Aplikacja pokazująca pogodę na podstawie geolokalizacji 17 5. Wnioski

20

6. Bibliografia

20

2

1. Wstęp 1.1. Aplikacja internetowa Aplikacja internetowa jest witryną internetową dostosowaną do specyfiki urządzeń mobilnych. Aplikacje internetowe cechują się tym, że ich interfejs użytkownika (UI) jest zbudowany za pomocą standardowych technologii webowych, są dostępne pod określonym adresem URL (publicznie lub prywatnie, a także z możliwością logowania), oraz są zoptymalizowane pod kątem specyfiki urządzeń mobilnych. Aplikacje internetowe nie są instalowane na telefonach czy tabletach, nie są dostępne w sklepie z aplikacjami oraz nie są napisane w Javie.

1.2. Aplikacja natywna Aplikacje natywne są instalowane na urządzeniu, mają dostęp do sprzętu (głośników, akcelerometru, kamery itp.) oraz są napisane w Javie. Poza tym ich cechą charakterystyczną jest to, że są dostępne w sklepie z aplikacjami (np. Google Play).

1.3. Aplikacja hybrydowa Aplikacja hybrydowa jest to aplikacja napisana z wykorzystaniem technologii webowych, która jest instalowana na urządzeniach mobilnych, dzięki czemu posiada możliwość korzystania z natywnych funkcjonalności tych urządzeń. Wykorzystanie ogólnie znanych technologii webowych (HTML, JS, CSS) pozwala na tworzenie aplikacji, które mogą być uruchomione na różnych platformach. W przypadku aplikacji natywnej potrzebujemy trzech różnych aplikacji napisanych w Objecitve-C (iOS), Java (Android) oraz C# (Windows Phone). Żadne rozwiązanie nigdy nie jest idealne. Przy dużych, rozbudowanych aplikacjach i grach, gdzie ważna jest szybkość działania, aplikacja hybrydowa ustępuje miejsca natywnemu kodowi. Jednak z czasem się to zmienia i szybkość działania takiej aplikacji wciąż rośnie wraz z rozwojem technologii i coraz szybszymi urządzeniami mobilnymi.

1.3.1. Frameworki aplikacji hybrydowych Do wytwarzania aplikacji hybrydowych powstało wiele frameworków, które umożliwiają łączenie technologii webowych z natywnymi funkcjonalnościami urządzeń mobilnych, należą do nich m.in.: ● Apache Cordova (dawniej PhoneGap) ● Ionic ● Sencha Touch ● KendoUI ● React Native ● Intel XDK

3

2. Apache Cordova 2.1. Historia Pierwotna nazwa frameworka to PhoneGap, było to rozwiązanie stworzone przez firmę Nitobi. Gdy w 2011 roku Adobe Systems przejęło Nitobi, wypuściło otwartą wersję oprogramowania pod nazwą Apache Cordova na licencji Apache. Adobe Systems nadal rozwija PhoneGap i wykorzystuje go w swoich komercyjnych rozwiązaniach, np. w usłudze PhoneGap Build. Apache Cordova szybko zyskało popularność, obecnie posiada bardzo aktywną i liczną społeczność, która przyczynia się do ciągłego rozwoju frameworka.

2.2. Opis Apache Cordova to framework zawierający zestaw bibliotek i interfejsów programistycznych, które umożliwiają dostęp do zasobów urządzeń mobilnych, pracujących pod kontrolą różnych systemów operacyjnych. Biblioteki zostały przygotowane w różnych wersjach, dla poszczególnych systemów operacyjnych, ale zachowano w nich identyczny sposób wywoływania poleceń i interfejs programistyczny, dzięki czemu niezależnie od systemu, na którym będzie uruchamiana aplikacja, wszystkie funkcje wywoływane są tak samo. Istnieją tylko pojedyncze wyjątki, związane z niedostępnością nielicznych funkcji w niektórych systemach operacyjnych oraz różnice w definiowaniu ustawień i konfiguracji aplikacji. Aplikacja napisana w HTMLu i JavaScripcie, korzystająca z bibliotek Apache Cordova oraz dowolnych innych bibliotek JavaScriptowych, jest następnie kompilowana pod kątem wybranego systemu operacyjnego i w ten sposób powstaje plik, który można np. wgrać do telefonu z Androidem, czy nawet umieścić w sklepie App Store albo Google Play.

2.3. Zależność środowiska deweloperskiego

docelowego

od

środowiska

Problemem, którego nie potrafili rozwiązać twórcy frameworka, jest zależność środowiska docelowego od środowiska deweloperskiego. Co prawda, niezależnie czy posługujemy się systemem Windows, Linux, czy Mac OS, możemy rozwijać program na dowolny z mobilnych systemów operacyjnych, ale samo zbudowanie pliku wykonywalnego (instalowalnego) jest już ograniczone. Korzystając z frameworka w systemie Windows, można skompilować aplikację dla dowolnych systemów operacyjnych, za wyjątkiem iOS. Korzystając z Mac OS można skompilować aplikację dla dowolnych systemów operacyjnych, za wyjątkiem Windows Phone i Windows. W systemie Linux nie można skompilować programów ani pod systemy z rodziny Windows, ani pod Mac OS. Poniżej została przedstawiona tabela obrazująca możliwość kompilacji pliku instalacyjnego w poszczególnych systemach operacyjnych. Tabela 1. Możliwość kompilacji pliku wykonywalnego korzystając z Apache Cordova Platforma docelowa

Mac OS

Linux

Windows

4

Amazon FireOS

tak

tak

tak

Android

tak

tak

tak

BlackBerry

tak

nie

tak

Firefox OS

tak

tak

tak

iOS

tak

nie

nie

Ubuntu Touch

nie

tak

nie

Windows Phone 8

nie

nie

tak

Windows (8.0, 8.1, Windows Phone 8.1)

nie

nie

tak

Tizen

nie

tak

tak

Browser

tak

tak

tak

Ograniczenie takiej jest problematyczne, ponieważ posiadacz komputera z systemem Linux nie będzie w stanie przygotować programu na potrzeby bardzo popularnych iPadów, iPhone’ów czy iPodów. Pojawiło się jednak rozwiązanie w postaci usługi PhoneGap Build, świadczonej przez firmę Adobe. Usługa ta oferowana jest w wersjach: bezpłatnej i płatnej, które różnią się ograniczeniami. Przygotowane pliki projektu są ładowane na serwery Adobe i kompilowane w chmurze, w efekcie czego użytkownik otrzymuje pliki gotowe do wgrania do smartfona, czy do umieszczenia w sklepie z aplikacjami. PhoneGap Build opiera się o darmową platformę PhoneGap, która jest pewnego rodzaju dystrybucją platformy Cordova. Dlatego projekt napisany w Cordovie, po drobnych przeróbkach może być skompilowany z użyciem danej usługi, najczęściej zmiany sprowadzają się do zastąpienia słowa "cordova" wyrazem "phonegap", a parametry używanych poleceń się nie zmieniają.

2.4. Architektura

Rysunek 1. Uproszczony schemat architektury aplikacji hybrydowej

Architektura aplikacji wykorzystującej framework Apache Cordova jest oparta na podstawie klasycznej aplikacji hybrydowej. Wewnątrz kodu natywnego znajduje się aplikacja webowa, do takiego zagnieżdżenia wykorzystywany jest komponent WebView.

5

Rysunek 2. Schemat architektury z komponentem WebView

Komponent WebView umożliwia osadzenie przeglądarki w interfejsie aplikacji natywnej. W aplikacji hybrydowej komponent WebView wypełnia cały interfejs aplikacji. Do komunikacji aplikacji webowej z urządzeniem wykorzystywane są wtyczki, tak zwane pluginy. Przekształcają one wywołania funkcji w języku JavaScript na wywołania odpowiadających im funkcji w języku natywnym, stanowią interfejs komunikacyjny pomiędzy aplikacją webową a urządzeniem mobilnym.

Rysunek 3. Zastosowanie wtyczek Apache Cordova

6

Rysunek 4. Szczegółowy schemat architektury aplikacji Apache Cordova

Elementy składowe aplikacji Apache Cordova: ● WebView - odpowiada za wygenerowanie widoku interfejsu użytkownika napisanego z wykorzystaniem technologii webowych. ● WebApp - jest to część, w której znajduje się kod aplikacji. Sama aplikacja jest zaimplementowana jako strona internetowa, domyślnie lokalny plik o nazwie index.html, który odwołuje się do CSS, JavaScript, obrazów, plików multimedialnych lub innych zasobów niezbędnych do uruchomienia i poprawnego działania. Aplikacja jest uruchamiana w WebView w natywnym opakowaniu aplikacji. Kontener zawiera ważny plik - config.xml, który dostarcza informacji o aplikacji i określa parametry wpływające na jej działanie, np. czy odpowiada na zmiany orientacji. ● Cordova Plugins - wtyczki są integralną częścią ekosystemu cordova. Zapewniają interfejs dla aplikacji i natywnych komponentów do komunikacji ze sobą i powiązań ze standardowymi interfejsami API urządzeń. Umożliwia to wywoływanie kodu natywnego z poziomu JavaScript. Projekt Apache Cordova utrzymuje zestaw wtyczek zwanych Core Plugins. Te podstawowe wtyczki zapewniają aplikacjom dostęp do funkcji urządzenia, takich jak bateria, kamera, kontakty itp. Istnieje możliwość tworzenia i dodawania własnych wtyczek.

7

2.5. Wtyczki Wtyczka to pakiet wstrzykiwanego kodu, który pozwala komponentowi WebView, komunikować się z platformą natywną, na której działa. Wtyczki zapewniają dostęp do funkcji urządzenia i platformy, które są zwykle niedostępne dla aplikacji internetowych. Wszystkie główne funkcje API Cordova są implementowane jako wtyczki. Istnieją także dodatkowe wtyczki, które oferują rozmaite funkcjonalności np.: skanowanie kodów kreskowych, komunikację NFC lub dostosowywanie interfejsów kalendarza. Dostępne wtyczki można wyszukiwać na oficjalnej stronie Apache Cordova. Wtyczki zawierają gotowe schematy graficzne i mechanizmy prezentowania informacji w sposób typowy dla urządzeń mobilnych lub ułatwiają dostęp do niektórych serwisów internetowych, takich jak np. Google Maps czy Facebook. Warto też zwrócić uwagę na pluginy ułatwiające tworzenie aplikacji o wyglądzie natywnym dla poszczególnych platform mobilnych, takich jak np. Blackberry, czy umożliwiające komunikację za pomocą alternatywnych interfejsów. Począwszy od Cordovy w wersji 3.0, standardowa instalacja, nie zawiera żadnych wtyczek i trzeba je dodać samodzielnie.

3. Instrukcja użycia 3.1. Instalacja Aby zainstalować Apache Cordova należy mieć zainstalowane manager pakietów npm, manager ten instalowany jest wraz z Node.js - środowiskiem uruchomieniowym JavaScript opartym o silnik V8. Aby zainstalować Node.js należy pobrać plik instalacyjny z oficjalnej strony projektu nodejs.org. Aby sprawdzić czy w systemie zainstalowany jest Node.js należy wpisać w wierszu poleceń wpisać: C:\> node -v v10.7.0 W celu sprawdzenia czy w systemie zainstalowany jest manager pakietów npm, należy wpisać: C:\> npm -v 6.1.0 Jeżeli w systemie mamy zainstalowany manager pakietów npm, Apache Cordova instalujemy za pomocą polecenia C:\> npm install -g cordova

3.2. Pierwszy projekt W celu utworzenia pustego projektu Cordova za pomocą wiersza poleceń, należy przejść do katalogu w którym chcemy utworzyć nasz projekt i wpisać polecenie cordova create , gdzie jest ścieżką jaka zostanie utworzona do katalogu z projektem.

8

Aby uzyskać pomoc można wpisać: cordova help create cordova create FirstApp W wyniku polecenia zostanie utworzony katalog FirstApp zawierający pliki projektu. W celu uruchomienia projektu i sprawdzenia czy projekt działa należy dodać platformę uruchomieniową, domyślnie projekt nie zawiera żadnych platform. Aby uruchomić projekt w przeglądarce internetowej na komputerze lokalnym należy dodać platformę browser, wykonujemy to poleceniem. cd FirstApp cordova platform add browser Po dodaniu platformy, możemy uruchomić aplikację za pomocą polecenia cordova run : cordova run browser

Aplikacja zostanie uruchomiona, domyślnie będzie dostępna na porcie 8000.

Rysunek 5. Widok aplikacji w przeglądarce

3.3. Struktura projektu

9

Rysunek 6. Struktura wygenerowanego projektu

●

hooks - katalog może zawierać skrypty służące do dostosowywania poleceń cordova-cli. Wszelkie skrypty dodawane do tego katalogu będą wykonywane przed i po poleceniach odpowiadających nazwie katalogu. Pozwala to na przykład na zastosowanie własnych narzędzi do sprawdzania formatowania kodu w plikach javascript przed każdą kompilacją. W tym celu należy utworzyć w katalogu hooks katalog “before_build” i wewnątrz dodać skrypt danego narzędzia. Jest to rozwiązanie obecnie przestarzałe (deprecated), ponieważ przez samo dodanie skryptu do folderu staje się on wykonywalny. Obecnie preferuje się dodawanie definicji “hooks” w pliku config.xml lub plugin.xml.

●

node_modules - zawiera pakiety npm wykorzystywane przez cordove, katalog tworzony jest automatycznie i zawiera pakiety zdefiniowane w pliku package.json.

●

platforms - Zawiera cały kod źródłowy i skrypty budowania dla platform dodanych do projektu. Podczas korzystania z interfejsu CLI do budowania aplikacji nie należy edytować żadnych plików w katalogu platforms. Pliki w tym katalogu są rutynowo nadpisywane podczas przygotowywania aplikacji do budowania lub po ponownym zainstalowaniu wtyczek.

●

plugins - wszelkie dodane wtyczki zostaną wyodrębnione lub powinny być skopiowane do tego katalogu.

●

res - katalog zawiera zasoby wykorzystywane przez aplikację, m.in. ikonę aplikacji wyświetlaną w systemie urządzenia mobilnego

●

www - Zawiera pliki projektu typu .html, .css i .js oraz zasoby wykorzystywane w aplikacji webowej. Katalog źródłowy www jest reprodukowany w podkatalogu każdej platformy, pojawiając się na przykład w platforms/ios/www lub platforms/android/assets/www. Ponieważ CLI ciągle kopiuje pliki ze źródłowego folderu www, należy edytować tylko te pliki, a nie te znajdujące się w podkatalogach platformy.

●

config.xml - plik konfiguracyjny projektu, pozwala dostosować zachowanie projektu.

10

3.4. Plik config.xml Config.xml to globalny plik konfiguracyjny, który kontroluje wiele aspektów działania aplikacji cordova. Ten niezależny od platformy plik XML określa główne funkcje API Cordova, wtyczki i ustawienia specyficzne dla platformy. W przypadku projektów utworzonych za pomocą interfejsu CLI Cordova ten plik można znaleźć w głównym katalogu projektu.

HelloWorld

A sample Apache Cordova application.

Apache Cordova Team



Rysunek 7. Struktura pliku config.xml

●

● ● ●

●

widget - element główny pliku config.xml. Atrybut id zawiera identyfikator odwrotnej domeny aplikacji, atrybut version określa pełny numer wersji wyrażony w znaczniku major/minor/patch. Element może zawierać również inne atrybuty pozwalające określić wersję dla poszczególnych platform. name - element określa nazwę aplikacji, czyli nazwę która będzie wyświetlana w urządzeniu oraz sklepie aplikacji. description i author - elementy metadanych i informacji kontaktowych, które mogą pojawić się w ramach oferty app-store. content - element definiuje stronę początkową aplikacji w katalogu zasobów internetowych najwyższego poziomu. Wartością domyślną jest index.html, która zwykle pojawia się w katalogu najwyższego poziomu projektu. access - element określa zestaw domen zewnętrznych, z którymi aplikacja może się komunikować. Domyślna wartość pokazana powyżej pozwala mu uzyskać dostęp do dowolnego serwera

Plik konfiguracyjny, może zawierać również następujące elementy: ● plugin - określa szczegóły dotyczące wtyczki. Element jest automatycznie dodawany do pliku config.xml projektu po dodaniu wtyczki za pomocą opcji --save. ● allow-navigation - kontroluje, do których adresów URL można przejść w komponencie WebView. ● allow-intent - określa, które adresy URL aplikacja może poprosić system o otwarcie. Domyślnie żadne zewnętrzne adresy URL nie są dozwolone. ● platform - pozwala określić specjalne ustawienia tylko dla wybranej platformy ●

engine - określa szczegóły dotyczące platformy

11

3.5. Konfigurowanie ikony aplikacji Ikonę aplikacji można zdefiniować za pomocą elementu icon w pliku config.xml. Jeśli żadna ikona nie zostanie określona, wykorzystane będzie logo Apache Cordova.





Rysunek 8. Przykład konfiguracji ikony aplikacji dla systemu Android

Atrybuty elementu icon różnią się w zależności od platformy, dlatego definicję ikony umieszczamy dla każdej platformy osobno. Plik ikony powinien zostać umieszczony w katalogu res. Ikony nie można zdefiniować dla platformy browser.







Rysunek 9. Przykład konfiguracji ikony aplikacji dla systemu iOS

12

4. Przykłady 4.1. Konwersja projektu Angulara na aplikację mobilną za pomocą frameworka Apache Cordova W poniższym przykładzie zostanie opisane jak z stworzonego projektu w Angularze stworzyć aplikację mobilną w kilku prostych krokach przy użyciu frameworka Apache Cordova. Najpierw potrzebujemy wygenerować szablon projektu Angulara. W bashu robimy to komendą: ng new angular-cordova-example W wyniku wykonania polecenia zostanie stworzony projekt i pobrane wszystkie potrzebne pakiety npm. Po zakończeniu procesu przechodzimy do stworzonego katalogu z projektem: cd angular-cordova-example Stworzony projekt możemy uruchomić za pomocą polecenia npm start Aplikacja webowa zostanie uruchomiona i będzie domyślnie dostępna na porcie 4200, po otwarciu w przeglądarce wyświetli się następujący widok:

Rysunek 10. Widok aplikacji w wersji webowej w przeglądarce internetowej

Kolejnym krokiem jest zbudowanie wersji produkcyjnej naszej aplikacji. Ważne aby oprócz zbudowania komenda zawierała także zmianę podstawowego adresu głównego pliku html (index.html) z “\” na “.”, gdyż wtedy nasza aplikacja może się uruchomić z biały

13

ekranem. Innym ważnym parametrem polecenia jest również wskazanie wyjściowej ścieżki dla plików wersji produkcyjnej naszego projektu, gdyż domyślnie jest utworzony podkatalog, przez co Apache Cordova może mieć problem z lokalizacją konkretnych plików. Tak więc polecenie wygląda następująco: ng build --prod --base-href . --output-path=dist Po stworzeniu wersji produkcyjnej możemy przejść do kolejnego etapu konwersji jakim jest stworzenie projektu Cordovy w folderze projektu Angulara, tak by ułatwić potem organizację w projekcie. Projekt tworzony jest poleceniem: cordova create mobile Po tej komendzie powstanie nam nowy folder w projekcie Angulara o nazwie mobile, do którego przechodzimy poleceniem: cd mobile Następnie ważnym krokiem jest dodanie platformy, na którą chcemy przekonwertować nasz projekt Angularowy. Oprócz androida, którego wybierzemy istnieje wiele platform, które są wspierane przez Apache Cordova takie jak: iOS, Windows Phone, Ubuntu OS i wiele innych. Platforma dodawana jest za pomocą instrukcji: cordova platform add android Dzięki niemu do projektu mobilnego Apache Cordova zostanie dodana platforma Android. Teraz przejdziemy do powiązania dwóch projektów, które zaczniemy od usunięcia folderu www w projekcie mobile w następujący sposób: rm -rf www Po usunięciu folderu www należy stworzyć twarde dowiązanie do folderu www wersji produkcyjnej projektu Angular. Wykonuje się je przy użyciu następującej komendy: ln -s ../dist www W tym momencie w naszym projekcie Apache Cordova z powrotem pojawia się folder www, którego zawartością jest wersja produkcyjna ap...