Apache Cordova 자습서: Cordova로 모바일 애플리케이션 개발

게시 됨: 2022-03-11

참고: 이것은 원래 작성되었기 때문에 [email protected], [email protected] 및 [email protected]와 함께 작동하도록 이 문서를 업데이트했습니다.

모바일 애플리케이션은 스마트폰과 태블릿에서 시작하여 스마트 시계에 이르기까지 모든 곳에서 스며들고 있으며 곧 다른 웨어러블에서도 찾아볼 수 있습니다. 그러나, 특히 리소스가 제한적이거나 모바일 앱 개발 회사가 아닌 단일 개발자인 경우 각각의 개별 모바일 플랫폼에 대한 개발은 철저한 작업이 될 수 있습니다.

이것이 바로 HTML5, CSS3 및 JavaScript와 같은 표준 웹 기술을 사용하여 모바일 애플리케이션을 개발하는 방법을 제공함으로써 숙련된 Apache Cordova 개발자가 되는 데 도움이 될 수 있는 곳입니다.

2009년 Nitobi라는 신생 기업은 개발자가 표준 웹 기술을 사용하여 모바일 애플리케이션을 만들 수 있도록 하는 것을 목표로 네이티브 모바일 리소스에 액세스하기 위한 오픈 소스 API인 PhoneGap을 만들었습니다. Nitobi의 비전에서 대부분의 모바일 애플리케이션은 곧 PhoneGap을 사용하여 개발되지만 개발자는 성능 문제 또는 특정 하드웨어에 액세스하는 방법의 부족으로 인해 필요할 때 네이티브 코드를 작성할 수 있는 옵션이 있습니다.

코르도바 폰갭?

그런 건 없어요, 정말. 어도비는 2011년 Nitobi를 인수하고 오픈 소스 코어를 Apache Software Foundation에 기증했으며, Apache Software Foundation은 이를 Apache Cordova로 리브랜딩했습니다. 자주 접하게 되는 일반적인 비유는 Cordova가 PhoneGap에 해당하고 WebKit이 Chrome 또는 Safari에 해당한다는 것입니다.

분명히 Cordova와 PhoneGap의 차이점은 처음에는 미미했습니다. 시간이 지남에 따라 Adobe PhoneGap은 고유한 일련의 독점 기능을 개발했으며 Cordova는 여전히 오픈 소스 커뮤니티에서 지원을 받았습니다. 이 Apache Cordova 리뷰 및 튜토리얼은 Cordova 앱 개발을 더 자세히 조사할 것이며, 그 중 일부는 PhoneGap에 적용될 수 있지만 이것은 PhoneGap 튜토리얼 자체 로 간주되어서는 안됩니다.

Apache Cordova 기능

본질적으로 Cordova는 기본적으로 개발된 애플리케이션과 관련하여 제한이 없습니다. Cordova로 얻을 수 있는 것은 기본 코드의 래퍼 역할을 하고 장치 간에 일관성이 있는 JavaScript API입니다. Cordova를 장치의 전체 화면을 덮는 웹 보기가 있는 응용 프로그램 컨테이너로 간주할 수 있습니다. Cordova에서 사용하는 웹 보기는 기본 운영 체제에서 사용하는 것과 동일한 웹 보기입니다. iOS에서 이것은 기본 Objective-C UIWebView 또는 사용자 정의 WKWebView 클래스입니다. Android에서는 android.webkit.WebView 입니다.

Apache Cordova는 장치의 카메라, GPS, 파일 시스템 등에 대한 액세스를 제공하는 사전 개발된 플러그인 세트와 함께 제공됩니다. 모바일 장치가 발전함에 따라 추가 하드웨어에 대한 지원을 추가하는 것은 단순히 새 플러그인을 개발하는 문제입니다.

마지막으로 Cordova 애플리케이션은 기본 애플리케이션처럼 설치됩니다. 즉, iOS용 코드를 빌드하면 IPA 파일이 생성되고 Android용 APK 파일이 생성되고 Windows Phone용으로 빌드하면 XAP 파일이 생성됩니다. 개발 프로세스에 충분한 노력을 기울이면 사용자는 기본 애플리케이션을 사용하지 않는다는 사실조차 인식하지 못할 수 있습니다.

