Arhiva Mobile - Tomislav Stanković

Što napraviti kada izgubite Android keystore lozinku?

Za početak, važna napomena. Jedna stvar mora biti jasna. Ova metoda neće raditi u 100% slučajeva i treba se koristiti kao zadnja opcija.

Olakotna okolnost može biti ako ste sami kreirali keystore za koji više nemate lozinku jer lakše ćete dobiti inspiraciju za potencijalne mogućnosti kada znate koje najčešće kombinacije koristite No, ako želite doći do lozinke keystore datoteke koju je netko drugi kreirao onda najveću ulogu igra sreća i dovoljno vremena provedenog u čekanju da ovaj alat dođe do lozinke.

P.S. Prije korištenja ovog alata dobra je opcija kontaktirati Google kroz njihovu General Play Console issues formu (I have a key or keystore related issue -> I have an upload key-related issue -> I forgot the password to my keystore).

Android keystore!?

Ono što se u svim uputama može pronaći je važna napomena koja se tiče upravo keystore datoteke za koju je navedeno da se uvijek mora čuvati na sigurnom mjestu i da se nikako ne smije izgubiti pripadajuća lozinka. U suprotnom neće biti moguće napraviti ažuriranje aplikacije na Google Play Store. Druga opcija je da se aplikacija potpisuje sa certifikatom kojim upravlja Google direktno kroz Google Play Store.

…if you’re not opted in to app signing with by Google Play and you lose your app’s signing key, you lose the ability to update your app.

Više o načinu kako se Android keystore datoteka kreira i koristi za postavljanje Ionic aplikacija na Google Play Store moguće je pronaći u blog postu pod naslovom “Priprema i objava Ionic aplikacije na Google Play Store“.

No, vratimo se scenariju u kojemu lozinka keystore datoeke nije poznata.

Što napraviti u tom slučaju?

Priprema

Preduvjet za korištenje ovog alata je instalirana Java
AndroidKeystoreBrute alat je moguće preuzeti na adresi https://drive.google.com/file/d/0B_Rw7kNjv3BATldrLXMwcVRud2c/edit?usp=sharing

Alat se pokreće naredbom

java -jar AndroidKeystoreBrute.jar <argumenti>

1	java -jar AndroidKeystoreBrute.jar <argumenti>

Mogući argumenti:

-m <1..3> – metoda 1, 2 ili 3

-k <putanja> – putanja do keystore datoteke

-d <putanja> – putanja do datoteke sa popisom riječi (za metodu 2 i 3)

-p – korištenje uobičajene zamjene poput “@” za “a” (3. metoda). VAŽNO – vrlo sporo!

-start <String> – postavljanje početnog niza za lozinku (za brute force)

-w – kreira novu keystore datoteku s istom lozinkom

-h – prikaz pomoći

Korištenje AndroidKeystoreBrute alata

Prilikom pokretanja dobiju se alias i datum tj. vrijeme kreiranja keystore datoteke. U ovom slučaju to su:

Found alias: demoapp
Creation Date: Fri Aug 07 14:42:35 CEST 2020

1 2	Found alias: demoapp Creation Date: Fri Aug 07 14:42:35 CEST 2020

1. metoda – Simply Bruteforce

java -jar AndroidKeystoreBrute_v1.05.jar -m 1 -k DemoApp.keystore -start AAAAAA

1	java -jar AndroidKeystoreBrute_v1.05.jar -m 1 -k DemoApp.keystore -start AAAAAA

Najsporija metoda. Ovdje se ne koristi riječnik s popisom mogućih riječi nego se vrte sve kombinacije počevši od zadanog argumenta -START AAAAAA

2. metoda – Dictionary Attack

java -jar AndroidKeystoreBrute_v1.05.jar -m 2 -k DemoApp.keystore -d "wordlist.txt"

1	java -jar AndroidKeystoreBrute_v1.05.jar -m 2 -k DemoApp.keystore -d "wordlist.txt"

Metoda koja će vrtiti popis zadanih riječi u točnom obliku kako su navedene. Znači neće ih kombinirati kao što to radi u 3. metodi. Potreban je puno veći popis riječi i sve moguće kombinacije.

3. metoda – Smart Wordlist Attack (preporuka)

java -jar AndroidKeystoreBrute_v1.05.jar -m 3 -k DemoApp.keystore -d "wordlist.txt"

