Wprowadzenie do PhoneGap / Cordova

Transkrypt

1 Wprowadzenie do PhoneGap / Cordova

2 Urządzenia mobilne a desktopowe W 2010 roku Mary Meeker opublikowała raport, w którym przewidywała, że w 2014 roku ilość użytkowników mobilnych przekroczy liczbę osób korzystających z Internetu za pomocą urządzeń desktopowych. W 2012 roku Google Inc. ogłosiło na kongresie Mobile World Congress w Barcelonie, że już ponad 1 miliard osób korzysta z Internetu za pomocą urządzeń mobilnych. ile większość użytkowników komputerów stacjonarnych i laptopów również będzie korzystała z telefonów oraz tabletów, dla wielu użytkowników mobilnych telefon lub tablet to jedyne źródło dostępu do sieci.

3 Fakty o urządzeniach mobilnych użytkownicy urządzeń mobilnych korzystają z tych urządzeń pozostając w ruchu, jadąc samochodem lub komunikacją miejską, idąc z jednego spotkania na drugie. z jednej strony są nieograniczeni czasem i przestrzenią, bo mogą korzystać z telefonu zawsze i wszędzie, z drugiej podlegają ograniczeniom czasu i przestrzeni, gdyż muszą wykazywać podzielną uwagę i szybko docierać do konkretnych informacji. użytkownik korzystający z urządzeń mobilnych przede wszystkim chce jak najszybciej rozwiązać problem lub uzyskać informację.

4 Rozwiązania stosowane obecnie Rozdzielenie witryny internetowej na dwie Zastosowanie responsie design opartego o media queries Budowa oddzielnej aplikacji mobilnej

5 Rozdzielenie witryny internetowej na dwie Podejście to stosowane jest zwłaszcza przy dużych witrynach informacyjnych, w których ciężko jest ograniczyć strukturę informacji.

6 Cechy rozwiązania Dwie oddzielne witryny internetowe oparte o tę samą bazę danych. Obie witryny dostępne są przez przeglądarkę internetową zarówno na komputerze jak i na telefonie. Domyślna wersja witryny uruchamia się automatycznie na podstawie informacji o urządzeniu. Przebudowa warstwy wizualnej jednej z witryn nie wpływa na wygląd i działanie drugiej, jednakże przy większych modyfikacjach bazy danych trzeba również uaktualnić obie wersje strony. Dość kontrowersyjnie wychodzi to rozwiązanie przy badaniach SEO, gdyż dla wyszukiwarek i Google Analytics są to dwie różne witryny.

7 Zastosowanie responsie design opartego o media queries Projektowanie witryn i aplikacji internetowych z zastosowaniem responsive design polega na wprowadzeniu do kaskadowego arkusza styli CSS styli warunkowych przy pomocy media queries. Media queries umożliwiają rozpoznanie parametrów urządzenia, na którym wyświetlana jest aplikacja internetowa i zastosowanie styli określonych specjalnie dla niego. Rozwiązanie to wymaga gruntownego przemyślenia układu strony internetowej oraz zaprojektowania jej działania na każdym urządzeniu z osobna. Dzięki zastosowaniu projektowania responsywnego możliwe jest wykonanie tylko jednej aplikacji internetowej, na której interfejs i prezentacja treści będzie zmieniała się w zależności od potrzeb.

