Introduction

Rails 6.0.3.4

This time, I would like to record the procedure for implementing a super-simple search application using the Rakuten product search API. Perhaps it's the simplest way to do it, aside from being easy to understand ...? I think it is selfish. This time, error handling is omitted.

https://webservice.rakuten.co.jp/ Let's register from the above and get the application ID.

items controller creation

rails g controller items search

If you enter this command in the terminal, you can enter the controller or view (search.html.erb), It also describes the routing (modify the routing to your liking).

Describe the view

<h2 class="product-subtitle-explain">Let's search for products!</h2>

<%= form_with url:product_search_path, method: :get, local: true do |f| %>
<%= f.text_field :keyword, placeholder: "Please enter a search keyword", autocomplete: 'off' %>
<%= f.submit "Search" , :name => nil%>
<% end %>

<h2>search results</h2>
<%= render partial: 'item_list' %>

Is it something like this? Since there is nothing to save in particular, write the url in form_with as to which action to skip.

`:Search word as keyword:Store in keyword. ← Important!`



#### **` "Please enter a search keyword"As an example, I put the characters on the form. Also,`**
```placeholder


#### **` 'off'So, I have disabled form auto-completion.`**
```autocomplete


 Last but not least, I would like you to pay attention to this.

#### **` 'product_list' %>`**
```<%= render partial

 As a result, the part where the search results are displayed is skipped to another view file.
 So here, in app / views / item,

#### **`_item.list.Create erb. The search I made earlier.html.It's the same place as erb.`**

Next is the render destination _item.list.erb, I will write a description to display the result.

<% @items.first(10).each do |item| %>

  <img src="<%= item['smallImageUrls'][0] %>">

  <a href="<%= item['itemUrl']%>" target="_blank"><%= item['itemName']%></a>

  <%= item['itemPrice'] %>Circle
 
<% end %>

Looking from above, first

`<% @items.first(10).each do |item| %>★<%end%>`


 As a result, I described what I wanted to copy in the product.

#### **`.first(10)By doing so, the first 10 items that were caught in the search are displayed.`**

@itemsWill be defined in the search controller after this! (Even if you look at the view now, an error will occur)

item['smallImageUrls'][0] I'm getting the first image of an item in a small size. item['itemurl'] I'm getting the URL to go to the item details. target="_blank" When I click an item, I open another tab and go to Rakuten's product details page. item['itemname'] I'm getting the name of the item. ['itemprice'] I am getting the price of the item. You can also get various information about the item. ↓ https://webservice.rakuten.co.jp/api/ichibaitemsearch/

Controller description

https://webservice.rakuten.co.jp/sdk/ruby.html We will implement it based on.

gem 'rakuten_web_service'

To the gem file and `bundle install` Please restart the terminal. From here, we will enter the description of the items controller.

class ProductController < ApplicationController
  require 'rakuten_web_service'

  def search
    if params[:keyword].present?
      @items = RakutenWebService::Ichiba::Item.search(keyword: params[:keyword])
    else
      render :search
    end
  end
end

`params[:keyword]Is search.html.Keywords are stored in the input form of erb.`


 Check [: keyword] in params and store it in @items.

#### **`RakutenWebService::Ichiba::Item.search is a cliché. For more information`**

https://webservice.rakuten.co.jp/sdk/ruby.html Please take a look.

Application ID setting

Create rukuten.rb under config / initialize. I will describe the application ID in it The description method differs depending on the timing, so be sure to check the formula as well.

RakutenWebService.configure do |c|
  c.application_id = '*******************'
  c.affiliate_id = '*******************'← This is optional
end

When using environment variables:

RakutenWebService.configure do |c|
  c.application_id = ENV['RWS_APPLICATION_ID']
  c.affiliate_id = ENV["RWS_AFFILIATION_ID"]
end

After it works, set the environment variables even in the production environment. After preparing with HTML / CSS, I think it will probably look like this.

Try to implement using Rakuten product search API (easy)