Sa construim |> o clona Slack cu Elixir, Phoenix si React (partea 4 – Crearea camerelor de chat)

Demo live – GitHub Repo

Partea 1 – Partea 2 – Partea 3 – Partea 4 – Partea 5 – Partea 6 – Partea 7

Pana acum, am creat o aplicatie simpla care permite utilizatorilor sa se conecteze si sa acceseze o pagina de pornire protejata. In aceasta sectiune, vom adauga formulare la acea pagina de pornire care ii permit utilizatorului sa creeze sau sa se alature unei camere. Apoi, vom crea cateva vizualizari de baza similare cu Slack, cu o bara laterala care listeaza toate camerele alaturate utilizatorului si o vizualizare a camerei de chat.

Trebuie sa incepem prin crearea unui nou model de camera pe care sa-l putem salva in baza noastra de date. Vom dori sa avem un nume si un camp de subiect in fiecare camera, astfel incat sa putem incepe prin rularea unui generator

mix phoenix.gen.

Array

json Numele camerelor camerei: sir subiect: sir

Apoi actualizati fisierul de migrare generat astfel

sling / api / priv / repo / migrations / timestamp_create_room.exs

In aplicatia noastra, dorim ca utilizatorii sa poata salva o lista de camere. Pentru a face acest lucru, va trebui sa cream un tabel de asociere, numit user_rooms. Inainte de a merge mai departe, sa cream acel model cu un generator Phoenix

mix phoenix.gen.

Array

model UserRoom user_rooms user_id: referinte: utilizatori room_id: referinte: camere

sling / api / priv / repo / migrations / timestamp_create_user_room.exs

Ultimul index, index (: user_rooms, [: user_id,: room_id], unique: true) ne va permite sa cream un unic_constraint cu scopul utilizatorului si camerei, ceea ce inseamna ca un utilizator nu va putea sa se alature aceleiasi camere de doua ori. Iata implementarea modelului UserRoom.

sling / api / web / models / user_room.ex

Si iata noul nostru model de camera

sling / api / web / models / room.

Array

ex

Observati in modelul Camera, am definit o relatie many_to_many cu utilizatorii prin tabelul user_room. Trebuie sa adaugam o linie similara cu modelul de utilizator – many_to_many: rooms, Sling.Room, join_through: „user_rooms” .

Rulati migrarile acum daca nu ati facut-o (comentati room_controller-ul daca va da erori)

se amesteca ecto.migreaza

Acum putem incepe implementarea actiunilor controlerului.

• porno solo www.little-wonders.com
• porno mature amateur www.kaust.net
• acteur porno francais psfmt.com
• porno kino bluefirst.com
• porno police www.noradtrackssanta.com
• porno perfect technologyanddowntowns.net
• aya nakamura porno www.aaavista.com
• astrid nelsia porno nejasmic.com
• film porno 1980 www.savenike.com
• porno 1000 www.rondiamond.com
• porno jeune www.sentryselectincometrusts.biz
• porno fou broadwaylimited.biz
• porno ghana publicdomainphotos.com
• wakfu porno firstdateideas.com
• acteur porno gay nativeamericanhealth.com
• danse porno askthebuyer.com
• naturiste porno g15mods.com
• cosplay porno gameexpression.net
• video porno teen m.shopintoledo.com
• porno 974 newalliancebank.com
• porno gay mature resourcebrokerageltc.com
• acteur porno yanxinfoundation.biz

Sa facem mai intai rutele in router.ex. Voi adauga aceste rute in partea de jos a domeniului / api.

sling / api / web / router.ex

Puteti muta camera_controller.ex generata in folderul / api de langa celelalte controlere.

sling / api / web / controllers / api / room_controller.ex

Este pentru prima data cand folosim un plug Guardian intr-un controler. Plug-ul EnsureAuthenticated se va asigura ca avem un utilizator valid deoarece am implementat plug-ul VerifyHeader in router. Daca nu reuseste, va raspunde cu functia neautentificata din SessionController.

