Search
Duplicate

[기초 모바일 스터디 6주차 과제]

소개

State에 대한 추가 학습
이전 주차에는 State에서 배웠지만 아무래도 1주간의 학습으로는 이를 다 이해하고 활용하기엔 어려움이 있을 것으로 보입니다.
그래서 이번 주차에도 State에 대한 학습과 상태관리 툴, 각 툴에서 사용하는 디자인 패턴에 대해 학습하기를 권장합니다!
프로젝트는 주로 개인보다는 팀으로, 그리고 그 팀에서도 각자의 분야를 나누어 진행됩니다. 가장 큰 틀로는 프론트 엔드와 백 엔드로 나뉘며, 모바일 개발은 프론트 엔드에 속하게 됩니다.
여러분도 다 아시겠지만 프론트 엔드는 API제작이 아니라 호출을 주로 하게 되어 백엔드가 구현한 API를 호출하여 유저에게 보여주는 역할을 합니다.
그래서 이번 주차에는 팀 프로젝트에 있어서 필수적으로 사용되는 API 호출에 대해서 알아볼 것입니다.

들어가기 앞서

API 호출에 대해 배워볼 것입니다.
API 호출을 도와주는 패키지들에 대해 배워볼 것입니다.
패키지의 문서 읽기
플러터는 다른 프레임워크에 비해 그 역사가 짧기 때문에 한국어로 정리된 블로그 자료가 상대적으로 적습니다. 또한 패키지들이 빠르게 변화하기 때문에 간혹 블로그 자료가 과거의 패키지를 다룰 때도 있어 혼란을 야기하기도 합니다.
그래서 패키지 공식 문서를 보고 사용하는 것을 추천합니다!

과제

목표

API 호출에 대해 이해해보자!
API 호출에 도움이 되는 패키지들을 알아보자!

과제 내용

이번 과제는 아래의 영상과 같이 버튼을 눌렀을 때 날씨 정보를 받아오는 앱을 구현하는 것입니다!
영상을 제출해주셔도 되고, 영상 녹화가 어려우신 분들은 구현한 과제만 제출해주세요!

+ 사용할 API

아래의 날씨 API를 사용할 것입니다!

자료1 : Weather API 사용법

1. 계정 생성

가장 먼저 계정을 생성해줍니다!
이건 쉬우니까 대충 넘어가겠습니다! ▼
+ 어떤 목적으로 쓰는거냐고 묻는데 대충 아무거나 넣어주셔도 되고, 저희는 지금 모바일 앱 개발을 하니 아래와 같이 넣어도 됩니다! ▼

2. API 키 받아오기

가입을 한 뒤, 상단 탭을 보면 API 탭이 있습니다.
이를 눌러주고 스크롤을 조금만 아래로 내려주면 Current Weather Data란게 있습니다.
Subscribe를 눌러주세요. ▼
눌러서 들어간 페이지를 조금만 내리면 요금표가 나오는데 여기서 Free 요금제의 Get API Key를 눌러줍니다. ▼
그러면 아래와 같이 새로운 페이지가 열리는데, 여기서 API keys 탭을 눌러 자신의 Key를 확인하고 복사해서 프로젝트로 복사해주면 API Key 발급은 끝났습니다. ▼

3. API Docs

아까 선택했떤 Current Weather Data의 Subscribe 옆에 API doc 버튼이 있습니다.
이를 눌러 문서를 확인해봅시다. ▼
API 종류가 굉장히 많은데, 저희는 city ID로 날씨 정보를 받아오는 API를 사용해 볼 것입니다! ▼
이를 복사하여 프로젝트로 복사해줍시다.
그리고 아래와 같이 작성해주면 API 호출에 필요한 요소 준비는 끝났습니다! 이제 호출만 하면 됩니다!
String apikey = "여러분의 apikey"; String cityName = "kor"; String apiCall = "https://api.openweathermap.org/data/2.5/weather?q=$cityName&appid=$apikey";
Dart
복사

자료 2 : dio 패키지

API 호출을 위한 요소들은 모두 준비가 완료되었으니 이제 호출을 할 차례입니다.
이를 도와주는 것이 dio 패키지인데, dart의 http도 학습해보는 것을 추천드립니다.
dio 패키지를 다 설명하기엔 시간이 부족하니, 저희가 이번에 사용할 부분에 대해서만 간단하게 설명을 드리려고 합니다.
저희는 이번에 GET 메소드만 사용을 할 예정이고, dio 패키지를 이용할 때 아래와 같이 이용할 수 있습니다. ▼
String apiCall = "https://api.openweathermap.org/data/2.5/weather?q=$cityName&appid=$apikey"; final response = await Dio().get(apiCall);
Dart
복사
await? async?
동기와 비동기에 대한 지식이 필요합니다!
만약에 이에 대하 잘 모른다면 아래의 두 글을 읽어보시는걸 추천드립니다. ▼
Dio().get을 통해 API를 호출하면, response에 그 데이터가 담겨 오게 됩니다.
그러면 이 데이터를 아래와 같은 형태로 가져올 수 있습니다. ▼
Text("기온 : ${response?.data['main']['temp'] ?? "No Data~"}"), Text("습도 : ${response?.data['main']['humidity'] ?? "No Data~"}"), Text("기압 : ${response?.data['main']['pressure'] ?? "No Data~"}"), Text("풍속 : ${response?.data['wind']['speed'] ?? "No Data~"}"),
Dart
복사
추가자료

제출해야할 파일과 파일 경로

파일 경로 : 2024-1-Mobile-Study/Week6
제출 파일 : [필수] 구현 파일, [선택] 구동 영상

추가 명세

혹시 다른 API를 사용하고 싶으시다면 다른 API를 사용하셔도 좋습니다!
귀여운 포켓몬 API도 있답니다!
추가 자료에 있는 Retrofit + Json serializable 부분을 사용해도 좋습니다!

마감 기한

2024년 5월 14일 23:59 까지

제출 방법

2024-1-Mobile-Study 라는 이름의 레포지토리의
Week6 폴더에 프로젝트 파일과 영상을 모두 올려주시면 됩니다!
2024-1-Mobile-Study/Week6