Arhiva Mobile - Stranica 2 od 18 - Tomislav Stanković

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 start Ionic4PWA blank
cd Ionic4PWA

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

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:

$ ng add @angular/pwa

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)

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)"
        ]
      }
    }
  ]
}

{

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

{

"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:

$ ionic build --prod

1	$ ionic build --prod

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

Ovu PWA aplikaciju mogu pokrenuti i testirati naredbom:

$ http-server ./www -o

1	$ http-server ./www -o

Zaključak

Struktura projekta prema package.json

{
  "name": "Ionic4PWA",
  "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/pwa": "^0.12.4",
    "@angular/router": "^7.2.2",
    "@angular/service-worker": "^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.1.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.13.8",
    "@angular-devkit/build-angular": "~0.13.8",
    "@angular-devkit/core": "~7.3.8",
    "@angular-devkit/schematics": "~7.3.8",
    "@angular/cli": "~7.3.8",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.5.1",
    "@types/node": "~12.0.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": "~4.1.0",
    "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.1.0",
    "tslint": "~5.16.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic project"
}

{

"name": "Ionic4PWA",

"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/pwa": "^0.12.4",

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

"@angular/service-worker": "^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.1.0",

"core-js": "^2.5.4",

"rxjs": "~6.5.1",

"tslib": "^1.9.0",

"zone.js": "~0.8.29"

"devDependencies": {

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

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

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

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

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

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

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

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

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

"@types/node": "~12.0.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": "~4.1.0",

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

"tslint": "~5.16.0",

"typescript": "~3.1.6"

"description": "An Ionic project"

}

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

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

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'?>
<widget id="com.tomislavstankovic" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>iOSdemoIonic</name>
    <description>An awesome Ionic/Cordova app.</description>
    <author email="hi@ionicframework.com" href="https://www.tomislavstankovic.com/">Tomislav Stanković</author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <preference name="ScrollEnabled" value="false" />
    <preference name="android-minSdkVersion" value="19" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="3000" />
    <platform name="android">
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
        <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
        <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
        <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
        <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
        <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
        <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
        <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
        <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
    </platform>
    <plugin name="cordova-plugin-whitelist" spec="1.3.3" />
    <plugin name="cordova-plugin-statusbar" spec="2.4.2" />
    <plugin name="cordova-plugin-device" spec="2.0.2" />
    <plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
    <plugin name="cordova-plugin-ionic-webview" spec="^4.0.0" />
    <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
    <engine name="ios" spec="~4.5.5" />
</widget>

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

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>

<div #mapa id="mapa"></div> 
  <a href="https://m.uber.com/ul/?client_id=**********************&action=setPickup&pickup[latitude]={{pickupLat}}&pickup[longitude]={{pickupLng}}&dropoff[latitude]={{dropoffLat}}&dropoff[longitude]={{dropoffLng}}">
  <div tappable><img src="assets/imgs/uber.png"></div>
</a>

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

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

$ 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>

<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(){
  }

}

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">
      <img src="{{image.url}}">
    </ion-slide>
  </ion-slides>
</ion-content>

<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">
      <img src="{{image.url}}">
    </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>

<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"
}

{

"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"

}