In actiunea de creare, veti vedea, de asemenea, ca accesam current_user cu Guardian. Cand se creeaza o camera, dorim ca utilizatorul sa se alature camerei pe care tocmai a creat-o, asa ca deocamdata am acel lucru care se intampla cu assoc_changeset dupa crearea camerei. Se simte murdar sa pun asta acolo … in Rails s-ar putea sa fi pus asta intr-un ActiveRecord :: Base.transaction, dar deocamdata o va face si o voi lasa ca o oportunitate de refactorizare.

Actiunea de asociere creeaza un UserRoom, bazat pe current_user.id si room_id transmis in parametri. Ma gandeam sa pun acest lucru intr-un controler UserRoom pentru a se ocupa de intrarea / iesirea din camere, dar acest lucru va functiona deocamdata.

Sa adaugam o actiune la controlerul utilizatorului pentru a obtine o lista a camerelor lor. Vom adauga si plug-ul Guardian acolo, doar pentru actiunea camere .

sling / api / web / controllers / api / user_controller.ex

Iata o recapitulare git a activitatii backend pentru punctele finale ale API-ului de camera

Cu actualizarile backend-ului nostru, ar trebui sa putem crea camere din frontend. Inainte de a crea formularele pentru a face acest lucru, sa configuram cateva actiuni care vor incarca camerele utilizatorilor curenti atunci cand se conecteaza si sa cream o bara laterala similara cu Slack care sa arate o pictograma pentru fiecare camera.

Vom dori sa preluam aceste camere dupa ce un utilizator se autentifica, asa ca hai sa trimitem aceasta functie in functia setCurrentUser a fluxului nostru de autentificare.

sling / web / src / actions / session.js

Si creati un fisier de actiune rooms.js nou

sling / web / src / actions / rooms.js

Acest fisier contine toate actiunile de care avem nevoie pentru a prelua toate camerele, a prelua camerele utilizatorului curent, a crea o camera si a va alatura unei camere. Acum trebuie sa cream reductorul pentru a actualiza magazinul redux.

sling / web / src / reducers / rooms.js

Nu uitati sa adaugati noul reductor de camera la reductorul nostru de radacina

sling / web / src / reducers / index.js

Vom dori ca bara laterala sa fie prezenta pe pagina noastra de pornire si pe pagina noastra de camera, asa ca hai sa adaugam aceasta noua componenta in containerul aplicatiei De asemenea, vreau sa mut butonul de deconectare in bara laterala, asa ca vom muta functia handleLogout in aplicatie. Si odata cu configurarea noastra actuala de react-router, trebuie sa trecem in contextul routerului , astfel incat sa putem trimite redirectionari.

Am adaugat, de asemenea, un container Room, care va fi vizualizarea camerei noastre de chat, dar deocamdata sa aratam doar ID-ul transmis in adresa URL

In continuare cu componenta Sidebar

sling / web / src / components / Sidebar / index.js

Acum avem bara laterala pe care utilizatorii conectati o vor vedea si pot atinge butonul de jos pentru a se deconecta. Dar lista dvs. de camere va fi probabil goala, asa ca haideti sa adaugam un formular pentru a crea unele si o lista a tuturor camerelor de pe pagina principala.

Mai intai voi face check-in cu un commit git al barei laterale functionale

Iata noua noastra pagina principala:

sling / web / src / containers / Home / index.js

Aceasta noua componenta Home reda fiecare camera ca un RoomListItem, haideti sa cream acea componenta intr-un fisier separat.

RoomListItems primeste o lista de id-uri pentru fiecare dintre camerele utilizatorului curent si astfel putem dezactiva butonul de asociere daca s-au alaturat deja.

Urmatorul este NewRoomForm:

Acest formular este destul de similar cu celelalte pe care le-am creat, cum ar fi formularul de autentificare, si trebuie doar sa fie trimis un nume .

Continuati si trimiteti formularul si vedeti noua camera creata ca o pictograma in bara laterala din stanga!

Iata ultima comisie git cu toata munca din partea 4

Acum avem posibilitatea de a crea noi camere de chat si de a vedea o lista a camerelor noastre in bara laterala. Dar nu avem niciuna dintre caracteristicile interesante in timp real care il fac pe Phoenix sa se distreze. In partea 5, vom schimba acest lucru conectandu-ne la prize si canale pentru a pune in functiune camera de chat.

Cititi partea 5 sau vizualizati demo-ul live