본문 바로가기

기타 투자/블로그로 돈벌기

안드로이드 앱(웹뷰) 리액트로 3분만에 개발하기(feat. 조코딩)


예전에 제가 운영하는 웹사이트(블로그)를 안드로이드앱으로 만들어서 구글 플래이에 등록을 해두었다라고 말씀드린 적이 있는데요. 이때 저는 개발 방법(코드 작성)을 모름에도 불구하고 유튜브로 단시간에 개발해서 등록을 하였습니다.

이때 정말 도움이 되었던 유튜브가 있는데 바로 조코딩이라는 닉네임으로 개발이 쉽다라는 표명아래 영상을 제작해서 올리시는 분이거든요. 

내 블로그를 안드로이드 앱으로 만들자!

조코딩 - 3분만에 스마트폰 앱 만들기

물론 모든 부분을 손쉽게 따라하기란 쉽지는 않을 수 있습니다. 약간은 툴의 사용법이나 이해도가 있어야할 수도 있지만 정말 쉽게 안드로이드앱에 내가 운영하는 사이트(웹사이트 or 블로그)를 웹뷰(Web View*)로 만들어서 앱처럼 사용할 수 있도록 할 수 있습니다.

* 웹뷰(Web View) : 안드로이드 앱 내에 보이는 화면은 내가 정의한 웹페이지로 보이는 형태

아래는 제가 동영상 강의를 보면서 적용시켰던 모든 소스코드를 한꺼번에 적어둔 내용입니다. 

<안드로이드 앱(웹뷰) 리액트로 3분만에 개발하기 적용 소스코드 전체>

//web뷰 앱을 만들기 위한 리액트 설치
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 }} />;
  }
}

//웹사이트 주소 변경
https://expo.io

//app.json 명칭변경 버젼변경

//icon(1024*1024), splash(1242*2436) 이미지 

//app build
npm install -g expo-cli

//.expo폴더 삭제

//app.json 파일 밑에 아래 코드 추가
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourappname",
      "buildNumber": "1.0.0"
    },
    "android": {
      "package": "com.yourcompany.yourappname",
      "versionCode": 1
    }
    
//패키지 이름 변경
com.jjisso.jjissostock

//app.json 내 ios 코드 통합

//퍼미션 설치
expo install expo-permissions

//아래코드 안드로이드 코드 밑에 추가
 "permissions": [
      "CAMERA",
      "READ_EXTERNAL_STORAGE"
    ]

//안드로이드 apk 출시
expo build:android

//안드로이드 번들 출시
expo build:android -t app-bundle

위의 영상을 참고해서 내가 만든 안드로이드 앱을 apk로 만들고 구글 플래이에 등록을 하기만 하면 끝입니다. 그러면 아래와 같이 나옵니다.

구글 플래이에 접속하셔서 찌쏘라고 검색하시면 제 블로그(웹사이트)를 안드로이드 앱으로 즐기실 수가 있습니다. 예전에 즐겨찾기 기능을 통해서 블로그를 구독하게 만들어 놓았던 것과 같은 개념이죠.

 

구글 플래이에 등록된 찌쏘 안드로이드 앱

구글 플래이에 등록된 찌쏘 안드로이드 앱
구글 플래이에 등록된 찌쏘 안드로이드 앱

평점이나 그런 부분은 어떻게 넣는지 몰라서 해놓지는 못했지만 그래도 간간히 설치를 하시는 분들이 계시는 것을 보면 뿌듯하기도 합니다. ^^

워낙 주식투자나 유사한 투자로 돈벌기와 관련된 앱들이 많이 있기때문에 빛을 보지는 못하고 있지만 나름 다른 블로그들과 차별성을 가지고 전문적인 블로그(웹사이트)라는 이미지를 심어주기에 좋은 것 같습니다. 

앱으로 만들었다면 새글이 올라올때마다 알림을 준다거나, 다른 기능들을 통해서 차별화된 서비스를 제공할 수도있겠지만 저는 지금 이정도에 상당히 만족하고 있습니다. ^^

혹시나 다운 받으신 분들이 있다면 평점도 주시고 하면 감사할 것 같네요. 더욱 힘을내서 유용한 정보를 드릴 수 있도록 하겠습니다. 