1	java -jar AndroidKeystoreBrute_v1.05.jar -m 3 -k DemoApp.keystore -d "wordlist.txt"

Najbolja metoda jer će od svih riječi iz riječnika napraviti sve moguće kombinacije. Brojevi se dodaju automatski i nije ih potrebno posebno navoditi. Ipak, ako znate da se lozinka sastoji od npr. broja godine “2020” dobro je to navesti jer će ubrzati pronalazak ispravne kombinacije.

Popis riječi koje sam koristio u wordlist.txt:

tomislav
primjer
demo
blog
8
7
0

tomislav

primjer

demo

blog

Ispravnu kombinaciju lozinke dobio sam za 22 sekunde:

Naslovna slika preuzeta sa https://android-developers.googleblog.com/2018/12/new-keystore-features-keep-your-slice.html

Angular & Ionic 4 – PayPal mobilno plaćanje

Cilj ovog blog posta je pokazati kako implementirati PayPal plaćanje unutar Ionic 4, PWA, aplikacije koristeći Smart Payment Button (Checkout).

Osim Smart Payment Buttons, PayPal omogućava sljedeće vrste plaćanja:

PayPal Smart Payment — PayPal Developer: https://developer.paypal.com/

Primjeri u ovom blog postu temelje se na dokumentaciji dostupnoj na poveznici https://developer.paypal.com/.

Iako u testnom okruženju, plaćanje kreirano na ovaj način biti će uspješno provedeno što će se moći vidjeti unutar PayPal testnog sučelja i prikazano u nastavku ovog blog posta.

Ipak, kako je vidljivo u službenoj dokumentaciji potrebno je napraviti i serverski tj. backend dio koji će služiti kao potvrda uspješnog plaćanja. Serverski dio u ovom blog postu neće biti detaljnije obrađen.

Smart Payment Buttons funkcionira na sljedeći način:

Gumb za plaćanje prikazan je na web/mobilnoj aplikaciji
Kupac klikne na gumb
Poziva se PayPal Orders API koji priprema transakciju
Prikazuje se PayPal Checkout forma za prijavu/plaćanje
Kupac odobrava plaćanje
Poziva se PayPal Orders API koji izvršava transakciju
Kupcu se prikazuje poruka o uspješnoj transakciji

PayPal Sandbox & App Name

Kako bi mogao testirati PayPal naplatu potrebni su mi: testni PayPal korisnički račun na koji će sredstva biti uplaćena, testni PayPal korisnički račun koji će izvršavati plaćanje kao i profil aplikacije putem koje će se plaćanje izvršavati.

PayPal Sandbox

S obzirom da već imam postojeći PayPal račun ne moram ga sada kreirati nego je dovoljno otići na adresu https://developer.paypal.com/developer/accounts/ kako bi kreirao Sandbox račun.

Moguće je kreirati testni račun fizičke ili pravne osobe tj. tvrtke. U ovom ću primjeru kreirati poslovni PayPal račun.

Valuta tog računa biti će u američkim dolarima (USD), a plaćanje ću kasnije izvršavati u dolarima i eurima (EUR). PayPal automatski radi konverziju valuta.

Klikom na „Create Account“ kreiram Sandbox PayPal račun fortuno@example.com.

My Apps & Credentials

Nakon toga na adresi https://developer.paypal.com/developer/applications kreiram profil aplikacije putem koje ću izvršavati plaćanje.

Klikom na „Create App“ dolazim do ekrana gdje je potrebno unijeti naziv aplikacije i odabrati Sandbox račun s kojim će ta aplikacija biti povezana.

Nakon toga dobijem Client ID koji će mi biti potreban kasnije i bez kojega ne mogu izvršiti plaćanje.

Smart Payment Buttons & Ionic 4

Sada ću kreirati novi Ionic 4 projekt. To činim naredbom:

$ ionic start Ionic4PayPal blank

1	$ ionic start Ionic4PayPal blank

Fokus će biti na početnom ekranu koji će se sastojati samo od gumba za plaćanje tako da koristim blank temu.

Detaljnije o kreiranju Ionic 4 aplikacije moguće je pronaći u blog postu pod naslovom „Ionic 4 CRUD aplikacija“.

PayPal Checkout tj. Smart Payment Buttons omogućava brzu i jednostavnu implementaciju plaćanja u bilo koju aplikaciju na siguran način.

