Mobile – Tomislav Stanković

Ionic & Facebook login/prijava – Invalid key hash

U blog postu pod naslovom “Ionic 3 – Facebook prijava” pokazao sam kako omogućiti Facebook 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 u produkciju tj. 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:

Invalid key hash. The key hash **************************** does not match any stored key hashes. Configure your app key hashes at https://developers.facebook.com/apps/appid

facebook for developers

Rješenje je u biti vrlo jednostavno što se zaključiti prema zadnjoj rečenici poruke o grešci. Potrebno je otići na https://developers.facebook.com/ tj. na adresu profila aplikacije https://developers.facebook.com/apps/appid/ te pod Settings – Basic – Android – Key Hashes kopirati hash key iz poruke o grešci.

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

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:

1 2	$ ionic start Ionic4PWA blank cd Ionic4PWA

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.

create mode 100644 .gitignore

create mode 100644 angular.json

create mode 100644 e2e/protractor.conf.js

create mode 100644 e2e/src/app.e2e-spec.ts

create mode 100644 e2e/src/app.po.ts

create mode 100644 e2e/tsconfig.e2e.json

create mode 100644 ionic.config.json

create mode 100644 package-lock.json

create mode 100644 package.json

create mode 100644 src/app/app-routing.module.ts

create mode 100644 src/app/app.component.html

create mode 100644 src/app/app.component.spec.ts

create mode 100644 src/app/app.component.ts

create mode 100644 src/app/app.module.ts

create mode 100644 src/app/home/home.module.ts

create mode 100644 src/app/home/home.page.html

create mode 100644 src/app/home/home.page.scss

create mode 100644 src/app/home/home.page.spec.ts

create mode 100644 src/app/home/home.page.ts

create mode 100644 src/assets/icon/favicon.png

create mode 100644 src/assets/shapes.svg

create mode 100644 src/environments/environment.prod.ts

create mode 100644 src/environments/environment.ts

create mode 100644 src/global.scss

create mode 100644 src/index.html

create mode 100644 src/karma.conf.js

create mode 100644 src/main.ts

create mode 100644 src/polyfills.ts

create mode 100644 src/test.ts

create mode 100644 src/theme/variables.scss

create mode 100644 src/tsconfig.app.json

create mode 100644 src/tsconfig.spec.json

create mode 100644 src/tslint.json

create mode 100644 src/zone-flags.ts

create mode 100644 tsconfig.json

create mode 100644 tslint.json

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:

1	$ ng add @angular/pwa

Pokretanjem te naredbe kreiraju se i ažuriraju razne datoteke.

Installed packages for tooling via npm.

CREATE src/ngsw-config.json (511 bytes)

CREATE src/manifest.json (1063 bytes)

CREATE src/assets/icons/icon-128x128.png (1253 bytes)

CREATE src/assets/icons/icon-144x144.png (1394 bytes)

CREATE src/assets/icons/icon-152x152.png (1427 bytes)

CREATE src/assets/icons/icon-192x192.png (1790 bytes)

CREATE src/assets/icons/icon-384x384.png (3557 bytes)

CREATE src/assets/icons/icon-512x512.png (5008 bytes)

CREATE src/assets/icons/icon-72x72.png (792 bytes)

CREATE src/assets/icons/icon-96x96.png (958 bytes)

UPDATE angular.json (5754 bytes)

UPDATE package.json (1809 bytes)

UPDATE src/app/app.module.ts (970 bytes)

UPDATE src/index.html (851 bytes)

– kreirana je konfiguracijska datoteka Service Workera ngsw-config.json. Trenutno se ovdje nalazi zadani naziv aplikacije "name": "app" koji mogu promijeniti u "name": "ionic4pwa".

