React-Native - Webview 웹뷰 앱 만들기 방법

자신의 웹사이트를 웹뷰 앱으로 만들어 구글플레이 앱마켓에

올릴 수가 있습니다.

 - 출처: kgu0724.tistory.com/179

 

또 유용한 출처가 있는데 이것은 유튭 링크입니다.

- 출처: www.youtube.com/watch?v=8eIQNfPbRms

 

위 두 링크를 보면 아래와 같은 명령으로

react-native 그리고 expo 를 이용하여 안드로이드 앱 또는 iOS앱을 만들 수 있습니다.

 

참고로 안드로이드 웹뷰앱을 만드는데 필요한 명령어를

아래와 같이 정리합니다.

 

Expo 설치하고, project 생성을 합니다.

 

npm install --global expo-cli

expo init my-project

 

그 후,

Webview 사용시 필요한 부분을 설치합니다.

 

expo install react-native-webview

 

 

설치 후, app.js 예시:

 

import * as React from 'react'; 
import { WebView } from 'react-native-webview'; 

export default class App extends React.Component { 
   render() { 
       return <WebView source={{ uri: 'https://expo.io' }} style={{ marginTop: 20 }} />; 
   } 
}

 

그럼 앱을 마켓에 출시하기 위해서는,

 

그리고 안드로이드앱으로 빌드하려면,

 

 

앱 출시를 위한 작업을 위해

app.json 수정합니다. 예를 들면 앱이름 수정 시에,

    "name": "UsedSearch",

 

icon 등록을 위해서 구글에서 expo app icon으로 검색하면 아래 사이트가 나옵니다.

:=> https://docs.expo.io/guides/app-icons/

 

위 링크를 보면,

iOS : 1024x1024 로,

안드로이드는 adaptive-icon으로

splash: 1242x2436로 만들어서

 

icon.png

splash.png

adaptive-icon.png

 

를 자신의 것으로 만들어서 교체하면 됩니다.

(사이즈가 다르면 빌드 시에 에러 남)

 

 

그리고 나서,

  permission을 아래와 같이, 설치합니다.

expo install expo-permissions

 

그리고 app.json에 해당하는 permission을 추가 합니다.

"permissions" [
    "CAMERA",
    "READ_EXTERNAL_STORAGE"
 ]

 

완성된 app.json 의 양식은 하기와 같습니다.

 

{
  "expo": {
    "name": "UsedSearch",
    "slug": "UseadSearch",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
		 "bundleIdentifier": "com.opensupport.UsedSearch",
         "buildNumber": "1.0.0",
         "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/icon.png",
        "backgroundColor": "#FFFFFF"
      },
		"package": "com.opensupport.UsedSearch",
        "versionCode": 2,
		"permissions": [
			"CAMERA",
			"READ_EXTERNAL_STORAGE"
		]
    },
    "web": {
      "favicon": "./assets/favicon.svg"
    },
    "packagerOpts": {
      "port": 51442
    }	  
  }
}

 

 

마지막으로 안드로이드 apk를 빌드하려면,

아래와 같은 명령으로 합니다.

expo build:android -t apk

expo build:android -t app-bundle

 

빌드 시,

  Expo Login 하라고 나오면 이메일 주소와 패스워드 입력합니다.

참고로,

   빌드 시에 에러 방지를 위해서. expo 폴더 삭제합니다.

 

 

 

(추가 업데이트)

추가로,

   구글 애드몹을 자신의 웹뷰 앱에 적용하려면

   하기와 같이 하면 됩니다.

 

 

Google Admob 사용시 적용되는 부분은,

expo install expo-ads-admob

 

app.json 에 셋팅해줘야하는 부분은,

 

{
  "expo": {
    "name": "중고검색",
    // ...
    "android": {
      // ...
      "config": {
        // ...
        "googleMobileAdsAppId": "ca-app-pub-3940256099942544~3347511713" // sample id, replace with your own
      }
    },
    "ios": {
      // ...
      "config": {
        // ...
        "googleMobileAdsAppId": "ca-app-pub-3940256099942544~1458002511" // sample id, replace with your own
      }
    }
  }
}

 

 

