Bygg Instagram av Ruby on Rails (del 1)

Jag guidar dig steg för steg att lära dig Ruby on Rails genom att bygga Instagram-applikationen.

Foto av Christopher Gower

Vad lär du dig efter att ha slutfört detta projekt?

  • Hur startar jag en ny Rails-applikation?
  • Design System från Craft
  • Förstå MVC (Model - View - Controller) -arkitektur
  • Modell: Aktiv post migration, validering, återuppringning, associering och fråga gränssnitt
  • Visa: Layout-, del- och formulärhjälpare
  • Controller: Åtgärder, starka parametrar
  • Spårväg
  • Aktiv lagring för att ladda upp filer
  • Med hjälp av Bootstrap, Devise, Kaminari gem i Rails-applikationen

Innehållsförteckning:

  • Tekniska staplar
  • Förståelse om MVC i Ruby on Rails.
  • Skapa ny Rails-applikation
  • Använda PostgreSQL-databas och Bootstrap för vår applikation
  • Registrera dig - Logga in - Logga ut för användare med Devise gem
  • Skapa användarprofilsida
  • Redigera / uppdatera användarprofil

Tekniska staplar

Back-end:

  • Ruby 2.4
  • Räcken 5.2.x
  • Databas: Postgres 9.6

Front-end:

  • HTML, CSS, Javascript, jQuery
  • Bootstrap (3.x eller 4.x)

MVC (Model - View - Controller) i Ruby on Rails

MVC är ett arkitektoniskt mönster för en programvara. Denna arkitektur är populär för att designa webbapplikationer. Den separerar en applikation i följande komponenter:

  • Modeller (Active Record): hantera data och affärslogik.
  • Visningar (ActionView): hantera objekt med användargränssnitt och presentation.
  • Controllers (ActionController): mellan Model och View, mottagande av användarinmatning och beslutar vad de ska göra med den.

Begär-svar cykel i rails

Källa: https://www.codecademy.com
  1. Användaren öppnar sin webbläsare, skriver in en URL och trycker på Enter. När en användare trycker på Enter gör webbläsaren en begäran om den webbadressen.
  2. Begäran träffar Rails-routern (config / routes.rb).
  3. Routern kartlägger URL: en till rätt styrenhet och åtgärd för att hantera begäran.
  4. Åtgärden får begäran och ber modellen att hämta data från databasen.
  5. Modellen returnerar en lista med data till kontrolleråtgärden.
  6. Controller-handlingen överför data till vyn.
  7. Vyn gör sidan som HTML.
  8. Styrenheten skickar HTML tillbaka till webbläsaren. Sidan laddas och användaren ser den.

Skapa ny Rails-applikation

Installera Rails:

För att installera Rails använder vi gem-kommandot från RubyGems:

gem install rails -v 5.2.1

Kontrollera Rails-version efter installation av Rails:

räls - motstånd
=> Räler 5.2.1

Om det returnerar något som "Rails 5.2.1" kan du fortsätta skapa ett nytt Rails-program.

Installera PostgreSQL:

På Mac OSX: Du kan installera PostgreSQL-server och klient från Homebrew:

brygga installera postgresql

Starta Postgresql-tjänsten:

bryggtjänster startar postgresql

Skapa en ny Rails-applikation

rails new instagram --version = 5.2.1

När du har skapat instagramapplikation byter du till mappen

cd instagram

Installera ädelstenar för vår applikation:

paket installera

Starta webbservern:

rails server

Om du vill se applikationen öppnar du din webbläsare och navigerar till http: // localhost: 3000 /

Du ser Rails standardsida:

Och för att stoppa webbservern, tryck Ctrl + C i terminalen.

Skapa hemsida

  • Skapa en ny controller med en åtgärd
  • Lägg till rutt

Skapa hemkontroller med indexåtgärd:

rails g controller Hemindex

Rails genererar några filer och en rutt åt dig

