정기 업데이트 소식을 전해드려요. [업데이트 확인하기]
Flextudio
릴리즈노트
Flextudio 가이드
Flextudio 가이드
  • 플렉스튜디오 처음 시작하기
    • GETTING STARTED
      • 0. 플렉스튜디오 준비하기
      • 1. 워크스페이스 시작하기
      • 2. 시나리오 개발하기
      • 3. 앱 배포하기
      • 4. 앱 사용하기
    • 플렉스튜디오 로드맵
    • 튜토리얼(Tutorial)
      • 메모장 앱 만들기(필수)
        • 1. [Design] 디자인하기
        • 2. [Event] 화면 이동 구현하기
        • 3. [Data] 컴포넌트에 데이터 연결 하기
      • 템플릿을 활용해 앱 만들기(초급)
        • 0. 시나리오 생성하고 사용하기
        • 1. [Design] 디자인 템플릿 사용하기
        • 2. [Event] 클릭 시 스텝(Step) 이동하기
        • 3. [Data] 컴포넌트에 데이터 연결하기
        • 4. [Data] 이벤트 스크립트로 게시물 삭제 구현하기
      • 약속잡기 앱 만들기(중급)
        • 0. 시나리오 생성하기
        • 1. [Data] Firestore 준비
        • 2. [Event] 약속 만들기
        • 3. [Data] 약속 데이터 생성
        • 4. [Event]약속 조회하기
        • 5. 사용자 SNS로그인
        • 6. 앱 배포/링크
        • 7. [Event] 약속 회신하기
        • 8. 배포하고 확인하기
        • 9. 추가 상세 가이드
  • 개념 학습하기
    • 시나리오의 구성요소
    • 컬렉션(Collection)과 섹터(Sector)
    • 사용자 입력에 의한 데이터 변화
    • 이벤트와 서비스 구동 방법
    • 대체 텍스트 사용하기
    • [심화] Filter - 섹터(Sector) Status, Condition
    • [심화] Step의 구성과 생애주기
    • [심화] 컬렉션의 카테고리
    • [심화] 데이터의 상태관리(Sector Status)
    • [심화] 카테고리 연결관계
  • 워크스페이스 콘솔 가이드
    • 워크스페이스 콘솔 인터페이스
      • 앱
        • 시나리오 관리
        • 레이아웃관리
        • 데이터연결
        • 고객관리
        • 링크앱팩설정
        • 링크관리
        • 서비스오류로그
        • SDK설정
        • 앱정보설정
      • 앱팩
      • 개발
        • 시나리오
        • 권한키관리
        • 패키지설치
      • 데이터
        • API 연동
        • 호스팅 폴더
        • FlexSQL
      • 고객 관리
        • 설정 페이지
      • 에뮬레이터
      • 워크스페이스 설정
        • 기본정보
        • 개발자 관리
        • Flex API Key관리
  • 시나리오 개발하기
    • 시나리오 스튜디오 인터페이스
      • 상단영역
      • 시나리오 관리
      • 시나리오 설정
      • 시나리오 배포
      • 테마색 설정
      • 하단패널-Collection
      • 하단패널-DataBase
      • 하단패널-Authkey
      • DB 연결하기
    • 디자인 모드 (Design Mode)
      • 디자인 템플릿
      • 고정 레이아웃
      • 너비 높이
      • 디스플레이
      • 마진
      • 패딩
      • 배경
      • 보더
      • 색상
      • 스크롤 타입
      • 스타일 유형
      • 아이콘
      • 절대값 위치 설정
      • 컨트롤 명
      • 캡션
      • 텍스트
      • 투명도 설정
      • 힌트
      • 인풋 컨트롤 변경
    • 개발 모드 (Dev Mode)
      • 컴포넌트(Component)
        • 컴포넌트 상태
        • 로드스크립트
        • 데이터(Data)
        • 이벤트(Event)
        • 컴포넌트 동적 활용(컴포넌트 아이디)
      • 이벤트
        • 이벤트 서비스 스크립트 API 액션 추가
        • API 호출
        • 함수 자동 생성
        • 스크립트 에디터
      • 서비스
        • FlexSQL
        • FlexAutoQuery
        • Firestore
        • GoogleSheet
        • Flextudio API - User
      • 데이터소스
      • Etc
        • Collections
        • Language
        • Scenario
    • 컴포넌트
      • 스텝
      • 그룹
      • 레이아웃
      • 컨트롤
        • Approval
        • Button
        • CalendarNavigator
        • Calendar Schedule
        • Checkbox
        • ComboBox
        • DatePicker
        • Embed
        • FileUpload
        • Image
        • InputDate
        • InputMask
        • InputNumber
        • InputSearch
        • InputText
        • Line
        • MultiInputBox
        • Radio
        • Sheet (Beta)
        • Signature
        • Tab
        • Text
        • TimeTable
        • Tree
      • 스텝 버튼
  • 디버거
    • 디버거 인터페이스
    • 실행 내역 확인하기
    • 콘솔
    • 데이터 상태 확인하기
    • 서비스 테스트
      • Test-API
      • Test-SQL
  • 참고
    • FAQ
      • 시나리오에서 앱을 배포했는데, 라이브에 적용이 안되요.
    • 단어집
      • 권한키 (AuthKey)
      • 이너블럭
      • 컬렉션 키
      • FlexDB
      • 공개앱(오픈앱)
      • ParamBlock/ResultBlock
      • _SUID(suid)
    • 단축키
    • 개발 예제
      • 스크롤 페이징 샘플
    • 심화 실습
      • Google Map 그려주기
        • 1. Google Map 생성영역 생성
        • 2. 이벤트 구성하기
        • 3. 이벤트 연결하기
      • Naver Map 그려주기
        • 1. Naver Map 생성영역 생성
        • 2. 이벤트 구성하기
        • 3. 이벤트 연결하기
      • QR코드 생성하기
        • 1. 화면구성하기
        • 2. 이벤트 구성하기
        • 3. 이벤트 연결하기
      • 목적지 경로 거리 및 시간 Google Map
        • 1. Google Map Distance Matrix API 추가하기
        • 2. 화면 구성하기
        • 3. 이벤트 구성 및 연결하기
        • 4. API 호출 결과 후처리하기
    • 데이터 연동 방법
      • 자사 API 백엔드 시스템
      • 외부 DB 연동
      • Firestore 연동
      • GoogleSheet 연동
      • K-System 연동
      • Airtable 연동
    • 앱 출시하기 (SDK)
      • Android SDK
      • iOS SDK
