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.

Moje StackOverflow iskustvo

Na StackOverflow sam registriran od 2015. ali se tek od 2016. aktivnije angažiram i počinjem odgovarati na pitanja. Uskoro mi je to prešlo u naviku jer bi svakim točnim odgovorom dobio određene bodove. Htio sam postati sljedeći Jon Skeet. 😀

S današnjim danom, 29.04.2019., imam 107 odgovora koje je vidjelo 87 000 osoba, nula pitanja i 2,149 bodova tj. reputacije.

Moje StackOverflow iskustvo

“It is by programmers, for programmers, with the ultimate intent of collectively increasing the sum total of good programming knowledge in the world. No matter what programming language you use, or what operating system you call home. Better programming is our goal.” – Introducing Stackoverflow.com

U nastavku će se moći pronaći razlozi zašto sam 2018. zapostavio StackOverflow. Ipak i dalje uživam u procesu pregledavanja pitanja vezanih uz tehnologije s kojima radim i osjećam zadovoljstvo kada nekome mogu pomoći.

Dobra strana

Na StackOverflowu se susreću dvije vrste developera, oni koji traže odgovore i oni koji ih daju. U idealnom slučaju kada neka osoba treba pomoć postavit će pitanje, na njega dobiti nekoliko odgovora, odabrati točan odgovor, označiti ga kao prihvaćenog i svi će nastaviti sa svojim životima. Jedna strana bogatija za odgovor na pitanje, a druga bogatija za nekoliko dodatnih bodova reputacije za točan odgovor.

Moje StackOverflow iskustvo

“There are people in need of assistance, and there are others willing to provide energy to those people, and an “exchange” happens in the sense that everyone gets a benefit from the interaction (questioners get answers, answerers get emotional satisfaction).” – My Love-Hate Relationship with Stack Overflow

Najbolja stvar u svemu tome što će to pitanje i taj odgovor nastaviti pomagati i svim ostalim osobama koje do njih budu došle putem tražilica.

Osvježanje vlastitog znanja

Svi mi volimo misliti da znamo dati dobre odgovore, ali tek kada to moramo napisati postaje vidljivo da taj odgovor treba imati “glavu i rep” tj. da se treba staviti u perspektivu osobe koja odgovor traži.

Često mi se znalo dogoditi da prije nego dam odgovor na neko pitanje isto detaljno istražim ili napravim demo aplikaciju kako bi potvrdio da ono što sam zamislio kao odgovor u praksi stvarno i radi. Uz to, moram procijeniti koji nivo znanja ima osoba koja traži odgovor i tome prilagoditi žargon koji ću u odgovoru koristiti kako ne bi bilo nesporazuma.

Sve to zna biti vremenski zahtjevno, ali me naučilo kako pristupiti rješavanju problema na različite načine.

Virtualna reputacija

Svatko voli dobiti pohvalu ili priznanje pa makar to bilo virtualno.

Earn at least 100 total score for at least 20 non-community wiki answers in the ionic-framework tag. – Izvor

S obzirom da najviše odgovaram na pitanja vezana uz Ionic Framework logično je da sam prvu značku dobio upravo vezano uz tu tehnologiju. ionic-framework brončanu značku u ovom trenutku od nekoliko stotina tisuća korisnika imaju 32 osobe.

StackOverflow Ionic tag

Loša strana

Kao i u svim, online, zajednicama određeni postotak osoba neće imati dobre namjere. Na StackOverflowu je posebno zanimljivo što osim svojih moderatora, koji se biraju jednom godišnje, daje mogućnost svim korisnicima s dovoljnom reputacijom da sudjeluje u uređivanju sadržaja te zajednice.

Na taj način svatko s viškom vremena i malo volje može skupiti dovoljno reputacije kako bi drugim članovima zajednice zagorčalo sudjelovanje.

Osobno sam se susreo s jednom korisnikom koji mi je redom na svaki moj odgovor dao minus čime su mi bili oduzeti bodovi. Srećom, StackOverflow ima napredan automatski sustav koji prepoznaje takve stvari te su mi bodovi vrlo brzo bili vraćeni, ali mi je volja za daljnjim sudjelovanjem naglo splasnula.

Osim toga, znalo mi se dogoditi da netko moj već prihvaćeni odgovor kasnije odbije i onda isti takav, od svojeg sunarodnjaka, prihvati kao točan.

To su neke od stvari na koje se treba naviknuti.

Fokus na pojedinca ili zajednicu

Najveći problem, objašnjen u blog postu pod naslovom “My Love-Hate Relationship with Stack Overflow: Arthur S., Arthur T., and the Soup Nazi” tiče se odnosa dugoročnog nasuprot kratkoročnog sadržaja.

The problem comes, I think, because there’s tension between the short-term “I need help now, please help answer my question” purpose, and the long-term “We want to maintain quality so this site has high signal-to-noise ratio.”

Zajednica želi postići da svako pitanje bude kvalitetno postavljeno i kvalitetno odgovoreno kako bi dugoročno bilo dostupno na tražilicama i opravdalo reputaciju same zajednice. Na taj se način zanemaruju trenutne tj. kratkotočne potrebe korisnika za koje je ta zajednica i kreirana, a na ovaj ih se način odbija. Pa čak ako netko i nije postavio savršeno formatirano pitanje to ne znači da ne zaslužuje odgovor. Omot je postao važniji od sadržaja.

While I can understand StackOverflow’s aggressive closing of questions (thousands of poor questions appear every day), I think it should also build an encouraging culture to convert sand to pearls. Deleting and closing poor questions is one way to go, and converting is another. To repeat myself: don’t forget the days when you were a beginner. There are two types of users: those who can be converted to great question askers, and those who cannot. My experience is that positive energy works better in the long run (e.g., encourage a beginner to improve the question), and negative energy works better in the short run (e.g., close a question right away to stop those who really do not care about asking questions in an effective way). – Yihui Xie

Zaključak

Kako god bilo mišljenja sam da je za svakog developera dobro imati StackOverflow profil i s vremena na vrijeme odgovoriti na koje pitanje. Na taj način možda nećemo promijeniti svijet, ali možemo činiti male promjene na bolje.

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