skapa app / controllers / home_controller.rb rutt få 'home / index' åberopa erb skapa app / views / home skapa app / views / home / index.html.erb anropa test_unit skapa test / controllers / home_controller_test.rb åberopa hjälper skapa app / helpers / home_helper.rb åberopa test_unit åberopa tillgångar påkalla kaffe skapa app / tillgångar / javascripts / home.coffee påkalla scss skapa app / tillgångar / stilark / home.scss

Öppna filen app / views / home / index.html.erb och ersätt befintlig kod med följande kod:

Det här är min hemsida

Starta om webbservern (Ctrl + C för att stoppa server och railserver för att starta servern) och navigera till http: // localhost: 3000 / home / index i din webbläsare. Du ser meddelandet "Det här är min hemsida" som du lägger till visningar / home / index.html.erb

Öppna filen config / routes.rb

Rails.application.routes.draw får 'hem / index'
  # För detaljer om DSL som finns i den här filen, se http://guides.rubyonrails.org/routing.html slut

och lägg till raden med kodrot "hem # index". Det ska se ut som:

Rails.application.routes.draw får 'hem / index'
  rot till: "hem # index" slut

få 'hem / index' berättar Rails för att kartlägga förfrågningar till http: // localhost: 3000 / home / index till hemkontrollens indexåtgärd.

root 'home # index' säger Rails att kartlägga förfrågningar till roten till applikationen till hemmastyrarens indexåtgärd.

Starta om webbservern och navigera till http: // localhost: 3000 /, du kommer att se meddelandet "Detta är min hemsida".

Du kan se alla aktuella applikationsvägar genom att:

rälsvägar

Använda PostgreSQL i Rails-applikationen

För att använda PostgreSQL for Rails-applikationen lägger vi till gem 'pg' till Gemfile

pärla "pg"

Kör paketinstallation för att installera pg gem.

Konfigurera databas (config / database.yml)

standard: & standardadapter: postgresql pool: <% = ENV.fetch ("RAILS_MAX_THREADS") {5}%> timeout: 5000
utveckling: <<: * standarddatabas: utveckling_instagram
test: <<: * standarddatabas: test_instagram
produktion: <<: * standarddatabas: produktion_instagram

Mer information: http://guides.rubyonrails.org/configuring.html#configuring-a-database

Skapa databas

Använd migreringskommando för att skapa databas för applikation.

rails db: skapa
>> Skapad databas "utveckling_instagram" >> Skapad databas "test_instagram"

Installera Bootstrap för Rails-applikationen

Bootstrap är en open source verktygssats för utveckling med HTML, CSS och JS. Det hjälper oss att snabbt prototypa dina idéer eller bygga hela appen med våra Sass-variabler och mixins, responsivt rutnätsystem, omfattande förbyggda komponenter och kraftfulla plugins byggda på jQuery.

För att integrera bootstrap med Rails-applikationen använder vi gem bootstrap-rubygem (Bootstrap 4 Ruby Gem for Rails)

Lägg till bootstrap till din Gemfile:

gem 'bootstrap', '~> 4.1.1'

Kör paketinstallation för att installera bootstrap gem och starta om servern för att göra filerna tillgängliga via pipeline.

Konfigurera på application.css (app / tillgångar / stilark / applikation.css)

  • Byt namn på application.css till application.scss
  • Ta sedan bort alla * = kräva och * = kräva_tree-uttalanden från Sass-filen. Använd istället @import för att importera Sass-filer.
  • Importera Bootstrap-stilar i application.scss:
@import "bootstrap";

Konfigurera på application.js

Bootstrap JavaScript beror på jQuery. Eftersom vi använder Rails 5.1+ lägger du till jquery-rails-pärla till din Gemfile:

pärla "jquery-rails"

Lägg till Bootstrap-beroenden och Bootstrap till din application.js

// = kräva jquery3 // = kräva popper // = kräva bootstrap

Layoutapplikation

Jag kommer att strukturera vår layoutapplikation till tre huvuddelar:

  • Navigeringsfält
  • Huvudinnehåll
  • sidfot

som på bilden nedan:

Rails använder standardlayoutfilen: app / views / layouts / application.html.erb

Lägg till HTML-kod i layouten (/layouts/application.html.erb):