Implementacija počinje dodavanjem sljedeće skripte unutar index.html datoteke:

<script src="https://www.paypal.com/sdk/js?client-id=CLIENTID"></script>

1	<script src="https://www.paypal.com/sdk/js?client-id=CLIENTID"></script>

Kao što se može vidjeti, ovdje mi je potreban ranije kreiran Client ID. Ako drugačije ne navedem zadana valuta biti će USD. U jednom od primjera kao valutu ću dodati EUR, parametar currency.

Popis svih dostupnih parametara moguće je vidjeti na poveznici https://developer.paypal.com/docs/checkout/reference/customize-sdk/.

index.html datoteka sada izgleda ovako:

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="utf-8" />
  <title>Ionic 4 - PayPal</title>
 
  <base href="/" />
 
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />
 
  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
 
  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
 
  <script src="https://www.paypal.com/sdk/js?client-id=CLIENTID"></script>
  <!-- <script src="https://www.paypal.com/sdk/js?client-id=CLIENTID&currency=EUR"></script> -->
</head>
 
<body>
  <app-root></app-root>
</body>
 
</html>

<!DOCTYPE html>

<head>

<title>Ionic 4 - PayPal</title>

</head>

<body>

<app-root></app-root>

</body>

</html>

Prikaz gumba na ekranu vrši se putem ID-a.

<div id="paypal-button-container"></div>

1	<div id="paypal-button-container"></div>

Sve zajedno to sada izgleda ovako:

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      Ionic 4 - PayPal
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content>
  <ion-row *ngIf="!placanjeUspjesno" text-center>
      <ion-col size-lg="4" offset-lg="4">
          <ion-card padding>
         <div id="paypal-button-container"></div>
          </ion-card>
      </ion-col>
  </ion-row>
  <ion-row *ngIf="placanjeUspjesno">
     <ion-col size-lg="4" offset-lg="5" text-center>
        <ion-card padding>
        <p>Thank you for your payment. Your transaction has been completed, and a receipt for your purchase has been emailed to you. Log into your PayPal account to view transaction details.</p>
      </ion-card>
      </ion-col>
  </ion-row>
</ion-content>

<ion-header>

<ion-toolbar color="primary">

<ion-title>

Ionic 4 - PayPal

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-row *ngIf="!placanjeUspjesno" text-center>

<ion-col size-lg="4" offset-lg="4">

<ion-card padding>

</ion-card>

</ion-col>

</ion-row>

<ion-row *ngIf="placanjeUspjesno">

<ion-col size-lg="4" offset-lg="5" text-center>

<ion-card padding>

<p>Thank you for your payment. Your transaction has been completed, and a receipt for your purchase has been emailed to you. Log into your PayPal account to view transaction details.</p>

</ion-card>

</ion-col>

</ion-row>

</ion-content>

Koristim ngIf direktivu kako bi nakon uspješnog plaćanja umjesto gumba za plaćanje prikazao odgovarajuću poruku.

S obzirom da je u pitanju demo aplikacija na ekranu se neće nalaziti ništa drugo osim gumba za plaćanje na vrhu ekrana. U suprotnom bi se više moralo razmisliti o optimalnom mjestu za postavljanje gumba. Više o tome na poveznici https://developer.paypal.com/docs/checkout/best-practices/feature-paypal/#

Inicijalizacija transakcije vrši se klikom na gumb “PayPal” tj. funkcijom createOrder unutar koje ću proslijediti samo iznos koji želim na/platiti.

createOrder: function (data, actions) {
   return actions.order.create({
          purchase_units: [{
            amount: {
              value: _this.paymentAmount
            }
          }]
   });
},