사용방법은,

     app.js 에서 하기 코드를 응용하여 가져다가 사용하면 됩니다.

 

import {
  AdMobBanner,
  AdMobInterstitial,
  PublisherBanner,
  AdMobRewarded,
  setTestDeviceIDAsync,
} from 'expo-ads-admob';

// Set global test device ID
await setTestDeviceIDAsync('EMULATOR');

// Display a banner
<AdMobBanner
  bannerSize="fullBanner"
  adUnitID="ca-app-pub-3940256099942544/6300978111" // Test ID, Replace with your-admob-unit-id
  servePersonalizedAds // true or false
  onDidFailToReceiveAdWithError={this.bannerError} />

// Display a DFP Publisher banner
<PublisherBanner
  bannerSize="fullBanner"
  adUnitID="ca-app-pub-3940256099942544/6300978111" // Test ID, Replace with your-admob-unit-id
  onDidFailToReceiveAdWithError={this.bannerError}
  onAdMobDispatchAppEvent={this.adMobEvent} />

// Display an interstitial
await AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/1033173712'); // Test ID, Replace with your-admob-unit-id
await AdMobInterstitial.requestAdAsync({ servePersonalizedAds: true});
await AdMobInterstitial.showAdAsync();

// Display a rewarded ad
await AdMobRewarded.setAdUnitID('ca-app-pub-3940256099942544/5224354917'); // Test ID, Replace with your-admob-unit-id
await AdMobRewarded.requestAdAsync();
await AdMobRewarded.showAdAsync();

 

그러면 최종 완성된 app.js 코드는

   하기와 같습니다.

 

< app.js >

import * as React from 'react';
import { WebView } from 'react-native-webview';
import {
  AdMobBanner,
  AdMobInterstitial,
  PublisherBanner,
  AdMobRewarded,
  setTestDeviceIDAsync,
} from 'expo-ads-admob';


export default class App extends React.Component {
	adFunction = async () => {
	  // Display an interstitial
        await AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/1033173712'); // Test ID, Replace with your-admob-unit-id
        await AdMobInterstitial.requestAdAsync({ servePersonalizedAds: true});
        await AdMobInterstitial.showAdAsync();
	}
	
	componentDidMount(){
		this.adFunction();
	}

	
  render() {
    return <WebView source={{ uri: 'https://animal-faces.netlify.app' }} style={{ marginTop: 20 }} />;
  }
}

 

(추가2)

구글플레이 같은 앱마켓에 앱을 등록 시 

앱스크린 샷이 필요한데,

그때 아래 서비스를 이용하여 만들면 됩니다.

:=> https://theapplaunchpad.com/

 

더불어,

   모바일앱 스크린 샷 이미지를 만드는데 도움이 되는 링크도 공유합니다. 하기와 같이.

medium.com/appmanager/best-12-tools-to-create-amazing-screenshots-for-your-mobile-apps-2018-1cbf6f8660ba

 

 그럼, 

  공유합니다.

 

(추가1)

이젠 여기저기 있는 중고거래앱들을 번거롭게 일일이 찾아드릴 필요가 없이 '무료나눔'앱 이거 하나만으로 중고거래앱들의 무료로 나눔하는 물품들을 검색해 볼 수 있습니다. 하기에서 다운로드 가능합니다.

:=> https://play.google.com/store/apps/details?id=com.opensupport.freenanumG 

무료나눔, 그냥드림, 중고거래 (한번의 검색으로 모든 중고장터를 득템하자!) - Google Play 앱

 

 

(추가)

모든 사람들이 자신의 경험담이나 사용후기를 올려놓은 커뮤니티들의 게시판을

한데 모아서 확인하고 키워드로 한번에 검색할 수도 있는 앱인 있습니다.

'모두의사용기' 라는 앱인데 하기에서 다운로드 가능합니다.

:=> https://play.google.com/store/apps/details?id=com.opensupport.ModuReview 

모두의사용기 (모든 사람들의, 모든 사람을 위한, 모든 사람에 의한 사용후기!) - Google Play 앱

 

 

그럼,

    공유합니다.