Tomislav Stanković, Autor na Tomislav Stanković

Shift 2018, Split – osvrt na konferenciju

Ove sam godine, zajedno s trojicom kolega iz tvrtke Informatika Fortuno, po prvi put posjetio Shift konferenciju u Splitu koja je u dva dana ponudila 20 predavanja uz 9 radionica na vrlo zanimljivoj i neobičnoj lokaciji za jednu IT konferenciju, a to je HNK Split.

The biggest Developer Conference in Southeast Europe. This event, Shift 2018 is the seventh and will bring together more than 1300 attendees. During the two conference days, Shift becomes a meeting place for developers in the most beautiful city in the world.

Sadržaj konferencije bio je stvarno raznolik i moglo se pronaći po nešto za svakoga. Predavači su dolazili iz tvrtki kao što su Microsoft, Shopify, Netflix, GitHub, Toptal, Five, Heroku, Google, Red Hat, Mozilla,…

Predavanja:

• Designing for impact: Why beautiful design is not enough? – Vladimir Koncar (Five)
• webpack: Building a Platform – Sean Larkin (Microsoft)
• Building Accessible Experiences – Tiffany Tse (Shopify)
• The Product Manager is Your Best Friend – Marc Abraham (Mind the Product)
• Typescript – Increase your Development Velocity – Patrick Desjardins (Netflix)
• Artificial Intelligence and Machine Learning in the browser – Keyfer Mathewson (Shopify)
• Don’t get lost in space: How high performing teams collaborate to ship world class software – Kathy Simpson (GitHub)
• From Web to Desktop, the Future of Modern Web Applications That Need to Speak to Your Hardware – Luca Cipriani (Arduino)
• Forging Ahead with Containers – Tarik Makota & Cyrille Fauvel (AWS & Autodesk)
• So you want a remote job, uh? – Marco Cecconi (Toptal)
• PHP in 2018 – Rasmus Lerdorf (PHP)
• Blockchains For Distributed Applications – John Feminella (Pivotal)
• How we started with GraphQL on top of our REST API – Michal Sänger (kiwi.com)
• Value of Data and Future of Privacy – Marin Tvrdic (Internet of People)
• Run Less Software – Richard Archbold (Intercom)
• Ditch the MVP – DeVaris Brown (Heroku)
• CSS: Where it Came From, Where it’s Going – Hakon Wium Lie (Creator of CSS)
• Google Home meets containers on Google Cloud – Mete Atamel (Google)
• How To Jump Start a Career in Open Source – Eric Schabell (Red Hat)
• Project Things – Unifying the Internet of Things – Kalyan Dikshit (Mozilla)

Struktura konferencije:

Za razliku od npr. KulenDayza, predavanja se ne odvijaju paralelno. U jednu ruku to je dobro jer se ne može dogoditi da nekoga istovremeno zanimaju oba predavanja pa jedno mora propustiti, dok je u drugu ruku to malo manje dobro jer ako nekoga neko predavanje ne zanima onda je ta osoba ‘prisiljena’ na pauzu. Pauza se najbolje skrati druženjem u zajedničkim prostorijama uz hladno piće što na kraju ispadne i najbolji dio cijele konferencije. Uostalom, predavanja će biti dostupna i na YouTube kanalu TheShiftConference.

Kao što sam već naveo, konferencija se održavala u HNK Split čiji prostor, iako vrlo impresivan, nije baš prilagođen ovakvoj vrsti konferencije. Prostor za ručak nalazio se u donjoj etaži i vrlo brzo se stvara zastoj zbog otežane cirkulacije ljudi pa su neki i uz najbolju volju organizatora ostali bez ručka.

Osim same konferencije, Split je bio odličan domaćin tako da se ostatak vremena mogao provesti uživajući u sunčanom vremenu uz more i hladno piće tijekom dana odnosno ugostiteljskim objektima tijekom noći.

