과제 목적 : 하루안에 제미나이 API를 활용한 웹 서비스 만들어서 배포해보기
사용 툴 : idx.google.com , firebase, Gemini API, Claude3, GPT-4o
서비스 설명 :
1. 처음엔 지피터스 단톡방 채팅 내역을 내보내, 채팅 내역 중에 가장 중요한 부분 (링크, 과제, 필수 알아야 할 항목) 등을 정리해 .MD 파일로 다운받을 수 있게 하는 프로그램 만들고자 했었음
2. 1번 과제가 로컬에서는 돌아갔지만, 배포 중에 많은 에러가 발생함에 따라 일단 우선 하루 안에 배포하기 위해 좀 더 쉬운 scope의 일로 줄여버림.
3. 내가 재미있게 본, 좋아하는 영화 포스터 사진을 입력하고, 입력된 사진 기준으로 제미나이가 분석하여 이와 비슷하고 추천할만한 영화 5개를 추천해주는 서비스를 개발함
-> 만들어진 웹사이트로 이동하기
2번 프로젝트에 대한 성공 이미지.
2번 프로젝트는 내부에서 좀 더 견고하게 만들어 실제로 성공시켜볼 예정이다.
1. project IDX 접속
2. Gemini API 선택
3. 프로젝트 이름 선택
4. 세팅이 되면 이런 화면을 볼 수 있음
5. 오른쪽에 테스트 웹을 확인 가능 BUT API 키를 넣지 않아 에러가 남
6. aistudio.google.com에 접속해서 API key 발급받기
https://aistudio.google.com/app/apikey
7. 제미나이 API를 11번째 줄에서 넣어준다.
let API_KEY = 'TODO';
그리고 실제로 돌아가는지 확인!
8. 왼쪽에서 index.html, style.css, main.js 3개를 다운받습니다. 그리고 claude에게 이 파일을 첨부하고 이 코드가 어떤 코드인지 간략하게 설명해달라고 해봅니다!
9. 그리고 자신이 기획하는 앱을 짜달라고 합니다!
10. 작성해주는 새로운 3개의 파일을 각각 붙여넣기 하여 변경시킵니다.
11. 이제 firebase로 접속합니다. 시작하기 누르기
https://firebase.google.com/?hl=ko
12. 프로젝트 만들기
13. 프로젝트 이름 만들기
14. 구글 애널리틱스도 구성해줍니다.
15. 프로젝트 만들기 성공!
16. 웹 만들기 </> 클릭! → 내 웹 이름 추가
17. 다시 idx google에 와서 새 터미널 열기, firebase login 이라고 쳐보기
18. 터미널에서 Firebase 로그인 하기
19. firebase init 을 해보기 2개의 항목을 췍!
20. API key 안전하게 관리하기 위해 클로드에게 질문하기
21. firebase function으로 API를 설정
22. firebase deploy 를 통해서 지금까지 구현한 파일을 배포
23. 배포된 사이트에서 잘 동작하는지 확인
https://old-movie-74317.web.app/
24. 안되는 부분은 크롬 개발자 콘솔 창에서 에러를 확인하여 클로드와 함께 디버깅을 진행해야함
25. 원래는 카카오톡 데이터를 분석하는 프로젝트를 구현하려고 했지만,,, (파일 업로드, 저장, API 처리 등) 로컬에서는 돌아가는 것을 확인했지만, 배포단에서 엄청난 에러들이 속속 등장.. 따라서 포기하고 일단 쉬운 이미지 분석 → 추천 과정을 진행함.
아쉽지만 일단 나의 현재 실력을 메타인지하고, 빠르게 성공할 수 있는 부분만 진행
대신에 firebase가 어떤식으로 동작하는지 알았고, 어떻게 배포하고, 어떤 function을 만들고 하는지는 이해됨 (firebase 프로젝트만 5개 이상 만들어봄…)