Ažuriranje Ionic Android aplikacije bez Google Storea

Ažuriranje Ionic aplikacije moguće je na nekoliko načina. Prvi je naravno koristeći Google Store, drugi je koristeći Ionic Deploy, treći je ručna instalacija nove verzije aplikacije svakom korisniku posebno dok je četvrti način koristeći App Update plugin (u slučaju ovog plugina moguće je ažurirati isključivo Android verzije Ionic aplikacije).

Više o načinu korištenja App Update plugina u nastavu ovog blog posta.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju i odmah dodajem Android platformu jer kasnije planiram aplikaciju pokrenuti na Android mobilnom uređaju

Sada ću instalirati App Update plugin koji će biti zadužen za ažuriranje aplikacije.

Plugin odmah dodajem u app.module.ts

Trenutna verzija aplikacije (0.0.1) navedena je u config.xml datoteci.

Kako bi kasnije mogao provjeriti postoji li nova verzija Android aplikacije moram ugraditi glavnu funkcionalnost koja će se nalaziti unutar home.ts datoteke.

Za potrebu ovog primjera promijeniti ću sadržaj unutar home.html datoteke u kojoj ću prikazati trenutnu verziju Ionic aplikacije.

P.S. Nakon instalacije App Update plugina nisam mogao instalirati Ionic aplikaciju na uređaj niti kreirati APK zbog sljedeće greške

Ažuriranje Ionic Android aplikacije

To sam riješio instalacijom Android Support v4 client library

Aplikaciju nakon toga uspješno pokrećem

Ažuriranje Ionic Android aplikacije

Nova verzija aplikacije

Sada ću kreirati novu verziju aplikacije u kojoj ću samo promijeniti sadržaj unutar home.html datoteke.

Također, isto moram napraviti i unutar config.xml datoteke jer inače nije moguće ažurirati aplikaciju.

Gdje se nalazi nova verzija aplikacije?

Pretpostavimo da moju aplikaciju koristi nekoliko desetaka osoba na raznim lokacijama i da svima njima moram poslati novu verziju. S obzirom da to nisam u mogućnosti napraviti koristeći npr. Google Store moram smisliti novu lokaciju s koje korisnici mogu preuzeti novu verziju aplikacije. Ranije sam već unutar Ionic aplikacije naveo da će se nove verzije aplikacije nalaziti na poveznici ‘https://www.tomislavstankovic.com/Ionic/update.xml’ pa ju sada moram i kreirati.

To činim putem FTP-a na način da kreiram mapu naziva “Ionic” unutar koje se nalazi informacija u novoj verziji Ionic aplikacije kao i sama Ionic aplikacija tj. novi APK.

Kreiram datoteku update.xml

I uploadam novi APK.

Ažuriranje Ionic Android aplikacije

Kada sljedeći put pokrenem aplikaciju automatski će se provjeriti postoji li ažuriranje i ako postoji ono će se automatski instalirati.

Ažuriranje Ionic Android aplikacije

Zaključak

Korištenje App Update plugina dobro rješenje u slučajevima kada želite svoju Ionic aplikaciju učiniti dostupom odabranom krugu osoba, npr. unutar neke tvrtke, tj. kada ju ne želite učiniti javno dostupnom putem Google Storea.

I za kraj, struktura projekta prema package.json datoteci

Ionic 3 & Google Maps – prikaz rute između dvije lokacije

U ovom ću blog postu koristiti Google Maps Directions API za prikaz rute od jedne do druge lokacije. Također, ovaj će blog post biti vrlo sličan jednom kojeg sam objavio ranije ove godine pod naslovom “Ionic 3 – Prikaz Google mape“.

Priprema Ionic projekta

Za početak kreiram novi Ionic projekt.

Aplikacija sada nema nikakve funkcionalnosti pa ću prije nego implementiram Google Maps Directions API implementirati Lazy Loading. Ovaj korak nije potreban i može se bez njega, ali će dobro za kasnije brže učitavanje aplikacije.

Prvi korak koji je potrebno učiniti tiče se stranice ‘src/app/app.module.ts’ u kojoj je potrebno ukloniti sve poveznice na Home stranicu.

Nakon toga kreiram novu stranicu ‘src/pages/home/home.module.ts’ sa sljedećim sadržajem

Sada se vraćam na stranicu ‘src/pages/home/home.ts’ unutar koje moram dodati IonicPage pa to sada izgleda ovako

I za kraj odlazim u ‘src/app/app.component.ts’ gdje uklanjam import na HomePage stranicu i stavljam ju pod navodnike jer tako funkcionira Lazy Loading.

Google Developer konzola

Odlazim na stranicu https://console.developers.google.com/ i ondje kreiram novi projekt.