Ono što sam ja uzeo od sadržaja konferencije je želja da što prije prijeđem na PHP 7 sa trenutne verzije 5.6 o čemu sam ranije već objavio članak pod naslovom “Promjena verzije PHP-a za WordPress“.

U svakom slučaju bilo je odlično te se nadam da će sljedeće godine biti još i bolje.

I za kraj, pjesma koja je obilježila konferenciju – Kygo & Selena Gomez – It Ain’t Me (Codeko Remix)

Docker – instalacija i pokretanje na Windows OS-u

Kada više developera, na različitim OS-ovima, sa različitim verzijama npr. Angulara, radi na istim projektima mogu se događati vrlo čudne stvari.

Rečenica “To radi na mojem računalu”, iako vrlo često posluži kao izgovor, nije rješenje.

Docker omogućava da se na razvojnom okruženju kreira kopija produkcijskog okruženja u kojemu se neka aplikacija može testirati prije puštanja u pogon. Na taj način developer može biti siguran da neće biti iznenadnih problema zbog različitih verzija nekog dijela sustava.

Uvod

Docker je platforma koja developerima i sistemskim administratorima omogućava kreiranje, distribuiranje i pokretanje aplikacija na različitim razvojnim okruženjima.

Docker se temelji na virtualizaciji tj. u slučaju korištenja Windowsa 10 na Hyper-V koji treba biti omogućen. Ja ga prije instalacije neću omogućiti pa ćemo vidjeti što će Docker napraviti po tom pitanju i hoće li sam pokrenuti pozadinske procese koji mu trebaju.

Instalacija

Docker Community Edition for Windows preuzimam na adresi https://store.docker.com/editions/community/docker-ce-desktop-windows

Ostavljam zadane postavke i klikom na ‘Ok‘ kreiram prečac na radnoj površiti.

Docker će sada otpakirati sve ranije preuzete komponente.

Kada instalacija završi potrebno se odjaviti iz Windowsa kako bi se postupak dovršio.

Nakon ponovne prijave u Windows pojavit će se poruka “Docker is starting… This will only take a few seconds“.

S obzirom da sam ranije spomenuo kako nisam aktivirao Hyper-V čini se da će Docker to sada učiniti za mene nakon čega će se Windowsi restartati.

Kada se Windowsi ponovno pokrenu napokon mogu pokrenuti Docker po prvi put i omogućiti mu određena prava.

“Docker is now up and running!”

Uspješnost instalacije provjeravam naredbama:

$ docker --version
$ docker version
$ docker info

$ docker --version

$ docker version

$ docker info

$ docker version

$ docker –version

$ docker info

Pokretanje

Sada ću koristiti Docker Hub repozitorij s kojeg ću preuzeti dva paketa za potrebu testiranja. Ondje mogu objaviti i svoje pakete jednom kada ih kreiram.

Više o naredbama koje ću koristiti na adresi https://docs.docker.com/engine/reference/commandline/docker/

hello-world

Ako pokrenem naredbu $ docker run hello-world automatski će se preuzeti hello-world image sa Dockera Huba.

Prema sadržaju “Hello from Docker!” unutar gornjeg prozora mogu zaključiti da je preuzimanje i pokretanje bilo uspješno.

seqvence/static-site

Na adresi https://hub.docker.com/r/seqvence/static-site/ preuzimam novi image.

Naredbom $ docker pull seqvence/static-site preuzimam image na svoje računalo.

Ovaj put koristim naredbu $ docker run -d -P seqvence/static-site za pokretanje, a nakon toga koristim i naredbu $ docker ps da vidim na kojoj ću adresi tj. kojem portu pristupiti aplikaciji.

U ovom slučaju to je http://localhost:32769/.

Popis do sada preuzetnih paketa vidim pokretanjem naredbe $ docker image ls

Zaključak

Postavljanje Dockera zahvjeta neko vrijeme kako bi se sve postavilo kako treba, ali kasnije se definitivno isplati.

Angular (2,4,5) 6 je ‘sranje’ !?

