이 글에서는 현실적이고 몰입감 있는 테스트 경험을 위해 외부 데이터 소스를 프로토타입에 연결할 수 있는 가능성을 보여드리겠습니다. Enterprise 플랜의 ProtoPie Connect와 새로운 parseJson 함수를 사용하면 이를 구현할 수 있습니다.
이 튜토리얼에서는 날씨 API와 Spotify API를 통합하여 실제 데이터를 사용자 인터페이스에 적용해 볼 것입니다. 하지만 가능한 활용 방법은 무궁무진합니다!
API는 정확히 무엇을 의미하나요? API는 Application Programming Interface의 약자로, 기본적으로 다른 애플리케이션에 연결해 특정 정보를 요청할 수 있다는 뜻입니다.
아래 데모 영상을 확인해 최종 결과가 어떤 모습일지 보세요!
프로토타이핑을 위한 최신 API 기능에 관심이 있으신가요? 그렇다면 API 기능 소식과 프로토타이핑 팁을 받아보려면 가입하세요!
한눈에 보기
자료
1. 로컬 서버 시작하기
2. Python 브리지 앱 만들기
2.1. 브리지 예제 이해하기
2.2. 다음은 날씨 데이터를 가져와 볼까요!
2.3. 데이터를 ProtoPie에 보내기
2.4. 음악 데이터 가져오기
2.5. 프로토타입에서 음악 데이터 사용하기
3. 모든 것을 UI에 추가하기
끝입니다! 🥧 프로토타입에 실제 데이터를 성공적으로 추가했습니다!
자료
이 튜토리얼에서는 다음 자료를 사용합니다. 글을 따라 진행하면서 직접 만들어 보거나, 최종 파일을 다운로드해 어떻게 동작하는지 확인할 수 있습니다!
아래의 Python 코드
참고: 스크립트를 설치하려면 Python 3.9가 필요합니다 (더 최신 버전에서는 해결할 수 없는 오류가 발생하므로, 더 최신 버전을 사용 중이라면 3.9로 다운그레이드해 보세요)
1. 로컬 서버 시작하기
Python 스크립트를 ProtoPie에 연결하기 위해 가장 먼저 필요한 것은 Socket.io입니다.
ProtoPie Connect를 실행하면, 왼쪽 아래에서 확인할 수 있는 주소에 서버 호스팅이 시작됩니다. Socket.io를 사용하면 Python 스크립트를 그 로컬 서버에 연결할 수 있고, 이를 통해 메시지를 주고받을 수 있습니다!
ProtoPie Connect
2. Python 브리지 앱 만들기 🐍
2.1. 먼저 브리지 예제를 이해해 봅시다
ProtoPie에 연결된 Python 애플리케이션의 템플릿은 여기에서 찾을 수 있으며, 이 외에도 ProtoPie가 가능한 한 빠르게 시작할 수 있도록 만든 다양한 브리지 앱이 있습니다!
이 내용이 너무 복잡하게 느껴진다면, Python 브리지 앱을 ProtoPie Connect용 플러그인으로 컴파일하는 것도 가능합니다. 이 더 간단한 대안은 우리의 ProtoPie Connect 과정.에서 다뤘습니다.
마지막 두 강의도 꼭 확인해 보세요. 사용자 지정 브리지 앱을 만들고 이를 플러그인으로 컴파일하는 방법을 다룹니다.
설정
페이지 상단에는 먼저 프로그램이 올바르게 작동하는 데 필요한 패키지를 가져오기 위한 몇 가지 import가 있습니다.
다음에는 프로그램이 연결을 시도할 주소가 있습니다. ProtoPie Connect를 Python 프로그램과 같은 컴퓨터에서 실행 중이라면 변경할 필요가 없습니다.
마지막으로, 소켓과 상호작용할 수 있도록 소켓을 선언합니다.
Connect 함수 설정
설정이 끝나면 on_connect 함수가 있으며, Python 프로그램이 서버에 연결할 때마다 호출됩니다.
이 함수는 연결이 성공했음을 확인하기 위해 메시지를 emit(서버로 전송)합니다.
메시지 수신
on_connect 함수 다음에는 on_message 함수가 있습니다. 이곳은 프로그램이 특정 메시지를 받았을 때 수행해야 할 동작을 추가하는 자리입니다.
연결하기
이제 프로그램이 앞서 제공한 주소로 실제 연결을 시작합니다.
메시지 보내기
기본 브리지 앱에는 터미널에서 메시지 ID와 값을 입력해 ProtoPie Connect 서버로 emit할 수 있는 기능도 포함되어 있습니다.
직접 해 보세요!
먼저 Python이 설치되어 있는지 확인하세요. 그런 다음 client.py 파일을 저장한 폴더에서 파일을 오른쪽 클릭하고 “New Terminal at Folder”를 선택해 터미널을 엽니다.
python 파일이 포함된 폴더
pip3 install -r requirements.txt 명령을 실행해 필요한 패키지를 설치한 다음, python3 client.py를 실행해 프로그램을 시작합니다.
그러면 message id와 value를 입력하라는 안내가 표시되며, Enter 키를 눌러 확인합니다.
모든 것이 잘 진행되면 ProtoPie Connect에서 메시지와 그 값을 확인할 수 있습니다!
ProtoPie Connect
2.2. 다음은 날씨 데이터를 가져와 볼까요!
이제 날씨 데이터를 가져오려면, 값으로 위치를 담은 "getWeatherAndMusicData"라는 메시지를 보내야 합니다. 그러면 우리의 Python 프로그램이 해당 위치의 날씨와 음악 데이터를 반환합니다.
API 통합으로 우리가 해낼 수 있는 일이 정말 놀랍지 않나요?
위도와 경도 데이터 가져오기
우리는 특정 위치의 날씨 데이터를 가져오기 위해 애플리케이션을 사용하고 싶습니다. 그래서 먼저 Geocoding API를 사용해 도시의 위도와 경도를 가져올 것입니다.
API 키를 얻는 방법은 해당 문서를 확인해 주세요. API 키는 기본적으로 API에 접근하기 위한 고유한 키입니다. 그 키를 코드에서 {API key}라고 적힌 곳에 넣어야 합니다.
새 프로그램에서는 먼저 ProtoPie에서 받은 메시지가 “getWeatherAndMusicData”와 같은지 확인하는 것으로 시작합니다.
그 값이 true라면 ProtoPie가 데이터를 가져오려는 것이므로, messageValue를 location이라는 변수에 할당합니다.
그다음 변수인 **locationUrl **을 만들고, ProtoPie에서 받은 값을 이 URL의 가운데에 붙여넣습니다.
그다음 requests.get(locationUrl).json()를 사용해 해당 위치의 지리 데이터를 가져옵니다.
그러면 많은 데이터를 포함한 긴 메시지가 반환되지만, 우리가 신경 쓰는 것은 위도, 경도, 그리고 국가뿐입니다.
이 내용이 얼마나 읽기 어려운지 헷갈릴 때가 있다면, 우리도 마찬가지입니다. 그냥 JSON 포매터에 붙여 넣어 전체를 한눈에 확인하세요.
다음 문법을 사용해 이 메시지 안의 값을 접근할 수 있습니다.
print 함수는 Amsterdam, NL has latitude 52.3727598 and longitude 4.8936041를 출력할 것이며, 이것이 다음 단계인 날씨 데이터를 가져오는 데 정확히 필요한 내용입니다!
데이터가 포함된 메시지
날씨 데이터 가져오기
이제 같은 방식으로 Weather API를 사용할 것입니다. 방금 가져온 위도와 경도로 URL을 구성한 다음, requests.get(weatherUrl).json() 함수를 사용해 해당 위치의 날씨 데이터를 가져옵니다.
이 print는 날씨 설명, 온도, 습도 등 방금 날씨 API에서 가져온 많은 정보를 출력합니다!
json.dumps(weatherData, indent=1)는 weatherData를 출력하되, 가독성을 높이기 위해 보기 좋게 들여쓰기해서 보여줄 뿐입니다 😉.
Python 브리지
또한 우리가 보낸 위치의 시간도 사용하고 싶으므로, 다음 코드를 사용해 weatherData에서 timezone을 가져오고 그 timeData를 weatherData에 추가합니다.
그러면 다음 정보가 weatherData에 추가됩니다.
시간 데이터
이제 이를 다시 소켓 서버로 emit하기만 하면 ProtoPie가 데이터를 사용할 수 있습니다.
message ID는 “weatherData”이고 value는 우리의 데이터입니다. JSON 데이터를 문자열로 다시 변환하기 위해 str(weatherData).replace("'", "\\"") 함수를 사용하고, ProtoPie에서 사용하는 방식에 맞게 모든 '를 \\"로 바꿉니다.
2.3. 데이터를 ProtoPie에 보내기
먼저 ProtoPie Studio로 “getWeatherAndMusicData”를 보내고, value에는 데이터를 가져오고 싶은 도시를 넣습니다.
응답 보내기
그다음 Receive trigger를 만들고 받은 데이터를 변수에 할당합니다. 변수 유형이 Text로 설정되어 있는지 확인하세요.
Receive Trigger
이 변수를 parseJson 함수와 함께 사용하면 원하는 정보를 가져올 수 있고, 예를 들어 텍스트 레이어의 내용을 바꿀 수도 있습니다.
parseJson 함수로 Json 객체 안의 데이터에 접근하는 방법에 대한 자세한 내용은 이 Pie를 살펴보세요.
parseJson 함수와 함께 사용하는 변수
이 Pie를 ProtoPie Connect에서 열고 실행하면 다음 결과를 확인할 수 있습니다.
ProtoPie Connect의 Pie
보시다시피 Pie는 “Amsterdam” 값을 가진 “getWeatherAndMusicData”를 ProtoPie Connect로 보내고, Python 브리지는 json 객체를 값으로 하는 “weatherData”를 반환합니다. Pie는 이를 받아 주요 날씨 설명을 가져옵니다. 멋지죠!
2.4. 이제 음악 데이터를 가져와 봅시다
Python 프로그램에서 **weatherData **를 emit한 뒤, 다음 내용을 추가합니다.
이 코드는 “country”를 매개변수로 하는 “get_top_tracks” 함수를 호출하고, 그 함수에서 받은 데이터를 “musicData”라는 값으로 Socket 서버에 emit합니다.
액세스 토큰 받기
get_top_tracks 함수는 또 다른 함수인 get_access_token. 호출로 시작합니다.
Spotify는 다른 API보다 조금 더 복잡하기 때문에, client ID와 client secret을 사용해 필요할 때 키를 요청해야 합니다. 이 자격 증명을 얻으려면 Spotify Developer 계정을 만들 수 있습니다.
get_access_token 함수는 제공된 자격 증명으로 Spotify에서 access token을 반환합니다.
Spotify API에 대해 더 알아보세요.
원본 음악 데이터 가져오기
get_top_tracks 함수로 돌아와서, 이 access token을 사용해 음악 데이터를 가져올 수 있습니다.
해당 국가의 음악 데이터를 얻을 수 있도록, Weather API에서 가져온 country code를 Spotify 엔드포인트에 추가해야 한다는 점을 기억하세요!
그러면 다시 방대한 데이터 목록이 제공됩니다.
재생목록 데이터 목록
재생목록에 접근하기
우리가 특히 관심 있는 것은 해당 국가의 상위 곡입니다.
먼저 요청에 ['playlists']['items']를 추가해 재생목록만 가져옵니다.
그런 다음 playlists 안의 모든 객체를 살펴보며 이름이 “Top 50”으로 시작하는 것이 있는지 확인하고, 그 객체를 “top_50_playlist”라는 변수에 할당합니다. 아무것도 찾지 못하면 None을 할당합니다.
만약 top_50_playlist가 None이라면, 해당 국가의 목록을 찾지 못했다는 뜻이므로 대신 목록의 첫 번째 재생목록을 사용하고, 그렇지 않으면 top_50_playlist의 href(링크)와 이름을 가져옵니다.
그다음 top_50_href와 playlistName** 변수 **는 해당 목록의 트랙 배열을 요청하는 데 사용됩니다.
musicData 객체 만들기
다음으로 musicData라는 객체를 만들고 “playlistName”을 playlistName에 할당한 뒤, “topSongs"라는 빈 배열을 만듭니다.
때때로 ProtoPie에서 제대로 렌더링되지 않는 이상한 문자가 포함될 수 있으므로 playlistName에 대해 replace_whitespace 함수를 호출합니다. 이 함수는 그런 특이한 문자를 일반 공백으로 바꿔 반환합니다.
상위 곡 가져오기
이제 처음 8개의 곡 제목과 아티스트가 musicData의 비어 있는 topSongs 배열에 추가됩니다.
그다음 이를 출력합니다. 다시 한 번, 반드시 ASCII를 사용하고 있는지 확인하세요. 우리 Pie에 이상한 문자가 들어가면 안 됩니다!
이 print는 다음 내용을 출력합니다. 즉, playlistName으로 이루어진 객체와, 제공한 위치의 Top 50 재생목록에서 처음 8곡이 채워진 topSongs라는 배열입니다.
음악 데이터
2.5. 프로토타입에서 음악 데이터 사용하기
우리 Pie에서는 이 데이터를 다시 변수에 할당하고, parseJson 함수를 사용해 원하는 방식으로 Pie에서 활용할 수 있습니다.
변수에 할당된 Receive trigger
3. 모든 것을 UI에 추가하기
날씨 데이터가 포함된 Tesla 프로토타입
우리 프로토타입에서는 다양한 방식으로 weatherData와 musicData를 사용합니다. ProtoPie의 formula 필드에서 사용하는 몇 가지 예시는 다음과 같습니다:
오른쪽 상단의 날짜와 시간은
parseJson(weatherData, "localtime.day") + " " + parseJson(weatherData, "localtime.month") + " " + parseJson(weatherData, "localtime.hour") + ":" + parseJson(weatherData, "localtime.minute")를 사용해 설정합니다.상단 중앙의 위치는
parseJson(weatherData, "name") + ", " + parseJson(weatherData, "sys.country")를 사용해 설정합니다.날씨 데이터는
format((parseJson(weatherData, "main.temp") - 273), "##") + "°C – " + upperCase(left(parseJson(weatherData, "weather.0.description"), 1)) + right(parseJson(weatherData, "weather.0.description"), length(parseJson(weatherData, "weather.0.description")) - 1)로 설정합니다.
여기서는 주요 온도에서 273을 빼서 섭씨로 바꾸고, 설명의 첫 글자를 대문자로 변환합니다. 보기 더 좋으니까요. 🤷🏼♂️
날씨 데이터
날씨 아이콘은 Weather API에서 제공하는 코드인
parseJson(weatherData, "weather.0.icon")를 사용해 설정합니다. 이 코드를 변수에 할당한 다음, 변경을 감지해 여기에서 제공하는 아이콘 세트를 표시합니다 여기. 또한 이 코드를 사용해 다양한 날씨 오버레이를 제어하며, 그에 맞게 자연스럽게 페이드 인/아웃합니다.
ProtoPie Connect의 날씨 데이터
또한 “mode”라는 변수가 있으며, 이는
right(parseJson(weatherData, "weather.0.icon"), 1)에 할당됩니다. 이는 코드의 첫 글자만 가져오는 것으로, 낮이면 “d”, 밤이면 “n”입니다. 이 변수를 사용해 야간 모드를 제어하고 그에 맞게 텍스트 색상을 변경할 수 있습니다.
Mode 변수
재생목록 이름은
parseJson(musicData, "playlistName")를 사용합니다.각 곡 제목은
parseJson(musicData, "topSongs.0.title")로, 각 아티스트는parseJson(musicData, "topSongs.0.artist")로 텍스트 객체를 변경합니다. 여기서.0.는.1.,.2.등으로 바뀝니다.또한 musicData 변수에서 변경이 감지되면 앨범 커버에 임의의 색을 할당해 곡이 업데이트되는 것처럼 보이게 합니다.
color(random(100,250), random(100,250), random(100,250))
할당된 색상
끝입니다! 🥧 프로토타입에 실제 데이터를 성공적으로 추가했습니다!
축하합니다, 끝까지 해내셨습니다! 정말 자랑스럽습니다 😉. 이 내용이 앞으로 여러분이 고정관념을 깨고, 더 현실적이고 매력적인 Pie를 만드는 데 도움이 되길 바랍니다.
API 통합으로 프로토타이핑 업그레이드하기
ProtoPie를 무료로 시작하기 를 통해 API 통합의 힘으로 현실적이고 몰입감 있는 사용자 경험을 만들 수 있는 모든 가능성을 탐색해 보세요.
즐거운 프로토타이핑 되세요!