8 .site_container { position: relative; width: 1024px; overflow:hidden; }.site_container.columns { float: left; display: inline; }.row { margin:0px 0px 0.5em 0px; overflow:hidden; } /* Base Grid */.site_container.one.columns { width: 44px; }.site_container.two.columns { width: 108px; }.site_container.three.columns { width: 172px; }.site_container.four.columns { width: 236px; } /* Tablet Portrait size to standard 960 (devices and browsers) only screen and (min-width: 768px) and (max-width: 959px) {.site_container { width: 768px; }.site_container.one.columns { width: 28px; }.site_container.two.columns { width: 76px; }.site_container.three.columns { width: 124px; }.site_container.four.columns { width: 172px; } only screen and (max-width: 767px) {.site_container { width: 320px; }.site_container.one.columns,.site_container.two.columns,.site_container.three.columns,.site_container.four.columns { width: 300px; } }

9

10 Cechy rozwiązania Rozwiązanie to dobrze sprawdza się podczas tworzenia niewielkich witryn internetowych lub niezbyt skomplikowanych aplikacji, w których łatwo można ograniczyć ilość informacji prezentowanych na stronie. Dzięki zastosowaniu odpowiednich bibliotek i styli możliwe jest całkowite przebudowanie działania witryny, dzięki czemu na urządzeniach mobilnych wygląda jak aplikacja. Wszelkie zmiany w funkcjonalności w bazie danych wprowadza się tylko raz Aplikacja webowa działa cały czas na tym samym adresie http bez względu na urządzenie. Projektowanie witryn responsywnych jest też stosunkowo tanie oraz nie wymaga znajomości innych języków niż standardowe języki tworzenia witryn internetowych.

11 Budowa oddzielnej aplikacji mobilnej Oba zaprezentowane wcześniej rozwiązania mają istotną wadę do ich uruchomienia potrzeba uruchomionej przeglądarki internetowej i połączenia z Internetem. Ponadto nie zapewniają wsparcia dla wszystkich natywnych funkcjonalności urządzeń mobilnych. Dlatego coraz częściej firmy decydują się na budowę alternatywnej aplikacji mobilnej, która działałaby również off-line i korzystała ze wszystkich dobrodziejstw API urządzenia mobilnego. Problem: Brak spójności między platformami mobilnymi. Liczba platform mobilnych się zwiększa, a co za tym idzie rośnie liczba środowisk, na które trzeba tworzyć aplikacje. Różnice między platformami są znaczne, wykorzystują one różne języki programowania i mechanizmy.

12 Cechy rozwiązania jeśli firma chce zaistnieć na wszystkich z nich, musi zaprojektować i wytworzyć aplikację na każdą platformę osobno. to oznacza wykonanie tak naprawdę kilku produktów zamiast jednego, a co za tym idzie wyższe koszty. aby można było stworzyć aplikację na niektóre urządzenia mobilne, trzeba ją zaprojektować w odpowiednim środowisku (np. ios dla iphone, Widows dla Windows 8). To oznacza korzystanie z komputerów z zainstalowanymi różnymi systemami. wszystkie wersje aplikacji na wszystkie urządzenia powinny zapewniać spójną funkcjonalność, interfejs i te same wersje oraz wymianę informacji pomiędzy różnymi urządzeniami (np. wymiana danych między kalendarzem Google i icalem).

13 Wprowadzenie do PhoneGap PhoneGap to opensource owy framework służący do szybkiego budowania multi-platformowych aplikacji przy użyciu technologii związanych z tworzeniem aplikacji webowych: języka znaczników HTM5, kaskadowych arkuszy stylów CSS3, języka skryptowego Java Script. Został stworzony przez firmę Nitobi, a następnie w 2011 roku został wykupiony przez firmę Adobe i został przekształcony w opensource owy projekt pod skrzydłami Apache Software Foundation, zmieniając przy okazji nazwę na Cordova. Obecnie obie te nazwy funkcjonują zamiennie.

14 Działanie PhoneGap PhoneGap zapewnia pomost pomiędzy aplikacjami pisanymi w ten sposób, a środowiskiem mobilnym, dzięki czemu można tworzyć aplikacje bez znajomości języka specyficznego dla danego środowiska mobilnego. W rezultacie powstaje aplikacja hybrydowa, w której warstwa prezentacji renderowana jest przez WebView (widok webowy), ale nie ma formy typowej aplikacji webowej, gdyż jest spakowana jak zwykłe aplikacje, może podlegać dystrybucji, a ponadto ma dostęp do API danego urządzenia. Wszystkie platformy mobilne wykorzystują osadzone przeglądarki internetowe, tzw. Web View, w swoich aplikacjach. Dzięki temu, że przeglądarka jest osadzona, użytkownik nie widzi interfejsu typowego dla przeglądarki desktopowej, a jedynie uruchomioną na niej aplikację wyświetlającą stronę HTML wzbogaconą o nawigację odpowiadającą jej potrzebom.

15 Wsparcie dla technologii HTML5 i CSS3 Przeglądarka Android iphone BlackBerry Windows 7 Phone WebOS Nokia Media Standard HTML5/CSS3 Webkit-based Webkit-based Webkit-based IE 7-based Webkit-based Webkit-based Webkit-based

16 Architektura PhoneGap

17 Funkcjonalności PhoneGap akcelerometr, służący do określania zmian w położeniu urządzenia; kompas wykorzystywany w aplikacjach nawigacyjnych i wykorzystujących mapy; geolokalizacja wykorzystywana w mapach, szybkościomierzach; kamera pozwala na pozyskiwanie zdjęć z kamery oraz dostęp do zdjęć na dysku; media umożliwia dostęp kontrolę do mediów, odgrywanie plików audio oraz video;

18 Funkcjonalności PhoneGap sieci umożliwia sprawdzenie statusu sieci oraz jej rodzaju; kontakty umożliwia zarządzanie kontaktami i dzwonienie; pliki - zapewnia dostęp do plików i katalogów, zapis informacji; magazyn wbudowana baza danych umożliwiająca przechowywanie informacji; powiadomienia umożliwia reakcję na jakieś zdarzenie w postaci dźwięku, wibracji lub komunikatu.

19 Zalety PhoneGap ogólnodostępny, darmowy framework opensource; możliwość pisania aplikacji multiplatformowych bez znajomości języków specyficznych dla każdej z nich; brak ograniczeń z wykorzystaniem Java Scriptu, można korzystać z bibliotek zewnętrznych, np. jquerymobile, BackBone ; dostęp do większości powszechnie używanych funkcji sprzętowych wykorzystywanych przez aplikacje natywne; szybsze testowanie aplikacji pisanej pod wiele platform jednocześnie; aplikacje tańsze w wytworzeniu i utrzymaniu;

20 Wady PhoneGap aplikacje w PhoneGap są wolniejsze i mniej wydaje niż aplikacje natywne; ograniczenia do jedynie udostępnionej funkcjonalności (można zrobić tylko tyle, na ile pozwala sam HTML5 i konkretna przeglądarka w danym urządzeniu); kod aplikacji jest ogólnodostępny i podatny na kradzieże; opóźnienia w aktualizacji PhoneGap w stosunku do zmian w środowisku mobilnym; domyślnie brak natywnego wyglądu aplikacji (natywnych kontrolek);

21 Emulator Ripple

22 Emulator Ripple Emulator Ripple to wieloplatformowy emulator do testowania aplikacji mobilnych tworzonych w środowisku HTML5. Ripple udostępniony jest jako rozszerzenie przeglądarki Google Chrome i pozwala na proste i szybkie testowanie tworzonych aplikacji mobilnych. Ripple umożliwia testowanie kodu JavaScript w czasie rzeczywistym, na wielu środowiskach mobilnych i rozdzielczościach ekranu bez potrzeby restartu testów.

23 Panele do testowania w aplikacji: Devices panel pozwala na szybkie przełączenie pomiędzy urządzeniami wspieranymi przez wybraną platformę oraz między widokami: portrait i landscape. Platforms panel umożliwia przełączenie pomiędzy różnymi platformami. Information panel dostarcza informacji o aplikacji. Accelerometer panel umożliwiający symulację działania akcelerometru i obracanie oraz poruszanie urządzeniem w trzech wymiarach. Messaging panel pozwalający na pisanie wiadomości SMS i wysyłanie ich do urządzenia. Push panel umożliwia używanie BlackBerry WebWorks Push API. Settings panel ustawień Ripple. Device & Network Settings panel zawierający ustawienia sieci oraz konfigurację urządzenia. Zawiera informacje o IMEI oraz PIN, o połączeniach sieciowych, itd..

24 Panele do testowania w aplikacji: Geo Location panel do symulacji zmian w położeniu geograficznym urządzenia i do testowania aplikacji opartych o GPS. Events panel do symulacji zdarzeń dostępnych na danym urządzeniu. Config panel wyświetla informacje zawarte w pliku config.xml aplikacji, a także zawiera komunikaty o błędach i niezgodnościach w konfiguracji. Phone panel symulujący różne stany połączeń telefonicznych, np. nieodebrane połączenia. Build panel do ustawiania konfiguracji kompilowanej aplikacji.