Razvoj – Tomislav Stanković

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

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

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

Ionic & Google Firebase login/prijava – Error Code 10

U blog postu pod naslovom “Ionic 3 – Google login/prijava” pokazao sam kako omogućiti Google login/prijavu unutar Ionic aplikacije.

Primjer iz tog blog posta uredno radi u razvojnoj verziji mobilne aplikacije tj. prilikom testiranja, ali kada se aplikacija jednom stavi na Google Play Store može se dogoditi da login/prijava više ne radi bez nekog očitog razloga i jedina greška koju je moguće vidjeti je “10”.

Google Play Store – Error Code 10

Kako bi se ova greška riješila potrebno je napraviti sljedeće:

1.) Na adresi https://play.google.com/apps/publish/ pronaći aplikaciju u kojoj prijava ne radi, omogućiti “App Signing by Google Play” i onda u izborniku s lijeve strane kliknuti na Release management – App signing te kopirati SHA-1 certificate fingerprint.

2.) Na adresi https://console.firebase.google.com/project/naziv-projekta/ otići na Project settings – SHA certificate fingerprints i kliknuti na Add fingerprint te ovdje zalijepiti ranije kopiran SHA-1 ključ.

Nakon ovoga login/prijava će ponovno raditi bez ikakvih problema.

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 naslovom “Recenzija: 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.

<body>

</div>

<style>

.container {

display: grid;

grid-gap: 20px;

/* Make the grid 10 columns wide, every other taking up twice the free space */

/* Make the grid have 10 explicit rows, 50px high each */

/* With Item 1, start at col 3 and go until 5 */

/* With Item 2, start at col 5 and go until the end */

/* Make Item 5 double span 2 cols and rows */

/* Make Item 8 two rows high */

/* Make Item 15 span the entire grid width */

/* Make item 18 span 4 widths, but end 9 */

/* Make item 20 start at row 4 and go for 3 */

</style>

</body>

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.

.container {

display: grid;

grid-gap: 20px;

/* Make the grid 10 columns wide, every other taking up twice the free space */

/* grid-template-columns: repeat(10, auto 2fr); */

/* grid-template-columns: auto 2fr auto 2fr auto 2fr auto 2fr auto 2fr; */

grid-template-columns: repeat(5, 1fr 2fr);

/* Make the grid have 10 explicit rows, 50px high each */

/*grid-template-rows: repeat(10, 50px); */

grid-template-rows: repeat(10, 50px);

}

/* With Item 1, start at col 3 and go until 5 */

.item1 {

grid-column: 3 / 5;

}

/* With Item 2, start at col 5 and go until the end */

.item2 {

grid-column: 5 / -1;

}

/* Make Item 5 double span 2 cols and rows */

.item5 {

grid-column: span 2;

grid-row: span 2;

}

/* Make Item 8 two rows high */

.item8 {

grid-row: span 2;

}

/* Make Item 15 span the entire grid width */

.item15 {

grid-column: 1 / -1;

}

/* Make item 18 span 4 widths, but end 9 */

.item18 {

grid-column: span 4 / 9;

}

/* Make item 20 start at row 4 and go for 3 */

.item20 {

grid-row: 4 / span 3;

}

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

<!DOCTYPE html>

<head>

</head>

<body>

</div>

<style>

.container {

display: grid;

grid-gap: 20px;

border: 10px solid var(--yellow);

grid-template-columns: repeat(5, 100px);

}

</style>

</body>

</html>

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).

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

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.

.container {

display: grid;

grid-gap: 20px;

border: 10px solid var(--yellow);

grid-template-columns: repeat(auto-fit, 100px);

}

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

.container {

display: grid;

grid-gap: 20px;

border: 10px solid var(--yellow);

grid-template-columns: repeat(auto-fill, 100px);

}

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

.container {

display: grid;

grid-gap: 20px;

border: 10px solid var(--yellow);

grid-template-columns: repeat(auto-fill, 100px);

}

.item4 {

grid-column-end: -1;

}

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.

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.

4.) Zatražiti pristup API-ju.

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

1. stranica

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

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.

4. stranica

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

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.

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

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

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

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:

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.

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

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.

Aktivacija se obavlja klikom na “ENABLE“.

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.

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.

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.

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.

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.

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

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.

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.

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

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

<ion-header>

<ion-navbar>

<ion-title>Steakhouse Club</ion-title>

</ion-navbar>

</ion-header>

</a>

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.