KaKao Map Rest API + Flutter 사용해보기 ( http 통신 ) - 3 ( API GateWay)

해당 게시글에서는 지도 화면이 아닌 JSON 데이터를 받는 방법입니다!
이번에는 API GateWay를 생성하고 lambda와 연결, flutter에서 호출할 차례이다.

이전 글

KaKao Map Rest API + Flutter 사용해보기 ( http 통신 ) - 2 ( AWS lambda)

 

이전에는 lambda 함수를 생성하고 테스트하여 Kakao Rest Api가 정상적으로 작동하는지 시도해 보았다. 이번에는 그 함수의 반환 값을 받기 위해서 API GateWay를 사용하여 Flutter에서 접근할 수 있도록 만들어 보자.

 

1. 저번과 같이 콘솔 상단에 API GateWay 검색 후 이동해주자

 

2. API 생성 해주자

 

3. REST API 구축해주자

 

4. 식별가능한 이름과 설명을 작성한 뒤 생성해주자

 

5. 리소스를 생성해주자

API_GATEWAY_Path/locations 를 가지는 리소스를 만들 수 있다.

 

6. 이제 요청할 메서드를 생성하자

( 여기서 GET과 POST를 선택할 수 있는데 GET은 Param에 포함하여 요청하고 POST는 Body로 요청한다. 
나는 POST로 진행하였다. )

이전에 설정했던 lambda함수를 선택해주자!

 

7. 다음은 스테이지를 정의해야 한다.

원하는 스테이지를 정의하고 우리는 테스트로 dev로 설정해주자

 

그러면 다음과 같이 URL 호출이 생성되며 URL/locations 를 사용하여 우리가 설정한 API 호출할 수 있다.

 

이제 GateWay 설정도 완료되었으니 Flutter에서 호출해보자

import 'dart:convert';

import 'dart:developer';

import 'package:flutter/material.dart';

import 'package:geolocator/geolocator.dart';

import 'package:http/http.dart' as http;

class TestPage extends StatefulWidget {

  const TestPage({super.key});

  @override

  State<TestPage> createState() => _TestPageState();

}

class _TestPageState extends State<TestPage> {

  Future<void> fetch() async {

    // 현재의 위도 경도 위치를 가져옴

    Position position = await Geolocator.getCurrentPosition(

        desiredAccuracy: LocationAccuracy.high);

    const String url =

        'URL/locations';

    Map<String, String> headers = {

      'Content-Type': 'application/json',

    };

    final Map<String, dynamic> body = {

      'y': '${position.latitude}',

      'x': '${position.longitude}',

    };

    http.Response response = await http.post(

      Uri.parse(url),

      headers: headers,

      body: json.encode(body),

    );

    if (response.statusCode == 200) {

      log(response.body);

    } else {

      log('Failed to send data: ${response.statusCode}');

    }

  }

  @override

  void initState() {

    super.initState();

    fetch();

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: const Text("테스트 페이지"),

      ),

      body: const Center(

        child: Text("지도 api 테스트중 입니다."),

      ),

    );

  }

}

 

URL에 설정한 URL 값을 넣어주고 실행하자 log를 통해 우리가 설정했던 body가 들어온 것을 알 수 있다.

 

 

마치며...
이제 이 값들을 변환시켜 좌표값을 가져오고 좌표값을 통해 네이버 지도를 띄울 수 있다.
다음 글은 네이버 지도 RestAPI를 통해 Static Map을 띄우도록 하겠다
좌표값을 알고 있기 때문에 dynamic, Static 자유롭게 사용해도 된다.