Ionic 3 & Google Maps – prikaz rute od jedne do druge lokacije

Nakon toga idem na ‘Enable Apis And Services‘ kako bi odabrao i aktivirao API koji želim koristiti.

Google Developer konzola - aktivacija API-ja

U tražilicu upisujem ‘Google Maps‘ i dobijem popis svih povezanih API-ja.

Google Maps Directions API

Aktiviram Google Maps Directions API.

Google Maps Directions API

Nakon što sam aktivirao API moram kreirati jedinstveni ključ koji ću kasnije biti dio Ionic aplikacije.

Google Maps Directions API - kreiranje ključa

I konačno, imam jedinstveni API ključ.

Google Maps Directions API KEY

Ugrađivanje API-ja u aplikaciju

API ključ koji sam maloprije kreirao u aplikaciju ugrađujem tako da unutar datoteke ‘src/app/index.html’ unutar <head> taga upisujem

Sada mogu napraviti glavnu funkcionalnost unutar datoteke ‘src/pages/home/home.ts’. U ovom slučaju odabirem travelMode: 'DRIVING' jer želim prikazati cestovnu rutu. Detaljnije o drugim opcijama na poveznici https://developers.google.com/maps/documentation/javascript/directions

Izgled ekrana sastojat će se od pregleda Google mape i mogućnosti odabira lokacija u gornjem desnom kutu ekrana.

Pozicioniranje padajućeg izbornika CSS-om.

I konačno, aplikacija sada izgleda ovako

Ionic 3 & Google Maps – prikaz rute od jedne do druge lokacije

DevApp – Ionic aplikacija na više uređaja istovremeno

Jedan od izazova s kojim se svaki Ionic developer susreće je testiranje aplikacije tijekom razvoja na više različitih uređaja. To znači da aplikaciju koju developer razvije na računalu mora ručno pokrenuti na svakom uređaju posebno kako bi testirao radi li sve kako je očekivano na različitim uređajima. To naravno oduzima puno vremena. Kako bi riješio upravo taj problem Ionic je razvio Ionic DevApp koji omogućava uživo osvježavanje Ionic aplikacije na više uređaja istovremeno uz uvjet da su svi uređaju na istoj lokalnoj mreži.

Važno! Ionic DevApp nije isti što i Ionic View.

Bolji način razvoja Ionic aplikacija

Ionic DevApp olakšava i ubrzava razvoj što konkretno znači sljedeće:

  • Osvježavanje uživoDevApp omogućava trenutni pregled promjena na svim uređajima.
  • Neovisnost o dodacimaIonic aplikaciju moguće je vidjeti na svim uređajima bez potrebe za instalacijom programa kao što su Xcode ili Android Studio
  • Nativni pluginoviDevApp dolazi uz nekoliko predinstaliranih Cordova pluginova
  • Podrška za iOS i Android – testiranje aplikacije istovremeno se može vršiti na iOS i Android uređajima.
  • Automatsko pronalaženje na lokalnoj mrežiDevApp se automatski povezuje s lokalnom mrežom i osluškuje “ ionic serve” naredbu kako bi učitala i prikazala aplikaciju koju razvijate

IonicPro DevApp

Kako postaviti Ionic DevApp

1.) Prije svega potrebno je imati najnoviju verziju Ionic CLI-a $ npm install -g ionic

2.) Potrebno je instalirati Ionic DevApp aplikaciju na sve uređaje (iOS i Android) na kojima se Ionic aplikacije žele testirati.

3.) Računalo na kojemu se razvoja Ionic aplikacija i mobilni uređaji na kojima se ista želi testirati trebaju biti spojeni na istu lokalnu mrežu.

4.) Potrebno je otvoriti Ionic DevApp na svim uređajima i prijaviti se koristeći Ionic Pro korisnički računa. P.S. Ako ste već koristili Ionic Cloud tj. neku od usluga kao što je npr. Ionic Deploy onda već imate potrebne korisničke podatke i njih možete koristiti za prijavu u Ionic DevApp.

5.) Na računalu je dovoljno pokrenuti naredbu $ ionic serve

6.) Aplikacija će se pojaviti na svim uređajima.

DevApp – uživo osvježavanje Ionic aplikacije na više uređaja

DevApp ograničenja

1.) Ispravljanje pogrešaka (debug) – S obzirom da se aplikacija vrti unutar Ionic DevAppa umjesto direktno na uređaju nije omogućeno ispravljanje pogrešaka na ovaj način nego je potrebno pokrenuti aplikaciju na konkretnom uređaju.

2.) Nedovoljno podržanih pluginova – Ako koristite neke od manje popularnih pluginova postoji mogućnost da isti nije dostupan unutar Ionic DevAppa što znači da opet morate ručno pokrenuti aplikaciju na konkretnom uređaju.

