0119 교원대학교 바이브코딩
강의자료
vibecoding_aistudio_antigravity.pdf2.28MB
준비물
개인 구글계정 준비
antigravity 설치
node.js 설치
aistudio 접속하기
firebase 가입하기(구글 계정)
프롬프트(드래그 해서 붙여넣기)
청주시 여러지역을 소개하는 챗봇을 만들어줘. 그라운딩 기능을 사용해서 출처를 밝히고 링크도 함께 제공해줘
•
그라운딩 기능: 모델 출력을 확인 가능한 정보 소스에 연결하는 기능
디자인을 보면서 수정하고 싶어요
•
annotate app 기능을 사용해봅시다( 입력창 하단)
•
add comment 누르고 수정하고 싶은 부분 선택 후에 내용 입력하기
ui를 아기자기하게 변경
•
Add to chat 누르기, 그러면 입력창에 스크린샷 형태로 관련정보가 들어갑니다
•
결과물
fewshot(예제) 이미지를 주는 방법으로 디자인하기
이 디자인을 보고 비슷한 스타일로 ui를 변경해줘
디버깅 : 구현하다가 안되는 부분들이 나올수 있습니다
어 뭔가 이상하다 돌아가고 싶을때
•
Restore를 누르세요: 직전으로 돌아갑니다
•
Open version history를 이용해서 과거의 버전으로 돌아갈 수 있습니다.
지금까지 체크포인트 (코드)
cheongju-guide-bot.zip19.55KB
google cloud로 배포하기 (결제 카드 등록 필요)
배포
•
google cloud 프로젝트 - 결제 수단 등록 - google cloud 프로젝트 연결 - 배포
•
결제 계정 관리 → 계정만들기 → 결제 계정 연결하기
결제 수단을 등록한 프로젝트에서 배포를 하면 다음과 같이 배포됨
로컬에서 수정 후 배포하기
•
지금까지 작업은 aistudio가 작업을 하고 google cloud를 이용해서 배포하는 과정
•
작성한 코드를 다운 받아서 실제 코드를 수정하는 환경에서 수정 후 배포하는 경험이 있어야 다른 도구 제작이 가능
•
Antigravity 를 사용함
단계
•
node.js를 설치하고 컴퓨터를 종료 후 다시 키기
◦
설치시에 Automatically~ 부분 반드시 체크
•
antigravity를 설치할 것 (설치후 재부팅)
•
terminal을 열어서 node -v 를 입력했을때 어떤 결과가 나오는지 확인할것
로컬에서 실행하기
•
aistudio에서 작성한 파일을 다운받기
•
폴더에 파일 붙여넣기
•
antigravity에서 채팅을 열어서 @누르고 전체 파일 선택 후 아래 프롬프트 입력하기
코드 실행에 필요한 환경설정을 하고 코드를 실행해주세요
예상 결과
•
localhost:3000 이라는 주소로 내 컴퓨터에 임시로 서버를 만들어서 거기서 웹사이트를 돌리는 중
•
그러나 gemini api key가 입력이 안되어 있기 때문에, 거기에 키를 넣어야한다는 이야기
•
키 발급받아서 넣기 : AI~ 시작하는 키 넣기
•
api 키 만들기 → 새 프로젝트 만들기 → 프로젝트 이름 지정(chatbot) → 키 이름 지정(chatbot)
•
발급받은 내용 확인 후 copy api key 버튼 찾아 클릭
•
Antigravity에서 .env.local 부분 찾아서 키 입력하기
Firebase mcp 사용하여 배포하기
전체과정
•
firebase cli에 로그인 → mcp를 사용하여 배포 요청
•
mcp가 프로젝트 생성 → 웹페이지 배포
필요사항
•
firebase 회원가입 및 로그인하기
•
firebase mcp 설치하기
Antigravity에서 mcp 설치하기
•
... 을 눌러 MCP servers 를 선택
•
firebase 검색하여 설치
Antigravity의 mcp 설치 후 다음과 같이 요청합니다
좋아 이제 firebase mcp를 사용해서 배포해줘
결과물 예시: https://sejong-2f048.web.app/
[필독]만약 firebase mcp가 설치가 안된다면 해결방법
Antigravity에 물어보기
•
오류 메세지 + 프롬프트
•
Firebase MCP를 추가해줘
•
firebase mcp 로그인 하자
수동으로 하기
설치하기 npm install -g firebase-tools
로그인하기 firebase login
로그인 확인하기
프로젝트 수동으로 하나 만들기
프로젝트 id 복사해서 antigravity에게 알려주기
로그인은 내가 수동으로 했어 배포해줘, 프로젝트 아이디는 { }야, 새 프로젝트로 만들어줘.
안티그래비티
코드 실행에 필요한 환경설정을 하고 코드를 실행해주세요
•
라이브러리(의존성) 설치하기: npm install
•
실행하기: npm run dev
•
api key 발급하고 등록하기
•
api 키 만들기 → 새 프로젝트 만들기 → 프로젝트 이름 지정(chatbot) → 키 이름 지정(chatbot)
•
발급받은 내용 확인 후 copy api key 버튼 찾아 클릭
•
Antigravity에서 .env.local 부분 찾아서 키 입력하기
api키 입력햇어 호출 반영해주세요
•
vite 구조에 맞게 api 키를 불러오는 코드를 재작성
생각해볼 문제
•
rate limit: 무료 티어의 경우 분당 / 일일 호출 횟수 제한이 있어서 문제가 될 수 있음
•
유료 티어로 변경시
implementation Plan 기능 소개
•
코드나 작업방법을 100% 미리 알 수 없습니다. 모르는 내용이 생길때 물어보고 AI와 협업하면서 작업을 위해서 계획 문서를 만들고 수정하면서 함께 작업합니다.
•
구글 지도를 띄우기 위해 어떻게 해야하냐고 요청 → plan문서를 만들어줌 → Review 를 누르고 직접 수정가능
Firebase mcp 사용하여 배포하기
Antigravity의 mcp 설치 후 (슬라이드와 설명 참조) 다음과 같이 요청합니다
좋아 이제 배포를 위해서 ignore 부분을 설정해주면 좋겠어 . firebase mcp를 사용해
설치하기
npm install -g firebase-tools
로그인하기
firebase login
로그인 확인하기
프로젝트 수동으로 하나 만들기
프로젝트 id 복사해서 antigravity에게 알려주기
로그인은 내가 수동으로 했어 배포해줘, 프로젝트 아이디는 { }야, 새 프로젝트로 만들어줘.
배포 성공
정리
•
코드를 작성한다
•
안티그래비티에서 수정한다
•
api key를 발급받는다(카드등록권장)
◦
gemini api key
◦
google console에서 googlemap api key
•
firebase 로 배포한다
◦
설치 : npm install -g firebase-tools
◦
로그인 : firebase login
◦
배포는 antigravity mcp로
배포에 성공하신분들 아래에 링크를 올려주세요
No posts have been created