3.2 Podatkovna baza
3.3.3 Komunikacija in obveˇsˇ canje
Nov uporabnik je uspeˇsno ustvarjen.
3.3.3 Komunikacija in obveˇ sˇ canje
Ena izmed glavnih lastnosti naˇse aplikacije je obveˇsˇcanje in komunikacija med ˇclani. Za hitro komunikacijo poskrbi realnoˇcasovni klepet. Obveˇsˇcanje deluje znotraj spletne aplikacije, v sklopu obvestil v realnem ˇcasu ter z uporabo elektronske poˇste.
Pogovor in obveˇsˇcanje v realnem ˇcasu
Ko se v spletnih aplikacijah omenja realen ˇcas, je v ozadju komunikacijski protokol WebSocket 2.7. Za naˇso implementacijo sem se odloˇcil za ponu-dnika Pusher, ki ponuja WebSocket streˇznike kot storitev. Naˇs vmesnik bo vzpostavil povezavo z njihovimi WebSocket streˇzniki, preko katerih bo preje-mal podatke. Podatke bo najprej naˇsa Laravel aplikacija poslala na Pusher streˇznik, od koder bodo preko WebSocket povezave poslani na naˇs spletni uporabniˇski vmesnik.
Laravel aplikacijo je treba najprej konfigurirati, da ve, kako in kam poˇsiljati podatke. Z uporabo composer paketa, specifiˇcno narejenega za Pusher sto-ritev, bo naˇsa aplikacija znala poˇsiljati podatke na njihov streˇznik. Ko se prijavimo na Pusher storitve preko njihovega spletnega vmesnika, nam zge-nerirajo nekaj kljuˇcev, s katerimi se bo Laravel aplikacija avtenticirala pri
poˇsiljanju podatkov. Po namestitvi in konfiguraciji, je aplikacija pripravljena za uporabo WebSocket storitev.
Ogrodje Laravel ima v datoteki channels.php definirane oddajne kanale (programska koda 3.21). Pri definiranju kanalov doloˇcimo predlogo za ime ter avtorizacijsko metodo. Avtorizacija se bo izvedla, ko bo uporabniˇski vmesnik poslal zahtevo po posluˇsanju kanala. Pri oddajanju na kanalih pa doloˇcimo, kateri podatki se bodo oddajali ter ali je kanal javen (angl. public) ali zaseben (angl. private). Na te kanale se bo naroˇcil naˇs spletni vmesnik, preko katerih bo prejemal podatke v realnem ˇcasu. V naˇsem primeru bo vsak prijavljen uporabnik imel svoj zasebni kanal. Ime kanala bo user.<uporabnikov id>
(npr. user.10 za uporabnika z id-jem 10).
Programska koda 3.21: Definiran kanal za uporabnike
// channels.php
Broadcast::channel(’user.{userId}’, function ($user, $userId) { return (int) $user->id === (int) $userId;
});
Uporabniki bodo lahko v skupinah komunicirali v skupinskih pogovorih. Ko je uporabnik avtenticiran, vmesnik naredi GET zahtevo na /api/message-s/group/{id}, s katero pridobi vsa dosedanja skupinska sporoˇcila za doloˇceno skupino. Za poˇsiljanje sporoˇcila pa se uporabi POST zahteva na /api/messa-ges/group, s katero se poˇslje vsebina sporoˇcila in id skupine, v katero ˇzelimo poslati sporoˇcilo. Za obe zahtevi se tudi preveri, ˇce je uporabnik vˇclanjen v skupino, za katero zahteva ali poˇsilja sporoˇcila. Programska koda 3.22 prikazuje poti za sporoˇcila, 3.23 pa kodo za ustvarjanje sporoˇcila.
Diplomska naloga 35 Programska koda 3.22: Poti za sporoˇcila
// api.php
Route::group([’prefix’ => ’messages’], function() { Route::get(
Programska koda 3.23: Ustvarjanje sporoˇcila
// GroupMessageController.php
public function store(GroupMessageRequest $request) {
$message = $request->validated();
$groupMessage = GroupMessage::create([
Ko se sporoˇcilo ustvari, se pokliˇce globalna metoda broadcast, v katero kot parameter podamo instanco razreda NewMessage, ki definira naˇcin oddajanja sporoˇcila. Kot parameter mu podamo ustvarjeno sporoˇcilo.
V razreduNewMessage, prikazanem v programski kodi 3.24, definiramo metodo broadcastOn, ki vrne imena kanalov, na katerih se bo na novo ustvarjeno sporoˇcilo oddajalo. Ker vsak uporabnik posluˇsa svoj kanal, bomo oddajali na vseh kanalih uporabnikov, ki so ˇclani skupine, v kateri je bilo sporoˇcilo ustvarjeno.
Programska koda 3.24: Doloˇcanje, na katerih kanalih oddajamo
// NewMessage.php public $message;
public function __construct($message) {
$this->message = $message;
}
public function broadcastOn() {
$groupId = $this->message->group_id;
$userId = $this->message->user_id;
$userIds = Membership::select(’user_id’) ->where(’group_id’, $groupId) ->where(’user_id’, ’<>’, $userId) ->get()
->pluck(’user_id’);
return $userIds->map(function($id){
return new PrivateChannel(’user.’ . (int) $id);
})->toArray();
}
V razredu doloˇcimo spremenljivke, ki jih bo Laravel poslal storitvi Pusher in bodo preko WebSocket povezave poslani uporabniku na spletni vmesnik.
Pri poˇsiljanju bodo upoˇstevane samo javne spremenljivke. V tem primeru bomo oddajali sporoˇcilo, zato je spremenljivka $message javna. Vrednost ji doloˇcimo v konstruktorju razreda, ko naredimo novo instanco. To se zgodi, ko pokliˇcemobroadcast metodo vGroupMessageController (programska koda 3.23) z novo instanco razreda NewMessage. S poizvedbo na podatkovno bazo, iz tabele ’memberships’ dobimo vse id-je uporabnikov, ki so v skupini, v katero je bilo poslano sporoˇcilo. Polje id-jev shranimo v spremenljivko
$userIds. Nazadnje, polje id-jev preslikamo v polje instanc zasebnih kanalov, ki jim kot parameter podamo imena kanalov. Ime kanala dobimo tako, da zdruˇzimo niz ’user.’ z id-jem uporabnika (npr. user.12, user.2, itd.). To so imena kanalov, na katerih se bo oddajalo novo sporoˇcilo. Vsako oddajanje lahko tudi poimenujemo (programska koda 3.25). To nam omogoˇca, da na
Diplomska naloga 37 vmesniku filtriramo prejete podatke.
Programska koda 3.25: Imenovanje oddajanja novih sporoˇcil
// NewMessage.php
public function broadcastAs() { return ’message.created’;
}
Na isti naˇcin tudi obveˇsˇcamo ˇclane o novi objavi, novem dogodku ipd. Kako uporabniˇski vmesnik te podatke prejme in prikaˇze, bomo spoznali v poglavju Uporabniˇski vmesnik (podpoglavje 3.4.3).
Poˇsiljanje e-sporoˇcil
Za obveˇsˇcanje uporabnikov, ki trenutno niso prijavljeni v spletno aplika-cijo, bomo uporabili e-sporoˇcila. Laravel ponuja tudi reˇsitev za poˇsiljanje e-sporoˇcil. Za ponudnika e-sporoˇcil bomo za zaˇcetek uporabili storitev Gmail, ki je brezplaˇcna. Ustvaril sem nov Gmail raˇcun ter v konfiguracijski datoteki Laravela izpolnil konfiguracijska polja za e-sporoˇcila, kar prikazuje program-ska koda 3.26.
Programska koda 3.26: Primer konfiguracije za poˇsiljanje e-sporoˇcil preko storitve Gmail
Ko imamo vsa konfiguracijska polja izpolnjena, lahko zaˇcnemo s poˇsiljanjem e-sporoˇcil. Kot primer lahko vzamemo poˇsiljanje e-sporoˇcila povabljenemu uporabniku (programska koda 3.11, 3.27). Ko se ˇzeton za povabilo ustvari,
se uporabi Laravel-ov razred Mail za poˇsiljanje e-sporoˇcil.
Programska koda 3.27: Primer poˇsiljanja e-sporoˇcila za povabilo uporabnika
Mail::to($invitation->email)->send(
new InvitationMail($invitation, Auth::user()) );
Kot parameter v statiˇcno metodo to podamo elektronski naslov, na kate-rega ˇzelimo poslati naˇse obvestilo ter doloˇcimo, kateri razred, ki predstavlja e-sporoˇcilo, se uporabi pri poˇsiljanju. Razred InvitationMail je namenjen specifiˇcno za poˇsiljanje e-sporoˇcil za povabila novih uporabnikov. Kot pa-rameter sprejme model povabila ter model prijavljenega uporabnika, ki je ustvaril povabilo. Naloga razreda je, da po potrebi podatke obdela ter jih preda pogledu (angl. view), kjer doloˇcimo izgled naˇsega e-sporoˇcila, kar je prikazano v programski kodi 3.28. Za to uporabimo strukturni jezik HTML.
Primer takega razreda prikazuje programska koda 3.29
Programska koda 3.28: Doloˇcitev predloge za izgled e-sporoˇcila
public function build() {
return $this->view(’emails.InvitationMail’);
}
InvitationMail razred razˇsiri Laravel-ov razred Mailable in prepiˇse nje-govo metodo build. V metodi doloˇcimo, kateri pogled se bo uporabil za e-sporoˇcilo. ’emails.InvitationMail’ pove, da ta pogled spada v kategorijo
’emails’ in se imenuje ’InvitationMail’. Laravel ve, da mora ta pogled poi-skati v mapi views/emails.
Diplomska naloga 39 Programska koda 3.29: Predloga za izgled e-sporoˇcila
<!-- InvitationMail.blade.php -->
<p> Uporabnik {{ $user->name }} te je povabil v ScoutBook, spletni aplikaciji namenjeni samo za skavte. </p>
<p>Klikni
Uporabniˇski vmesnik je vmesnik med uporabnikom in naˇso celotno arhitek-turo. Z uporabo vmesnika uporabniku predstavimo, poenostavimo in po-enotimo vse funkcionalnosti, ki jih omogoˇca naˇs zaledni sistem. Izgled in uporabnikova izkuˇsnja vmesnika sta zelo pomembna, saj prispevata k zado-voljstvu uporabnikov in s tem uspeˇsnosti aplikacije. Spletni vmesniki v osnovi temeljijo na treh tehnologijah - HTML (podpoglavje 2.1), CSS (podpoglavje 2.2) in JavaScript (podpoglavje 2.3). Z uporabo HTML-ja naredimo struk-turo strani, s CSS-om grafiˇcno podobo in z JavaScript-om dodamo strani dodatno funkcionalnost. Loˇcimo dve vrsti spletnih strani - statiˇcne in di-namiˇcne. Te dve vrsti nista strogo loˇceni, obstajajo tudi hibridne variante.
Statiˇcne so tiste, za katere nam streˇznik vrne HTML datoteko z vso vsebino, kar pomeni, da hrani HTML datoteko za vsako njihovo stran. Pri dinamiˇcnih