Använda Awesome Icon

Vi använder några ikoner för vår applikation från Font Awesome Icon. För att använda denna ikon enkelt bör vi kunna installera font-awesome-rails gem.

Lägg till detta till din Gemfile:

pärla "font-awesome-rails"

och kör paketinstallation.

Importera font-awesome till application.scss-fil:

@import "font-awesome";

CSS-kod för layout (applikation.scss)

Användare: Registrera dig - Logga in - Logga ut

I det här avsnittet kommer vi att använda utveckla pärla för att skapa registrering, in- och utloggningsfunktion för användare.

Devise är en flexibel autentiseringslösning för Rails.

Den består av 10 moduler:

  • Databasautentisering: hashes och lagrar ett lösenord i databasen för att validera användarens äkthet vid inloggning. Autentiseringen kan göras både via POST-förfrågningar eller HTTP Basic Authentication.
  • Omniauthable: lägger till OmniAuth-stöd.
  • Bekräftbar: skickar e-postmeddelanden med bekräftelsesinstruktioner och verifierar om ett konto redan har bekräftats under inloggningen.
  • Återställbar: återställer användarlösenordet och skickar återställningsinstruktioner.
  • Registrerbar: hanterar anmälan av användare genom en registreringsprocess, vilket också låter dem redigera och förstöra sitt konto.
  • Kom ihåg: klarar att generera och rensa ett symbol för att komma ihåg användaren från en sparad cookie.
  • Spårbar: spår logga in räkning, tidsstämplar och IP-adress.
  • Timeoutable: löper ut sessioner som inte har varit aktiva under en viss tidsperiod.
  • Validerbar: ger valideringar av e-post och lösenord. Det är valfritt och kan anpassas så att du kan definiera dina egna valideringar.
  • Låsbar: låser ett konto efter ett angivet antal misslyckade inloggningsförsök. Kan låsa upp via e-post eller efter en viss tidsperiod.

Installera tänka pärla

Lägg till detta till din Gemfile:

pärla "tänka"

kör sedan paketinstallation.

Därefter måste du köra generatoren:

rails genererar utforma: installera

Den genererar automatiskt två filer:

  • config / initializers / devise.rb
  • config / locales / devise.en.yml

Ställ in standardalternativ för URL för Devise mailer

I utvecklingsmiljö: (config / miljøer / utveckling.rb)

config.action_mailer.default_url_options = {host: 'localhost', port: 3000}

I produktionsmiljö:: värd ska ställas in på den faktiska värden för din applikation.

Generera användarmodell

rails genererar utforma User invoke active_record create db / migrate / 20180722043305_devise_create_users.rb skapa app / models / user.rb anropa test_unit skapa test / models / user_test.rb skapa test / fixtures / users.yml insert app / models / user.rb route devise_for : användare

Efter att ha kört kommando genererar det en filmigrering för att skapa användare, en fil i app / modeller är user.rb, lägg till rutter för användare och testfil.

Öppna användarmodelfilen (app / models / user.rb), du kan se standardutvecklingsmoduler inkludera i användarmodell.

utforma: database_authenticatable,: registrerbar,: återställbar,: minnsbar,: spårbar,: validerbar

Kör sedan rails db: migrera

Du bör starta om din applikation efter att du har ändrat Devises konfigurationsalternativ (detta inkluderar stopp av våren). Annars kommer du att få konstiga fel, till exempel att användare inte kan logga in och vägledare undefineras.

Lägg till inloggnings- / utloggningslänkar

Till höger om navigeringsfältet lägger du till sign_in- och sign_out-länkar enligt nedan:

Byt ut HTML-kod i layout (application.html.erb):

förbi

  • user_signed_in? är en utformare som hjälper till att verifiera att en användare är inloggad.
  • destroy_user_session_path: logga ut väg, metod:: delete är standard HTTP-metod som används för att logga ut en resurs (användare)
  • new_user_session_path: inloggningsväg.

När du klickar på ikonen för att logga in ser du vyn så:

Logga in

Men innan du kan logga in måste du skapa ett nytt konto genom att klicka på Registrera länken nedan Logga in-knappen.