Apache Cordova 개발 워크플로

Cordova로 개발할 때 따를 수 있는 두 가지 기본 경로가 있습니다.

플랫폼별 개발이 거의 또는 전혀 없이 가능한 한 많은 플랫폼에 애플리케이션을 배포하려는 경우 플랫폼 간 워크플로를 사용해야 합니다. 이 워크플로를 지원하는 주요 도구는 Cordova CLI(명령줄 인터페이스)로, 다양한 플랫폼용으로 애플리케이션을 구성하고 구축하기 위한 상위 수준 추상화 역할을 합니다. 이것은 더 일반적으로 사용되는 개발 경로입니다.
특정 플랫폼을 염두에 두고 애플리케이션을 개발하려는 경우 플랫폼 중심 워크플로를 사용해야 합니다. 이런 식으로 네이티브 구성 요소를 Cordova 구성 요소와 혼합하여 낮은 수준에서 코드를 조정하고 수정할 수 있습니다. 플랫폼 간 개발에 이 접근 방식을 사용할 수 있지만 프로세스는 더 길고 지루합니다.

플랫폼 중심 개발로 전환하는 것은 매우 간단하기 때문에 일반적으로 플랫폼 간 개발 워크플로로 시작하는 것이 좋습니다. 그러나 처음에 플랫폼 중심 워크플로로 시작하는 경우 빌드 프로세스를 실행하면 CLI가 사용자 정의를 덮어쓰므로 플랫폼 간 개발로 전환할 수 없습니다.

전제 조건 및 Cordova 설치

Cordova와 관련된 모든 것을 설치하고 실행하기 전에 애플리케이션을 빌드하려는 각 플랫폼에 대한 SDK를 설치해야 합니다. 이 기사에서는 Android 플랫폼에 중점을 둘 것입니다. 그러나 다른 플랫폼과 관련된 프로세스는 유사합니다.

여기에서 Android SDK를 다운로드해야 합니다. Windows의 경우 SDK가 설치 프로그램으로 제공되는 반면 Linux 및 OSX의 경우 간단히 추출할 수 있는 아카이브로 제공됩니다. 패키지를 추출/설치한 후 sdk/tools 및 sdk/platform-tools 디렉토리를 PATH 변수에 추가해야 합니다. PATH 변수는 Cordova에서 빌드 프로세스에 필요한 바이너리를 찾는 데 사용됩니다. Java가 설치되어 있지 않다면 Ant와 함께 JDK를 설치해야 합니다. ANT_HOME 및 JAVA_HOME 은 JDK 및 Ant의 bin 폴더로 설정해야 하며, Android SDK 설치 후 ANDROID_HOME 변수를 Android/Sdk 로 설정합니다. 세 *_HOME 변수의 모든 위치는 PATH 변수에도 있어야 합니다.

SDK를 설치하면 명령줄에서 android 명령을 사용할 수 있습니다. 실행하여 SDK 관리자를 열고 최신 도구와 Android API를 설치합니다. Android SDK 도구, Android SDK 플랫폼 도구, Android SDK 빌드 도구, SDK 플랫폼, Google API Intel x86 Atom 시스템 이미지, Android SDK용 소스 및 Intel x86 Emulator Accelerator(HAXM 설치 프로그램)가 필요할 수 있습니다. 그 후에 android avd 를 사용하여 에뮬레이터를 만들 수 있습니다.

Cordova CLI는 Node.js와 Git 클라이언트에 의존하므로 nodejs.org에서 Node를 다운로드하고 git-scm.com에서 Git을 설치하세요. npm을 사용하여 Cordova CLI 자체를 설치하고 추가 플러그인을 설치하고 Cordova는 필요한 종속성을 다운로드하기 위해 git을 뒤에서 사용합니다. 마지막으로 실행

 npm install -g cordova

