장소 자동완성 API

fobidlim commented 6 years ago

https://developers.google.com/places/web-service/autocomplete?hl=ko#place_types

type=(cities)로 query 하면 지명 결과를 반환합니다.

fobidlim commented 6 years ago

@devjin0617 @rkdgusrnrlrl Google Place API 를 위해 travlog, travlog-debug 프로젝트에 초대해드렸습니다.

rkdgusrnrlrl commented 6 years ago

@fobid 고맙습니다 ( ) 확인 해보겠습니다. ㅎㅎ

fobidlim commented 6 years ago

자동완성은 On-demand로 Google에 요청, 데이터 가공해서 응답을 주면 될 것 같고, 노트 작성 & 수정 시 자동응답 result의 place_id를 가지고 Google애 세부정보를 요청, travlog DB에 저장하려고 합니다. 세부정보 모델링을 어떻게 해야할지 고민입니다.

아래는 자동완성 API result 입니다.

{
   "predictions" : [
      {
         "description" : "대한민국 서울특별시",
         "id" : "4cfb35dd83e1c4ff13b1f995fb7ccbd39b4231d1",
         "matched_substrings" : [
            {
               "length" : 2,
               "offset" : 5
            }
         ],
         "place_id" : "ChIJzWXFYYuifDUR64Pq5LTtioU",
         "reference" : "CkQ0AAAAMC2wANQ_ow4hR8bwqdfC85ns2F6sO4m6i0x-Bs0lN2om8X7HgUrB7wyDmrB9wWkUn-LZDRWCGBtjgXySgke8OhIQLtATCv1i4TcM1V6omOsL8xoU8feqal8CmgK31W1PZxUCA9wjKS8",
         "structured_formatting" : {
            "main_text" : "서울특별시",
            "main_text_matched_substrings" : [
               {
                  "length" : 2,
                  "offset" : 0
               }
            ],
            "secondary_text" : "대한민국"
         },
         "terms" : [
            {
               "offset" : 5,
               "value" : "서울특별시"
            },
            {
               "offset" : 0,
               "value" : "대한민국"
            }
         ],
         "types" : [ "locality", "political", "geocode" ]
      }
   ],
   "status" : "OK"
}

아래는 장소 세부정보 API result 입니다.

