[RUBY] Erstellen Sie eine Instagram-Klon-App ①

Einführung

Wie der Titel schon sagt, werden wir eine vereinfachte Version der Instagram-App erstellen. Ich werde den Artikel in den folgenden Schritten schreiben, also hoffe ich, dass Sie ihn Schritt für Schritt lesen werden.

① App-Erstellung - Implementierung der Anmeldefunktion ← Imakoko ② Implementierung der Fotoposting-Funktion ③ [Implementierung der Benutzerseite] (https://qiita.com/maca12vel/items/c716702b02f977303011) ④ [Implementierung der Verfolgungsfunktion] (https://qiita.com/maca12vel/items/2760d33f3683fac91de5) ⑤ Implementierung der Post-Deletion-Funktion

Erstellen Sie zuerst eine Anwendung

Öffnen Sie ein Terminal und geben Sie den folgenden Befehl ein. Die Datenbank wird also MySQL verwenden Die Option ist ** "-d mysql" **.

Terminal

rails new instaclone -d mysql

Starten Sie nach dem Erstellen den Editor und bearbeiten Sie "datebase.yml". Ändern Sie encoding in utf8.

datebase.yml

default: &default
  adapter: mysql2
  encoding: utf8  #← Korrekturteil
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password:
  socket: /tmp/mysql.sock

Wenn Sie das Problem beheben können, kehren Sie zum Terminal zurück und wechseln Sie in das Verzeichnis instaclone. Führen Sie Rails db: create aus.

Terminal

instaclone % rails db:create

Nachdem die Vorbereitungen abgeschlossen sind, werden wir von nun an die Anmeldefunktion implementieren.

Devise vorstellen

Was ist ein Gerät ... Für Anwendungen, die mit Rails erstellt wurden Es ist eines der Juwelen, die die Authentifizierungsfunktion einfach implementieren können. Sie können Anmeldefunktionen wie Anmelden und Anmelden erstellen.

Fügen Sie dem Gemfile den folgenden Edelstein hinzu. (Unterseite) Führen Sie dann eine Bundle-Installation im Terminal durch.

Gemfile

gem 'devise'

Terminal

instaclone % bundle install

Erstellen Sie nach dem Hinzufügen des Edelsteins eine Konfigurationsdatei.

Terminal

instaclone % rails g devise:install

Erstellen Sie als Nächstes ein Benutzermodell.

Terminal

instaclone % rails g devise User

Da wird auch eine Migrationsdatei erstellt Führen Sie Rails db: migrate aus.

Terminal

instaclone % rails db:migrate

Nachdem Sie die Anmeldefunktion haben, erstellen Sie einen Startbildschirm zur Bestätigung. Führen Sie den folgenden Befehl im Terminal aus, um einen Controller für den Startbildschirm zu erstellen.

Terminal

instaclone % rails g controller homes

Fügen Sie nach der Erstellung die Indexmethode zu home_controller und hinzu Beschreiben Sie die Routeneinstellungen in route.rb.

homes_controller.rb

class HomesController < ApplicationController
  def index
  end
end

routes.rb

Rails.application.routes.draw do
  root 'homes#index' #← hier
  devise_for :users
end

Als ich den Controller früher erstellt habe, wurde auch die Ansichtsdatei damit erstellt. Der Ort ist "App / Ansichten / Häuser". Erstellen Sie hier eine Ansichtsdatei für den Startbildschirm und schreiben Sie die Zeichen für die Anzeige.

erb:app/views/homes/index.html.erb

<h3>home</h3>

Führen Sie Rails s im Terminal aus, starten Sie einen lokalen Server, Überprüfen Sie unter http: // localhost: 3000 /. Wenn Sie nach Hause anzeigen können, sind Sie erfolgreich.

Anleitung zum Anmeldebildschirm mit before_action

In dem bisherigen Zustand kann also jeder auf den Startbildschirm zugreifen Fügen Sie dem Controller before_action hinzu. Jetzt werden Benutzer, die nicht angemeldet (oder registriert) sind, automatisch zum Anmeldebildschirm weitergeleitet.

homes_controller.rb

class HomesController < ApplicationController
  before_action :authenticate_user! #← hier
  def index
  end
end

Wenn Sie den Bildschirm damit aktualisieren, sollte der folgende Bildschirm angezeigt werden.

Geben Sie in diesem Bildschirm Ihre E-Mail-Adresse und Ihr Passwort ein und klicken Sie auf Anmelden. Sie können zu dem Bildschirm wechseln, der zuvor als Startseite angezeigt wurde.

Dies ist fast abgeschlossen, aber schließlich müssen wir eine Schaltfläche zum Abmelden erstellen.

Abmeldeimplementierung

Verwenden Sie die Methode link_to, um einen Link zu erstellen, mit dem Sie sich vom Startbildschirm abmelden können.

erb:app/views/homes/index.html.erb

<h3>home</h3>

<div>
  <%= link_to 'logout', destroy_user_session_path, method: :delete %>
</div>

Sie finden den destroy_user_session_path im Terminal Rails Routen.

Präfix von devise / session # destroy (sign_out) Sie können sehen, dass es sich um "destroy_user_session" handelt. Fügen Sie nach dem Präfix _path hinzu.

Dann wird method in delete geändert und ist abgeschlossen.

Wenn es so aussieht, sind Sie erfolgreich.

Klicken Sie auf Abmelden, um zum Anmeldebildschirm zu gelangen, und Sie sind fertig.

das ist alles. Danke für deine harte Arbeit.

Weiter → ② Implementierung der Fotoposting-Funktion