728x90 반응형 바이브코딩16 [바이브코딩] 4편 PWA 앱을 안드로이드 빌드하는 순서 정리 버전 PWA 앱을 안드로이드 빌드하는 순서 정리- capacity 설치 및 사용 - 기본적으로 vite , tailwind , PWA 플러그인 설치 된 상태 처음에만 = 프로젝트 폴더를 처음 만들고 나서를 말함 (위 설치내용 포함) 1.vite재설치 (처음에만) npm install vite --save-dev 2.브라우저 실행 확인 (수시)npm run dev 3.앱 패키지 초기화 (처음에만) npx cap init "앱이름" "com.조직명칭.앱명칭" --web-dir=dist 4.빌드 (수시)npm run build 5.캐피시터 재설치 (처음에만) npm install @capacitor/android6.안드로이드 파일 생성 (처음에만)npx cap add android 7.동기화 npx cap sy.. 2025. 12. 31. [바이브코딩] 3편 내 앱에 광고를 넣자! Admob Native in-feed 안드로이드 구글 Admob Native in-feed 광고 넣기- 본 앱 경우 하단 슬롯에 광고를 넣고자 함.- 슬롯을 클릭하면 카드 페이지 모달 발생(실제 광고)- 현재 PWA로 만들어진 상태 (ai studio) 1. 애드몹 가입 계정생성- 계정을 만들고, 지불방식(payment 설정 까지 마치면 활성화됨)https://admob.google.com/ Google AdMob: 모바일 앱 수익 창출인앱 광고를 사용하여 모바일 앱에서 더 많은 수익을 창출하고, 사용이 간편한 도구를 통해 유용한 분석 정보를 얻고 앱을 성장시켜 보세요.admob.google.com 2. 애드몹 광고단위 생성- 이번 경우 인 피드 방식 광고 설정을 위해- native in-feed 방식을 생성함 .. 2025. 12. 31. [바이브코딩] 2편 구글 ai studio 코드로 만든 웹앱을 안드로이드 패키징하기 구글 ai studio 코드로 만든 웹앱을 안드로이드 패키징하기 1. tailwindcss 설치npm install -D tailwindcss postcss autoprefixer 2. 프로덕션 빌드 및 테스트# 개발 모드npm run dev# 프로덕션 빌드npm run build# 빌드 결과 미리보기npm run preview - 빌드 시 에러 발생 대응 내역 (또는 사전 확인 점검) [vite:terser] terser not found Terser를 설치해야 함.npm install -D terser 혹은 아래 파일 수정해서 terser 대신 esbuild 사용을 권함.vite.config.tsbuild: { rollupOptions: { o.. 2025. 12. 30. [바이브코딩] 1편 구글 ai studio 에서 앱만들기 / 다운받기 / 로컬에서 확인하기 구글 ai studio 코드 다운로드 로컬에서 띄우기구글 ai Stdio를 통해 앱을 만들어보고, 디플로이를 통해(구글 클라우드) 배포해보고,코드를 다운로드 받아서 로컬에서 브라우저에 띄워보자. 1. 구글 ai studio 접속 Google AI StudioThe fastest path from prompt to production with Geminiaistudio.google.com 2. build 로 진입하여 원하는 앱의 내용을 입력한다. 3. 초기 4~5줄 정도 입력하여 만든 앱이다.- 100살까지 남은 시간 카운트다운 하는 앱- 이후에 수정을 100번 넘게 진행했다. - 약 2일 정도 걸려서 완성함. 4. Deploy App- 구글 클라우드에 .. 2025. 12. 26. 이전 1 2 다음 반응형 LIST
