U ovom ćemo blog postu napraviti primjer Ionic 2 aplikacije koja prikazuje podatke izravno s Google Diska pomoću Google Drive REST API-ja.
Najveći fokus biti će na postavljanju Google Drive API-ja kako bi dobili URL, na koji ćemo slati GET zahtjev, koji se onda može koristiti u svim vrstama mobilnih i web aplikacija. Ovdje je sada slučajno ispalo da će se prikaz vršiti u Ionic 2 aplikaciji, ali isto tako mogli smo napraviti običnu Angular 2 web aplikaciju ili nešto treće.
Jedna od najvećih prednosti korištenja Google Drive API-ja je što ne morate raditi svoj API jer to ipak zahtjeva nešto više vremena i znanja kako bi se sve postavilo i bilo spremno za korištenje. U ovom slučaju Google se brine za sve, a na vama je samo da smislite način kako najbolje iskoristiti to što vam Google nudi unutar svoje web ili mobilne aplikacije.
Google API Manager
Na adresi https://console.developers.google.com/ ćemo kreirati aplikaciju za koju trebamo API key.
Nakon što smo to napravili trebamo odobriti (Enable) Google Drive API.
Sada moramo kreirati pristupne podatke (Credentials) kako bi Google znao da imamo pravo pristupiti podacima unutar Google Drivea.
U ovom slučaju mi ćemo koristiti API key. Više o ostalim vrstama autentifikacije možete saznati ovdje.
API key uspješno kreiran.
Nakon što je API key kreiran imamo mogućnost pozabaviti se njegovom sigurnošću. U ovom primjeru opciju sigurnosti ćemo ostaviti kao None jer će ovaj blog post dobiti značajno na dužini i kompleksnosti ako krenem sve opcije detaljno objašnjavati. Također, nakon objave ovog blog posta API koji smo kreirali ću ugasiti tako da neće biti sigurnosnih problema. Vi nipošto nemojte svoj Google Drive API ostaviti tako nezaštićen.
Google Drive API URL
Kako bi mogli prikazati podatke iz Google Drivea osim API keya trebamo i ID mape iz koje želimo vući podatke. Više o tome na API Reference.
|
1 |
https://www.googleapis.com/drive/v2/files?q='{folder ID}'+in+parents&key={API key} |
Na Google Driveu sada imamo mapu ZaIonic2Aplikaciju unutar koje se nalaze još dvije mape, nekoliko fotografija i jedan Word dokument.
Iz URL-a https://drive.google.com/drive/folders/0BzVqFZUj1VDhYnk4dkZ1NGVRWUE ćemo izvući ID mape 0BzVqFZUj1VDhYnk4dkZ1NGVRWUE .
Sada još samo trebamo postaviti u opcijama naše mape da je vidljiva javno.
I konačno, naš API URL izgleda ovako https://www.googleapis.com/drive/v2/files?q='0BzVqFZUj1VDhYnk4dkZ1NGVRWUE'+in+parents&key=AIzaSyC6Ifro0MzucXPKM-LpKNB2M-dP6U1yPYU.
API sada možemo testirati koristeći Postman. Rezultat je array sa objektima.
Ionic 2 aplikacija
Ovako to izgleda kada se API koristi unutar Ionic 2 aplikacije. Kako to postići možete saznati u jednom od prethodnih blog postova pod nazivom “Ionic 2 – prikaz JSON-a sa API-ja“.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<ion-header> <ion-navbar> <ion-title> Google Drive API Data </ion-title> </ion-navbar> </ion-header> <ion-content padding> <button ion-button color="light" (click)="getData()">GET Data</button> <ion-card *ngFor="let u of data"> <ion-item> <ion-avatar item-left> <img src="{{u.owners[0].picture.url}}"> </ion-avatar> <h2>Naziv: {{u.title}}</h2> <p>Autor: {{u.owners[0].displayName}}</p> <p>Datum: {{u.createdDate}}</p> </ion-item> <img src="{{u.thumbnailLink}}"> </ion-card> </ion-content> |
Pomoću parametra mimeType možemo si filtrirati npr. samo mape, fotografije i dr.
Zaključak
Kada radite aplikaciju u kojoj želite prikazati neke podatke jedna od mogućnosti je korištenje Google Drive API-ja. U ovom ste blog postu mogli vidjeti koliko je jednostavno postaviti funkcionalan API o kojemu kasnije ne morate previše brinuti za razliku od opcije da radite svoj NodeJS & ExpressJS API.
wheres the backend sir ?
Backed is at Google’s side. API Reference https://developers.google.com/drive/v2/reference/
For this to work you need only URL, with API key, to your Google Drive folder.
Hi, How can we upload data to google drive using Ionic2?
More about it at https://developers.google.com/drive/v2/reference/files/insert and https://developers.google.com/drive/v2/web/manage-uploads
Maybe I will later publish blog post about this.
Can i have the full code of this project ? Im getting stuck on my project.. i can’t load the document files in my Ionic app
Unfortunately, I dont have full code of this project anymore but you can try it now and let my know if it worked. I’ve changed rights for folder on Google Drive from ‘Specific people’ to ‘Anyone with the link’.