오늘은 ASIA OPEN DATA Hack a Thon! 2019부터 참전!

인연이 있고, 도쿄이지만, fukuoka.ex에서 Elixir 패턴 매치! 라고 외치다 사조 얼굴. 눈 입니다.

최근에는 일본 게이미 피케이션 협회 을 시작하거나 프로그래밍 교육을 즐겁게 하는 장치 만들기를 하고 있습니다. 동료 모집중이므로, 부디, 지금의 일본에 일석을 던지고 싶은 분은 DM 주세요.

또한 fukuoka.ex의 piacere 씨가 쓴 Elixir 튜토리얼 Excel에서 함수형 언어 마스터 1회째:데이터행의 “정렬”과 “좁히기”은 매우 들어가기 쉬운 교재이므로 추천입니다. 제7회까지 있으므로, 아직 하고 있지 않은 분은 꼭 트라이 해 봐 주세요.

ASIA OPEN DATA Hack a Thon!

Here API를 만져 보았다! 하고 싶은 것만을 위한 고통의 책

그런데, 이번은 ASIA OPEN DATA Hack a Thon!에서 멘토로서 참가했습니다.
그 때 스폰서인 Here의 API를 이용하면 상금 $1500을 노릴 수 있다! 라고 하는 일도 있어, 조속히 사용하고 싶다!

라는 참가자의 목소리에 대답하여 API를 보면, 굉장한 많은 API가 갖추어져 있기 때문에, 기대대!

그렇다고 해서 만져 보았지만, 무려! 일본의 지도는 아직 미대응!
하지만 일본 시장을 중시한 것 같기 때문에 그 근처는 향후에 기대하는 것으로, 간단하게 사용할 수 있는 것으로 무언가 만들어 보는 것으로 했습니다.

만든 것

Destination Weather API

를 이용하여 지도에 날씨 아이콘을 표시합니다.

　비망록

모처럼이므로, 비망록으로서 잡코드를 실어 둡니다.

프로젝트는 mix phx.new here로 만들었습니다.
api를 호출하기 위해 smallex 모듈 추가
이 근처는 생략합니다.

우선 환경 변수에 here id와 here code를 넣는다.

export HERE_API_id="xxxxxxx"
export HERE_API_code="xxxxxxx"

grep하고 확인

export -p | grep HERE

config.ex에 환경 변수에서 얻는 코드 작성

config.ex

# Import API
config :here, HereWeb.Endpoint,
hereid: System.get_env("HERE_API_id"),
herecode: System.get_env("HERE_API_code")

here.ex에 환경 변수로부터 취득한 id와 code를 연결해, Json.get(domain, path)에 이용하기 위한 path를
생성하다

lib/here.ex

defp get_id do
    Application.get_env(:here,HereWeb.Endpoint)[:hereid]
  end

  defp get_code do
    Application.get_env(:here,HereWeb.Endpoint)[:herecode]
  end

  def get_here(location) do
    Enum.join(["/weather/1.0/report.json?product=observation&name=",location,"&app_id=", get_id(),"&app_code=",get_code()])
  end

index.html.eex에서 leaflet.js에서 일본지도를 표시하여 here API에서 얻은 날씨 정보를 표시했습니다.

index.html.eex

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<%
domain = "https://weather.cit.api.here.com"
weather = Json.get(domain,Here.get_here("Tokyo"))
local = Map.get(weather,"observations")
[head | tail] = Map.get(local,"location")
city = Map.get(head, "city")
lat = Map.get(head, "latitude")
lng = Map.get(head, "longitude")
[ obs ] = Map.get(head,"observation")

url = Map.get(obs,"iconLink")
%>

<div id="map"></div>
<style>
  div#map{
    width: 100%;
    height: 500px;
  }
</style>

<script>
var t_std = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});

var map = L.map('map',{
  center: [<%= lat %>, <%= lng %>],
  zoom: 13,
  layers: [t_std]
});

var weatherIcon = L.icon({
    iconUrl: '<%= url %>',
    iconRetinaUrl: '<%= url %>',
    iconSize: [100, 100],
    iconAnchor: [25, 50],
    popupAnchor: [0, -50],
});

var mapMarker = L.marker([<%= lat %>, <%= lng %>], { icon: weatherIcon }).addTo(map);
var comment = '<%= city %>';
mapMarker.bindPopup(comment).openPopup();
</script>

감상

here API의 수가 많기 때문에, 여러가지 사용해 보고 싶다
빨리 일본지도 대응해주지 않을까 w