3.) Pokreće se unutar kontejnera – Aplikacije koje razvijamo na uređajima korisnika pokretat će se bez posrednika kao što je Ionic DevApp i zato je svako ozbiljnije testiranje potrebno provoditi na standardni način pokretanja aplikacije direktno na konkretnom fizičkom uređaju bez posrednika.

DevApp - uživo osvježavanje Ionic aplikacije na više uređaja

Zaključak

Ionic DevApp je odlična stvar koja će svakako olakšati razvoj Ionic aplikacija. Ipak, više ga smatra kao dodatak “browser based” razvoju nego kao zamjenu za testiranje na fizičkim uređajima. Da nema ograničenja koja sam ranije spomenuo to bi onda bila potpuno druga stvar.

Ionic DevApp

Ionic 3 desktop aplikacija

Iako sam do sada o Ionicu pisao samo u kontekstu mobilnih aplikacija nedavno sam naišao na primjere korištenja Ionica kao cross-platform desktop aplikacije što mi se učinilo zanimljivim pa sam odlučio nešto više saznati o tome i napisati ovaj blog post.

Što je Electron?

Electron je framework za razvoj cross-platform desktop aplikacija koristeći JavaScript, HTML i CSS. S tehnologijama koje koristi jako podsjeća na Ionic, a omogućava razvoj desktop aplikacija koje se mogu pokrenuti na Windows, Mac i Linux platformi.

Priprema Ionic projetka

Za početak ćemo kreirati novi Ionic projekt.

Kada aplikaciju pokrenemo nećemo vidjeti ništa što već ranije nismo vidjeli. Standardna Ionic aplikacija koja se pokreće u web pregledniku kao što je npr. Google Chrome.

Ionic desktop aplikacija

Postavljanje Electron projekta

Sada je potrebno dodati Electron unutar našeg Ionic projekta koristeći naredbu:

Ionic desktop aplikacija

Sve dalje opisane korake radimo prema službenoj dokumentaciji na adresi https://electron.atom.io/docs/

Sada ćemo kreirati datoteku main.js koja će biti ulazna točka prilikom pokretanja Ionic-Electron aplikacije. Više o ovoj datoteci možete pronaći na adresi https://electron.atom.io/docs/tutorial/quick-start/

Osim te datoteke moramo unutar package.json dodati dvije važne naredbe.

"main": "main.js" služi kako bi se znalo koju datoteku gledati kada se projekt pokrene kao Electron aplikacija.

"start": "electron ." služi kao naredba za pokretanje Electron aplikacije.

Spremni smo za kreiranje skripte buildElectron.sh koja će obaviti nekoliko radnji automatski tako da ih ne moramo svaki put ručno pokretati.

I konačno, Ionic-Electron aplikaciju možemo pokrenuti naredbom ./buildElectron.sh

Ionic desktop aplikacija

ili dvoklikom na ikonu buildElectron skripte unutar našeg projekta.

Ionic desktop aplikacija

nakon čega dobijemo našu Ionic aplikaciju unutar Electrona.

Ionic desktop aplikacija

Možete primijetiti da se prilikom pokretanja aplikacije automatski pokrenuo i Developer Tools. To možemo spriječiti ako unutar main.js datoteke zakomentiramo win.webContents.openDevTools().

Dizajn i prilagodba sučelja

Dizajn trenutno kreirane aplikacije prilagođen je mobilnim uređajima i ako ju raširimo preko cijelog ekrana nekog desktop uređaja to neće izgledati lijepo jer će npr. popis stavki ići jedan ispod drugog preko cijelog ekrana umjesto da se fino rasporedi po nekoliko stavki u jedan red.

Ovo ćemo prikazati na primjeru stranice list.html

Ionic desktop aplikacija

To ćemo riješiti korištenjem Ionic Grida.

Konačan izgled na većem ekranu je sljedeći

Ionic desktop aplikacija

Produkcijska verzija Electron aplikacije

Kada smo zadovoljni s našom aplikacijom možemo kreirati produkcijsku verziju.

Prije nego to napravimo moramo instalirati Electron Packager. To možemo učiniti naredbom $ npm install -g electron-packager

Nakon toga ćemo kreirati produkcijsku verziju Electron aplikacije za Windows OS.

Ionic desktop aplikacija

Proces kreiranja produkcijske verzije Electron aplikacije za Windows, Mac ili Linux može se olakšati i ubrzati na sljedeći način.

U datoteku package.json dodajemo

I onda se proces kreiranja produkcijske verzije Electron desktop aplikacije pokreće sljedećim naredbama:
– Windows OS: npm run package-win
– Mac: npm run package-mac
– Linux: npm run package-linux

