Ionic 4 & Angular Router – prosljeđivanje parametara

Sličan blog post, pod naslovom “Ionic 2 – prosljeđivanje parametara između stranica“, sam već objavio, ali vrijeme je za novi jer Ionic 4 više ne radi isključivo na dosadašnji pop/push način, nego koristi Angular Router, pod uvjetom da se koristi i Angular Framework u pozadini.

Kreiranje projekta

Novi Ionic 4 projekt kreiram već dobro poznatom naredbom:

U ovom koraku trebam postaviti temelj tj. na HomePage komponenti gdje ću kreirati dva gumba kako bi mogao prikazati dva načina za prosljeđivanje parametara.

Na ekranu će to izgledati ovako:

Ionic 4 & Angular Router

Osim toga, moram pripremiti i neke podatke, about objekt, koje ću prosljeđivati na sljedeću stranicu.

Sada mogu kreirati stranicu na koju ću proslijediti podatke i prikazati ih. To činim pomoću naredbe:

Ionic 4 & Angular Router

Prosljeđeni podaci će na ovom ekranu biti prikazani na sljedeći način:

Ionic 4 & Angular Router

Sada napokon mogu pokazati kako proslijediti podatke tj. parametre sa HomePage na DetailsPage na dva načina.

Prosljeđenim ću parametrima pristupiti kroz ActivatedRoute.

Query Params

Ovaj način je najčešći s kojim sam se susretao i ok je ako se radi mobilna aplikacija kojoj će se pristupati kroz npr. Google Play Store jer se u tom slučaju neće vidjeti URL svake od stranica.

Podatke prosljeđujem sa HomePage

Na DetailsPage podatke dohvaćam na sljedeći način:

U praksi to izgleda ovako:

Ionic 4 & Angular Router

Navigation Extras State

Kako bi ovo funkcioniralo potrebno je koristiti Angular 7.2 ili noviju verziju.

State passed to any navigation. This value will be accessible through the extras object returned from router.getCurrentNavigation() while a navigation is executing. Once a navigation completes, this value will be written to history.state when the location.go or location.replaceState method is called before activating of this route. Note that history.state will not pass an object equality test because the navigationId will be added to the state before being written.

While history.state can accept any type of value, because the router adds the navigationId on each navigation, the state must always be an object. – NavigationExtras

Ovo rješenje je slično onome iznad s tom razlikom što izgleda ljepše kada je vidljiv URL jer se parametri ne vide. To je posebno korisno kada se radi Ionic Progressive Web App.

Podatke prosljeđujem sa HomePage

Na DetailsPage podatke dohvaćam na sljedeći način:

U praksi to izgleda ovako:

Ionic 4 & Angular Router

Zaključak

Struktura projekta prema package.json

Ionic 4 PWA – kreiranje aplikacije

Do sada sam u blog postovima pisao o Ionic aplikacijama koje svoju budućnost temelje na objavi na nekoj od trgovina aplikacijama u .apk ili .ipa obliku.

Ovaj će blog post ići u sasvim jednom drugom smjeru jer u potpunosti mogu zaobići trgovine aplikacijama i svoju PWA aplikaciju objaviti jednako kao što bi objavio bilo koju web stranicu.

Što je, Ionic, PWA?

Ionic 4 PWA je zapravo obična Ionic 4 aplikacija prilagođena prikazu na svim platformama bez potrebe za objavom putem Google Play Storea, Apple App Storea i sl.

Kreiranje projekta

Projekt kreiram već poznatom naredbom:

Ionic 4

U ovom koraku ovo je tek obična Ionic 4 aplikacija. Za sada neću instalirati Ionic Native pluginove jer mi za ovaj primjer neće biti potrebni.

Dodavanje PWA funkcionalnosti

Za razliku od Ionica 3 gdje je Service Worker bio dodan od trenutka kreiranja aplikacija i samo ga je trebalo odkomentirati unutar index.html datoteke kada je u pitaju Ionic 4 to više nije slučaj.

Ionic 3 PWA
How to make PWAs with Ionic 2017 – https://blog.ionicframework.com/how-to-make-pwas-with-ionic/

