[RUBY] [Rails] So zeigen Sie die Wettervorhersage der registrierten Adresse auf Japanisch mit OpenWeatherMap an

Ziel

Entwicklungsumgebung

・ Ruby: 2.5.7 Schienen: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Betriebssystem: macOS Catalina

Annahme

Folgendes wurde implementiert.

・ Schlanke Einführung

• Implementierung der Anmeldefunktion

API-Schlüssel abrufen

1. Greifen Sie auf den unten stehenden Link zu

OpenWeatherMap

2. Klicken Sie auf "Anmelden"

3. Klicken Sie auf "Konto erstellen"

4. Geben Sie die erforderlichen Informationen ein und klicken Sie auf "Konto erstellen"

5. Setzen Sie Purpose auf other (entsprechend) und klicken Sie auf Save

6. Klicken Sie auf "API-Schlüssel"

7. Kopieren Sie den Schlüssel

8. Konvertieren Sie den API-Schlüssel in eine Umgebungsvariable

Implementieren Sie auf die gleiche Weise wie "API-Schlüssel wird in Umgebungsvariable konvertiert" im folgenden Artikel.

Google Map-Anzeige

Implementierung

1. Spalte hinzufügen

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. Bearbeiten Sie application_controller.rb

Fügen Sie dem starken Parameter "Präfektur" hinzu.

applocation_controller.rb

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

3. Ansicht bearbeiten

slim:users/show.html.slim

h3.weather-text
  = @user.prefecture

#weather

javascript:

  $(function () {
    var API_KEY = "#{ENV['OPEN_WEATHER_MAP_API']}"; //API-Schlüssel(Umgebungsvariable)Zu einer Variablen
    var city = "#{@user.prefecture}"; //Ersetzen Sie den Präfekturnamen des Benutzers durch die Variable
    //Weisen Sie der Lesevariablen eine API zu
    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);

        //Standardmäßig wird das Wetter alle 3 Stunden angezeigt
        //Ermitteln Sie das Wetter alle 24 Stunden, indem Sie die Daten in Vielfachen von 8 abrufen
        for (var i = 0; i <= 32; i = i + 8) {
          insertHTML += buildHTML(data, i);
        }
        $('#weather').html(insertHTML);
      })
      .fail(function (data) {
        alert('Wettervorhersage konnte nicht abgerufen werden');
      });
  });

  //Lokalisierung ins Japanische
  function buildHTML(data, i) {
    var Week = new Array('(Tag)', '(Mond)', '(Feuer)', '(Wasser)', '(Holz)', '(Geld)', '(Boden)');
    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">' + 'Beste:' + 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
  }