[Java] Implement search function with Rakuten Books (DVD) API

2 minute read

Introduction

We are currently developing a movie search service and implemented asynchronous communication using rails and ajax. After a few days of addiction, I finally implemented it, so I will keep a record. I touched jquery for a while, such as hamburger buttons, but it was my first time to touch Ajax and it was a few days. (There was also a relation that the code was not reflected because the server was not restarted.)

environment

  • rails (5.2.4.1)
  • ruby (2.5.3)

__ For those who implement Rakuten API__ (for Rails), please install gem. The mounting procedure is omitted. For details, see here

Controller processing specification

First of all, specify the action in posts_contriller to process the contents entered in the search field.

routes.rb


get'search', to:'posts#search' # execute search action when searching for a keyword

Search, view of search result display

Search form

erb:search_from.html.erb


# abridgement
 <div class='content'>
  <div id="search-box">
# url: GET search action with search_path
    <%= form_with(url: search_path, method: :get) do |f| %>
      <%= f.text_area :title, id: :title, placeholder: "Enter a keyword", style: "width: 200px;"%> #: title is hit with the search word
      <%= f.submit "Search", id: "search_button"%> # Fill in the search word Search either automatically or after the search button.
    <%end%>
  </div>
  <h2>Search results</h2>
  <div id='item_list'>
# render Partial may be returned as, but item_list.html.erb is displayed after ajax processing.
  </div>
</div>

View of search results

erb:item_list.html.erb


<% items.each do |item| %>
  <% if item[:title].present? %>
    <div class="item">
      <div class= "item-image">
        <%= image_tag(item[:imageUrl], width: '55px') %>
      </div>
      <div class= "item-title">
        <p><%= item[:title] %></p>
      </div>
    </div>
  <% end %>
<% end %>

search action

posts_controller.rb


class PostsController <ApplicationController
  ~abridgement
  def search
    contents = render_to_string(partial:'posts/item_list.html.erb', locals:{items: search_by_rakuten(params[:title])})
    Return #contents to json
    render json: {contents: contents} # it will not be read unless it is a hash
  end

  private

   def search_by_rakuten(title)
    items = [] # leave the [] empty for the method to be called
    if title.present?
      results = RakutenWebService::Books::DVD.search(
        title: title, #keyword in search field
        booksGenreId: '003', #Specify DVD genre of movie
        hits: 10 # Get only 10 hits
    #Get information by specifying conditions
      )
      results.each do |result|
     #Hash the acquired information and put a value in the key
        item = {
          title: result['title'],
          url: result['itemUrl'],
          imageUrl: result['smallImageUrl'].gsub('?_ex=64x64', ``)
        } # Put the hashed data in an array
        items << item
      end
    end
    items
  end
end

Ajax

*I will implement ajax with jquery, but in this case, since each person has different methods such as clicking a search function and typing a character in the search field, asynchronous communication is performed, so only the communication part of ajax is posted. There is a lot of ajax information, so if you are interested please check it out.

post.js



$(function{
  funtion search(title){
  //abridgement
  $.ajax({
        url: "/search",
        Access the search action with type: "GET", //get
        dataType: "json",
        async: true,
        data: {title: title }, //Specify search parameter (:title)
      }).done(function (data) {
        $("#item_list").css("display", "");
        $("#item_list").html(data.contents); // render json:{contents: contents} contents display
      });
}
})

You have now implemented the search function.

At the end

With the above, we were able to implement the search function and obtain the searched information. It took me 4,5 days just to implement this feature. It made me realize that my json, ajax, ruby lacked knowledge, but I was able to realize the greatness of disagreement communication. We will continue development.