Nije prošlo dugo kako sam objavio blog post o ažuriranju na Angular CLI 1.7.4, a sada smo već na verziji Angular 6.

Ako ništa drugo, napokon su objedinjeni Angular Framework, Angular Material i Angular CLI:

• @angular/angular 6.0.0
• @angular/cli 6.0.0
• @angular/material 6.0.0

Dosadašnje verzije išle su ovim redom:

• Angular 2, Angular 4, Angular 5, Angular 6
• Angular CLI 1, Angular CLI 6
• Angular Material 2, Angular Material 5, Angular Material 6

Što novoga donosi Angular 6?

The 6.0.0 release of Angular is here! This is a major release focused less on the underlying framework, and more on the toolchain and on making it easier to move quickly with Angular in the future. – Version 6 of Angular Now Available

– ng update

ng update <package> je nova CLI naredba koja analizira sadržaj package.json datoteke i predlaže potrebna ažuriranja. U pozadini koristi npm/yarn čime se proces dodatno automatizira. Sada je na autorima paketa da ih prilagode novom pristupu.

– ng add

ng add <package> je također nova CLI naredba koja mi se sviđa čak i više od prethodne, a omogućava jednostavno dodavanje novih mogućnosti unutar projekta.

• ng add @angular/pwa – pretvara ‘običnu’ Angular aplikaciju u PWA
• ng add @ng-bootstrap/schematics – dodaje podršku za ng-bootstrap
• ng add @angular/material – dodaje i postavlja Angular Material

– Angular Elements

Omogućava korištenje postojećih Angular komponenti izvan Angular projekta na način da ih registrira kao Custom Elements. Ovo je toliko dobra stvar da to nije za vjerovati.

Najjednostavnije rečeno, omogućava korištenje neke Angular komponente unutar nekog drugog Frameworka ili CMS-a.

– Angular Material Starter Components

Nakon pokretanja naredbe ng add @angular/material tj. dodavanja podrške za Angular Material otvara se mogućnosti korištenja 3 gotove starter komponente, čime se na brz i jednostavan način stvara lijep kostur nove Angular aplikacije.

– ng generate @angular/material:material-nav --name=my-nav – Material Sidenav
– ng generate @angular/material:material-dashboard --name=my-dashboard – Material Dashboard
– ng generate @angular/material:material-table --name=my-table – Material Data Table

– CLI Workspaces

CLI v6 omogućava istovremeni rad više projekata tj. aplikacija ili biblioteka. Svaka aplikacija može imati svoju strukturu koja se nalazi unutar angular.json datoteke.

{
  "projects": {
    "my-project-name": {
      "projectType": "application",
      "architect": {
        "build": {
          "configurations": {
            "production": {},
            "demo": {},
            "staging": {},
          }
        },
        "serve": {},
        "extract-i18n": {},
        "test": {},
      }
    },
    "my-project-name-e2e": {}
  },
}

