[AI 공부] Gemini API & Firebase 웹 서비스 만들기 #3

안녕하세요, 저번 시간에 이어 오늘 부터는 [AI 외모 평가] 웹서비스를 하기위해

 

백엔드 구현을 시작으로 말씀드리겠습니다.

 

전체 목차는 아래와 같습니다.

 

====  목 차 ====

1. 개발 환경 세팅하기
    - Project IDX 준비
    - Gemini API 발급

2. Google AI Studio로 테스트

3. Firebase Cloud Function 만들기

4. 백엔드 완성

5. 프론트엔드 완성

 

 

그리고 첫 시간 때 Google IDX를 이용한 웹 개발 환경세팅을 했었는데요

 

기본적으로 Simple HTML을 이용한 기본 프로젝트를 만들었던 것을 상기하시면서

 

 

다음 내용들을 보시면 될 것 같습니다.

 

3. Firebase Cloud Function 만들기

일단 Firebase에 대해 궁금하신 부분들이 있으실 텐데,

 

웹서비스를 만들면서 반복해서 사용하는 기능들은 (유저 인증, API, 데이터베이스..) 

 

서비스 주체만 다를 뿐 그 절차와 기능이 비슷합니다. 

 

그런 기능들을 정형화해 서비스로 제공하는 것이 파이어베이스 입니다. 

 

파이어베이스를 이용하면 서버 없이(서버리스) 개발을 가능케 해주는 구글의 서비스 중 하나입니다.

즉, Firebase는 기본적으로 호스팅과 서비리스 Funtion을 제공해주는 구글의 서비스 중 하나입니다.

 

아마존의 Lambda 서비스랑 비슷하다고 설명드리면 아마 적절한 표현이지 않을까 합니다.

 

자. 그럼 먼저 Firebase 먼저 진행을 하자면,

 

1) Firebase 접속 후 회원 가입

아래의 Firebase 홈페이지로 접속하신후 가입을 해주셔야 합니다.

 

▶ Firebase 홈페이지 바로가기

Firebase | Google's Mobile and Web App Development Platform

 

저는 첫 페이지가 한글로 뜨네요,,

 

여기서 시작하기를 누르고, 회원가입 후 프로젝트를 하나 생성해 주면 됩니다.

 

 

만약 프로젝트 추가가 잘 되지 않는다면, 구글 클라우드 가입 및 결제 설정이 필요할 수 도 있다고 하네요

 

저는 이미 구글 클라우드를 결제 해서 사용중이라서 이것이 필수 요건인지 체크가 잘되지 않고 있으니

 

확인해주시면 감사하겠습니다.

 

 

 

2) Firebase 프로젝트 생성

저는 새로운 프로젝트를 생성하고 프로젝트 이름을 faceevaluation 이라는 이름으로 생성해보도록 하겠습니다.

 

그 다음 화면에서는 Firebase 프로젝트를 위한 AI 지원 부분인데 Firebase의 Gemini 사용 설정이 기본적으로 켜져 있음을 알 수 있어요, 저는 이대로 다음을 누릅니다.

 

 

다음 화면은 Google 애널리틱스에 대한 사용 여부를 선택하는 사항이예요. 

 

이 부분은 선택하면 좋긴한데, 저는 테스트를 위한 것이니 애널리틱스를 꺼놓고 해보도록 하겠습니다.

 

 

프로젝트 만들기 버튼을 눌러서 진행해봅니다.

 

 

 

계속 버튼을 누르면 아래와 같이 프로젝트가 생성된 것을 확인할 수 있습니다.

 

 

 

화면 상단 중간에 보시면 현재 [Spark 요금제]로 되어 있을건 상태를 알 수 있는데요

 

그 버튼을 클릭하면 요금제를 변경할 수 있는 옵션이 생깁니다.

 

지금 우리가 할려고 하는 서비스는 Firebase Fuction 기능을 사용해야 해서 최소 [Blaze] 요금제를 써야합니다.

 

 

참고로 Blaze 요금제는 사용한 만큼만 내는 결제하는 서비스라 테스트로 진행한다고 해서 바로 요금이 나가질 않으니

 

저는 맘편히 [Blaze]로 선택하겠습니다.

 

이 테스트 서비스가 정말 잘되서 200만이 넘는 사용자가 접속한다든지 하면 행복한 고민을 해볼 수 있으니 손해 볼 건 없다고 봐요 ^^

 

이렇게 저는 Blaze 요금제로 변경되었습니다

 

 

 

3) google idx(웹 개발환경) 설정

이제는 Google idx (웹 개발 통합환경)으로 가서 왼쪽 최상단의 [석삼 버튼] > [Terminal] > [New Terminal]을 선택해서

하단 창에 터미널을 띄워줍니다.

 

그러면 바로 하단에 다음과 같은 터미널 창이 생김을 확인할 수 있어요

 

그럼 여기서 Firebase Fuction을 사용하기 위해 뭔가를 설치하는 과정을 진행하겠습니다.

 

바로 터미널 창에 아래의 커맨드를 입력합니다.

 

]# npm install -g firebase-tools

 

 

이렇게 설치가 금방 됩니다.

 

그리고 이어서 터미널창에 아래의 명령을 통해 로그인을 해줍니다.

 

]# firebase login

 

2번 항목의 https:// 로 시작하는 주소를 복사하여 웹브라우저로 입력하고 다음 단계를 진행하여 authrization code가 출력 되면 다시 터미널에 붙여넣기를 해줍니다.

 

그러면 로그인 과정이 완료가 됩니다.

 

이 다음 단계를 진행을 위해 아래의 커맨드를 입력해줍니다.

 

결국,  우리는 firebase의 fuction을 이용하기 위해 아래의 명령어를 사용하게 됩니다.

 

]# firebase init fuctions

 

그러면, 아래와 같은 멋드러진 화면이 나오는데요, 아래 파란색으로 되는 [Use an existing project] 메뉴가 

 

보이게 되는데요, 우리는 이것을 그대로 사용할 것입니다. 이 상태에서 바 엔터를 누릅니다.

 

 

그리고 방금전 firebase 웹사이트에서 생성한 프로젝트 명인 [faceevaluation]을 선택한 상태에서 다시

 

엔터를 눌러줍니다. 그러면 아래와 같이 어떤 언어를 쓸 것인지 선택하도록 메뉴가 보이는데요

 

우리는 여기서 [JavaScript]를 사용합니다.

 

다음 단계는 ESLint를 사용하길 원하는 지 뭍는 화면이 나오는데 [N]를 입력합니다.

 

그리고 다음 단계의 질문은 [Y]를 입력합니다.

 

 

이렇게 해서 firebase 초기화가 완료되었습니다.

 

 

 

이젠 Google IDX 화면에는 아래와 같이 좌측 프로젝트 화면에 뭔가 알록달록 세팅이 된 것을 확인하실 수 있습니다.

 

우리는 여기 생성된 index.js 부분을 이용해서 백엔드를 구현할 것입니다.

 

그럼, 오늘은 여기까지 하고 다음 시간 이어서 진행해볼께요, 감사합니다.

 

 ▶ [AI 공부] Gemini API & Firebase 웹 서비스 만들기 #1  <바로가기 링크>

 

 

 ▶ [AI 공부] Gemini API & Firebase 웹 서비스 만들기 #2  <바로가기 링크>

 

 

 ▶ [AI 공부] Gemini API & Firebase 웹 서비스 만들기 #4  <바로가기 링크>

 

 

 ▶ [AI 공부] Gemini API & Firebase 웹 서비스 만들기 #5  <바로가기 링크>