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.

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

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å:

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:

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
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
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