Thunkable로 API 코딩하기

  • 애플리케이션 프로그래밍 인터페이스(API)가 무엇인지 알아보기 

  • 앱에서 API를 사용하여 정보 얻기

이 단원의 활동은 다음과 같습니다:

API

API 는 다음을 의미합니다. 애플리케이션 프로그래밍 인터페이스.

API는 다음을 수행할 수 있는 방법입니다. 얻을 수 있는 정보를 얻을 수 있는 방법입니다.

클라우드 스토리지는 일반적으로 앱 내에서 공유되는 내부 정보이지만, API를 사용하면 앱이 인터넷에서 외부 정보에 액세스할 수 있습니다.

클라우드 스토리지
전화기 3대에 연결된 웹 사이트
API

사람들이 날씨에 따라 어떤 옷을 입을지 결정하는 데 도움을 주는 앱을 개발한다고 가정해 보겠습니다. 날씨에 대한 데이터를 데이터베이스에 업로드하는 데 많은 시간을 할애할 수 있지만 날씨를 보여주는 웹사이트는 많습니다. 

더 나은 해결책은 날씨 웹사이트에서 데이터를 가져와서 API를 사용하여 앱을 통해 사용자에게 표시하는 것입니다.

다음은 API의 작동 원리를 설명하는 좋은 동영상입니다.

API를 사용하려면 다음을 수행해야 합니다: 

  1. API를 사용하는 웹사이트를 찾습니다. 다음은 목록 사용 가능한 공개 API를 주제별로 나열한 목록입니다.
  2. API 사용 방법은 해당 사이트의 설명서를 참조하세요. 대부분의 사이트에서 예제를 제공합니다.
  3. 일부 사이트에서는 API를 사용하기 전에 API 키를 등록해야 합니다. 일부 API는 사용료가 부과된다는 점에 유의하세요.
  4. API 코드를 Thunkable에 통합합니다. 

코딩 예제

다음은 Thunkable에서 웹 API를 사용하는 연습을 할 수 있는 몇 가지 튜토리얼입니다.

참고! 여기에 나열된 일부 튜토리얼에서는 웹 API 컴포넌트가 디자이너 창에 표시됩니다. 그러나 현재 버전의 Thunkable에서는 블록 편집기의 고급 아래에서 웹 API 컴포넌트를 찾을 수 있습니다.

를 클릭하여 웹 API 컴포넌트를 추가합니다. 표시되는 속성 창 또는 코드에서 URL 및 쿼리 매개변수를 추가할 수 있습니다. 블록 코딩은 동일해야 합니다.

웹 API를 보여주는 컴포넌트 창 썽커블
이 동영상에서는 API와 Thunkable 웹 API 컴포넌트에 대한 개요를 설명합니다.

다음은 매우 기본적인 사용 예시입니다. Google 지도 API 을 탭하여 특정 위치를 타겟팅하여 내 앱에서 Google 지도 앱을 실행할 수 있습니다.

이 예제 튜토리얼에서는 다음 API를 사용합니다. 오픈웨더맵.

다양한 웹 API 예제의 전체 재생 목록으로 썽커블이 가능합니다.

활동: 과일 영양 앱

예상 시간: 30분

API를 사용하여 과일 정보 표시

  1. Thunkable에서 스타터 프로젝트를 엽니다.
  2. 앱을 실행하여 작동 방식을 확인하세요.
  3. 프로젝트를 편집할 수 있도록 프로젝트의 복사본을 만듭니다.
  4. 아래 예제 JSON 문자열을 확인하여 어떻게 생겼는지 알아보세요.
  5. 현재 앱은 칼로리 정보만 표시합니다. 칼로리 라벨 아래에 두 번째 라벨을 추가하여 반환되는 다른 영양소 값 중 하나를 표시합니다.
스타터 프로젝트 열기

모범 모범 사례: 재미있는 사실, json은 무엇을 의미할까요? "JavaScript 객체 표기법". Json은 1999년에 만들어졌으며, 우리가 매일 사용하거나 얻는 거의 모든 데이터는 어떤 식으로든 json을 사용해야 합니다. json이 없다면 우리가 가진 거의 모든 기술이 무용지물이 될 것입니다. 클라우드의 거의 모든 데이터는 데이터를 전달하기 위해 json이 필요합니다.

학생에게 물어볼 수 있는 안내 질문:

나와 친구 사이에 API를 만들 수 있나요? 

친구 중 한 명이 "/헬로"라고 말하면 인사말로 응답할 수 있습니다. 이는 본질적으로 API입니다. 한 사람이 무언가(안녕하세요)를 요청하면 사용자가 원하는 인사말로 응답하는 것입니다. 더 복잡한 예가 있을까요? /안아줘, /퀴즈퀴즈, /이야기, /주말요약

멘토 팁은 AmeriCorps의 지원을 받아 제공됩니다.

양식화된 A, 아메리칸 군단 로고(네이비)

다음은 바나나에 대해 바나나에 대한FruityVice.

{ "genus": "Musa", 
"name": "Banana",
"id": 1,
"family": "Musaceae",
"order": "Zingiberales",
"nutritions":
{ "carbohydrates": 22,
"protein": 1,
"fat": 0.2,
"calories": 96,
"sugar": 17.2
}
}

API 정보가 포함된 두 번째 영양 성분 라벨을 성공적으로 추가하셨기를 바랍니다!

가능한 해결책을 보려면 이 버튼을 클릭하세요. 

돌아보기 

앱에서 API를 사용하는 것은 매우 강력한 도구가 될 수 있지만 구현하기는 쉽지 않습니다!

필요한 정보를 얻는 방법을 이해하려면 사이트의 API 설명서를 읽는 데 시간을 투자해야 합니다.

상호 연결된 네트워크
앱에 유용한 구성 요소라고 생각하시나요?
필요한 정보를 제공하는 온라인 웹사이트를 찾을 수 있나요?

주요 용어 검토

  • 애플리케이션 프로그래밍 인터페이스(API) - 다른 웹사이트나 데이터베이스에서 정보를 가져와 앱에서 사용할 수 있는 방법입니다.

추가 리소스