Pretpostavka za kreiranje PWA su Service Worker (ngsw-worker.js) i Web Manifest (manifest.json). Oboje ću u projekt dodati pomoću naredbe:

Pokretanjem te naredbe kreiraju se i ažuriraju razne datoteke.

– kreirana je konfiguracijska datoteka Service Workera ngsw-config.json. Trenutno se ovdje nalazi zadani naziv aplikacije "name": "app" koji mogu promijeniti u "name": "ionic4pwa".

– ažurirana je angular.json datoteka kako bi podržavala Service Worker

angular.json pwa

– ažurirana je package.json datoteka s ranije dodanim @angular/pwa tj. @angular/service-worker paketom

ng add @angular/pwa

– ažurirana je app.module.ts datoteka koja služi za registraciju Service Workera. Ovdje se spominje ngsw-worker.js koja trenutno ne postoji unutar Ionic projekta, ali će se kreirati pokretanjem $ ionic build --prod naredbe.

ServiceWorkerModule

– ažurirana je index.html datoteka tj. <head> tag unutar kojega se spominje manifest.json datoteka. Ovdje također mogu promijeniti "name": "app", "short_name": "app", u "name": "Ionic4PWA", "short_name": "Ionic4PWA",.

index.html pwa manifest

– kreirane su ikone za različite platforme (zadane Angular ikone koje je za produkcijski projekt potrebno promijeniti)

PWA ikone

Produkcijska PWA aplikacija

Produkcijska PWA aplikacija kreira se naredbom:

Pokretanjem ove naredbe kreirat će se www mapa sa produkcijskom verzijom aplikacije spremnom za postavljanje na server.

ionic build --prod

Ovu PWA aplikaciju mogu pokrenuti i testirati naredbom:

Zaključak

Struktura projekta prema package.json

Kako pomoću SOAP protokola slati/primati XML u PHP-u

Iako sam do sada radio isključivo s REST API-jem koristeći JSON u ovom ću blog postu pokazati kako pomoću SOAP protokola slati/primati XML u PHP-u.

Nekoliko stvari će biti pojašnjeno:
– kako treba izgledati XML kojeg šaljem kako bi dobio očekivani rezultat
– kako raspakirati dobiveni rezultat i od njega napraviti niz (array) podataka
– od čega se sastoji __doRequest metoda

XAMPP

S obzirom da ću sve raditi i testirati na lokalnom računalu potreban mi je XAMPP, jedno od popularnijih PHP razvojnih okruženja.

Ako lokalno želim koristiti SOAP protokol moram aktivirati SoapClient jer ću inače dobiti sljedeću grešku:

Aktivacija se vrši unutar Apache modula – ConfigPHP (php.ini).

SOAP XAMPP

Potrebno je pronaći ;extension=php_soap.dll i maknuti ; te nakon toga restartati Apache modul.

SOAP XAMPP

Postman

Prije nego krenem s izradom primjera u PHP-u moram se uvjeriti da API radi, a to ću napraviti kroz Postman.

Kod slanja zahtjeva na API moram pod Headers postaviti Content-Type: text/xml dok u Body ide XML u raw obliku.

Na prvom API-ju dobijem popis stanica.

SOAP XML Postman

Na drugom API-ju, nakon što pošaljem ID dvije stanice i datum, dobijem popis aktivnih stanica za odabrani datum.

SOAP XML Postman

PHP demo aplikacija

U službenoj dokumentaciji na adresi https://www.php.net/manual/en/class.soapclient.php saznao sam koje parametre trebam poslati kako bi dobio željeni rezultat.

__doRequest metoda me u ovom slučaju najviše zanima.

Iz priložene dokumentacije vidim da mi je potrebno četiri tj. pet parametara.

getStanice

string $request je zapravo XML koji sam u Postmanu slao kroz Body.

string $location je URL API-ja.

string $action je potrebno pronaći u dokumentaciji API-ja.

int $version označava verziju XML-a. U ovom slučaju to je 1.

Sve zajedno to izgleda ovako

Nakon što sam dobio rezultat $result trebam iz njega izvući nazive stanica tj. njihove ID-eve kako bi mogao kreirati select polja. Ovdje koristim getElementsByTagName() metodu.

