Tomislav Stanković, Autor na Tomislav Stanković

Optimizacija razvojnog okruženja za 95% slučajeva umjesto za preostalih 5%

Nedavno sam naletio na ovaj vrlo zanimljiv tekst što me navelo na razmišljanje jer sam se prepoznao u tome.

Autor gore navedenog teksta naišao je na vrlo zanimljiv naslov “Why I wrote 33 VSCode extensions and how I manage them” gdje se među komentarima moglo vidjeti sljedeće:

My problem with adding plugins or extending my environment much past the default is that eventually I have to deal with a co-worker’s non-extended default installation. I end up relying too much on the add-ins.

Shvatio sam da sam i ja do nedavno na takav način, za onih “što ako” 5%, donosio odluke. Komentar koji mi je posebno “zapeo za oko” kaže:

I strongly dislike the reasoning that suggests you should hamstring yourself 100% of the time to accommodate a potential situation that may affect you 5% of the time.
“I don’t use multiple monitors because sometimes I’m just with a laptop”.
“I don’t customize my shell because sometimes I have to ssh to a server”
“I don’t customize my editor because sometimes I have to use a coworkers editor”.

Sada vidim koliko takav način razmišljanja nije imao smisla, ali tada mi se sve to činilo sasvim logično i vrlo sam odlučno branio svoje stavove.

Sjećam se da dugo vremena nisam htio koristiti nikakvu drugu temu niti većinu proširenja za Visual Studio Code ili Sublime Text jer što kada budem morao koristiti PC od kolege, a on koristi zadanu temu ili nema određeno proširenje.

Znači u startu sam se ograničavao i umjesto da sebi olakšam 95% slučajeva ja sam više razmišljao i radio na preostalih 5% jer tada nisam shvaćao sljedeće – optimizacija za 5% je primjer optimizacije za scenarij “što ako”.

Činio sam sve što je u mojoj moći da svoje razvojno okruženje učinim dovoljno generičkim da može raditi svugdje i da mogu biti spreman za onih 5%, ali sam zapravo otežavao sam sebi 95% vremena, a to je vrijeme koje je najvažnije.

Takve vrste odluka ne utječu samo na razvojno okruženje nego i na kod.

Personally, I often try and over optimize before I’ve even begun. Consequently I get overwhelmed and rarely build any of the ideas I was thinking about. – izvor

Ako se nešto ide programirati da bi odgovaralo “što ako” scenariju to znači da vjerojatno u potpunosti ne odgovara traženoj specifikaciji. Možemo mi kao developeri misliti što god hoćemo i htjeti unaprijed napraviti pripremu za sve moguće scenarije, ali ako to nije traženo po specifikaciji može doći samo do još više grešaka koje će samo oduzimati dodatno vrijeme za rješavanje, a do tih grešaka nije niti trebalo doći.

Premature optimization is the root of all evil.

Ipak, kada vidimo na koji način radi Google i druge velike tvrtke opet je moguće doći do izgovora za “što ako” scenarij i raditi nešto što nam realno nije potrebno pri čemu fokus opet odlazi na dio od 5%.

Ako neka velika tvrtka nešto koristi na određeni način to ne znači da taj način odgovara svim ostalim tvrtkama.

Instead of just getting your app up and running and seeing how it goes, you try to make decisions so that your application can be developed by 100 different teams sprawling across 5,000 developers.

Do 5% može doći i prilikom procesa implementacije tj. postavljanja aplikacije u produkciju.

To često može uključivati mjesece potrošene na detalje poput savršenog skaliranja, automatizacije određenih procesa i sl. što na kraju ne dovede do očekivanih rezultata jer sva dostupna rješenja, ma koliko tvrdila drugačije, ne mogu dati odgovor za sve vrste scenarija. Velike tvrtke koje su ta rješenja kreirala i koje ih koriste iza toga skrivaju mnoštvo specifičnih prilagodbi da bi sve radilo na određeni način.

When you try to optimize your deployment strategy to handle a billion requests a second from day 1, you’re just setting yourself up for an endless loop of theory based research.