createOrder: function (data, actions) {

return actions.order.create({

purchase_units: [{

amount: {

value: _this.paymentAmount

}

}]

});

Kada kupac odobri transakciju poziva se funkcija onApprove.

onApprove: function (data, actions) {
           return actions.order.capture()
             .then(function (details) {
               console.log(details);
               if(details.status == "COMPLETED"){
                // Show a success message to the buyer
               //alert('Transaction completed by ' + details.payer.name.given_name + '!');
                  _this.placanjeUspjesno = true;
               } else {
                 alert("Neuspješno plaćanje!");
               }
             })
             .catch(err => {
               console.log(err);
             })
}

onApprove: function (data, actions) {

return actions.order.capture()

.then(function (details) {

console.log(details);

if(details.status == "COMPLETED"){

// Show a success message to the buyer

//alert('Transaction completed by ' + details.payer.name.given_name + '!');

_this.placanjeUspjesno = true;

} else {

alert("Neuspješno plaćanje!");

}

})

.catch(err => {

console.log(err);

})

}

Kompletna funkcionalnost izgleda ovako:

import { Component } from '@angular/core';
 
declare var window: any;
 
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
 
  paymentAmount: string = "10";
  placanjeUspjesno: boolean = false;
 
  constructor() {
     this.paymentOptions();
  }
 
  paymentOptions(){
    let _this = this;
    setTimeout(() => {
      // Render the PayPal button into #paypal-button-container
      window.paypal.Buttons({
 
        // Set up the transaction
        createOrder: function (data, actions) {
          return actions.order.create({
            purchase_units: [{
              amount: {
                value: _this.paymentAmount
              }
            }]
          });
        },
 
        // Finalize the transaction
         onApprove: function (data, actions) {
           return actions.order.capture()
             .then(function (details) {
               console.log(details);
               if(details.status == "COMPLETED"){
                // Show a success message to the buyer
               //alert('Transaction completed by ' + details.payer.name.given_name + '!');
                  _this.placanjeUspjesno = true;
               } else {
                 alert("Neuspješno plaćanje!");
               }
             })
             .catch(err => {
               console.log(err);
             })
         }
 
      }).render('#paypal-button-container');
    }, 500)
}
 
}

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

declare var window: any;

@Component({

selector: 'app-home',

templateUrl: 'home.page.html',

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

})