이상으로 조코딩님의 영상강의를 통한 3분만에 내 블로그(웹사이트)를 안드로이드 앱으로 만드는 방법에 대해서 간단하게 작성해보았습니다. 

반응형
  • 완전 신기해요~ 제블로그도 이런식으로 앱으로 볼수 있게도 가능하다는거네요?? ㅋㅋ

  • 정말 유익한 정보네요.
    사용자들이 앱을 통해서도 글을 쉽게 볼 수 있겠네요.
    어플에 애드센스 광고도 표시 가능한가요?

  • 생각보다 만들기 쉬운가 보네요.

  • 인터넷에 등록된 사이트를 안드로이드 앱으로 만들어 주는 기능이라 간단하게 등록이 가능한것 같네요
    좋은 정보 감사합니다^^

  • 네이티브로 개발된게 아닌, 웹앱으로 구글 스토어에 등록이 되면
    보통 한 두달 안에 잘린다고 하던데 혹시 아직도 계속 운영 중이신가요?
    애드몹과 애드센스 동시에 운영 중이신지도 궁금합니다.

  • 맘마 2020.11.01 04:44 댓글주소 수정/삭제 댓글쓰기

    ios는 건너뛰었는데, ios로 제작해서 app store에도 등록 가능한건가요?

    • 네넵 ios로도 가능한데 안드로이드는 처음등록할때 안드로이드개발자비용으로 1회정만드는데, ios는 매년 비용이 들어서 안올렸습니다. ㅎ

  • 좋은글 보구 따라만들어봣습니다~^^
    한번 만들고 구글플레이 등록하면 블로그에 글 올리면 어플하고 연동되서 업데이트가 되는거죠?
    혹시 등록하지않고 apk로만 설치하면 업데이트는 안되겠죠?

    • 껍데기만 앱이라서 블로그는 그대로 브라우져에 출력됩니다. 그냥 우리가 쓰는 인터넷 익스플로어처럼 앱으로 껍데기를 쌓은 것이라고 생각하시면 됩니다. ^^

  • 꿈의세계 2021.03.19 12:55 댓글주소 수정/삭제 댓글쓰기

    안녕하세요
    다른 것은 다 하였는데 그런데
    apk로 만들려고 하다 보니 계속 오류가 나더라구요
    Error: Problem validating fields in app.json. See https://docs.expo.io/workflow/configuration/
    • Field: android - should NOT have additional property 'bundleIdentifier'.
    이게 왜 그런 것인지 궁금 합니다.
    sionchurch.homweb.co.kr 여기 있는 것을 만들려고 하니 다른 건 다 했는데 이상하게 apk 출시가 되지 않아서 몇번을 해도 되지 않아서요 혹시 제가 뭐 잘 못 하였는지 궁금 합니다.
    app.js
    import * as React from 'react';
    import { WebView } from 'react-native-webview';

    export default class App extends React.Component {
    render() {
    return &lt;WebView source={{ uri: 'http://sionchurch.homweb.co.kr' }} style={{ marginTop: 20 }} /&gt;;
    }
    }

    app.json
    {
    "expo": {
    "name": "sionchurch",
    "slug": "sionchurch",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
    "image": "./assets/splash.png",
    "resizeMode": "contain",
    "backgroundColor": "#ffffff"
    },
    "updates": {
    "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
    "**/*"
    ],
    "android": {
    "adaptiveIcon": {
    "foregroundImage": "./assets/adaptive-icon.png",
    "backgroundColor": "#FFFFFF"
    }
    },
    "permissions": [
    "CAMERA",
    "READ_EXTERNAL_STORAGE"
    ],
    "web": {
    "favicon": "./assets/favicon.png"
    },
    "ios": {
    "bundleIdentifier": "com.sionchurch.sion",
    "buildNumber": "1.0.0",
    "supportsTablet": true
    },
    "android": {
    "bundleIdentifier": "com.sionchurch.sion",
    "versionCode": 1
    }
    }
    }
    위 처럼 하고 나서 expo build:android
    했는데 계속 위 오류가 나와요

  • Favicon of https://main.kyumdoctor.co.kr BlogIcon blog 2021.03.25 13:53 댓글주소 수정/삭제 댓글쓰기

    관리자의 승인을 기다리고 있는 댓글입니다



Visitor : 2,326,882
POWERED/DESIGN/COPYRIGHTⓒ BY JJISSO