{
   "html_attributions" : [],
   "result" : {
      "address_components" : [
         {
            "long_name" : "서울특별시",
            "short_name" : "서울특별시",
            "types" : [ "locality", "political" ]
         },
         {
            "long_name" : "서울특별시",
            "short_name" : "서울특별시",
            "types" : [ "administrative_area_level_1", "political" ]
         },
         {
            "long_name" : "대한민국",
            "short_name" : "KR",
            "types" : [ "country", "political" ]
         }
      ],
      "adr_address" : "\u003cspan class=\"country-name\"\u003e대한민국\u003c/span\u003e \u003cspan class=\"region\"\u003e서울특별시\u003c/span\u003e",
      "formatted_address" : "대한민국 서울특별시",
      "geometry" : {
         "location" : {
            "lat" : 37.566535,
            "lng" : 126.9779692
         },
         "viewport" : {
            "northeast" : {
               "lat" : 37.6956,
               "lng" : 127.1823
            },
            "southwest" : {
               "lat" : 37.4346,
               "lng" : 126.7968
            }
         }
      },
      "icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/geocode-71.png",
      "id" : "4cfb35dd83e1c4ff13b1f995fb7ccbd39b4231d1",
      "name" : "서울특별시",
      "photos" : [
         {
            "height" : 1200,
            "html_attributions" : [
               "\u003ca href=\"https://maps.google.com/maps/contrib/112977006529666171499/photos\"\u003efede Caceres\u003c/a\u003e"
            ],
            "photo_reference" : "CmRaAAAAUwstfJL6fHPRRPpsDvJ10s6JdCbVgevQJNoRE653WxN-n4am8TvxE5QjIb6VaSZY5o5CBCTJEMpHKlXnxo4SKG4EaIcNmel1MoQjDRfTidIymDndLKPBT_fnomK-ofsCEhCbFm4moRF56lZDPlkxlZokGhROq3UdzyHxmeuFnpEUNwFew1Mayg",
            "width" : 1920
         },
         {
            "height" : 2340,
            "html_attributions" : [
               "\u003ca href=\"https://maps.google.com/maps/contrib/101488497219228496445/photos\"\u003e山崎あゆ\u003c/a\u003e"
            ],
            "photo_reference" : "CmRaAAAA3N6uc6o42FEBldeyv6WJOFPmxEOJ_aYJUf_jYLgShdeX8GCXu_yCWJ5pOWZ2G50XPMIXuBrlVC1jgVmLmsY9pvrgu_Hc2DLLmQf8wd9B0Q1tgiPaS0VP2qHisLK7UkLeEhDqO100sgu0qMX-XJiybkbcGhTs8MaSk1sMuWSkfqlDUfpIc5tQ8g",
            "width" : 4160
         },
         {
            "height" : 2592,
            "html_attributions" : [
               "\u003ca href=\"https://maps.google.com/maps/contrib/116966642440734269932/photos\"\u003ePaweł Kaczmarek\u003c/a\u003e"
            ],
            "photo_reference" : "CmRaAAAADjyuSWMnXHUoJDSHjJs5rPUhEo91nnUD1XXuZfV3z7ZpJ7Fu1-QFQbOP4cwPJOY_6VPPiMQGnbB4Q30YNJxEJ6KdG9QlSFnSAzmegZvGSuAgQds1KdvEoMulY33SHjPDEhC2uKPYNEVz448NPs6wL5eQGhSdqP8ON_SYmp-CWtQHavcMLArNlA",
            "width" : 4608
         },
         {
            "height" : 3456,
            "html_attributions" : [
               "\u003ca href=\"https://maps.google.com/maps/contrib/107653977237994592477/photos\"\u003eSourabh Shetti\u003c/a\u003e"
            ],
            "photo_reference" : "CmRaAAAAB1PanTfIIMcpeRIhnTNyy9adDczGVftnxxibCKwb7UxCL_qBwvoWGxN2kL0BRHmdBvohAWmudESWYovbiv5KSDM6ub8KVqj0HsvKgZ6sP7WmHThXhb955-fmK7WPJxaQEhDdWmpkFGkgXX0A4gwFUQFFGhSvzKBiM5_szm7gUQlXTWtcX73JlA",
            "width" : 5184
         },
         {
            "height" : 4160,
            "html_attributions" : [
               "\u003ca href=\"https://maps.google.com/maps/contrib/106031435422958055750/photos\"\u003e박현\u003c/a\u003e"
            ],
            "photo_reference" : "CmRaAAAAu_ZujLwhp-S0pVTlFMHJ5lNTzuuh89Wffqk05nXHSmcd_b6dbLrQWQXYAAa2svHFV1rv5PBEh_CwBHihVrnw4LcvPfU8ICVB8A0GNpAO5-OPxd2OLxZuwGJO4hDDv5vmEhCTPVc7gC3pbLYvhiL5kDvOGhSRdB-hVQuvhSrlI0_D4wkCvVwoZg",
            "width" : 3120
         },
         {
            "height" : 3456,
            "html_attributions" : [
               "\u003ca href=\"https://maps.google.com/maps/contrib/107653977237994592477/photos\"\u003eSourabh Shetti\u003c/a\u003e"
            ],
            "photo_reference" : "CmRaAAAAxDMIF1sGxSK9uLvhDl9KU1k0MtcO9fGFQKtOE33L1JgQK5cKzZy6bcz4_6M7mSDZuGxONiO_Po5ucP_NQM0uDpV9DI21G4EtTFMel6gYUKCyW50iDtAdDxH5GQRVht-bEhBczU4MVXJt1_yT33gTjnmpGhSNls01tbjZcYgYBPXx_9REMJtulA",
            "width" : 5184
         },
         {
            "height" : 1920,
            "html_attributions" : [
               "\u003ca href=\"https://maps.google.com/maps/contrib/117700996344103466869/photos\"\u003eAiL Ail\u003c/a\u003e"
            ],
            "photo_reference" : "CmRaAAAAn4eaWk83U-sPMoNTpsA4p3zGsO9QwY0zj0UJAjakFcN6jsQ0rmVLXGKQDbIkkknrXG7Tyex5jm2l-8YFXdSDQ0nv0EjWMLcebqbEMB86fN81CybVKdvXKllknTVLwDLtEhBgfoTiQG_RkZtZp1S6JwYiGhRTnRVdl5zrPOpw-cf_VG96UTuGHg",
            "width" : 2160
         },
         {
            "height" : 4160,
            "html_attributions" : [
               "\u003ca href=\"https://maps.google.com/maps/contrib/106031435422958055750/photos\"\u003e박현\u003c/a\u003e"
            ],
            "photo_reference" : "CmRaAAAAbxzo399m6npM-WVq-jC8q8oeUkYiG3UonE7c_nZmyFLHfHZL5FbjJHmUiR4iBdt-YnZn_qXe-MeUEz1XvcbJycv-vr0AKAuc58fkMYdgxmLoHCHooNGeCaKtEgXAoZoEEhD8D0SU-v12lh66yS1nyFkoGhTFRgdTF6k6d6bzhBnxXoFu0DCFkA",
            "width" : 3120
         },
         {
            "height" : 4160,
            "html_attributions" : [
               "\u003ca href=\"https://maps.google.com/maps/contrib/106031435422958055750/photos\"\u003e박현\u003c/a\u003e"
            ],
            "photo_reference" : "CmRaAAAAC2KuvzswpcAxGgsjjBfEQdhQQ-Fwlw7Gu49KiKDn62nPxVIAa0AbkF1dcS8OXvbWl0abY_dYmS1PX5TFjaz9lBKuKJqfPBoguunEIAmF4urB6a_38U1a8r0dF71rRaEKEhC7sMe53hKkLzd8HaLXe7-3GhRjsa5GeRnI4HPuod7uCm8Ju5Netw",
            "width" : 3120
         },
         {
            "height" : 4160,
            "html_attributions" : [
               "\u003ca href=\"https://maps.google.com/maps/contrib/106031435422958055750/photos\"\u003e박현\u003c/a\u003e"
            ],
            "photo_reference" : "CmRaAAAAT1gihioI6ZysnB9e1DC6qzaT_CgRAzltaMf9Cq2GQT-c2icGjJ-qoh51OLk9BYNI8c0ZiJ6V2prbTbO4CSoiGvmgvrlvzettisDgY1np7NKOIE1TQrvuu0qjA0Am27XhEhA22Xo8d_Y4-cDC_U-g4kj9GhSRNIqdDiYZ1tCoQeWTtYzqw6_9Og",
            "width" : 3120
         }
      ],
      "place_id" : "ChIJzWXFYYuifDUR64Pq5LTtioU",
      "reference" : "CmRbAAAAX7wvdTeBXq7715gCYWFPbe2_TSrUzA7iDRuhOCFsRNmmyrpA26EQ0WM3e7arAaI60l-HXg--x_tl2E7_e6b-ojlL-ZDxUbaSlQJRevs1PX9B-3lK_xuPXMSnofJa26KmEhA7NVunTaID3XZdxXHXzSrRGhSzp3RX8KBPIA3Yv3WfBTzf1dNd4Q",
      "scope" : "GOOGLE",
      "types" : [ "locality", "political" ],
      "url" : "https://maps.google.com/?q=%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD+%EC%84%9C%EC%9A%B8%ED%8A%B9%EB%B3%84%EC%8B%9C&ftid=0x357ca28b61c565cd:0x858aedb4e4ea83eb",
      "utc_offset" : 540,
      "vicinity" : "서울특별시"
   },
   "status" : "OK"
}

