프로젝트 (23) 썸네일형 리스트형 [Flutter] 갤러리에서 이미지 가져오기 및 저장 우선 image_picker 라이브러리 가져와준다.# pubspec.yamldependencies: image_picker: ^1.1.2 pub.dev에서 라이브러리 검색 후 최신 버전으로 가져와준다. class _ProfileImagePickerState extends State { final ImagePicker _picker = ImagePicker(); File? _selectedImage; Future _pickImageFromGallery() async { final XFile? pickedFile = await _picker.pickImage(source: ImageSource.gallery); if (pickedFile != null) { setStat.. Flutter 프로젝트 페이징 처리 프로젝트 하다가 어떤 곳은 정보가 너무 없고 반경이 똑같으면 계속 같은 장소만 나오는 게 이상해서 디버깅 출력해보니 이런 문제가 있었다... 알고보니 Firestore의 REST API 기본 응답은 최대 100개 문서만 반환한다고 한다. 모든 장소 문서들을 가져오기 위해 페이징 처리를 해보도록 한다! # travel_results_screen.dartFuture fetchPlacesAndAskGpt() async { List> allPlaces = []; String? nextPageToken; final centerLat = location['lat'] ?? 0.0; final centerLng = location['lng'] ?? 0.0; final radiusKm = l.. TmapAPI로 도착지<->목적지 소요 시간 가져오기 (자동차) 자동차 소요시간 가져오는것도 성공 시킨 김에 좀 더 필요한 부분만 추려서 포스팅 해본다. 먼저 서버단# main.py@app.post("/tmap/car")def get_tmap_car(body: CarRequest = Body(...)): url = f"https://apis.openapi.sk.com/tmap/routes?version=1" headers = { "appKey": TMAP_API_KEY, "Content-Type": "application/json", } payload = { "startX": body.startX, "startY": body.startY, "endX": body.endX, .. Tmap API로 목적지 도착 예상 소요 시간 가져오기 (도보) 최종코드 SK open API SK open APISK텔레콤 데이터와 시각화 가공을 지원 받을 수 있는, 데이터 바우처 사업 에 대해서 알아보세요! 더 알아보기openapi.sk.com 여기에서 회원가입 후 대시보드로 들어가준다. (이미 만들어 놓았다) 이다음 앱 오른쪽 화살표 눌러서앱 만들기에서 이름만 입력해주면 된다.Tmap을 사용하려면 따로 신청을 해줘야 하는데 홈화면에 > Products > TMAP > API 사용 요금 창으로 가서 원하는 요금제 사용하기 버튼 누르면 된다. 필자는 Free로 했고, 자동 신청 등록되어 바로 쓸 수 있다. 왼쪽 짝대기 세개 누르면 나온다. 먼저 env 파일에 앱키를 넣어준다음 fastAPI 서버 호출부에 tmap 호출을 추가한다.# main.pyfrom fas.. Flutter web 구글 directions API로 도착 소요 시간 가져오기 이제 FastAPI 서버 연동해봤으니 거기서 API key를 가져올 수 있는지 확인해야한다. (연동 방법은 이전 포스트 참조) env 파일에서 key 잘 가져왔다! 이제 드디어 정말로 최적 경로와 시간을 가져와 볼것이다. 우선 main 부분부터 바꿔준다.# main.pyfrom fastapi import FastAPI, Queryfrom fastapi.middleware.cors import CORSMiddlewareimport requestsimport osfrom dotenv import load_dotenv# .env 불러오기load_dotenv()app = FastAPI()# CORS 설정 (Flutter Web용)app.add_middleware( CORSMiddleware, allo.. FastAPI 시작하고 프로젝트에 연동하기 CORS 정책 때문에 웹 브라우저에선 directions API를 직접 호출해올 수 없어서 FastAPI로 중계 서버를 만들 것이다. FastAPI는 파이썬의 프레임워크 이기 때문에 반드시 python이 깔려있어야 한다.Download Python | Python.org Download PythonThe official home of the Python Programming Languagewww.python.org아마 FastAPI는 1.6 버전 이후로 지원된다고 한 것 같다. 최신 버전 깔면 문제없겠지 환경변수 직접 설정해줄 수도 있지만 밑에 2번째 체크박스 선택하면 알아서 환경변수 - 사용자변수 - Path에 등록시켜준다. (권장) 그다음 cmd 혹은 프로젝트 terminal로 들어가서 다음 명령어를.. Flutter dotenv 패키지 관련 오류 .env 파일은 API key나 프로젝트 아이디 등 사용자 정보, 민감한 정보를 넣어놓고 그 파일을 필요한 코드단에서 접근하고 읽어내어 안의 값을 꺼내와서 전역변수 처럼 사용할 수 있는 파일이다. 이 파일을 읽을수 있도록 해주는 패키지가 dotenv 이다.위와 같이 instance of 'NotInitializedError'가 떴는데 dotenv 초기화 안 해서 생기는 문제란다. 또 FlutterWeb 에서는 .env 파일이 에셋에 등록되어 있어야 정상 로딩이 가능하다. 정리.env 파일을 assets 폴더에 넣는다.pubspec.yaml에 등록 flutter: assets: - assets/.envawait dotenv.load(fileName: 'assets/.env');Futurevoid.. GCP 프로젝트 생성, SDK 설치 마커 생성도 확인하고 조원들이 짜준 코드에서 이런 오류가 발견되었다.애초에 서버쪽으로 요청 자체가 넘어가지 않는 것이었다 (...) 왜 이러는 거냐? 네이버 Direction API는 브라우저에서 직접 API를 요청하면 CORS 정책에 위반되어 요청 자체가 차단된다고 한다. 현재 내가 실행하는 환경은 Flutter Web (TMI : edge로 돌리고 있다) 이었다. 이럴 때 해결책은 두가지이다. 1. 백엔드 프록시 서버를 만들거나2. 모바일/에뮬레이터로 CORS 우회해서 작동하는 것이다. 이래서 모바일 에뮬레이터로 실행해봤는데 자동차 시간은 403, 도보 시간은 404 에러가 출력되었다. 403은 아마 api key를 가진 네이버 프로젝트 설정 쪽에서 뭔가가 잘못된거 같고, 404는 애초에 없다는 뜻이.. 이전 1 2 3 다음