Vyn för registreringssidan:

Registrera dig

Du kan registrera dig genom att fylla din e-postadress och lösenord och sedan gå tillbaka för att logga in till ansökan.

När du loggar in framgångsrikt ersätts ikoninloggning med ikonanvändare i navigeringsfältet. Och om du klickar på ikonanvändaren skulle du logga ut.

Skapa användarprofilsida

Lägg till kolumner till användaren

Användartabellen har kolumner: användarnamn, namn, e-post, lösenord, webbplats, bio, telefon, kön. Användaren har redan kolumner via e-post och lösenord, nu lägger vi till andra fält med migrering:

rails g migration AddMoreFieldsToUsers användarnamn: strängnamn: strängwebbplats: sträng bio: texttelefon: heltal kön: sträng

Kör migrering:

rails db: migrera
== 20180813140820 AddMoreFieldsToUsers: migrera =============================
- add_column (: användare,: användarnamn,: sträng)
-> 0,0333s
- add_column (: användare,: namn,: string)
-> 0,0006s
== 20180813140820 AddMoreFieldsToUsers: migrated (0.0363s) =====================

Skapa användarkontroller

För att skapa användarprofilsida, måste vi först skapa en styrenhet som heter UsersController genom detta kommando:

rails genererar controller användare

Öppna app / controllers / users_controller.rb-fil i redigeraren och se sådan kod

klass UsersController 

Nästa steg lägger du till en show-åtgärd till UsersController

klass UsersController 

Skapa sedan en motsvarande vy är app / vyer / användare / show.html.erb

Slutligen lägger du till show-action till rutter (config / routes.rb)

Rails.application.routes.draw gör
  ...
  resurser: användare, endast: [: visa]
slutet

resurser: användare, endast: [: show] berättar Rails för att kartlägga förfrågningar till http: // localhost: 3000 / användare /: id till användarkontrollerns showåtgärd, med: id är ID för aktuell användare. Om den aktuella användarens ID är 1, är sökvägen till användarprofilsidan http: // localhost: 3000 / användare / 1

Uppdatera användarprofillänken i navigeringsfältet

Navigeringsfält

Byt ut utloggningslänken till användarprofillänken till höger om navigationsfältet. Det betyder att när användaren klickar på användarikonen, går det till användarprofilsidan. Efter uppdatering, HTML-kod så:

<% om user_signed_in? %> ”> <% annars%> ”> <% slut%>

Skapa användargränssnitt för sidan för användarprofil

Jag utformar användarprofilsidan till 2 avsnitt: Grundläggande information och inlägg.

  • Grundläggande information: Innehåller avatar, användarnamn, namn, inlägg, följare, följande.
  • Inlägg: Innehåller bilder av användaren.

Avsnitt 1: Grundläggande information om användaren

Mockup för grundläggande information

Detta avsnitt är uppdelat i två kolumner:

  • Den vänstra kolumnen är avatar för användaren.
  • Den högra kolumnen innehåller annan information om användaren.

Jag använder rader och kolumner för layout, HTML-kod ser ut:

# app / visningar / användare / show.html.erb
  

Eftersom vi inte har några data för viss användarinformation som namn, antal inlägg, följare, följare och bilder, så jag använder tillfälligt falska data för att bygga UI först och kommer att uppdatera dem senare.

Efter att ha lagt till andra komponenter i det här avsnittet ser HTML-koden ut:

CSS för denna vy: Jag skapar tillgångar / stilark / användare.scss-fil som kommer att innehålla stilar för den här sidan och importera den till applikationen.scss-filen.

@import "användare";

Lägg till CSS-kod nedan till users.scss

Utsikten ser ut som:

Avsnitt 1: Grundläggande information om användaren

Avsnitt 2: Inlägg från användaren

Lägg till 4 flikar: POSTS, IGTV, SPARA, TAGGED som i bilden nedan:

TJÄNSTER IGTV SPARAD TAGGADE

Lägg till mer stilkod till users.scss:

