MerixGames

30 maja 2016

/ case studies

Jak to robimy: wykorzystanie Ionica przy tworzeniu aplikacji mobilnej

Kamil Grzyb

Wykorzystanie Ionica przy tworzeniu aplikacji mobilnej jest strzałem w dziesiątkę - framework ten nie tylko wpływa na skrócenie czas developmentu, lecz także na samą przyjemność pracy. Teorię tą mieliśmy okazję przetestować przy okazji naszego najnowszego projektu, w ramach którego zostaliśmy postawieni przed wyzwaniem ściśle określonego i nieprzekraczalnego deadlinu. Sprawdźcie sami, jak nasz software house poradził sobie z tym zadaniem.

Niedawno zamknęliśmy to kolejny projekt stworzony wspólnie z naszym Belgijskijskim partnera Digitopia - wcześniej mieliśmy okazję wspólnie pracować nad między innymi Touch&Go, Snakiem czy Walibi. Stworzona przez nas aplikacja miała być wykorzystana podczas dużej konferencji farmaceutycznej i służyć jako katalog produktów odtwarzany na urządzeniach dotykowych.

Istotne było przedstawienie produktów firmy w sposób intuicyjny. Każdy użytkownik aplikacji miał okazję zapoznać się z ogólnymi informacjami prezentowanymi w kartach produktów, a w razie potrzeby mógł także wysłać je na swoją skrzynkę e-mail w postaci jednego pliku pdf. Deadline projektu był ściśle ustalony i pod żadnym pozorem nie mógł być przekroczony. Naszym największym wyzwaniem było więc to, by w niecały miesiąc stworzyć aplikację, która miała działać bez zarzutów w dniu wydarzenia, czyli 15 grudnia 2015 roku.

Oczekiwania Klienta i cel projektu

  1. development nowoczesnej aplikacji mobilnej w krótkim czasie;
  2. przystosowaniem serwisu do ekranów dotykowych oraz urządzeń mobilnych typu smartphone (iOS i Android);
  3. wykorzystanie Ionica - frameworka HTML5;
  4. przedstawienie oferty, informacji o firmie oraz szeregu dodatkowych treści w przejrzysty i logiczny sposób;
  5. łatwa interakcja użytkownika z aplikacją i możliwość przesyłania kart produktów na konto email.

Wykorzystane technologie

Projekt, stworzony w technologii HTML5, oparty został na frameworku IONIC. Wykorzystywaliśmy także takie technologie jak  Apache Cordova, Sass oraz Django. Założeniem było odtwarzanie aplikacji na ekranach dotykowych od rozdzielczości 1360x768 do 1920x1080 (full HD) z możliwością adaptacji na urządzenia mobilne takie jak smartfony. 

Wersje językowe aplikacji

Interface został przygotowany w wersjach niderlandzkiej i francuskiej, same tłumaczenia przechowywane były zaś w pliku json. Za pomocą przycisku na stronie głównej możliwa była zmiana języka contentu. Na potrzeby samego wydarzenia przygotowaliśmy także wersję aplikacji typu single language z domyślnym tłumaczeniem niderlandzkim oraz brakiem możliwości zmiany wersji językowej.

Głównym założeniem projektu było przedstawienie w atrakcyjny sposób produktów Klienta. Aby tego dokonać istotne było odpowiednie filtrowanie oraz przejrzysta strona produktowa z zakładkami, w których można było znaleźć istotne informacje, zdjęcia oraz powiązane produkty.

Ionic app interface

Wysyłka karty produktu

Ważne było także udostępnienie opcji wysyłania maila z kartą produktu. Odbywało się to poprzez formularz, w którym należało wpisać dane i uzupełnić treść wiadomości. By umożliwić pisanie użyliśmy specjalnej klawiatury dotykowej Angular virtual keyboard, dostosowaliśmy układ klawiszy oraz ostylowaliśmy samą klawiaturę w taki sposób, by wizualnie pasowała do reszty aplikacji. Szablon e-mail zsynchronizowany został z wszystkimi przeglądarkami, a wiadomość z odpowiednią kartą produktu wysyłana była w postaci załącznika PDF.

Aplikacja, oprócz funkcji katalogu produktów, pełniła rolę informacyjną. Istotne było więc to, by prezentowana treść była atrakcyjna, a animacje przejść w menu zachęcały klientów do zapoznania się z prezentowaną ofertą.

Przy użyciu frameworka Django stworzona została funkcjonalność umożliwiająca zapisywanie się do newslettera. Przygotowany został także specjalny panel do odczytywania takich danych użytkowników jak:

  • ID urządzenia, z którego została dokonana subskrypcja;
  • data subskrypcji;
  • e-mail użytkownika.

W panelu przewidzieliśmy także opcje eksportu list subskrypcyjnych do piku json i xml.

Praca z Ionic

Ionic był dla nas całkowicie nowym frameworkiem, więc przed rozpoczęciem prac nad projektem poświęciliśmy sporo czasu na analizę możliwości i naukę. Nie licząc pierwszych dni, które wymagały od nas poznania podstaw działania technologii, byliśmy pozytywnie zaskoczeni tempem w jakim aplikacja powstała oraz łatwością pracy.

Mimo wymagań Klienta, by odzwierciedlić design pixel perfect w aplikacji, powstała ona w ekspresowym tempie i prace zostały ukończone przed deadlinem eventu. 

Ważnym było to, aby podczas eventu zaprezentować działanie Ionica w wersji mobilnej. Ze względu na długotrwały proces uploadowania aplikacji w IOS App Store, zaczęliśmy szukać innych rozwiązań. Naprzeciw wyszedł nam Ionic, ponieważ oparty jest na Angularze (framework JavaScript) oraz na Cordovie (platforma mobilna). W związu z tym mogliśmy opakować aplikacjo-stronę do pliku wynikowego, który uruchomiany jest na telefonie.

W celu ułatwienia prezentacji wersji mobilnej aplikacji wykorzystaliśmy także Ionic View, który uważamy za najciekawsze udogodnienie. Wystarczy, że klient na swoim telefonie zainstaluje Ionic View, a my mu podamy ID przetrzymywanej w chmurze aplikacji. W ten sposób błyskawicznie można zobaczyć  aplikację 1:1 na swoim urządzeniu. Klient w tej sytuacji jest odciążony od ciągłego instalowania aktualizacji. Wystarczy, że kliknie „synchronizuj” i aplikacja sama zaktualizuje się do najnowszej udostępnionej przez nas wersji.

Podsumowanie

Ionic jest frameworkiem, który z czystym sumieniem możemy polecić. Pozwala on stworzyć zarówno proste, jak i bardziej skomplikowane aplikacje. Krótki czas realizacji i przyjemność pracy przy tym wszystkim przekłada się na budżet jaki klient powinien zainwestować w projekt.

Czy wizja projektu wykorzystującego Ionica przypadłą Ci do gustu? Możesz także przeczytać więcej na temat technicznego aspektu tego typu projektów w artykule  Ionic (cz. 1): Poznaj front-end'owy zestaw narzędzi dla programistów.

Strona używa plików cookies. Wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.