{

"projects": {

"my-project-name": {

"projectType": "application",

"architect": {

"build": {

"configurations": {

"production": {},

"demo": {},

"staging": {},

}

"serve": {},

"extract-i18n": {},

"test": {},

}

"my-project-name-e2e": {}

}

– Tree Shakable Providers

Servisi se više ne moraju navoditi unutar app.module.ts datoteke čime se automatski smanjuje veličina aplikacije.

Prije se nakon kreiranja servisa

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

@Injectable()
export class MyService {
  constructor() { }
}

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

@Injectable()

export class MyService {

constructor() { }

}

on morao navoditi unutar app.module.ts datoteke

@NgModule({
  ...
  providers: [MyService]
})
export class AppModule {}

@NgModule({

...

providers: [MyService]

})

export class AppModule {}

dok je sada dovoljno unutar servisa navesti u kojem ga modulu želimo koristiti.

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

@Injectable({
  providedIn: 'root',
})
export class MyService {
  constructor() { }
}

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

@Injectable({

providedIn: 'root',

})

export class MyService {

constructor() { }

}

Od ostalog tu su još:

– izbacivanje web animations polyfilla koji više nije potreban
– RxJS v6
– Long Term Support (LTS)

Zbog svega navedenog jedna čekam započeti nove Angular projekte i nadam se da mi ovaj početni entuzijazam neće prisjesti.

Kako ažurirati projekt na Angular 6.0.0?

Detalje je moguće pronaći na adresi https://update.angular.io/.

Postupak se može podijeliti u tri faze:

– Ažurirati @angular/cli
– Ažurirati Angular Framework pakete unutar projekta
– Ažurirati ostale pakete unutar projekta

Angular je, bio, ‘sranje’?

Sjećam se vremena kada sam bio zaljubljen u Angular 1.x i „$scope“. To su bila vremena kada je Angular život developera činio donekle jednostavnijim.

The whole idea of a good framework is that you start with the simple stuff and you make it more complicated only when and where you want it to be more complicated. While Angular team went in a completely opposite way. – Why Angular 2 (4, 5, 6) sucks

Postojala je, kao i u svemu, određena krivulja učenja, ali jednom kada se savladala stvari su išle svojim tokom. HTML kompajler, TypeScript, Webpack, CLI, angular-cli.json -> angular.json,… nisu bile stvari kojima se developer trebao opterećivati. U konačnici su sve te stvari vrlo korisne, ali početniku u svijetu developmenta kao da daju dovoljno razloga da odustane od svega.

Osobno mi odgovara TypeScript, ali to ne znači da mora odgovarati svima. Netko je možda odabrao JavaScript upravo iz razloga zato što je jednostavan za početnike (dovoljno je imati web preglednik). Nakon nekog vremena taj početnik sazna za Angular i umjesto da mu se omogući korištenje Angulara sa do sada stečenim znanjima njemu se nameće nekakav TypeScript (Type,Interface,Decorator) za kojega niti ne zna čemu služi osim da mu, u tom trenutku, stvara otpor prema učenju.

Na stranu sada i ovo gore spomenuto, ali definitivno najgora stvar koju Angular radi upornim promjenama je zastarijevanje dokumentacije. U dvije godine imali smo nekoliko verzija, svaka sa svojim ‘cakama‘ pa se ti onda snađi ‘guglajući‘.

Zaključak

Ne mislim da je Angular 6 ‘sranje’ jer donosi puno poboljšanja kojima je cilj olakšati developerima život. Smatram da je to bio cilj i svake od prethodnih verzija samo je možda sve odrađeno na pomalo nespretan način čime se stvarao kaos.

I nadam se da će Angular sada napokon prestati s tim izmjenama da stvarno ne bi postao ‘sranje’ jer ‘sranje’ nije slatko.

Ovaj blog post je primarno bio zamišljen kao uvod u Angular 6 i sve ono, novo, što on donosi. I dok sam tako razmišljao o strukturi blog posta palo mi je na pamet da ću na kraju imati više blog postova o različitim verzijama koje svako malo dolaze što za posljedicu ima zastarijevanje prijašnjih blog postova bržim tempom nego što ih ponovno mogu napisati/objaviti. Usred tog razmišljanja i ‘guglanja‘ što o tome misle drugi developeri naletio sam na članak „Why Angular 2 (4, 5, 6) sucks“ čime je ovaj blog post dobio sasvim jednu drugu notu.

Ionic Insomnia – Nitko nije lud da spava

Iako je imperativ svake mobilne aplikacije brzina nekada je jednostavno potrebno čekati da se nešto unutar aplikacije dogodi.

Npr. ako je u tijeku nekakva sinkronizacija koja traje dulje od zadanog vremena mobilnog uređaja prije gašenja ekrana dogoditi će se da će se ekran ugasiti za vrijeme te sinkronizacije. U tom se slučaju može dogoditi, ako drugačije nije postavljeno, da se sinkronizacija prekine.

Kako bi se takav scenarij spriječio i kako se korisnik mobilne aplikacije ne bi zbunio zbog iznenadnog gašenja ekrana u pola neke radnje može se koristiti Insomnia plugin.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju i odmah dodajem Android platformu.

$ ionic start IonicInsomnia blank
$ cd IonicInsomnia
$ ionic cordova platform add android

$ ionic start IonicInsomnia blank

$ cd IonicInsomnia

$ ionic cordova platform add android

Insomnia

Ionic Native plugin koji ću u ovom slučaju instalirati zove se Insomnia.

Instaliram ga sljedećim naredbama:

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

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

I navodim ga unutar app.module.ts.

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 { Insomnia } from '@ionic-native/insomnia';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Insomnia,
    {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 { Insomnia } from '@ionic-native/insomnia';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

Insomnia,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Tek sada ga mogu koristiti unutar aplikacije.

Za potrebu ovog primjera funkcije ću pozivati klikom na gumb.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Insomnia
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 
  <button ion-button full color="secondary" (click)="keepAwake()">keepAwake</button>

  <button ion-button full color="dark" (click)="allowSleepAgain()">allowSleepAgain</button>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Insomnia

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<button ion-button full color="secondary" (click)="keepAwake()">keepAwake</button>

<button ion-button full color="dark" (click)="allowSleepAgain()">allowSleepAgain</button>

</ion-content>

Klikom na gumb keepAwake spriječavam mobilni uređaj da ode u sleep mode, a klikom na allowSleepAgain ponovno dopuštam zadano ponašanje. U ovom slučaju ekran uređaja ugasi se nakon 15 sekundi neaktivnosti.

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

import { Insomnia } from '@ionic-native/insomnia';

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

  constructor(public navCtrl: NavController,
              private _insomnia: Insomnia) {}
  
  keepAwake(){
    this._insomnia.keepAwake()
      .then(
        () => console.log('success'),
        () => console.log('error')
      );
  }

  allowSleepAgain(){
    this._insomnia.allowSleepAgain()
     .then(
        () => console.log('success'),
        () => console.log('error')
      );
  }

}

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

import { NavController } from 'ionic-angular';

import { Insomnia } from '@ionic-native/insomnia';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public navCtrl: NavController,

private _insomnia: Insomnia) {}

keepAwake(){

this._insomnia.keepAwake()

.then(

() => console.log('success'),

() => console.log('error')

);

}

allowSleepAgain(){

this._insomnia.allowSleepAgain()

.then(

() => console.log('success'),

() => console.log('error')

);

}

Zaključak

Insomnia je odličan plugin koji svoju svrhu u potpunosti ispunjava. Različiti su scenariji u kojima može biti korišten. U ovom blog postu prikazan je samo jedan od njih.

Za kraj, struktura projekta prema package.json

{
  "name": "IonicInsomnia",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "5.2.10",
    "@angular/common": "5.2.10",
    "@angular/compiler": "5.2.10",
    "@angular/compiler-cli": "5.2.10",
    "@angular/core": "5.2.10",
    "@angular/forms": "5.2.10",
    "@angular/http": "5.2.10",
    "@angular/platform-browser": "5.2.10",
    "@angular/platform-browser-dynamic": "5.2.10",
    "@ionic-native/core": "4.7.0",
    "@ionic-native/insomnia": "^4.7.0",
    "@ionic-native/splash-screen": "4.7.0",
    "@ionic-native/status-bar": "4.7.0",
    "@ionic/storage": "2.1.3",
    "cordova-android": "7.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-insomnia": "^4.3.0",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.1.19",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.10",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.9",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-insomnia": {}
    },
    "platforms": [
      "android"
    ]
  }
}