[nodeValue]

print_r($popisStanica); daje sljedeći rezultat u kojemu gledam [nodeValue] unutar kojega se nalazi string sa svim podacima od pojedine stanice. Npr. [nodeValue] => idNAZIVgps1GPS2granicaZEMLJAIDnazivzemljeOZNAKA.

Od toga sada mogu kreirati dva select polja + polje za odabir datuma.

Krajnji rezultat su dva padajuća izbornika sa popisom stanica.

SOAP protokol

getLinije

string $request je zapravo XML koji sam u Postmanu slao kroz Body.

Parametre StanicaOd, StanicaDo i Datum dohvaćam dinamički putem forme kroz funkciju display().

string $location je URL API-ja.

string $action je potrebno pronaći u dokumentaciji API-ja.

int $version označava verziju XML-a. U ovom slučaju to je 1.

Sve zajedno to izgleda ovako

Nakon što sam dobio rezultat $result trebam iz njega izvući nazive stanica tj. njihove ID-eve, termine polaska, dolaska i ukupno trajanje putovanja kako bi mogao kreirati tablicu. Ovdje također koristim getElementsByTagName() metodu.

[nodeValue]

Krajnji rezultat izgleda ovako:

SOAP post

Prikaz vremena polaska, dolaska i trajanje mogu se pomoću jedne funkcije ljepše formatirati.

Krajnji rezultat sada izgleda ovako:

SOAP post

Zaključak

Cilj ovog blog posta bio je pokazati kako napraviti demo PHP aplikaciju pomoću koje se može primiti/poslati XML putem SOAP protokola.

Razvoj Ionic aplikacija za iOS

U ovom ću blog postu pokazati kako započeti s razvojem Ionic aplikacija za iOS platformu.

Najveći broj aplikacija koje sam do sada radio najprije bi napravio za Android platformu, a onda bi istu prebacio na iOS. Tu je znalo biti svakakvih izazova zato što iOS ima svojih specifičnosti.

Mac tj. macOS

Razvoj Ionic aplikacija za iOS

Iako postoje načini da se već postojeća Android aplikacija prepakira u iOS aplikaciju na Windows OS-u, koristeći npr. Ionic Appflow, ipak je preporuka koristiti Mac uređaj tj. macOS.

Na Mac-u je moguće raditi iOS i Android aplikacije dok je na Windows OS-u moguće raditi samo Android aplikacije.

Nakon dosadašnjih iskustava čini mi se bolje kompletan razvoj prebaciti na Mac te u startu napraviti iOS verziju Ionic aplikacije koju će onda biti jednostavnije prebaciti na verziju za Android. U svakom slučaju jednostavnije nego kada se radi obrnuto.

npm, ionic, cordova,…

Na Mac je potrebno instalirati sve pakete kako bi se uopće mogao kreirati Ionic projekt.

Apple Developer Program

Apple Developer Program

Registracijom na Apple Developer Program ($99 tj. $299 godišnje) dobije se pristup najnovijim alatima za razvoj i distribuciju iOS aplikacija.

Jednostavnije rečeno, bez ovoga ne mogu ništa sa svojom aplikacijom. Niti ju mogu kvalitetno testirati (TestFlight), niti objaviti na App Storeu.

XCode

Kako bi aplikaciju mogao pokrenuti na iOS uređaju ili objaviti na App Storeu potreban mi je XCode, trenutno koristim verziju 10.2 na macOS-u Mojave 10.14.4.

Ionic Xcode

Kreiranje Ionic aplikacije

Kreiram novi projekt i odmah dodajem iOS platformu kako bi ga mogao pokrenuti na simulatoru i na “pravom” uređaju.

iOS Ionic aplikacija

Nakon što je projekt kreiran prvo što trebam promijeniti su id i name.

Aplikaciju kroz Xcode mogu pokrenuti na simulatoru ili na fizičkom uređaju putem datoteke .xcodeproj tj. .xcworkspace.

iOS Ionic aplikacija

Pokretanje aplikacije na iOS simulatoru

Pokretanje aplikacije na iOS mobilnom uređaju