... Cordova CLI를 전역으로 설치하려면( npm install cordova 만으로는 충분하지 않습니다.)

요약하면 다음과 같은 패키지가 필요합니다.

자바
개미
안드로이드 SDK
노드JS
힘내

그리고 다음 환경 변수를 업데이트해야 합니다.

PATH
JAVA_HOME
ANT_HOME
ANDROID_HOME

애플리케이션 부트스트랩

Cordova를 성공적으로 설치했다면 이제 Cordova 명령줄 유틸리티에 액세스할 수 있습니다. 터미널 또는 명령줄을 열고 첫 번째 Cordova 프로젝트를 생성할 디렉터리로 이동합니다. 애플리케이션을 부트스트랩하려면 다음 명령을 입력하십시오.

 cordova create toptal toptal.hello HelloToptal

명령줄은 하위 명령 create 다음에 나오는 cordova 명령의 이름으로 구성됩니다. 하위 명령은 응용 프로그램이 배치될 폴더, 응용 프로그램의 네임스페이스 및 해당 표시 이름의 세 가지 추가 매개변수와 함께 호출됩니다. 이렇게 하면 다음 구조의 폴더에 애플리케이션이 부트스트랩됩니다.

 toptal/ |-- hooks/ |-- platforms/ |-- plugins/ |-- www/ `-- config.xml

www 폴더에는 애플리케이션 코어가 포함되어 있습니다. 여기에 모든 플랫폼에 공통적인 애플리케이션 코드를 배치합니다.

Cordova를 사용하면 다양한 플랫폼용 앱을 쉽게 개발할 수 있지만 때로는 사용자 정의를 추가해야 합니다. 여러 플랫폼용으로 개발할 때 다양한 platforms/[platform-name][assets]/www 디렉토리의 소스 파일을 수정하고 싶지는 않습니다. 최상위 www 파일로 정기적으로 덮어쓰기 때문입니다.

이 시점에서 config.xml 파일을 열고 작성자 및 설명과 같은 애플리케이션의 메타데이터를 변경할 수도 있습니다.

다음을 사용하여 첫 번째 플랫폼을 추가합니다.

 cordova platform add android

나중에 마음이 바뀌면 빌드 프로세스에서 플랫폼을 쉽게 제거할 수 있습니다.

 cordova platform rm android

플랫폼 디렉토리를 검사하면 그 안에 android 폴더가 있음을 알 수 있습니다. 추가하는 각 플랫폼에 대해 Cordova는 플랫폼에 새 디렉토리를 만들고 그 안에 www 폴더를 복제합니다. 예를 들어, Android용 애플리케이션을 사용자 정의하려는 경우 platforms/android/assets/www 의 파일을 수정하고 플랫폼별 셸 도구로 전환할 수 있습니다.

그러나 CLI(교차 플랫폼 개발에 사용됨)를 사용하여 애플리케이션을 다시 빌드하면 Cordova가 각 플랫폼에 대해 변경한 사항을 덮어쓰므로 버전 제어 하에 있는지 확인하거나 플랫폼별 작업을 수행해야 합니다. 크로스 플랫폼 개발을 마친 후의 변경 사항. 앞서 언급했듯이 크로스 플랫폼에서 플랫폼별 개발로 이동하는 것은 쉽습니다. 다른 방향으로 이동하는 것은 아닙니다.

플랫폼 간 워크플로를 계속 사용하고 플랫폼별 사용자 지정을 수행하려면 최상위 수준 병합 폴더를 사용해야 합니다. Cordova 버전 3.5부터 이 폴더는 기본 애플리케이션 템플릿에서 제거되었지만 필요한 경우 다른 최상위 디렉토리( hooks , platforms , plugins 및 www )와 함께 간단히 만들 수 있습니다.

플랫폼별 사용자 정의는 merges/[platform-name] 에 배치되며 최상위 www 폴더의 소스 파일 다음에 적용됩니다. 이런 식으로 특정 플랫폼에 대한 새 소스 파일을 추가하거나 전체 최상위 소스 파일을 플랫폼별 파일로 재정의할 수 있습니다. 다음 구조를 예로 들어 보겠습니다.

 merges/ |-- wp8/ | `-- app.js |-- android/ | `-- android.js |-- www/ `-- app.js