{

"name": "IonicInsomnia",

"version": "0.0.1",

"author": "Tomislav Stanković",

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

"private": true,

"scripts": {

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

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

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

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

"ionic:serve": "ionic-app-scripts serve"

"dependencies": {

"@angular/animations": "5.2.10",

"@angular/common": "5.2.10",

"@angular/compiler": "5.2.10",

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

"@angular/core": "5.2.10",

"@angular/forms": "5.2.10",

"@angular/http": "5.2.10",

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

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

"@ionic-native/core": "4.7.0",

"@ionic-native/insomnia": "^4.7.0",

"@ionic-native/splash-screen": "4.7.0",

"@ionic-native/status-bar": "4.7.0",

"@ionic/storage": "2.1.3",

"cordova-android": "7.0.0",

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

"cordova-plugin-insomnia": "^4.3.0",

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

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

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

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

"ionic-angular": "3.9.2",

"ionicons": "3.0.0",

"rxjs": "5.5.10",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.26"

"devDependencies": {

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

"typescript": "~2.6.2"

"description": "An Ionic project",

"cordova": {

"plugins": {

"cordova-plugin-whitelist": {},

"cordova-plugin-device": {},

"cordova-plugin-splashscreen": {},

"cordova-plugin-ionic-webview": {},

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

"cordova-plugin-insomnia": {}

"platforms": [

"android"

]

}

Uvod u Google Sheets API

Nedavno mi je pala na pamet ideja korištenja Google Sheetsa kao baze podataka za nekakvu jednostavniju web ili mobilnu aplikaciju pa sam išao malo istražiti koje sve mogućnosti Google Sheets API ima i kako ih koristiti. U nastavku se može vidjeti nekoliko primjera na osnovu jednog dokumenta s dvije kartice podataka.

Google Developer konzola

Na URL-u https://console.developers.google.com/ kreiram novi projekt.

Nakon toga klikom na ‘Enable Apis And Services‘ krećem u odabir Google Sheets API-ja kako bi ga aktivirao.

Nakon aktivacije kreiram API key koji mi je potreban za slanje upita na API.

Bez njega bi dobio poruku o grešci:

{
  "error": {
    "code": 403,
    "message": "The request is missing a valid API key.",
    "status": "PERMISSION_DENIED"
  }
}

{

"error": {

"code": 403,

"message": "The request is missing a valid API key.",

"status": "PERMISSION_DENIED"

}

Korištenje API-ja

Na sljedećoj se slici može vidjeti koji su mi upiti dostupni

Prikaz podataka

Na sljedećoj adresi https://docs.google.com/spreadsheets/d/1NVbthCyv4BuFbU3rv3ZBe0Pw6_4hHCgIdJfkKtvmD-M/ nalazi se moja proračunska tablica. Njezin ID je 1NVbthCyv4BuFbU3rv3ZBe0Pw6_4hHCgIdJfkKtvmD-M.

Ako, prema dokumentaciji na slici iznad, odem na Services > Google Sheets API v4 > sheets.spreadsheets.get i unesem ID svoje proračunske tablice dobit ću rezultat s hrpom, meni trenutno nepotrebnih, meta podatka.

S obzirom da se moja proračunska tablica sastoji od dva lista posebno ću pozvati API za svaki list.

Na URL-u https://sheets.googleapis.com/v4/spreadsheets/1NVbthCyv4BuFbU3rv3ZBe0Pw6_4hHCgIdJfkKtvmD-M/values/Zadaci?key={YOUR_API_KEY} dohvaćam podatke iz lista ‘Zadaci’.

Dok na URL-u https://sheets.googleapis.com/v4/spreadsheets/1NVbthCyv4BuFbU3rv3ZBe0Pw6_4hHCgIdJfkKtvmD-M/values/Podaci?key={YOUR_API_KEY} dohvaćam podatke iz lista ‘Podaci’.

Dodavanje podataka

Na sljedećoj adresi https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets.values/append nalazi se dokumentacija vezana uz dodavanje sadržaja.

Ovo još moram testirati u Postmanu.

Zaključak

Ovo je samo uvod u mogućnosti Google Sheets API-a. Za sada je ovo dovoljno čisto da se vidi kako stvar funkcionira, a dalje sve ovisi o specifičnim potrebama. Možda na kraju zaključim da ovo i nije najsretnije rješenje za korištenje unutar web ili mobilne aplikacije.