Zaključno, energiju je pametnije usmjeriti prema 95% i vidjeti kako će se stvar ponašati. Ovisno o povratnim informacijama raditi dodatne optimizacije. Drugim riječima, raditi optimizaciju onda kada postoji realna potreba za tim, a ne zbog “što ako” slučajeva.

SMS login – Angular & Firebase

U nastavku ovog blog posta pokazati ću kako napraviti jednostavnu Angular web aplikaciju sa funkcionalnom SMS prijavom.

Prednosti korištenja SMS prijave:

– Sprečavanje lažnih korisnika – korištenjem SMS prijave onemogućava se kreiranje lažnih korisnika jer svaki korisnik koji se želi prijaviti treba imati jedinstveni broj telefona na koji će dobiti kod pomoću kojega će se prijaviti.
– Daje dodatnu vrijednost bazi korisnika – svaki potvrđeni korisnik koji stoji iza svakog od tih brojeva telefona predstavlja određenu vrijednost jer možemo biti sigurni da to nije lažni korisnik.
– Povećana sigurnost i poboljšava korisničko iskustvo – u današnje vrijeme korisnici koriste jako puno raznih aplikacija i postaje sve teže pratiti login podatke svake od njih. Omogućavanjem SMS prijave korisnik ne mora smišljati novo korisničko ime ili lozinku nego je samo dovoljno da uz sebe ima svoj mobitel kako bi se uspješno prijavio. Također, treća strana se ne može prijaviti kao npr. ja ako uz sebe nema moj mobilni telefon da pročita kod čime se drastično povećava sigurnost.

Kreiranje projekta

Kreiram novi Angular web projekt koristeći Angular CLI.

$ ng new angular-firebase-sms-login
$ cd angular-firebase-sms-login

1 2	$ ng new angular-firebase-sms-login $ cd angular-firebase-sms-login

Google Firebase

Nakon što sam kreirao Angular projekt mogu se prebaciti na Google Firebase i ondje postaviti projekt kako bi uopće mogao koristiti SMS login.

Kroz nekoliko sekundi Firebase projekt će biti spreman.

Unutar izbornika Develop – Authentication potrebno je odabrati Sign-in-method tab. Ondje se nalazi popis opcija dostupnih za login/prijavu.

Ja ću, naravno, ovaj put odabrati Phone.

Allow users to sign in with a mobile phone number, using Firebase SDK phone verification and user authentication tools.

Phone tj. SMS prijava je aktivirana.

Ako sada u izborniku Authentication – Users pogledam popis korisnika on će biti prazan jer za sada još nisam napravio niti jednu prijavu. Nakon što se sa bilo kojim brojem mobitela prvi put prijavim taj će se broj prikazati kao novi korisnik.

Prema trenutnim postavkama moj će projekt raditi ako web aplikaciju pokrenem na adresi http://localhost:4200/.

Međutim ako imam neku (pod)domenu kao npr. test.angularaplikacija.com ondje prijava putem SMS-a neće raditi dok ručno ne odobrim tu (pod)domenu.

To use Firebase Authentication in a web app, you must whitelist the domains that the Firebase Authentication servers can redirect to after signing in a user.

By default, localhost and your Firebase project’s hosting domain are whitelisted. You must whitelist the full domain names of any other of your web app’s hosts. Note: whitelisting a domain allows for requests from any URL and port of that domain.

Prije nego se vratim svojem Angular projektu trebaju mi još neki podaci bez kojih moj Angular projekt ne bi znao kako se povezati s Firebaseom.

Ovdje idem na Project settings.

Nakon toga idem na Add Firebase to your web app.

I konačno, ovdje imam konfiguracijski config objekt koju ću kasnije postaviti u svoj Angular projekt i tako ga povezati sa Firebaseom.

Implementacija prijave/logina

Sada se vraćam u svoj Angular projekt.

AppComponent ću malo prilagoditi tj. dodati joj nekoliko detalja kojih trenutno nema.

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