이 경우 Android용 출력 파일에는 app.js 및 android.js 파일이 모두 포함되지만 Windows Phone 8용 출력 파일에는 merges/wp8 폴더에 있는 app.js 파일만 포함됩니다. merges/[platform] 의 파일은 www 의 파일보다 우선합니다.

plugins 디렉토리에는 각 플랫폼의 플러그인에 대한 정보가 들어 있습니다. 이 시점에서 다음 구조를 가져야 하는 android.json 파일만 있어야 합니다.

 { "prepare_queue": { "installed": [], "uninstalled": [] }, "config_munge": { "files": {} }, "installed_plugins": {}, "dependent_plugins": {} }

애플리케이션을 빌드하고 Android 기기에 배포해 보겠습니다. 원하는 경우 에뮬레이터도 사용할 수 있습니다.

Cordova는 앱을 빌드하고 실행하기 위한 몇 가지 CLI 단계를 제공합니다. cordova prepare , cordova compile , cordova build (이전 두 가지에 대한 바로 가기), cordova emulate 및 cordova run ( build 를 통합하고 에뮬레이터도 실행할 수 있음). 대부분의 경우 에뮬레이터에서 앱을 빌드하고 실행하기를 원하기 때문에 혼동하지 않아야 합니다.

 cordova run --emulator

원하는 경우 USB 포트를 통해 장치를 연결하고 USB 디버깅 모드를 활성화하고 다음을 실행하기만 하면 첫 번째 Apache Cordova 애플리케이션을 장치에 직접 배포할 수 있습니다.

 cordova run

