Capacitor ili Cordova za razvoj Ionic aplikacija?

Ionic aplikacije razvijam od 2015. godine i sve do prije nešto više od godinu dana temeljio sam ih primarno na Cordovi.

Usput sam pratio razvoj Capacitora koji je sa verzijama 3 i 4 počeo “dobivati oblik” s kojim sam bio zadovoljan. Tada sam zaključio da može poslužiti kao temelj novih, ali i postojećih projekata.

Cordova pripada prošlosti

Ako se pogleda samo činjenica da je Cordova nastala 2009., a Capacitor 2018. više je nego jasno da među njima vrlo vjerovatno postoje dosta velike razlike. Bile one konceptualne ili praktične ipak su razlike.

Godinama je bilo gotovo nezamislivo pristupiti nekim značajkama mobilnih uređaja bez nekoliko Cordova pluginova u različitim stupnjevima razvoja i održavanja, a sada je stiglo nativno.

Također, kroz godine se povećavao naglasak na sigurnosti mobilnih aplikacija pa tako Google i Apple više neće pustiti bilo što u svoje trgovine aplikacijama. Pri tome održavanje postojećih, a pogotovo razvoj novih aplikacija temeljenih na Cordovi gubi svoj smisao.

Capacitor nije zamjena za Cordovu

Ovo je i najveća zabluda developera koji su toliko navikli na Cordovu da Capacitoru ne žele dati niti šansu jer misle da sada moraju sve mijenjati i raditi ispočetka.

Capacitor je kompatibilan sa Cordovom tako da niti migracija nije veliki problem i moguće ju je raditi postupno. Ako i dođete u slučaj da ipak trebate neki stariji Cordova plugin moći ćete ga dodati u postojeći Ionic Capacitor projekt.

Iako Capacitor i Cordova mogu raditi zajedno osobno mi je cilj u svim projektima postupno skroz napustiti Cordovu.

Prednosti Capacitora

Najveća prednost je skroz druga filozofija razvoja aplikacija, koja je više prilagođena današnjem tehnološkim potrebama. Ali da ne bi sve ostalo na filozofiranju evo i konkretnih prednosti koje mi se osobno sviđaju.

Brži i jednostavniji build/deploy aplikacija

Postavljanje na Google Play Store i Apple App Store nešto je čime završi svaki novi ciklus razvoja nove ili održavanja postojeće aplikacije. To je proces koji se ponavlja i kao takav je važno da bude što jednostavniji.

Capacitor omogućava brže i jednostavnije kreiranje produkcijskog builda. Kod Android aplikacija sve ide putem Android Studia. Kod iOS-a mi je isto kao i do sada, s tom razlikom da više nema problema s nekompatibilnosti verzija nekih pluginova.

Manja ovisnost o pluginovima

Capacitor donosi nativne funkcionalnosti, kao npr. Deep Link, za koje više nisu potrebni pluginovi što je bio slučaj sa Cordovom. Samim time manje toga je potrebno posebno ažurirati i usklađivati po pitanju verzija.

Svaki plugin manje donosi aplikaciju koju je lakše održavati.

Jednostavna migracija

Općenito kada se prelazi sa tehnologije na tehnologiju u dosta slučajeva su u pitanju toliko velike promjene da je jednostavnije sve raditi ispočetka. To nije slučaj kod Capacitora.

Iako donosi značajne promjene, Capacitor u prvoj fazi migracije može poslužiti samo kao temelj. Čak i kada se ostave postojeći Cordova pluginovi. Kada se savlada taj korak, onda lagano migrirati ili uklanjati plugin po plugin. Kod pluginova koji nisu kompatibilni sa Capacitorom potrebno je odmah planirati adekvatnu zamjenu.

Izrada nove aplikacije

Kada se kreira nova aplikacija u startu je sasvim lijepo vidjeti da više ne postoji ovisnost o config.xml-u. Platformske postavke su sada ondje gdje i trebaju biti – u datotekama pojedine platforme. Za Android je to AndroidManifest.xml, a za iOS Info.plist.

To je super. Jer koliko god se prije pisalo “programiraš jednom za sve platforme” u praksi to često nije bio slučaju kada su u pitanju razlike između iOS-a i Androida.

Zaključak

Iz svega navedenog meni je Capacitor jedini logičan izbor i jedva čekam vidjeti što će novog donijeti.

Angular & Ionic 4 – PayPal mobilno plaćanje

Cilj ovog blog posta je pokazati kako implementirati PayPal plaćanje unutar Ionic 4, PWA, aplikacije koristeći Smart Payment Button (Checkout).

Osim Smart Payment Buttons, PayPal omogućava sljedeće vrste plaćanja:

PayPal Smart Payment
PayPal Developer: https://developer.paypal.com/

Primjeri u ovom blog postu temelje se na dokumentaciji dostupnoj na poveznici https://developer.paypal.com/.

Iako u testnom okruženju, plaćanje kreirano na ovaj način biti će uspješno provedeno što će se moći vidjeti unutar PayPal testnog sučelja i prikazano u nastavku ovog blog posta.

Ipak, kako je vidljivo u službenoj dokumentaciji potrebno je napraviti i serverski tj. backend dio koji će služiti kao potvrda uspješnog plaćanja. Serverski dio u ovom blog postu neće biti detaljnije obrađen.

Smart Payment Buttons funkcionira na sljedeći način:

  • Gumb za plaćanje prikazan je na web/mobilnoj aplikaciji
  • Kupac klikne na gumb
  • Poziva se PayPal Orders API koji priprema transakciju
  • Prikazuje se PayPal Checkout forma za prijavu/plaćanje
  • Kupac odobrava plaćanje
  • Poziva se PayPal Orders API koji izvršava transakciju
  • Kupcu se prikazuje poruka o uspješnoj transakciji

 

