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.

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.

Kreiranje Ionic aplikacije

Pokretanje aplikacije na iOS simulatoru

Pokretanje aplikacije na iOS mobilnom uređaju

Recenzija: CSS Grid by Wes Bos, 2. dio

Wes Bos je poduzetnik i autor nekoliko tečajeva, među kojima je i ovaj o CSS Gridu. S obzirom da mi njegov stil podučavanja odgovara neke od tečajeva sam i kupio kako bi na strukturiran način saznao i naučio nešto novo.

Redovito ih se sjetim kada me netko od kolega pita za dobre online resurse, a prema njihovim pozitivnim reakcijama zaključio sam da bi bilo dobro nešto više o tome napisati i na blogu.

Jedan od tih tečajeva je CSS Grid koji je u potpunosti besplatan, a moguće ga je pronaći na adresi https://cssgrid.io/. Sastoji se od 25 videa tj. lekcija od kojih će svaka biti detaljnije pojašnjena u nastavku.

Prvi dio blog posta objavljen pod naslovomRecenzija: CSS Grid by Wes Bos, 1. dio“.

11.) Spanning and Placing Cardio

U ovom dijelu tečaja cilj je ponoviti sve do sada obrađeno tj. samostalno napraviti primjer stranice sa zadanim rasmještajem elemenata.

Ovdje je poželjno “izgubiti” nešto vremena i barem pokušati samostalno napraviti krajnje rješenje nego u startu gledati kako ti radi Wes Bos.

Krajnje rješenje izgleda kao u nastavku. Zakomentirani dijelovi su moji pokušaji prije nego sam ih ispravno napravio.

Spanning and Placing Cardio

12.) auto-fit and auto-fill

auto-fit i auto-fill koriste se za bolje upravljanje kolonama tj. stupcima grid-template-columns.

Na početku imam sljedeću situaciju

Na ekranu će to izgledati kao na slici ispod. Znači, imam pet kolona i višak praznog prostora sa desne strane ekrana. U slučaju kada znam kakav će sadržaj biti u svakoj koloni tj. kada znam koliko takvih kolona mi je potrebno da bi popunio cijeli red onda mogu koristiti nešto kao grid-template-columns: repeat(5, 100px).

auto-fit i auto-fill

Međutim ako nisam siguran kakav će mi biti sadržaj u svakoj koloni niti koliko njih mi je potrebno da popunim cijeli red, a ipak želim da cijeli red bude dinamički popunjen mogu koristiti npr. grid-template-columns: repeat(auto-fill, 100px) tj. grid-template-columns: repeat(auto-fit, 100px) i rezultat će biti sljedeći

auto-fit i auto-fill

Gledajući gornju sliku lako se može zaključiti da ne postoji razlika između auto-fit i auto-fill, međutim razlika postoji i može se vidjeti kada nema dovoljno kolona da popune cijeli red.

auto-fit završava red iza zadnje kolone – vidljivo po punoj okomitoj liniji na kraju zadnje kolone što označava explicit grid pojašnjen u prethodnom blog postu.

auto-fit i auto-fill

auto-fill kreira prazne kolone u preostalom prostoru. U te je kolone moguće postaviti novi sadržaj.

auto-fit i auto-fill

Npr. mogu dodati jednu kolonu u krajnji desni rub ekrana.

auto-fit i auto-fill

Google My Business API – kako ga aktivirati i koristiti

Google My Business API pruža brz i jednostavan način za tvrtke, proizvode, robne marke, umjetnike i organizacije da upravljaju svojim lokacijama na Google mreži.

API omogućava da se lokacijama upravlja putem prilagođenih aplikacija, npr. možemo napraviti Ionic mobilnu aplikaciju ili web Angular aplikaciju koja će dohvaćati popis svih naših lokacija sa Google mreže. Na taj način na jednom mjestu imamo pregled detalja svih lokacija. Također, za svaku od tih lokacija možemo uređivati te detalje ili dodavati nove informacije bez potrebe za ručnom prijavom u Google My Business sučelje na adresi http://business.google.com/manage.

Preduvjeti

Nekoliko je preduvjeta potrebno zadovoljiti kako bi se Google My Business API mogao koristiti jer inače nije dostupan unutar Google Developer Console.

1.) Google račun

Potrebno je kreirati Google račun kako bi se moglo pristupiti Google API Console sučelju. Za pretpostaviti je da već imamo Google račun ako želimo upravljati našim lokacijama koje smo ranije već kreirali u Google mreži, ali eto ovo je ipak prvi korak.

2.) Upoznati Google My Business sučelje

Prije korištenja API-ja važno je dobro upoznati što sve nudi Google My Business sučelje na adresi http://business.google.com/manage kako bi se uopće znalo kojim podacima je moguće upravljati.

Google My Business

3.) Google API Console

Kreirati projekt unutar Google API Console sučelja na adresi https://console.developers.google.com/project. Ovdje će se kasnije aktivirati Google My Business API.

P.S. Ako ste pratili neke od mojih ranijih blog postova možete prepoznati projekte koje sam kreirao upravo za te blog postove.

Google API Console

4.) Zatražiti pristup API-ju.

U ovom je koraku potrebno ispuniti Google My Business API: Application Form For Basic Access formu.

1. stranica

Google My Business API

2. stranica

Project ID – može se vidjeti u jednoj od gornjih slika. Lijevo se nalazi naziv projekta, a desno project ID.
Project Number – može se pronaći na adresi https://console.developers.google.com/iam-admin/settings?project=projectid
Gmail e-mail adrese – e-mail adrese developera koji će raditi s API-jem

