5주

5-4------------------------------------------------------------

구글 애드몹: 앱에 광고를 달아서 돈을 벌게해줌^^!

1. 애드몹 가입

-파이어 베이스 생성시에 쓴 구글계정이 필요

-그 구글계정으로 애드몹 사이트에 접속한다

https://apps.admob.com/

AdMob

2. 개발중인 app을 애드몹에 등록

-광고단위는 나중에 하기 

-같은방법으로 ios도 등록

3. 필수 인적사항 기입

4. expo에서 애드몹 지원함, expo에서 설치

(앱은 지원하지만 웹은 지원하지 않음, 웹의 경우 구글 애드센스를 지원함)

https://docs.expo.io/versions/latest/sdk/admob/

Admob - Expo Documentation

expo install expo-ads-admob

으로 설치

5. app.json수정

"ios": {       "supportsTablet": true,       "buildNumber": "1.0.0",       "bundleIdentifier": "후술할 내용",       "config": {         "googleMobileAdsAppId": "앱id"       }     },     "android": {           "package": "후술할 내용",           "versionCode": 1,           "config": {             "googleMobileAdsAppId": "앱id"           }   },

위의 코드를 원래 있던 ios, android와 바꿔치기

 

6. 광고단위 만들기

-어떤 종류의 광고를 만들지 고르는것

-우선 광고단위 만들기 클릭후 아래처럼 종류가 뜨면 종류 고름

 

 

다 만들면 위 처럼 뜸, 두개의 키중 위에는 앱id 로 아까 ios, android바꿔치기 한거에 넣는 키

아래는 가로 배너의 키

 

7.광고 넣을 페이지에 광고를 넣기

-우선 Platform을 import=>app이 실행되는 폰이 안드로이드인지 ios인지 구분한다

-광고 종류를 import

-화면 구성 부분에 광고를 추가하기

import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView,Platform} from 'react-native'; . . . import {   setTestDeviceIDAsync,   AdMobBanner,   AdMobInterstitial,   PublisherBanner,   AdMobRewarded } from 'expo-ads-admob'; . . . {Platform.OS === 'ios' ? (                 <AdMobBanner                   bannerSize="fullBanner"                   servePersonalizedAds={true}{/*맞춤광고 여부*/}                   adUnitID="광고배너 단위 생성시에 나왔던 아래에 있던 키"                   style={styles.banner}                 />             ) : (                 <AdMobBanner                   bannerSize="fullBanner"                   servePersonalizedAds={true}                   adUnitID="광고배너 단위 생성시에 나왔던 아래에 있던 키"                   style={styles.banner}                 />             )}

5-5------------------------------------------------------------

-전면배너 달기

-위에서 가로 배너 만들듯이 전면광고를 만든다

-card.js를 아래와 같이 수정

useEffect(()=>{         // Card.js에 들어오자마자 전면 광고 준비하느라 useEffect에 설정         //애드몹도 외부 API 이므로 실행 순서를 지키기위해 async/await 사용!         //안드로이드와 IOS 각각 광고 준비 키가 다르기 때문에 디바이스 성격에 따라 다르게 초기화 시켜줘야 합니다.         Platform.OS === 'ios' ? AdMobInterstitial.setAdUnitID("전면광고 키") : AdMobInterstitial.setAdUnitID("안드로이드 전면광고 키")         AdMobInterstitial.addEventListener("interstitialDidLoad", () =>             console.log("interstitialDidLoad")         );//광고로딩될때 이벤트 작성         AdMobInterstitial.addEventListener("interstitialDidFailToLoad", () =>             console.log("interstitialDidFailToLoad")         );//광고 로딩 실패시 이벤트 작성         AdMobInterstitial.addEventListener("interstitialDidOpen", () =>             console.log("interstitialDidOpen")         );//광고 오픈 성공시 이벤트 작성         AdMobInterstitial.addEventListener("interstitialDidClose", () => {               //광고가 끝나면 다음 코드 줄이 실행!             console.log("interstitialDidClose")             navigation.navigate('DetailPage',{idx:content.idx})         });     },[]) const goDetail = async () =>{       await AdMobInterstitial.requestAdAsync({ servePersonalizedAds: true});//개인 맞춤광고 켜기       await AdMobInterstitial.showAdAsync();//실제 광고를 재생함     }     return(         //카드 자체가 버튼역할로써 누르게되면 상세페이지로 넘어가게끔 TouchableOpacity를 사용         <TouchableOpacity style={styles.card} onPress={()=>{goDetail()}}>             <Image style={styles.cardImage} source={{uri:content.image}}/>             <View style={styles.cardText}>                 <Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>                 <Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>                 <Text style={styles.cardDate}>{content.date}</Text>             </View>         </TouchableOpacity>     ) }

-다른 배너는 useEffect에서 설정안해도 됐지만 전면광고만 이렇게 설정해줘야됨

5-6------------------------------------------------------------

-app 배포하기

-expo를 통한 배포

5-7------------------------------------------------------------

-스플래시 스크린: 사용자들이 가장 먼저 보는 이미지, 마켓에 올리는 이미지

-마켓에 올릴 로고를 제작

-온라인 포토샵 플랫폼

https://pixlr.com/kr/x/

사진 에디터 : Pixlr.com - 온라인 무료 사진 편집 툴

-사진 open에서 assets의 splash.png를 연다

-암튼 이미지 만들어서 assets에 splash.png로 저장함 원래있던애는 이름바꾸던가 지우던가

-그러면 이제 처음 앱 켜질때 저장한 이미지가 뜸

5-8------------------------------------------------------------

-위에서 splash.png를 바꿔치기 한것처럼 icon.png도 똑같이 바꿔치기함

-저장시 반드시 png로 저장한다

-이렇게 하면 규격을 신경쓰지 않아도 이미 맞춰진 이미지 위에서 만드는거라 괜찮음

=>이렇게 icon, splash이미지 등 경로를 지정한것은 app.json에 있다

5-9------------------------------------------------------------

-최종 배포 파일 만들기

expo bulid:android

->안드로이드용 최종 앱 파일 만들어짐

->apk를 선택한다

->앱키가 없으므로 generate new key선택

->jdk설치가 되지 않으면 오류날수있음

->마지막에 무슨 주소가 나옴 거기 드가면 expo에서 그 앱 파일의 소개 페이지를 제공함

->expo앱 관리, 다운로드는 expo대시보드에서 할수있다

 

그다음 배포를 위해 구글 플레이 스토어에 가입

https://developer.android.com/distribute/console?hl=ko 

Google Play  |  Android Developers

그다음 결제 페이지로 이동하여 라이센스 구매하면 배포 가능

5-10------------------------------------------------------------

https://www.notion.so/teamsparta/f2e359d2a710447db3036ff2a3156869

스파르타코딩클럽 개인정보 처리방침 및 개인정보 제3자 제공 동의

https://wp.swing2app.co.kr/knowledgebase/playstore-priornotice/

플레이스토어 사전고지 문서 제출하기 – 스윙 도우미

"permissions": ["ACCESS_FINE_LOCATION", "ACCESS_COARSE_LOCATION"]