Smart Payment Buttons

PayPal Sandbox & App Name

Kako bi mogao testirati PayPal naplatu potrebni su mi: testni PayPal korisnički račun na koji će sredstva biti uplaćena, testni PayPal korisnički račun koji će izvršavati plaćanje kao i profil aplikacije putem koje će se plaćanje izvršavati.

PayPal Sandbox

S obzirom da već imam postojeći PayPal račun ne moram ga sada kreirati nego je dovoljno otići na adresu https://developer.paypal.com/developer/accounts/ kako bi kreirao Sandbox račun.

PayPal Sandbox

Moguće je kreirati testni račun fizičke ili pravne osobe tj. tvrtke. U ovom ću primjeru kreirati poslovni PayPal račun.

Valuta tog računa biti će u američkim dolarima (USD), a plaćanje ću kasnije izvršavati u dolarima i eurima (EUR). PayPal automatski radi konverziju valuta.

PayPal Sandbox

Klikom na „Create Account“ kreiram Sandbox PayPal račun fortuno@example.com.

PayPal Sandbox

My Apps & Credentials

Nakon toga na adresi https://developer.paypal.com/developer/applications kreiram profil aplikacije putem koje ću izvršavati plaćanje.

PayPal Apps & Credentials

Klikom na „Create App“ dolazim do ekrana gdje je potrebno unijeti naziv aplikacije i odabrati Sandbox račun s kojim će ta aplikacija biti povezana.

PayPal Apps & Credentials

Nakon toga dobijem Client ID koji će mi biti potreban kasnije i bez kojega ne mogu izvršiti plaćanje.

PayPal Apps & Credentials

Smart Payment Buttons & Ionic 4

Sada ću kreirati novi Ionic 4 projekt. To činim naredbom:

Fokus će biti na početnom ekranu koji će se sastojati samo od gumba za plaćanje tako da koristim blank temu.

Detaljnije o kreiranju Ionic 4 aplikacije moguće je pronaći u blog postu pod naslovom „Ionic 4 CRUD aplikacija“.

PayPal Checkout tj. Smart Payment Buttons omogućava brzu i jednostavnu implementaciju plaćanja u bilo koju aplikaciju na siguran način.

Implementacija počinje dodavanjem sljedeće skripte unutar index.html datoteke:

Kao što se može vidjeti, ovdje mi je potreban ranije kreiran Client ID. Ako drugačije ne navedem zadana valuta biti će USD. U jednom od primjera kao valutu ću dodati EUR, parametar currency.

Popis svih dostupnih parametara moguće je vidjeti na poveznici https://developer.paypal.com/docs/checkout/reference/customize-sdk/.

index.html datoteka sada izgleda ovako:

Prikaz gumba na ekranu vrši se putem ID-a.

Sve zajedno to sada izgleda ovako:

Koristim ngIf direktivu kako bi nakon uspješnog plaćanja umjesto gumba za plaćanje prikazao odgovarajuću poruku.

S obzirom da je u pitanju demo aplikacija na ekranu se neće nalaziti ništa drugo osim gumba za plaćanje na vrhu ekrana. U suprotnom bi se više moralo razmisliti o optimalnom mjestu za postavljanje gumba. Više o tome na poveznici https://developer.paypal.com/docs/checkout/best-practices/feature-paypal/#

Angular & Ionic 4 – PayPal Smart Payment

Inicijalizacija transakcije vrši se klikom na gumb “PayPal” tj. funkcijom createOrder unutar koje ću proslijediti samo iznos koji želim na/platiti.

Kada kupac odobri transakciju poziva se funkcija onApprove.

Kompletna funkcionalnost izgleda ovako:

Demo prikaz

Sada ću proći kroz čitav proces naplate i prikazati ga slikama.

Klikom na žuti gumb „PayPal“ pokrećem postupak plaćanja. Prijavljujem se pomoću PayPal Sandbox računa.

PayPal Smart Payment

Biram na koji način želim platiti navedeni iznos. To mogu učiniti sa svojeg ukupnog balansa, kreditnom ili debitnom karticom koje su povezane s PayPal računom.

PayPal Smart Payment

Klikom na “Pay Now” potvrđujem plaćanje. Plaćanje je uspješno izvršeno ako dobijem (Order) ID. U ovom slučaju to je "id": "99D86747XH516732E".

PayPal Smart Payment

PayPal će mi vratiti sljedeći odgovor, u kojemu imam sve potrebno kako bi kasnije mogao raditi provjeri plaćanja, nakon što je plaćanje uspješno prošlo:

Osim toga, potvrdu o uspješnom plaćanju mogu vidjeti ako se prijavim unutar PayPal Sandbox računa na adresi https://www.sandbox.paypal.com/ sa korisničkim imenom tomislavstankovic1-buyer@gmail.com i pripadajućom lozinkom.

PayPal Account Details

Ovdje mogu vidjeti koliki mi je trenutni tj. ukupni dostupan iznos na PayPal Sandbox računu kao i popis svih transakcija.

PayPal Account Details

Klikom na „Informatika Fortuno’s Test Store“ mogu vidjeti detalje navedene transakcije.

PayPal Transaction Summary

Zaključak

Što se klijentskog dijela aplikacije tiče to bi bilo sve.

PayPal Smart Payment Demo

Ostaje još napraviti serverski, backend, dio gdje će se vršiti provjera plaćanja. Na taj API šaljem ranije spomenuti ID "id": "99D86747XH516732E".

Struktura projekta prema package.json:

P.S. Ovaj je blog post originalno objavljen na adresi https://www.fortuno.hr/ionic-4-paypal-smart-payment-buttons/.

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