[RUBY] [Rails] How to display the weather forecast of the registered address in Japanese using OpenWeatherMap

Target

Development environment

・ Ruby: 2.5.7 Rails: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ OS: macOS Catalina

Premise

The following has been implemented.

・ Slim introduction -Login function implementation

Get API key

1. Access the link below

OpenWeatherMap

2. Click Sign in

3. Click Create an Account.

4. Enter the required information and click Create Acount

5. Set Purpose to ʻother(appropriate) and clickSave`

6. Click ʻAPI keys`

7. Copy Key

8. Make API key an environment variable

Implement in the same way as "API key is made into environment variable" in the following article.

Google Map display

Implementation

1. Add column

Terminal

$ rails g migration AddPrefectureToUsers prefecture:string

~_add_prefecture_to_users.rb

class AddPrefectureToUsers < ActiveRecord::Migration[5.2]
  def change
    add_column :users, :prefecture, :string
  end
end

Terminal

$ rails db:migrate

2. Edit ʻapplication_controller.rb`

Add prefecture to the strong parameter.

applocation_controller.rb

def configure_permitted_parameters
  devise_parameter_sanitizer.permit(:sign_up, keys: [:email, :name, :prefecture])
end

3. Edit the view

slim:users/show.html.slim

h3.weather-text
  = @user.prefecture

#weather

javascript:

  $(function () {
    var API_KEY = "#{ENV['OPEN_WEATHER_MAP_API']}"; //API key(Environment variable)To a variable
    var city = "#{@user.prefecture}"; //Substitute the prefecture name of the user in the variable
    //Assign API to read variable
    var url = 'https://api.openweathermap.org/data/2.5/forecast?q=' + city + ',jp&units=metric&APPID=' + API_KEY;

    $.ajax({
        url: url,
        dataType: 'json',
        type: 'GET',
      })
      .done(function (data) {
        var insertHTML = '';
        var cityName = data.city.name;
        $('#city-name').html(cityName);

        //By default, it gets the weather every 3 hours, so
        //Get the weather every 24 hours by getting the data in multiples of 8
        for (var i = 0; i <= 32; i = i + 8) {
          insertHTML += buildHTML(data, i);
        }
        $('#weather').html(insertHTML);
      })
      .fail(function (data) {
        alert('Failed to get the weather forecast');
      });
  });

  //Localizing into Japanese
  function buildHTML(data, i) {
    var Week = new Array('(Day)', '(Month)', '(fire)', '(water)', '(wood)', '(Money)', '(soil)');
    var date = new Date(data.list[i].dt_txt);
    date.setHours(date.getHours() + 9);
    var month = date.getMonth() + 1;
    var day = month + '/' + date.getDate() + Week[date.getDay()];
    var icon = data.list[i].weather[0].icon;
    var html =
      '<div class="weather-report">' +
        '<img src="https://openweathermap.org/img/w/' + icon + '.png ">' +
        '<span class="weather-date">' + day + "</span>" +
        '<div class="weather-temp-max">' + 'Best:' + Math.round(data.list[i].main.temp_max) + "℃</div>" +
        '<span class="weather-temp-min">' + 'Minimum:' + Math.floor(data.list[i].main.temp_min) + "℃</span>" +
      '</div>';
    return html
  }