[RUBY] [Rails] Comment afficher les prévisions météo de l'adresse enregistrée en japonais en utilisant OpenWeatherMap

Cible

Environnement de développement

・ Rubis: 2.5.7 Rails: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Système d'exploitation: macOS Catalina

supposition

Ce qui suit a été mis en œuvre.

・ Présentation mince

• Implémentation de la fonction de connexion

Obtenir la clé API

1. Accédez au lien ci-dessous

OpenWeatherMap

2. Cliquez sur "Connexion"

3. Cliquez sur "Créer un compte".

4. Entrez les informations requises et cliquez sur «Créer un compte»

5. Définissez Objectif sur «Autre» (approprié) et cliquez sur «Enregistrer»

6. Cliquez sur ʻAPI keys`

7. Copiez la clé

8. Faire de la clé API une variable d'environnement

Implémentez de la même manière que "La clé API est convertie en variable d'environnement" dans l'article suivant.

Affichage Google Map

la mise en oeuvre

1. Ajouter une colonne

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. Editez ʻapplication_controller.rb`

Ajoutez prefecture au paramètre strong.

applocation_controller.rb

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

3. Modifier la vue

slim:users/show.html.slim

h3.weather-text
  = @user.prefecture

#weather

javascript:

  $(function () {
    var API_KEY = "#{ENV['OPEN_WEATHER_MAP_API']}"; //Clé API(Variable d'environnement)Vers une variable
    var city = "#{@user.prefecture}"; //Remplacez le nom de préfecture de l'utilisateur dans la variable
    //Attribuer une API pour lire la 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);

        //Par défaut, il reçoit la météo toutes les 3 heures, donc
        //Obtenez la météo toutes les 24 heures en obtenant les données par multiples de 8
        for (var i = 0; i <= 32; i = i + 8) {
          insertHTML += buildHTML(data, i);
        }
        $('#weather').html(insertHTML);
      })
      .fail(function (data) {
        alert('Impossible d'obtenir les prévisions météorologiques');
      });
  });

  //Localisation en japonais
  function buildHTML(data, i) {
    var Week = new Array('(journée)', '(Mois)', '(Feu)', '(eau)', '(bois)', '(Argent)', '(sol)');
    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">' + 'Meilleur:' + Math.round(data.list[i].main.temp_max) + "℃</div>" +
        '<span class="weather-temp-min">' + 'Le minimum:' + Math.floor(data.list[i].main.temp_min) + "℃</span>" +
      '</div>';
    return html
  }