Zaključak

Iz ovog ste blog posta mogli vidjeti kako Ionic mobilnu aplikaciju pretvoriti u cross-platform destkop aplikaciju pa iako se to čini zanimljivim i očito da je moguće osobno se ne planiram detaljnije tome posvetiti. Također, ne treba zanemariti niti činjenicu da na tu temu ne postoji dovoljno primjera i dokumentacije.

Uvod u Ionic 3

Iako sam do sada objavio dosta blog postova vezanih uz razvoj hibridnih mobilnih aplikacija koristeći Ionic 3 ipak sam propustio objaviti jedan blog post koji će poslužiti kao uvod u sve te blog postove jednako kao što sam to učinio za Ionic 1 tj. Ionic 2.

Postavljanje razvojne okoline

Kako bi uopće mogli pokrenuti novi Ionic 3 projekt potrebno je zadovoljiti nekoliko preduvjeta.

Potrebno je instalirati:

  • Node.js LTS
  • Ionic i Cordova CLI pomoću naredbe: $ npm install -g cordova ionic
  • TypeScript pomoću naredbe: $ npm install -g typescript

Gore navedeno potrebno vam je za razvoj Android, iOS i Windows Phone hibridnih mobilnih aplikacija. Jedina razlika s kojom se možete susresti je način instalacije jer na Windows baziranom računalu možete razvijati samo Android i Windows Phone aplikacije, dok vam je za iOS potreban Mac.

Prije nego krenete dalje provjerite jeste li sve ranije navedeno uspješno instalirali. To možete učiniti pomoću naredbi:

  • $ node -v
  • $ cordova v
  • $ ionic v

Pokretanje Ionic 3 projekta

Ako ste sve ranije navedeno uspješno instalirali već sada možete kreirati novi Ionic 3 projekt.

Prilikom toga sučelje će vas pitati koji početni predložak želite koristiti za svoj projekt.

Ionic 3 - pokretanje projekta

Kao što možete vidjeti u animaciji iznad u ponudi je nekoliko predložaka:

  • tabs: $ ionic start Ionic3Projekt tabs
  • blank: $ ionic start Ionic3Projekt blank
  • sidemenu: $ ionic start Ionic3Projekt sidemenu
  • super: $ ionic start Ionic3Projekt super
  • conference: $ ionic start Ionic3Projekt conference
  • tutorial: $ ionic start Ionic3Projekt tutorial
  • aws: $ ionic start Ionic3Projekt aws

Svaki od sljedećih vrsta predložaka tj. projekata sastoji se od nekoliko važnih dijelova:

  • config.xml – konfiguracijska datoteka koja sadržava naziv aplikacije i popis datoteka od kojih se Ionic 3 aplikacija sastoji.
  • src – mapa u kojoj se nalaze datoteke s kojima ćete najviše raditi. Sve stranice, komponente, servise i ostalo kreirat ćete i uređivati ovdje.
  • platforms – mapa u kojoj se nalaze datoteke koje omogućavaju postavljanje Ionic 3 aplikacije na Android, iOS i Windows Phone uređaje
  • node_modulesnpm paketi navedeni u package.json nalaze se u ovoj mapi.
  • plugins – mjesto gdje se nalaze svi dodaci kojima ćete proširiti mogućnosti Ionic 3 aplikacije
  • resources – sadržava ikone i početni ekran (splash screens) za dodane platforme

– Ionic tabs

Ionic 3 tabs

– Ionic blank

Ionic 3 blank

– Ionic sidemenu

Ionic 3 sidemenu

– Ionic super

Ionic 3 super

– Ionic conference

Ionic 3 conference

– Ionic tutorial

Ionic 3 tutorial

– Ionic aws

Kako bi uspješno mogli pokrenuti Ionic 3 AWS projekt potrebno je zadovoljiti nekoliko preduvjeta koji nadilaze ovaj blog post tako da ću o tome više nekom drugom prilikom.

Pokretnje aplikacije na mobilnom uređaju

Kako bi Ionic 3 aplikaciju mogli pokrenuti na Android $ ionic run android tj. na iOS $ ionic run ios uređaju trebate dodati i pripadajuće platforme, a to možete učiniti pomoću sljedećih naredbi:

P.S. iOS platformu možete dodati isključivo na Mac-u.

Zaključak

Kao što možete vidjeti sve ranije navedeno ne razlikuje se puno od Ionica 2 s tom razlikom što kod Ionica 3 poboljšan Ionic CLI, možete birati između više početnih predložaka i što se Ionic Native pluginovi instaliraju na drugačiji način uz dodatak podrške za Lazy Loading.