export class HomePage {

paymentAmount: string = "10";

placanjeUspjesno: boolean = false;

constructor() {

this.paymentOptions();

}

paymentOptions(){

let _this = this;

setTimeout(() => {

// Render the PayPal button into #paypal-button-container

window.paypal.Buttons({

// Set up the transaction

createOrder: function (data, actions) {

return actions.order.create({

purchase_units: [{

amount: {

value: _this.paymentAmount

}

}]

});

// Finalize the transaction

onApprove: function (data, actions) {

return actions.order.capture()

.then(function (details) {

console.log(details);

if(details.status == "COMPLETED"){

// Show a success message to the buyer

//alert('Transaction completed by ' + details.payer.name.given_name + '!');

_this.placanjeUspjesno = true;

} else {

alert("Neuspješno plaćanje!");

}

})

.catch(err => {

console.log(err);

})

}

}).render('#paypal-button-container');

}, 500)

}

Demo prikaz

Sada ću proći kroz čitav proces naplate i prikazati ga slikama.

Klikom na žuti gumb „PayPal“ pokrećem postupak plaćanja. Prijavljujem se pomoću PayPal Sandbox računa.

Biram na koji način želim platiti navedeni iznos. To mogu učiniti sa svojeg ukupnog balansa, kreditnom ili debitnom karticom koje su povezane s PayPal računom.

Klikom na “Pay Now” potvrđujem plaćanje. Plaćanje je uspješno izvršeno ako dobijem (Order) ID. U ovom slučaju to je "id": "99D86747XH516732E".

PayPal će mi vratiti sljedeći odgovor, u kojemu imam sve potrebno kako bi kasnije mogao raditi provjeri plaćanja, nakon što je plaćanje uspješno prošlo:

{
  "create_time": "2019-06-03T09:43:05Z",
  "update_time": "2019-06-03T09:43:05Z",
  "id": "99D86747XH516732E",
  "intent": "CAPTURE",
  "status": "COMPLETED",
  "payer": {
    "email_address": "tomislavstankovic1-buyer@gmail.com",
    "payer_id": "FW4BEH8QAPTEG",
    "address": {
      "country_code": "US"
    },
    "name": {
      "given_name": "test",
      "surname": "buyer"
    },
    "phone": {
      "phone_number": {
        "national_number": "4083320878"
      }
    }
  },
  "purchase_units": [
    {
      "reference_id": "default",
      "amount": {
        "value": "10.00",
        "currency_code": "USD"
      },
      "payee": {
        "email_address": "fortuno@example.com",
        "merchant_id": "RMF4F2P7GMT84"
      },
      "shipping": {
        "name": {
          "full_name": "test buyer"
        },
        "address": {
          "address_line_1": "1 Main St",
          "admin_area_2": "San Jose",
          "admin_area_1": "CA",
          "postal_code": "95131",
          "country_code": "US"
        }
      },
      "payments": {
        "captures": [
          {
            "status": "COMPLETED",
            "id": "9V075368A1755811N",
            "final_capture": true,
            "create_time": "2019-06-03T09:43:05Z",
            "update_time": "2019-06-03T09:43:05Z",
            "amount": {
              "value": "10.00",
              "currency_code": "USD"
            },
            "seller_protection": {
              "status": "ELIGIBLE",
              "dispute_categories": [
                "ITEM_NOT_RECEIVED",
                "UNAUTHORIZED_TRANSACTION"
              ]
            },
            "links": [
              {
                "href": "https://api.sandbox.paypal.com/v2/payments/captures/9V075368A1755811N",
                "rel": "self",
                "method": "GET",
                "title": "GET"
              },
              {
                "href": "https://api.sandbox.paypal.com/v2/payments/captures/9V075368A1755811N/refund",
                "rel": "refund",
                "method": "POST",
                "title": "POST"
              },
              {
                "href": "https://api.sandbox.paypal.com/v2/checkout/orders/99D86747XH516732E",
                "rel": "up",
                "method": "GET",
                "title": "GET"
              }
            ]
          }
        ]
      }
    }
  ],
  "links": [
    {
      "href": "https://api.sandbox.paypal.com/v2/checkout/orders/99D86747XH516732E",
      "rel": "self",
      "method": "GET",
      "title": "GET"
    }
  ]
}

{

"create_time": "2019-06-03T09:43:05Z",

"update_time": "2019-06-03T09:43:05Z",

"id": "99D86747XH516732E",

"intent": "CAPTURE",

"status": "COMPLETED",

"payer": {

"email_address": "tomislavstankovic1-buyer@gmail.com",

"payer_id": "FW4BEH8QAPTEG",

"address": {

"country_code": "US"

"name": {

"given_name": "test",

"surname": "buyer"

"phone": {

"phone_number": {

"national_number": "4083320878"

}

"purchase_units": [

{

"reference_id": "default",

"amount": {

"value": "10.00",

"currency_code": "USD"

"payee": {

"email_address": "fortuno@example.com",

"merchant_id": "RMF4F2P7GMT84"

"shipping": {

"name": {

"full_name": "test buyer"

"address": {

"address_line_1": "1 Main St",

"admin_area_2": "San Jose",

"admin_area_1": "CA",

"postal_code": "95131",

"country_code": "US"

}

"payments": {

"captures": [

{

"status": "COMPLETED",

"id": "9V075368A1755811N",

"final_capture": true,

"create_time": "2019-06-03T09:43:05Z",

"update_time": "2019-06-03T09:43:05Z",

"amount": {

"value": "10.00",

"currency_code": "USD"

"seller_protection": {

"status": "ELIGIBLE",

"dispute_categories": [

"ITEM_NOT_RECEIVED",

"UNAUTHORIZED_TRANSACTION"

]

"links": [

{

"href": "https://api.sandbox.paypal.com/v2/payments/captures/9V075368A1755811N",

"rel": "self",

"method": "GET",

"title": "GET"

{

"href": "https://api.sandbox.paypal.com/v2/payments/captures/9V075368A1755811N/refund",

"rel": "refund",

"method": "POST",

"title": "POST"

{

"href": "https://api.sandbox.paypal.com/v2/checkout/orders/99D86747XH516732E",

"rel": "up",

"method": "GET",

"title": "GET"

}

]

}

]

}

"links": [

{

"href": "https://api.sandbox.paypal.com/v2/checkout/orders/99D86747XH516732E",

"rel": "self",

"method": "GET",

"title": "GET"

}

]

}

Osim toga, potvrdu o uspješnom plaćanju mogu vidjeti ako se prijavim unutar PayPal Sandbox računa na adresi https://www.sandbox.paypal.com/ sa korisničkim imenom tomislavstankovic1-buyer@gmail.com i pripadajućom lozinkom.

Ovdje mogu vidjeti koliki mi je trenutni tj. ukupni dostupan iznos na PayPal Sandbox računu kao i popis svih transakcija.

Klikom na „Informatika Fortuno’s Test Store“ mogu vidjeti detalje navedene transakcije.

Zaključak

Što se klijentskog dijela aplikacije tiče to bi bilo sve.

Ostaje još napraviti serverski, backend, dio gdje će se vršiti provjera plaćanja. Na taj API šaljem ranije spomenuti ID "id": "99D86747XH516732E".

// 1. Set up your server to make calls to PayPal
 
// 1a. Import the SDK package
const checkoutNodeJssdk = require('@paypal/checkout-server-sdk');
 
// 1b. Import the PayPal SDK client that was created in `Set up Server-Side SDK`.
/**
 *
 * PayPal HTTP client dependency
 */
const payPalClient = require('../Common/payPalClient');
 
// 2. Set up your server to receive a call from the client
module.exports = async function handleRequest(req, res) {
 
  // 2a. Get the order ID from the request body
  const orderID = req.body.orderID;
 
  // 3. Call PayPal to get the transaction details
  let request = new checkoutNodeJssdk.orders.OrdersGetRequest(orderID);
 
  let order;
  try {
    order = await payPalClient.client().execute(request);
  } catch (err) {
 
    // 4. Handle any errors from the call
    console.error(err);
    return res.send(500);
  }
 
  // 5. Validate the transaction details are as expected
  if (order.result.purchase_units[0].amount.value !== '220.00') {
    return res.send(400);
  }
 
  // 6. Save the transaction in your database
  // await database.saveTransaction(orderID);
 
  // 7. Return a successful response to the client
  return res.send(200);
}

// 1. Set up your server to make calls to PayPal

// 1a. Import the SDK package

const checkoutNodeJssdk = require('@paypal/checkout-server-sdk');

// 1b. Import the PayPal SDK client that was created in `Set up Server-Side SDK`.

/**

* PayPal HTTP client dependency

const payPalClient = require('../Common/payPalClient');

// 2. Set up your server to receive a call from the client

module.exports = async function handleRequest(req, res) {

// 2a. Get the order ID from the request body

const orderID = req.body.orderID;

// 3. Call PayPal to get the transaction details

let request = new checkoutNodeJssdk.orders.OrdersGetRequest(orderID);

let order;

try {

order = await payPalClient.client().execute(request);

} catch (err) {

// 4. Handle any errors from the call

console.error(err);

return res.send(500);

}

// 5. Validate the transaction details are as expected

if (order.result.purchase_units[0].amount.value !== '220.00') {

return res.send(400);

}

// 6. Save the transaction in your database

// await database.saveTransaction(orderID);

// 7. Return a successful response to the client

return res.send(200);

}

Struktura projekta prema package.json:

{
  "name": "Ionic4PayPal",
  "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.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.17.0",
    "typescript": "~3.1.6"
  },
  "description": "Ionic 4 PayPal project"
}

{

"name": "Ionic4PayPal",

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

"typescript": "~3.1.6"

"description": "Ionic 4 PayPal project"

}

P.S. Ovaj je blog post originalno objavljen na adresi https://www.fortuno.hr/ionic-4-paypal-smart-payment-buttons/.

Ionic 4 & Angular Router – prosljeđivanje parametara

Sličan blog post, pod naslovom “Ionic 2 – prosljeđivanje parametara između stranica“, sam već objavio, ali vrijeme je za novi jer Ionic 4 više ne radi isključivo na dosadašnji pop/push način, nego koristi Angular Router, pod uvjetom da se koristi i Angular Framework u pozadini.

Kreiranje projekta

Novi Ionic 4 projekt kreiram već dobro poznatom naredbom:

$ ionic start Ionic4AngularRouter blank
$ cd Ionic4AngularRouter

1 2	$ ionic start Ionic4AngularRouter blank $ cd Ionic4AngularRouter

U ovom koraku trebam postaviti temelj tj. na HomePage komponenti gdje ću kreirati dva gumba kako bi mogao prikazati dva načina za prosljeđivanje parametara.

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      Ionic 4 - Angular Router
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-button expand="full" color="dark" (click)="queryParamsFunction()">
    Query Params
  </ion-button>
 
  <ion-button expand="full" color="dark" (click)="navigationExtrasFunction()">
    Navigation Extras
  </ion-button>
</ion-content>

<ion-header>

<ion-toolbar color="primary">

<ion-title>

Ionic 4 - Angular Router

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content padding>

<ion-button expand="full" color="dark" (click)="queryParamsFunction()">

Query Params

</ion-button>

<ion-button expand="full" color="dark" (click)="navigationExtrasFunction()">

Navigation Extras

</ion-button>

</ion-content>

Na ekranu će to izgledati ovako:

Osim toga, moram pripremiti i neke podatke, about objekt, koje ću prosljeđivati na sljedeću stranicu.

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  about = {
    name: 'Tomislav Stanković',
    website: 'www.tomislavstankovic.com',
    interests: [
      'Ionic', 'Angular', 'NodeJS'
    ]
  };

  constructor() {}

  queryParamsFunction(){}

  navigationExtrasFunction(){}

}

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

@Component({

selector: 'app-home',

templateUrl: 'home.page.html',

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

})

export class HomePage {

about = {

website: 'www.tomislavstankovic.com',

interests: [

'Ionic', 'Angular', 'NodeJS'

]

};

constructor() {}

queryParamsFunction(){}

navigationExtrasFunction(){}

}

Sada mogu kreirati stranicu na koju ću proslijediti podatke i prikazati ih. To činim pomoću naredbe:

$ ionic generate page details

1	$ ionic generate page details

Prosljeđeni podaci će na ovom ekranu biti prikazani na sljedeći način:

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>Angular Router / Details</ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content padding>
<ion-card *ngIf="data">
  <ion-card-header>
    <ion-card-title>
      {{ data.name }}
    </ion-card-title>
    <ion-card-subtitle>
        {{ data.website }}
    </ion-card-subtitle>
  </ion-card-header>
  <ion-card-content>
    <ion-item *ngFor="let i of data.interests">
      {{ i }}
    </ion-item>
  </ion-card-content>
</ion-card>
</ion-content>

<ion-header>

<ion-toolbar color="primary">

<ion-buttons slot="start">

<ion-back-button defaultHref="/"></ion-back-button>

</ion-buttons>

<ion-title>Angular Router / Details</ion-title>

</ion-toolbar>

</ion-header>

<ion-content padding>

<ion-card *ngIf="data">

<ion-card-header>

<ion-card-title>

</ion-card-title>

<ion-card-subtitle>

</ion-card-subtitle>

</ion-card-header>

<ion-card-content>

<ion-item *ngFor="let i of data.interests">

</ion-item>

</ion-card-content>

</ion-card>

</ion-content>

Sada napokon mogu pokazati kako proslijediti podatke tj. parametre sa HomePage na DetailsPage na dva načina.

Prosljeđenim ću parametrima pristupiti kroz ActivatedRoute.

Query Params

Ovaj način je najčešći s kojim sam se susretao i ok je ako se radi mobilna aplikacija kojoj će se pristupati kroz npr. Google Play Store jer se u tom slučaju neće vidjeti URL svake od stranica.

http://localhost:8101/details?aboutData=%7B%22name%22:%22Tomislav%20Stankovi%C4%87%22,%22website%22:%22www.tomislavstankovic.com%22,%22interests%22:%5B%22Ionic%22,%22Angular%22,%22NodeJS%22%5D%7D

1	http://localhost:8101/details?aboutData=%7B%22name%22:%22Tomislav%20Stankovi%C4%87%22,%22website%22:%22www.tomislavstankovic.com%22,%22interests%22:%5B%22Ionic%22,%22Angular%22,%22NodeJS%22%5D%7D

Podatke prosljeđujem sa HomePage

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  about = {
    name: 'Tomislav Stanković',
    website: 'www.tomislavstankovic.com',
    interests: [
      'Ionic', 'Angular', 'NodeJS'
    ]
  };

  constructor(private _router: Router) {}

  queryParamsFunction(){
    this._router.navigate(['/details'], 
       { queryParams: 
           { aboutData: JSON.stringify(this.about) }
       }
    );
  }

  navigationExtrasFunction(){}

}

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

import { Router } from '@angular/router';

@Component({

selector: 'app-home',

templateUrl: 'home.page.html',

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

})

export class HomePage {

about = {

website: 'www.tomislavstankovic.com',

interests: [

'Ionic', 'Angular', 'NodeJS'

]

};

constructor(private _router: Router) {}

queryParamsFunction(){

this._router.navigate(['/details'],

{ queryParams:

{ aboutData: JSON.stringify(this.about) }

}

);

}

navigationExtrasFunction(){}

}

Na DetailsPage podatke dohvaćam na sljedeći način:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-details',
  templateUrl: './details.page.html',
  styleUrls: ['./details.page.scss'],
})
export class DetailsPage implements OnInit {

  data: any;

  constructor(private _activatedRoute: ActivatedRoute) { 

   this._activatedRoute.queryParams.subscribe(params => {
        if (params && params.aboutData) {
            this.data = JSON.parse(params.aboutData);
            console.log(this.data);
        }
    });  

  }

   ngOnInit() {}

}

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

import { ActivatedRoute } from '@angular/router';

@Component({

selector: 'app-details',

templateUrl: './details.page.html',

styleUrls: ['./details.page.scss'],

})

export class DetailsPage implements OnInit {

data: any;

constructor(private _activatedRoute: ActivatedRoute) {

this._activatedRoute.queryParams.subscribe(params => {

if (params && params.aboutData) {

this.data = JSON.parse(params.aboutData);

console.log(this.data);

}

});

}

ngOnInit() {}

}

U praksi to izgleda ovako:

Navigation Extras State

Kako bi ovo funkcioniralo potrebno je koristiti Angular 7.2 ili noviju verziju.

State passed to any navigation. This value will be accessible through the extras object returned from router.getCurrentNavigation() while a navigation is executing. Once a navigation completes, this value will be written to history.state when the location.go or location.replaceState method is called before activating of this route. Note that history.state will not pass an object equality test because the navigationId will be added to the state before being written.

While history.state can accept any type of value, because the router adds the navigationId on each navigation, the state must always be an object. – NavigationExtras

Ovo rješenje je slično onome iznad s tom razlikom što izgleda ljepše kada je vidljiv URL jer se parametri ne vide. To je posebno korisno kada se radi Ionic Progressive Web App.

http://localhost:8101/details

1	http://localhost:8101/details

Podatke prosljeđujem sa HomePage

import { Component } from '@angular/core';
import { Router, NavigationExtras } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  about = {
    name: 'Tomislav Stanković',
    website: 'www.tomislavstankovic.com',
    interests: [
      'Ionic', 'Angular', 'NodeJS'
    ]
  };

  constructor(private _router: Router) {}

  queryParamsFunction(){}

  navigationExtrasFunction(){
    let navigationExtras: NavigationExtras = {
      state: {
        aboutData: this.about
      }
    };
    this._router.navigate(['/details'], navigationExtras);
  }

}

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

import { Router, NavigationExtras } from '@angular/router';

@Component({

selector: 'app-home',

templateUrl: 'home.page.html',

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

})

export class HomePage {

about = {

website: 'www.tomislavstankovic.com',

interests: [

'Ionic', 'Angular', 'NodeJS'

]

};

constructor(private _router: Router) {}

queryParamsFunction(){}

navigationExtrasFunction(){

let navigationExtras: NavigationExtras = {

state: {

aboutData: this.about

}

};

this._router.navigate(['/details'], navigationExtras);

}

Na DetailsPage podatke dohvaćam na sljedeći način:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-details',
  templateUrl: './details.page.html',
  styleUrls: ['./details.page.scss'],
})
export class DetailsPage implements OnInit {

  data: any;

  constructor(private _activatedRoute: ActivatedRoute,
              private _router: Router) { 

      this._activatedRoute.queryParams.subscribe(params => {
          if (this._router.getCurrentNavigation().extras.state) {
              this.data = this._router.getCurrentNavigation().extras.state.aboutData;
              console.log(this.data);
          }
      });

  }

   ngOnInit() {
  }

}

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

import { ActivatedRoute, Router } from '@angular/router';

@Component({

selector: 'app-details',

templateUrl: './details.page.html',

styleUrls: ['./details.page.scss'],

})

export class DetailsPage implements OnInit {

data: any;

constructor(private _activatedRoute: ActivatedRoute,

private _router: Router) {

this._activatedRoute.queryParams.subscribe(params => {

if (this._router.getCurrentNavigation().extras.state) {

this.data = this._router.getCurrentNavigation().extras.state.aboutData;

console.log(this.data);

}

});

}

ngOnInit() {

}

U praksi to izgleda ovako:

Zaključak

Struktura projekta prema package.json

{
  "name": "Ionic4AngularRouter",
  "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.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": "Ionic4AngularRouter",

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

}

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:

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

}