Project ID & Project Number

Google My Business API

3. stranica

Company Name – naziv tvrtke
Company Website – web adresa tvrtke
Company’s Headquarters Address – adresa tvrtke
Company HQ’s Google Maps Listing URL – Google Maps poveznica tvrtkine adrese
Your Name – ime i prezime osobe koja ispunjava formu
Your Email – e-mail adresa, odgovorne, osobe koja ispunjava formu. Mora imati isti nastavak kao i web adresa. Ovo će biti glavna e-mail adresa za svu komunikaciju sa Googleom.
Gmail adresa Google Account Managera ako ga imate. U suprotnom navesti N/A.

Google My Business API

4. stranica

Potrebno odabrati u kojoj se kategoriji tvrtka nalazi, Local Business ili Third-pary / Reseller / Agency. Ostala će pitanja ovisiti o ovom odabiru.

Google My Business API

5. stranica – ako se odabere Local Business

– Odabrati na koliko se lokacija poduzeće nalazi, manje ili više od 10.
– Označiti koristi li se trenutno Google My Business za upravljanje lokacijama.
– Ako je odgovor na prethodno pitanje “da” potrebno je navesti Gmail adresu ili adrese koje imaju mogućnost pristupa Google My Business web sučelju.
– Za kraj, opisati u koju svrhu se planira koristiti Google My Business API.

Local Business

6. stranica – ako se odabere Third-pary / Reseller / Agency

Third-pary / Reseller / Agency

8. stranica – na nju se dođe nakon što se ispuni 5. ili 6. i 7. stranica

Technical / Product Information

Klikom na “SUBMIT” pojavljuje se ekran s osnovnim informacijama.

Google My Business API: Application Form For Basic Access

Sada se može jedino čekati. Iako navode da je potrebno do dva tjedna za odgovor obično će on stići kroz 2-3 radna dana.

Nakon što Google pregleda zahtjev i omogući pristup API-ju stići će poruka na e-mail adresu, npr. @tvrtka.com, navedenu unutar forme sa sljedećim sadržajem:

Google My Business API

Dodavanje developera

Već sada mogu dodati Gmail račune developera koji će imati mogućnost upravljanja API-jem, a koje sam naveo prilikom ispunjavanja forme.

U Google API Console sučelju, u gornjem desnom uglu, klikom na Project settings pojavljuje se izbornik s lijeve strane i ondje odabirem IAM kako bi klikom na ADD dodao Gmail račun novog developera.

Google API Console

Uskoro će navedeni developeri dobiti e-mail sljedećeg sadržaja

Google API Console

Oni sada, ovisno o dobivenim pravima, mogu raditi sve što ću napisati u nastavku.

Aktivacija Google My Business API-ja

Povratak u Google API Console sučelje na adresu projekta https://console.developers.google.com/apis/library?project=projectid

Tek sada je u katalogu API-ja, moguće pronaći Google My Business API.

VAŽNO! Ako se nisu obavili koraci navedeni iznad tj. ako se nije ispunio upitnik i ako nije stigao potvrdni e-mail Google My Business API neće biti moguće pronaći i aktivirati.

Google My Business API

Aktivacija se obavlja klikom na “ENABLE“.

Google My Business API

OAuth 2.0 client ID

Nakon što je API aktiviran potrebno je kreirati OAuth 2.0 client ID zato što API nije javan i Google na taj način kontrolira da API koriste samo one osobe koje na to imaju pravo.

Svaki zahtjev koji se uputi na Google My Business API treba u sebi sadržavati OAuth 2.0 token koji se kreira unutar izbornika Credentials. Ovdje mi je bitan Client ID.

Client ID for Web application

S obzirom da API planiram testirati na OAuth 2.0 Playground moram odobriti adresu https://developers.google.com/oauthplayground kako bi s iste mogao slati upite na API.

OAuth 2.0 client ID

U gornjem desnom kutu klikom na ikonu kotačića otvaraju se postavke. Za “OAuth flow” je potrebno odabrati Client-side. Osim toga potrebno je još kliknuti i na “Use your own OAuth credentials” te ondje unijeti ranije kreiran OAuth client ID.

OAuth 2.0 Playground

U izborniku s lijeve strane pod “Step 1 – Select & authorize APIs” je potrebno unijeti https://www.googleapis.com/auth/plus.business.manage i kliknuti na Authorize APIs.

Pod “Step 2 – Configure request to API” je potrebno unijeti https://mybusiness.googleapis.com/v4/accounts i kliknuti na Send the request.

Ako je sve prošlo uspješno prikazati će se status 200 OK što znači da je API funkcionalan.

OAuth 2.0 Playground

Na slici iznad može se vidjeti i autorizacijski token Bearer ya29.GlvmBlVJdoojCkXP9boiD1oudk8teDNzqls485U6Uylf74QUc2mlhw0RDOoszfdqo594IH2YOqVjNwCPscwEgFPqs3pwiRNPizJyrdUHaJCiiI-pjnX4TyPpK1ic koji ću sada iskoristiti kako bi isti upit na API napravio kroz Postman.

Kao što se može vidjeti na sljedećoj slici dobio sam rezultat s popisom lokacija tj. detalje, radno vrijeme, tih lokacija.

Google My Business API - Postman

Bez autorizacijskog tokena ne bi mogao dobiti traženi rezultat s popisom lokacija.

Google My Business API - Postman

Više informacija o ostalim dostupnim API pozivima na poveznici https://developers.google.com/my-business/reference/rest/

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