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

Promjena verzije PHP-a za WordPress

S obzirom da sve volim imati “up-to-date”, koliko god je to moguće, nedavno sam istraživao koliki utjecaj verzija PHP-a ima na WordPress. Iako je i sam WordPress pisan u PHP-u velika je vjerojatnost da se korisnik običnog WordPress bloga nikada neće niti susresti s pravim PHP-om koji stoji “ispod poklopca”. No, to nije razlog da se zanemare prednosti koje donose novije verzije PHP-a, ako ništa drugo, onda po pitanju sigurnosti i performansi.

Što je potrebno za samostalnu promjenu PHP verzije?
WordPress instalacija
– pristup cPanelu
– pristup opciji Select PHP Version unutar cPanela
PHP Compatibility Checker plugin
Display PHP Version plugin

Trenutna verzija PHP-a

Prije svega potrebno je (sa)znati koja se verzija PHP-a trenutno koristi kako bi uopće znali koje nam opcije nadogradnje ostaju i što s njima možemo dobiti. Za tu svrhu može se koristiti “Display PHP Version” plugin koji će nakon instalacije i aktivacije unutar upravljačke ploče WordPress nadzorne ploče prikazati trenutno korištenu verziju PHP-a.

U mojem slučaju to je bila verzija 5.3.29.

Promjena verzije PHP-a za WordPress

Nakon što sam saznao koju verziju PHP-a trenutno koristim zaključujem da bi se trebao prebaciti na (naj)noviju verziju.

Promjena verzije PHP-a za WordPress
PHP Supported Versions

Međutim, prije nego to napravim trebam se uvjeriti da su tema koju koristim i svi pluginovi kompatibilni sa verzijom PHP-a, na koju se planiram prebaciti, jer se u suprotnom WordPress stranica može srušiti.

Kompatibilnost nove verzije PHP-a

Kada se koriste najnovije verzije teme i pluginova mala je vjerojatnost da isti neće biti kompatibilni sa novom verzijom PHP-a, ali ipak može se i to dogoditi. Zato je važno prije promjene provjeriti jesu li tema i svi pluginovi kompatibilni sa novom verzijom PHP-a.

To je moguće učiniti koristeći PHP Compatibility Checker plugin.

Nakon instalacije i aktivacije dovoljno je otići u izbornik Alati -> PHP Compatibility -> odabrati željenu verziju PHP-a i kliknuti na Scan site.

Prvo ću provjeriti kompatibilnost sa trenutno najnovijom verzijom PHP-a, a to je verzija 7.0

Promjena verzije PHP-a za WordPress

Iz analize mogu vidjeti da mi jedan plugin, konkretno Social Warfare Pro kojeg sam platio 30ak $, nije kompatibilan sa verzijom 7.0 PHP-a. Zbog toga trenutno odlučujem da neću prelaziti na najnoviju verziju PHP-a, barem ne dok ne istražim moguće načine kako taj plugin prilagoditi ili moguće posljedice nadogradnje unatoč nekompatibilnosti.

Promjena verzije PHP-a za WordPress

Sljedeća logična verzija PHP-a je 5.6 te odlučujem testirati kompatibilnost svoje instalacije WordPressa s tom verzijom. Zaključujem da imam punu kompatibilnost i da se slobodno mogu prebaciti na verziju PHP-a 5.6

Promjena verzije PHP-a za WordPress

Promjena verzije PHP-a

Sada mogu otići u cPanel i promijeniti verziju PHP-a koristeći Select PHP Version.

Promjena verzije PHP-a za WordPress

Odabirem verziju 5.6 i klikom na Set as current potvrđujem da tu verziju želim koristiti.

Promjena verzije PHP-a za WordPress

Ako se sada vratim u nadzornu ploču mogu vidjeti da je nova verzija PHP-a za WordPress 5.6.32

Promjena verzije PHP-a za WordPress

Zaključak

So, now you know – PHP versions aren’t something you have to think about a lot, but it’s the engine that runs everything else. It matters, and you can improve your speed, security and compatibility, by making the right choice. – Does your PHP version matter?

Kako prilagoditi Angular početni zaslon (Initial Loading Screen)

Ako ste do sada razvijali Angular web aplikacije ili koristili tuđe mogli ste kod svih njih primijetiti jednu zajedničku stvar, a to je početni zaslon koji se prikazuje prije nego se učita Angular aplikacija i na kojemu u gornjem lijevom kutu ekrana piše “Loading…” (Angular 2) uz monotonu bijelu pozadinsku boju. Kasnije je to izbačeno te se prikazuje samo obična, prazna, bijela pozadina (>= Angular 4).

Išao sam malo istražiti kako najbolje to riješiti tako da i meni kao developeru, a i korisniku bude lijepo. Našao sam nekoliko mogućnosti od kojih sam odabrao jednu o kojoj ću nešto više napisati u nastavku.

Kreiranje novog Angular projekta

Koristeći Angular CLI pokrećem novi projekt

Početni zaslon je čisto bijele boje i to je dobar izbor ako nakon toga ide prikaz npr. stranice za prijavu korisnika s bijelom pozadinom. U tom će se slučaju te dvije bijele pozadinske boje lijepo stopiti i činiti cjelinu.

Kako prilagoditi Angular početni zaslon (Initial Loading Screen)

Prilagođeni početni zaslon

Za promjenu prikaza početnog zaslona dovoljno je kreirati novi <div> s klasom loading.

Na kraju to izgleda ovako

Kako prilagoditi Angular početni zaslon (Initial Loading Screen)

Zaključak

To bi bilo sve. Ovo se možda ne čini kao nešto vrijedno spomena, ali svakako daje onaj završni sjaj Angular web aplikaciji.