Powered by GitBook

ⓒ flextudio

On this page
  • 개발하기
  • API 연동 추가하기
  • 챕터 마무리
  • 배운 내용
  • 다음 챕터에서는?

Was this helpful?

  1. 참고
  2. 심화 실습
  3. 목적지 경로 거리 및 시간 Google Map

1. Google Map Distance Matrix API 추가하기

Distance Matrix API를 사용하기 위해 API연동에 모듈을 추가하는 방법에 대해 알아보겠습니다.

Previous목적지 경로 거리 및 시간 Google MapNext2. 화면 구성하기

Last updated 10 months ago

Was this helpful?

개발하기

Google Map Distance Matrix API를 사용하기 위해서는 API연동에 모듈을 추가해 주어야합니다.

API 연동 추가하기

  1. 워크스페이스 콘솔의 좌측 메뉴에서 을 선택합니다.

  1. 새 API 버튼을 클릭하고, 별도 API 추가하기를 통해 Custom API를 추가해주도록 합니다.

  1. 생성된 API의 명칭을 GoogleMap으로 변경하고 새 모듈을 선택하여 명칭을 distancematrix로 추가합니다.

  1. 모듈 설정 시 각 항목을 아래 표에 맞게 채워넣은 후 설정을 완료하면 모듈을 배포해야 합니다.

Distance Matrix API의 호출 URL은 units, mode, origins, destinations, region, key를 URL 파라미터로 사용하여 해당 값은 Event Config Key 로 정의해줍니다.

항목명
항목값
설명

Event Config Key

units; mode; origins; destinations; region; key;

URL

https://maps.googleapis.com/maps/api/distancematrix/json?units={=Event.units}&mode={=Event.mode}&origins={=Event.origins}&destinations={=Event.destinations}&region={=Event.region}&key={=Event.key}

Header

{}

별도의 추가헤더 설정이 필요하지 않은경우 {}를 넣어야합니다.

HTTP Method

GET

API에서 요구하는 통신 방식을 설정합니다.

Response Body

{=Result}

API 응답의 전체 결과를 반환하도록 설정합니다.

Error Message

별도로 결과 데이터의 형식을 지정할 필요가 없는 경우, 추가 설정을 하지 않습니다.

챕터 마무리

배운 내용

  • API연동에 URL 파라미터를 사용하는 API에 대한 모듈생성 방법을 배웠습니다.

다음 챕터에서는?

  • 경로 거리 및 시간 검색을 위한 화면구성을 해보도록 하겠습니다.

API 요청의 URL에서 특정 값을 동적으로 삽입해야 할 경우, 에 설정된 값을 URL 파라미터로 포함시켜 동적으로 값을 설정할 수 있도록 합니다.

URL을 동적으로 구성해주기 위해 를 활용하여 URL을 구성해줍니다.

[데이터]-[API연동]
Event Config Key
Event Config Key