{

"index": "/index.html",

"assetGroups": [

{

"name": "app",

"installMode": "prefetch",

"resources": {

"files": [

"/favicon.ico",

"/index.html",

"/*.css",

"/*.js"

]

}

}, {

"name": "assets",

"installMode": "lazy",

"updateMode": "prefetch",

"resources": {

"files": [

"/assets/**",

"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"

]

}

]

}

– ažurirana je angular.json datoteka kako bi podržavala Service Worker

– ažurirana je package.json datoteka s ranije dodanim @angular/pwa tj. @angular/service-worker paketom

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

– 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",.

{

"name": "app",

"short_name": "app",

"theme_color": "#1976d2",

"background_color": "#fafafa",

"display": "standalone",

"scope": "/",

"start_url": "/",

"icons": [

{

"src": "assets/icons/icon-72x72.png",

"sizes": "72x72",

"type": "image/png"

...

– kreirane su ikone za različite platforme (zadane Angular ikone koje je za produkcijski projekt potrebno promijeniti)

Produkcijska PWA aplikacija

Produkcijska PWA aplikacija kreira se naredbom:

1	$ ionic build --prod

Pokretanjem ove naredbe kreirat će se www mapa sa produkcijskom verzijom aplikacije spremnom za postavljanje na server.

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.

npm, ionic, cordova,…

Na Mac je potrebno instalirati sve pakete kako bi se uopće mogao kreirati Ionic projekt.

npm install -g n

npm install -g ionic

npm install -g cordova

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

Kreiram novi projekt i odmah dodajem iOS platformu kako bi ga mogao pokrenuti na simulatoru i na “pravom” uređaju.

ionic start iOSdemoIonic

cd iOSdemoIonic

ionic cordova platform add ios

Nakon što je projekt kreiran prvo što trebam promijeniti su id i name.

<?xml version='1.0' encoding='utf-8'?>

<name>iOSdemoIonic</name>

<description>An awesome Ionic/Cordova app.</description>

<author email="hi@ionicframework.com" href="https://www.tomislavstankovic.com/">Tomislav Stanković</author>

<allow-intent href="http://*/*" />

<allow-intent href="https://*/*" />

<allow-intent href="tel:*" />

<allow-intent href="sms:*" />

<allow-intent href="mailto:*" />

<allow-intent href="geo:*" />

<allow-intent href="market:*" />

</platform>

<allow-intent href="itms:*" />

<allow-intent href="itms-apps:*" />

</platform>

</widget>

Aplikaciju kroz Xcode mogu pokrenuti na simulatoru ili na fizičkom uređaju putem datoteke .xcodeproj tj. .xcworkspace.

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.

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

$ ionic start IonicSlidesGallery blank

$ cd IonicSlidesGaller

$ionic serve

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

<ion-header text-center>

<ion-toolbar color="primary">

<ion-title>

Ionic 4 Slides

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

//ion-slides će ići ovdje

</ion-content>

Slike se nalaze unutar assets/imgs mape.

import { Component } from '@angular/core';

@Component({

selector: 'app-home',

templateUrl: 'home.page.html',

styleUrls: ['home.page.scss'],

})

export class HomePage {

imageContainer = [

{url:"assets/imgs/image1.jpg"},

{url:"assets/imgs/image2.jpg"},

{url:"assets/imgs/image3.jpg"},

{url:"assets/imgs/image4.jpg"} ];

slideOpts = {

};

constructor(){

}

Galerija preko cijelog ekrana

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

<ion-header text-center>

<ion-toolbar color="primary">

<ion-title>

Ionic 4 Slides

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-slides pager="true" scrollbar="false" [options]="slideOpts" style="object-fit:cover;height:100%;background-color:#000;">

<ion-slide *ngFor="let image of imageContainer; let i = index">

</ion-slide>

</ion-slides>

</ion-content>

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

<ion-header text-center>

<ion-toolbar color="primary">

<ion-title>

Ionic 4 Slides

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-slides pager="true" [options]="slideOpts" scrollbar="false" style="background-size:cover;height:58%;background-color:#000;">

<ion-slide *ngFor="let image of imageContainer; let i = index">

</ion-slide>

</ion-slides>

<ion-card>

<ion-card-header>

<ion-card-subtitle>Ionic 4 Slides</ion-card-subtitle>

<ion-card-title>Primjer galerije slika</ion-card-title>

</ion-card-header>

<ion-card-content>

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

<p>ion-slides komponenta sastoji od više zasebnih dijelova. Svaki od tih dijelova je zapravo jedna ion-slide komponenta.</p>

</ion-card-content>

</ion-card>

</ion-content>

Zaključak

Struktura projekta prema package.json

{

"name": "IonicSlidesGallery",

"version": "0.0.1",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com/",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/common": "^7.2.2",

"@angular/core": "^7.2.2",

"@angular/forms": "^7.2.2",

"@angular/http": "^7.2.2",

"@angular/platform-browser": "^7.2.2",

"@angular/platform-browser-dynamic": "^7.2.2",

"@angular/router": "^7.2.2",

"@ionic-native/core": "^5.0.0",

"@ionic-native/splash-screen": "^5.0.0",

"@ionic-native/status-bar": "^5.0.0",

"@ionic/angular": "^4.0.0",

"core-js": "^2.5.4",

"rxjs": "~6.3.3",

"zone.js": "~0.8.29"

"devDependencies": {

"@angular-devkit/architect": "~0.12.3",

"@angular-devkit/build-angular": "~0.12.3",

"@angular-devkit/core": "~7.2.3",

"@angular-devkit/schematics": "~7.2.3",

"@angular/cli": "~7.2.3",

"@angular/compiler": "~7.2.2",

"@angular/compiler-cli": "~7.2.2",

"@angular/language-service": "~7.2.2",

"@ionic/angular-toolkit": "~1.4.0",

"@types/node": "~10.12.0",

"@types/jasmine": "~2.8.8",

"@types/jasminewd2": "~2.0.3",

"codelyzer": "~4.5.0",

"jasmine-core": "~2.99.1",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~3.1.4",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "~2.0.1",

"karma-jasmine": "~1.1.2",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.4.0",

"ts-node": "~8.0.0",

"tslint": "~5.12.0",

"typescript": "~3.1.6"

"description": "An Ionic 4 Slides project"

}