fobidlim commented 6 years ago

관련 이슈 작업을 진행했습니다. commit link

PR은 하지 않았지만, 의문점이 생겼습니다.

장소 자동 완성 result 를 API 서버에서 가공하여 응답해 줄 필요가 있을까 싶습니다.

rkdgusrnrlrl commented 6 years ago

@fobid 양이 좀 방대하긴 한 것 같습니다. 우선은 클라이언트에서 뿌려야 할 정보 정도만 갖고 있어도 되지 않을까 싶습니다. 혹시 지도 처리에 경로를 표시해 준다 든지 등의 위치만 보여주는 것 외의 추가 기능이 더 필요 한가요??

fobidlim commented 6 years ago

@rkdgusrnrlrl 구글쪽 데이터를 보아하니, type이 country, administrative_area_level_1, locality 등으로 구분되어있어서, 나중에 클라이언트에서 type 단위로 어느 구역을 많이 다녀왔나 파악도 가능하지 않을까 싶습니다. 그런데 type에 해당하는 name이 지역화가 되어있지 않으니 type으로 검색은 어려울 것 같고... 해서 고민이에요 ㅋㅋㅋㅋ 지역에 해당하는 사진도 보여주면 좋겠는데, 구글에서는 사진 정보를 별도의 API 로 제공하기 때문에, 과금이 발생해서 또 고민입니다.

일단 lat, lng, name 정도는 필수입니다.

rkdgusrnrlrl commented 6 years ago

@fobid type 정보는 추후에 쓰는 편이 낫지 않까 싶습니다. 초기에 너무 많은 정보와 기능의 두는 것 보다 추후 해당 기능으로 확장하는데, 어려움이 없게만 해 놓아도 충분할것 같습니다. 여러 모로 많이 알아보신것 같습니다. 대단하십니다. 👍

fobidlim commented 6 years ago

@rkdgusrnrlrl 아무래도 그게 좋을 것 같습니다. 일단 초기에는 최소한의 정보만으로 시작하도록 하죠!

fobidlim commented 6 years ago

@rkdgusrnrlrl 구글님이 도와주신 덕분이죠 😅

travlog / travlog-server

장소 자동완성 API #38