이것은 모든 파일을 platforms/* 에 복사하고 필요한 모든 작업을 실행합니다.

애플리케이션 및/또는 특정 에뮬레이터를 빌드하려는 플랫폼의 이름을 지정하여 빌드 프로세스의 범위를 제한할 수 있습니다. 예:

 cordova run android --emulator

또는

 cordova run ios --emulator --target="iPhone-8-Plus"

실습 Apache Cordova 자습서

Cordova 및 해당 플러그인의 사용을 보여주기 위한 간단한 자습서 응용 프로그램을 만들어 보겠습니다. 전체 데모는 이 GitHub 리포지토리에서 찾을 수 있으므로 다운로드하여 이 짧은 Cordova 자습서와 함께 일부를 살펴볼 수 있습니다.

생성한 초기 설정을 사용하고 추가 코드를 추가합니다. 가상의 Toptal 데이터베이스에 새 프로젝트를 추가하고 기존 프로젝트를 보고 싶다고 가정해 보겠습니다. index.html을 열고 다음과 같은 방식으로 두 개의 탭을 설정합니다.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" /> <link rel="stylesheet" type="text/css" href="css/toptal.css" /> <title>Hello Toptal</title> </head> <body> <div> <div> </div> </div> <footer> <ul> <li class="tab-button active" data-tab="#search-tab">Search Projects</li> <li class="tab-button" data-tab="#add-tab">Post a Project</li> </ul> </footer> <div></div> <script src="js/lib/jquery-1.11.1.min.js"></script> <script src="js/lib/jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/SQLiteStorageService.js"></script> <script type="text/javascript" src="js/Controller.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>

Bootstrap과 jQuery Mobile을 종속 항목으로 추가했습니다. 최신 하이브리드 애플리케이션을 구축하기 위해 훨씬 더 나은 솔루션과 프레임워크가 개발되었지만 대부분의(전부는 아닐지라도) 웹 개발자는 이 두 라이브러리에 익숙하므로 초보자용 자습서에 사용하는 것이 좋습니다. GitHub에서 스타일시트를 다운로드하거나 원하는 경우 고유한 스타일시트를 사용할 수 있습니다.

index.js 파일로 이동하여 다음과 같이 제거해 보겠습니다.

 var app = { // Application Constructor initialize: function() { if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) { document.addEventListener("deviceready", this.onDeviceReady, false); } else { this.onDeviceReady(); } }, onDeviceReady: function() { // We will init / bootstrap our application here }, }; app.initialize();

Cordova 애플리케이션에 대해 옹호되는 아키텍처는 SPA(단일 페이지 애플리케이션)를 설정한다는 것을 기억하십시오. 이렇게 하면 모든 리소스는 앱이 시작될 때 한 번만 로드되고 애플리케이션이 실행되는 동안 웹 보기에 머무를 수 있습니다. 또한 SPA를 사용하면 기본 애플리케이션에 일반적이지 않은 페이지를 다시 로드하지 않아도 됩니다. 이를 염두에 두고 두 탭 사이를 전환하는 간단한 컨트롤러를 설정해 보겠습니다.

 var Controller = function() { var controller = { self: null, initialize: function() { self = this; this.bindEvents(); self.renderSearchView(); }, bindEvents: function() { $('.tab-button').on('click', this.onTabClick); }, onTabClick: function(e) { e.preventDefault(); if ($(this).hasClass('active')) { return; } var tab = $(this).data('tab'); if (tab === '#add-tab') { self.renderPostView(); } else { self.renderSearchView(); } }, renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $("#tab-content").load("./views/post-project-view.html", function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $("#tab-content").load("./views/search-project-view.html", function(data) { $projectTemplate = $('.project').remove(); // Load projects here }); } } controller.initialize(); return controller; }

컨트롤러에는 지금까지 두 가지 방법이 있습니다. 하나는 검색 보기를 렌더링하는 것이고 다른 하나는 프로젝트 후 보기를 렌더링하는 것입니다. 먼저 맨 위에서 선언하고 onDeviceReady 메서드에서 구성하여 index.js 파일에서 초기화해 보겠습니다.

 // top of index.js var controller = null

 // inside onDeviceReady method controller = new Controller();

마지막으로 index.js 에 대한 참조 위에 index.html 에 스크립트 참조를 추가합니다. GitHub에서 직접 검색 및 게시 보기를 다운로드할 수 있습니다. 부분 보기는 파일에서 읽기 때문에 Chrome과 같은 일부 브라우저는 페이지를 렌더링하는 동안 도메인 간 요청에 대해 불평합니다.

여기서 가능한 솔루션은 예를 들어 node-static npm 모듈을 사용하여 로컬 정적 서버를 실행하는 것입니다. 또한 여기에서 PhoneGap 및/또는 Ionic과 같은 일부 프레임워크 사용에 대해 생각할 수 있습니다. 모두 브라우저 에뮬레이션, 핫 리로딩, 코드 생성(스캐폴딩)을 포함한 다양한 개발 도구를 제공합니다.

지금은 다음을 실행하여 Android 기기에 간단히 배포해 보겠습니다.

 cordova run android

이 시점에서 애플리케이션에는 두 개의 탭이 있어야 합니다. 첫 번째 탭에서는 프로젝트를 검색할 수 있습니다.

두 번째 탭에서는 새 프로젝트를 게시할 수 있습니다.

이제 웹 보기 내에서 실행되는 클래식 웹 응용 프로그램만 있으면 됩니다. 기본 기능을 실제로 사용하지 않았으므로 지금 사용해 보겠습니다. 일반적인 질문은 장치에 로컬로 데이터를 저장하는 방법 또는 더 정확하게는 사용할 저장소 유형입니다. 여러 가지 방법이 있습니다.

로컬스토리지
웹SQL
IndexedDB
웹 서비스를 통해 액세스되는 서버 측 스토리지
다른 옵션을 제공하는 타사 플러그인

LocalStorage는 소량의 데이터를 저장하는 데 적합하지만 사용 가능한 공간이 3MB에서 10MB까지 다양하기 때문에 데이터 집약적 애플리케이션을 구축하는 경우에는 충분하지 않습니다. IndexedDB는 이 경우에 더 나은 솔루션일 수 있습니다. WebSQL은 더 이상 사용되지 않으며 일부 플랫폼에서는 지원되지 않습니다. 마지막으로 웹 서비스를 사용하여 데이터를 가져오고 수정하는 것은 SPA 패러다임에 잘 맞지만 애플리케이션이 오프라인 상태가 되면 문제가 발생합니다. 서비스 워커와 함께 PWA 기술이 최근 Cordova 세계에 와서 이를 지원합니다.

또한 Cordova 코어의 공백을 채우기 위해 추가로 제공되는 많은 타사 플러그인이 있습니다. 파일 플러그인은 장치의 파일 시스템에 대한 액세스를 제공하여 파일을 만들고 저장할 수 있도록 하므로 매우 유용할 수 있습니다. 지금은 로컬 SQLite 데이터베이스를 제공하는 SQLitePlugin을 사용해 보겠습니다. 다음을 실행하여 프로젝트에 추가할 수 있습니다.

 cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin

SQLitePlugin은 장치의 SQLite 데이터베이스에 API를 제공하고 진정한 지속성 메커니즘 역할을 합니다. 다음과 같은 방식으로 간단한 스토리지 서비스를 만들 수 있습니다.

 SQLiteStorageService = function () { var service = {}; var db = window.sqlitePlugin ? window.sqlitePlugin.openDatabase({name: "demo.toptal", location: "default"}) : window.openDatabase("demo.toptal", "1.0", "DB para FactAV", 5000000); service.initialize = function() { // Initialize the database var deferred = $.Deferred(); db.transaction(function(tx) { tx.executeSql( 'CREATE TABLE IF NOT EXISTS projects ' + '(id integer primary key, name text, company text, description text, latitude real, longitude real)' ,[], function(tx, res) { tx.executeSql('DELETE FROM projects', [], function(tx, res) { deferred.resolve(service); }, function(tx, res) { deferred.reject('Error initializing database'); }); }, function(tx, res) { deferred.reject('Error initializing database'); }); }); return deferred.promise(); } service.getProjects = function() { // fetch projects } service.addProject = function(name, company, description, addLocation) { // add a new project } return service.initialize(); }

GitHub에서 프로젝트를 가져오고 추가하기 위한 코드를 다운로드하여 각 자리 표시자에 붙여넣을 수 있습니다. Controller.js 위의 index.html 파일에 SQLiteStorageService.js를 추가하고 컨트롤러의 초기화 기능을 수정하여 컨트롤러에서 초기화하는 것을 잊지 마십시오.

 initialize: function() { self = this; new SQLiteStorageService().done(function(service) { self.storageService = service; self.bindEvents(); self.renderSearchView(); }).fail(function(error) { alert(error); }); }

service.addProject()를 살펴보면 navigator.geolocation.getCurrentPosition() 메서드를 호출하는 것을 알 수 있습니다. Cordova에는 전화기의 현재 위치를 가져오는 데 사용할 수 있는 지리적 위치 플러그인이 있으며 navigator.geolocation.watchPosition() 메서드를 사용하여 사용자의 위치가 변경될 때 업데이트를 받을 수도 있습니다.

마지막으로 데이터베이스에서 프로젝트를 추가하고 가져오기 위한 컨트롤러 이벤트 핸들을 추가해 보겠습니다.

 renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $("#tab-content").load("./views/post-project-view.html", function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, postProject: function(e) { e.preventDefault(); var name = $('#project-name').val(); var description = $('#project-description').val(); var company = $('#company').val(); var addLocation = $('#include-location').is(':checked'); if (!name || !description || !company) { alert('Please fill in all fields'); return; } else { var result = self.storageService.addProject( name, company, description, addLocation); result.done(function() { alert('Project successfully added'); self.renderSearchView(); }).fail(function(error) { alert(error); }); } }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $("#tab-content").load("./views/search-project-view.html", function(data) { $('#addressSearch').on('click', function() { alert('Not implemented'); }); $projectTemplate = $('.project').remove(); var projects = self.storageService.getProjects().done(function(projects) { for(var idx in projects) { var $div = $projectTemplate.clone(); var project = projects[idx]; $div.find('.project-name').text(project.name); $div.find('.project-company').text(project.company); $div.find('.project-description').text(project.description); if (project.location) { var url = '<a target="_blank" href="https://www.google.com.au/maps/preview/@' + project.location.latitude + ',' + project.location.longitude + ',10z">Click to open map</a>'; $div.find('.project-location').html(url); } else { $div.find('.project-location').text("Not specified"); } $tab.append($div); } }).fail(function(error) { alert(error); }); }); }

콘솔 및 대화 상자 플러그인을 추가하려면 다음을 실행하십시오.

 cordova plugin add org.apache.cordova.dialogs cordova plugin add org.apache.cordova.console

cordova.console 플러그인은 에뮬레이터 내에서 console.log() 기능을 활성화하여 디버깅을 지원합니다.

Chrome 원격 디버거를 통해 Android 애플리케이션을 쉽게 디버그할 수 있습니다. 장치를 연결했으면 오른쪽 상단 모서리(X 버튼 아래)에 있는 드롭다운 메뉴를 클릭하고 추가 도구를 확장한 다음 장치 검사를 클릭합니다. 목록에 장치가 표시되어야 하고 디버그 콘솔을 열 수 있어야 합니다.

Safari는 USB 연결 장치 또는 에뮬레이터에서 실행되는 iOS 앱 디버깅을 위해 동일한 기능을 제공합니다. Safari 설정 > 고급 탭에서 개발자 도구를 활성화하기만 하면 됩니다.

cordova.dialogs 플러그인은 기본 알림을 활성화합니다. 일반적인 방법은 다음과 같은 방식으로 cordova.dialogs API를 사용하여 windows.alert 메서드를 재정의하는 것입니다.

 overrideBrowserAlert: function() { if (navigator.notification) { // Override default HTML alert with native dialog window.alert = function (message) { navigator.notification.alert( message, // message null, // callback "Toptal", // title 'OK' // buttonName ); }; } }

overrideBrowserAlert 함수는 deviceready 이벤트 핸들러 내에서 호출해야 합니다.

이제 새 프로젝트를 추가하고 데이터베이스에서 기존 프로젝트를 볼 수 있습니다. "위치 포함" 확인란을 선택하면 장치가 Geolocation API를 호출하고 현재 위치를 프로젝트에 추가합니다.

아이콘과 시작 화면을 설정하여 응용 프로그램에 마무리 터치를 추가해 보겠습니다. config.xml 파일에 다음을 추가합니다.

 <platform name="android"> <icon src="www/img/logo.png" /> <splash src="www/img/logo.png" density="mdpi"/> <splash src="www/img/logo.png" density="hdpi"/> <splash src="www/img/logo.png" density="xhdpi"/> </platform>

마지막으로 www/img 폴더에 로고 이미지를 넣습니다.

나만의 코르도바 앱

Apache Cordova 앱 개발의 기본 단계를 거쳤고 자체 JavaScript 아키텍처와 CSS 스타일시트를 사용했습니다. 이 Cordova 튜토리얼은 친숙한 기술을 사용하여 모바일 애플리케이션을 개발하는 수단으로서 Apache Cordova의 잠재력을 보여주고 개발 시간과 다양한 플랫폼을 위한 여러 애플리케이션을 구축하는 데 필요한 노력을 모두 줄이기 위한 시도였습니다.

그러나 프로덕션에 들어갈 애플리케이션을 구축할 때는 기존 프레임워크를 사용하는 것이 좋습니다. 사전 정의된 아키텍처에서 애플리케이션을 구조화하는 것 외에도 애플리케이션을 기본 모양과 느낌에 더 가깝게 만드는 데 도움이 되는 구성 요소 집합을 제공할 수도 있습니다. 주목할 가치가 있는 몇 가지 프레임워크는 Ionic, Framework7, Weex, Ratchet, Kendo UI 및 Onsen UI입니다. 행운을 빕니다!

관련: Cordova 프레임워크: Ionic 대 Framework7