Dzisiejszy wpis będzie poświęcony narzędziu do tworzenia hybrydowych aplikacji mobilnych – Ionic. Zostanie przedstawiony sposób działania narzędzia i przejdziemy przez cały proces – od instalacji do uruchomienia.
Ionic to rozbudowane narzędzie, które przy pomocy Cordovy umożliwia tworzenie bogatych i w pełni funkcjonalnych aplikacji mobilnych.
Do zbudowania aplikacji w Ionic’u wykorzystujemy technologie webowe – Angular, HTML, CSS. Cordova odpowiedzialna jest za natywną część aplikacji – platformy, wtyczki, webview.
Połączenie tych dwóch technologii daje nam możliwość tworzenia hybrydowych aplikacji mobilnych, czyli połączenie części natywnej z częścią webową.
Zaletami takiego zastosowania jest bardzo duża uniwersalność naszych aplikacji – pisząc raz, możemy aplikacje uruchamiać na wielu platformach np. iOS, Android, Windows lub jako aplikację webową na serwerze.
1. Instalacja
Przejdziemy najpierw krok po kroku przez proces instalacji środowiska.
a) Node.js
brew install node
b) Cordova
sudo npm install -g cordova
c) Ionic
sudo npm install -g ionic
2. Tworzenie projektu
Aby utworzyć projekt wpisujemy podaną komendę w terminalu.
ionic start {nazwa_projektu} {starter}
starter – to szablon, który zostanie wykorzystany przez framework do stworzenia naszego projektu. Możemy utworzyć pusty projekt wpisując „blank”. Lub skorzystać z szablonu z wbudowanym menu (podając „sidemenu”) czy zakładkami („tabs”).
Przykład:
ionic start myAwesomeApp tabs
Po wykonaniu tej operacji zostaną zainstalowane wszystkie potrzebne zależności.
3. Podział aplikacji
Struktura projektu wygląda następująco:
Kod źródłowy naszego programu znajduje się w katalogu src, wyjściowe zbudowane pliki w www, ikona oraz ekran startowy w resources, biblioteki w node_modules, dodatkowe skrypty w hooks, wtyczki z cordovy w plugins oraz środowiska platform w platforms (2 ostatnie katalogi tworzone są podczas wywołania akcji „build” i „run” czyli podczas budowania projektu lub przy ręcznym dodaniu tych składników).
4. Budowanie aplikacji
Aby zbudować projekt, należy wywołać akcję build lub run jeśli chcemy go od razu uruchomić.
ionic cordova run ios/android –prod –release
lub
ionic cordova build ios/android –prod –release
Framework najpierw zbuduje nasze źródła (część webową) do plików wyjściowych, które będą uruchamiane przez konkretny webview, a następnie wykona się proces budowania części natywnej dla iOS (wymagany jest system operacyjny OSX oraz Xcode) lub Android (Wymagana jest platforma JDK oraz Android SDK).
Po wykonaniu tych operacji w katalogu platforms znajdziemy zbudowany projekt.
a) dla iOS’a
b) dla Android’a
Te pliki posłużą nam do wgrania aplikacji na dane urządzenie.
5. Uruchamianie na urządzeniu
a) iOS
– Otwieramy nasz wcześniej zbudowany projekt *.xcodeproj.
– Wybieramy urządzenie na jakim uruchomimy naszą aplikację (fizyczne urządzenie lub emulator).
– Następnie klikamy przycisk „Run” (cmd + r), który powoduje kompilacje projektu i uruchomienie na wybranym urządzeniu.
b) Android
– Wpisujemy komendę
ionic cordova run android
Framework przy pomocy Android SDK zbuduje aplikację (plik .apk) oraz zainstaluje ją na wybranym urządzeniu lub emulatorze.
Podsumowanie
Jak widzimy Ionic pozwala nam w łatwy i szybki sposób tworzyć aplikacje mobilne. W tym artykule został przedstawiony bardzo prosty przykład wykorzystania narzędzia, nie zmienia to jednak faktu, że dzięki rozbudowanemu ekosystemowi frameworka np. Ionic Cloud, możemy wykorzystać narzędzie do budowania wysoce zaawansowanych aplikacji 🙂
Praktyczne wykorzystanie Ionic’a możecie sprawdzić w naszej autorskiej aplikacji mobilnej dedykowanej ecommerce.
Android
https://play.google.com/store/apps/details?id=pl.isystems.isklep
iOS
https://itunes.apple.com/us/app/i-sklep/id1169416679
Po więcej informacji na temat działania framework’a odsyłam na stronę Ionic’a 🙂
http://ionicframework.com/docs/
Autorem tekstu jest Kamil Moroń.
