Nedavno sam objavio blog post o korištenju Facebooka kao mehanizma za prijavu u Ionic aplikaciju i ondje mi se posebno svidjelo što dobijem određene podatke o korisniku koje mogu koristiti kako bi personalizirao korištenje mobilne aplikacije. Npr. na osnovu dobivenih podatka mogu kreirati profil korisnika unutar mobilne aplikacije, prikazati profilnu sliku i osloviti ga imenom.
Međutim, ako se korisnik odluči registrirati/prijaviti u mobilnu aplikaciju koristeći svoju e-mail adresu tada nemam mehanizam da npr. prikažem njegovu sliku profila. Mogu omogućiti korisniku da tijekom registracije sam odabere i postavi svoju profilnu sliku, ali ako želim maksimalno olakšati i ubrzati korištenja aplikacije najbolje je proces što je moguće više automatizirati.
Tu nastupa Gravatar koji na osnovu e-mail adrese automatski povlači sliku profila korisnika. Korisnik mora biti registriran na https://www.gravatar.com/ te ondje postaviti svoju e-mail adresu i sliku profila koju želi vezati uz nju.
Kreiranje aplikacije
Za početak kreiram novu Ionic aplikaciju
|
1 2 3 |
$ ionic start IonicGravatar blank $ cd IonicGravatar $ ionic serve |
S obzirom da Gravatar prikazuje sliku profila putem posebnog URL-a koji sadržava e-mail adresu u obliku
|
1 |
https://www.gravatar.com/avatar/ + (e-mail MD5 hash) |
tj.
|
1 |
https://www.gravatar.com/avatar/5dfd90bbddd22a81c410800ed0e97cdc |
moram još instalirati crypto-md5 paket koji će mi omogućiti pretvaranje stringa u MD5 hash.
|
1 |
$ npm install crypto-md5 --save |
Nakon instalacije dodajem import md5 from 'crypto-md5'; u komponentu u kojoj tu mogućnost želim koristiti.
U ovom ću slučaju cijelu funkcionalnost ugraditi unutar home.ts
Iznad konstruktora definiram varijablu profilePicture koja će služiti za prikaz zadane slike profila. Nakon toga imam funkciju emailChanged() koja će toj varijabli dodati unesenu e-mail adresu i tako prikazati pripadajuću sliku profila.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import md5 from 'crypto-md5'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { email: any; profilePicture: any = "https://www.gravatar.com/avatar/" constructor(public navCtrl: NavController) { } emailChanged(){ console.log(md5(this.email.toLowerCase(), 'hex')); this.profilePicture = "https://www.gravatar.com/avatar/" + md5(this.email.toLowerCase(), 'hex'); } } |
Prikaz na ekranu sastoji se od polja za unos e-mail adrese i prikaza slike profila iznad njega.
|
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-content padding> <ion-card> <ion-item> <ion-avatar> <img [src]="profilePicture"> </ion-avatar> </ion-item> <ion-card-content> <ion-list no-lines> <ion-item> <ion-label floating>e-mail</ion-label> <ion-input [(ngModel)]="email" (change)="emailChanged()" type="email"></ion-input> </ion-item> </ion-list> </ion-card-content> </ion-card> </ion-content> |
—
|
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 27 28 29 30 31 |
page-home { .scroll-content { background-color: #3F9FCF; align-items: center; display: flex; flex-direction: column; justify-content: center; } ion-avatar > img { margin: auto; width: 80px; height: auto; } ion-input { background-color: map-get($colors, light); padding-left: 10px; color: #3F9FCF; } ion-label { color: #3F9FCF; } [floating] { margin-left: 10px; } } |
Sve to na kraju izgleda ovako
Zaključak
Iako ovakav način korištenja Gravatara nije vezan isključivo uz Ionic mora se priznati da je pristup vrlo zanimljiv jer je uz vrlo malo truda moguće poboljšati korisničko iskustvo Ionic aplikacije.
Za one koji žele znati više mogu to učiniti na poveznici https://www.joshmorony.com/automatic-profile-pictures-with-gravatar-in-ionic-2/ gdje je Joshua Morony prvi obradio korištenje Gravatara unutar Ionic aplikacije.
