Ionic i Gravatar - prikaz slike profila

Ionic i Gravatar – prikaz slike profila

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

S obzirom da Gravatar prikazuje sliku profila putem posebnog URL-a koji sadržava e-mail adresu u obliku

tj.

moram još instalirati crypto-md5 paket koji će mi omogućiti pretvaranje stringa u MD5 hash.

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.

Prikaz na ekranu sastoji se od polja za unos e-mail adrese i prikaza slike profila iznad njega.

Sve to na kraju izgleda ovako

Ionic i Gravatar – prikaz slike profila

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.

Objavio

Tomislav Stanković

Web developer. Uz to bavi se i temama vezanim uz online reputaciju. Google+

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *