A végső köztes Ruby on Rails bemutatója: Hozzunk létre egy teljes alkalmazást!

Rengeteg oktatóprogram található az interneten, amelyek megmutatják, hogyan lehet létrehozni az első alkalmazást. Ez az oktatóprogram egy lépéssel tovább megy, és soronként elmagyarázza, hogyan lehet összetettebb Ruby On Rails alkalmazást létrehozni.

Az oktatóanyag egészében fokozatosan bemutatom az új technikákat és koncepciókat. Az ötlet az, hogy minden új szakaszban tanuljon valami újat.

A következő témákat tárgyaljuk ebben az útmutatóban:

  • A Ruby On Rails alapjai
  • Refaktorálás: segítők, partíciók, aggodalmak, tervezési minták
  • Tesztelés: TDD / BDD (RSpec & Capybara), gyárak (Factory Girl)
  • Akciókábel
  • Aktív munka
  • CSS, Bootstrap, JavaScript, jQuery

Szóval mi lesz az alkalmazás?

Ez egy olyan platform lesz, ahol kereshet és találkozhat hasonló gondolkodású emberekkel.

Az alkalmazás fő funkciói:

  • Hitelesítés (Devise-lel)
  • Képesség hozzászólások közzétételére, valamint keresésre és kategorizálásra
  • Azonnali üzenetküldés (felbukkanó ablakok és külön üzenetküldő), magán- és csoportos beszélgetések létrehozásának lehetőségével.
  • Képesség felvenni a felhasználókat a névjegyekbe
  • Valós idejű értesítések

Láthatja, hogyan fog kinézni a teljes alkalmazás.

És megtalálhatja a teljes projekt forráskódját a GitHub-on.

Tartalomjegyzék

  1. Bevezetés és telepítés
    Előfeltételek
    Beállít
    Hozzon létre egy új alkalmazást
  2. Elrendezés
    Főoldal
    bootstrap
    Navigációs sáv
    Stíluslapok
  3. Hozzászólások
    Hitelesítés
    Segítők
    Tesztelés
    Fő takarmány
    Egyetlen üzenet
    Különleges ágak
    Szolgáltatási objektumok
    Hozzon létre új bejegyzést
  4. Azonnali üzenetküldés
    Privát beszélgetés
    Kapcsolatok
    Csoportos beszélgetés
    Hírnök
  5. értesítések
    Kapcsolatfelvételi kérések
    beszélgetések

Előfeltételek

Megpróbálom elmagyarázni minden kódsorot és azt, hogy hogyan jöttem fel a megoldásokkal. Úgy gondolom, hogy egy kezdő számára teljesen lehetséges, hogy kitöltse ezt az útmutatót. De ne feledje, hogy ez az oktatóanyag olyan témákat fed le, amelyek túlmutatnak az alapjain.

Tehát ha teljes kezdő vagy, akkor nehezebb lesz, mert a tanulási görbe nagyon meredek lesz. Linket fogok biztosítani az erőforrásokhoz, ahol további információkat szerezhet minden új koncepcióról, amelyet érintünk.

Ideális esetben a legjobb, ha tisztában van a következők alapjaival:

  • HTML, CSS, Bootstrap, JavaScript, jQuery
  • Ruby, Ruby On Rails
  • csoportos it

Beállít

Feltételezem, hogy már beállította az alapvető Ruby On Rails fejlesztési környezetet. Ha nem, ellenőrizze a RailsInstaller alkalmazást.

Egy ideje fejlesztettem a Windows 10 rendszert. Eleinte rendben volt, de egy idő után belefáradtam a misztikus akadályok legyőzésébe, amelyeket a Windows okozott. Folyamatosan kellett kitalálnom a hack-módszereket az alkalmazások működéséhez. Rájöttem, hogy nem éri meg az időmet. Ezen akadályok leküzdése nem adott semmiféle értékes készséget vagy tudást. Csak időt töltöttem azzal, hogy a Windows 10 telepítőjén szalagra ragasztottam.

Tehát inkább virtuális gépre váltottam. A Vagrant segítségével fejlesztettem ki egy fejlesztési környezetet, a PuTTY-t pedig egy virtuális géphez való csatlakozáshoz. Ha a Vagrant-ot is szeretné használni, ez az oktatóprogram hasznosnak találtam.

Hozzon létre egy új alkalmazást

A PostgreSQL-t fogjuk használni adatbázisunkként. Ez a népszerű választás a Ruby On Rails közösség körében. Ha még nem hozott létre semmilyen Rails alkalmazást a PostgreSQL segítségével, érdemes ellenőrizni ezt az oktatóprogramot.

Miután megismerte a PostgreSQL-t, keresse meg a könyvtárat, ahol megtartja a projektjeit, és nyissa meg a parancssort.

Új alkalmazás létrehozásához futtassa ezt a sort:

sínek új collabfield --adatabase = postgresql

Collabfield, így hívják fel alkalmazásokat. Alapértelmezés szerint a Rails az SQlite3-t használja, de mivel PostgreSQL-t akarunk használni adatbázisunkként, meg kell határoznunk azt a következő hozzáadásával:

--database = postgresql

Most sikeresen létre kellett hoznunk egy új alkalmazást.

Keresse meg az újonnan létrehozott könyvtárat a következő paranccsal:

cd collabfield

És most futtathatjuk alkalmazásunkat az alábbiak megadásával:

sínek s

Most indítottuk alkalmazásunkat. Most látnunk kellene, amit eddig elértünk. Nyisson meg egy böngészőt, és lépjen a http: // localhost: 3000 webhelyre. Ha minden jól ment, akkor látnia kell a Rails aláírás üdvözlő oldalát.

Elrendezés

Ideje kódolni. Hol kezdjük? Nos, elkezdhetjük bárhová akarjuk. Amikor új weboldalt építek, szeretnék kezdeni valamilyen alapvető vizuális struktúra létrehozásával, majd mindent másra építeni. Csináljuk csak ezt.

Főoldal

Amikor eljutunk a http: // localhost: 3000 webhelyre, meglátogatjuk a Rails üdvözlő oldalát. Ezt az alapértelmezett oldalt a saját kezdőoldalunkra váltjuk. Ehhez hozzon létre egy új Pages nevû vezérlõt. Ha nem ismeri a Rails vezérlőket, akkor be kell gördítenie a Műveletvezérlőn, hogy elképzelést kapjon a Rails vezérlőről. Futtassa ezt a sort a parancssorban egy új vezérlő létrehozásához.

sínek g vezérlő oldalak

Ennek a síngenerátornak kellett volna létrehoznia néhány fájlt nekünk. A parancssor kimenetének így kell kinéznie:

Ezt a PagesControllert fogjuk használni a speciális és statikus oldalak kezelésére. Most nyissa meg a Collabfield projektet egy szövegszerkesztőben. Használom a Fenséges szöveget, de bármit is használhat.

Nyisson meg egy pages_controller.rb fájlt

app / vezérlők / pages_controller.rb

Itt definiáljuk honlapunkat. Természetesen a kezdőlapot más vezérlővel és különböző módon is meghatározhatjuk. De általában szeretek meghatározni a kezdőlapot a PagesController-en belül.

Amikor megnyitjuk az pages_controller.rb-t, ezt látjuk:

Ez egy üres osztály, PagesController néven, amely az ApplicationController osztálytól örököl. Az osztály forráskódját az app / kontrollers / application_controller.rb mappában találhatja meg.

Az összes vezérlőnk, amelyet létrehozunk, az ApplicationController osztálytól fogják örökölni. Ami azt jelenti, hogy az ezen osztályon belül meghatározott összes módszer elérhető lesz minden vezérlőnknél.

Meghatározunk egy index nevű nyilvános módszert, így műveletként hívható fel:

Amint azt már a Műveletvezérlőben olvashatta, az útválasztás meghatározza, hogy melyik vezérlőt és annak nyilvános módszerét (műveletét) kell hívni. Definiáljunk egy útvonalat, tehát amikor megnyitjuk a weboldal gyökéroldalát, a Rails tudja, hogy melyik vezérlőt és milyen műveletet kell felhívni. Nyissa meg a route.rb fájlt az app / config / route.rb mappában.

Ha nem tudod, mi a Rails útvonalai, akkor ez a tökéletes alkalom a Rails Routing elolvasására.

Helyezze be ezt a sort:

gyökér: 'oldalak # index'

A route.rb fájlnak így kell kinéznie:

A Ruby # hasítójel szimbóluma egy módszert jelent. Amint emlékszik, egy művelet csak nyilvános módszer, tehát az # index oldalak azt mondják, hogy “hívja a PagesControllert és annak nyilvános módszer (akció) indexét”.

Ha a gyökérpályára mennénk a http: // localhost: 3000-en, akkor az index műveletet hívnánk. De még nincs sablon, amelyet megjelenítsünk. Tehát hozzunk létre egy új sablont az indexművelethez. Nyissa meg az alkalmazást / nézeteket / oldalakat, és hozzon létre egy index.html.erb fájlt ebben a könyvtárban. A fájlba írhatjuk a szokásos HTML + beágyazott Ruby kódot. Csak írjon be valamit a fájl belsejébe, így láthatjuk a megjelenített sablont a böngészőben.

Kezdőlap

Most, amikor a http: // localhost: 3000-re lépünk, valami ilyet kell látnunk az alapértelmezett Rails információs oldal helyett.

Most egy nagyon alapvető kiindulópontunk van. Megkezdhetjük új dolgok bevezetését weboldalunkon. Azt hiszem, itt az ideje létrehozni az első elkötelezettségünket.

A parancssor futtatásához:

git állapot

És látnia kellene valami ilyesmit:

Ha még nem tudja, akkor amikor új alkalmazást generálunk, egy új helyi git-lerakat inicializálódik.

Adja hozzá az összes aktuális változást futtatásával:

adj hozzá -A

Ezután végezzen el minden változást futással:

git activ -m "PagesController generálása. Kezdőlap inicializálása"

Ha ezt futtatjuk:

git állapot

Látnánk, hogy nincs semmi kötelezettségvállalás, mert csak sikerrel hajtottuk végre az összes változást.

bootstrap

A navigációs sáv és az érzékeny rácsrendszer számára a Bootstrap könyvtárat fogjuk használni. A könyvtár használatához telepítenünk kell a
bootstrap-sass gem. Nyissa meg a Gemfile fájlt a szerkesztőben.

collabfield / Gemfile

Adjon hozzá egy bootstrap-sass drágakövet a Gemfile-hez. Ahogy a dokumentáció mondja, gondoskodnia kell arról, hogy a szár-sínek drágaköve is jelen legyen.

...
gem 'bootstrap-sass', '~> 3.3.6'
drágakő 'sass-sínek', '> = 3.2'
...

Mentse el a fájlt, és futtassa az újonnan hozzáadott drágakövek telepítéséhez:

csomag telepítése

Ha továbbra is futtatja az alkalmazást, indítsa újra a Rails szervert, hogy megbizonyosodjon arról, hogy elérhetőek-e új drágakövek. A szerver újraindításához egyszerűen állítsa le a Ctrl + C megnyomásával, majd futtassa újra a rails s parancsot a szerver indításához.

Nyissa meg az eszközöket az application.css fájl megnyitásához:

app / eszközök / stíluslapok / application.css

Az összes megjegyzett szöveg alább adja hozzá:

...
@import "bootstrap-lánckerekek";
@import "bootstrap";

Most változtassa meg az application.css nevet application.scss névre. Ez szükséges a Bootstrap könyvtár Railsben való használatához, és lehetővé teszi a Sass funkciók használatát is.

Azt akarjuk, hogy ellenőrizzük az összes .scss fájl megjelenítésének sorrendjét, mert a jövőben érdemes lehet néhány Sass változót létrehozni. Biztosítani szeretnénk, hogy a változókat meghatározzuk, mielőtt felhasználnánk őket.

Ennek végrehajtásához távolítsa el ezt a két sort az application.scss fájlból:

* = Követelés
* = Követelményes.

Majdnem használhatjuk a Bootstrap könyvtárat. Van még egy dolog, amit tennünk kell. Ahogy a bootstrap-sass docs mondja, a Bootstrap JavaScript a jQuery könyvtártól függ. A jQuery és a Rails használatához hozzá kell adnia a jquery-rails gem-et.

gem 'jquery-rails'

Fuss…

csomag telepítése

... újra, és indítsa újra a szervert.

Az utolsó lépés a Bootstrap és a jQuery igénylése az alkalmazás JavaScript fájljában. Lépjen az application.js oldalra

app / eszközök / JavaScriptek / application.js

Ezután adja hozzá a következő sorokat a fájlhoz:

// = igényelnek jquery-t
// = bootstrap-láncokat igényelnek

Változtassa meg a változtatásokat:

adj hozzá -A
git activ -m "A bootstrap gem hozzáadása és konfigurálása"

Navigációs sáv

A navigációs sávhoz a Bootstrap navigációs elemét használjuk kiindulási pontként, majd azt megismételve. A navigációs sávot részleges sablonban tároljuk.

Azért csináljuk, mert jobb, ha az alkalmazás minden elemét külön fájlokban tároljuk. Sokkal könnyebben tesztelheti és kezelheti az alkalmazás kódját. Ezeket az összetevőket az alkalmazás más részeiben is felhasználhatjuk, a kód sokszorosítása nélkül.

Keresse meg:

views / layouts

Hozzon létre egy új fájlt:

_navigation.html.erb

A partíciókhoz aláhúzás előtagot használunk, így a Rails keretrendszer meg tudja különböztetni részlegesként. Most másolja és illessze be a navigációs összetevőt a Bootstrap dokumentumokból, és mentse el a fájlt. A részlet megtekintéséhez a webhelyen el kell látnunk azt valahol. Keresse meg a nézeteket / elrendezéseket / application.html.erb fájlt. Ez az alapértelmezett fájl, ahol minden megjelenik.

A fájlban a következő módszert látjuk:

<% = hozam%>

Megjeleníti a kért sablont. A rubin szintaxis HTML-fájlban való használatához <%%> -al körbe kell tekernünk (a beágyazott rubin lehetővé teszi ezt). Az ERB szintaxisa közötti különbségek gyors megismeréséhez nézd meg ezt a StackOverflow választ.

A Kezdőlap szakaszban beállítottuk a gyökér URL felismerésének útvonalát. Tehát minden alkalommal, amikor egy GET kérést küldünk egy gyökéroldalra való feljutáshoz, a PagesController bindex akciója meghívásra kerül. És az adott művelet (ebben az esetben az indexelés) egy sablonnal válaszol, amelyet a hozammechanizmussal rendellenek. Mint emlékszik, a kezdőlap sablonja az app / views / pages / index.html.erb webhelyen található.

Mivel a navigációs sávot minden oldalunkra szeretnénk helyezni, a navigációs sávot az alapértelmezett application.html.erb fájlban jelenítjük meg. Részleges fájl megjelenítéséhez egyszerűen használja a megjelenítési módszert, és érvelve adja át a részleges útvonalát. Végezze el a terméshozam módszer felett, mint ez:

...
<% = megjeleníti az 'elrendezések / navigáció'%> elemet
<% = hozam%>
...

Most menjen a http: // localhost: 3000 webhelyre, és látnia kell a navigációs sávot.

Mint fentebb említettük, módosítani fogjuk ezt a navigációs sávot. Először távolítsuk el az összes

  • és elemet. A jövőben saját elemeket fogunk létrehozni itt. Az _navigation.html.erb fájlnak így kell kinéznie.

    Van egy alapvető, érzékeny navigációs sáv. Jó ideje új elkötelezettség létrehozására. A parancssorban futtassa a következő parancsokat:

    adj hozzá -A
    git activ -m "Alapvető navigációs sáv hozzáadása"

    A navigációs sáv nevét márkáról collabfield-re kell változtatnunk. Mivel a márka linkelem, ezért a linkek létrehozásához a link_to módszert kell használnunk. Miért? Mivel ez a módszer lehetővé teszi az URI útvonalak könnyű előállítását. Nyisson meg egy parancssort és keresse meg a projekt könyvtárát. Futtassa a következő parancsot:

    sínek útvonalak

    Ez a parancs kiadja az elérhetõ útvonalakat, amelyeket az route.rbfile generál. Amint látjuk:

    Jelenleg csak egy útvonalunk van, az egyiket, amelyet korábban meghatározunk. Ha megnézi az adott útvonalakat, láthatja az Előtag oszlopot. Ezeket az előtagokat felhasználhatjuk a kívánt oldal eléréséhez. Csak annyit kell tennünk, hogy előtag nevet használ, és hozzáteszi a _path-t. Ha a gyökér_útvonalat írnánk, ez útvonalat generál a gyökéroldalhoz. Tehát használjuk a link_to módszer és útvonalak erejét.

    Cserélje ki ezt a sort:

     Márka 

    Ezzel a vonallal:

    <% = link_to 'collabfield', root_path, class: 'navbar-brand'%>

    Ne feledje, hogy ha nem egészen érti egy adott módszer működését, akkor csak a Google-t használja, és valószínűleg megtalálja annak dokumentációját magyarázattal. A dokumentációk néha rosszul vannak megírva, ezért érdemes kicsit tovább a Google-t keresni, és találhat egy blogot vagy StackOverflow választ, amely segíthet.

    Ebben az esetben egy karakterláncot adunk át az első argumentumként a elem értékének hozzáadására, a második argumentumra szükségünk van egy elérési úthoz, itt az útvonalak segítik az előállítást. A harmadik argumentum nem kötelező, amely az opciók hash-jában halmozódik fel. Ebben az esetben hozzá kellett adnunk a navbar-márka osztályt, hogy a Bootstrap által működtetett navigációs sáv működésében maradjon.

    Tegyünk egy új kötelezettséget erre a kis változásra. A következő részben a navigációs sávtól kezdve megváltoztatjuk alkalmazásunk kialakítását.

    adj hozzá -A
    git tied -m "A navigációs sáv márkanévének megváltoztatása márkáról collabfield-re"

    Stíluslapok

    Hadd mutassam be, hogyan strukturálom a stíluslap-fájlokat. Amit tudom, nincs erõs konvenció a stíluslapok szerkesztésére a Rails-ben. Mindenki kissé másképp csinálja.

    Általában így szerkesztem a fájlokat.

    • Alapkönyvtár - itt tartom a Sass változókat és stílusokat, amelyeket az egész alkalmazásban használnak. Például az alapértelmezett betűméret és az alapértelmezett elemek stílusai.
    • Partial - A stílusaim többsége odamenne. Az összes stílust megtartom külön-külön az összetevők és az oldalak számára ebben a könyvtárban.
    • Érzékeny - Itt meghatározom a különféle stílusszabályokat a különböző képernyőméretekhez. Például stílusok asztali képernyőre, táblagép képernyőre, telefon képernyőre stb.

    Először hozzunk létre egy új tároló ágot a következő futtatásával:

    git checkout -b "stílusok"

    Éppen most készítettünk egy új git ágot, és automatikusan átváltottunk rá. Mostantól kezdve így fogunk végrehajtani a kód új módosításait.

    Ennek oka az, hogy elkülöníthetjük a jelenleg funkcionális változatunkat (mesterág), és új kódot írhatunk a projekt példányába, anélkül, hogy félne valamit megsérülni.

    Miután befejeztük a megvalósítást, csak egyesíthetjük a módosításokat a mesterágba.

    Kezdje néhány könyvtár létrehozásával:

    app / eszközök / stíluslapok / felhangok / elrendezés

    Az elrendezési könyvtárban hozzon létre egy navigációs.scss fájlt, és a fájl belsejében adja hozzá:

    Ezekkel a sorokkal megváltoztatjuk a navigációs háttér és a linkek színét. Mint már észrevetted, a választóegység be van ágyazva egy másik deklarációs blokkba. A Sass lehetővé teszi számunkra, hogy ezt a funkciót használjuk. ! A fontos az alapértelmezett Bootstraps stílusok szigorú felülbírálása. Az utolsó dolog, amit észrevethetett, az, hogy a színnév helyett Sass változót használunk. Ennek oka az, hogy ezt a színt többször használjuk az alkalmazás egész területén. Definiáljuk ezt a változót.

    Először hozzon létre egy új mappát:

    app / eszközök / stíluslapok / bázis

    Az alapkönyvtárban hozzon létre egy új változó.scss fájlt. A fájlban definiáljon egy változót:

    $ navbarColor: # 323738;

    Ha megpróbálta elérni a http: // localhost: 3000 webhelyet, akkor nem fog észrevenni semmilyen stílusváltozást. Ennek oka az, hogy a Bootstrap szakaszban ezeket a sorokat eltávolítottuk:

    * = Követelés
    * = Követelményes.

    az application.scss alkalmazásból, hogy nem automatikusan importál minden stílusfájlt.

    Ez azt jelenti, hogy most importálnunk kell az újonnan létrehozott fájlokat a fő application.scssfile fájlba. A fájlnak így kell kinéznie:

    A tetején található variables.scss fájl importálásának oka annak ellenőrzése, hogy a változók meg vannak-e határozva, mielőtt felhasználnánk őket.

    Adjon hozzá még néhány CSS-t a navigation.scss fájl tetejére:

    Természetesen ezt a kódot a fájl aljára teheti, ha szeretné. Személy szerint CSS-kódot rendelek és csoportosítom a CSS-választók specifikása alapján. Mindenki megint kissé másképp csinálja. A kevésbé specifikus választógépek fölött, az alábbiakban a konkrétabb választógépek vannak. Tehát például a típusválasztók az osztályválasztók felett, az osztályválasztók az azonosítóválasztók felett vannak.

    Végezzünk változtatásokat:

    adj hozzá -A
    git activ -m "CSS hozzáadása a navigációs sávhoz"

    Biztosítani akarjuk, hogy a navigációs sáv mindig látható legyen, még akkor is, ha lefelé görgetünk. Jelenleg nincs elegendő tartalom a lefelé gördítéshez, de a jövőben megteszjük. Miért nem adjuk ezt a funkciót a navigációs sávhoz most?

    Ehhez használja a Bootstrap osztály navigált rögzített tetejét. Adja hozzá ezt az osztályt a navigációs elemhez, így néz ki így:

    Azt is szeretnénk, ha az collabfield a Bootstrap Grid System bal oldalának határához tartozik. Jelenleg a nézetablak bal oldalának határain van, mert osztályunk jelenleg konténerfolyadék. Ennek megváltoztatásához állítsa az osztályt tárolóra.

    Így néz ki:

    Változtassa meg a változtatásokat:

    adj hozzá -A
    git activ -m "
    - A _navigation.html.erb mappában a navbar-fix-top osztály hozzáadása a navigációhoz.
    - Cserélje ki a tartály-folyadék osztályt a tartályra "

    Ha belép a http: // localhost: 3000 webhelyre, láthatja, hogy a kezdőlap szövege a navigációs sáv alatt van rejtve. Ennek oka a navigációs sávban rögzített felső osztály. A probléma megoldásához nyomja le a testet az alábbiak hozzáadásával a navigation.scss-hoz:

    test {
     margin-top: 50 képpont;
    }

    Ebben a szakaszban az alkalmazásnak így kell kinéznie:

    Vállalja a változást:

    adj hozzá -A
    git activ -m "A test felső részének 50-szorosának hozzáadása"

    Mint emlékszik, korábban már létrehozott egy új ágot, és átváltottunk rá. Ideje visszatérni a mesterághoz.

    Futtassa a parancsot:

    git ág

    Láthatja fiókjaink listáját. Jelenleg a stílusok ágában vagyunk.

    A fő ághoz való visszatéréshez futtassa:

    Git pénztár mester

    Az összes változás, amelyet a stíluságakon végeztünk, egyesítéséhez egyszerűen futtassa:

    git egyesítési stílusok

    A parancs egyesítette a két ágat, és most megnézheti az elvégzett változtatások összefoglalását.

    Többé nem kell a stíluságakra, így törölhetjük azokat:

    git ág -D stílusok

    Hozzászólások

    Már majdnem itt a megfelelő idő, hogy megkezdjem a hozzászólások funkciójának megvalósítását. Mivel alkalmazásunk célja az, hogy lehetővé tegyük a felhasználók számára a hasonló gondolkodású emberekkel való találkozást, ügyelnünk kell arra, hogy a hozzászólások szerzői azonosíthatók legyenek. Ennek eléréséhez hitelesítő rendszerre van szükség.

    Hitelesítés

    A hitelesítési rendszerhez a devise gem-et fogjuk használni. Megteremthetjük saját hitelesítési rendszerünket, de ehhez sok erőfeszítésre lenne szükség. Egy könnyebb útvonalat választunk. Szintén népszerű választás a Rails közösség körében.

    Kezdje egy új ág létrehozásával:

    git checkout -b hitelesítés

    Csakúgy, mint bármely más gyöngyszemnél, a beállításához követjük a dokumentációját. Szerencsére nagyon könnyű beállítani.

    Adja hozzá a Gemfile-hez

    drágakő

    Ezután futtassa a parancsokat:

    csomag telepítése
    sínek generál terv: telepítés

    Valószínűleg néhány utasítást lát a parancssorban. Ebben az oktatóanyagban nem használunk levelezőket, így nincs szükség további konfigurálásra.

    Ezen a ponton, ha nem tud semmit a Rails modellekről, meg kell ismerkednie velük az Active Record és az Active Modeldocumentation segítségével.

    Most használjunk egy devizagenerátort egy felhasználói modell létrehozásához.

    sínek generál devise felhasználó

    Inicializálja az alkalmazás adatbázisát a következő futtatásával:

    sínek db: létrehozás

    Ezután futtassa ezt a parancsot új táblák létrehozásához az adatbázisban:

    sínek db: vándorolnak

    Ez az. Technikailag a hitelesítő rendszer fel van állítva. Most már felhasználhatjuk a megadott módszerek kidolgozását és új felhasználók létrehozását. Vállalja a változást:

    adj hozzá -A
    git activ -m "A Devise gem hozzáadása és konfigurálása"

    A Devise gem telepítésével nemcsak a háttér-funkciókat, hanem az alapértelmezett nézeteket is megkapjuk. Ha futás közben sorolja fel az útvonalakat:

    sínek útvonalak

    Láthatja, hogy most már egy csomó új útvonal van. Ne feledje, eddig csak egy gyökér útvonalunk volt. Ha valami zavarónak tűnik, bármikor megnyithatja a tervezet dokumentumokat és megkaphatja a válaszokat. Ne felejtsük el, hogy sok ugyanaz a kérdés felmerül más emberek gondolataiban is. Nagy a esélye, hogy a Google segítségével is megtalálja a választ.

    Próbáljon ki néhány ilyen útvonalat. Ugrás a localhost webhelyre: 3000 / users / sign_in, és látnia kell egy bejelentkezési oldalt.

    Ha a localhost-hez jutott: 3000 / users / sign_up, akkor regisztrációs oldalt is láthat. A fenébe! ahogy Noob Noob mondja. Ha megnézi a nézetek könyvtárat, láthatja, hogy nincs olyan Devise könyvtár, amelyet módosíthatnánk. Mint a Devise docs mondja, a Devise nézetek módosítása érdekében egy tervező generátorral kell létrehoznunk. Fuss

    a sínek tervezetet generálnak: nézeteket

    Ha ellenőrzi a nézet könyvtárat, a képernyőn egy generált tervező könyvtárat fog látni. Itt módosíthatjuk a regisztráció és a bejelentkezési oldalak megjelenését. Kezdjük a bejelentkezési oldallal, mert a mi esetünkben ez egy egyszerűbb megvalósítás lesz. A regisztrációs oldallal, a kívánt szolgáltatásunk miatt, további erőfeszítésekre lesz szükség.

    Bejelentkezési oldal

    Keresse meg az alkalmazást / nézeteket / devise / session / new.html.erb fájlt.

    Itt tárolják a bejelentkezési oldal nézeteit. A fájlban csak egy bejelentkezési űrlap található. Mint már észrevetted, a form_for metódust használják ennek az űrlapnak a létrehozására. Ez egy praktikus Rails módszer űrlapok előállításához. Meg fogjuk változtatni ennek az űrlapnak a stílusát a bootstrap segítségével. Cserélje le az összes fájl tartalmát a következőkre:

    Semmi divatos nem megy ide. Éppen most módosítottuk ezt az űrlapot bootstrap formává azáltal, hogy a módszer nevét bootstrap_form_forand-ra változtattuk, és az űrlap-vezérlő osztályokat hozzáadtuk a mezőkhez.

    Vessen egy pillantást a módszerek belső érveinek stílusára. Minden érv új sorban kezdődik. Ennek oka az volt, hogy elkerültem a hosszú kódsorokat. A kódvonalak általában nem lehetnek hosszabb 80 karakternél, ez javítja az olvashatóságot. Így stílusoljuk a kódot az útmutató többi részében.

    Ha ellátogatunk a localhost-be: 3000 / users / sign_in, látni fogjuk, hogy ez hibát okoz:

    meghatározatlan módszer 'bootstrap_form_for'

    Annak érdekében, hogy a Rails programban elindítsuk a bootstrap formákat, hozzá kell adnunk a bootstrap_form gyöngyszemét. Adja hozzá ezt a Gemfile-hez

    gem 'bootstrap_form'

    Ezután futtassa:

    csomag telepítése

    Ebben a pillanatban a bejelentkezési oldalnak így kell kinéznie:

    Változások végrehajtása:

    adj hozzá -A
    "szerkesztési nézetek létrehozása, a bejelentkezés formájának módosítása
    és adjuk hozzá a bootstrap_form drágakövet. "

    Ahhoz, hogy az bootstrap rácsrendszerét megkapja az oldal, csomagolja be a bejelentkezési űrlapot a bootstrap tárolóba.

    A bejelentkezési űrlap szélessége 12 oszlopból 6 oszlop. Az eltolás 3 oszlop. Kisebb eszközökön az űrlap teljes képernyő szélessége lesz. Így működik a rendszerindító rendszer.

    Tegyünk egy másik kötelezettséget. Elég kisebb változás, mi? De általában így teszek elkötelezettséget. Végrehajtom egy határozott változást az egyik területen, majd elkötelezem azt. Úgy gondolom, hogy így haladva segít nyomon követni a változásokat és megérteni, hogyan alakult a kód.

    adj hozzá -A
    git activ -m "bejelentkezési űrlap beillesztése a bejelentkezési oldalba egy boostrap tárolóval"

    Jobb lenne, ha a bejelentkezési oldalra csak a / logininstead of / users / sign_in címen jutnánk el. Meg kell változtatnunk az útvonalat. Ehhez tudnunk kell, hogy hol található a bejelentkezési oldalra lépő hívás. A Devise vezérlők maga a drágakő belsejében helyezkednek el. A Devise docs olvasásával láthatjuk, hogy az összes vezérlő a devise könyvtárban található. Nem igazán lepte meg a felfedezés, hogy őszinte legyek U_U. A devise_scope módszerrel egyszerűen megváltoztathatjuk az útvonalat. Ugrás a route.rb fájlhoz, és add hozzá

    devise_scope: a felhasználó nem
      get 'login', ide: 'devise / session # new'
    vég

    Vállalja a változást:

    adj hozzá -A
    git activ -m "útvonal megváltoztatása / users / sign_in helyről / login"

    Jelenleg hagyja a bejelentkezési oldalt, ahogy van.

    Regisztráció oldal

    Ha a localhost-re navigálunk: 3000 / users / sign_up, látnánk az alapértelmezett Devise regisztrációs oldalt. De mint fentebb említettük, a regisztrációs oldal további erőfeszítéseket igényel. Miért? Mivel új: név oszlopot akarunk hozzáadni a felhasználói táblázathoz, így egy felhasználói objektumnak rendelkezhet a: name attribútummal.

    Néhány módosítást készítünk a schema.rb fájlban. Jelenleg, ha nem ismeri jól a sémaváltozásokat és az áttérést, azt javaslom, olvassa el az Active Record Migration dokumentumokat.

    Először hozzá kell adnunk egy további oszlopot a felhasználói táblázathoz. Létrehozhatunk egy új migrációs fájlt és a change_table metódust használhatunk további oszlop hozzáadásához. De éppen a fejlesztési szakaszban vagyunk, alkalmazásunkat még nem telepítettük. Meghatározhatunk egy új oszlopot egyenesen a devise_create_users migrációs fájlban, majd újra létrehozhatjuk az adatbázist. Keresse meg a db / áttelepítés elemet, nyissa meg a * CREATION_DATE * _devise_create_users.rb fájlt, és adja hozzá az t.string: név, null: hamis, alapértelmezett: "" elemet a create_table módszerhez.

    Most futtassa az adatbázis leállítására és létrehozására, valamint az áttelepítésre vonatkozó parancsokat.

    sínek db: csepp
    sínek db: létrehozás
    sínek db: vándorolnak

    Új oszlopot adtunk a felhasználói táblázathoz, és megváltoztattuk a schema.rb fájlt.

    Egy extra attribútum elküldéséhez, így a Devise vezérlő elfogadná azt, a vezérlő szintjén meg kell változtatnunk. Néhány különféle módon megváltoztathatjuk a Devise vezérlőket. Használhatunk tervező generátort és vezérlőket. Vagy létrehozhatunk egy új fájlt, megadhatjuk a vezérlőt és a módosítani kívánt módszereket. Mindkét módszer jó. Az utóbbit fogjuk használni.

    Keresse meg az alkalmazást / vezérlőket, és hozzon létre egy új fájlt a registrations_controller.rb. Adja hozzá a következő kódot a fájlhoz:

    Ez a kód felülírja a sign_up_params és a account_update_paramsmetodokat, hogy elfogadja a: name attribútumot. Mint látja, ezek a módszerek megtalálhatók a Devise RegistrationsController-ben, tehát meghatároztuk és megváltoztattuk a módszereit. Most az útvonalakon belül meg kell határoznunk ezt a vezérlőt, így ezeket a módszereket felül lehet írni. Belső route.rb változás

    devise_for: felhasználók

    nak nek

    devise_for: users,: kontrollers => {: registrations => "registrations"}

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "
    - Adja hozzá a név oszlopot a felhasználói táblázathoz.
    - Adjon névttribútumot a sign_up_params és account_update_params elemekhez
      módszerek a RegistrationsController belsejében "

    Nyissa meg az new.html.erb fájlt:

    app / views / dolgozzon / regisztrációk / new.html.erb

    Ismét távolítsa el az űrlap kivételével mindent. Konvertálja az űrlapot bootstrap formába. Ezúttal hozzáadunk egy további névmezőt.

    Vállalja a változást.

    adj hozzá -A
    git activ -m "
    Mindent törölhet a regisztrációs oldalról, kivéve az űrlapot.
    Az űrlap konvertálása bootstrap formába. További névmező hozzáadása "

    Tekerje le az űrlapot egy bootstrap tárolóval, és adjon hozzá egy kis szöveget.

    Vállalja a változást.

    adj hozzá -A
    git activ -m "
    Tekerje be a regisztrációs űrlapot egy bootstrap konténerre.
    Információs szöveg hozzáadása a tárolóba "

    Csakúgy, mint a bejelentkezési oldalnál, jobb lenne, ha csak regisztrációs oldalt nyithatunk meg a / regisztráció helyett a / regisztráció helyett a / regisztráció_ feliraton. A route.rb fájl belsejében adja hozzá a következő kódot:

    devise_scope: a felhasználó nem
      szerezzen „feliratkozást”, ide: „tervezés / regisztrációk # új”
    vég

    Vállalja a változást.

    adj hozzá -A
    git activ -m "A regisztrációs oldal útvonalának módosítása / users / sign_up-ról / signup-ra"

    Végezzünk el néhány stílusváltoztatást, mielőtt továbbmegyünk. Keresse meg az alkalmazás / eszközök / mappák / partíciókat, és hozzon létre egy új signup.scss fájlt. A fájl belsejében adja hozzá a következő CSS-t:

    Szintén nem importáltunk fájlokat az partíciós könyvtárból az application.scss fájlban. Csináljuk most. Keresse meg az application.scssand közvetlenül a @import partíciók / layout / * felett, és importálja az összes fájlt a partialsdirectoryból. Az Application.scssnak így kell kinéznie

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "
    - Hozzon létre egy signup.scss, és adjon hozzá CSS-t a regisztrációs oldalhoz
    - Az összes fájl importálása a partíciók könyvtárából az application.scss "

    Adjon hozzá néhány egyéb stílusváltoztatást a weboldal általános megjelenéséhez. Keresse meg az alkalmazás / eszközök / stíluslapok / alap elemet, és hozzon létre egy új default.scss fájlt. A fájl belsejében adja hozzá a következő CSS-kódot:

    Itt néhány általános stílusváltoztatást alkalmazunk az egész weboldalra. a betűméret 62,5% -ra van állítva, így az 1 rem egység 10 képpontos lehet. Ha nem tudja, mi a rem egység, érdemes elolvasni ezt az oktatóanyagot. Nem akarjuk, hogy címkeszöveg jelenjen meg a rendszerindító űrlapokon, ezért állítottuk be ezt:

    .control-label {
      kijelző: nincs;
    }

    Lehet, hogy észrevette, hogy a $ backgroundColor változót használják. De ez a változó még nincs beállítva. Tehát csináljuk úgy, hogy megnyitja a variables.scss fájlt és hozzáadja ezt:

    $ backgroundColor: # f0f0f0;

    Az default.scss fájlt nem importálják az application.scss fájlba. Importálja a változók alá, az application.scss fájlnak így kell kinéznie:

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "
    Adjon hozzá CSS-t, és importálja a CSS-fájlokat a fő fájlba
    - Hozzon létre egy default.scss fájlt és adjon hozzá CSS-t
    - Adja meg a $ backgroundColor változót
    - Importálja az default.scss fájlt az application.scss fájlba "

    A navigációs sáv frissítése

    Jelenleg három különböző oldalunk van: otthon, bejelentkezés és regisztráció. Jó ötlet összekapcsolni őket, így a felhasználók könnyedén navigálhatnak a webhelyen. A navigációs sávon linkeket fogunk elhelyezni a regisztrációhoz és a bejelentkezéshez. Keresse meg és nyissa meg a _navigation.html.erb fájlt.

    app / views / layouts / _navigation.html.erb

    Itt hozzáadunk néhány extra kódot. A jövőben még több kódot fogunk hozzáadni ide. Ez sok kóddal rendelkező fájlt eredményez, amelyet nehéz kezelni és tesztelni. A hosszú kód könnyebb kezelése érdekében meg fogjuk osztani a nagyobb kódot kisebb darabokra. Ennek elérése érdekében partíciókat fogunk használni. Mielőtt hozzáadnánk egy extra kódot, osszuk meg az aktuális _navigation.html.erb kódot partíciókra.

    Hadd mutassam be gyorsan, hogyan fog működni a navigációs sáv. Két fő részünk lesz. Az egyik oldalon az elemek mindig megjelennek, függetlenül a képernyő méretétől. A navigációs sáv másik részén az elemek csak a nagyobb képernyőkön jelennek meg, a kisebbeknél pedig összeomlottak.

    Így fog kinézni a .container elem belső szerkezete:

    Az elrendezések könyvtárában:

    app / views / layouts

    Hozzon létre egy új navigációs könyvtárat. Ezen a könyvtáron belül hozzon létre egy új részleges _header.html.erb fájlt.

    app / views / layouts / navigáció / _header.html.erb

    A _navigation.html.erb fájlból vágja ki a teljes .navbar-fejléc részt, majd illessze be az _header.html.erb fájlba. A navigációs könyvtárban hozzon létre egy másik, _collapsible_elements.html.erb nevű részleges fájlt.

    app / views / layouts / navigáció / _collapsible_elements.html.erb

    Az _navigation.html.erb fájlból vágja ki a teljes .navbar-collapse szakaszt, és illessze be a _collapsible_elements.html.erbbe. Most rendezzük meg ezt a két partíciót az _navigation.html.erb fájlban. A fájlnak most így kell kinéznie.

    Ha most belépne a http: // localhost: 3000 webhelyre, akkor nem észrevenne különbséget. Csak kicsit megtisztítottuk a kódot, és felkészítettük a további fejlesztésre.

    Készen állunk, hogy néhány linket felvegyen a navigációs sávba. Keresse meg és nyissa meg újra a _collapsible_elements.html.erb fájlt:

    app / views / layouts / _collapsible_elements.html.erb

    Töltsük meg ezt a fájlt linkekkel, cseréljük le a fájl tartalmát a következőkre:

    Hadd magyarázzam meg röviden, mi folyik itt. Először, a második sorban megváltoztattam az elem azonosítóját navbar-collapvable-tartalomra. Ez szükséges ahhoz, hogy ez a tartalom összecsukható legyen. Ez egy bootstrap funkciója. Az alapértelmezett azonosító a bs-example-navbar-collapse-1 volt. Ennek a funkciónak a beindításához kattintson az _header.html fájlban található adat-cél attribútummal rendelkező gombra. Nyissa meg a nézeteket / elrendezéseket / navigációt / _header.html.erb, és változtassa meg az data-target attribútumot data-target = "# navbar-collapvable-content" értékre. A gomb elindítja az összecsukható tartalmat.

    Ezután a_collapsible_elements.html.erb fájl belsejében néhányat láthatsz, ha elselogic a user_signed_in segítségével? Készítsen módszert. Ez különféle linkeket jelenít meg annak alapján, hogy egy felhasználó be van-e jelentkezve, vagy sem. Ha logikát hagyunk, például ha a nézetek belsejében megjelenő beillesztések nem jó gyakorlat. A nézeteknek elég „ostobáknak” kell lenniük, és csak ki kell szúrniuk az információkat, anélkül, hogy „gondolkodnának”. Ezt a logikát később, a Helpers segítségével fogjuk megismételni.

    Az utolsó dolog, amelyet meg kell jegyezni a fájlban, a pc-menu és a mobile-menu CSS osztályok. Ezen osztályok célja annak ellenőrzése, hogy a linkek hogyan jelenjenek meg a képernyő méretén. Adjunk hozzá néhány CSS-t ezekre az osztályokra. Keresse meg az alkalmazás / eszközök / stíluslapokat, és hozzon létre egy új, reagáló könyvtárat. A könyvtárban hozzon létre két fájlt, az desktop.scss és a mobile.scss fájlt. Ezeknek a fájloknak az a célja, hogy eltérő konfigurációval rendelkezzenek a különböző képernyőméretekhez. A desktop.scss fájl belsejében adja hozzá:

    A mobile.scss fájl belsejében adja hozzá:

    Ha még nem ismeri a CSS médialekérdezéseket, olvassa el ezt. Fájlok importálása az adaptív könyvtárból az application.scss fájlban. Importálja a fájl alján, így az application.scss-nek így kell kinéznie:

    Keresse meg és nyissa meg a navigation.scss fájlt

    app / eszközök / stíluslapok / felhangok / elrendezés / navigation.scss

    és hajtson végre néhány stílusos finomítást a navigációs sávhoz, a következő hozzáadásával a navigációs elem választójába:

    És a navigációs elemön kívül adja hozzá a következő CSS-kódot:

    Jelenleg alkalmazásunknak így kell kinéznie, amikor a felhasználó nincs bejelentkezve:

    Ilyen, amikor egy felhasználó be van jelentkezve:

    És így, ha a képernyő mérete kisebb:

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "
    Frissítse a navigációs sávot
    - Bejelentkezés, regisztráció, kijelentkezés és profilhivatkozások szerkesztése a navigációs sávon
    - Osztja az _navigation.scss kódot partíciókba
    - Hozzon létre reagáló könyvtárat a stíluslapok könyvtárában, és adjon hozzá CSS-t.
    - CSS hozzáadása a navigációs sáv stílusának finomításához "

    Most van egy alapvető hitelesítési funkciónk. Ez kielégíti igényeinket. Tehát egyesítsük a hitelesítési ágot a fő ággal.

    Git pénztár mester
    git merge hitelesítés

    Megint láthatjuk a változások összegzését. A hitelesítési ágnak már nincs szüksége, tehát törölje azt.

    git ág -D hitelesítés

    Segítők

    Amikor az _collapsible_elements.html.erb fájlt dolgoztunk, megemlítettem, hogy a Rails nézetek nem a megfelelő hely a logikához. Ha a projekt alkalmazás könyvtárába nézi, láthatja, hogy ott van a segítők könyvtár. Kihúzzuk a logikát a Rails nézetekből, és beillesztjük a segítők könyvtárába.

    app / views / pages

    Hozzuk létre az első segítőinket. Először hozzon létre egy új ágot, és váltson rá.

    git checkout -B segítők

    Keresse meg a segítők mappáját, és hozzon létre egy új navigációs_helper.rbfájlt

    app / segítők / navigation_helper.rb

    A segítő fájlokban a segítőket modulként definiálják. A navigációs_helper.rb-en belül határozza meg a modult.

    Alapértelmezés szerint a Rails az összes segítő fájlt minden nézetbe betölti. Személy szerint nem tetszik ez, mert a különböző segítő fájlokból származó módszerek neve összecsaphat. Az alapértelmezett viselkedés felülbírálásához nyissa meg az application.rb fájlt

    config / application.rb

    Az Alkalmazás osztályon adja hozzá ezt a konfigurációt

    config.action_controller.include_all_helpers = false

    Most a segítők csak a megfelelő vezérlő nézeteihez érhetők el. Tehát ha van PagesController, akkor az pages_helper.rb fájlban lévő összes segítő elérhető lesz az összes oldalfájlban az oldalak könyvtárában.

    Nincsen a NavigationController, tehát a NavigationHelper modulban meghatározott segítő módszerek sehol nem lesznek elérhetők. A navigációs sáv az egész weboldalon elérhető. A NavigationHelper modult beépíthetjük az ApplicationHelperbe. Ha nem ismeri a fájlok betöltését és beillesztését, olvassa el ezt a cikket, és ötleteket kapjon arról, hogy mi fog történni.

    Az application_helper.rb fájlon belül kérje a navigációs_helper.rb fájlt. Most hozzáférhetünk a navigációs_helper.rb fájl tartalmához. Tehát injektáljuk a NavigationHelper modult az ApplicationHelper modulba egy beépítési módszer alkalmazásával. Az application_helper.rb-nek így kell kinéznie:

    Most a NavigationHelper segítő módszerei az egész alkalmazásban elérhetők.

    Keresse meg és nyissa meg a _collapsible_elements.html.erb fájlt

    app / views / layouts / navigáció / _collapsible_elements.html.erb

    A tartalmat a részleges állításokon belül részlegesre osztjuk. Hozzon létre egy új, összecsukható_elemek könyvtárat a navigációs könyvtárban.

    app / views / layouts / navigáció / collapsible_elements

    A könyvtárban hozzon létre két fájlt: _signa_in_links.html.erb és _non_signed_in_links.html.erb. Most vágja ki a tartalmat az _collapsible_elements.html.erb fájl más állításokból, és illessze be a megfelelő partíciókra. A partícióknak így kell kinézniük:

    A _collapsible_elements.html.erb fájl belsejében az elsestates helyett inkább a therender metódust kell hozzáadni argumentumként az collapsible_links_partial_pathhelper metódussal. A fájlnak így kell kinéznie

    collapsible_links_partial_path az a módszer, amelyet a NavigationHelper-ben fogunk meghatározni. Nyissa meg a navigációs_helper.rb fájlt

    app / segítők / navigation_helper.rb

    és határozza meg a módszert a modulon belül. A navigation_helper.rb fájlnak így kell kinéznie:

    A meghatározott módszer nagyon egyszerű. Ha egy felhasználó be van jelentkezve, térjen vissza a megfelelő rész útvonalához. Ha a felhasználó nincs bejelentkezve, térjen vissza egy másik rész útvonalához.

    Kialakítottuk az első helper módszerünket, és kibontottuk a logikát a nézetekből a helper módszerre. Ezt az útmutató hátralévő részében fogjuk megtenni, amikor logikával szembesülünk egy nézetet tartalmazó fájlban. Ezzel kedvezzük magunkat, az alkalmazás tesztelése és kezelése sokkal könnyebbé válik.

    Az alkalmazásnak ugyanúgy kell kinéznie és működnie.

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git commit -m "Segédek konfigurálása és létrehozása
    - Változtassa a include_all_helpers konfigurációt hamis értékre
    - Osszuk fel a _collapsible_elements.html.erb fájl tartalmát
      partíciók és a logika kibontása a fájlból partíciókba "

    Egyesítse a segítő ágakat a mesterrel

    Git pénztár mester
    git merge helpershttps: //gist.github.com/domagude/419bba70cb97e27f4ea04fe37820194a#file-rails_helper-rb

    Tesztelés

    Ezen a ponton az alkalmazásnak van néhány funkciója. Még azt is gondolhatjuk, hogy még nincs sok funkció, de máris töltenünk kell egy kis időt az alkalmazás kézi tesztelésével, ha meg akarjuk győződni arról, hogy minden működik-e. Képzelje el, ha az alkalmazásnak 20-szor több szolgáltatása lenne, mint most. Milyen csalódás lenne annak ellenőrzése, hogy minden jól működik-e, minden alkalommal, amikor kódváltoztatást végeztünk. A frusztráció és a kézi tesztelés óráinak elkerülése érdekében automatikus teszteket hajtunk végre.

    Mielőtt belemerülnék a tesztírásba, hadd mutassam be Önnek, hogyan és mit teszteltem. Ezenkívül elolvashatja a Sínek alkalmazásának tesztelési útmutatóját is, hogy megismerkedjen az alapértelmezett Sínek tesztelési technikákkal.

    Amit tesztelésre használom

    • Keret: RSpec
      Amikor elkezdtem a Rails alkalmazásokat tesztelni, az alapértelmezett Minitestframework rendszert használtam. Most az RSpec-t használom. Nem hiszem, hogy itt van jó vagy rossz választás. Mindkét keret remek. Azt hiszem, ez a személyes preferenciától függ, mely keretet kell használni. Hallottam, hogy az RSpec népszerű választás a Rails közösség körében, ezért úgy döntöttem, hogy készítek egy képet. Most nagyrészt használom.
    • Mintaadatok: factory_girl
      Ismét először megpróbáltam az alapértelmezett Rails way - armatúrákat, hogy mintaadatokat adjunk hozzá. Megállapítottam, hogy ez más eset, mint a tesztelési kereteknél. Melyik vizsgálati keretet kell választania, valószínűleg személyes preferencia. Véleményem szerint a mintaadatokkal nem ez a helyzet. Eleinte a berendezés rendben volt. De észrevettem, hogy miután az alkalmazások nagyobbé válnak, a mintaadatok rögzítésével történő ellenőrzése nehézkes lesz. Talán rosszul használtam. De a gyárakkal azonnal mindenki kellemes és békés volt. Nem számít, ha egy alkalmazás kisebb vagy nagyobb - a mintaadatok beállítására irányuló erőfeszítések azonosak.
    • Átvételi tesztek: Capybara
      Alapértelmezés szerint a Capybara a rack_test illesztőprogramot használja. Sajnos ez az illesztőprogram nem támogatja a JavaScriptet. Az alapértelmezett Capybara illesztőprogram helyett a poltergeist-et választottam. Támogatja a JavaScriptet, és az én esetemben ez volt a legegyszerűbb illesztőprogram.

    Amit teszteltem

    Megvizsgálom az összes általam írt logikát. Lehet, hogy:

    • Segítők
    • Összes
    • Állás
    • Tervezési minták
    • Bármely más logika, amelyet én írtam

    A logika mellett az alkalmazásomat Capybara segítségével átvizsgálom elfogadási tesztekkel, hogy megbizonyosodjon arról, hogy az alkalmazás összes funkciója megfelelően működik-e a felhasználói interakció szimulálásával. A szimulációs teszteim elősegítése érdekében kérésteszteket is használok annak ellenőrzésére, hogy minden kérés helyes választ ad-e.

    Ezt teszteltem a személyes alkalmazásaimban, mert ez teljes mértékben megfelel az igényeimnek. Nyilvánvaló, hogy a tesztelési szabványok személyenként és vállalatonként eltérőek lehetnek.

    A vezérlőket, a nézeteket és a drágaköveket nem említették, miért? Mint sok Rails fejlesztő elmondta, a vezérlőknek és a nézeteknek nem kell logikát tartalmazniuk. És egyetértek velük. Ebben az esetben nincs sok tesztelni. Véleményem szerint a felhasználói szimulációs tesztek elegendőek és hatékonyak a nézetek és a vezérlők számára. A drágaköveket már alkotóik tesztelték. Tehát úgy gondolom, hogy a szimulációs tesztek elegendőek a drágakövek megfelelő működésének biztosításához.

    Hogyan teszteltem

    Természetesen megpróbálom használni a TDD megközelítést, amikor csak lehetséges. Először írjon be egy tesztet, majd hajtsa végre a kódot. Ebben az esetben a fejlesztési folyamat simább lesz. De néha nem biztos abban, hogy a kész funkció hogyan fog kinézni, és milyen kimenetet várhat el. Lehet, hogy kísérletezik a kóddal, vagy csak különböző megvalósítási megoldásokat kipróbál. Tehát ezekben az esetekben az első tesztelés és a végrehajtás későbbi megközelítése nem igazán működik.

    A logika minden egyes eleme előtt (néha után, amint azt fentebb tárgyaltuk) előállítom egy önálló tesztet, azaz egységi tesztként. Annak biztosítása érdekében, hogy egy alkalmazás minden funkciója működjön, elfogadási (felhasználói szimulációs) teszteket írok a Capybara-val.

    Tesztkörnyezet beállítása

    Az első tesztek elkészítése előtt be kell állítanunk a tesztelési környezetet.

    Nyissa meg a Gemfile fájlt, és adja hozzá ezeket a drágaköveket a tesztcsoporthoz

    drágakő rspec-rails, '~> 3.6'
    gem 'factory_girl_rails'
    gem 'sínek-vezérlő-tesztelés'
    drágakő "fejetlen"
    drágakő 'capybara'
    gem 'poltergeist'
    gem 'database_cleaner'

    Mint fentebb tárgyaltuk, az rspec gem egy tesztelési keret, a factory_girl a mintaadatok hozzáadásához, a capybara a felhasználó és az alkalmazás közötti interakció szimulálásához, a poltergeist illesztőprogram pedig a JavaScript támogatását nyújtja a tesztekhez.

    Használhat egy másik illesztőprogramot is, amely támogatja a JavaScriptet, ha ezt könnyebb beállítani. Ha úgy dönt, hogy a poltergeist gyöngyszemet használja, telepítenie kell a PhantomJS-t. A PhantomJS telepítéséhez olvassa el a poltergeist dokumentumokat.

    fejetlen drágakő szükséges a fejetlen illesztőprogramok támogatásához. A poltergeist fejetlen sofőr, ezért van szükségünk erre a drágakőre. A sínek-vezérlő-tesztelő gyöngyszemekre lesz szükség, amikor a kéréseket és a válaszokat a kérelem-specifikációkkal teszteljük. Erről bővebben később.

    Az adatbázis_tisztító szükséges a teszt adatbázis megtisztításához olyan tesztek után, ahol a JavaScript futott. Általában a teszt adatbázis minden teszt után megtisztítja magát, de ha olyan funkciókat tesztel, amelyekben van bizonyos JavaScript, akkor az adatbázis nem tisztítja automatikusan. Ez a jövőben változhat, de abban az esetben, ha ennek az oktatóanyagnak a megírása után a JavaScripti teszteket végrehajtottuk, a teszt adatbázis nem kerül automatikusan megtisztításra. Ezért manuálisan kell konfigurálnunk a tesztkörnyezetet a teszt adatbázis minden Java-teszt után történő tisztításához. Konfiguráljuk, hogy mikor futtassa az adatbázis_tisztító drágakő egy pillanat alatt.

    Most, amikor ezeknek a drágaköveknek a célja le van fedve, telepítsük őket a következő futtatásával:

    csomag telepítése

    Az RSpec keret specifikációs könyvtárának inicializálásához futtassa az alábbiakat:

    sínek generálják az rspec: install

    Általában véve a spec egyetlen tesztet jelent az RSpec keretben. Ha elkészítjük a specifikációinkat, ez azt jelenti, hogy futtatjuk a teszteinket.

    Ha belépett az alkalmazáskönyvtárba, észre fog venni egy új könyvtárat, spec. Itt fogunk teszteket írni. Lehet, hogy észrevett egy teszt nevű könyvtárat is. Itt tárolják a teszteket, amikor alapértelmezett tesztelési konfigurációt használnak. Ezt a könyvtárat egyáltalán nem fogjuk használni. Ezt egyszerűen eltávolíthatja a c (x_X) b projektből.

    Mint fentebb említettük, be kell állítanunk az adatbázis_tisztítót a JavaScript-et tartalmazó tesztekhez. Nyissa meg a rails_helper.rb fájlt

    spec / rails_helper.rb

    Változtassa meg ezt a sort

    config.use_transactional_fixtures = true

    nak nek

    config.use_transactional_fixtures = false

    és alatta adja hozzá a következő kódot:

    Vettem ezt a kódrészletet ebből az oktatóanyagból.

    Az utolsó dolog, amit tennünk kell, hogy hozzáadjunk néhány konfigurációt. A rails_helper.rb fájl konfigurációjában adja hozzá a következő sorokat

    Lebontjuk a kódot egy kicsit.

    A szükséges módszerekkel fájlokat töltünk be az új hozzáadott drágakövekből, így az alábbiakban felsorolhatjuk a módszereiket.

    config.include Devise :: Test :: IntegrationHelpers, type:: feature

    Ez a konfiguráció lehetővé teszi számunkra, hogy kidolgozzuk a módszereket a capybara tesztekben. Hogyan jöttem fel ezzel a vonallal? A Devise docs-ban biztosították.

    config.include FactoryGirl :: Szintaxis :: Methods

    Ez a konfiguráció lehetővé teszi a factory_girl drágakő módszereinek használatát. Megint találtam ezt a konfigurációt a drágakő dokumentációjában.

    Capybara.javascript_driver =: poltergeist
    Capybara.server =: puma

    Ez a két konfiguráció szükséges ahhoz, hogy a capybara segítségével meg lehessen tesztelni a JavaScriptet. Először mindig olvassa el a dokumentációt, amikor valami olyat szeretne végrehajtani, amelyet nem tudott.

    Az az oka annak, hogy egyszerre, és nem fokozatosan, amikor egy adott problémával találkozunk, bemutattam neked a tesztelési drágaköveket és a konfigurációkat, egyértelmű képet adok neked, amit tesztelésem során használok. Most már visszatérhet ehhez a szakaszhoz, és egy helyen ellenőrizheti a konfigurációk többségét. Ahelyett, hogy az egyik helyről a másikra ugrálna, és olyan konfigurációjú drágaköveket rakna össze, mint például a puzzle-darabokat.

    Végezzük el a változtatásokat, és végül szennyezzük kezünket a tesztekkel.

    adj hozzá -A
    git activ -m "
    Állítsa be a tesztelési környezetet
    - Távolítsa el a tesztkönyvtárat
    - rspec-sínek, factory_girl_rails hozzáadása és konfigurálása,
      sínek-vezérlő-tesztelés, fej nélküli, capybara, poltergeist,
      adatbázis_tisztító drágakövek "

    Segéd specifikációk

    Az egyes műszaki leírások (tesztek) típusairól általános információkat találhat az rspec dokumentumok és a gem dokumentumok elolvasásával. Mindkettő nagyon hasonló, de különbségeket találhat egymás között.

    Hozzon létre és váltson egy új ágra:

    git checkout -b műszaki adatok

    Eddig csak egy segítő módszert hoztunk létre. Próbáljuk ki.

    Keresse meg az anhttps speciális könyvtárat: //gist.github.com/domagude/3c42ba6ccf31bf1c50588c59277a9146#file-navigation_helper_spec-rbd, hozzon létre egy új helper nevű könyvtárat.

    spec / segítők

    A könyvtárban hozzon létre egy új fájlt a navigációs_helper_spec.rb fájlból

    spec / segítők / navigation_helper_spec.rb

    A fájl belsejébe írja be a következő kódot:

    A 'rails_helper' megköveteli a hozzáférést az összes tesztelési konfigurációhoz és módszerhez. : type =>: a helper tesztjeinket segítő specifikációkként kezeli, és specifikus módszereket biztosít nekünk.

    Így kell kinéznie a navigációs_helper_spec.rb fájl, ha az összecsukható_links_részes_út módszer kerül tesztelésre.

    Ha többet szeretne megtudni a kontextusról és arról, olvassa el az alapvető szerkezeti dokumentumokat. Itt két esetet tesztelünk - amikor a felhasználó be van jelentkezve, és amikor a felhasználó nincs bejelentkezve. A bejelentkezett és a be nem jelentkező felhasználó minden összefüggésében horgok előtt állunk. A megfelelő kontextuson belül ezek a horgok (módszerek) minden egyes tesztünk előtt futnak. Esetünkben minden egyes teszt előtt futtatjuk a stub módszert, tehát a user_signed_in? bármilyen értéket visszaad, amit mondunk neki, hogy visszatérjen.

    És végül, a várható módszerrel ellenőrizzük, hogy amikor az collapsible_links_partial_path módszert hívjuk, megkapjuk a várt hozamot.

    Az összes teszt futtatásához egyszerűen futtassa:

    rspec spec

    A navigációs_helper_spec.rb fájl speciális futtatásához futtassa:

    rspec spec / helpers / navigation_helper_spec.rb

    Ha a teszteket letették, akkor a kimenetnek hasonlónak kell kinéznie:

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "Specifikációk hozzáadása a NavigationHelper összecsukható_links_partial_path módszeréhez"

    gyárak

    Ezután a tesztek elvégzéséhez szükségünk lesz néhány mintára. A factory_girl gem lehetőséget ad arra, hogy a mintaadatokat nagyon egyszerűen hozzáadjuk, amikor csak szükség van rá. Ezenkívül jó minőségű dokumentumokat is kínál, tehát az általános élményt kellemesen teszi. Az egyetlen tárgy, amelyet eddig alkalmazásunkkal létrehozhatunk, a Felhasználó. A felhasználói gyár meghatározásához hozzon létre egy gyári könyvtárat a speciális könyvtárban.

    spec / gyárak

    A gyárak könyvtárában hozzon létre egy új user.rb fájlt, és adja hozzá a következő kódot:

    Most a specifikációinkon belül könnyen létrehozhatunk új felhasználókat a teszt adatbázisban, amikor csak szükség van rájuk, a factory_girl gem módszereinek felhasználásával. A gyárak meghatározásának és használatának átfogó útmutatóját lásd a factory_girlgem dokumentumain.

    Meghatározott gyárunk, felhasználó, nagyon egyszerű. Meghatároztuk az értékeket, amelyek a felhasználóiobjektumok rendelkeznek. Szintén a szekvencia módszert alkalmaztuk. A dokumentumok elolvasásával láthatja, hogy minden további felhasználói rekordnál n érték növekszik egynel. Azaz. az első létrehozott felhasználó neve teszt0 lesz, a második teszt1 stb.

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "felhasználói gyár hozzáadása"

    Funkció specifikációk

    A funkcióspecifikációkba olyan kódot írunk, amely szimulálja a felhasználó interakcióját egy alkalmazással. A jellemző specifikációkat a capybara gem táplálja.

    Jó hír az, hogy mindent beállítottunk és készen állunk az első műszaki specifikációk írására. Teszteljük a bejelentkezési, kijelentkezési és regisztrációs funkciókat.

    A spec könyvtáron belül hozzon létre egy új könyvtárat, melynek neve a szolgáltatások.

    spec / jellemzők

    A Jellemzők könyvtárban hozzon létre egy másik felhasználói nevű könyvtárat.

    spec / funkciók / felhasználó

    Hozzon létre egy új fájlt a felhasználói könyvtárban a login_spec.rb néven

    spec / funkciók / user / login_spec.rb

    Így néz ki a bejelentkezési teszt:

    Ezzel a kóddal szimuláljuk a belépési oldal látogatását, kezdve a kezdőlapról. Ezután kitölti az űrlapot és benyújtja azt. Végül megvizsgáljuk, hogy van-e a # felhasználói beállítás elem a navigációs sávon, amely csak a bejelentkezett felhasználók számára érhető el.

    funkció és forgatókönyv a Capybara szintaxisának része. a szolgáltatás ugyanaz, mint a kontextus / leírás, és a forgatókönyv ugyanaz, mint ő. További információ a Capybara dokumentumaiban található, A Capybara használata az Rspec segítségével.

    Hagyjuk a metódust lehetővé, hogy memorizált módszereket írjunk, amelyeket az összes specifikációban felhasználhatunk a kontextusban, a metódust meghatároztuk.

    Itt használjuk a létrehozott felhasználói gyárat és a létrehozási módszert is, amelyet a factory_girl gyöngyszeme tartalmaz.

    js: a valódi argumentum lehetővé teszi a JavaScriptet is magában foglaló funkciók tesztelését.

    Mint mindig, ellenőrizze, hogy egy teszt sikeres-e, futtasson egy adott fájlt. Ebben az esetben ez a login_spec.rb fájl:

    rspec spec / Features / user / login_spec.rb

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "bejelentkezési funkció specifikációk hozzáadása"

    Most kipróbálhatjuk a kijelentkezés funkciót. Hozzon létre egy új fájlt a felhasználói könyvtárban a logout_spec.rb néven

    spec / funkciók / user / logout_spec.rb

    A végrehajtott tesztnek így kell kinéznie:

    A kód szimulálja a felhasználót, amikor rákattint a kijelentkezés gombra, majd azt várja, hogy a navigációs sávon megjelenjen a nem bejelentkezett felhasználó linkei.

    A sign_in módszer az egyik a Devise helper módszer. Ezeket a segítő módszereket már a rails_helper.rb fájlba belefoglaltuk.

    Futtassa a fájlt, és ellenőrizze, hogy a teszt sikeres-e.

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "kijelentkezés jellemzői"

    Az utolsó funkció, hogy új fiókot regisztrálhatunk. Próbáljuk ki. A felhasználói könyvtárban hozzon létre egy új, sign_up_spec.rb nevű fájlt. Így kell kinéznie a teszttel rendelkező fájlban:

    Szimulálunk egy felhasználót, amely a regisztrációs oldalra navigál, kitölti az űrlapot, benyújtja az űrlapot, és végül várhatóan látni fogja a # felhasználói beállítások elemét, amely csak a bejelentkezett felhasználók számára érhető el.

    Itt a Devise's build módszerét használjuk a létrehozás helyett. Ily módon új objektumot hozunk létre anélkül, hogy elmentenénk az adatbázisba.

    Futtathatjuk a teljes tesztkészletet, és megnézhetjük, hogy az összes teszt sikeres-e.

    rspec spec

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "regisztrációs szolgáltatások hozzáadása specifikációk"

    Elkészültünk az első tesztekkel. Tehát egyesítsük a műszaki ágot a mesterrel.

    Git pénztár mester
    git merge specs

    A műszaki ágnak már nincs szüksége. Törölje q__o.

    git ág -D specifikációk

    Fő takarmány

    A kezdőlapon létrehozunk egy üzenetcsatornát. Ez a hírcsatorna megjeleníti az összes üzenetfajtát kártya formátumban.

    Kezdje egy új ág létrehozásával:

    git checkout -b main_feed

    Generáljon új, Post nevű modellt.

    sínek g modelloszlop

    Akkor szükségünk lesz egy kategóriamodellre a hozzászólások kategorizálásához:

    sínek g modellkategória

    Hozzunk létre néhány társulást a Felhasználó, a Kategória és a Postmodellek között.

    Minden bejegyzés egy kategóriához és annak szerzőjéhez (felhasználójához) tartozik. Nyissa meg a modellek fájljait, és adja hozzá az egyesítéseket.

    osztály Post 
    osztály Felhasználó 
    osztály Kategória 

    A függõ:: tönkre argumentum azt mondja, hogy ha egy felhasználót törölnek, akkor az összes hozzászólás, amelyet a felhasználó létrehozott, szintén törölõdik.

    Most meg kell határoznunk az adatoszlopokat és az asszociációkat a migrációs fájlokban.

    Most futtassa az áttelepítési fájlokat:

    sínek db: vándorolnak

    Változtassa meg a változtatásokat:

    adj hozzá -A
    git activ -m "
    - Hozzon létre postai és kategóriás modelleket.
    - Hozzon létre társulásokat a felhasználói, a feladási és a kategóriás modellek között.
    - Hozzon létre kategóriákat és hozzászólás-adatbázis táblákat. "

    Specifikációk

    Kipróbálhatjuk az újonnan létrehozott modelleket. Később mintákra lesz szükségünk a tesztekhez. Mivel egy hozzászólás egy kategóriához tartozik, mintákra is szükségünk van a kategóriákhoz az egyesítések létrehozásához.

    Hozzon létre egy kategóriás gyárat a gyárak könyvtárában.

    spec / gyárak / categories.rb

    Hozzon létre egy postai gyárat a gyárak könyvtárában

    spec / gyárak / posts.rb

    Mint látja, nagyon könnyű gyülekezetek létrehozása. Csak annyit kellett tennünk, hogy felhasználói és kategóriájú társulásokat hozzunk létre a postaüzem számára, hogy a gyárak nevét írjuk a postaüzembe.

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "Hozzászólás- és kategóriás gyárak hozzáadása"

    Jelenleg csak az asszociációkat teszteljük, mert ez az egyetlen, amit a modellekben még írtunk.

    Nyissa meg a post_spec.rb fájlt

    spec / modellek / post_spec.rb

    Adjon hozzá specifikációkat az egyesítésekhez, így a fájlnak így kell kinéznie:

    A leírt_osztály metódust használva kapjuk meg az aktuális környezet osztályát. Ami ebben az esetben alapvetően ugyanaz, mint a Posta írása. Ezután a refle_on_association metódust használjuk annak ellenőrzésére, hogy a helyes asszociációt eredményez-e.

    Ugyanezt tegye más modellek esetén is.

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "Specifikációk hozzáadása a felhasználói, kategóriák, modellek utáni társulásokhoz"

    Kezdőlap elrendezése

    Jelenleg a honlapon nincs semmi, csak a „Kezdőlap” dummy szöveg található. Ideje létrehozni az elrendezést a bootstrap segítségével. Nyissa meg a kezdőlap nézet fájl nézeteit / oldalak / index.html.erb fájlt, és cserélje le a fájl tartalmát a következő kóddal az oldal elrendezésének létrehozásához:

    Most adjon hozzá néhány CSS-t az elemek stílusának és reagáló viselkedésének meghatározásához.

    A stíluslapok / partíciók könyvtárában hozzon létre egy új home_page.scss fájlt

    eszközök / stíluslapok / felhangok / home_page.scss

    A fájlba adja hozzá a következő CSS-t:

    A mobile.scss fájl maximális szélességén belül: 767px médiakeresés hozzáadása:

    Most a kezdőlapnak így kell kinéznie a nagyobb képernyőkön

    és így a kisebb képernyőkön

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "
    - Adja hozzá a bootstrap elrendezést a kezdőlaphoz
    - Adjon hozzá CSS-t a kezdőlap-elrendezés stílusos és reagáló tervezési változásainak végrehajtásához "

    Magok

    A hozzászólások megjelenítéséhez a kezdőlapon először be kell tartanunk őket az adatbázisba. Az adatok manuális létrehozása unalmas és időigényes. A folyamat automatizálásához magvakat használunk. Nyissa meg a seeds.rb fájlt.

    db / seeds.rb

    Adja hozzá a következő kódot:

    Mint látja, létrehozunk seed_users, seed_categories és seed_posts metódusokat felhasználói, kategória és postai rekordok létrehozásához a fejlesztési adatbázisban. A hamis drágakövet szintén dummy szöveg generálására használják. Adjon hozzá hamis drágakövet a Gemfile-hez

    drágakő

    és

    csomag telepítése

    Az adatok vetéséhez a seeds.rb fájl segítségével futtasson egy parancsot

    sínek db: vetőmag

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "
    - Adjon hozzá hamis drágakövet
    - A seeds.rb fájlban hozzon létre módszereket a generálásra
      Felhasználói, kategóriák és postai nyilvántartások a fejlesztési adatbázisban "

    A hozzászólások rendezése

    A hozzászólások megjelenítéséhez a nézetekben szükségünk lesz egy hozzászólás-könyvtárra.

    Generáljon egy új vezérlőt, az úgynevezett Hozzászólások néven, így automatikusan létrehoz egy postkönyvtárat a nézetekben is.

    sínek g vezérlőoszlopok

    Mivel alkalmazásunkban a PagesController felelős a kezdőlapért, lekérdeznünk kell az pages_controller.rb fájl indexműveletén belüli adatokat. Az indexműveletben keressen néhány rekordot a hozzászólások táblázatából. Rendelje hozzá a visszakeresett rekordokat egy példányváltozóhoz, így a visszakeresett objektumok a kezdőlap nézetein belül elérhetőek lesznek.

    • Ha nem ismeri a rubinváltozókat, olvassa el ezt az útmutatót.
    • Ha nem ismeri a rekordoknak a Rails adatbázisból történő letöltését, olvassa el az Active Record Query Interface útmutatóját.

    Az indexműveletnek most úgy kell kinéznie:

    Keresse meg a kezdőlap sablonját

    megtekintés / pages / index.html.erb

    és a .main-content elem belsejében adja hozzá

    <% = render @posts%>

    Ezzel az összes üzenet megjelenik, amelyet az indexművelet során kerestek be. Mivel a postai objektumok a Post osztályba tartoznak, a Rails automatikusan megpróbálja megjeleníteni a található _post.html.erb részleges sablont

    megtekintés / hozzászólások / _post.html.erb

    Még nem hoztuk létre ezt a részleges fájlt, ezért hozzuk létre, és tegyük bele a következő kódot:

    Itt használtam egy bootstrap kártya komponenst a kívánt stílus elérése érdekében. Aztán csak a postai tartalmat és annak útját tároltam az elem belsejében. Hozzáadtam egy linket is, amely a teljes bejegyzéshez vezet.

    Eddig nem határoztuk meg a postai útvonalakat. Most szükségünk van rájuk, szóval deklaráljuk őket. Nyissa meg az route.rb fájlt, és adja hozzá a következő kódot az útvonalak belsejébe:

    Itt egy erőforrás-módszert használtam az útvonalak deklarálására, megjelenítésére, új létrehozására, szerkesztésére, létrehozására, frissítésére és megsemmisítésére. Aztán bejelentettem néhány egyedi gyűjtési útvonalat, amelyekkel több postai példányt tartalmazó oldalakhoz juthat. Ezeket az oldalakat külön ágaknak fogják szentelni, később készítjük őket.

    Indítsa újra a szervert, és lépjen a http: // localhost: 3000 webhelyre. A megjelenített üzeneteket látnia kell a képernyőn. Az alkalmazásnak hasonlónak kell kinéznie:

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "A hozzászólások megjelenítése a kezdőlapon
    - Generálja a hozzászólások vezérlőt, és hozzon létre egy indexműveletet.
      Az indexműveletben keresse meg a Post rekordokat
    - Jelentse be az állások útvonalait
    - Hozzon létre egy _post.html.erb részleges belső üzenetmappát
    - Megjegyzéseket jelenít meg a kezdőlap fő tartalmán belül "

    A hozzászólások stílusának elindításához hozzon létre egy új scss fájlt a partíciók könyvtárában:

    eszközök / stíluslapok / felhangok / posts.scss

    és a fájl belsejében adja hozzá a következő CSS-t:

    A honlapnak hasonlónak kell kinéznie:

    Vállalja a változást.

    adj hozzá -A
    git activ -m "Hozzon létre egy posts.scss fájlt, és adjon hozzá CSS-t"

    Stílus a JavaScript használatával

    Jelenleg a weboldal kialakítása elég unalmas. A kontraszt megteremtése érdekében a hozzászólásokat színezzük. Ahelyett, hogy csak a CSS-sel festenénk, színezzük őket különböző színmintákkal, minden alkalommal, amikor a felhasználó frissíti a weboldalt. Ehhez a JavaScriptet fogjuk használni. Ez valószínűleg ostoba ötlet, de szórakoztató c (o_u)?

    Keresse meg a javascripts könyvtárat az eszközökön belül, és hozzon létre egy új könyvtárat, az úgynevezett hozzászólásokat. A könyvtárban hozzon létre egy új fájlt, a style.js nevű fájlt. Szükség esetén törölheti az alapértelmezés szerint létrehozott .coffe fájlokat is a javascripts könyvtárból. Ebben az oktatóanyagban nem használjuk a Coffeecriptet.

    eszközök / JavaScriptek / hozzászólások / style.js

    A style.js fájlban adja hozzá a következő kódot.

    Ezzel a kódrészlettel véletlenszerűen állíthatjuk be a két stílusmód egyikét, amikor egy böngésző frissítésre kerül, attribútumok hozzáadásával a hozzászólásokhoz. Az egyik stílus csak színes szegéllyel rendelkezik, egy másik stílus egyszínű hozzászólásokkal rendelkezik. Minden oldalváltással és a böngésző frissítésével véletlenszerűen is újrafestettük a hozzászólásokat. A randomColorSet () függvényen előre meghatározott színsémákat láthat.

    A jövőben szükség lesz az egércentrikus és a mouseleave eseménykezelőkre bizonyos oldalak bejegyzéséhez. Vannak a bejegyzések stílusa, amely eltér a kezdőlapon szereplő üzenetek stílusától. Ha az egeret egy bejegyzésre mozgatja, az kissé megváltoztatja az alsó szegély színét. Ezt később meglátod.

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "Hozzon létre egy style.js fájlt, és adjon hozzá js-et a hozzászólások stílusának létrehozásához"

    A stílus kiegészítéséhez adjon hozzá néhány CSS-t. Nyissa meg a posts.scss fájlt

    eszközök / stíluslapok / felhangok / posts.scss

    és adja hozzá a következő CSS-t:

    A mobile.scss oldalán is adja hozzá a következő kódot a túl nagy szöveges problémák kijavításához a kisebb képernyőkön:

    A honlapnak most hasonlónak kell lennie:

    Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "CSS hozzáadása a kezdőlap bejegyzéseihez
    - adjon hozzá CSS-t a posts.scss fájlhoz
    - adjon hozzá CSS-t a mobile.scss fájlhoz a túl nagy szöveges problémák kijavításához a kisebb képernyőkön "

    Modális ablak

    Szeretnék rákattintani egy üzenetre és látni annak teljes tartalmát anélkül, hogy egy másik oldalra lépnék. Ennek a funkciónak a eléréséhez a bootstrap modális összetevőjét fogom használni.

    A hozzászólások könyvtárában hozzon létre egy új, _modal.html.erb részleges fájlt

    megtekintés / hozzászólások / _modal.html.erb

    és adja hozzá a következő kódot:

    Ez csak egy kissé módosított bootstrap összetevő ennek a feladatnak a végrehajtásához.

    Ezt a részletet a kezdőlap sablonjának tetején jelenítse meg.

    Ahhoz, hogy ezt a modális ablakot működőképessé tegyük, hozzá kell adnunk némi JavaScriptet. A hozzászólások könyvtárában hozzon létre egy új modal.js fájlt

    eszközök / JavaScriptek / hozzászólások / modal.js

    A fájl belsejében adja hozzá a következő kódot:

    Ezzel a js kóddal egyszerűen csak a kiválasztott üzenet adatait tároljuk a változókba, és ezekkel az adatokkal kitöltjük a modális ablak elemeit. Végül az utolsó kódsorral láthatóvá tesszük a modális ablakot.

    A modális ablak kinézetének javítása érdekében adjon hozzá néhány CSS-t. De mielőtt hozzáadnánk a CSS-t, tegyünk egy gyors kezelési feladatot a stíluslapok könyvtárában.

    A partíciók könyvtárában hozzon létre egy új könyvtárat, az úgynevezett hozzászólásokat

    eszközök / stíluslapok / felhangok / üzenete

    A hozzászólások könyvtárában hozzon létre egy új home_page.scss fájlt. Vágja ki az összes kódot a posts.scss fájlból, és illessze be a home_page.scss fájlba. Törölje a posts.scssfile fájlt. Ezt a CSS-kód jobb kezelése érdekében csináljuk. Világosabb, ha kevés kisebb, megkülönböztethető célú CSS-fájl van, nem pedig egy nagy fájl, ahol mindent összekevernek.

    A hozzászólások könyvtárában is hozzon létre egy új modal.scss fájlt, és adja hozzá a következő CSS-t:

    Most, amikor rákattintunk a hozzászólásra, az alkalmazásnak így kell kinéznie:

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "Felugró ablak hozzáadása a teljes üzenet tartalmának megjelenítéséhez
    - Adja hozzá a bootstrap modális összetevőjét a teljes üzenet tartalmának megjelenítéséhez
    - Változtassa meg a modult a kezdőlap sablonjában
    - Adjon hozzá js-t, hogy kitöltse a modult a postai tartalommal, és mutassa meg
    - CSS hozzáadása a modál stílusához "

    Egyesítse a main_feed ágot a masterrel is

    Git pénztár mester
    git merge main_feed

    Megszabaduljon a main_feed ágaktól

    git ág -D main_feed

    Egyetlen üzenet

    Váltás egy új ágra

    git checkout -b single_post

    Egyetlen üzenet megjelenítése

    Ha megpróbálja kattintani az Érdeklődés gombra, akkor hibaüzenetet fog kapni. Nem hoztuk létre a show.html.erb sablont, és nem hoztuk létre a megfelelő vezérlő műveletét. A gombra kattintva azt akarom, hogy átirányítsam a kiválasztott üzenet oldalára.

    A PostsController-ben hozzon létre egy show műveletet, majd kérdezzen meg és tároljon egy adott post objektumot egy példányváltozón belül:

    Érdekel, hogy a gomb átirányítja a kiválasztott üzenetre. Ez egy href attribútummal rendelkezik, amelyhez egy hozzászóláshoz vezető út tartozik. A posta megszerzéséhez szükséges GET kérés elküldésével a rails meghívja a show akciót. A show-akción belül hozzáférhetünk az id param-hez, mert egy GET-kérés elküldésével egy adott hozzászólás megadására megadtuk az azonosítóját. Azaz. az / posts / 1 elérési útjára lépve kérést küldünk egy 1-es üzenet megszerzésére.

    Hozzon létre egy show.html.erb sablont a hozzászólások könyvtárában

    megtekintés / hozzászólások / show.html.erb

    A fájl belsejében adja hozzá a következő kódot:

    Hozzon létre egy show.scss fájlt a hozzászólások könyvtárában, és adja hozzá a CSS-t az oldal megjelenésének stílusához:

    Itt az oldal magasságát 100vh-50px értékre definiáltam, tehát az oldal tartalma a nézetablak teljes magassága. Ez lehetővé teszi, hogy a tartály fehér színű legyen a böngésző teljes magasságában, függetlenül attól, hogy elegendő-e az elem belsejében tartalom vagy sem. A vh tulajdonság a nézetablak magasságát jelenti, tehát a 100vh érték azt jelenti, hogy az elem a nézetablak magasságának 100% -a meg van nyújtva. 100vh-50px szükséges a navigációs sáv magasságának kivonásához, különben a tartályt 50x-rel túl feszítik.

    Ha rákattint az érdeklődés gombra most, akkor átirányít egy olyan oldalra, amely hasonló a következőhöz:

    Kiegészítő funkciókat később hozzáadunk a show.html.erb sablonhoz. Most vállalja el a változtatásokat.

    adj hozzá -A
    git activ -m "Hozzon létre egy show sablont a hozzászólásokhoz
    - Adjon hozzá egy show műveletet, és kérjen be egy bejegyzést egy példányváltozóhoz
    - Hozzon létre egy show.scss fájlt és adjon hozzá CSS-t "

    Specifikációk

    Ahelyett, hogy manuálisan ellenőriznénk, hogy ez a funkció, a modális ablak megjelenése és a kiválasztott üzenetre való átirányítás működik-e, tekerje be az összes műszaki leírást. A capybara-t fogjuk használni, hogy szimuláljuk a felhasználó és az alkalmazás közötti interakciót.

    A szolgáltatások könyvtárában hozzon létre egy új könyvtárat, nevű hozzászólásokat

    spec / funkciók / üzenete

    Az új könyvtáron belül hozzon létre egy új fájlt a visit_single_post_spec.rb

    spec / funkciók / hozzászólások / visit_single_post_spec.rb

    És adjon hozzá egy funkciós specifikációt. A fájl így néz ki:

    Itt határoztam meg az összes lépést, amelyet manuálisan hajtanék végre. Először a kezdőlapra jutok, rákattintom a bejegyzésre, várom, hogy megnézem a felbukkanó modális ablakot, rákattintom az Érdeklődés gombra, és végül arra számítok, hogy átirányítom a bejegyzés oldalára, és megnézem annak tartalmát.

    Alapértelmezés szerint az RSpec illesztőprogramok have_selector, have_css stb. Értéke true, ha az elem valóban látható a felhasználó számára. Tehát miután rákattintottak egy üzenetre, a tesztelési keret elvár egy látható modális ablakot. Ha nem érdekli, hogy a felhasználó lát-e egy elemet, vagy sem, és csak egy elem jelenlétéről gondoskodik a DOM-ban, akkor adjon meg egy további látható: hamis érvet.

    Próbáld meg futtatni a tesztet

    rspec spec / Features / posts / visit_single_post_spec.rb

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "Adjunk hozzá egy speciális specifikációt, hogy teszteljék, hogy a felhasználó mehet-e a
    egyetlen üzenet a kezdőlapról "

    Egyesítse az single_post ágot a mesterrel.

    Git pénztár mester
    git merge single_post
    git ág - D single_post

    Különleges ágak

    Minden hozzászólás egy adott ághoz tartozik. Hozzunk létre külön oldalakat a különféle ágakhoz.

    Váltás egy új ágra

    git checkout -b specifikus_kötések

    A kezdőlap oldalsó menüje

    Kezdje a kezdőlap oldalmenüjének frissítésével. Adjon hozzá hivatkozásokat az egyes ágakhoz. Nyissa meg az index.html.erb fájlt:

    megtekintés / pages / index.html.erb

    Néhány linket felteszünk a # oldalmenü elembe. Ossza fel a fájl tartalmát partíciókra, különben nagyon gyorsan zajos lesz.
    Vágja ki a # oldalmenüt és a # főtartalmi elemeket, és illessze be őket külön részleges fájlokba. Az oldalak könyvtárában hozzon létre egy index könyvtárat, a könyvtár belsejében pedig hozzon létre az elemekhez tartozó részleges fájlokat. A fájloknak így kell kinézniük:

    Rendeld el ezeket a részleges fájlokat a kezdőlap sablonjában. A fájlnak így kell kinéznie:

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "A honlaplap sablonjának részre bontása"

    A _side_menu.html.erb részlegesen adja hozzá a linkek listáját, így a fájlnak így kell kinéznie:

    Rendezetlen lista került hozzáadásra. A listán belül egy újabb részletet mutatunk be linkekkel. Ezek a linkek minden felhasználó számára elérhetők lesznek, függetlenül attól, hogy be vannak-e jelentkezve vagy sem. Hozza létre ezt a részleges fájlt, és adja hozzá a hivatkozásokat.

    Az indexkönyvtárban hozzon létre egy side_menu könyvtárat:

    megtekintés / pages / index / side_menu

    A könyvtárban hozzon létre egy _no_login_required_links.html.erb részleges képet a következő kóddal:

    Itt egyszerűen csak hivatkozásokat adott hozzá a hozzászólások egyes ágainak. Ha kíváncsi, hogy vannak elérési utak, mint például a hobby_posts_path stb., Akkor nézd meg a route.rbfile fájlt. Korábban beágyazott gyűjtési útvonalakat adtunk hozzá az erőforrásokhoz: a bejelentés utáni bejegyzés.

    Ha figyelni fog az i elemek attribútumaira, észre fog venni a fa osztályokat. Ezekkel az osztályokkal kijelentjük, hogy a Font félelmetes ikonok. Még nem állítottuk be ezt a könyvtárat. Szerencsére nagyon könnyű beállítani. A fő alkalmazás.html.erb fájl fej elemén belül adja hozzá a következő sort

    Az oldalmenünek jelen kell lennie.

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "Linkek hozzáadása a kezdőlap oldalmenüjéhez"

    Kisebb képernyőkön, ahol a szélesség 767px és 1000px között van, a bootstrap tartálya kellemetlennek tűnik, túl tömörítettnek tűnik. Tehát nyújtsa be azok között a szélességek között. A mobile.scss fájl belsejében adja hozzá a következő kódot:

    Vállalja a változást.

    adj hozzá -A
    git activ -m "beállítva .tartály szélessége 100%
    ha a nézetablak szélessége 767px és 1000px között van "

    Ágazat

    Ha megpróbál rákattintani az egyik oldalsó menü linkre, hibaüzenetet kap. Nem állítottunk be tevékenységeket a PostsController belsejében, és nem hozott létre sablonokat sem.

    A PostsController-en belül határozza meg a hobbi, a tanulás és a csapat tevékenységeit.

    Minden műveletben meghívjuk a posts_for_branch metódust. Ez a módszer az adott oldal adatait adja vissza, a művelet nevétől függően. Határozza meg a módszert a magántulajdonban.

    A @categories példányváltozóban lekérdezzük az összes ág összes kategóriáját. Azaz. Ha belép a hobbiágazat oldalára, akkor a hobbiágazathoz tartozó összes kategóriát lekérdezi.

    A posták @posts példányváltozón belüli megszerzéséhez és tárolásához a get_posts metódust használják, majd paginate módszerrel láncolják. paginate módszer származik will_paginate gem. Kezdjük a get_posts módszer meghatározásával. A PostsController magántulajdonában tegye a következőket:

    Jelenleg a get_posts módszer csak lekérdezi az összes 30 hozzászólást, amelyek nem specifikusak semmire, így továbbléphetünk és a továbbfejlesztésre összpontosíthatunk. A közeljövőben visszatérünk ehhez a módszerhez.

    Adja hozzá a will_paginate gyöngyszemét a lapozás használatához.

    gem 'will_paginate', '~> 3.1.0'

    fuss

    csomag telepítése

    Most csak a sablonok hiányoznak. Az összes ághoz hasonlóak lesznek, tehát a kód megismétlése helyett az említett ágak mindegyikében hozzon létre egy részletet az ág általános szerkezetével. A hozzászólások könyvtárában hozzon létre egy _branch.html.erb fájlt.

    Először látja, hogy az oldal_cím változó kerül kinyomtatásra az oldalra. Ezt a változót argumentumként adjuk át, ha a _branch.html.erb részlegesvé válik. Ezután egy _create_new_post részlegesen jelenik meg egy link megjelenítéséhez, amely egy oldalhoz vezet, ahol a felhasználó új hozzászólást hozhat létre. Hozza létre ezt a részleges fájlt egy új fiókkönyvtárban:

    Itt a create_new_post_partial_path helper módszert használjuk annak meghatározására, hogy melyik részleges fájlt kell megjeleníteni. A posts_helper.rb fájlban hajtsa végre a következő módszert:

    Hozzon létre e két megfelelő partíciót egy új create_new_postdirectoryban is:

    Ezután a _branch.html.erb fájlban soroljuk fel a kategóriák listáját. Hozzon létre egy _categories.html.erb részleges fájlt:

    A fájl belsejében van egy all_categories_button_partial_path helper módszer, amely meghatározza, mely részleges fájlt kell megjeleníteni. Definiálja ezt a módszert a posts_helper.rb fájlban:

    Az összes kategóriát alapértelmezés szerint választja ki. Ha a [: kategória] paraméterek üres, az azt jelenti, hogy a felhasználó egyetlen kategóriát sem választott ki, azaz az alapértelmezett érték jelenleg mindenki van kiválasztva. Hozza létre a megfelelő részleges fájlokat:

    A küldési módszert itt használjuk egy módszer hívására egy karakterlánccal, ez lehetővé teszi a rugalmasságot és a dinamikus hívási módszereket. Esetünkben különböző útvonalakat generálunk, az aktuális vezérlő tevékenységétől függően.

    Ezután az _branch.html.erb fájlban hozzászólásokat jelenítünk meg, és meghívjuk a no_posts_partial_path helper módszert. Ha nem találnak hozzászólásokat, akkor a módszer üzenet jelenik meg.

    A posts_helper.rb belsejében adja hozzá a helper módszert:

    Itt háromszeres operátort használok, tehát a kód kissé tisztábbnak tűnik. Ha vannak üzenetek, nem akarok üzeneteket megjeleníteni. Mivel nem adhat meg egy üres karakterláncot a render módszerhez, inkább egy üres rész felé haladok egy utat, olyan esetekben, amikor nem akarok valamit megjeleníteni.

    Hozzon létre egy megosztott könyvtárat a nézetekben, majd hozzon létre egy üres részletet:

    views / shared / _empty_partial.html.erb

    Most hozzon létre egy _no_posts.html.erb részletet az üzenethez a fiókkönyvtárban.

    Végül a will_paginate módszert használjuk a gem-től az oszlopok több oldalra bontására, ha nagyon sok hozzászólás van.

    Készítsen sablonokat hobbi, tanulmányi és csoportos tevékenységekhez. Benne fogjuk létrehozni az _branch.html.erb részleges fájlt, és átadjuk a meghatározott helyi változókat.

    Ha ellátogat ezekre a fióktelepekre, lát valamit ilyesmit

    Ha görgetsz lefelé, látni fogod, hogy most megvan a paginációnk

    Nagyon sok munkát végeztünk ezen ágazati oldalak létrehozásán. Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "Ágalapok létrehozása az egyes hozzászólásokhoz
    - A PostsController-en belül meghatározza a hobbi, a tanulás és a csapat tevékenységeit.
      Definiáljon egy posts_for_branch metódust, és hívja be ezekbe a műveletekbe
    - Add will_paginate drágakő
    - Hozzon létre egy _branch.html.erb részleges fájlt
    - Hozzon létre egy _create_new_post.html.erb részleges fájlt
    - Adjon meg egy create_new_post_partial_path helper módszert
    - Hozzon létre egy _signa_in.html.erb részleges fájlt
    - Hozzon létre egy _not_signa_in.html.erb részleges fájlt
    - Hozzon létre egy _categories.html.erb részleges fájlt
    - Adjon meg egy all_categories_button_partial_path helper módszert
    - Hozzon létre egy _all_selected.html.erb részleges fájlt
    - Hozzon létre egy _all_not_selected.html.erb részleges fájlt
    - Adjon meg egy no_posts_partial_path helper módszert
    - Hozzon létre egy _no_posts.html.erb részleges fájlt
    - Hobby.html.erb sablonfájl létrehozása
    - Hozzon létre egy study.html.erb sablon fájlt
    - Hozzon létre egy team.html.erb sablon fájlt "

    Specifikációk

    Fedje le a segítő módszereket a műszaki adatokkal. A posts_helper_spec.rb fájlnak így kell kinéznie:

    A specifikációk itt meglehetősen egyszerűek. A stub módszerrel határoztam meg a módszer visszatérési értékeit. A paraméterek meghatározásához kiválasztottam a vezérlőt, és egyszerűen úgy definiáltam, mint ez a controller.params [: param_name]. És végül hozzárendelési módszerrel rendeltem meg a példányváltozókat.

    Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "Specifikációk hozzáadása a PostsHelper módszerekhez"

    Tervezési változások

    Ezeken az oldalágakon különböző hozzászólások kialakítását szeretnénk kialakítani. A honlapon van a kártyák tervezése. Az áglapokon készítsünk egy listatervet, így a felhasználó több üzenetet láthat, és hatékonyabban tallózhat rajta.

    A hozzászólások könyvtárában hozzon létre egy hozzászólási könyvtárat, amelynek belsejében egy _home_page.html.erbpartial található.

    hozzászólások / post / _home_page.html.erb

    Vágja le a _post.html.erb részleges tartalmát, és illessze be a _home_page.html.erb részleges fájlba. A _post.html.erb részleges fájl belsejében adja hozzá a következő kód sort:

    Itt hívjuk a post_format_partial_path helper módszert, hogy eldöntsük, melyik postatervezést kell megjeleníteni, az aktuális útvonaltól függően. Ha egy felhasználó a kezdőlapon van, akkor tegye közzé a kezdőlap üzenetét. Ha egy felhasználó az ágak oldalán tartózkodik, akkor tegye közzé az ágazat oldalát. Ezért vágjuk az _post.html.erb fájl tartalmát _home_page.html.erb fájlba.

    Hozzon létre egy új _branch_page.html.erb fájlt a postakönyvtárban, és illessze be ezt a kódot, hogy meghatározza a fióktelep tervét.

    Annak eldöntéséhez, hogy mely részleges fájlt kell megjeleníteni, határozza meg a post_format_partial_pathhelper metódust a posts_helper.rb fájlban

    A post_format_partial_path segítő módszer nem lesz elérhető a kezdőlapon, mert a hozzászólásokat a kezdőlap sablonján belül jelenítjük meg, amely egy másik vezérlőhöz tartozik. Ahhoz, hogy hozzáférjen ehhez a módszerhez, a kezdőlap sablonján belül helyezze el a PostsHelper alkalmazást az ApplicationHelper oldalán

    tartalmazzák a PostsHelper szolgáltatást

    Specifikációk

    Adjon hozzá specifikációkat a post_format_partial_path helper módszerhez:

    Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "Specifikációk hozzáadása a post_format_partial_path helper metódhoz"

    CSS

    Mutassa be a hozzászólások stílusát az űrlapokon a CSS segítségével. A hozzászólások könyvtárában hozzon létre egy új branch_page.scss stíluslap fájlt:

    Az alap / alapértelmezett.scss hozzáadása:

    A stílusproblémák kijavításához kisebb eszközökön az responsive / mobile.scss részben adja hozzá:

    A fióktelepeknek így kellene kinézniük:

    Változtassa meg a változtatásokat.

    adj hozzá -A
    "írja le a hozzászólások stílusát az ágoldalakon
    - Hozzon létre egy branch_page.scss fájlt és adjon hozzá CSS-t
    - Adjon hozzá CSS-t az default.scss fájlhoz
    - CSS hozzáadása a mobile.scss fájlhoz "

    Kereső sáv

    Szeretnénk, hogy ne csak a bejegyzéseket böngészhessük, hanem konkrétokat is keressünk. Az _branch.html.erb részleges fájl belsejében, a kategória sor fölé, a következőt kell hozzáadni:

    Hozzon létre egy _search_form.html.erb részleges fájlt az ágkönyvtárban, és adja hozzá a következő kódot:

    Itt a küldési módszerrel dinamikusan generálunk egy utat egy adott PostsController műveletéhez, az aktuális ágtól függően. Ezenkívül további adatmezőt küldünk a kategória számára, ha egy adott kategória van kiválasztva. Ha a felhasználó egy adott kategóriát választott, akkor csak a kategória keresési eredményei kerülnek visszaadásra.

    Határozza meg a category_field_partial_path helper módszert a posts_helper.rb belül

    Hozzon létre egy _category_field.html.erb részleges fájlt, és adja hozzá a kódot:

    Ha a keresési űrlapnak valamilyen stílust szeretne adni, adjon hozzá CSS-t a branch_page.scss fájlhoz:

    A fióktelepeken lévő keresési űrlapnak most így kell kinéznie

    Végezze el a változtatásokat

    adj hozzá -A
    "adj hozzá egy keresési űrlapot az ágoldalakhoz
    - Keresési űrlapot jelenít meg az _branch.html.erb fájlban
    - Hozzon létre egy _search_form.html.erb részleges fájlt
    - Adjon meg egy category_field_partial_path helper módszert a PostsHelper alkalmazásban
    - Hozzon létre egy _category_field.html.erb részleges fájlt
    - Adjon hozzá CSS-t a branch_page.scss keresési űrlaphoz "

    Jelenleg a forma nem igazán funkcionális. Használhatunk néhány drágakövet a keresési funkcionalitás eléréséhez, de az adataink nem bonyolultak, ezért létrehozhatunk saját egyszerű keresőmotort. A Post modellben szereplő hatóköröket használjuk a lekérdezések láncolhatóvá tételére és a vezérlő belsejében egy bizonyos feltételes logikára (a következő szakaszban kibontjuk a szolgáltatási objektumba, hogy a kód tisztább legyen).

    Kezdje a hatókörök meghatározásával a Post modellben. A bemelegítéshez definiálja az default_scope fájlt a post.rb fájlban. Ez a hozzászólásokat csökkenő sorrendben rendezi a létrehozás dátuma szerint, a legújabb hozzászólások a tetején vannak.

    Vállalja a változást

    adj hozzá -A
    git activ -m "Adjon meg egy alapértelmezett_könyvet a hozzászólásokhoz"

    Győződjön meg arról, hogy az default_scope helyesen működik-e, ha egy specifikációba csomagolja. A post_spec.rb fájlban adja hozzá:

    Vállalja a változást:

    adj hozzá -A
    git activ -m "Specifikáció hozzáadása a post modell alapértelmezett_scope-hoz"

    Most változtassuk meg a keresősávot. A posts_controller.r címen belül helyezze el a get_posts módszer tartalmát a következővel:

    Mint egy kicsit korábban említettem, a logika, csakúgy, mint a nézetekben, nem igazán jó hely a vezérlőkben. Meg akarjuk tisztítani őket. Tehát kibontjuk a logikát ebből a módszerből a következő részben.

    Mint látja, van bizonyos feltételes logika. A felhasználói kéréstől függően az adatok eltérően lekérdezésre kerülnek a hatókörök használatával.

    A Post modellben határozza meg ezeket a hatóköröket:

    A csatlakozási metódust a kapcsolódó táblák rekordjainak lekérdezésére használják. Az alap SQL szintaxist is használják a rekordok megtalálására, a megadott karakterláncok alapján.

    Most, ha újraindítja a szervert, és visszatér ezen ágak egyikére, a keresősávnak működnie kell! Most is szűrheti a hozzászólásokat a kategóriagombokra kattintva. És ha egy adott kategóriát is kiválaszt, akkor csak a kategória bejegyzését kérdezi le a keresési űrlap használatakor.

    Végezze el a változtatásokat

    adj hozzá -A
    "készítsen keresési sávot és kategóriát
    az áglapokban funkcionális
    - Adja hozzá a kategória, a szakterület és a keresési hatóköröket a Post modellbe
    - Módosítsa a get_posts módszert a PostsController alkalmazásban "

    Fedje le ezeket a hatóköröket specifikációkkal. A post_spec.rb fájl Scopes kontextusában adja hozzá:

    Végezze el a változtatásokat

    adj hozzá -A
    git szállít -m "Specifikációk hozzáadása a Post modellhez
    by_branch, by_category és keresési területek "

    Végtelen görgetés

    Ha ezen ágak bármelyikére belép, az oldal alján megjelenik a lapozás

    A következő linkre kattintva átirányít egy régebbi hozzászólásokkal rendelkező oldalra. Ahelyett, hogy átirányítanánk egy másik oldalra a régebbi bejegyzéseket, végtelen görgetési funkciókat tudunk létrehozni, hasonlóan a Facebook és a Twitter hírcsatornájához. Csak görgessen lefelé, bármiféle átirányítás és oldal újratöltés nélkül, a régebbi hozzászólások a lista aljára kerülnek. Meglepő módon nagyon könnyű elérni. Csak annyit kell tennünk, hogy írjunk némi JavaScriptet. Amikor a felhasználó eléri az oldal alját, AJAX kérést küld a következő oldal adatainak lekérésére, és ezeket az adatokat a lista aljára csatolják.

    Kezdje az AJAX kérés és annak feltételeinek konfigurálásával. Amikor a felhasználó átlép egy bizonyos küszöböt lefelé görgetve, az AJAX kérés elengedésre kerül. A javascripts / posts könyvtárban hozzon létre egy új infinite_scroll.js fájlt, és adja hozzá a kódot:

    Az isLoading változó biztosítja, hogy egyszerre csak egy kérést küldjenek el. Ha jelenleg van folyamatban egy kérés, akkor más kéréseket nem indítanak el.

    Először ellenőrizze, hogy van-e pagináció, van-e további beküldhető üzenet. Ezután kapjon linket a következő oldalra, innen származnak adatok. Ezután állítson be egy küszöböt az AJAX kérés hívásához, ebben az esetben a küszöbérték 60 képpont az ablak aljától. Végül, ha minden feltétel sikeresen teljesül, töltsön be adatokat a következő oldalról a getScript () függvény használatával.

    Mivel a getScript () függvény betölti a JavaScript fájlt, meg kell határoznunk, hogy melyik fájlt kell megjeleníteni a PostsController-en belül. A posts_for_branchmethod belül adja meg a válasz_ formátumokat és a megjelenítendő fájlokat.

    Amikor a vezérlő megpróbálja válaszolni a .js fájllal, akkor a theposts_pagination_pagetemplate megjelenik. Ez a részleges fájl az újonnan letöltött hozzászólásokat csatolja a listához. Hozza létre ezt a fájlt új hozzászólások hozzáadásához és a lapozó elem frissítéséhez.

    Hozzon létre egy update_pagination_partial_path helper módszert a posts_helper.rb fájlban

    Itt a will_paginate gem next_page módszerét alkalmazzák annak meghatározására, hogy van-e további hozzászólás a jövőben.

    Hozza létre a megfelelő részleges fájlokat:

    Ha bármelyik ágoldalra lép, és görgessen lefelé, a régebbi hozzászólásokat automatikusan csatolja a listához.

    Szintén nem kell többé látnunk a lapozás menüt, ezért rejtsük el a CSS segítségével. A branch_page.scss fájl belsejében adja hozzá:

    Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "A hozzászólások lapozása végtelen tekercssé alakítható
    - Hozzon létre egy végtelen_scroll.js fájlt
    - A PostController posts_for_branch módszerén belül adja hozzá a respon_to formátumot
    - Adjon meg egy update_pagination_partial_path értéket
    - _update_pagination.js.erb és _remove_pagination.js.erb partíciók létrehozása
    - elrejteni az .infinite-scroll elemet CSS-sel "

    Specifikációk

    Fedje le a update_pagination_partial_path helper módszert a specifikációkkal:

    Itt egy kettős teszttel szimuláltam a postai példányváltozót és annak láncolt módszerét a következő_oldalon. Itt találhat további információkat az RSpec Mocksról.

    Változtassa meg a változtatásokat:

    adj hozzá -A
    git activ -m "Specifikációk hozzáadása az update_pagination_partial_path fájlhoz
    helper módszer "

    Azt is írhatunk jellemzőket, hogy megbizonyosodjunk arról, hogy a hozzászólások sikeresen vannak-e csatolva, miután lefelé görgette őket. Hozzon létre egy végtelen_scroll_spec.rb fájlt:

    A specifikációs fájlban az összes ágoldal lefedésre kerül. Gondoskodunk arról, hogy ez a funkció mind a három oldalon működjön. A per_page will_paginate gem módszer. Itt a Feladás modellt választja ki, és az oldalanként beállítja az alapértelmezett hozzászólások számát.

    A check_posts_count módszer célja a fájl kódjának csökkentése. Ahelyett, hogy ugyanazt a kódot újra és újra megismételtük a különböző specifikációkban, kibontottuk azt egyetlen módszerre. Az oldal meglátogatása után várhatóan 15 üzenet jelenik meg. Ezután az execute_script metódust használják a JavaScript futtatásához, amely a görgetősávot a böngésző aljára görgeti. Végül, a görgetés után várhatóan további 15 hozzászólást fog látni. Most összesen 30 üzenetnek kell lennie az oldalon.

    Változtassa meg a változtatásokat:

    adj hozzá -A
    git activ -m "Jellemzők hozzáadása a hozzászólások végtelen görgetési funkcionalitásához"

    A honlap frissítése

    Jelenleg a honlapon csak néhány véletlenszerű üzenet látható. Módosítsa a kezdőlapot, hogy minden fiókból láthassunk néhány hozzászólást.

    Cserélje ki a _main_content.html.erb fájl tartalmát a következőre:

    Minden ághoz posztokat készítettünk hozzá.

    Definiálja a példányváltozókat a PagesController indexműveletében. A műveletnek így kell kinéznie:

    Van korábban a no_posts_partial_path helper módszer, de egy kicsit módosítanunk kell, és újrafelhasználhatóbbá kell tennünk. Jelenleg csak ágazati oldalakon működik. Adjon hozzá egy hozzászólási paramétert a módszerhez, így a következőképpen néz ki:

    Itt hozzáadták a hozzászólások paraméterét, a példányváltozót egyszerű változóra változtatták, és a részleges útvonalát is megváltoztatták. Tehát mozgassa a _no_posts.html.erbpartial fájlt a

    hozzászólások / ág / _no_posts.html.erb

    nak nek

    hozzászólások / shared / _no_posts.html.erb

    Az _branch.html.erb fájlban is továbbadja az @posts példányváltozót argumentumként a no_posts_partial_path módszerhez.

    Adjon hozzá néhány stílusváltozást. Az alapértelmezett.scss fájlban adja hozzá:

    És a home_page.scss belsejében adja hozzá:

    A honlapnak most hasonlónak kell lennie

    Végezze el a változtatásokat

    adj hozzá -A
    "Hozzászólások hozzáadása a kezdőlap minden ágához
    - Módosítsa a _main_content.html.erb fájlt
    - Adja meg a példányváltozókat a PagesController indexműveletében
    - Módosítsa a no_posts_partial_path helper módszert az újrafelhasználhatósá
    - CSS hozzáadása a kezdőlap stílusához "

    Szolgáltatási objektumok

    Mint már korábban említettem, ha logikát tesz a vezérlőkbe, akkor ezek nagyon könnyen bonyolulttá válnak és óriási fájdalmat tesztelnek. Ezért jó ötlet logikát kinyerni tőlük valahol másutt. Ehhez tervezési mintákat, szolgáltatási objektumokat (szolgáltatásokat) használok, hogy pontosabbak legyenek.

    Jelenleg a PostsController belsejében van ez a módszer:

    Nagyon sok feltételes logikája van, amelyet a szolgáltatások használatával szeretnék eltávolítani. A szolgáltatási objektumok (szolgáltatások) tervezési mintája csak egy alapvető rubin osztály. Ez nagyon egyszerű, csak olyan adatokat továbbítunk, amelyeket feldolgozni akarunk, és meghatározzunk egy meghatározott módszert a kívánt visszatérési érték eléréséhez.

    Rubinban továbbítjuk az adatokat az Class inicializálási módszerének, más nyelveken konstruktornak nevezzük. És akkor az osztályon belül csak létrehozunk egy módszert, amely kezeli az összes meghatározott logikát. Hozzuk létre ezt, és nézzük meg, hogyan néz ki ez a kódban.

    Az alkalmazáskönyvtáron belül hozzon létre egy új szolgáltatási könyvtárat:

    app / szolgáltatás

    Hozzon létre egy új posts_for_branch_service.rb fájlt a könyvtárban:

    A fent leírtak szerint itt csak egy egyszerű rubin osztály, a paraméterek elfogadására szolgáló inicializálási módszerrel és a logika kezelésére szolgáló hívási módszerrel. Ezt a logikát a get_posts módszerből vettük.

    Most egyszerűen hozzon létre egy új objektumot az osztályba, és hívja fel a hívásmódot a get_posts módszerben. A módszernek most így kell kinéznie:

    Változtassa meg a változtatásokat:

    adj hozzá -A
    git activ -m "Hozzon létre egy szolgáltatási objektumot a logika kibontásához
    a get_posts módszerből "

    Specifikációk

    A tervezési minták, mint például a szolgáltatások szerencsés dologja az, hogy könnyű ráírni az egységteszteket. Egyszerűen írhatunk specifikációkat a hívás módszerére és tesztelhetjük annak minden feltételét.

    A spec könyvtárban hozzon létre egy új szolgáltatási könyvtárat:

    spec / szolgáltatás

    A könyvtárban hozzon létre egy új fájlt a posts_for_branch_service_spec.rb

    A fájl tetejére betölti a posts_for_branch_service.rb fájlt, majd megvizsgálja a hívásmód feltételeit.

    Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "Specifikációk hozzáadása a PostsForBranchServicehez"

    Hozzon létre új bejegyzést

    Mostanáig a hozzászólásokat mesterségesen, magvak felhasználásával hozták létre. Adjunk hozzá egy felhasználói felületet ehhez, így a felhasználó hozzászólásokat hozhat létre.

    A posts_controller.rb fájlban új fájlokat adjon hozzá, és hozzon létre műveleteket.

    Az új műveletben meghatározunk néhány példányváltozót az űrlaphoz, új hozzászólások létrehozásához. A @categories példányváltozón belül egy adott ág kategóriái vannak tárolva. A @post példány változó egy új üzenet objektumát tárolja, erre szükség van a Rails űrlaphoz.

    Az Létrehozás művelet @post példány változóján belül létrehozunk egy új Postobject-et, és adatokkal kitölti a post_params módszerrel. Definiálja ezt a módszert magántulajdonban:

    Az engedélyezési módszert használják az objektum attribútumainak engedélyezésére, így csak ezek a megadott attribútumok továbbadhatók.

    A PostsController tetején is adja hozzá a következő sort:

    A before_action az egyik Rails szűrő. Nem akarjuk engedélyezni, hogy a nem bejelentkezett felhasználók hozzáférjenek egy oldalhoz, ahol új hozzászólásokat hozhatnak létre. Tehát az új művelet meghívása előtt meghívják a redirect_if_not_signed_in metódust. Szükségünk lesz erre a módszerre más vezérlők esetében is, tehát határozza meg az application_controller.rb fájlban. A bejelentkezett felhasználók átirányításának módszere szintén hasznos lehet a jövőben. Tehát határozza meg mindkettőt.

    Most új sablonra van szükség, így a felhasználó új hozzászólásokat hozhat létre. Hozzon létre egy új.html.erb fájlt a hozzászólások könyvtárában:

    Hozzon létre egy új könyvtárat és egy _post_form.html.erb részleges fájlt a következő belül:

    A forma elég egyértelmű. A mezők attribútumai meg vannak határozva, és a collection_select metódust használják az elérhető kategóriák egyikének kiválasztására.

    Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "Hozzon létre egy felhasználói felületet új hozzászólások létrehozásához
    - A PostsController belsejében:
      meghatározhat új és hozhat létre műveleteket
      definiálja a post_params metódust
      határozza meg a művelet előtti szűrőt
    - Az ApplicationController belsejében:
      definiáljon egy redirect_if_not_signed_in módszert
      definiálja a redirect_if_signa_in metódust
    - Új sablon létrehozása a hozzászólásokhoz "

    Kipróbálhatjuk, hogy az űrlap működik-e, specifikációk írásával. Kezdje azzal, hogy kérési specifikációkat ír meg, hogy megbizonyosodjon arról, hogy megfelelő válaszokat kapunk-e bizonyos kérések elküldése után. A spec könyvtárban hozzon létre egy pár könyvtárat.

    spec / kérések / üzenete

    És egy new_spec.rb fájl belül:

    A dokumentációban említettek szerint a kérési specifikációk vékony borítékot biztosítanak az integrációs tesztek körül. Tehát teszteljük, hogy bizonyos kérések küldésekor helyes választ kapunk-e. A Warden :: Test :: Helpers sorra van szükség a login_as módszer használatához. A módszer naplózza a felhasználót.

    Vállalja a változást.

    adj hozzá -A
    git activ -m "Új üzenetsablon kérési adatainak hozzáadása"

    Még néhány kérési specifikációt is hozzáadhatunk azokhoz az oldalakhoz, amelyeket korábban készítettünk.

    Ugyanazon könyvtáron belül hozzon létre egy branch_spec.rb fájlt:

    Így ellenőrizhetjük, hogy az összes áglap sablonja sikeresen megjelenik-e. A megosztott példák is felhasználhatók az ismétlődő kód csökkentésére.

    Vállalja a változást.

    adj hozzá -A
    git activ -m "Hozzászólási specifikációk hozzáadása a hozzászólások ágoldalainak sablonjaihoz"

    Biztosíthatjuk azt is, hogy a show sablon sikeresen megjelenjen. Ugyanazon könyvtáron belül hozzon létre egy show_spec.rb fájlt:

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "Kérési specifikációk hozzáadása a hozzászólások mutatósablonjához"

    Annak ellenőrzése érdekében, hogy a felhasználó képes-e új hozzászólást létrehozni, írjon a specifikációkat az űrlap teszteléséhez. A Features / posts könyvtáron belül hozzon létre egy új fájlt create_new_post_spec.rb

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "Create_new_post_spec.rb fájl létrehozása specifikációkkal"

    Vigyen fel némi mintát az új sablonra.

    A következő könyvtárban:

    eszközök / stíluslapok / felhangok / üzenete

    Hozzon létre egy új.scss fájlt:

    Ha most egy böngészőben megy a sablonhoz, akkor látnia kell az alapvető űrlapot

    Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "CSS hozzáadása a hozzászólásokhoz new.html.erb sablon"

    Végül azt szeretnénk ellenőrizni, hogy az összes mező kitöltése megfelelő-e. A Post modellben meghatározunk néhány érvényesítést. Adja hozzá a következő kódot a postmodellhez:

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "Érvényesítések hozzáadása a Post modellhez"

    Fedje le ezeket az érvényesítéseket specifikációkkal. Lépjen a modell speciális fájljába:

    spec / modellek / post_spec.rb

    Majd adjon hozzá:

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "Specifikációk hozzáadása a Post modell érvényesítéséhez"

    Egyesítse a specific_branches ágot a mesterrel

    git checkout -b mester
    git merge specific_branches
    git ág - D specifikus_kötések

    Azonnali üzenetküldés

    A felhasználók közzétehetnek és olvashatnak más felhasználók bejegyzéseit, de nem képesek kommunikálni egymással. Létrehozhatunk egy egyszerű postafiók-rendszert, amelyet sokkal könnyebben és gyorsabban lehet fejleszteni. De ez egy nagyon régi módszer valakivel való kommunikációra. A valós idejű kommunikáció sokkal izgalmasabb fejlesztés és kényelmes használat.

    Szerencsére a Rails rendelkezik akciókábelekkel, amelyek megkönnyítik a valós idejű szolgáltatások megvalósítását. A Action Cables mögött rejlő koncepció az, hogy a Web helyett WebSockets protokollt használ. A WebSockets alapfogalma az, hogy létrehoz egy ügyfél-szerver kapcsolatot, és nyitva tartja. Ez azt jelenti, hogy további adatok küldéséhez és fogadásához nincs szükség az oldal újratöltésére.

    Privát beszélgetés

    Ennek a szakasznak a célja egy működő szolgáltatás létrehozása, amely lehetővé teszi a privát beszélgetést két felhasználó között.

    Váltás egy új ágra

    git checkout -B magánbeszélgetés

    Névtér-modellek

    Kezdje a szükséges modellek meghatározásával. Most két különféle modellre van szükségünk, az egyikre a magánbeszélgetésekre, a másikra a privát üzenetekre. Megnevezhetjük őket a PrivateConversation és a PrivateMessage névre, de gyorsan felmerülhet egy kis probléma. Miközben minden jól működne, képzelje el, hogyan fog kinézni a modellek könyvtár, miután egyre több modellt készítettünk hasonló név előtagokkal. A könyvtár hamarosan nehezen kezelhetővé válik.

    A könyvtárak kaotikus struktúrájának elkerülése érdekében névtér-technikát alkalmazhatunk.

    Lássuk, hogyan néz ki ez. A magánbeszélgetés szokásos modelljét PrivateConversation-nak nevezzük, és fájlját a private_conversation.rb-nek nevezzük, és a modellek könyvtárában tároljuk.

    modellek / private_conversation.rb

    Időközben a névközpontú verziót Privát :: Beszélgetésnek hívnánk. A fájlt Chat.rb néven hívnánk, és a privát könyvtárban találnánk

    modellek / private / conversation.rb

    Látja, hogy mi lehet hasznos? Minden, a magán előtaggal rendelkező fájlt a privát könyvtárban tárolnának, ahelyett, hogy a fő modellek könyvtárában felhalmozódnának, és nehezen tudnák olvasni.

    Mint általában, a Rails élvezetessé teszi a fejlesztési folyamatot. Név szerint elrendezett modelleket tudunk létrehozni, ha megadunk egy könyvtárat, amelybe modellt szeretnénk beilleszteni.

    A névtérbe tartozó Privát :: Beszélgetési modell létrehozásához futtassa a következő parancsot:

    sínek g modell privát / beszélgetés

    Létrehozza a Private :: Message modellt:

    sínek g modell privát / üzenet

    Ha megnézi a modellek könyvtárat, akkor megjelenik egy private.rb fájl. Ehhez előtagot kell hozzáadni az adatbázis-táblák nevéhez, hogy a modellek felismerhetők legyenek. Személy szerint nem szeretem ezeket a fájlokat a modellkönyvtárban tartani, inkább a tábla nevét határozom meg egy modellben. A tábla nevének megadásához a modellben az self.table_name = parancsot kell használnia, és a táblázat nevét kell megadnia karakterláncként. Ha úgy dönt, hogy az adatbázis-táblázatok nevét így határozza meg, mint én, akkor a modelleknek így kell kinézniük:

    A modellek könyvtárában lévő private.rb fájlra már nincs szükség, törölheti.

    A felhasználó sok privát beszélgetést folytathat, a beszélgetéseknek pedig sok üzenetük lesz. Határozza meg ezeket a társulásokat a modellekben:

    Itt az class_name metódust használják a társított modell nevének meghatározására. Ez lehetővé teszi az egyedi nevek használatát társulásaink számára, és ellenőrizheti, hogy a névsávú modelleket felismerik-e. Az class_namemethod másik felhasználási módja az, ha kapcsolat létrehozása önmagával történik, ez akkor hasznos, ha meg akarja különböztetni ugyanazon modell adatait valamilyen hierarchia vagy hasonló struktúra létrehozásával.

    Az idegen_kulcs az egyesület oszlopának nevének megadására szolgál az adatbázis táblában. A táblázatban lévő adatoszlopot csak az pieder_szövetség oldalán hozzák létre, de az oszlop felismerhetőségének érdekében mindkét modellnél meg kell határoznunk az svet_key-t azonos értékekkel.

    A privát beszélgetések két felhasználó között lesznek, itt ez a két felhasználó feladó és címzett. Nevezhetnénk őket úgy, mint user1 és user2. De hasznos tudni, ki kezdeményezett egy beszélgetést, tehát itt a feladó a beszélgetés alkotója.

    Határozza meg az áttekintő fájlokban található táblázatokat:

    A privát beszélgetések táblában a felhasználók azonosító adatai tárolódnak, ehhez szükség van arra, hogy a pieder_to és a sok társítás működjön, és természetesen beszélgetés létrehozásához két felhasználó között.

    A törzsadat oszlopban az üzenet tartalma kerül tárolásra. A két modell közötti társítások indexek és azonosító oszlopok hozzáadása helyett itt a referencia módszert használtuk, amely egyszerűsítette a megvalósítást.

    futtasson migrációs fájlokat, hogy táblákat hozzon létre a fejlesztési adatbázisban

    sínek db: vándorolnak

    Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "Privát :: Beszélgetés és Privát :: Üzenet modellek létrehozása
    - Definiálja a felhasználói, a magán :: beszélgetés közötti társulásokat
      és Privát :: Üzenet modellek
    - Adja meg a private_conversations és a private_messages táblákat "

    Nem valós idejű privát beszélgetési ablak

    Van egy hely, ahol adatokat tárolhatunk magánbeszélgetésekhez, de ez ennyi. Hol kezdjük most? Ahogy az előző szakaszokban említettem, személy szerint szeretnék létrehozni egy funkció alapvető vizuális oldalát, majd megírni néhány logikát, hogy működőképessé váljon. Tetszik ez a megközelítés, mert amikor van egy vizuális elem, amelyet funkcionálisvá akarok tenni, akkor nyilvánvalóbb, mit akarok elérni. Miután megvan a felhasználói felület, könnyebb megkezdeni a probléma kisebb lépésekre bontását, mert tudja, mi történjen egy adott esemény után. Nehezebb olyan programot programozni, amely még nem létezik.

    A magánbeszélgetések felhasználói felületének elkészítéséhez hozzon létre egy Private :: Conversations vezérlőt. Ha egyszer elnevezek valamit az alkalmazásban, szeretek konzisztensen maradni és a többi kapcsolódó részét is megnevezni. Ez lehetővé teszi a forráskód megértését és intuitív navigálását.

    sínek g vezérlő magán / beszélgetések

    A síngenerátor nagyon édes. Létrehozta a névtérbeli modellt és a névtérbeli nézeteket, minden készen áll a fejlesztésre.

    Hozzon létre egy új beszélgetést

    Szükségünk van egy új beszélgetés kezdeményezésének módjára. Alkalmazásunk esetében ésszerű, hogy kapcsolatba lépjen egy olyan személlyel, akinek hasonló érdekei vannak a tiédnél. Ennek a funkciónak a kényelmes helye az egyetlen bejegyzés oldalán található.

    A hozzászólások / show.html.erb sablonban hozzon létre egy űrlapot új beszélgetés kezdeményezéséhez. A

    <% = @ post.content%>

    sor alatt adjunk hozzá:

    Határozza meg a helper módszert a posts_helper.rb fájlban

    Adjon hozzá specifikációkat a helper módszerhez:

    Hozzon létre egy show könyvtárat és a hozzá tartozó részleges fájlokat:

    Határozza meg a szabadság_megsage_partial_path helper módszert a posts_helper.rb belül

    Adjon hozzá specifikációkat a módszerhez

    Csak egy pillanat alatt meghatározzuk a @message_has_been_sent példányváltozót a PostsController-en belül. Ez meghatározza, hogy a felhasználónak már elküldött-e egy kezdeti üzenetet, vagy sem.

    Készítsen részleges fájlokat, amelyek megfelelnek a szabadságmező_partial_path helper módszernek, egy új contact_user könyvtárban

    Most konfigurálja a PostsController show műveletét. Az akció belsejében adjunk hozzá

    A vezérlő magán hatókörén belül határozza meg a beszélgetés_azonosító módszert

    A star_users módszer két felhasználó közötti privát beszélgetéseket kér le. Definiálja hatókörként a Private :: Conversation modellben

    Meg kell vizsgálnunk, hogy a hatókör működik-e. Mielőtt specifikációt írna, határozza meg a private_conversation gyárat, mivel a mintaadatokra a teszt adatbázisban szükségünk lesz.

    Itt látunk egy beágyazott gyárat, ez lehetővé teszi egy gyár létrehozását a szülő konfigurációjával, majd azt módosítani. Mivel az üzeneteket a private_conversation_with_messages gyárral fogjuk létrehozni, meg kell határoznunk a privát_üzenet gyárat is

    Most már készen állunk arra, hogy teszteljük a köztük lévő felhasználók körét a specifikációkkal.

    Adja meg a létrehozási műveletet a Private :: Conversations vezérlőhöz

    Itt beszélgetést hozunk létre egy üzenet szerzője és a jelenlegi felhasználó között. Ha minden jól megy, az alkalmazás létrehoz egy üzenetet, amelyet egy jelenlegi felhasználó írt, és visszajelzést ad a megfelelő JavaScript részleges megjelenítésével.

    Hozza létre ezeket a partíciókat

    Útvonalak készítése a Privát :: Beszélgetések és Privát :: Üzenetek vezérlők számára

    Jelenleg csak néhány műveletre van szükségünk, itt az egyetlen módszer praktikus. A névtér módszer lehetővé teszi az útvonalak könnyű létrehozását a névtérbeli vezérlők számára.

    Tesztelje a .contact-user űrlap teljes teljesítményét a specifikációkkal

    Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "A bejegyzéshez adj hozzá egy űrlapot a felhasználóval való kapcsolatfelvételhez
    - Adjon meg egy contact_user_partial_path helper módszert a PostsHelper alkalmazásban.
      Adjon hozzá specifikációkat a módszerhez
    - Hozzon létre _contact_user.html.erb és _login_required.html.erb partíciókat
    - Adjon meg egy szabadságkezelő_részes_út útmutatót a PostsHelper alkalmazásban.
      Adjon hozzá specifikációkat a módszerhez
    - Hozzon létre _already_in_touch.html.erb és _message_form.html.erb fájlokat
      részleges fájlok
    - Adjon meg egy @message_has_been_sent a PostsController show-akciójában
    - Határozzon meg egy inter_users hatókört a Private :: Conversation modellben
      Adjon hozzá specifikációt a hatókörhöz
    - Adja meg a private_conversation és a private_message gyárakat
    - Adja meg az útvonalakat a Privát :: Beszélgetések és a Privát :: üzenetekhez
    - Adjon meg egy létrehozási műveletet a Privát :: Beszélgetések részben
    - Hozzon létre _success.js és _fail.js partíciókat
    - Adjon hozzá jellemzőket a teljes .contact-user űrlap teszteléséhez "

    Kicsit változtassa meg az űrlap stílusát, ha CSS-t ad hozzá az branch_page.scss fájlhoz

    Egyetlen bejegyzés meglátogatásakor az űrlapnak így kell kinéznie

    Amikor üzenetet küld egy üzenet szerzőjének, az űrlap eltűnik

    Így néz ki, amikor már kapcsolatba lép egy felhasználóval

    Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "CSS hozzáadása a .contact-user űrlap stílusához"

    Megjeleníti a beszélgetési ablakot

    Küldtünk egy üzenetet, és létrehozott egy új beszélgetést. Jelenleg ez az egyetlen hatalom, nem tehetünk mást. Milyen haszontalan erő eddig. Szüksége van egy beszélgetési ablakra az üzenetek olvasásához és írásához.

    Tárolja a megnyitott beszélgetések azonosítóit az ülésen. Ez lehetővé teszi a beszélgetések nyitva tartását az alkalmazásban, amíg a felhasználó bezárja őket vagy meg nem szünteti a munkamenetet.

    A Privát :: ConversationsController művelet létrehozásakor hívja meg a add_to_conversations elemet, kivéve, ha már hozzáadta? módszer, ha egy beszélgetést sikeresen mentettünk. Ezután határozza meg a módszert a magántulajdonban

    Ez tárolja a beszélgetés azonosítóját az ülésen. És a már hozzáadott? Privát módszer biztosítja, hogy a beszélgetés azonosítója még nem kerüljön a munkamenetbe.

    És végül, hozzáférésre van szükségünk a beszélgetéshez a nézetekben, így a beszélgetési változót konvertáljuk egy példányváltozóvá.

    Most elkezdhetjük a sablon készítését a beszélgetési ablakhoz. Hozzon létre egy részleges fájlt az ablakhoz

    Itt kapjuk meg a beszélgetés címzettjét a private_conv_recipientmethod módszerrel. Definiálja a segítő módszert a Private :: ConversationsHelper belül

    Az opposed_user módszert használjuk. Lépjen a Privát :: Beszélgetési modellbe, és határozza meg a módszert

    Ezzel visszatér egy privát beszélgetés ellentétes felhasználói. Ellenőrizze, hogy a módszer megfelelően működik-e, ha specifikációval lefedi

    Ezután hozzon létre hiányzó részleges fájlokat a _conversation.html.erb fájlhoz

    A Private :: ConversationsHelper oldalon adja meg a load_private_messageshelper módszert

    Ez hozzáad egy linket az előző üzenetek betöltéséhez. Hozzon létre egy megfelelő részfájlt egy új messages_list könyvtárban

    Ne felejtse el ellenőrizni, hogy minden rendben van-e a módszerrel, és írjon rá specifikációkat

    Mivel a beszélgetések ablakai a teljes alkalmazásban megjelennek, ez azt jelenti, hogy hozzáférésre van szükségünk a Private :: ConversationsHelperhelper módszerekhez. Ahhoz, hogy hozzáférhessen ezekhez a módszerekhez az egész alkalmazásban, az ApplicationHelper hozzáadása részben

    magában foglalja a Privát :: Beszélgetések segítőt

    Ezután hozza létre a beszélgetés új üzenet űrlapjának utolsó hiányzó részleges fájlját

    Kicsit később ezt az űrlapot működőképessé teszjük.

    Hozzunk létre egy olyan funkciót, amely után a felhasználó üzenetet küld egy egyedi üzenetben, és a beszélgetési ablak megjelenik az alkalmazáson.

    A _success.js.erb fájlban

    hozzászólások / show / contact_user / message_form / _success.js.erb

    hozzáad

    <% = „privát / beszélgetések / nyitott”% -ot jelenít meg

    Ennek a részleges fájlnak a célja egy beszélgetési ablak hozzáadása az alkalmazáshoz. Adja meg a részleges fájlt

    Ezt a visszahívási részleges fájlt több esetben is újra felhasználják. Annak elkerülése érdekében, hogy ugyanazt az ablakot többször megjelenítsük, egy ablak megjelenítését megelőzően ellenőrizzük, létezik-e már az alkalmazásban. Ezután kibővítjük az ablakot, és automatikusan fókuszáljuk az üzenet űrlapját. A fájl alján meghívja a positionChatWindows () függvényt, hogy megbizonyosodjon arról, hogy az összes beszélgetés ablaka megfelelő helyzetben van-e. Ha nem pozicionálnánk őket, akkor ugyanabban a pontban jelenítik meg őket, ami természetesen használható.

    Most az eszközkönyvtárban hozzon létre egy fájlt, amely gondoskodik a beszélgetések ablakának láthatóságáról és helymeghatározásáról

    Ahelyett, hogy létrehoznánk saját funkciókat a sütik beállításához és beszerzéséhez vagy hasonló módon az adatok kezeléséhez a JavaScript között, használhatjuk a gon gem-et. A gyöngyszem eredeti használata az, hogy adatokat küldjön a szerver oldaláról a JavaScript-hez. De hasznosnak tartom a JavaScript változók nyomon követését az alkalmazás egész területén. Telepítse és állítsa be a drágakövet az utasítások elolvasásával.

    Az eseményfigyelővel nyomon követjük a nézetablak szélességét. Amikor egy beszélgetés megközelíti a nézetablak bal oldalát, akkor a beszélgetés rejtve marad. Miután elegendő szabad hely van egy rejtett beszélgetési ablakhoz, az alkalmazás újra megjeleníti azt.

    Egy oldallátogatás során a pozicionálási és láthatósági funkciókat hívjuk meg, hogy megbizonyosodjunk arról, hogy az összes beszélgetés ablaka a megfelelő helyzetben van-e.

    A bootstrap panelen lévő összetevőt használjuk a beszélgetések ablakainak egyszerű kibontására és összecsukására. Alapértelmezés szerint összeomlik és egyáltalán nem lesz interaktív. Ahhoz, hogy azok átkapcsolhatók legyenek, a javascripts könyvtárban hozzon létre egy új toggle_window.js fájlt

    Hozzon létre egy új pokalbő_window.scss fájlt

    eszközök / stíluslapok / felhangok / conversation_window.scss

    És adjon hozzá CSS-t a stílusos beszélgetések ablakaihoz

    Lehet, hogy észrevette, hogy vannak olyan osztályok, amelyeket még egyetlen HTML fájlban sem határoztak meg. Ennek oka az, hogy a jövőbeli fájlokat, amelyeket a Views könyvtárban hozunk létre, megosztjuk a CSS-t a már létező HTML elemekkel. Ahelyett, hogy bármilyen kisebb HTML elem hozzáadása után többször ugrunk a CSS fájlokba, beillesztettem néhány osztályt, amelyet a jövőbeli HTML elemekben definiáltam. Ne feledje, hogy bármikor meglátogathatja a stíluslapokat, és elemezheti az adott stílus működését.

    Korábban már mentettünk egy újonnan létrehozott beszélgetés azonosítóját a munkamenet során. Ideje kihasználni ezt a lehetőséget és tartani nyitva a beszélgetési ablakot, amíg a felhasználó bezárja vagy megsemmisíti a munkamenetet. Az ApplicationController-en belül definiáljon egy szűrőt

    művelet előtt: megnyitott beszélgetések_ablakok

    majd definiálja a megnyitott_beszélgetések_ablak-módszert

    Az include módszerrel a kapcsolódó adatbázis táblázatokból származó adatokat lehet felvenni. A közeljövőben üzeneteket töltünk be egy beszélgetésből. Ha nem használtuk volna a beépítési módszert, akkor nem töltöttük volna be a lekérdezéssel egy beszélgetés üzeneteinek rekordjait. Ez N + 1 lekérdezési problémához vezetne. Ha nem töltöttük be az üzeneteket a lekérdezéssel, akkor minden üzenetre további lekérdezés jön létre. Ez jelentősen befolyásolhatja az alkalmazás teljesítményét. Most 100 üzenetre vonatkozó 100 lekérdezés helyett tetszőleges számú üzenethez csak egy kezdeti lekérdezés van.

    Az application.html.erb fájl belsejében, közvetlenül a hozam módszer alatt, adjunk hozzá

    Hozzon létre egy új alkalmazáskönyvtárat, és belül hozza létre a _private_conversations_windows.html.erb részleges fájlt

    Az alkalmazás böngészésekor folyamatosan nyitott beszélgetéseket látunk, függetlenül attól, hogy melyik oldalon vagyunk.

    Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "Privát beszélgetési ablakot jelenít meg az alkalmazásban
    - Adjon hozzá nyitott beszélgetéseket a munkamenethez
    - Hozzon létre egy _conversation.html.erb fájlt a magánbeszélgetésekben
    - Adjon meg egy private_conv_recipient helper módszert a
      privát / conversations_helper.rb
    - Adjon meg egy ellenzéki_felhasználó módszert a Privát :: Beszélgetési modellben
      és adjon hozzá specifikációkat ehhez
    - Hozzon létre _heading.html.erb és _messages_list.html.erb fájlokat
      a magánbeszélgetésekben / beszélgetésekben / beszélgetésekben
    - Adjon meg egy load_private_messages üzenetet a private / conversations_helper.rb fájlban
      és adjon hozzá specifikációkat ehhez
    - Hozzon létre egy _new_message_form.html.erb fájlt a
      privát / beszélgetések / beszélgetés
    - Hozzon létre egy _open.js.erbinside privát / beszélgetéseket
    - Hozzon létre a position_and_visibility.js elemet a
      eszközök / JavaScriptek / beszélgetések
    - Hozzon létre egy pokalbő_ablak.scss fájlt a
      eszközök / stíluslapok / felhangok
    - Adjon meg egy megnyitott_konverziók_ablakok segítő módszerét
      ApplicationController
    - Hozzon létre egy _private_conversations_windows.html.erb fájlt a
      layouts / alkalmazás

    Zárjon be egy beszélgetést

    A beszélgetés bezárás gombja még nem működik. De mindent megteszünk, hogy így tegyük. A Privát :: ConversationsController oldalon határozza meg a szoros műveletet

    A bezárás gombra kattintva ezt a műveletet meghívják. A művelet törli a beszélgetés azonosítóját a munkamenetből, majd egy js részleges fájllal válaszol, amely megegyezik a művelet nevével. Hozza létre a részleges fájlt

    Eltávolítja a beszélgetés ablakot a DOM-ból, és a többi beszélgetési ablakot áthelyezi.

    Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "A közeli beszélgetés gomb működőképessé tétele
    - Adjon meg egy szoros műveletet a Private :: ConversationsController belső részén
    - Hozzon létre egy close.js.erb fájlt a privát / beszélgetésekben "

    Üzeneteket jelenít meg

    Az üzenetek listájában jelenleg egy betöltési ikont látunk, üzenet nélkül. Ennek oka az, hogy nem hoztunk létre sablonokat az üzenetekhez. A nézetek / privát könyvtárban hozzon létre egy üzenetkönyvtárat. Hozzon létre egy új fájlt a könyvtárban

    A private_message_date_check helper módszer ellenőrzi, hogy ezt az üzenetet az előző üzenettel ugyanazon a napon írják-e. Ha nem, akkor új sort hoz létre egy új dátummal. Definiálja a segítő módszert a Private :: MessagesHelper alkalmazásban

    Az ApplicationHelper-ben foglalja magában a Private :: MessagesHelper-et, így hozzáférhetünk az alkalmazáshoz

    magában foglalja a Privát :: Üzenetkezelőt

    Írjon specifikációkat a módszerhez. Hozzon létre egy új messages_helper_spec.rb fájlt

    Hozzon létre egy új üzenetkönyvtárban egy _new_date.html.erb fájlt

    Aztán a _message.html.erb fájlban küldtük el a_or_recepciót és a látott_ vagy láthatatlan segítő módszereket. Különböző osztályokat térnek vissza különböző esetekben. Határozza meg őket a Private :: MessagesHelper részben

    Írjon specifikációt nekik:

    Most szükségünk van egy elemre, amely betölti az üzeneteket az üzenetek listájába. Ez a komponens szintén hozzá fog adni korábbi üzeneteket a lista tetejére, amikor a felhasználó felcsavarodik, amíg egyetlen üzenet sem marad meg a beszélgetésben. Végtelen gördülési mechanizmust fogunk létrehozni az üzenetekhez, hasonlóan ahhoz, mint a postai oldalakban.

    A nézetek / privát / üzenetek könyvtárban hozzon létre egy _load_more_messages.js.erb fájlt:

    A @id_type példány változó meghatározza a beszélgetés típusát. A jövőben nemcsak privát beszélgetéseket tudunk létrehozni, hanem csoportokat is létrehozhatunk. Ez általános segítő módszerekhez és részleges fájlokhoz vezet mindkét típus között.

    A segítők könyvtárában hozzon létre egy megosztott könyvtárat. Hozzon létre egy messages_helper.rb fájlt, és határozza meg a helper módszert

    Eddig elég buta módszer. Csak visszatér egy részleges útjához. Később adunk némi intelligenciát, amikor extra funkciókat építünk fel üzenetküldő rendszerünkbe. Jelenleg semmilyen más fájlban nem férhetünk hozzá a fájlban meghatározott segítő módszerekhez. Be kell vonnunk őket más segítő fájlokba. Benne
    Privát :: Üzenetkezelő, tartalmaz módszereket a Megosztott :: Üzenetkezelőből

    „megosztott / üzenetek_helper” megkövetelése
    tartalmazza a Megosztott :: MessagesHelper alkalmazást

    A megosztott könyvtáron belül hozzon létre néhány új könyvtárat:

    megosztott / load_more_messages / ablak

    Ezután hozzon létre egy _append_messages.js.erb fájlt:

    Ez a kód gondoskodik arról, hogy a korábbi üzenetek hozzá legyenek csatolva az üzenetlistához. Ezután definiáljon egy másik, még nem izgalmas, segítő módszert a Private :: MessagesHelper alkalmazásban

    Hozza létre a megfelelő könyvtárakat a privát / üzenetek könyvtárban, és hozzon létre egy _add_link_to_messages.js.erb fájlt

    Ez a fájl frissíti a korábbi üzeneteket betöltő linket. Az előző üzenetek csatolása után a linket felváltja egy frissített link, hogy betöltse a korábbi korábbi üzeneteket.

    Most már megvan az a rendszer, hogy a korábbi üzenetek hogyan kerülnek az üzenetlista tetejére. De ha megpróbálnánk eljutni az alkalmazásba és megnyitni egy beszélgetési ablakot, akkor nem jelenne meg renderelt üzenet. Miért? Mivel semmi nem indítja el a linket az előző üzenetek betöltéséhez. Amikor egy beszélgetési ablakot nyitunk először, látni akarjuk a legfrissebb üzeneteket. A beszélgetési ablakot úgy programozhatjuk, hogy ha kibővül, a több üzenet betöltése link aktiválódik, hogy betöltse a legfrissebb üzeneteket. Ez elindítja a korábbi üzenetek hozzáfűzésének első ciklusát, és a több üzenet betöltése link egy frissített cseréjét váltja fel.

    A toggle_window.js fájlon belül frissítse a váltás funkciót, hogy pontosan a fent leírtak szerint járjon el

    Hozzon létre egy eseménykezelőt, így amikor egy felhasználó felfelé görget és eléri az üzenetlista szinte tetejét, akkor a többi üzenet betöltése link kerül aktiválásra.

    Amikor több üzenet betöltése linkre kattint, a Private :: MessagesController indexművelet meghívásra kerül. Ezt az utat határoztuk meg az előző üzenetek betöltése linkre. Hozza létre a vezérlőt és annak indexelését

    Ide tartoznak az Üzenetek modul módszerei. A modult az aggodalmak könyvtárában tárolják. Az ActiveSupport :: Aggódás az egyik olyan hely, ahol olyan modulokat tárolhat, amelyeket később felhasználhat az osztályokban. Esetünkben a modulból további módszereket vonunk be vezérlőnkhöz. A get_messages módszer az Üzenetek modulból származik. A modulban való tárolás az az oka, hogy egy kicsit később ugyanazt a módszert fogjuk használni egy másik vezérlőben. A kód sokszorosításának elkerülése érdekében a módszert újrafelhasználhatóvá tesszük.

    Láttam, hogy néhányan panaszkodnak az ActiveSupport :: Aggodalomra, és azt javasolják, hogy egyáltalán ne használja. Felhívom az embereket, hogy harcoljanak velem a nyolcszögben. Viccelek: D. Ez egy független alkalmazás, és létrehozhatjuk alkalmazásunkat, bár tetszik. Ha nem szereti az aggodalmakat, van még egy sor más módszer az újrafelhasználható módszerek létrehozására.

    Hozza létre a modult

    Itt szükségünk van az active_support / aggodalomra, majd kibővítjük modulunkat az ActiveSupport :: Concern programmal, így a Rails tudja, hogy ez aggodalomra ad okot.

    A constantize módszerrel dinamikusan létrehozunk egy állandó nevet egy string érték beírásával. Dinamikusan hívjuk a modelleket. Ugyanezt a módszert fogjuk használni a Privát :: Beszélgetés és Csoport :: Beszélgetési modellek esetén.

    Miután a get_messages módszer beállította az összes szükséges példányváltozót, az indexaction a _load_more_messages.js.erb részleges fájllal válaszol.

    Végül, miután az üzenetek hozzá lettek csatolva az üzenetlista tetejéhez, el szeretnénk távolítani a betöltési ikont a beszélgetési ablakból. A _load_more_messages.js.erb fájl alján

    <% = render remove_link_to_messages%>

    Most határozza meg az remove_link_to_messages segítő módszert a Megosztott :: Üzenetkezelő részben

    Próbáljon saját maga elkészíteni a módszerre vonatkozó specifikációkat.

    Hozza létre a _remove_more_messages_link.js.erb részleges fájlt

    Most abban az esetben, ha még nem maradtak korábbi üzenetek, a korábbi üzenetekre mutató link és a betöltési ikon eltávolításra kerül.

    Ha most megpróbál kapcsolatba lépni egy felhasználóval, akkor a beszélgetési ablak megjelenik egy benne küldött üzenettel. Képesek vagyunk üzeneteket továbbítani AJAX kérésekkel.

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git szállít -m "Üzeneteket jelenít meg az AJAX segítségével
    - Hozzon létre egy _message.html.erb fájlt a privát üzenetekben
    - Adjon meg egy private_message_date_check helper módszert a
      Privát :: ÜzenetekSúgó és írjon rá specifikációkat
    - Hozzon létre egy _new_date.html.erb fájlt a magán / üzenetek / üzenet belsejében
    - Határozza meg a küldött vagy fogadott és látott vagy láthatatlan segítő módszereket a
      Privát :: ÜzenetekSúgó, és írjon specifikációt nekik
    - Hozzon létre egy _load_more_messages.js.erb fájlt a privát üzenetekben
    - Adjon meg egy append_prevable_messages_partial_path helper módszert a
      Megosztott :: MessagesHelper
    - Hozzon létre egy _append_messages.js.erb fájlt
      megosztott / load_more_messages / ablak
    - Adjon meg helyettesítési_link_személyes üzenetek_részes_útvonalat
      Egyéni :: MessagesHelper
    - Hozzon létre egy _add_link_to_messages.js.erb fájlt
      privát / messages / load_more_messages / ablak
    - Hozzon létre egy toggle_window.js elemet a javascriptekben / beszélgetésekben
    - Hozzon létre egy messages_infinite_scroll.js fájlt
      eszközök / JavaScriptek / beszélgetések
    - Adjon meg egy indexműveletet a Private :: MessagesController belső részén
    - Hozzon létre egy messages.rb elemet a vezérlőkön / aggodalmakon
    - Határozzon meg egy remove_link_to_messages segítőt / megosztott
    - Hozzon létre egy _remove_more_messages_link.js.erb fájlt
      megosztott / load_more_messages / ablak”

    Valós idejű funkcionalitás az Action Cable segítségével

    A beszélgetések ablakai már elég szépen néznek ki. És van némi édes funkciójuk is. De hiányzik a legfontosabb szolgáltatás - az üzenet valós időben történő küldésének és fogadásának képessége.

    Amint azt korábban röviden tárgyaltuk, az Action Cable lehetővé teszi számunkra, hogy elérjük a kívánt valós idejű funkciót a beszélgetésekhez. Át kell gördítenie a dokumentációt, hogy tisztában legyen azzal, hogy mindez működik.

    Az első dolog, amit meg kell tennünk, egy WebSocket kapcsolat létrehozása és előfizetés egy adott csatornára. Szerencsére a WebSocket kapcsolatokra már vonatkozik az alapértelmezett Rails konfiguráció. Az app / channel / application_cable könyvtárban a channel.rb és a connection.rb fájlokat látja. A Csatlakozási osztály gondoskodik a hitelesítésről, a Csatorna osztály pedig egy szülő osztály, amellyel a megosztott logikát tárolhatja az összes csatorna között.

    A kapcsolat alapértelmezés szerint van beállítva. Most fel kell fizetnie egy privát beszélgetési csatornát. Generáljon névsávú csatornát

    sínek g csatorna magán / beszélgetés

    A létrehozott Private :: ConversationChannel-en belül feliratkozott és nem feliratkozott módszereket látunk. Az előfizetéses módszerrel a felhasználó kapcsolatot létesít a csatornával. Az előfizetés nélküli módszerrel a felhasználó nyilvánvalóan megsemmisíti a kapcsolatot.

    Frissítse ezeket a módszereket:

    Itt azt szeretnénk, hogy a felhasználónak legyen saját egyedi csatornája. A csatornán keresztül a felhasználó adatokat fogad és küld. Mivel a felhasználók azonosítói egyedi, a csatornát egyedivé tesszük egy felhasználói azonosító hozzáadásával.

    Ez egy szerveroldali kapcsolat. Most kapcsolatot kell létrehoznunk az ügyféloldalon is.

    A kapcsolat példányának az ügyféloldalon történő létrehozásához be kell írnunk néhány JavaScriptet. Valójában a Rails már létrehozta a csatornagenerátorral. Keresse meg az eszközöket / javascripteket / csatornákat / magántulajdonokat, és alapértelmezés szerint a Rails létrehozza a CoffeeScript fájlokat. Itt fogom használni a JavaScriptet. Tehát nevezze át a fájlt a vestés.js fájlra, és cserélje le annak tartalmát a következőre:

    Indítsa újra a szervert, lépjen az alkalmazásba, jelentkezzen be és ellenőrizze a szervernaplót.

    Megvan a kapcsolat. Meg van határozva a valós idejű kommunikáció magja. Folyamatosan nyitott kliens-szerver kapcsolat van. Ez azt jelenti, hogy adatokat küldhetünk és fogadhatunk a szerverről a kapcsolat újraindítása vagy a böngésző frissítése nélkül, ember! Nagyon erős dolog, ha gondolkodsz rajta. Mostantól az üzenetkezelő rendszert ehhez a kapcsolathoz építjük.

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "Hozzon létre egy egyedi privát beszélgetési csatornát, és iratkozz fel rá"

    Tegyük funkcionálisvá a beszélgetési ablak új üzenetlapját. Az eszközök / javascriptek / csatornák / privát / beszélgetések.js fájl alján adja hozzá ezt a funkciót:

    A függvény értékeket fog szerezni az új üzenet űrlapból, és átadja azokat a send_message függvénynek. A send_message függvény a szerver oldalán send_message metódust fog hívni, amely gondoskodik egy új üzenet létrehozásáról.

    Vegye figyelembe is, hogy az eseménykezelő egy beküldés gombon van, de a beszélgetési ablakban nincsenek látható beküldési gombok. Ez egy dizájn választás. A beszélgetési ablakot úgy kell programoznunk, hogy a küldés gomb aktiválódjon, amikor az Enter gombra kattintunk a billentyűzeten. Ezt a funkciót a jövőben más funkciók fogják használni, tehát hozzon létre a pokalb.js fájlt az eszközök / javascriptek / beszélgetések könyvtárban

    A fájlban a beszélgetések ablakának általános viselkedését írjuk le. Az első viselkedés a görgetősáv fentről tartása, így a korábbi üzenetek nem töltődnek be, amikor nincs rá szükség. A második funkció biztosítja, hogy a küldés gomb bekapcsoljon az Enter gomb kattintásán, majd törli a bemenet értékét egy üres karakterláncra.

    Kezdje a send_message függvény létrehozásával a private_conversationobject belül. Adja hozzá a fogadott visszahívási funkció alá

    Ez meghívja a send_message metódust a szerver oldalon, és továbbítja az üzenet értékét. A kiszolgálóoldali módszert a Private :: ConversationChannel belül kell meghatározni. Határozza meg a módszert:

    Ez gondoskodik egy új üzenet létrehozásáról. Az átadott argumentumból kapott adatparaméter beágyazott kivonat. Tehát, hogy ezt a beágyazott komplexitást egyetlen hash-ra csökkentsük, az each_with_object metódust használjuk.

    Ha megpróbál új üzenetet küldeni a beszélgetés ablakában, valójában új üzenetrekord jön létre. Ez még csak nem jelenik meg a beszélgetési ablakban, csak akkor, ha frissíti a webhelyet. Meg fog jelenni, de nem állítottuk be semmit, hogy az újonnan létrehozott üzeneteket privát beszélgetés csatornájára továbbítsuk. Egy pillanat alatt végrehajtjuk. Mielőtt folytatnánk és elvégznénk a változtatásokat, gyorsan áttekintjük, hogyan működik a jelenlegi üzenetküldő rendszer.

    1. A felhasználó kitölti az új üzenet űrlapot és elküldi az üzenetet
    2. A javascriptek / csatornák / privát / beszélgetések.js-ben található eseménykezelő megkapja a beszélgetési ablak adatait, a beszélgetés azonosítóját és az üzenet értékét, és aktiválja a csatornapéldányokat az ügyféloldali send_message függvényben.

    3. Az send_message függvény az ügyféloldalon meghívja a send_messagemethod módszert a szerver oldalon, és továbbítja az adatokat

    4. Az send_message módszer az ügyféloldalon feldolgozza a megadott adatokat, és új Private :: Message rekordot hoz létre

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "A privát beszélgetési ablak új üzenetlapjának működőképessé tétele
    - Adjon hozzá eseménykezelőt a
      javascriptek / csatornák / magán / beszélgetés.js az elküldés gomb elindításához
    - Adja meg a közös viselkedést a beszélgetési ablakok között a
      eszközök / JavaScriptek / beszélgetések / conversation.js
    - Adjon meg egy send_message függvényt mind az ügyfél, mind a szerver oldalán "

    Új üzenet továbbítása

    Miután új üzenetet készítettünk, azt valahogy a megfelelő csatornára akarjuk továbbítani. Nos, az Active Record Callbacks rengeteg hasznos visszahívási módszert kínál a modellek számára. Van egy after_create_commit visszahívási módszer, amely akkor fut, amikor egy új modell rekordja létrehozásra kerül. A Privát :: üzenet modell fájljában adja hozzá

    Mint látja, a lemez létrehozása után a Private :: MessageBroadcastJob.perform_later felhívásra kerül. És mi az? Háttérmunka, háttér-műveletek kezelése. Ez lehetővé teszi bizonyos műveletek futtatását, amikor csak akarjuk. Lehet, hogy azonnal egy adott esemény után, vagy egy esemény után később futtatható. Ha nem ismeri a háttérfeladatokat, ellenőrizze az Aktív munkák alapjait.

    Adjon hozzá az előző üzenet módszer specifikációit. Ha most megpróbálja futtatni a specifikációkat, kommentálja az after_create_commit módszert. Még nem határoztuk meg a Private :: MessageBroadcastJob elemet, így a specifikációk meghatározhatatlan állandó hibát okozhatnak.

    Most létrehozhatunk egy háttér-feladatot, amely egy újonnan létrehozott üzenetet továbbít egy privát beszélgetés csatornájára.

    sínek g job privát / message_broadcast

    A fájlban végrehajtási módszert látunk. Alapértelmezés szerint, amikor feladatot hív, ezt a módszert hívják. Most már a feladatban dolgozza fel az adott adatokat, és sugározza azokat a csatorna előfizetőinek.

    Itt üzenetet küldünk és elküldjük mindkét csatorna előfizetőjének. Ezen felül átadunk néhány további kulcs-érték párt is az üzenet megfelelő megjelenítéséhez. Ha új üzenetet próbálunk küldeni, a felhasználók adatokat kapnak, de az üzenetet nem csatolják az üzenetlistához. Nincs látható változás.

    Ha az adatokat egy csatornára továbbítják, akkor az ügyféloldalon a fogadott visszahívási funkció meghívásra kerül. Itt van lehetőség arra, hogy adatokat csatoljunk a DOM-hoz. A kapott funkción belül adja hozzá a következő kódot:

    Itt láthatjuk, hogy a feladó és a címzett kicsit eltérően bánnak velük.

    // a conv ablak stílusának megváltoztatása, ha láthatatlan üzenetek vannak
    // adjon hozzá további osztályt a beszélgetés ablakához, vagy ilyesmi

    Szándékosan készítettem, így ha egy beszélgetésben láthatatlan üzenetek vannak, akkor stílusát adhatja annak ablakához, ahogy tetszik. Megváltoztathatja az ablak színét, villogni tudja, vagy bármit is akar.

    Ezen kívül vannak findConv, ConvRendered, ConvMessagesVisibility függvények. Ezeket a funkciókat mind a típusú csevegésekhez, mind a privát, mind a csoportos beszélgetésekhez használjuk.

    Hozzon létre egy megosztott könyvtárat:

    eszközök / JavaScriptek / csatornák / közös

    Hozzon létre egy vestés.js fájlt ebben a könyvtárban.

    Az üzenetküldőt a kódban elég sokat megemlítik, és még nem létezik a futár. A messenger külön lesz a beszélgetések megnyitásának módja. A jövőben sok apró változás elkerülése érdekében az eseteket a messengerbe beépítem.

    Ennyi, a valós idejű funkcionalitásnak működnie kell. Mind a felhasználónak, mind a feladónak, mind a címzettnek új üzeneteket kell fogadnia és megjeleníteni a DOM-on. Amikor új üzenetet küldünk, azt azonnal látni kell az üzenetlistához csatolva. De van egy kis probléma. A beszélgetési ablak megjelenítésének egyetlen módja van. Csak akkor jelenik meg, ha egy beszélgetés létrejön. A beszélgetések ablakainak egy pillanatra történő megjelenítéséhez további módszereket adunk hozzá. De ezt megelőzően nézzük át, hogy az adatok miként érik el a csatorna előfizetőit.

    1. Egy új Privát :: Üzenetrekord létrehozása után a after_create_commitmethod aktiválódik, amely meghívja a háttér feladatot
    2. Privát :: MessageBroadcastJob feldolgozza a megadott adatokat és továbbítja azokat a csatorna előfizetőinek
    3. Az ügyféloldalon hívják a fogadott visszahívási funkciót, amely adatokat csatol a DOM-hoz

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "Új üzenet küldése
    - A Privát :: üzenetben definiáljon egy utólagos létrehozás-visszahívási módszert.
    - Hozzon létre egy privát :: MessageBroadcastJob-ot
    - Adja meg a vett funkciót a
      eszközök / JavaScriptek / csatornák / private / conversation.js
    - Hozzon létre egy pokalb.js-t a
      eszközök / JavaScriptek / csatornák / megosztott”

    A navigációs sáv frissítése

    A navigációs sávban felsoroljuk a felhasználói beszélgetések listáját. Amikor megnyitja a beszélgetések listáját, szeretnénk látni a legutóbbi üzenetek szerint rendezett beszélgetéseket. A legújabb üzenetekkel folytatott beszélgetések a lista tetején lesznek. Ennek a listának a teljes alkalmazásban hozzáférhetőnek kell lennie. Tehát az ApplicationController-ben tárolja a megrendelt felhasználói beszélgetéseket egy példányváltozón belül. Javaslom, hogy ezt meghatározzuk az all_ordered_conversations metódust a vezérlőn belül

    Adjon hozzá egy before_action szűrőt, így a @all_conversations példányváltozó mindenhol elérhető.

    művelet előtt: összes rendezett_beszélgetés

    Ezután hozzon létre egy OrderConversationsService szolgáltatást, hogy gondoskodjon a beszélgetések lekérdezéséről és megrendeléséről.

    Jelenleg ez a szolgáltatás csak a magánbeszélgetésekkel foglalkozik, ez az egyetlen olyan típusú beszélgetés, amelyet eddig fejlesztettünk. A jövőben a privát és a csoportos beszélgetéseket összekeverjük, és a legfrissebb üzeneteik szerint rendezzük őket. A rendezési módszer a tömb beszélgetések rendezésére szolgál. Ismét, ha nem használnánk a beépített módszert, akkor N + 1 lekérdezési problémát tapasztalunk. Mivel a beszélgetések rendezésekor ellenőrizzük minden beszélgetés legújabb üzenetének létrehozásának dátumát, és összehasonlítjuk őket. Ez az oka annak, hogy a lekérdezésbe beillesztettük az üzenetek rekordjait.

    A <=> operátor értékeli, hogy melyik létrehozott_érték magasabb. Ha használjuk
    a <=> b, az adott tömb növekvő sorrendbe rendezhető. Ha az értékeket ellentétes módon értékeli, b <=> a, akkor a tömb csökkenő sorrendbe rendezi.

    Még nem határoztuk meg az all_by_user hatókörét a Private :: Conversationmodelben. Nyissa meg a modellt és határozza meg a hatókört:

    Írjon specifikációkat a szolgáltatásra és a hatályra:

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "
    - Hozzon létre egy OrderConversationsService szolgáltatást, és adjon hozzá specifikációkat ehhez
    - Adjon meg egy all_by_user hatókört a Private :: Conversation belül
      modell és adjon hozzá specifikációkat "

    Most a nézetekben hozzáférhetünk egy sor rendezett beszélgetéshez. Készítsük el hivatkozásuk listáját. Amikor a felhasználó valamelyikre kattint, a beszélgetési ablak megjelenik az alkalmazásban. Ha emlékszel, a navigációs sávnak két fő összetevője van. Az egyik összetevőn belül az elemek folyamatosan megjelennek. Egy másik összetevőn belül az elemek összeomlanak a kisebb eszközökön. Tehát a navigációs fejlécben, ahol az összetevők állandóan láthatók, a beszélgetések legördülő menüjét fogjuk létrehozni. Mint általában, a nagy nézetű fájl elkerülése érdekében ossza meg több kisebbre.

    Nyissa meg a navigáció _header.html.erb fájlját, és cserélje le annak tartalmát a következőkre:

    Hozzon létre egy fejléckönyvtárat egy _toggle_button.html.erb fájllal

    Ez egy váltógomb, amelyet korábban a _header.html.erbfile tartalmazott. Hozzon létre egy másik fájlt a fejléc könyvtárában

    És ez a home gomb a _header.html.erb webhelyen. Itt van egy további link is. Kisebb eszközökön az alkalmazás neve helyett ikon jelenik meg.

    Nézz vissza a _header.html.erb fájlra. Van egy segítő módszer, a nav_header_content_partials, amely egy sor partíció útvonalát adja vissza. Azért nem mi csak a partíciókat jelenítjük meg egyenként, mert a tömb különféle esetekben különbözik. A NavigationHelper-en belül határozza meg a módszert

    Írjon specifikációkat a navigációs_helper_spec.rb metódusában

    Most hozza létre a szükséges fájlokat a navigációs sáv legördülő menüinek megjelenítéséhez. Kezdje egy _dropdowns.html.erb fájl létrehozásával

    Hozzon létre egy legördülő mappát egy _conversations.html.erb fájllal

    Itt használjuk a vezérlőben korábban meghatározott @all_conversations példányváltozót, és hivatkozásokat mutatunk a megnyitott beszélgetésekhez. A különféle típusú beszélgetések linkei különböznek. Két különféle link-változatot kell létrehoznunk a magán- és a csoportos beszélgetésekhez. Először határozza meg a Pokol_Hajtó_partner_út útmutatót a NavigationHelperben

    Írjon specifikációkat ehhez:

    Természetesen még nem tettünk semmit a csoportos beszélgetésekkel. Tehát egy rövid időre meg kell kommentálnia a csoportbeszélgetés részét a szemüvegben, hogy elkerülje a kudarcot.

    Hozzon létre egy fájlt a privát beszélgetések linkjeihez:

    Határozza meg a private_conv_seen_status segítő módszert egy új Megosztott :: ConversationsHelperben

    Adja hozzá ezt a modult a Privát :: ConversationsHelperhez

    tartalmazza a megosztott :: beszélgetések segítőjét

    A szemüveg belsejében hozzon létre egy megosztott könyvtárat a conversations_helper_spec.rbfile fájllal a private_conv_seen_status segítő módszer teszteléséhez.

    Ha egy beszélgetés linkjére kattintanak, meghívja a Private :: Conversationcontroller nyitott műveletét. Adjon meg egy útvonalat ehhez a művelethez. A route.rb fájlba írjon be egy hozzászólást: nyílt tag a névspecifikus privát beszélgetések forrásán belül, közvetlenül a bejegyzés alatt: bezár.

    Természetesen ne felejtsd el magát a műveletet a vezérlőn belül meghatározni:

    Most megnyílik egy beszélgetési ablak, amikor rákattint a linkre. A navigációs sáv jelenleg rendetlen, gondoskodnunk kell annak kialakításáról. A legördülő menük stílusához adjon hozzá CSS-t a navigation.scss fájlhoz.

    Frissítse a maximális szélesség: 767px adathordozó-lekérdezést a mobile.scss fájlban

    Frissítse a minimális szélesség: 767px médiakeresést a desktop.scss fájlban

    Az alkalmazás most így néz ki

    Ezután kibővítheti a beszélgetések listáját

    Bármelyik menü linkre kattintva egy beszélgetési ablak jelenik meg az alkalmazásban

    Ha megpróbálja lekérdezni a böngésző méretét, a beszélgetéseket egyenként el kell rejteni

    Vegye figyelembe azt is, hogy a collabfield embléma helyett most van a kezdőlap ikonja. És a beszélgetések listája továbbra is elérhető a kisebb képernyőkön. Nos, ha a beszélgetések ablakai kisebb eszközökön vannak elrejtve, hogyan fognak a felhasználók kommunikálni a mobil eszközökön? Létrehozunk egy üzenetküldőt, amelyet a beszélgetési ablak helyett nyitunk meg.

    Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "A beszélgetések hivatkozásainak legördülő menüjét jeleníti meg
    - ossza el az elrendezéseket / navigáció / _header.html.erb fájl tartalmát partíciókra
    - Hozzon létre egy _toggle_button.erb.html elrendezést / navigációt / fejlécet
    - Hozzon létre egy _home_button.html.erb belső elrendezéseket / navigációs / fejlécet
    - Adjon meg egy nav_header_content_partial elemet a NavigationHelper alkalmazásban
      és írjon rá specifikációkat
    - Hozzon létre egy _dropdowns.html.erb fájlt az elrendezések / navigáció / fejléc belsejében
    - Hozzon létre egy _conversation.html.erb fájlt
      layouts / navigáció / fejléc / dropdown
    - Adjon meg egy vestés_header_partial_útot a NavigációsHelperben
      és írjon rá specifikációkat
    - Hozzon létre egy _private.html.erb fájlt
      layouts / navigáció / fejléc / dropdown / beszélgetések
    - Adjon meg egy private_conv_seen_status-ot belül
      Shared :: ConversationsHelper, és írjon specifikációkat ehhez
    - Adjon meg egy nyitott műveletet a Private :: Conversations vezérlőn
    - CSS hozzáadása a stílus legördülő menükhöz a navigációs sávon.
      A navigációs.scss, a mobile.scss és az desktop.scss belső oldalán "

    Jó idő ellenőrizni, hogy a valós idejű üzenetküldés minden funkciója megfelelően működik-e.

    Mivel az elemeket dinamikusan adjuk hozzá a DOM-hoz, néha az elemeket későn adják hozzá, és a Capybara szerint egy elem nem létezik, mert alapértelmezés szerint a várakozási idő csak 2 másodperc. Ezen hibák elkerülése érdekében a rails_helper.rb belül változtassa meg a várakozási időt 5-10 másodperc között.

    A specifikációk / szolgáltatások / magán / beszélgetések mappában hozzon létre egy window_spec.rb fájlt.

    Itt még nem határoztam meg a specifikációt annak tesztelésére, hogy a címzett felhasználó valós időben fogad-e üzeneteket. Próbáld ki kitalálni, hogyan írhatsz ilyen teszteket egyedül.

    Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "Specifikációk hozzáadása a beszélgetési ablak funkcionalitásának teszteléséhez"

    Ha olyan fiókba jelentkezett be, amely üzeneteket kapott, észrevehet egy beszélgetést, amelyet láthatatlanként megjelölt

    Jelenleg nincs mód a beszélgetések megjelölésére. Alapértelmezés szerint egy új üzenetnek láthatatlan értéke van. Programozza az alkalmazást oly módon, hogy amikor egy beszélgetési ablakot megnyitnak vagy rákattintanak, az üzenet láthatóan megjelölésre kerül. Azt is vegye figyelembe, hogy jelenleg csak a kiemelt nem látott beszélgetéseket látjuk, amikor a legördülő menü kibővül. A jövőben létrehozunk egy értesítési funkciót, így a felhasználók tudni fogják, hogy új üzeneteket kaptak anélkül, hogy bármit kibővítettek volna.

    Keressük meg az első problémát. Ha egy beszélgetés már megjelenik az alkalmazáson, de összeomlik, és a felhasználó a legördülő menü linkjére kattintva megnyitja a beszélgetést, semmi sem történik. Az összeomlott beszélgetés összeomlott marad. Hozzáadtunk némi JavaScriptet, tehát a legördülő menü link kattintása esetén a beszélgetésnek kibővítenie kell és koncentrálnia kell az új üzenet területére.

    Nyissa meg az alábbi fájlt, és adja hozzá a Gist kódját.

    eszközök / JavaScriptek / beszélgetések / toggle_window.js

    Ha egy linkre kattint, megnyit egy beszélgetési ablakot, függetlenül attól, hogy egy beszélgetés már jelen van-e az alkalmazásban, vagy sem, az kibővül.

    Most szükségünk van eseménykezelőre. Miután rákattintott egy olyan üzenetküldő ablakra, amelyen láthatatlan üzenetek vannak, a magánbeszélgetés kliensének fel kell hívnia egy visszahívási funkciót. Először határozza meg az eseménykezelőt a magánbeszélgetési kliens oldalán, a fájl alján

    A messenger létezésének esete már szerepel ebben a kódrészletben.

    Ezután határozza meg a visszahívási függvényt a private_conversation példányon belül, közvetlenül a send_message függvény alatt

    Végül definiálja ezt a módszert a szerver oldalán

    Miután a felhasználó rákattint egy linkre a beszélgetési ablak megnyitásához, vagy közvetlenül a beszélgetési ablakra kattint, a láthatatlan üzeneteket megjelöljük.

    Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "Add hozzá a láthatatlan üzenetek megjelölésének képességét
    - Adjon hozzá eseménykezelőt a beszélgetési ablakok kibontásához a
      eszközök / JavaScriptek / beszélgetések / toggle_window.js
    - Adjon hozzá eseménykezelőt a láthatatlan üzenetek megjelöléséhez, ahogyan az látható
      eszközök / JavaScriptek / csatornák / private / conversation.js
    - Határozza meg a set_as_seen metódust a Private :: ConversationChannel számára "

    A specifikációk írásával győződjön meg arról, hogy minden úgy működik, ahogy elvárjuk.

    Kapcsolatok

    Az emberekkel való kapcsolattartás érdekében megismerkedhettél az alkalmazásban, képesnek kell lennie arra, hogy felvegye őket a névjegyekbe. Jelenleg hiányzik ez a funkció. A névjegy-funkcióval is nagyon sok lehetőség nyílik más funkciók létrehozására, amelyeket csak azok a felhasználók használhatnak, akiket kapcsolattartóként fogadnak el.

    Létrehoz egy kapcsolat modellt

    sínek g modellérintkező

    Definiálja az asszociációkat, az érvényesítést és a kapcsolattartói rekord megtalálásának módszerét a felhasználói azonosítók megadásával.

    Határozza meg a névjegyek tábláját

    Szükség lesz egy kapcsolatgyárra. Definiálja:

    Írjon specifikációkat a modell teszteléséhez

    Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "Hozzon létre egy kapcsolattartó modellt és írjon rá specifikációt"

    A felhasználói modell fájljában meg kell határoznunk a megfelelő asszociációkat, és meg kell határoznunk néhány módszert is, amely segíthet a névjegyekkel kapcsolatos kérdésekben.

    Fedje le az asszociációkat és módszereket a specifikációkkal

    Végezze el a változtatásokat

    adj hozzá -A
    "Add asszociációk és segítő módszerek a felhasználói modellhez
    - Hozzon létre kapcsolatot a Felhasználó a kapcsolat modellek között
    - A módszerek segítenek lekérdezni a kapcsolattartói rekordokat "

    Generáljon egy névjegyvezérlőt, és határozza meg annak műveleteit

    sínek g vezérlő érintkezői

    Mint látja, a felhasználók új névjegyrekordot hozhatnak létre, frissíthetik annak állapotát (elfogadhatják a felhasználót a névjegyzékbe), és eltávolíthatják a felhasználót a névjegyzékükből. Mivel az összes műveletet az AJAX-en keresztül hívják meg, és nem akarunk válaszként sablonokat megjeleníteni, ezért sikerrel válaszolunk. Ilyen módon Rails-nek nem kell arra gondolni, hogy mire válaszoljon.

    Határozza meg a megfelelő útvonalakat:

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "Hozzon létre egy ContactsController elemet, és határozza meg annak útvonalait"

    A privát beszélgetés ablakának frissítése

    A privát beszélgetés ablakon keresztül a felhasználók hogyan tudnak küldeni és elfogadni névjegykéréseket. Később hozzáadunk egy további módszert a kérelmek elfogadására a navigációs sáv legördülő menüjében.

    Hozzon létre egy új címsort

    privát / beszélgetések / beszélgetés / címsor

    Itt tárolunk további lehetőségeket a privát beszélgetés ablakához. A könyvtárban hozzon létre egy _add_user_to_contacts.html.erb fájlt

    Az _heading.html.erb fájl alján adja meg a lehetőséget, hogy a beszélgetés ellentétes felhasználóját hozzáadja a névjegyekhez:

    Határozza meg a segítő módszert és a további módszereket magántulajdonban

    Írjon specifikációkat ezekre a segítő módszerekre

    Az instance_eval módszert magánjellegű módszerek tesztelésére használják.

    Mivel a lehetőségeket a beszélgetőablak fejlécelemén fogjuk megjeleníteni, ellenőriznünk kell, hogy a kiegészítő opciók tökéletesen illeszkedjenek a fejlécbe. Az _heading.html.erb fájl belsejében cserélje ki a beszélgetési címsort
    osztály <% = conv_heading_class (@contact)%> -kal, hogy meghatározza, melyik osztályt kell hozzáadni.

    Határozza meg a segítő módszert

    Írjon specifikációkat a módszerhez

    A kapcsolattartási kérelem küldésének vagy elfogadásának lehetőségei még nem jelennek meg. További elemeket kell hozzáadni. Nyissa meg a _conversation.html.erb fájlt

    privát / beszélgetések / _conversation.html.erb

    A fájl tetején definiáljon egy @contact instane változót, így az elérhető minden partíción

    Definiálja a get_contact_record helper módszert

    Fedje le a módszert specifikációkkal

    Korábban a current_user és a címzett let módszereket csak privát hatókörű környezetben használtuk. Most hozzáféréssel kell hozzájuk férni mind magán, mind nyilvános módon. Tehát vágja le és tegye őket a magánjellegű területeken kívül.

    Az .panel-body elem tetején hozzon létre egy részleges fájlt, amely egy extra üzenőablakot jelenít meg a kapcsolattartási kérés elfogadásához vagy elutasításához

    Hozza létre a _request_status.html.erb fájlt

    Határozza meg a szükséges segítő módszereket

    Specifikációkat ír a segítő módszerekhez

    Hozza létre a request_status könyvtárat, majd hozzon létre _send_request.html.erb, _sent_by_current_user.html.erb és _sent_by_recipient.html.erb részleges fájlokat.

    Végezze el a változtatásokat

    adj hozzá -A
    "Adj meg egy gombot a privát beszélgetés ablakához
    címzett felvétele a névjegyekbe "

    Végezzen el a tervezési változtatásokat, és vigyázzon a stílusproblémákra, amelyek a beszélgetőablakban található kiegészítő elemek miatt merülnek fel. Adja hozzá a CSS-t a convers_window.scssfájlhoz

    Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "CSS hozzáadása a vestés_window.scsshez a stílusbeállítás gombjaihoz"

    Ha a beszélgetési ablak összeomlik, akkor jobb, ha nem jelenít meg semmilyen lehetőséget. Kényelmesebb kialakítás, ha a lehetőségeket csak akkor látja, ha a beszélgetési ablak kibővül. Ennek elérése érdekében a toggle_window.js fájl váltó funkciójában, közvetlenül az messages_visible változó alatt adjunk hozzá

    Most az összecsukott ablak így néz ki, nincs látható lehetősége

    A kibővített ablak lehetőséget ad arra, hogy a felhasználót felvegye a névjegyekbe. Van egy üzenet is, amely ezt javasolja

    Valójában azonnal elküldheti és elfogadhatja a kapcsolattartási kérelmet, ha rákattint egy ikonra a beszélgetés fejlécében, vagy pedig a Hozzáadás névjegyekhez linkre. Egyelőre nem érkezik válasz, miután rákattintott ezekre a linkekre és gombokra. Kicsit később hozzáadunk egy visszajelzést és a valós idejű értesítési rendszert. De technikailag felveheti a felhasználókat a kapcsolatokba, ez még nem nagyon felhasználóbarát.

    Miután elküldte a kapcsolatfelvételi kérelmet, a másik felhasználó oldala így néz ki

    Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "A JS hozzáadása a toggle_window.js fájlhoz a további lehetőségek megjelenítéséhez és elrejtéséhez"

    Jelenleg a felhasználók privát módon beszélgethetnek, egymás után beszélgethetnek egymással. Mivel az alkalmazás az együttműködésről szól, logikus lenne csoportos beszélgetéseket folytatni.

    Kezdje egy új modell létrehozásával

    sínek g modellcsoport / beszélgetés

    Több felhasználó részt vehet egy beszélgetésben. Definiálja az asszociációkat és az adatbázis táblát

    A csatlakozási táblázatot arra használjuk, hogy nyomon kövessük, hogy melyik csoportos beszélgetéshez tartozik

    Ezután hozzon létre egy modellt az üzenetekhez

    sínek g modellcsoport / üzenet

    A felhasználói azonosítókat tömbbe tároljuk, akik üzenetet láttak. Objektumok - például tömb - létrehozásához és kezeléséhez az adatbázis oszlopban egy sorosítási módszert kell használni. Alapértelmezett hatókör a lekérdezések mennyiségének minimalizálása érdekében, és néhány ellenőrzés hozzáadva.

    A csoportos beszélgetések felépítésének módja nagyon hasonló a magánbeszélgetésekhez. Valójában a stílus és a részek közösek lesznek mindkét típusú beszélgetés között.

    Írjon specifikációkat a modellekhez. Szintén szükség lesz a csoportüzenetek gyárára

    Határozza meg az áttelepítési fájlokat

    Meghatározzák a csoportbeszélgetés alapjait.

    Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "Csoport létrehozása :: Beszélgetés és csoport :: Üzenet modellek
    - Definiálja a társulásokat
    - Specifikációk írása "

    Hozzon létre egy csoportos beszélgetést

    Mint korábban említettem, a csoportos beszélgetés létrehozásának folyamata hasonló lesz ahhoz, mint amit a magánbeszélgetésnél tettünk. Először hozzon létre egy vezérlőt és egy alap felhasználói felületet.

    Generáljon névtér-vezérlőt

    sínek g vezérlőcsoport / beszélgetések

    A vezérlőn belül definiálhat egy létrehozási műveletet és add_to_conversations, már hozzáadva? és hozzon létre csoportos beszélgetési módszereket magántulajdonban

    Az új csoportos beszélgetés létrehozása némi bonyolultsággal jár, ezért kibontjuk azt egy szolgáltatási objektumba. Akkor van add_to_conversations és juba_added? magán módszerek. Ha emlékszel, akkor ezeket a Private :: ConversationsController is tartalmaz, de ezúttal a csoportbeszélgetések azonosítóit tárolja a munkamenetbe.

    Most határozza meg a Group :: NewConversationService szolgáltatást egy új csoportkönyvtárban

    Egy új csoportos beszélgetés létrehozásának módja valójában egy privát beszélgetésen alapul. Ezt a felületet lehetőségként létrehozjuk a magánbeszélgetés ablakában. Mielőtt ezt megtenné, ellenőrizze, hogy a szervizobjektum megfelelően működik-e. A szolgáltatásokon belül hozzon létre egy új könyvtári csoportot egy új_konverzió_szolgáltatás_spec.rb fájllal

    Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "Háttér létrehozása új csoportbeszélgetés létrehozásához
    - Hozzon létre egy csoportot :: ConversationsController
      Adjon meg egy létrehozási műveletet és add_to_conversations,
      létrehozás_csoport_beszélgetés és már hozzáadva? magán módszerek belül
    - Hozzon létre egy csoportot :: NewConversationService és írjon rá specifikációt "

    Adja meg a csoportbeszélgetés útvonalait és annak üzeneteit

    Végezze el a változtatásokat

    adj hozzá -A
    git koncent -m "Specifikáció meghatározása a csoport számára: Beszélgetések és üzenetek"

    Jelenleg csak az ApplicationController magánbeszélgetésein dolgozunk. Csak privát beszélgetéseket rendeznek, és csak azok azonosítói állnak rendelkezésre, miután a felhasználó megnyitotta őket, és az alkalmazáson keresztül elérhetők. Az ApplicationController-en belül frissítse az Open_conversations_windows módszert

    Mivel a beszélgetések rendelése a OrderConversationsService segítségével történik, ezt a szolgáltatást frissíteni kell

    Korábban csak a privát beszélgetések tömbje volt, és a legfrissebb üzenetek létrehozásának dátuma szerint rendeztük. Most vannak privát és csoportos beszélgetési tömbök, majd egyesítjük őket egy tömbbe, és ugyanúgy rendezzük, mint korábban.

    Frissítse a specifikációkat is

    Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "Adatok beolvasása csoportos beszélgetésekhez az ApplicationController alkalmazásban
    - Frissítse a megnyitott_beszélgetések_ablak-módszert
    - Frissítse a OrderConversationsService "

    Csak egy pillanat alatt át kell adnunk néhány adatot a vezérlőtől a JavaScript-hez. Szerencsére már telepítettük a gon gem-et, ami lehetővé teszi számunkra, hogy ezt könnyen elvégezzük. Az ApplicationController belsejében, magántulajdonban, add

    Használja a before_action szűrőt a módszer meghívására

    művelet előtt: set_user_data

    Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "A set_user_data magán módszer meghatározása az ApplicationController alkalmazásban"

    Technikailag új csoportbeszélgetést készíthetünk most, de a felhasználóknak nincs felületük erre. Mint már említettük, ezt privát beszélgetés útján fogják megtenni. Hozzuk létre ezt a lehetőséget a privát beszélgetés ablakában.

    Benne

    megtekintés / private / beszélgetések / beszélgetés / címsor

    könyvtár hozzon létre egy új fájlt

    A collection_select módszer a felhasználók listájának megjelenítésére szolgál. Csak a kapcsolattartó felhasználók kerülnek a listára. Határozza meg a contact_except_recipient helper módszert

    Írjon specifikációkat a módszerhez

    Rendeld meg a _heading.html.erb alján található részletet

    Határozza meg a segítő módszert

    Tekerje be specifikációkkal

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "UI hozzáadása a privát beszélgetéshez csoportos beszélgetések létrehozásához"

    Adjon hozzá egy CSS-t az összetevő stílusához, amely lehetővé teszi egy új csoportos beszélgetés létrehozását

    A névjegyek kiválasztása alapértelmezés szerint el van rejtve. A választás megnyitásához a felhasználónak rá kell kattintania a gombra. A gomb még nem interaktív. Hozzon létre egy options.jsfile fájlt a JavaScripten belül, hogy a választási lista válthatóvá váljon.

    Most egy beszélgetési ablak a címzetttel, aki kapcsolattartó, így néz ki

    Van egy gomb, amely megnyitja a névjegyek listáját, mellyel csoportos beszélgetést hozhat létre, amikor rákattint

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "
    - Mutassa be a csoportos beszélgetés létrehozásának stílusát
    - A beállítás válthatóvá tétele "

    A rendezett beszélgetések listája, beleértve a csoportos beszélgetéseket is, a navigációs sáv legördülő menüjében jelenik meg. Ha emlékszel, különféle partíciókat határozott meg a különféle típusú beszélgetésekhez. Amikor az alkalmazás megkísérel hivatkozást létrehozni, és egy csoportos beszélgetést nyit meg, más fájlt fog keresni, mint egy privát beszélgetést. A fájl még nincs létrehozva.

    Hozzon létre egy _group.html.erb fájlt

    Határozza meg a group_conv_seen_status segítő módszert a Megosztott :: BeszélgetésekHelperben

    Írjon specifikációkat a módszerhez

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "Link létrehozása a navigációs sávon egy csoportos beszélgetés megnyitásához"

    A csoportos beszélgetések ablakai megjeleníthetők az alkalmazásban, ugyanúgy, mint a magánbeszélgetések. Az application.html.erb belsejében, közvetlenül a lebonyolított privát beszélgetések alatt, adja hozzá:

    Hozzon létre egy részleges fájlt a csoportos beszélgetések ablakai egyenkénti megjelenítéséhez:

    Vállalja a változást.

    adj hozzá -A
    "csoportos beszélgetések ablakai megjeleníthetők a
    application.html.erb”

    Van egy mechanizmus, amellyel a csoportbeszélgetések létrehozhatók és megjeleníthetők az alkalmazásban. Most építsünk maga egy beszélgetési ablakot.

    A csoport / beszélgetések könyvtárban hozzon létre egy _conversation.html.erbfile fájlt.

    Adja meg az add_people_to_group_conv_list helper módszert:

    Írjon specifikációkat a segítőnek:

    Csakúgy, mint a magánbeszélgetések esetén, a csoportos beszélgetések az egész alkalmazásban hozzáférhetővé válnak, így nyilvánvalóan mindenhol hozzáférnünk kell a Group :: ConversationsHelper módszereket. Adja hozzá ezt a modult az ApplicationHelper-hez

    tartalmazzák a Group :: ConversationsHelper csoportot

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "
    - Hozzon létre egy _conversation.html.erb fájlt a csoportban / beszélgetésekben
    - Adjon meg egy add_people_to_group_conv_listot, és írjon rá specifikációt "

    Hozzon létre egy új beszélgetési könyvtárat egy _heading.html.erb fájllal a következő belül:

    Vállalja a változást.

    adj hozzá -A
    "Hozzon létre egy _heading.html.erb fájlt a
    csoport / beszélgetések / beszélgetés”

    Ezután a _select_user.html.erb és _messages_list.html.erb részleges fájlokkal rendelkezünk. Hozza létre őket:

    Határozza meg a load_group_messages_partial_path helper módszert:

    Tekerje be specifikációkkal:

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "
    - Hozzon létre _select_user.html.erb és _messages_list.html.erb fájlokat
      csoport / beszélgetések / beszélgetés
    - Adjon meg egy load_group_messages_partial_path helper módszert
      és írj rá specifikációt "

    Hozzon létre egy _link_to_prevable_messages.html.erb fájlt, hogy legyen egy link, amely betölti az előző üzeneteket:

    Vállalja a változást.

    adj hozzá -A
    "hozzon létre egy _load_messages.html.erb fájlt a
    csoport / beszélgetések / beszélgetés / messages_list”

    Hozzon létre egy új üzenet űrlapot

    Vállalja a változást.

    adj hozzá -A
    git activ -m "Hozzon létre egy _new_message_form.html.erb fájlt a
    csoport / beszélgetések / beszélgetés /”

    Az alkalmazás most képes csoportos beszélgetések ablakaira is megjeleníteni.

    De ezek még nem működnek. Először be kell töltenünk az üzeneteket. Szükségünk van vezérlőre az üzenetek és a nézetek megjelenítéséhez. Generáljon üzenetek vezérlőt:

    sínek g vezérlőcsoport / üzenetek

    Vegye fel az Üzenetek modult az aggodalmakból, és határozza meg az indexműveletet:

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "Csoport létrehozása :: MessagesController és definiál egy indexműveletet"

    Hozzon létre egy _load_more_messages.js.erb fájlt

    Már korábban meghatároztuk az append_prevable_messages_partial_path és az remove_link_to_messages segítő módszereket. Csak a repla_link_to_group_messages_partial_path helper módszert kell meghatároznunk

    Ez a módszer, akárcsak a magánoldalon, ismét „intelligensebb” lesz, mihelyt kidolgozzuk a hírnököt.

    Hozza létre a _replace_link_to_messages.js.erb fájlt

    A Group :: MessagesHelper-t is hozzáadhatja az ApplicationHelper-hez

    tartalmazzák a Group :: MessagesHelper szolgáltatást

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "_load_more_messages.js.erb létrehozása a csoporton belül / üzenetek"

    A csoportos beszélgetések jelenleg csak az inicializálás után nyithatók meg. Ez nyilvánvalóan nem izgalmas dolog, mert ha elpusztítja a munkamenetet, nincs lehetőség arra, hogy ugyanazt a beszélgetést újra megnyissa. Hozzon létre egy nyitási lehetőséget a vezérlő belsejében.

    Hozza létre a _open.js.erb részleges fájlt:

    Most már a navigációs sáv legördülő menüjeire kattintva megnyithatjuk a beszélgetéseket. Próbáld meg kipróbálni a sajátosságokkal.

    Változtassa meg a változtatásokat.

    adj hozzá -A
    "Add hozzá a képességét a csoportos beszélgetések megnyitásához
    - Hozzon létre egy nyitott műveletet a Csoport :: ConversationsController csoportban
    - Hozzon létre egy _open.js.erb fájlt a csoportban / beszélgetésekben "

    Az alkalmazás megpróbálja üzeneteket megjeleníteni, de nem hoztak létre sablonokat nekik. Hozzon létre egy _message.html.erb fájlt

    Határozza meg a group_message_date_check_partial_path, group_message_seen_by és az message_content_partial_path helper metódusokat.

    A group_message_seen_by módszer visszaadja az üzenetet látó felhasználók listáját. Ez a kevés információ lehetővé teszi számunkra, hogy extra funkciókat hozzunk létre, például bemutatást beszélgetés résztvevőinek, akik üzeneteket láttak, stb. Esetünkben ezeket az információkat használjuk annak meghatározására, hogy egy jelenlegi felhasználó látott-e üzenetet, vagy sem. Ha nem, akkor miután a felhasználó látta, az üzenetet látottként kell megjelölni.

    Szintén szükségünk lesz segítő módszerekre a Megosztott modulból. A Group :: MessagesHelper csoporton belül adja hozzá a modult.

    „megosztott / üzenetek_helper” megkövetelése
    tartalmazza a Megosztott :: MessagesHelper alkalmazást

    Wrap helper módszerek specifikációkkal:

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "Hozzon létre egy _message.html.erb fájlt a csoportban / üzenetekben
    - Definiálja a group_message_date_check_partial_path értéket,
      group_message_seen_by és message_content_partial_path helper
      módszerek és írjon specifikációt nekik "

    Hozzon létre részleges fájlokat az üzenethez:

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "_new_date.html.erb létrehozása,
    _different_user_content.html.erb és _same_user_content.html.erb
    a csoporton belül / üzenetek / üzenet / "

    Most olyan mechanizmusra van szükségünk, amely üzeneteket egyenként továbbít. Hozzon létre egy _messages.html.erb részleges fájlt:

    Vállalja a változást.

    adj hozzá -A
    git activ -m "_messages.html.erb létrehozása csoporton belüli / beszélgetésekben"

    Stílus hozzáadása a csoportüzenetekhez:

    Vállalja a változást.

    adj hozzá -A
    git activ -m "CSS hozzáadása a csoportüzenetekhez a chat_window.scss-ban"

    Funkcionálisvá tegye a bezárás gombot, ha meghatároz egy közeli műveletet a Group :: ConversationsController csoporton belül

    Hozza létre a megfelelő sablon fájlt:

    Változtassa meg a változtatásokat.

    adj hozzá -A
    "Adj hozzá egy szoros csoportbeszélgetési ablakot
    - Adjon meg egy szoros tevékenységet a csoporton belül :: ConversationsController
    - Hozzon létre egy close.js.erb fájlt a csoportban / beszélgetésekben "

    Kommunikáció valós időben

    Csakúgy, mint a magánbeszélgetések esetében, szeretnénk, ha valós időben beszélgetnénk több felhasználóval ugyanabban az ablakban. A szolgáltatás elérésének folyamata nagyjából hasonló lesz ahhoz, amit magánbeszélgetések során tettünk.

    Generáljon új csatornát csoportos beszélgetésekhez

    sínek g csatornacsoport / beszélgetés

    Ezúttal megvizsgáljuk, hogy a felhasználó tartozik-e egy beszélgetésbe, mielőtt létrehozza a kapcsolatot, az pieder_to_conversation módszerrel. A magánbeszélgetésekben egy egyedi csatornáról közvetítettünk az aktuális felhasználó azonosítójának megadásával. Csoportos beszélgetések esetén a beszélgetés azonosítóját átadják az ügyfél oldaláról. Az pieder_to_conversation módszerrel ellenőrizzük, hogy a felhasználók nem végeztek-e manipulációkat, és nem próbálták-e csatlakozni egy olyan csatornához, amelyhez nem tartoznak.

    Vállalja a változást

    adj hozzá -A
    git activ -m "Csoport létrehozása :: ConversationChannel"

    Hozza létre a Group :: MessageBroadcastJob csoportot

    sínek g job group / message_broadcast

    Vállalja a változást.

    adj hozzá -A
    git activ -m "Csoport létrehozása :: MessageBrodcastJob"

    Az utolsó hiányzó puzzle darab maradt - az ügyfél oldala:

    Alapvetően nagyon hasonlít a magánbeszélgetés .js fájljára. A kód elrendezése kissé eltér. A fő különbség az, hogy átadjuk-e a beszélgetés azonosítóját egy csatornának és egy huroknak a fájl tetején. Ezzel a hurokkal összekapcsoljuk a felhasználót a csoportos beszélgetések összes csatornájával. Ez az oka annak, hogy a kiszolgáló oldalán használtuk az pieder_to_conversation módszert. A beszélgetések azonosítói az ügyfél oldaláról kerülnek továbbításra. Ez a szerveroldalon alkalmazott módszer biztosítja, hogy a felhasználó valóban tartozik-e egy adott beszélgetéshez.

    Amikor erre gondolsz, éppen létre tudtuk volna hozni ezt a hurkot a szerver oldalán, és nem kellene foglalkoznunk ezzel a megerősítési folyamattal. De itt van egy oka annak, hogy az ügyfél oldaláról átadjuk a beszélgetés azonosítóját. Amikor új felhasználókat vesz fel egy csoportos beszélgetésbe, azonnal csatlakozni akarunk a beszélgetés csatornájához anélkül, hogy újból kellene betöltenie az oldalt. A megfelelő beszélgetés azonosítója lehetővé teszi számunkra, hogy ezt könnyedén elérjük. A közelgő szakaszban létrehozunk egy egyedi csatornát minden felhasználó számára, amely valós időben értesítéseket kaphat. Amikor új felhasználókat vesz fel a csoportos beszélgetésbe, felhívjuk az subToGroupConversationChannel funkciót az egyedi értesítési csatornákon keresztül, és csatlakoztatjuk őket a csoportos beszélgetés csatornájához. Ha nem engedtük továbbítani egy beszélgetés azonosítóját egy csatornára, akkor az új csatornákkal való kapcsolat csak az oldal újratöltése után jött volna létre. Nem lenne módunk arra, hogy az új felhasználókat dinamikusan csatlakoztassuk egy beszélgetési csatornához.

    Most csoportos üzeneteket küldhetünk és fogadhatunk valós időben. Próbáld meg tesztelni az általános funkcionalitást a szemüveggel.

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "Hozzon létre egy vest.js-t a
    eszközök / JavaScriptek / csatornák / csoport”

    A csoporton belül: ConversationsController definiál egy frissítési műveletet

    Hozza létre a Csoport :: AddUserToConversationService szolgáltatást, amely gondoskodni fog arról, hogy a kiválasztott felhasználó hozzáadódjon egy beszélgetéshez

    Tesztelje a szolgáltatást a specifikációkkal:

    Jelenleg privát és csoportos beszélgetéseket folytatunk. Néhány árnyalattal még hiányzik, amelyeket később megvalósítunk, de az alapvető funkciók itt vannak. A felhasználók képesek kommunikálni egymással, vagy szükség esetén felépíthetnek egy csevegőszobát több emberrel.

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "Csoport létrehozása :: AddUserToConversationService és tesztelés"

    Hírnök

    Mi a célja egy hírnöknek? A mobil képernyőkön a beszélgetési ablak megnyitása helyett az alkalmazás betölti az üzenetküldőt. Nagyobb képernyőkön a felhasználók választhatják, ahol cseveghetnek, a beszélgetési ablakban vagy a messengerben. Ha a messenger kitölti a teljes böngésző ablakot, kényelmesebbnek kell lennie a kommunikációban.

    Mivel ugyanazokat az adatokat és modelleket fogjuk használni, csak beszélgetéseket kell nyitnunk egy másik környezetben. Generáljon új vezérlőt az üzenetküldőben lévő beszélgetés megnyitására irányuló kérelmek kezelésére.

    sínek g vezérlő hírnökök

    Az get_private_conversation és a get_group_conversation műveletek megkapják a felhasználó által kiválasztott beszélgetést. Ezeknek a műveleteknek a sablonjai csatolják a kiválasztott beszélgetést a beszélgetés helyőrzőjéhez. Minden alkalommal, amikor egy új beszélgetést választanak meg a megnyitáshoz, a régi eltávolításra kerül, és helyébe újonnan kiválasztott beszélgetés kerül.

    Határozza meg a műveletek útvonalait:

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git koncent -m "Hozzon létre egy MessengersController-et, és határozza meg annak műveleteinek útvonalait"

    A vezérlőben egy open_messenger művelet. Ennek a műveletnek az a célja, hogy bármely oldalról egyenesen a messengerre menjen, és kiválasztott beszélgetést tegyen. A kisebb képernyőkön a beszélgetési ablakok helyett a messenger segítségével csevegnek. Csak egy pillanat alatt átváltjuk a linkeket a kisebb képernyőkre a beszélgetések megnyitásához a messengerben.

    Hozzon létre egy sablont az open_messenger művelethez

    adj hozzá -A
    git activ -m "Hozzon létre egy open_messenger.html.erb fájlt a / hírnökökben"

    Aztán meglátjuk a ConversationForMessengerSerivce-t, amely lekérdezi a kiválasztott beszélgetés objektumát. Hozza létre a szolgáltatást:

    Adjon hozzá specifikációkat a szolgáltatáshoz:

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "Hozzon létre egy ConversationForMessengerSerivce szoftvert, és adjon hozzá hozzá specifikációkat"

    Hozzon létre egy sablont az indexművelethez:

    Ez maga a hírnök lesz. A messengerben láthatjuk a felhasználói beszélgetések és a kiválasztott beszélgetések listáját. Hozza létre a részleges fájlokat:

    Határozza meg a segítő módszert:

    Próbáld ki magadnak a specifikációkkal próbálni.

    Hozzon létre részleges fájlokat a megnyitott beszélgetések hivatkozásaihoz:

    Most hozzon létre egy részleges beszélgetési helyet, a kiválasztott beszélgetések ott lesznek átalakítva:

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "Sablon létrehozása a MessengersController indexműveletéhez"

    Hozzon létre egy sablont a get_private_conversation művelethez:

    Hozzon létre egy _private_conversation.html.erb fájlt:

    Ez a fájl privát beszélgetést készít a messengerben. Felhívjuk figyelmét arra is, hogy újra felhasználunk néhány partíciót a magánbeszélgetés nézetei közül. Hozza létre a _details.html.erb részletet:

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "Hozzon létre egy sablont a MessengersController számára
    get_private_conversation action "

    Amikor elküldjük az Üzenetküldőt, jobb, ha nem lát legördülő menüket a navigációs sávon. Miért? Nem akarjuk a beszélgetési ablakokat megjeleníteni a messengerben, különben kaotikusnak tűnik. A beszélgetési ablak és az üzenetküldő egyidejűleg ugyanazzal a személlyel csevegni. Ez nagyon hibás lenne.

    Először tiltja, hogy a beszélgetések ablakai megjelenjenek a hírnök oldalán. Nem olyan nehéz megtenni. Ennek ellenőrzéséhez emlékezzen arra, hogy a beszélgetések ablakai hogyan jelenjenek meg az alkalmazásban. Ezeket az application.html.erb fájlban jelenítik meg. Akkor megvannak @private_conversations_windowsand @group_conversations_windows példányváltozók. Ezek a változók a beszélgetések tömbjei. Ahelyett, hogy ezekből a tömbökből folytatna beszélgetéseket, határozza meg a segítő módszereket annak eldöntésére, hogy megadja-e ezeket a tömböket a felhasználóknak, vagy sem, attól függően, hogy melyik oldalon vannak. Ha a felhasználók az üzenetküldő oldalán vannak, akkor üres tömböt kapnak, és nem beszélgetések ablakai. meg lesz jelenítve.

    Cserélje le ezeket a példányváltozókat a private_conversations_windows és a group_conversations_windows helper metódákra. Most határozza meg őket az ApplicationHelperben

    Tekerje be specifikációkkal

    Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "
    Definiálja a privát_beszélgetések_ablakokat és a csoportos megbeszéléseket
    segítő módszerek az ApplicationHelperben és tesztelésük "

    Ezután hozzon létre egy alternatív részleges fájlt a navigációs fejléchez, így a legördülő menük nem jelennek meg. A NavigationHelperben korábban meghatároztuk a nav_header_content_partials segítő módszert. Meghatározza, mely navigációs fejlécet kell megjeleníteni.

    Benne

    layouts / navigáció / header

    könyvtárban hozzon létre egy _messenger_header.html.erb fájlt

    Stílusos a messenger. Hozzon létre egy messenger.scss fájlt a partialsdirectoryban

    Vállalja a változást

    adj hozzá -A
    git activ -m "Messenger.scss létrehozása a partíciókon"

    A desktop.scsson belül, a minimális szélességben: 767px, add

    Ha rákattintunk egy beszélgetésre, hogy megnyissuk, szeretnénk képes lenne betölteni az előző üzeneteket. Hozzáférhetünk egy látható linket a betöltésükhöz. Vagy automatikusan betölthetünk bizonyos mennyiségű üzenetet, amíg meg nem jelenik a görgetősáv, így a felhasználó felfelé görgetve tölthet be korábbi üzeneteket. Hozzon létre egy helper módszert, amely gondoskodik róla

    Tesztelje saját szemüvegével. Hozza létre a részleges fájlokat

    Végezze el a változtatásokat

    adj hozzá -A
    "adjon meg egy autoload_messenger_messages fájlt a
    Megosztott :: MessagesHelper”

    Használja a helper módszert az _load_more_messages.js.erb fájlban, közvetlenül a <% = render remove_link_to_messages%> felett>

    Most már append_prevable_messages_partial_path és
    substit_link_to_private_messages_partial_path helper módszerek, amelyeket frissítenünk kell, hogy azok kompatibilisek legyenek a messengerrel

    Hozzon létre egy hiányzó részleges fájlt

    Frissítsen egy másik módszert

    Hozza létre a részleges fájlt

    Tesztelje a helper módszereket saját szemüvegével.

    Végezze el a változtatásokat

    adj hozzá -A
    git activ -m "
    - Frissítse az append_prevable_messages_partial_path helper módszert a
      Megosztott :: MessagesHelper
    - Frissítse a repla_link_to_private_messages_partial_path módszert a
      Egyéni :: MessagesHelper”

    Most, miután a kezdeti betöltési üzenetek linkre kattintottak, az alkalmazás automatikusan folytatja a korábbi üzenetek betöltését, amíg egy gördítősáv nem lesz az üzenetlistában. Annak érdekében, hogy az első kattintás megtörténjen, adjon hozzá némi JavaScriptet:

    Amikor meglátogatja a / messenger útvonalat, megjelenik a messenger:

    Ezután bármelyik beszélgetést megnyithatja.

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "Messenger.js létrehozása"

    Most a kisebb képernyőkön, amikor a felhasználók a navigációs sáv linkjére kattintanak egy beszélgetés megnyitásához, beszélgetésüket a messengerben, a beszélgetési ablak helyett kell megnyitni. Ennek lehetővé tétele érdekében különféle linkeket kell létrehoznunk a kisebb képernyőkhöz.

    A navigáció _private.html.erb részleges részén, amely egy linket tárol a magánbeszélgetés megnyitásához, adjon hozzá további linket a kisebb képernyő-eszközökhöz. Adja hozzá ezt a linket közvetlenül a fájlban található open_private_conversation_path elérési út linkjének alá

    Kisebb képernyőkön ez a link jelenik meg az előző helyett, a nagyobb képernyők számára. Adjon hozzá további linket a csoportos beszélgetések megnyitásához

    A különféle képernyőméretekben eltérő hivatkozásokat látunk azért, mert korábban a CSS-t állítottuk be a nagyobb képernyő-link és a kisebb képernyő-link osztályokhoz.

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "A _private.html.erb és _group.html.erb belsejében, a
    elrendezések / navigáció / fejléc / legördülő / beszélgetések, alternatívát adhat hozzá
    linkek kisebb eszközöknek a beszélgetések megnyitásához "

    A Messenger verziói az asztali és a mobil eszközökön kissé eltérnek. Írjon be néhány JavaScript-t az messenger.js-be, így miután a felhasználó rákattint egy beszélgetés megnyitására, a js eldönti, hogy megjeleníti-e a mobil verziót, vagy sem.

    Amikor megnyit egy beszélgetést egy mobil eszközön, ez így néz ki

    Vállalja a változást.

    adj hozzá -A
    git activ -m "Adja hozzá a JavaScriptet az messenger.js fájlhoz, hogy mást jelenítsen meg
    messenger verziója mobil eszközökön "

    Most változtassa meg a csoportbeszélgetéseket az üzenetküldőn. A hírnökkel végzett munka nagy része már megtörtént, így a csoportos beszélgetések felállítása sokkal könnyebb lesz. Ha visszatekintünk a MessengersController belsejébe, megvan a get_group_conversation művelet. Hozzon létre egy sablon fájlt ehhez:

    Ezután hozzon létre egy fájlt, hogy csoportos beszélgetést készítsen a messengerben:

    Hozza létre a partíciókat:

    Változtassa meg a változtatásokat:

    adj hozzá -A
    "hozzon létre egy get_group_conversation.js.erb sablont és
    részei a hírvivőkön belül "

    Így néz ki a csoportbeszélgetés a messengerben:

    5. Értesítések

    Az alkalmazás már rendelkezik az összes alapvető funkcióval. Ebben a részben energiát fordítunk ezeknek a létfontosságú tulajdonságoknak a javítására. Az azonnali értesítések, amikor más felhasználók megpróbálják Önnel kapcsolatba lépni, jobb felhasználói élményt nyújtanak. Tudassuk fel a felhasználókat, amikor kapcsolati kérés frissítést kapnak, vagy csatlakoznak egy csoportos beszélgetéshez.

    Kapcsolatfelvételi kérések

    Létrehoz egy értesítési csatornát, amely kezeli az összes felhasználó értesítését.

    sínek g csatorna értesítés

    Vállalja a változást.

    adj hozzá -A
    git activ -m "Hozzon létre egy NotificationChannel"

    Minden felhasználónak saját egyedi értesítési csatornája lesz. Aztán megvan a ContactRequestBroadcastJob, amely közvetíti a kapcsolatfelvételi kéréseket és a válaszokat.

    Generálja a munkát.

    sínek g job contact_request_broadcast

    Hozzon létre egy _contact_request.html.erb részletet, amelyet felvesznek a kapcsolattartási kérelmekhez a navigációs sáv legördülő menüjében. Ebben az esetben ezeket a kéréseket dinamikusan hozzáadjuk a ContactRequestBroadcastJob-hoz

    Tűzje ki a munkát minden alkalommal, amikor új névjegyrekordot hoz létre:

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "ContactRequestBroadcastJob létrehozása"

    Ezután hozzon létre egy legördülő menüt a navigációs sávon:

    Adja meg a nav_contact_requests_partial_path helper módszert:

    Tekerje be a módszert specifikációkkal, majd hozza létre a részleges fájlokat:

    Az _dropdowns.html.erb fájlon belül tegye a _contact_requests.html.erb fájlt közvetlenül a beszélgetések alatt. Tehát a navigációs sávon láthattuk a névjegyek kéréseinek legördülő menüjét

    Változtassa meg a változtatásokat.

    adj hozzá -A
    git activ -m "
    - Hozzon létre egy _contact_requests.html.erb fájlt a
      layouts / navigáció / fejléc / dropdown
    - Adjon meg egy nav_contact_requests_partial_path-t a NavigationHelper alkalmazásban "

    Hozzon létre egy részleges fájlt az egyetlen kapcsolatfelvételi kérelemhez:

    Vállalja a változást.

    adj hozzá -A
    "hozzon létre egy _request.html.erb fájlt a
    layouts / navigáció / fejléc / dropdown”

    Adjon hozzá CSS-t a stílushoz, és helyezze el a kapcsolatfelvételi kérések legördülő menüjét:

    Változtassa meg a változtatásokat.

    adj hozzá -A
    "Adj hozzá CSS-t a navigation.scss-ben a stílus és pozíció megadásához
    kapcsolatfelvételi kérések legördülő menü "

    A navigációs sávban legördülő menü jelenik meg a kapcsolatfelvételi kérelmekhez.

    Megvan az értesítési csatorna és a kapcsolattartási kérelmek frissítéseinek továbbítására szolgáló feladat. Most létre kell hoznunk egy kapcsolatot az ügyféloldalon, hogy a felhasználók valós időben küldhessenek és fogadhassanak adatokat.

    Vegye figyelembe, hogy ha a nyilatkozatokban, ahol a kapcsolattartási kérést elfogadták és elutasították, üres kódblokkok vannak. Itt játszhatsz és hozzáadhatsz saját kódot.

    Hozzon létre egy contact_requests.js fájlt a DOM változtatások végrehajtásához bizonyos események után, és a végrehajtott műveletek továbbítását az ellenkező felhasználó számára, a contact_request_response visszahívási funkció használatával

    Miután új beszélgetési kérelmet küldött egy beszélgetési ablakból, távolítsa el a kérés újbóli elküldésének lehetőségét. A beszélgetés options.jsfile fájljában adja hozzá a következőket:

    Most a kapcsolatfelvételi kéréseket valós időben fogják kezelni, és a felhasználói felület megváltozik bizonyos események után.