Uber API & Ionic 4 – Ride Request Button

U ovom ću blog postu pokazati kako koristiti Uber API tj. Ride Request Button unutar Ionic 4 aplikacije.

Ride Request Button je najjednostavniji i najbrži način da se unutar Ionic aplikacije omogući korištenje Ubera tj. slanje zahtjeva za vožnjom.

Dovoljno je kliknuti na gumb i korisnik će automatski biti preusmjeren unutar Uber aplikacije kojoj će biti prosljeđeni parametri kao što su mjesto preuzimanja i mjesto odredišta, uz ostale opcionalne parametre.

The Ride Request Button

Developer Dashboard

Prije svega potrebno je kreirati korisnički računa unutar Developer Dashboard sučelja. Također, potrebno je kreirati i profil za mobilnu aplikaciju koja će koristiti Uber API.

Developer Dashboard Uber API

Od podataka ovdje su mi najvažniji Client ID, Server Token i Client Secret.

Developer Dashboard Uber API
Parametar Opis
client_id Služi kao identifikator aplikacije, nešto kao korisničko ime aplikacije.
client_secret Služi kao lozinka aplikacije.
server_token Omogućava slanje zahtjeva prema API-ju.

Slanje upita na API

Sada se prebacujem na Uber API dokumentaciju.

Ekran će se sastojati od prikaza Google karte na većem dijelu ekrana i Uber gumba na dnu ekrana. Klikom na taj gumb poziva se Uber aplikacija kojoj prosljeđujem parametre:

  • clientID – obavezno
  • pickupLat
  • pickupLng
  • dropoffLat – obavezno
  • dropoffLng – obavezno

Uber API & Ionic 4 Na slici iznad vidim ekran sa Google kartom na kojoj se nalazi lokacija gdje želim da me Uber odveze. Ako mu i ne proslijedim svoju lokaciju Uber aplikacija će ju sama dohvatiti.

Čak niti Uber aplikacije ne mora, u trenutku klika na gumb, biti instalirana na mobilnom uređaju.

Uber Ride Request Button

Ionic 4 Slides – prikaz galerije slika


O ovom ću blog postu pokazati nekoliko načina na koje je moguće koristiti ion-slides komponentu unutar Ionic 4 aplikacije.

ion-slides komponenta sastoji se od više zasebnih dijelova. Svaki od tih dijelova je zapravo jedna ion-slide komponenta.

Ionic 4 Slides
https://ionicframework.com/docs/api/slides

Ova se komponenta može koristiti za prikaz uputa prilikom prvog pokretanja mobilne aplikacije, primjer čega se nalazi u dokumentaciji, ali se isto tako pomoću ove komponente može napraviti lijepa galerija slika. Slike se mogu pomicati lijevo-desno, ali ih je isto tako moguće postaviti da se pomiču automatski u određenim intervalima.

S obzirom da ion-slides svoje temelje ima u Swiper.js-u i ondje je moguće pronaći dodatne opcije za upravljanje slajdovima.

Kreiranje aplikacije

Struktura ekrana na kojemu ću testirati ion-slides izgleda ovako:

Slike se nalaze unutar assets/imgs mape.

Ionic 4 - Assets Images

Galerija preko cijelog ekrana

Galerija preko cijelog ekrana

U ovom primjeru slike zauzimaju cijeli ekran. Dolaskom do zadnje slike nije moguće ići dalje loop: 'false'.

Galerija preko jednog dijela ekrana

Galerija preko jednog dijela ekrana

U ovom primjeru galerija slika zauzima samo jedan dio ekrana ispod koje se onda vidi ostatak sadržaja. Dolaskom do zadnje slike moguće je ići dalje tj. napraviti puni krug do prve slike pomoću loop: 'true'.

Zaključak

Struktura projekta prema package.json

Otvaranje postavki mobilnog uređaja iz Ionic aplikacije


Prilikom izrade Ionic mobilnih aplikacija jedan od zahtjeva može biti da se iz aplikacije mogu otvoriti neke od postavki mobilnoj uređaja. Npr. postavke vezane uz geolokaciju, WiFi ili nešto treće. Puno je jednostavnije omogućiti korisniku da klikom na jedan gumb ode direktno na postavke koje su mu u tom trenutku potrebne kako bi unutar Ionic aplikacije nešto obavio nego da sam mora tražiti te iste postavke.

Od postavki kojima je moguće pristupiti koristeći ovaj plugin dostupno je sljedeće:

Kreiranje aplikacije

Kreiram novi Ionic projekt i odmah dodajem Android platformu jer planiram aplikaciju pokrenuti na mobilnom uređaju.

Open Native Settings

Plugin Open Native Settings instaliram sljedećim naredbama:

Nakon toga ovaj plugin deklariram unutar app.module.ts datoteke.

Funkcionalnost se nalazi unutar home.ts datoteke tj. unutar HomePage klase, a sastojat će se od funkcija od kojih svaka otvara neku od ranije navedenih postavki mobilnog uređaja.

Open Native Settings

Ako neku od postavki pozivam na ovaj način this._openNativeSettings.open("accessibility") ekran s postavkama će se otvoriti umjesto ekrana Ionic aplikacije dok ako dodam parametar true na sljedeći način this._openNativeSettings.open(["accessibility", true]) otvara se novi ekran s postavkama što se može vidjeti na sljedećoj slici.

Open Native Settings

Ovo na ekranu izgleda ovako:

Open Native Settings

Zaključak

Struktura projekta prema package.json

Što je i čemu služi Ionic Native 4.x?


Prošlo je skoro 2 godine od kako sam objavio blog post pod naslovom “Čemu služi Ionic Native 3.x?“. S obzirom da su se od tada neke stvari promijenile, stigao je Ionic Framework verzije 4, pravo je vrijeme za novi blog post.

Ionic Native je kolekcija Cordova pluginova koji unutar Ionic aplikacije omogućavaju korištenje nativnih funkcionalnosti mobilnih uređaja.

Ionic Native je od sada dostupan u dva izdanja: Community Edition i Enterprise Edition.

Native Core

Ionic Native Community Edition

Ovo izdanje označava pluginove koje održava open source zajednica tj. Ionic tim ih ne održava, ne popravlja niti garantira da će bilo koji od njih ispravno raditi.

Način instalacije:

Ionic Native Enterprise Edition

Ovo izdanje označava pluginove koje održava, popravlja i za njih garantira Ionic tim.

Posebno je zanimljivo što uključuje Native Core set funkcionalnosti što znači da se unutar jednog plugina nalazi nekoliko važnijih funkcionalnosti.

Način instalacije:

Korištenje s Angularom

Svaki se plugin nakon instalacije dodaje unutar app.module.ts datoteke. Npr. u nastavku se nalazi primjer korištenja Camera plugina.

Ovdje je posebno važno paziti da svaki plugin korišten u Angular projektu ima na kraju oznaku /ngx. Oko ovoga u zadnje vrijeme ima dosta pitanja na Stackoverflowu.