@Injectable()
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  title = 'angular-firebase-sms-login';

  constructor() {
  }

  ngOnInit() {
  }

}

import { Component,

OnInit,

Injectable } from '@angular/core';

@Injectable()

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

title = 'angular-firebase-sms-login';

constructor() {

}

ngOnInit() {

}

Trebat će mi window objekt pa ću napraviti servis za njega kako bi ga mogao pozivati u cijelog projektu sa jednog mjesta.

$ ng g service window

1	$ ng g service window

U servisu se nalazi sljedeće:

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

@Injectable()
export class WindowService {

  get windowRef() {
    return window
  }

}

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

@Injectable()

export class WindowService {

get windowRef() {

return window

}

Sada sam spreman za dodavanje Firebasea unutar projekta, a to radim naredbama:

$ npm install --save firebase
$ npm install angularfire2 firebase --save

1 2	$ npm install --save firebase $ npm install angularfire2 firebase --save

Sada sve to trebam navesti unutar app.module.ts datoteke. Ovdje moram uvesti FormsModule zato što ću u login formi koristiti [(ngModel)].

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { FormsModule } from '@angular/forms';

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';

export const firebaseConfig = {
  apiKey: "***************************************",
  authDomain: "angular-firebase-sms-login.firebaseapp.com",
  databaseURL: "https://angular-firebase-sms-login.firebaseio.com",
  projectId: "angular-firebase-sms-login",
  storageBucket: "angular-firebase-sms-login.appspot.com",
  messagingSenderId: "************"
};

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

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

import { AppComponent } from './app.component';

import { DashboardComponent } from './dashboard/dashboard.component';

import { FormsModule } from '@angular/forms';

import { AngularFireModule } from 'angularfire2';

import { AngularFireAuthModule } from 'angularfire2/auth';

export const firebaseConfig = {

apiKey: "***************************************",

authDomain: "angular-firebase-sms-login.firebaseapp.com",

databaseURL: "https://angular-firebase-sms-login.firebaseio.com",

projectId: "angular-firebase-sms-login",

storageBucket: "angular-firebase-sms-login.appspot.com",

messagingSenderId: "************"

};

@NgModule({

declarations: [

AppComponent,

DashboardComponent

imports: [

BrowserModule,

AngularFireModule.initializeApp(firebaseConfig),

AngularFireAuthModule,

FormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Na ekranu će to izgledati ovako:

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
   
  <div [hidden]="user" style="text-align:center">
    <label for="phone">Broj mobitela:</label><br>
    <input type="text" [(ngModel)]="phoneNumber.country" class="input" placeholder="+385"  maxlength="4">
    <input type="text" [(ngModel)]="phoneNumber.line"  class="input" placeholder="9********" maxlength="9">
  
    <div id="recaptcha-container"></div>
  
    <button (click)="sendLoginCode()">Pošalji SMS</button>
  
    <div *ngIf="windowRef.confirmationResult">
      <hr>
      <label for="code">Ovdje unesite svoj pin</label><br>
      <input type="text" name="code" [(ngModel)]="verificationCode">
  
      <button (click)="verifyLoginCode()">Potvrdi</button>
    </div>
  </div>

  <div *ngIf="user">
    <p>Prijava uspješna!</p>
    <p>UserId: {{ user?.uid }}</p>
  </div>

</div>

<h1>

Welcome to {{ title }}!

</h1>

<label for="phone">Broj mobitela:</label><br>

<button (click)="sendLoginCode()">Pošalji SMS</button>

<hr>

<label for="code">Ovdje unesite svoj pin</label><br>

<button (click)="verifyLoginCode()">Potvrdi</button>

</div>

<p>Prijava uspješna!</p>

<p>UserId: {{ user?.uid }}</p>

</div>

Funkcionalnost se može vidjeti u nastavku, a sastoji se od nekoliko funkcija. Osnova svega je broj mobitela koji je u E.164 obliku.

import { Component, OnInit, Injectable } from '@angular/core';
import { WindowService } from './window.service';

import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

export class PhoneNumber {
  country: string = "+385";
  line: string;
  get e164() {
    const num = this.country + this.line
    return `+${num}`
  }
}

@Injectable()
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [WindowService]
})
export class AppComponent implements OnInit {
  
  title = 'Angular Firebase SMS Login';

  windowRef: any;
  phoneNumber = new PhoneNumber()
  verificationCode: string;
  user: any; 

  constructor(
    private win: WindowService,
    public _angularAuth: AngularFireAuth) {
  }

  ngOnInit() {
    this.windowRef = this.win.windowRef;
    this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container')
    this.windowRef.recaptchaVerifier.render();
  }

  sendLoginCode() {
    const appVerifier = this.windowRef.recaptchaVerifier;
    const num = this.phoneNumber.e164;
    firebase.auth().signInWithPhoneNumber(num, appVerifier)
            .then(result => {
                this.windowRef.confirmationResult = result;
            })
            .catch( error => console.log(error) );
  }

  verifyLoginCode() {
    this.windowRef.confirmationResult
                  .confirm(this.verificationCode)
                  .then( result => {
                    this.user = result.user;
                    console.log(this.user);
    })
    .catch( error => console.log(error, "Pogrešan kod?"));
  } 

}

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

import { WindowService } from './window.service';

import { AngularFireAuth } from 'angularfire2/auth';

import * as firebase from 'firebase/app';

export class PhoneNumber {

country: string = "+385";

line: string;

get e164() {

const num = this.country + this.line

return `+${num}`

}

@Injectable()

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css'],

providers: [WindowService]

})

export class AppComponent implements OnInit {

title = 'Angular Firebase SMS Login';

windowRef: any;

phoneNumber = new PhoneNumber()

verificationCode: string;

user: any;

constructor(

private win: WindowService,

public _angularAuth: AngularFireAuth) {

}

ngOnInit() {

this.windowRef = this.win.windowRef;

this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container')

this.windowRef.recaptchaVerifier.render();

}

sendLoginCode() {

const appVerifier = this.windowRef.recaptchaVerifier;

const num = this.phoneNumber.e164;

firebase.auth().signInWithPhoneNumber(num, appVerifier)

.then(result => {

this.windowRef.confirmationResult = result;

})

.catch( error => console.log(error) );

}

verifyLoginCode() {

this.windowRef.confirmationResult

.confirm(this.verificationCode)

.then( result => {

this.user = result.user;

console.log(this.user);

})

.catch( error => console.log(error, "Pogrešan kod?"));

}

U praksi to izgleda ovako:

Klikom na “Pošalji SMS” šalje se SMS poruka na uneseni broj mobitela.

Nakon unosa koda iz SMS-a uspješno se prijavljujem.

U slučaju da se idem nekoliko puta za redom prijaviti i Google Firebase posumnja na zloupotrebu pojavit će se napredna reCAPTCHA.

Firebase Phone Authentication With Angular 4 Tutorial — Izvor: https://angularfirebase.com/lessons/firebase-phone-authentication-with-angular-4-tutorial/

Tek sada, nakon što je prijava uspješno prošla, mogu svoj broj mobitela vidjeti unutar Google Firebase sučelja.

Zaključak

Ovo je bio primjer jednostavne Angular web aplikacije sa SMS prijavom gdje se sva logika odvija na klijentskoj strani. Nedavno sam napravio i verziju gdje se sva logika odvija na serverskoj strani unutar NodeJS-a sa dodatnim sigurnosnim provjerama. Bilo bi previše za ovaj blog post da sam išao i taj dio obraditi. Možda u nekom od sljedećih blog postova, ako netko od posjetitelja bloga bude zainteresiran.

Osim SMS prijave obradio sam nekoliko tema s ostalim vrstama prijave kao što su:
– Angular & Firebase – registracija i prijava
– Ionic 3 – Google login/prijava
– Ionic 3 – Facebook prijava
– Ionic 3 – Firebase registracija i prijava

Struktura projekta prema package.json

{
  "name": "angular-firebase-sms-login",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "angularfire2": "^5.1.1",
    "core-js": "^2.5.4",
    "firebase": "^5.7.2",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.11.0",
    "@angular/cli": "~7.1.4",
    "@angular/compiler-cli": "~7.1.0",
    "@angular/language-service": "~7.1.0",
    "@types/node": "~8.9.4",
    "@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.1",
    "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": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  }
}

{

"name": "angular-firebase-sms-login",

"version": "0.0.0",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/animations": "~7.1.0",

"@angular/common": "~7.1.0",

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

"@angular/core": "~7.1.0",

"@angular/forms": "~7.1.0",

"@angular/platform-browser": "~7.1.0",

"@angular/platform-browser-dynamic": "~7.1.0",

"@angular/router": "~7.1.0",

"angularfire2": "^5.1.1",

"core-js": "^2.5.4",

"firebase": "^5.7.2",

"rxjs": "~6.3.3",

"tslib": "^1.9.0",

"zone.js": "~0.8.26"

"devDependencies": {

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

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

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

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

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

"@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.1",

"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": "~7.0.0",

"tslint": "~5.11.0",

"typescript": "~3.1.6"

}

Pregled 2018. godine

2018. je stigla svome kraju što znači da je pravo vrijeme za razmisliti o svemu što se tijekom godine događalo i možda postaviti temelje za 2019.

Jedan blog post tjedno

Ukupno sam ove godine objavio 53 blog posta.

Nije uvijek bilo jednostavno, ali već dvije godine se držim odluke da objavljujem jedan blog post tjedno, vikendom.

Inspiration is for amateurs – the rest of us just show up and get to work. – Chuck Close

Najveća greška što se ovoga tiče je činjenica da 99% blog postova nisam pripremio unaprijed nego bi ih pisao upravo tijekom vikenda. Najčešće bi to bilo nedjeljom jer bi subotom imao nekog posla koji ne mogu ostaviti za nedjelju. Sve to znači da nije bilo dana u tjednu kada ne bi mislio o developmentu – od ponedjeljka do petka na poslu, subotom radim nešto drugo, ali razmišljam o temi koju ću objaviti na blogu kasnije tijekom dana ili u nedjelju, a onda u nedjelju poslije ručka se ide u razradu teme i sastavljanje blog posta. Nakon toga opet dolazi radni tjedan i tako u krug.

I sam vidim da bi trebao promijeniti ritam, da mi se ne bi dogodio burnout, ali mi je taj tempo do sada toliko prešao u naviku da ne znam kako ću se odlučiti preskočiti neki vikend. Posebno kada vidim koliko su neki od blog postova pomogli kolegama s posla koji su na taj način brže i jednostavnije mogli obavljati svoje radne zadatke.

Ono što mi nije uspjelo ove godine je paralelno održavanje bloga na engleskom jeziku gdje bi obrađivao iste teme kao i na ovom blogu. Objavio sam nekoliko blog postova i onda je sve stalo jer nedjelja kasno poslije podne, kada bi objavio blog post na ovom blogu, jednostavno nije bilo pravo vrijeme za ponavljanje svega toga na engleskom jeziku.

Imam osjećaj da bi ova godina mogla biti odlučujuća za ovaj blog. Ili ću sve dići na jedan viši nivo ili drastično smanjiti ulaganje resursa. U prosjeku mi godišnje ode cca 300 sati na blog. Da sam nastavio sa blogom na engleskom to bi se poduplalo, a da sam uz to radio i video tutorijale pitanje je kako bi više išta stigao raditi u životu.

Kako god bilo za sada još uvijek uživam u ovom blogu i svaki put kada kliknem na “Objavi” imam osjećaj da sam nešto dobro napravio.

Planovi za 2019.

Nastavljam s objavom barem jednog blog posta tjedno. Još moram odlučiti hoće li to i dalje biti vikendom ili ću objavu ostaviti za npr. ponedjeljak. Što se tema tiče fokus će i dalje biti na razvoju za web koristeći JavaScript (Angular, Ionic Framework, NodeJS).

Također, unatoč velikoj količini besplatnih dev resursa koji su na internetu dostupni svake godine odaberem nekoliko premium tj. plaćenih resursa koji će mi na strukturiran način dati temelje za područje koje me u tom trenutku zanima. Uskoro počinjem s jednim NodeJS tečajem, a paralelno uz to ide i CSS tako da će nešto o tome uskoro biti i na ovom blogu.

2017. i 2018. godine objavio sam blog postove sa popisom pročitanih knjiga jer nisam htio ovaj blog pretvoriti u knjižnicu.

U 2019. godini svaka će knjiga dobiti svoj blog post. Tako ću imati priliku više se posvetiti svakoj knjizi, izvući više citata, pokazati naslovnicu i sl.

Ionic 3 – uspostavljanje telefonskog poziva

Iako se poziv može uspostaviti i korištenjem

<a href="tel:0101010101">Zovi</a>

1	<a href="tel:0101010101">Zovi</a>

ipak je korisno imati više mogućnosti koje pruža Call Number plugin.

Kreiranje aplikacije

Kreiram novi Ionic projekt i odmah dodajem Android platformu.

$ ionic start IonicCallNumber --blank
$ cd IonicCallNumber
$ ionic cordova platform add android

$ ionic start IonicCallNumber --blank

$ cd IonicCallNumber

$ ionic cordova platform add android

Call Number

Plugin Call Number dodajem sljedećim naredbama:

$ ionic cordova plugin add call-number
$ npm install --save @ionic-native/call-number

1 2	$ ionic cordova plugin add call-number $ npm install --save @ionic-native/call-number

Naravno, nakon toga ovaj plugin deklariram unutar app.module.ts datoteke.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { CallNumber } from '@ionic-native/call-number';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    CallNumber,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { CallNumber } from '@ionic-native/call-number';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

CallNumber,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Ekran za uspostavljanje poziva sadržavati će samo jedan gumb.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Call Number
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="call()">Zovi</button>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Call Number

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

</ion-content>

Funkcionalnost se sastoji od pozivanja call() funkcije.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { CallNumber } from '@ionic-native/call-number';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public _navCtrl: NavController,
              private _callNumber: CallNumber) {
  }

  async call(){
     try {
       await this._callNumber.callNumber('0101010101', false);
       console.log("Pozivam broj.");
     }
     catch(e){
      console.error(e);
     }
  }

}

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

import { NavController } from 'ionic-angular';

import { CallNumber } from '@ionic-native/call-number';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public _navCtrl: NavController,

private _callNumber: CallNumber) {

}

