물론 나는 앱 개발자는 아니고, 그쪽 진로를 고민하고 있지는 않지만 항상 만들어보고 싶다는 생각을 하고 있었다.
내 분야와 무관하게 새로운 걸 배우는 건 재밌고, 조금 이런저런 걸 하다 보면 옅은 지식이어도 다른 사람에 대한 이해가 생기는 것 같기 때문일지도 모르겠다.
현재는 부모님 모두 전기차를 타고 다니시지만, 엔진차 시절에 아빠는 항상 주행거리/차에서 계산된 연비 등을 기록해 저렴한 주유소가 정말 저렴한지 아닌지 판단하곤 하셨는데, 갑자기 그런 앱을 만들어보고 싶어졌다.
사용할 사람이 있는지 없는지와 무관하게 함 도전!
chatGPT plus를 사용 중이니까 잘 사용하는 방법도 배울겸 같이 한 번 개발해보자잇💪
간단한 기능에서 약간의 고도화까지 도전해볼 수 있으면 좋겠다.
겸사겸사 github 사용법도 더 익히고, 활성화도 시키고!
✅목적
1. 사용자의 주유 기록
2. 주유 기록을 토대로 방문한 주유소의 진위성(?) 판단
✅가능하다면 추가할 항목
- 지도로 주유소 표시
- 주변 주유소 표시 및 리터당 현재 가격 표기
- 만약 방문했던 주유소가 근처라면, 과거 기록 안내 및 알림
✅사용자 입력 항목
1. 자동차에서 계산한 연비
2. 주행 가능거리
3. (주유기 기준) 주유량
4. (주유기 기준) 가격
✅기록 화면 표시 항목
- 날짜
- 주유소 이름 (위치)
- 리터당 가격 (주유소 기준)
- 리터당 가격 (자체 계산)
- 의심 여부
✅자세한 기록 화면 추가 표시 항목
- (주유기 기준) 주유량
- (주유기 기준) 가격
- (자차 기준) 연비
- (자차 기준) 주행 가능 거리
- (자차 기준) 총 주행 거리
이정도로 대충 정리하고, 처음에 chatGPT의 답변을 기준으로 일단 Flutter 사용을 결정짓곤, 설치했다.
참고했던 답변 ㅋㅋ (공짜를 강조했더니.. 이런 답변을 주더라)
VSCode 설치
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code redefines AI-powered coding with GitHub Copilot for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
(이미 설치되어있어서 패스)
Git 설치
Flutter 사이트에서 알려준 이 사이트에서 설치하긴 했는데, git 설치를 검색해서 나오는 요 사이트도 무방할 것 같다.
Git의 경우 좀 찾아보니 다들 기본 세팅으로 설치하는 것 같아서 일단 다 Next 눌러서 설치했다.
(이러고 추후에 문제가 생기면 디버깅 포스트하겠지)
Flutter 설치
chatGPT의 경우 별도로 설치하라고 사이트를 알려줬지만, 정작 사이트에서도 안내해 주는 방법 중 하나인 VSCode에서 extension으로 설치하면 알아서 SDK 설치와 PATH 설정까지 도와준다. 이대로 하는 거 추천.
참고로, 사이트에서 안내하듯이 사용하는 기기의 스펙 외 아래와 같은 사항이 요구된다.
- Windows 10 혹은 그 이상 + 그 버전에 보통 같이 딸려 오는 Windows Powershell 5 이상
- Git for Windows 2.27 or later
- Android Studio 2024.1.1 (Koala) or later
* Flutter 설치 글들을 보면 최신 글이어도 Dart에 SDK 별도로 다운받곤 하던데 다 필요 없었다. 사이트에서도 아래와 같이 안내해주고 있으니 괜히 귀찮게 다 설치하지 않아도 된다..
* Git은 무조건 설치하고 VSCode에서 extension > flutter 다운 받는걸 추천한다. 안 그럼 SDK 설치하다 오류 난다.
1. VSCode extensions > Flutter 설치
2. ctrl + shift + p 눌러서 "Flutter: New Project" 선택
3. Download SDK 클릭 (이미 별도로 설치한 경우엔 Locate SDK)
- 어디에 설치할지 묻는데, Flutter 웹사이트에서 아주 강력히 !경고!하는 보통의 앱 경로들에만 설치하지 않으면 된다.
- 필자의 경우 C:\에 설치했다.
4. 끝나면 Add SDK to PATH 클릭
- 설치 과정에 뭐가 많이 뜰 텐데, 일단은 무시해도 무방하다.
* 설치 후 powershell에서 flutter 코드(flutter doctor, flutter doctor -v 등)를 사용하려면 일단 VSCode 재실행하자.
Android Studio 설치
필자의 경우 여기에서 그냥 추천해 주는 버전으로 다운했다. (Meerkat | 2024.3.1 Patch 1)
설치할 때 기본적으로 선택된 옵션들을 동의하며 Next 누르다 보면 Flutter에서 요구하는 대부분의 SDK가 자동으로 다운된다.
다만, 설치 후 확인해 보니 빠져있는 항목이 있었다.
1. Android Studio 실행 > More Actions > SDK Manager
2. SDK Tools > Android SDK Command-line Tools 클릭 후 Apply 눌러 설치 진행
본인의 경우 하나만 빠져있었지만, 한번 다른 항목들도 확인해 보는 것 추천!
이 모든 과정을 거치고 VSCode 상 TERMINAL (powershell) 혹은 별도의 powershell 창을 열어서
flutter doctor
# 더 디테일한 설명을 위해선
flutter doctor -v을 실행해 본다.
만약 실행이 되지 않거나, flutter이 뭐니?라고 되묻는다면 창을 재실행해보자.
필요한 것 사항들이 잘 설치되었는지 확인할 수 있다. (윈도우 앱 개발의 경우 관심이 없어 일단 무시했다.)
+) 필자의 경우엔 위 결과를 얻기 위해 아래의 코드를 실행시켜서 별도로 더 동의를 해줘야 했다.
flutter doctor --android-licenses