Cordova - 전체 요약

 

# 아래와 같이 진행했으니 참고 해 주세요.

## cmd 명령 프롬프트

cd cordova
npm update -g
npm install -g cordova
cordova create helloworld com.test.helloworld Helloworld
cd helloworld
cordova platform add android
cordova build android
cordova emulate android
cd platforms\android


## 안드로이드스튜디오 실행
  > file > open > c:\cordova\helloworld\platforms\android
  > 빌드 후 실행함


## cordova build 시 PATH관련 에러가 발생되면 PATH를 등록해야한다.

ANDROID_SDK_ROOT=C:\Users\USER\AppData\Local\Android\Sdk
ANDROID_HOME=C:\Users\USER\AppData\Local\Android\Sdk
PATH=
	%ANDROID_HOME%\tools
	%ANDROID_HOME%\platform-tools
	C:\Users\USER\.gradle\wrapper\dists\gradle-6.1.1-all\cfmwm155h49vnt3hynmlrsdst\gradle-6.1.1\bin

 

# 빌드 성공 후 아래 부분의 소스를 수정했습니다. html소스만으로 안드로이드/iOS 앱을 개발할 수 있어요~

C:\cordova\helloworld\platforms\android\app\src\main\assets\www\index.html

<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
    <head>
        <meta charset="utf-8">
        <!--
        Customize this policy to fit your own app's needs. For more guidance, see:
            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
        Some notes:
            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                * Enable inline JS: add 'unsafe-inline' to default-src
        -->
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
        <meta name="color-scheme" content="light dark">
        <link rel="stylesheet" href="css/index.css">
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
                <p class="event">안녕 세상아 ! Hello world</p>	<!-- 이부분을 추가함 -->
            </div>
        </div>
        <script src="cordova.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>

 

# 안드로이드 앱에 표시되는 최종결과화면 입니다.

 

이하는 상세 진행방법 안내 입니다.

 

 

 

Cordova - 기본 플랫폼(Platform) 지원 설명

 

① 프로젝트 진행 중 Cordova를 활용하여 수월하게 앱 개발이 가능했다.

② 아래 그림과 개발 계획 수립 시 플랫폼(Platform) 별 기능 지원 여부를 꼭 확인해야 한다.

③ Cordova 개발 환경 설정에 요구되는 도구(프로그램)는 아래에서 설명한다.

 

 

 

Cordova - 기본 프로그램 설치 확인


Cordova 개발 환경 설정을 위해서는 아래 프로그램이 필요하다.
 - jdk(sdk)

 - npm(Node.js)

 - cordova

 - git (cordova Plug-in 설치)

 - 안드로이드 스튜디오 - 안드로이드 개발 시

 - Xcode - iOS 개발 시

 - 단말기(안드로이드폰, 아이폰 등)

 

(1). 개발환경에 맞는 Mac 또는 윈도우 환경에서 개발해야 한다.

(2). 위 프로그램들은 인터넷에 많은 설치 방법 자료가 있으므로, 타 블로그를 참조해서 설치 하자.

(3). 설치 완료 후 아래 콘솔 명령어를 통해서 제대로 설치되었는지 확인(윈도우, Mac 공통)

 

 

 

Cordova - 빌드(Build) 및 폴더 확인

 

- 윈도우 또는 맥(Mac) 콘솔에서 아래와 같이 실행 한다.

- 개발 예정인 플랫폼을 추가 (안드로이드, iOS 등)

- 안드로이드의 경우에는 안드로이드 스튜디오 설치하면 OK

- iOS의 경우에는 xcode 설치 후 실행 가능

- 본 포스팅에서는 안드로이드 기준으로 설명한다.

 

#npm 업데이트
npm update -g
 
#Cordova 설치
npm install -g cordova 
 
#Cordova 프로젝트 생성
#cordova create helloworld com.test.helloworld Helloworld
cordova create 경로 패키지 프로젝트명
 
#Cordova Platform 추가(선택)
cordova platform add ios
cordova platform add amazon-fireos
cordova platform add android
cordova platform add blackberry10
cordova platform add firefoxos
 
#Cordova Platform 제거(선택)
cordova platform remove ios
cordova platform remove amazon-fireos
cordova platform remove android
cordova platform remove blackberry10
cordova platform remove firefoxos

실행화면

 

 

 

Cordova - 빌드(Build) 및 폴더 확인

 

아래 명령어를 환경에 맞게 실행한다.
#Cordova Platform 빌드(선택)
cordova build                   #디버그 
cordova build android           #디버그
cordova build --release android #릴리즈
 
#Cordova 실행
cordova emulate android #에뮬레이터 실행
cordova run android     #실제 단말기 실행



실행화면

 

빌드 후 결과 폴더 확인

 

 

nenara.com/249 - Cordova(코르도바 앱 개발) - (1).기초강의 - 개발 환경 설정

nenara.com/250 - Cordova(코르도바 앱 개발) - (2).실행 - 안드로이드 스튜디오

 

 

 

 

 



출처: https://niceman.tistory.com/69?category=940969 [좋은사람의 개발 노트]

저작자표시 비영리

'프론트엔드 개발 놀이터 > vue.js' 카테고리의 다른 글

Vue.js UI framework 비교  (0) 2020.10.12
Cordova(코르도바 앱 개발) - (2).실행 - 안드로이드 스튜디오  (0) 2020.09.27
GraphQL 개념잡기  (0) 2020.09.25
Vue.js + Cordova + OnsenUI 로 하이브리드 어플리 케이션 개발하기  (0) 2020.09.25
Webpack과 babel이 뭐요  (0) 2020.09.25

+ Recent posts

티스토리툴바