async call(){

try {

await this._callNumber.callNumber('0101010101', false);

console.log("Pozivam broj.");

}

catch(e){

console.error(e);

}

Kao što se može vidjeti u dokumentaciji https://ionicframework.com/docs/native/call-number/ dva su parametra koja mogu koristiti prilikom uspostavljanja poziva.

Param	Type	Details
numberToCall	`string`	The phone number to call as a string
bypassAppChooser	`boolean`	Set to true to bypass the app chooser and go directly to dialer

U mojem primjeru koristio sam false zato što želim da me aplikacija puta putem koje aplikacije želim uspostaviti poziv.

Nakon klik na gumb za uspostavu poziva napuštam Ionic aplikaciju.

U tom trenutku prvo što se događa je to da Ionic aplikacija traži dozvolu za korištenje te funkcionalnosti. Nakon što se dobije dozvola biti će mi ponuđene sve aplikacije koje imam instalirane na mobilnom uređaju, a koje imaju mogućnost uspostavljanja poziva. Da sam u gornjem primjeru koristio true umjesto false u tom mi se slučaju ne bi prikazao taj popis aplikacija nego bi se poziv uspostavio odmah.

Zaključak

Struktura aplikacije prema package.json

{
  "name": "IonicCallNumber",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/call-number": "^4.18.0",
    "@ionic-native/core": "~4.18.0",
    "@ionic-native/splash-screen": "~4.18.0",
    "@ionic-native/status-bar": "~4.18.0",
    "@ionic/storage": "2.2.0",
    "call-number": "^1.0.1",
    "cordova-android": "7.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^2.3.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "mx.ferreyra.callnumber": "~0.0.2",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.1",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic Call Number project",
  "cordova": {
    "plugins": {
      "mx.ferreyra.callnumber": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "android"
    ]
  }
}

{

"name": "IonicCallNumber",

"version": "0.0.1",

"author": "Tomislav Stanković",

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

"private": true,

"scripts": {

"start": "ionic-app-scripts serve",

"clean": "ionic-app-scripts clean",

"build": "ionic-app-scripts build",

"lint": "ionic-app-scripts lint"

"dependencies": {

"@angular/animations": "5.2.11",

"@angular/common": "5.2.11",

"@angular/compiler": "5.2.11",

"@angular/compiler-cli": "5.2.11",

"@angular/core": "5.2.11",

"@angular/forms": "5.2.11",

"@angular/http": "5.2.11",

"@angular/platform-browser": "5.2.11",

"@angular/platform-browser-dynamic": "5.2.11",

"@ionic-native/call-number": "^4.18.0",

"@ionic-native/core": "~4.18.0",

"@ionic-native/splash-screen": "~4.18.0",

"@ionic-native/status-bar": "~4.18.0",

"@ionic/storage": "2.2.0",

"call-number": "^1.0.1",

"cordova-android": "7.0.0",

"cordova-plugin-device": "^2.0.2",

"cordova-plugin-ionic-keyboard": "^2.1.3",

"cordova-plugin-ionic-webview": "^2.3.1",

"cordova-plugin-splashscreen": "^5.0.2",

"cordova-plugin-statusbar": "^2.4.2",

"cordova-plugin-whitelist": "^1.3.3",

"ionic-angular": "3.9.2",

"ionicons": "3.0.0",

"mx.ferreyra.callnumber": "~0.0.2",

"rxjs": "5.5.11",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.26"

"devDependencies": {

"@ionic/app-scripts": "3.2.1",

"typescript": "~2.6.2"

"description": "An Ionic Call Number project",

"cordova": {

"plugins": {

"mx.ferreyra.callnumber": {},

"cordova-plugin-whitelist": {},

"cordova-plugin-statusbar": {},

"cordova-plugin-device": {},

"cordova-plugin-splashscreen": {},

"cordova-plugin-ionic-webview": {

"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"

"cordova-plugin-ionic-keyboard": {}

"platforms": [

"android"

]

}

Ionic – kako odrediti minimalnu verziju Androida

Jedan od detalja o kojemu je potrebno razmišljati prije nego se krene s razvojem Ionic aplikacije za Android platformu je minimalna podržana verzija Androida na kojoj će se Ionic aplikacija moći pokrenuti.

To se može postaviti unutar config.xml datoteke, a izgleda ovako:

<?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>IonicAndroidVersion</name>
    <description>Example Ionic/Cordova app.</description>
    <author email="hi@ionicframework" 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="^2.0.0" />
    <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
    <engine name="android" spec="~7.0.0" />
</widget>

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

<name>IonicAndroidVersion</name>

<description>Example Ionic/Cordova app.</description>

<author email="hi@ionicframework" 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>

U primjeru iznad stoji <preference name="android-minSdkVersion" value="19" /> što znači da se ta Ionic aplikacija može pokrenuti na verziji Androida KitKat (4.4 – 4.4.4) ili novijoj.

Na Google Play Storeu to će izgledati ovako:

Ako sam aplikaciju testirao na raznim verzijama i zaključio da se najbolje ponaša na verziji Lollipop (5.0 – 5.1.1) ili novijoj onda ću postaviti sljedeće:

<preference name="android-minSdkVersion" value="21" />

1	<preference name="android-minSdkVersion" value="21" />

U tom će slučaju ta informacija na Google Play Storeu izgledati ovako: