Instagram-klón létrehozása a Ruby on Rails segítségével: 1. rész

Ebben a többrészes bemutatóban egy Ruby on Rails alkalmazást építünk, amely megvalósítja a népszerű közösségi média óriás Instagram megjelenését és tulajdonságait. A Rails 6, Webpacker 4, Turbolinks, Stimulus Js és Tailwindcss verziókat fogjuk használni.

NYILATKOZAT: Bár ez az oktatóprogram megosztja az ismereteket és megmutatja, hogyan valósíthat meg bizonyos funkciókat a tanuláshoz, hosszának és szöveges formátumának köszönhetően, nem a kezdő Rails fejlesztőre irányul, hanem nem a Rails bevezetője. Ha még nem ismeri a Rails alkalmazás felépítését, akkor azt javaslom, hogy kezdje el néhány alapvető Rails oktatóprogrammal.

Felállítottam a Rails 6 alkalmazást (rc1 verzió) a Webpacker 4, Turbolinks és a Tailwindcss megjelenő 1.0 verziójával. Ha szeretné követni, akkor klónozhatja az alkalmazást a következő ágból:

git klón -b bemutató-start [email protected]: rodloboz / railstagram.git

A kazánlemez futtatásához a rubin 2.5.3-at telepítenie kell a számítógépére, majd a klónozott projektmappában lévő terminálról kell futnia:

köteg telepítése fonal telepítő sínek db: létrehozás db: áttelepítés db: mag sínek s

A cél az, hogy jobban összpontosítsunk a funkciók (a háttér és az előlap) a Rails módszerére, és kevésbé a HTML és CSS részekre, így nem fogunk mélyen belemerülni ezekbe a témákba. Mint ilyen, a fenti ág már rendelkezik bizonyos stílusokkal, amelyeket a Tailwindcss és a Fontawesome újít fel az Instagram megjelenés mellett.

Mielőtt elkezdenénk, röviden ismertetjük a Tailwindcss-t:

A Bootstrap-tól, az Alaptól, a Bulmától eltérően a Tailwindcss nem UI készlet (nincs téma vagy nincs beépített felhasználói felület-összetevő). A dokumentáció szerint:

A Tailwind rendkívül összetett, alacsony szintű segédeszközöket biztosít, amelyek megkönnyítik a bonyolult felhasználói felületek felépítését anélkül, hogy két webhely azonos megjelenést ösztönözne.

Ez érzékeny és eszközöket kínál az alkotóelem-osztályok kibontásához az ismételt segédprogramok mintáiból, megkönnyítve a saját egyedi felhasználói felület-összetevőink felépítését:

// A Tailwind segédosztályainak felhasználásával // gombok variációinak létrehozása
.btn-kék {@apply bg-blue-500 text-white; } .btn-fehér {@alkalmazás szöveg-kék-500} .btn-fehér: fókuszálás {@alkalmazás szöveg-kék-400}

A Hátsó szél PostCSS-ben van írva, és JavaScript-ben van beállítva. Ezért az összetevőket az app / javascript / stíluslapokba helyeztem, amelyeket a Webpack állít össze. A fő Tailwind konfigurációs fájlt az app / javascript / stíluslapok / config / tailwind.config.js mappában találhatja meg.

A felhasználói modell

A Devise segítségével regisztrálunk és bejelentkezünk a felhasználókba. Az Instagram megköveteli a felhasználóktól, hogy a teljes szokásos e-mail és jelszó mellett teljes névvel és felhasználónevével iratkozzanak fel, amelyet a Devise alapértelmezés szerint már tartalmaz.

Generáljunk egy migrációt a terminálon:

sínek g migráció AddAttributesToUsers teljes_neve felhasználónév: karakterlánc: uniq about: text

Ez a következő migrációt generálja:

Az Instagram a felhasználónevet használja a felhasználói profilok URL-jének előállításához. Mint ilyen, a felhasználóneveknek egyedinek kell lenniük, tehát ezt a megszorítást hozzáadjuk az áttelepítéshez az adatbázishoz. Hozzátesz egy egy oszlopot is, amelyet később végrehajtunk.

Ne felejtsd el a db síneket: válasszuk át a migráció alkalmazásához.

Adjunk hozzá egy érvényesítést a felhasználói modellhez, amely tükrözi az egyediség követelményét. Azt is szeretnénk biztosítani, hogy a felhasználónevek csak alfanumerikus karakterekből álljanak, és ne csak számokból álljanak. Erre egy reguláris kifejezést fogunk használni. Az érvényesítésnek a kis- és nagybetűkre is érzékenynek kell lennie.

érvényesíti: felhasználónév, jelenlét: igaz, formátum: {a következővel: /\A(?=.*[az )) ^ ¡¡] + \ Z}, egyediség: {kisbetűsérzékeny: hamis}

Az Instagram nem követeli meg a felhasználóktól, hogy erősítsék meg a jelszót, és lehetővé teszik számukra, hogy bejelentkezzenek akár e-mailjüket, akár felhasználónevüket. Lépjen a létrehozott nézetekre, és távolítsa el a jelszó-megerősítő mezőt a regisztrációs számokról # új és a munkamenetekről új.

Engednünk kell, hogy a felhasználók további paramétereket biztosítsanak a regisztrációs űrlapon. Adja hozzá ezt az ApplicationController-hez.

Ez lehetővé teszi a kiegészítő attribútumok hozzáadását a Devise erős paramétereinek.

A felhasználói avatár és a legördülő menü megjelenítéséhez módosítanunk kell a navigációs sávot, hogy a bejelentkezett felhasználók kijelentkezhessenek. A frissített kódot itt láthatja: https://github.com/rodloboz/railstagram/blob/master/app/views/shared/_navbar.html.erb

Megjegyzés: Ha az oktatóanyagot követi, a következőket is hozzá kell adnia a hátsó szél konfigurációs fájljához:

// app / javascript / stíluslapok / config / tailwind.config.js
változatok: {borderColors: ['érzékeny', 'lebegő', 'fókusz', 'csoportos lebegés'], láthatóság: ['reagáló', 'lebegő'],}

És hozzon létre egy legördülő CSS-összetevőt:

A nézet segítőt is felhasználjuk a helyes felhasználói avatár URL-jének meghatározására. A képfeltöltések végrehajtásáig csak két lehetőség van: ellenőrizzük, hogy a felhasználói e-mail társult-e Gravatar-fiókkal. Ha nem, akkor egy alapértelmezett felhasználói avatar képet jelenítünk meg:

A felhasználók számára a felhasználónévvel történő bejelentkezés engedélyezése

Alapértelmezés szerint a Devise lehetővé teszi a felhasználók számára, hogy bejelentkezzenek és visszaállítsák a jelszavukat e-mail címük megadásával. Az Instagram lehetővé teszi a felhasználók számára a felhasználónév vagy az e-mail cím megadását. Ezért felül kell hagynunk a Devise alapértelmezett értékeit.

Adjon hozzá bejelentkezést mint attribútum-hozzáférőt a felhasználói modellhez: attr_accessor: login

Módosítsa a config / inicializálókat / devise.rb fájlt, hogy legyen:

config.authentication_keys = [: bejelentkezés]

És felülbírálja a Devise find_for_database_authentication módszerét a felhasználói modellben:

A wikit követve ugyanezt teheti a jelszó helyreállításához: https://github.com/plataformatec/devise/wiki/How-To:-Allow-users-to-sign_in-using-their-username-or-email -cím

Ezen a ponton meg kell tesztelnie az alkalmazást, mielőtt továbblépne.

A felhasználói modell refaktorálása egy modellel kapcsolatban:

Mostanra a felhasználói modell meglehetősen kövérnek tűnik, sok kidolgozási módszerrel, és csak most kezdtük el. Bontsa ki az egész kódot modell-aggodalomra. Hozzon létre egy fájlt az alkalmazás / modellek / aggodalmak / authenticable.rb mappában, és helyezze át az összes kódot a modellből ebbe a fájlba:

Akkor csak annyit kell tennie, hogy az Authenticable elemet is felveszi a felhasználói modellbe. Ne felejtse el újra tesztelni.

Felhasználói profil

Az Instagram az URL-je gyökérnévében használja a felhasználói profilokat. Ehhez a következő útvonalra van szükség:

erőforrások: felhasználók, elérési út: '/', param:: felhasználónév, csak:% i [mutat]

Ez létrehozza a show útvonalat alkalmazásunk gyökérjében, amely rögzíti a felhasználónevet a paramsben, és elküldi azt a userscontroller # show-nak. Ezután el kell mondanunk a felhasználói modellt, hogyan lehet az URL-paramétereket létrehozni magának:

# Felhasználó def to_param felhasználónév vége

Itt hoztam még néhány osztályt a Front End stílusához és az Instagram hangulatának megteremtéséhez. Ne feledje, hogy a Tailwindcss programot használjuk, tehát minden egyedi összetevőt az alkalmazás / javascript / stíluslapok / összetevők készítik. A teljes kódot megtekintheti a bemutató végén megosztott Github-tárházban.

Követő felhasználók

Végül hozzá fogjuk adni azt a képességet, hogy követjük a többi felhasználót. Ezt úgy lehet elérni, hogy egy összekapcsolási táblázatot tartalmaz, amely két felhasználót összeköt: a követőt, akit egy follower_id oszlop hivatkozik, és egy követõt, vagy a felhasználót, akit a követõ követ, amelyet a következõ_id oszlop hivatkozik. Generáljuk a modellt:

sínek g modell Kövesse

A migrációt ennek megfelelően módosítsa:

És bontsa ki a kódot egy releváns aggodalomra:

Frissítse az útvonalakat:

A felhasználók alatt elnevezzük a FollowsController nevét, és létrehozunk egy olyan létrehozási műveletet (nevű follow_path), amely meghívja a fentiek szerint alkalmazott konzerválási módszert az aggodalomra, és egy pusztító műveletet (nevű unfollow_path), amely az ugyanazon aggályban végrehajtott nem követő műveletet hívja fel. Mindkét művelet ugyanazon végpont alatt él: / felhasználónév / követés, és a POST és DELETE HTTP igékkel különböztetjük meg a kettőt. (itt olvashat mélyebb cikket a Sínek útvonalának lehetőségeiről).

Először ellenőrizzük, hogy a követés / követés gomb a nézetben megfelelően működik-e egy szokásos HTML kérésen keresztül. Ezután ajaxifikáljuk, hozzáadva a távoli: igaz ezen linkekhez opciót. Ez egy AJAX kérést küld a háttérrendszernek az egész oldal újratöltése helyett, majd frissítjük a gombot és a hozzá tartozó linket javascript-tel. Ebből a célból kibontottam a gombkódot részleges nézetbe: app / views / users / _follow_btn.html.erb

Pult gyorsítótár

Meg akarjuk jeleníteni a profiloldalon, hogy hány követőnk van a felhasználónak, és hány felhasználó követi a felhasználót, ahogyan azt az Instagram követi. Az ActiveRecord használatával lekérdezhetjük az adatbázist, és megszámolhatjuk a vonatkozó Követési rekordokat, de használunk egy Rails funkciót, az úgynevezett számláló gyorsítótárat.

Először hozzá kell adnunk két oszlopot a felhasználói modellünkhöz, amely nyomon követi e két számlálót a következő migrációval:

Ezután hozzáadjuk a counter_cache opciót a Follow modelhez. Ez arra utasítja a Rails-t, hogy frissítse a felhasználói oszlopokat a helyes követők számával, és minden egyes alkalommal kövesse a Follow rekord létrehozását vagy megsemmisítését.

Ezután frissítse nézetünket ennek megfelelően a két új oszlopgal, és szerkessze a create.js.erb fájlt is, hogy biztosítsa a nézet frissítését az AJAX kérések során:

Mivel a @felhasználó példány betöltődik, mielőtt a számláló-gyorsítótárak aktiválódnak, és mielőtt a számláló oszlopok minden alkalommal frissülnének, amikor egy felhasználó követ vagy követ egy másik felhasználót, újra kell töltenünk a példányt, hogy a követők és a követők helyes száma jelenjen meg. Ezt úgy tesszük, hogy a @ user.reload blokkot hozzáadjuk a FollowsController létrehozási és megsemmisítési műveleteihez.

Végül hozzáadjuk a Stimulust, hogy vigyázzunk a követők számának pluralizálására. Használhatjuk a Rails pluralizációs módszert, de a Stimulus később is hasznos lesz.

Telepítse az ingert a terminálra:

csomag végrehajtó sínek webpacker: install: stimulus

A stimuláció úgy működik, hogy a HTML elemeket a nézetben olyan adatjellemzőkkel szórják, amelyek hivatkoznak az inger vezérlőire, a célokra és az eseményműveletekre. A # show nézetben hozzáadjuk a vezérlőt a fejléc elemhez: .

Ezután meg kell határoznia a célelemet, ahova beolvassa a követők tényleges számát, és azt a célt, ahová a követő szót szinguláris vagy többes számú formájában injektáljuk. Ehhez hozzá kell adni egy data-target attribútumot a vonatkozó elemekhez:

Ezután beállítottuk a Követés / Követés gombot, hogy meghallgassuk az ajax: siker eseményt egy data-action attribútummal, és frissítsük a követő üzenetet / szót stimulussal:

És az inger vezérlő így néz ki:

Ez az oktatóanyag 1. részéhez tartozik. Folytatjuk az Instagram klónunkat a 2. részben. A rész teljes kódját itt ellenőrizheti https://github.com/rodloboz/railstagram/tree/tutorial-part1

MEGJEGYZÉS: Nagyon köszönöm Juliette Chevalier-nek a cikk fejlesztési javaslatait, valamint a helyesírási és hibalehetőségeket.