Make an instagram clone app ②

Introduction

As the title suggests, we will create a simplified Instagram app. I will write the article in the following steps, so I hope you will read it step by step.

App creation-Implementation of login functionImplementation of photo posting function ← Imakoko ③ [Implementation of user page] (https://qiita.com/maca12vel/items/c716702b02f977303011) ④ [Implementation of follow function] (https://qiita.com/maca12vel/items/2760d33f3683fac91de5) ⑤ Implementation of post deletion function

Introduction of Active Storage

What is Active Storage ... A function for uploading files If you use this, you can easily create an image posting function etc. with a form.

Terminal


rails active_storage:install

Next, create a photo model. Since photo is associated with user, ```user: belongs_to Create a text type column by setting caption: text``

Terminal


rails g model photo user:belongs_to caption:text

And

Terminal


rails db:migrate

Finally, create the controller.

Terminal


rails g controller photos

The preparation is complete.

Create a link to the photo posting page

First, set the routing.

routes.rb


Rails.application.routes.draw do
  root 'homes#index'

  devise_for :users

  resources :photos #← here
end

Next, edit the home screen.

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


<h3>home</h3>

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

<div>
  <%= link_to 'Photo posting', new_photo_path %>
</div>

Check new_photo_path with Prefix of ** rails routes ** Image from Gyazo

Create new.html.erb in the photos model and write as follows for confirmation.

erb:app/views/photos/new.html.erb


<h3>Photo posting</h3>

If you can move from the home screen to the photo posting page as shown below, you are successful. Image from Gyazo

Controller settings

I will describe it in the controller created by rails g controller photos.

photos_controller.rb


class PhotosController < ApplicationController
  before_action :authenticate_user!

  def new
    @photo = current_user.photos.new
  end

  def create
    @photo = current_user.photos.new(photo_params)

    if @photo.save
      redirect_to :root
    else
      render :new
    end
  end

  private

  def photo_params
    params.require(:photo).permit(:caption, :image)
  end
end

With before_action: authenticate_user!, It is set so that only logged-in users can post.

Create action with argument (photo_params) (photo_params) is defined under private.

Also with the create action If the save is successful, the home screen will be displayed. ** If it fails, it is set to return (stay) to the new posting screen **.

Edit view of new post screen

Before that, check the association between the ʻuser model and the "photos model`. Since user and photos have a one-to-many relationship, edit as follows.

user.rb


class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable

  has_many :photos #← here
end

photo.rb


class Photo < ApplicationRecord
  belongs_to :user #← Described at rails g model photo

  has_one_attached :image #← here
end

has_one_attached: Column name is used to attach one image to the model. When linking multiple images, use has_many_attached: column name.

Since this is one image, it is called has_one_attached. By the way, the way of writing when displaying an image is different between one and many.

has_one_attached


<%= image_tag(@photo.image) %>

has_many_attached


<% images.count.times do |i| %>
  <%= image_tag(@photo.image[i]) %>
<% end %>

has_many_attached: column name The image is stored as an array, so it looks like the above.

Although the introduction has become long, I will edit the view of the new post screen.

erb:app/views/photos/new.html.erb


<h3>Photo posting</h3>

<%= form_with model: @photo, local: true do |f| %>
  <div>
    <%= f.file_field :image %>
  </div>
  <div>
    <%= f.text_area :caption %>
  </div>
  <%= f.submit %>
<% end %>

Display the posted image on the home screen.

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


<h3>home</h3>

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

<div>
  <%= link_to 'Photo posting', new_photo_path %>
</div>

<% current_user.photos.each do |photo| %>
  <div>
    <p><%= photo.caption %></p>
    <%= image_tag photo.image %>
  </div>

I try to display all posts in each statement.

From the new post page, click Select File, Enter caption, Create Photo, If you can post as follows, I think that it is in shape for the time being. Image from Gyazo


that's all. Thank you for your hard work.

Next → ③ [Implementation of user page] (https://qiita.com/maca12vel/items/c716702b02f977303011)

Recommended Posts

Make an instagram clone app ④
Make an instagram clone app ②
Make an instagram clone app ③
Make an instagram clone app ①
Make an android app. (Day 5)
Make an android app. (First day)
I want to make an ios.android app
App development beginners tried to make an Android calculator app
Let's make the app better
How to make an app using Tensorflow with Android Studio
Is it an Android app?
Make an FPS counter in Swift
Create an app with Spring Boot 2
Create an app with Spring Boot
How to make an app with a plugin mechanism [C # and Java]