. Användar-flikar {edge-top: 1px solid #efefef; display: flex; justify-content: center;
a.tab {höjd: 35px; marginal-höger: 50px; linjehöjd: 45px; färg: # 999; teckenstorlek: 12px; font-vikt: 500; text-align: center; i {padding-höger: 1px; } &: sväva {textdekoration: ingen; }} a.active {border-top: 1px solid # 262626; färg: # 262626; }}

I bildavsnittet: Varje rad i detta avsnitt kommer att presentera tre bilder enligt nedan:

HTML-kod:

Jag använder CSS Flexbox-teknik för att utforma dessa bilder, du kan se hur du använder i CSS-kod:

.user-bilder {display: flex; flex-wrap: wrap; justify-content: mellanslag mellan; marginal: 0 20px;
. wrapper {bredd: 280px; höjd: 280px; marginal: 15px; img {bredd: 100%; gränsradie: 4%; }}}

Slutligen ser användarprofilsidan ut:

Användarprofil-sida

Ja, se jättebra ut! Vi har skapat användarprofilsida, i nästa steg lägger vi till redigerings- / uppdateringsprofilsida för användare.

Redigera / uppdatera användare

Flödet för att skapa Redigera profilsidan innehåller fyra huvudsteg:

  • Steg 1: Lägg till Redigera profilsidan
  • Steg 2: Layout Redigera profilsidan
  • Steg 3: Lägg till nav-länkar till vänster på sidan
  • Steg 4: Lägg till formulärredigeringsprofil till höger om sidan.

UI för Redigera profilsidan:

Redigera profilsidan

Steg 1: Lägg till Redigera profilsidan

I det första steget lägger vi till en åtgärd med ett namn är redigera i UsersController

klass UsersController 
def redigera
slutändan

Skapa sedan en motsvarande vy är app / vyer / användare / edit.html.erb

Lägg sedan till redigeringsåtgärder på rutter:

resurser: användare, endast: [: visa,: redigera]

Du kan se sökvägen för redigeringsprofilsidan efter typkommando:

rake routes ... ... edit_user GET /users/:id/edit(.:format) användare # redigera

resurser: användare, endast: [...,: redigera] berättar Rails för att kartlägga förfrågningar till http: // localhost: 3000 / användare /: id / redigera till användarkontrollerns redigeringsåtgärd.

Lägg till länkredigeringsprofil till knappen Redigera profil på användarprofilsidan:

current_user är en hjälper till att tänka, den nuvarande användaren är inloggad.

Steg 2: Layout Redigera profilsidan

Vi layout Redigerar profilsidan med 2 kolumner: Den vänstra kolumnen är åtgärder och den högra kolumnen motsvarar detaljer.

Layouten på Redigera profilsidan.

HTML-kod:

CSS-kod: Jag använder flex-teknik för layout

.user-edit-page {display: flex; marginal-topp: 60px; min-höjd: 500 px; .action {bredd: 220px; gräns: 1px solid #dbdbdb; } .detaljer {flex: 1; gräns: 1px solid #dbdbdb; border-vänster: none; }}

Steg 3: Lägg till navigering till vänster på sidan

Vi använder navs-komponenter från Bootstrap 4 med vertikala piller för detta avsnitt. Se HTML-kod nedan:

CSS för åtgärder avsnitt:

.action {bredd: 220px; gräns: 1px solid #dbdbdb;
.nav-link {font-size: 14px; bakgrundsfärg: vit; svart färg; gränstradius: 0; stoppning: 12px 0 12px 30px; &: sväva {markör: pekare; }} .nav-piller .nav-link.active {border-left: 2px solid; font-vikt: 600; }}

Nu ser UI ut:

Vänster om redigera profilsidan

Steg 4: Lägg till formulärredigeringsanvändare till höger om sidan

Lägg till en radkod för att hitta den aktuella användaren att redigera åtgärd i users_controller.rb

def edit @user = User.find (params [: id]) slut

Lägg till ett formulär i den högra kolumnen för att uppdatera den aktuella användaren. Vi använder form_with helper of Rails för att generera ett formulär.

Form redigera användare enligt nedan:

CSS av form:

.form-edit-user {padding: 30px 100px 10px 50px;
.form-grupp, input {font-size: 14px; svart färg; } input, textarea {border: 1px solid #efefef; } .col-form-label {text-align: höger; font-vikt: 600; }
.avatar {höjd: 38px; bredd: 38px; gränsradie: 50%; } .usnamn {font-size: 20px; linjehöjd: 22px; marginalbotten: 0; } .change-photo {color: # 3897f0; textdekoration: ingen; typstorlek: 13px; } input [type = 'skicka'] {färg: vitt; }}

UI för form kommer att se ut:

När du fyller i information i formuläret och klickar på skicka-knappen för att behandla uppdatering av användaren ser du felet inga rutter matchar:

Fel uppstår eftersom vi inte definierar uppdateringsväg till användare ännu. Nu måste vi lägga till uppdaterade användarrutter till routes.rb

resurser: användare, endast: [: visa,: redigera,: uppdatera]

Fyll i formuläret och skicka in igen. Du bör se ett familjefel:

Åtgärdsuppdateringen kunde inte hittas, så vi måste skapa uppdateringsåtgärd i UserController så:

def uppdatera current_user.update (params [: user]) omdirigera_ till current_user slut

I uppdateringsåtgärden uppdaterar vi den aktuella användaren baserat på paramer som fyllts i från formredigering. current_user är aktuell inloggad användare.

Försök igen, oop! får du ett fel så här:

Förbjudna attributfel

Rails stöder vissa funktioner som hjälper oss att skriva säkra applikationer. Den här kallas starka parametrar, som kräver att vi definierar vilka parametrar som tillåts i våra kontrolleråtgärder. Vi måste vitlista våra parametrar för att förhindra felaktig masstilldelning.

Så nu måste vi använda starka parametrar för att fixa ForbiddenAttributError innan vi uppdaterar användaren.

För att använda starka parametrar i vårt fall använder vi sådana krav och tillåter metoder:

params.require (: user) .permit (: användarnamn,: namn,: webbplats,: bio,: e-post,: telefon,: kön)

Det innebär att vi tillåter parametrar för användarnamn, namn, webbplats, bio, e-post, telefon och kön för giltiga paramer. Nu ser uppdateringsåtgärden ut:

def uppdatera current_user.update (user_params) omdirigera_to current_user slut
privat
def user_params params.require (: user) .permit (: användarnamn,: namn,: webbplats,: bio,: e-post,: telefon,: kön) slut

Gå tillbaka till formredigering och skicka uppdatering igen. Det Fungerar! När uppdaterad användare har lyckats omdirigeras den till användarprofilsidan.

För att enkelt kunna se förändringen efter uppdatering av användarinformation, bör vi gå tillbaka till användarprofilsidan (användare / show.html.erb) för att ersätta vissa falska data med verkliga användardata.

Uppdatera HTML-kod så:

<% = current_user.username%> ...
  ...
<% = current_user.name%> <% = link_to current_user.website, current_user.website, class: 'website'%>

Slutsats

I den här artikeln hjälper jag dig steg för steg hur du skapar en ny Rails-applikation med PostgreSQL och Bootstrap. Förståelse om MVC i Rails. Använda utveckla pärla för att skapa autentiseringsfunktioner. Och skapa funktioner för att visa och uppdatera användarprofil.

I nästa artikel kommer jag att dela med dig information om Active Record (CRUD, Validation, Association), Active Storage-funktionen och använda Kaminari-pärla i pagination.

Fullständig kod på Github: https://github.com/thanhluanuit/instuigram

Relaterade inlägg:

  • Del 2: medium.com/luanotes/build-instagram-by-ruby-on-rails-part-2
  • Del 3: medium.com/luanotes/build-instagram-by-ruby-on-rails-part-3

referenser:

  • Guide Rails: https://guides.rubyonrails.org/
  • Bootstrap: http://getbootstrap.com/
  • Devise gem: https://github.com/plataformatec/devise
  • https://www.codecademy.com/articles/request-response-cycle-dynamic