Cordova-퀵 가이드

Cordova HTML, CSS 및 JavaScript를 사용하여 하이브리드 모바일 애플리케이션을 구축하기위한 플랫폼입니다.

공식 문서는 우리에게 Cordova의 정의를 제공합니다-

"Apache Cordova는 오픈 소스 모바일 개발 프레임 워크입니다.이를 통해 플랫폼 간 개발을 위해 HTML5, CSS3 및 JavaScript와 같은 표준 웹 기술을 사용할 수 있으므로 각 모바일 플랫폼 고유 개발 언어를 피할 수 있습니다. 애플리케이션은 각 플랫폼을 대상으로하는 래퍼 내에서 실행됩니다. 표준을 준수하는 API 바인딩을 사용하여 각 기기의 센서, 데이터 및 네트워크 상태에 액세스합니다. "

Cordova 기능

이제 Cordova의 기능을 간략하게 이해하겠습니다.

명령 줄 인터페이스 (Cordova CLI)

이 도구는 프로젝트 시작, 다양한 플랫폼에 대한 프로세스 구축, 플러그인 설치 및 개발 프로세스를 더 쉽게 만드는 기타 많은 유용한 작업에 사용할 수 있습니다. 다음 장에서 명령 줄 인터페이스를 사용하는 방법을 배웁니다.

Cordova 핵심 구성 요소

Cordova는 모든 모바일 애플리케이션에 필요한 일련의 핵심 구성 요소를 제공합니다. 이러한 구성 요소는 앱 기반을 만드는 데 사용되므로 자체 로직을 구현하는 데 더 많은 시간을 할애 할 수 있습니다.

Cordova 플러그인

Cordova는 JavaScript 앱에 기본 모바일 기능을 구현하는 데 사용될 API를 제공합니다.

특허

Cordova는 Apache 라이선스 버전 2.0에 따라 라이선스가 부여됩니다. Apache 및 Apache feather 로고는 Apache Software Foundation의 상표입니다.

Cordova 장점

이제 Cordova의 장점에 대해 논의하겠습니다.

• Cordova는 하이브리드 모바일 앱 구축을위한 하나의 플랫폼을 제공하므로 IOS, Android, Windows Phone, Amazon-fireos, blackberry, Firefox OS, Ubuntu 및 tizien과 같은 다양한 모바일 플랫폼에서 사용할 하나의 앱을 개발할 수 있습니다.

• Cordova가 개발 시간을 절약 할 수 있도록 하이브리드 앱을 개발하는 것이 네이티브 앱보다 빠릅니다.

• Cordova로 작업 할 때 JavaScript를 사용하기 때문에 플랫폼 별 프로그래밍 언어를 배울 필요가 없습니다.

• Cordova와 함께 사용할 수있는 많은 커뮤니티 애드온이 있으며, 여기에는 작업에 최적화 된 여러 라이브러리 및 프레임 워크가 있습니다.

Cordova 제한 사항

다음은 Cordova의 제한 사항입니다.

• 하이브리드 앱은 기본 앱보다 느리므로 많은 데이터와 기능이 필요한 대형 앱에 Cordova를 사용하는 것은 최적이 아닙니다.

• 크로스 브라우저 호환성은 많은 문제를 일으킬 수 있습니다. 대부분의 시간 동안 우리는 다양한 플랫폼 용 앱을 구축하므로 많은 수의 장치와 운영 체제를 다루어야하므로 테스트 및 최적화에 많은 시간이 소요될 수 있습니다.

• 일부 플러그인에는 다른 장치 및 플랫폼과의 호환성 문제가 있습니다. Cordova에서 아직 지원하지 않는 일부 기본 API도 있습니다.

이 장에서는 Cordova의 환경 설정을 이해합니다. 설정을 시작하려면 먼저 몇 가지 구성 요소를 설치해야합니다. 구성 요소는 다음 표에 나열되어 있습니다.

S. 아니	소프트웨어 및 설명
1	NodeJS and NPM NodeJS는 Cordova 개발에 필요한 플랫폼입니다. 우리의 확인 NodeJS 환경 설정을 자세한 내용은.
2	Android SDK Android 플랫폼의 경우 컴퓨터에 Android SDK가 설치되어 있어야합니다. 체크 아웃 안드로이드 환경 설정을 자세한 내용은.
삼	XCode iOS 플랫폼의 경우 컴퓨터에 xCode가 설치되어 있어야합니다. 확인 아이폰 OS 환경 설정 자세한 내용을

Cordova 설치

시작하기 전에 Windows를 사용할 것임을 알아야합니다. command prompt 튜토리얼에서.

1 단계-git 설치

git을 사용하지 않더라도 Cordova가 일부 백그라운드 프로세스에 사용하고 있으므로 설치해야합니다. 여기서 git을 다운로드 할 수 있습니다 . git을 설치 한 후 환경 변수를 엽니 다.

• 컴퓨터에서 오른쪽 클릭
• Properties
• 고급 시스템 설정
• 환경 변수
• 시스템 변수
• Edit

끝에 다음을 복사하십시오. variable value field. 이것은 git 설치의 기본 경로입니다. 다른 경로에 설치 한 경우 아래 예제 코드 대신 해당 경로를 사용해야합니다.

;C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\cmd

이제 입력 할 수 있습니다. git 명령 프롬프트에서 설치가 성공했는지 테스트합니다.

2 단계-Cordova 설치

이 단계는 Cordova 모듈을 전역 적으로 다운로드하고 설치합니다. 명령 프롬프트를 열고 다음을 실행하십시오-

C:\Users\username>npm install -g cordova

다음을 실행하여 설치된 버전을 확인할 수 있습니다.

C:\Users\username>cordova -v

이것은 Windows 운영 체제에서 Cordova 앱 개발을 시작하는 데 필요한 모든 것입니다. 다음 자습서에서는 첫 번째 응용 프로그램을 만드는 방법을 보여줍니다.

Cordova를 설치하고이를위한 환경을 설정하는 방법을 이해했습니다. 모든 것이 준비되면 첫 번째 하이브리드 Cordova 애플리케이션을 만들 수 있습니다.

1 단계-앱 생성

명령 프롬프트에서 앱을 설치할 디렉토리를 엽니 다. 데스크탑에 생성합니다.

C:\Users\username\Desktop>cordova 
   create CordovaProject io.cordova.hellocordova CordovaApp

• CordovaProject 앱이 생성 된 디렉터리 이름입니다.

• io.cordova.hellocordova기본 역 도메인 값입니다. 가능하면 고유 한 도메인 값을 사용해야합니다.

• CordovaApp 앱의 제목입니다.

2 단계-플랫폼 추가

명령 프롬프트에서 프로젝트 디렉토리를 열어야합니다. 이 예에서는CordovaProject. 필요한 플랫폼 만 선택해야합니다. 지정된 플랫폼을 사용하려면 특정 플랫폼 SDK를 설치해야합니다. Windows에서 개발 중이므로 다음 플랫폼을 사용할 수 있습니다. 이미 Android SDK를 설치 했으므로이 자습서에서는 Android 플랫폼 만 설치합니다.

C:\Users\username\Desktop\CordovaProject>cordova platform add android

Windows OS에서 사용할 수있는 다른 플랫폼이 있습니다.

C:\Users\username\Desktop\CordovaProject>cordova platform add wp8

C:\Users\username\Desktop\CordovaProject>cordova platform add amazon-fireos

C:\Users\username\Desktop\CordovaProject>cordova platform add windows

C:\Users\username\Desktop\CordovaProject>cordova platform add blackberry10

C:\Users\username\Desktop\CordovaProject>cordova platform add firefoxos

Mac에서 개발하는 경우 다음을 사용할 수 있습니다.

$ cordova platform add IOS

$ cordova platform add amazon-fireos

$ cordova platform add android

$ cordova platform add blackberry10

$ cordova platform add firefoxos

다음을 사용하여 프로젝트에서 플랫폼을 제거 할 수도 있습니다.

C:\Users\username\Desktop\CordovaProject>cordova platform rm android

3 단계-빌드 및 실행

이 단계에서는 모바일 장치 또는 에뮬레이터에서 실행할 수 있도록 지정된 플랫폼 용 앱을 빌드합니다.

C:\Users\username\Desktop\CordovaProject>cordova build android

이제 앱을 실행할 수 있습니다. 기본 에뮬레이터를 사용하는 경우 다음을 사용해야합니다.

C:\Users\username\Desktop\CordovaProject>cordova emulate android

외부 에뮬레이터 또는 실제 장치를 사용하려면 다음을 사용해야합니다.

C:\Users\username\Desktop\CordovaProject>cordova run android

NOTE − 우리는 Genymotion android emulator기본보다 빠르고 반응이 빠르기 때문입니다. 여기 에서 에뮬레이터를 찾을 수 있습니다 . 테스트를 위해 실제 장치를 사용할 수도 있습니다.USB debugging옵션에서 USB 케이블을 통해 컴퓨터에 연결합니다. 일부 장치의 경우 USB 드라이버도 설치해야합니다.

앱을 실행하면 지정한 플랫폼에 설치됩니다. 모든 것이 오류없이 완료되면 출력에 앱의 기본 시작 화면이 표시되어야합니다.

다음 튜토리얼에서는 Cordova 애플리케이션을 구성하는 방법을 보여줍니다.

그만큼 config.xml파일은 앱의 구성을 변경할 수있는 곳입니다. 지난 튜토리얼에서 앱을 만들 때 역 도메인과 이름을 설정했습니다. 값은config.xml파일. 앱을 만들 때 기본 구성 파일도 생성됩니다.

다음 표는 다음의 구성 요소를 설명합니다. config.xml.

config.xml 구성 테이블

S. 아니	요소 및 세부 정보
1	widget 앱을 만들 때 지정한 앱 역 도메인 값입니다.
2	name 앱을 만들 때 지정한 앱의 이름입니다.
삼	description 앱에 대한 설명입니다.
4	author 앱 작성자입니다.
5	content 앱의 시작 페이지입니다. 그것은 내부에 배치됩니다www 예배 규칙서.
6	plugin 현재 설치된 플러그인입니다.
7	access 외부 도메인에 대한 액세스를 제어하는 ​​데 사용됩니다. 기본값origin값은 *로 설정되어 모든 도메인에 대한 액세스가 허용됨을 의미합니다. 이 값은 정보를 보호하기 위해 일부 특정 URL을 열 수 없습니다.
8	allow-intent 특정 URL이 앱을 열도록 요청할 수 있습니다. 예를 들면<allow-intent href = "tel:*" /> tel : 링크를 통해 다이얼러를 열 수 있습니다.
9	platform 앱 빌드를위한 플랫폼입니다.

클라이언트 앱에 데이터를 저장하는 데 사용할 수있는 저장소 API를 사용할 수 있습니다. 이렇게하면 사용자가 오프라인 일 때 앱 사용에 도움이되며 성능도 향상 될 수 있습니다. 이 튜토리얼은 초보자를위한 것이므로 사용 방법을 보여 드리겠습니다.local storage. 이후 튜토리얼 중 하나에서 사용할 수있는 다른 플러그인을 보여줄 것입니다.

1 단계-버튼 추가

4 개의 버튼을 index.html파일. 버튼은div class = "app" 요소.

<button id = "setLocalStorage">SET LOCAL STORAGE</button>
<button id = "showLocalStorage">SHOW LOCAL STORAGE</button>
<button id = "removeProjectFromLocalStorage">REMOVE PROJECT</button>
<button id = "getLocalStorageByKey">GET BY KEY</button>

다음 화면이 생성됩니다-

2 단계-이벤트 리스너 추가

Cordova 보안 정책은 인라인 이벤트를 허용하지 않으므로 index.js 파일 내에 이벤트 리스너를 추가합니다. 우리는 또한 할당 할 것입니다window.localStorage 에 localStorage 나중에 사용할 변수입니다.

document.getElementById("setLocalStorage").addEventListener("click", setLocalStorage); 
document.getElementById("showLocalStorage").addEventListener("click", showLocalStorage); 
document.getElementById("removeProjectFromLocalStorage").addEventListener 
   ("click", removeProjectFromLocalStorage); 
document.getElementById("getLocalStorageByKey").addEventListener 
   ("click", getLocalStorageByKey);  
var localStorage = window.localStorage;

3 단계-함수 생성

이제 버튼을 누를 때 호출 될 함수를 만들어야합니다. 첫 번째 기능은 로컬 스토리지에 데이터를 추가하는 데 사용됩니다.

function setLocalStorage() { 
   localStorage.setItem("Name", "John"); 
   localStorage.setItem("Job", "Developer"); 
   localStorage.setItem("Project", "Cordova Project"); 
}

다음은 콘솔에 추가 한 데이터를 기록합니다.

function showLocalStorage() { 
   console.log(localStorage.getItem("Name")); 
   console.log(localStorage.getItem("Job")); 
   console.log(localStorage.getItem("Project")); 
}

탭하면 SET LOCAL STORAGE버튼을 클릭하면 세 항목을 로컬 저장소로 설정합니다. 탭하면SHOW LOCAL STORAGE 나중에 콘솔은 우리가 원하는 항목을 기록합니다.

이제 로컬 저장소에서 프로젝트를 삭제하는 함수를 만들어 보겠습니다.

function removeProjectFromLocalStorage() {
   localStorage.removeItem("Project");
}

클릭하면 SHOW LOCAL STORAGE 프로젝트를 삭제 한 후 버튼을 누르면 출력에 null 프로젝트 필드의 값입니다.

또한 다음을 사용하여 로컬 저장소 요소를 가져올 수 있습니다. key() 인덱스를 인수로 취하고 해당 인덱스 값이있는 요소를 리턴하는 메소드입니다.

function getLocalStorageByKey() {
   console.log(localStorage.key(0));
}

이제 탭하면 GET BY KEY 버튼을 누르면 다음과 같은 출력이 표시됩니다.

노트

우리가 사용할 때 key() 방법을 사용하면 콘솔이 job 대신 name 비록 우리가 논쟁을 통과했지만 0첫 번째 개체를 검색합니다. 이는 로컬 스토리지가 데이터를 알파벳 순서로 저장하기 때문입니다.

다음 표는 사용 가능한 모든 로컬 저장 방법을 보여줍니다.

S. 아니	방법 및 세부 사항
1	setItem(key, value) 항목을 로컬 저장소로 설정하는 데 사용됩니다.
2	getItem(key) 로컬 저장소에서 항목을 가져 오는 데 사용됩니다.
삼	removeItem(key) 로컬 저장소에서 항목을 제거하는 데 사용됩니다.
4	key(index) 사용하여 항목을 가져 오는 데 사용됩니다. index로컬 저장소에있는 항목의. 이렇게하면 항목을 알파벳순으로 정렬하는 데 도움이됩니다.
5	length() 로컬 저장소에있는 항목 수를 검색하는 데 사용됩니다.
6	clear() 로컬 저장소에서 모든 키 / 값 쌍을 제거하는 데 사용됩니다.

Cordova 프로젝트에서 사용할 수있는 다양한 이벤트가 있습니다. 다음 표는 사용 가능한 이벤트를 보여줍니다.

S. 아니	이벤트 및 세부 정보
1	deviceReady 이 이벤트는 Cordova가 완전히로드되면 트리거됩니다. 이는 모든 것이로드되기 전에 Cordova 함수가 호출되지 않도록하는 데 도움이됩니다.
2	pause 이 이벤트는 앱이 백그라운드로 전환 될 때 트리거됩니다.
삼	resume 이 이벤트는 앱이 백그라운드에서 반환 될 때 트리거됩니다.
4	backbutton 이 이벤트는 뒤로 버튼을 누르면 트리거됩니다.
5	menubutton 이 이벤트는 메뉴 버튼을 누를 때 트리거됩니다.
6	searchbutton 이 이벤트는 Android 검색 버튼을 누르면 트리거됩니다.
7	startcallbutton 이 이벤트는 통화 시작 버튼을 누르면 트리거됩니다.
8	endcallbutton 이 이벤트는 통화 종료 버튼을 누르면 트리거됩니다.
9	volumedownbutton 이 이벤트는 볼륨 작게 버튼을 누르면 트리거됩니다.
10	volumeupbutton 이 이벤트는 볼륨 높이기 버튼을 누르면 트리거됩니다.

이벤트 사용

모든 이벤트는 거의 동일한 방식으로 사용됩니다. 항상 이벤트 리스너를 추가해야합니다.js 대신 inline event calling 이후 Cordova Content Security Policy인라인 자바 스크립트를 허용하지 않습니다. 이벤트를 인라인으로 호출하려고하면 다음 오류가 표시됩니다.

이벤트로 작업하는 올바른 방법은 addEventListener. 우리는 사용 방법을 이해할 것입니다volumeupbutton 예를 통해 이벤트.

document.addEventListener("volumeupbutton", callbackFunction, false);  
function callbackFunction() { 
   alert('Volume Up Button is pressed!');
}

일단 우리가 volume up 버튼을 누르면 화면에 다음 경고가 표시됩니다.

뒤로 버튼 처리

이전 화면으로 돌아가는 것과 같은 앱 기능을 위해 Android 뒤로 버튼을 사용해야합니다. 자체 기능을 구현하려면 먼저 앱을 종료하는 데 사용되는 뒤로 버튼을 비활성화해야합니다.

document.addEventListener("backbutton", onBackKeyDown, false);  
function onBackKeyDown(e) { 
   e.preventDefault(); 
   alert('Back Button is Pressed!'); 
}

이제 기본 Android 뒤로 버튼을 누르면 앱을 종료하는 대신 화면에 경고가 표시됩니다. 이것은e.preventDefault() 명령.

뒤로 버튼 처리

일반적으로 이전 화면으로 돌아가는 것과 같은 일부 앱 기능에 Android 뒤로 버튼을 사용하는 것이 좋습니다. 자체 기능을 구현하려면 먼저 뒤로 버튼을 눌렀을 때 앱 종료를 비활성화해야합니다.

document.addEventListener("backbutton", onBackKeyDown, false);  
function onBackKeyDown(e) { 
   e.preventDefault(); 
   alert('Back Button is Pressed!'); 
}

이제 기본 Android 뒤로 버튼을 누르면 앱을 종료하는 대신 화면에 경고가 표시됩니다. 이것은 사용하여 수행됩니다e.preventDefault().

Cordova Plugman은 플러그인 설치 및 관리에 유용한 명령 줄 도구입니다. 당신은 사용해야합니다plugman앱이 하나의 특정 플랫폼에서 실행되어야하는 경우. 만들려면cross-platform 사용해야하는 앱 cordova-cli 다른 플랫폼의 플러그인을 수정합니다.

1 단계-Plugman 설치

열기 command prompt 창을 열고 다음 코드 스 니펫을 실행하여 plugman을 설치하십시오.

C:\Users\username\Desktop\CordovaProject>npm install -g plugman

2 단계-플러그인 설치

plugman을 사용하여 Cordova 플러그인을 설치하는 방법을 이해하기 위해 카메라 플러그인을 예로 사용합니다.

C:\Users\username\Desktop\CordovaProject>plugman  
   install --platform android --project platforms\android  
   --plugin cordova-plugin-camera 
   plugman uninstall --platform android --project platforms\android  
   --plugin cordova-plugin-camera

위에 표시된대로 세 가지 매개 변수를 고려해야합니다.

• --platform − 우리가 사용하고있는 플랫폼 (android, ios, amazon-fireos, wp8, blackberry10).

• --project− 프로젝트가 구축 된 경로. 우리의 경우에는platforms\android 예배 규칙서.

• --plugin − 설치하려는 플러그인.

유효한 매개 변수를 설정하면 명령 프롬프트 창에 다음 출력이 표시됩니다.

추가 방법

당신은 사용할 수 있습니다 uninstall 방법도 비슷합니다.

C:\Users\username\Desktop\CordovaProject>plugman uninstall  
   --platform android --project platforms\android --plugin cordova-plugin-camera

그만큼 command prompt 콘솔은 다음 출력을 표시합니다.

Plugman은 사용할 수있는 몇 가지 추가 방법을 제공합니다. 방법은 다음 표에 나열되어 있습니다.

S. 아니	방법 및 세부 사항
1	install Cordova 플러그인 설치에 사용됩니다.
2	uninstall Cordova 플러그인 제거에 사용됩니다.
삼	fetch Cordova 플러그인을 특정 위치에 복사하는 데 사용됩니다.
4	prepare JS 모듈 지원을 돕기 위해 구성 파일을 업데이트하는 데 사용됩니다.
5	adduser 사용자 계정을 레지스트리에 추가하는 데 사용됩니다.
6	publish 플러그인을 레지스트리에 게시하는 데 사용됩니다.
7	unpublish 레지스트리에서 플러그인 게시를 취소하는 데 사용됩니다.
8	search 레지스트리에서 플러그인을 검색하는 데 사용됩니다.
9	config 레지스트리 설정 구성에 사용됩니다.
10	create 사용자 정의 플러그인을 만드는 데 사용됩니다.
11	platform 사용자 정의 생성 플러그인에서 플랫폼을 추가하거나 제거하는 데 사용됩니다.

추가 명령

막히면 언제든지 사용할 수 있습니다. plugman -help명령. 버전은 다음을 사용하여 확인할 수 있습니다.plugman -v. 플러그인을 검색하려면 다음을 사용할 수 있습니다.plugman search 마지막으로 다음을 사용하여 플러그인 레지스트리를 변경할 수 있습니다. plugman config set registry 명령.

노트

Cordova는 크로스 플랫폼 개발에 사용되기 때문에 다음 장에서 Cordova CLI 대신에 Plugman 플러그인 설치를 위해.

이 Cordova 플러그인은 장치의 배터리 상태를 모니터링하는 데 사용됩니다. 플러그인은 장치의 배터리에 발생하는 모든 변경 사항을 모니터링합니다.

1 단계-배터리 플러그인 설치

이 플러그인을 설치하려면 command prompt 창을 열고 다음 코드를 실행하십시오.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-pluginbattery-status

2 단계-이벤트 리스너 추가

열 때 index.js 파일, 당신은 찾을 수 있습니다 onDeviceReady함수. 여기에 이벤트 리스너가 추가되어야합니다.

window.addEventListener("batterystatus", onBatteryStatus, false);

3 단계-콜백 함수 생성

우리는 onBatteryStatus 하단의 콜백 함수 index.js 파일.

function onBatteryStatus(info) { 
   alert("BATTERY STATUS:  Level: " + info.level + " isPlugged: " + info.isPlugged); 
}

앱을 실행하면 경고가 발생합니다. 현재 배터리는 100 % 충전되어 있습니다.

상태가 변경되면 새 경고가 표시됩니다. 배터리 상태는 배터리가 이제 99 % 충전되었음을 보여줍니다.

장치를 충전기에 연결하면 새 경고에 isPlugged 값이 다음으로 변경됨 true.

추가 이벤트

이 플러그인은 batterystatus행사. 이러한 이벤트는batterystatus 행사.

S. 아니	이벤트 및 세부 정보
1	batterylow 배터리 충전 비율이 낮은 값에 도달하면 이벤트가 트리거됩니다. 이 값은 장치에 따라 다릅니다.
2	batterycritical 배터리 충전 비율이 임계 값에 도달하면 이벤트가 트리거됩니다. 이 값은 장치에 따라 다릅니다.

이 플러그인은 사진을 찍거나 이미지 갤러리의 파일을 사용하는 데 사용됩니다.

1 단계-카메라 플러그인 설치

다음 코드를 실행하십시오. command prompt 이 플러그인을 설치하는 창.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincamera

2 단계-버튼 및 이미지 추가

이제 카메라를 호출하는 버튼을 만들고 img촬영 후 이미지가 표시되는 위치. 이것은 다음에 추가됩니다index.html 내부 div class = "app" 요소.

<button id = "cameraTakePicture">TAKE PICTURE</button>
<img id = "myImage"></img>

3 단계-이벤트 리스너 추가

이벤트 리스너는 onDeviceReady Cordova를 사용하기 전에로드되었는지 확인합니다.

document.getElementById("cameraTakePicture").addEventListener 
   ("click", cameraTakePicture);

4 단계-기능 추가 (사진 촬영)

우리는 cameraTakePicture이벤트 리스너에 콜백으로 전달되는 함수입니다. 버튼을 탭하면 실행됩니다. 이 함수 내에서navigator.camera플러그인 API에서 제공하는 전역 개체입니다. 사진 촬영이 성공하면 데이터가onSuccess콜백 함수가 아닌 경우 오류 메시지와 함께 경고가 표시됩니다. 이 코드는index.js.

function cameraTakePicture() { 
   navigator.camera.getPicture(onSuccess, onFail, {  
      quality: 50, 
      destinationType: Camera.DestinationType.DATA_URL 
   });  
   
   function onSuccess(imageData) { 
      var image = document.getElementById('myImage'); 
      image.src = "data:image/jpeg;base64," + imageData; 
   }  
   
   function onFail(message) { 
      alert('Failed because: ' + message); 
   } 
}

앱을 실행하고 버튼을 누르면 기본 카메라가 트리거됩니다.

사진을 찍고 저장하면 화면에 표시됩니다.

로컬 파일 시스템에서 이미지를 가져 오는 데 동일한 절차를 사용할 수 있습니다. 유일한 차이점은 마지막 단계에서 생성 된 함수입니다. 당신은 볼 수 있습니다sourceType 선택적 매개 변수가 추가되었습니다.

1 단계 B

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincamera

2 단계 B

<button id = "cameraGetPicture">GET PICTURE</button>

3 단계 B

document.getElementById("cameraGetPicture").addEventListener("click", cameraGetPicture);

4 단계 B

function cameraGetPicture() {
   navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY
   });

   function onSuccess(imageURL) {
      var image = document.getElementById('myImage');
      image.src = imageURL;
   }

   function onFail(message) {
      alert('Failed because: ' + message);
   }

}

두 번째 버튼을 누르면 카메라 대신 파일 시스템이 열리므로 표시 할 이미지를 선택할 수 있습니다.

이 플러그인은 사용자 정의를위한 많은 선택적 매개 변수를 제공합니다.

S. 아니	매개 변수 및 세부 사항
1	quality 0-100 범위의 이미지 품질입니다. 기본값은 50입니다.
2	destinationType DATA_URL 또는 0 base64로 인코딩 된 문자열을 반환합니다. FILE_URI 또는 1 이미지 파일 URI를 반환합니다. NATIVE_URI 또는 2 이미지 네이티브 URI를 반환합니다.
삼	sourceType PHOTOLIBRARY 또는 0 사진 라이브러리를 엽니 다. CAMERA 또는 1 기본 카메라를 엽니 다. SAVEDPHOTOALBUM 또는 2 저장된 사진 앨범을 엽니 다.
4	allowEdit 이미지 편집을 허용합니다.
5	encodingType JPEG 또는 0 JPEG로 인코딩 된 이미지를 반환합니다. PNG 또는 1 PNG로 인코딩 된 이미지를 반환합니다.
6	targetWidth 이미지 크기 조정 너비 (픽셀).
7	targetHeight 이미지 크기 조정 높이 (픽셀)입니다.
8	mediaType PICTURE 또는 0 그림 선택 만 허용합니다. VIDEO 또는 1 비디오 선택 만 허용합니다. ALLMEDIA 또는 2 모든 미디어 유형을 선택할 수 있습니다.
9	correctOrientation 이미지 방향을 수정하는 데 사용됩니다.
10	saveToPhotoAlbum 이미지를 사진 앨범에 저장하는 데 사용됩니다.
11	popoverOptions IOS에서 팝 오버 위치를 설정하는 데 사용됩니다.
12	cameraDirection FRONT 또는 0 전면 부 카메라. BACK 또는 1 후면 카메라. ALLMEDIA

이 플러그인은 장치의 연락처 데이터베이스에 액세스하는 데 사용됩니다. 이 자습서에서는 연락처를 생성, 쿼리 및 삭제하는 방법을 보여줍니다.

1 단계-연락처 플러그인 설치

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincontacts

2 단계-버튼 추가

버튼은 createContact함수. 우리는 그것을div class = "app" 에 index.html 파일.

<button id = "createContact">ADD CONTACT</button>
<button id = "findContact">FIND CONTACT</button>
<button id = "deleteContact">DELETE CONTACT</button>

2 단계-이벤트 리스너 추가

열다 index.js 다음 코드 스 니펫을 onDeviceReady 함수.

document.getElementById("createContact").addEventListener("click", createContact);
document.getElementById("findContact").addEventListener("click", findContact);
document.getElementById("deleteContact").addEventListener("click", deleteContact);

3A 단계-콜백 기능 (navigator.contacts.create)

이제 장치에 저장된 연락처가 없습니다.

첫 번째 콜백 함수는 navigator.contacts.create새 연락처 데이터를 지정할 수있는 방법입니다. 이렇게하면 연락처가 생성되고myContact변수이지만 장치에 저장되지 않습니다. 저장하려면save 메서드를 사용하고 성공 및 오류 콜백 함수를 만듭니다.

function createContact() {
   var myContact = navigator.contacts.create({"displayName": "Test User"});
   myContact.save(contactSuccess, contactError);
    
   function contactSuccess() {
      alert("Contact is saved!");
   }
	
   function contactError(message) {
      alert('Failed because: ' + message);
   }
	
}

클릭하면 ADD CONTACT 버튼을 누르면 새 연락처가 장치 연락처 목록에 저장됩니다.

3B 단계-콜백 기능 (navigator.contacts.find)

두 번째 콜백 함수는 모든 연락처를 쿼리합니다. 우리는navigator.contacts.find방법. 옵션 개체에는 검색 필터를 지정하는 데 사용되는 필터 매개 변수가 있습니다.multiple = true장치에서 모든 연락처를 반환하려고하기 때문에 사용됩니다. 그만큼field 연락처를 검색하는 키 displayName 연락처를 저장할 때 사용했기 때문입니다.

옵션을 설정 한 후 find연락처를 쿼리하는 방법. 발견 된 모든 연락처에 대해 경고 메시지가 트리거됩니다.

function findContacts() {
   var options = new ContactFindOptions();
   options.filter = "";
   options.multiple = true;
   fields = ["displayName"];
   navigator.contacts.find(fields, contactfindSuccess, contactfindError, options);
    
   function contactfindSuccess(contacts) {
      for (var i = 0; i < contacts.length; i++) {
         alert("Display Name = " + contacts[i].displayName);
      }
   }
	
   function contactfindError(message) {
      alert('Failed because: ' + message);
   }
	
}

우리가 누를 때 FIND CONTACT 버튼을 누르면 하나의 연락처 만 저장되었으므로 하나의 경고 팝업이 트리거됩니다.

3C 단계-콜백 기능 (삭제)

이 단계에서는 find 메소드를 다시 사용하지만 이번에는 다른 옵션을 설정합니다. 그만큼options.filter 검색하도록 설정되어 있습니다. Test User삭제해야합니다. 후contactfindSuccess 콜백 함수가 원하는 연락처를 반환했으면 다음을 사용하여 삭제합니다. remove 자체 성공 및 오류 콜백이 필요한 메서드입니다.

function deleteContact() {
   var options = new ContactFindOptions();
   options.filter = "Test User";
   options.multiple = false;
   fields = ["displayName"];
   navigator.contacts.find(fields, contactfindSuccess, contactfindError, options);

   function contactfindSuccess(contacts) {
      var contact = contacts[0];
      contact.remove(contactRemoveSuccess, contactRemoveError);

      function contactRemoveSuccess(contact) {
         alert("Contact Deleted");
      }

      function contactRemoveError(message) {
         alert('Failed because: ' + message);
      }
   }

   function contactfindError(message) {
      alert('Failed because: ' + message);
   }
	
}

이제 장치에 하나의 연락처 만 저장됩니다. 삭제 프로세스를 보여주기 위해 수동으로 하나 더 추가합니다.

이제 DELETE CONTACT 버튼을 삭제하려면 Test User. 연락처 목록을 다시 확인하면Test User 더 이상 존재하지 않습니다.

이 플러그인은 사용자의 장치에 대한 정보를 얻는 데 사용됩니다.

1 단계-장치 플러그인 설치

이 플러그인을 설치하려면 다음 스 니펫을 실행해야합니다. command prompt.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-device

2 단계-버튼 추가

다른 Cordova 플러그인을 사용한 것과 동일한 방식으로이 플러그인을 사용할 것입니다. 버튼을 추가하겠습니다.index.html파일. 이 버튼은 장치에 대한 정보를 얻는 데 사용됩니다.

<button id = "cordovaDevice">CORDOVA DEVICE</button>

3 단계-이벤트 리스너 추가

Cordova 플러그인은 deviceready 이벤트 리스너를 onDeviceReady 기능 index.js.

document.getElementById("cordovaDevice").addEventListener("click", cordovaDevice);

4 단계-함수 생성

다음 기능은 플러그인이 제공하는 모든 가능성을 사용하는 방법을 보여줍니다. 우리는 그것을 넣을 것입니다index.js.

function cordovaDevice() {
   alert("Cordova version: " + device.cordova + "\n" +
      "Device model: " + device.model + "\n" +
      "Device platform: " + device.platform + "\n" +
      "Device UUID: " + device.uuid + "\n" +
      "Device version: " + device.version);
}

클릭하면 CORDOVA DEVICE 버튼을 누르면 경고에 Cordova 버전, 장치 모델, 플랫폼, UUID 및 장치 버전이 표시됩니다.

Accelerometer 플러그인은 device-motion. 3 차원에서 장치 동작을 추적하는 데 사용됩니다.

1 단계-가속도계 플러그인 설치

이 플러그인은 다음을 사용하여 설치합니다. cordova-CLI. 다음 코드를 입력하십시오.command prompt 창문.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-device-motion

2 단계-버튼 추가

이 단계에서는 두 개의 버튼을 index.html파일. 하나는 현재 가속도를 얻는 데 사용되고 다른 하나는 가속도 변화를 감시합니다.

<button id = "getAcceleration">GET ACCELERATION</button>
<button id = "watchAcceleration">WATCH ACCELERATION</button>

3 단계-이벤트 리스너 추가

이제 버튼에 대한 이벤트 리스너를 추가하겠습니다. onDeviceReady 내부 기능 index.js.

document.getElementById("getAcceleration").addEventListener("click", getAcceleration);
document.getElementById("watchAcceleration").addEventListener(
   "click", watchAcceleration);

4 단계-함수 생성

이제 두 개의 함수를 만들 것입니다. 첫 번째 기능은 현재 가속도를 가져 오는 데 사용되고 두 번째 기능은 가속을 감시하며 가속에 대한 정보는 3 초마다 트리거됩니다. 우리는 또한clearWatch 함수는 setTimeout지정된 시간 프레임 이후 가속 시청을 중지하는 기능입니다. 그만큼frequency 매개 변수는 3 초마다 콜백 함수를 트리거하는 데 사용됩니다.

function getAcceleration() {
   navigator.accelerometer.getCurrentAcceleration(
      accelerometerSuccess, accelerometerError);

   function accelerometerSuccess(acceleration) {
      alert('Acceleration X: ' + acceleration.x + '\n' +
         'Acceleration Y: ' + acceleration.y + '\n' +
         'Acceleration Z: ' + acceleration.z + '\n' +
         'Timestamp: '      + acceleration.timestamp + '\n');
   };

   function accelerometerError() {
      alert('onError!');
   };
}

function watchAcceleration() {
   var accelerometerOptions = {
      frequency: 3000
   }
   var watchID = navigator.accelerometer.watchAcceleration(
      accelerometerSuccess, accelerometerError, accelerometerOptions);

   function accelerometerSuccess(acceleration) {
      alert('Acceleration X: ' + acceleration.x + '\n' +
         'Acceleration Y: ' + acceleration.y + '\n' +
         'Acceleration Z: ' + acceleration.z + '\n' +
         'Timestamp: '      + acceleration.timestamp + '\n');

      setTimeout(function() {
         navigator.accelerometer.clearWatch(watchID);
      }, 10000);
   };

   function accelerometerError() {
      alert('onError!');
   };
	
}

이제 우리가 GET ACCELERATION버튼을 누르면 현재 가속도 값을 얻을 수 있습니다. 우리가 누르면WATCH ACCELERATION버튼을 누르면 경고가 3 초마다 트리거됩니다. 세 번째 경고가 표시되면clearWatch 함수가 호출되고 제한 시간을 10000 밀리 초로 설정했기 때문에 더 이상 경고를받지 않습니다.

나침반은 지리적 북쪽 추기경 지점에 상대적인 방향을 표시하는 데 사용됩니다.

1 단계-Device Orientation 플러그인 설치

열기 command prompt 창을 열고 다음을 실행하십시오.

C:\Users\username\Desktop\CordovaProject>cordova plugin 
   add cordova-plugindevice-orientation

2 단계-버튼 추가

이 플러그인은 acceleration플러그인. 이제 두 개의 버튼을index.html.

<button id = "getOrientation">GET ORIENTATION</button>
<button id = "watchOrientation">WATCH ORIENTATION</button>

3 단계-이벤트 리스너 추가

이제 우리는 event listeners 내부 onDeviceReady 기능 index.js.

document.getElementById("getOrientation").addEventListener("click", getOrientation);
document.getElementById("watchOrientation").addEventListener("click", watchOrientation);

4 단계-함수 생성

우리는 두 가지 기능을 만들 것입니다. 첫 번째 함수는 현재 가속을 생성하고 다른 함수는 방향 변경을 확인합니다. 우리가 사용하고 있음을 알 수 있습니다.frequency 옵션을 다시 선택하여 3 초마다 발생하는 변경 사항을 감시합니다.

function getOrientation() {
   navigator.compass.getCurrentHeading(compassSuccess, compassError);

   function compassSuccess(heading) {
      alert('Heading: ' + heading.magneticHeading);
   };

   function compassError(error) {
      alert('CompassError: ' + error.code);
   };
}

function watchOrientation(){
   var compassOptions = {
      frequency: 3000
   }
   var watchID = navigator.compass.watchHeading(compassSuccess, 
      compassError, compassOptions);

   function compassSuccess(heading) {
      alert('Heading: ' + heading.magneticHeading);

      setTimeout(function() {
         navigator.compass.clearWatch(watchID);
      }, 10000);
   };

   function compassError(error) {
      alert('CompassError: ' + error.code);
   };
}

나침반 플러그인은 가속 플러그인과 거의 동일하므로 이번에는 오류 코드를 보여 드리겠습니다. 일부 장치에는 나침반이 작동하는 데 필요한 자기 센서가 없습니다. 장치에없는 경우 다음 오류가 표시됩니다.

Cordova Dialogs 플러그인은 플랫폼 기본 대화 UI 요소를 호출합니다.

1 단계-설치 대화 상자

다음 명령을 입력하십시오. command prompt 이 플러그인을 설치하는 창.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-dialogs

2 단계-버튼 추가

이제 열자 index.html 모든 유형의 대화 상자에 하나씩 4 개의 버튼을 추가합니다.

<button id = "dialogAlert">ALERT</button>
<button id = "dialogConfirm">CONFIRM</button>
<button id = "dialogPrompt">PROMPT</button>
<button id = "dialogBeep">BEEP</button>

3 단계-이벤트 리스너 추가

이제 이벤트 리스너를 onDeviceReady 기능 index.js. 리스너는 해당 버튼을 클릭하면 콜백 함수를 호출합니다.

document.getElementById("dialogAlert").addEventListener("click", dialogAlert);
document.getElementById("dialogConfirm").addEventListener("click", dialogConfirm);
document.getElementById("dialogPrompt").addEventListener("click", dialogPrompt);
document.getElementById("dialogBeep").addEventListener("click", dialogBeep);

4A 단계-경고 기능 만들기

4 개의 이벤트 리스너를 추가 했으므로 이제 모든 리스너에 대한 콜백 함수를 생성합니다. index.js. 첫 번째는dialogAlert.

function dialogAlert() {
   var message = "I am Alert Dialog!";
   var title = "ALERT";
   var buttonName = "Alert Button";
   navigator.notification.alert(message, alertCallback, title, buttonName);
   
   function alertCallback() {
      console.log("Alert is Dismissed!");
   }
}

클릭하면 ALERT 버튼을 누르면 경고 대화 상자가 나타납니다.

대화 버튼을 클릭하면 다음 출력이 콘솔에 표시됩니다.

4B 단계-확인 기능 생성

우리가 만들어야하는 두 번째 함수는 dialogConfirm 함수.

function dialogConfirm() {
   var message = "Am I Confirm Dialog?";
   var title = "CONFIRM";
   var buttonLabels = "YES,NO";
   navigator.notification.confirm(message, confirmCallback, title, buttonLabels);

   function confirmCallback(buttonIndex) {
      console.log("You clicked " + buttonIndex + " button!");
   }
	
}

때 CONFIRM 버튼을 누르면 새 대화 상자가 나타납니다.

우리는 YES버튼을 눌러 질문에 답하십시오. 다음 출력이 콘솔에 표시됩니다.

4C 단계-프롬프트 기능 생성

세 번째 기능은 dialogPrompt함수. 이를 통해 사용자는 대화 상자 입력 요소에 텍스트를 입력 할 수 있습니다.

function dialogPrompt() {
   var message = "Am I Prompt Dialog?";
   var title = "PROMPT";
   var buttonLabels = ["YES","NO"];
   var defaultText = "Default"
   navigator.notification.prompt(message, promptCallback, 
      title, buttonLabels, defaultText);

   function promptCallback(result) {
      console.log("You clicked " + result.buttonIndex + " button! \n" + 
         "You entered " +  result.input1);
   }
	
}

그만큼 PROMPT 버튼은 다음 스크린 샷과 같은 대화 상자를 트리거합니다.

이 대화 상자에는 텍스트를 입력 할 수있는 옵션이 있습니다. 이 텍스트를 클릭 한 버튼과 함께 콘솔에 기록합니다.

4D 단계-경고음 기능 만들기

마지막 것은 dialogBeep함수. 이것은 오디오 비프 알림을 호출하는 데 사용됩니다. 그만큼times 파라미터는 신호음의 반복 횟수를 설정합니다.

function dialogBeep() {
   var times = 2;
   navigator.notification.beep(times);
}

클릭하면 BEEP 버튼을 누르면 알림 음이 두 번 들립니다. times 값이 2.

이 플러그인은 사용자 기기에서 기본 파일 시스템을 조작하는 데 사용됩니다.

1 단계-파일 플러그인 설치

다음 코드를 실행해야합니다. command prompt 이 플러그인을 설치합니다.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file

2 단계-버튼 추가

이 예에서는 파일 생성, 파일 쓰기, 읽기 및 삭제 방법을 보여줍니다. 이러한 이유로, 우리는index.html. 우리는 또한 추가 할 것입니다textarea 여기서 파일의 내용이 표시됩니다.

<button id = "createFile">CREATE FILE</button>
<button id = "writeFile">WRITE FILE</button>
<button id = "readFile">READ FILE</button>
<button id = "removeFile">DELETE FILE</button>
<textarea id = "textarea"></textarea>

3 단계-이벤트 리스너 추가

우리는 추가 할 것입니다 event listeners 에 index.js 내부 onDeviceReady 플러그인을 사용하기 전에 모든 것이 시작되었는지 확인하는 함수입니다.

document.getElementById("createFile").addEventListener("click", createFile);
document.getElementById("writeFile").addEventListener("click", writeFile);
document.getElementById("readFile").addEventListener("click", readFile);
document.getElementById("removeFile").addEventListener("click", removeFile);

4A 단계-파일 생성 기능

파일은 장치의 앱 루트 폴더에 생성됩니다. 루트 폴더에 액세스하려면 다음을 제공해야합니다.superuser폴더에 대한 액세스. 우리의 경우 루트 폴더의 경로는\data\data\com.example.hello\cache. 현재이 폴더는 비어 있습니다.

이제 log.txt 파일을 생성하는 함수를 추가하겠습니다. 이 코드를index.js파일 시스템에 요청을 보냅니다. 이 메서드는 WINDOW.TEMPORARY 또는 WINDOW.PERSISTENT를 사용합니다. 저장에 필요한 크기는 바이트 단위 (이 경우 5MB)입니다.

function createFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) {
         alert('File creation successfull!')
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
	
}

이제 우리는 CREATE FILE 버튼을 누르면 경고가 파일을 성공적으로 생성했음을 확인합니다.

이제 앱 루트 폴더를 다시 확인하고 거기에서 새 파일을 찾을 수 있습니다.

4B 단계-파일 쓰기 기능

이 단계에서는 파일에 텍스트를 작성합니다. 다시 파일 시스템에 요청을 보낸 다음 쓸 수있는 파일 작성기를 만듭니다.Lorem Ipsum 우리가 할당 한 텍스트 blob 변하기 쉬운.

function writeFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: true}, function(fileEntry) {

         fileEntry.createWriter(function(fileWriter) {
            fileWriter.onwriteend = function(e) {
               alert('Write completed.');
            };

            fileWriter.onerror = function(e) {
               alert('Write failed: ' + e.toString());
            };

            var blob = new Blob(['Lorem Ipsum'], {type: 'text/plain'});
            fileWriter.write(blob);
         }, errorCallback);
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}

누른 후 WRITE FILE 버튼을 누르면 다음 스크린 샷과 같이 쓰기가 성공했음을 알리는 경고가 표시됩니다.

이제 열 수 있습니다 log.txt 그리고 그것을보십시오 Lorem Ipsum 내부에 기록되어 있습니다.

4C 단계-파일 읽기 기능

이 단계에서는 log.txt 파일을 읽고 textarea요소. 파일 시스템에 요청을 보내고 파일 객체를 가져온 다음reader. 판독기가로드되면 반환 된 값을textarea.

function readFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {}, function(fileEntry) {

         fileEntry.file(function(file) {
            var reader = new FileReader();

            reader.onloadend = function(e) {
               var txtArea = document.getElementById('textarea');
               txtArea.value = this.result;
            };
            reader.readAsText(file);
         }, errorCallback);
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}

클릭하면 READ FILE 버튼을 누르면 파일의 텍스트가 내부에 기록됩니다. textarea.

4D 단계-파일 삭제 기능

마지막으로 삭제 기능을 생성합니다. log.txt 파일.

function removeFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: false}, function(fileEntry) {

         fileEntry.remove(function() {
            alert('File removed.');
         }, errorCallback);
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}

이제 DELETE FILE버튼을 눌러 앱 루트 폴더에서 파일을 제거합니다. 경고는 삭제 작업이 성공했음을 알려줍니다.

앱 루트 폴더를 확인하면 비어 있음을 알 수 있습니다.

이 플러그인은 파일 업로드 및 다운로드에 사용됩니다.

1 단계-파일 전송 플러그인 설치

우리는 열어야합니다 command prompt 다음 명령을 실행하여 플러그인을 설치하십시오.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file-transfer

2 단계-버튼 만들기

이 장에서는 파일을 업로드하고 다운로드하는 방법을 보여줍니다. 두 개의 버튼을 만들어 보겠습니다.index.html

<button id = "uploadFile">UPLOAD</button>
<button id = "downloadFile">DOWNLOAD</button>

3 단계-이벤트 리스너 추가

이벤트 리스너는 index.js 내부 onDeviceReady함수. 우리는 추가하고 있습니다click 이벤트 및 callback 기능.

document.getElementById("uploadFile").addEventListener("click", uploadFile);
document.getElementById("downloadFile").addEventListener("click", downloadFile);

4A 단계-다운로드 기능

이 기능은 서버에서 장치로 파일을 다운로드하는 데 사용됩니다. 파일을 업로드했습니다postimage.org더 간단하게 만들 수 있습니다. 자신의 서버를 사용하고 싶을 것입니다. 기능은index.js 해당 버튼을 누르면 트리거됩니다. uri 서버 다운로드 링크이고 fileURI 장치의 DCIM 폴더 경로입니다.

function downloadFile() {
   var fileTransfer = new FileTransfer();
   var uri = encodeURI("http://s14.postimg.org/i8qvaxyup/bitcoin1.jpg");
   var fileURL =  "///storage/emulated/0/DCIM/myFile";

   fileTransfer.download(
      uri, fileURL, function(entry) {
         console.log("download complete: " + entry.toURL());
      },
		
      function(error) {
         console.log("download error source " + error.source);
         console.log("download error target " + error.target);
         console.log("download error code" + error.code);
      },
		
      false, {
         headers: {
            "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
         }
      }
   );
}

일단 우리가 DOWNLOAD 버튼을 클릭하면 파일이 postimg.org모바일 장치에 서버. 지정된 폴더를 확인하고myFile 거기입니다.

콘솔 출력은 다음과 같습니다.

4B 단계-업로드 기능

이제 파일을 가져와 서버에 업로드하는 함수를 만들어 보겠습니다. 다시 말하지만, 우리는 이것을 가능한 한 단순화하고 싶습니다. 그래서 우리는posttestserver.com테스트를위한 온라인 서버. uri 값은 게시를 위해 링크됩니다.posttestserver.

function uploadFile() {
   var fileURL = "///storage/emulated/0/DCIM/myFile"
   var uri = encodeURI("http://posttestserver.com/post.php");
   var options = new FileUploadOptions();
   options.fileKey = "file";
   options.fileName = fileURL.substr(fileURL.lastIndexOf('/')+1);
   options.mimeType = "text/plain";
   
   var headers = {'headerParam':'headerValue'};
   options.headers = headers;
   var ft = new FileTransfer();
   ft.upload(fileURL, uri, onSuccess, onError, options);

   function onSuccess(r) {
      console.log("Code = " + r.responseCode);
      console.log("Response = " + r.response);
      console.log("Sent = " + r.bytesSent);
   }

   function onError(error) {
      alert("An error has occurred: Code = " + error.code);
      console.log("upload error source " + error.source);
      console.log("upload error target " + error.target);
   }
	
}

이제 우리는 UPLOAD버튼을 눌러이 기능을 트리거합니다. 업로드가 성공했다는 확인으로 콘솔 출력이 표시됩니다.

또한 서버에서 파일이 업로드되었는지 확인할 수도 있습니다.

위치 정보는 기기의 위도와 경도에 대한 정보를 얻는 데 사용됩니다.

1 단계-플러그인 설치

다음 코드를 입력하여이 플러그인을 설치할 수 있습니다. command prompt 창문.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-geolocation

2 단계-버튼 추가

이 튜토리얼에서는 현재 위치를 얻는 방법과 변경 사항을 확인하는 방법을 보여줍니다. 먼저 이러한 기능을 호출 할 버튼을 만들어야합니다.

<button id = "getPosition">CURRENT POSITION</button>
<button id = "watchPosition">WATCH POSITION</button>

3 단계-이벤트 리스너 추가

이제 장치가 준비되면 이벤트 리스너를 추가하려고합니다. 아래 코드 샘플을 추가하여onDeviceReady 기능 index.js.

document.getElementById("getPosition").addEventListener("click", getPosition);
document.getElementById("watchPosition").addEventListener("click", watchPosition);

3 단계-함수 생성

두 개의 이벤트 리스너에 대해 두 개의 함수를 생성해야합니다. 하나는 현재 위치를 얻는 데 사용되고 다른 하나는 위치를 보는 데 사용됩니다.

function getPosition() {
   var options = {
      enableHighAccuracy: true,
      maximumAge: 3600000
   }
   var watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError, options);

   function onSuccess(position) {
      alert('Latitude: '          + position.coords.latitude          + '\n' +
         'Longitude: '         + position.coords.longitude         + '\n' +
         'Altitude: '          + position.coords.altitude          + '\n' +
         'Accuracy: '          + position.coords.accuracy          + '\n' +
         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
         'Heading: '           + position.coords.heading           + '\n' +
         'Speed: '             + position.coords.speed             + '\n' +
         'Timestamp: '         + position.timestamp                + '\n');
   };

   function onError(error) {
      alert('code: '    + error.code    + '\n' + 'message: ' + error.message + '\n');
   }
}

function watchPosition() {
   var options = {
      maximumAge: 3600000,
      timeout: 3000,
      enableHighAccuracy: true,
   }
   var watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);

   function onSuccess(position) {
      alert('Latitude: '          + position.coords.latitude          + '\n' +
         'Longitude: '         + position.coords.longitude         + '\n' +
         'Altitude: '          + position.coords.altitude          + '\n' +
         'Accuracy: '          + position.coords.accuracy          + '\n' +
         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
         'Heading: '           + position.coords.heading           + '\n' +
         'Speed: '             + position.coords.speed             + '\n' +
         'Timestamp: '         + position.timestamp                + '\n');
   };

   function onError(error) {
      alert('code: '    + error.code    + '\n' +'message: ' + error.message + '\n');
   }
}

위의 예에서는 두 가지 방법을 사용합니다. getCurrentPosition 과 watchPosition. 두 기능 모두 세 가지 매개 변수를 사용합니다. 클릭하면CURRENT POSITION 버튼을 누르면 경고에 지리적 위치 값이 표시됩니다.

클릭하면 WATCH POSITION버튼을 누르면 동일한 경고가 3 초마다 트리거됩니다. 이렇게하면 사용자 기기의 움직임 변화를 추적 할 수 있습니다.

노트

이 플러그인은 GPS를 사용하고 있습니다. 때때로 시간에 값을 반환 할 수없고 요청이 시간 초과 오류를 반환합니다. 이것이 우리가 지정한 이유입니다enableHighAccuracy: true 과 maximumAge: 3600000.즉, 요청이 제 시간에 완료되지 않으면 마지막으로 알려진 값을 대신 사용합니다. 이 예에서는 maximumAge를 3600000 밀리 초로 설정합니다.

이 플러그인은 사용자의 로케일 언어, 날짜 및 시간대, 통화 등에 대한 정보를 얻는 데 사용됩니다.

1 단계-세계화 플러그인 설치

열다 command prompt 다음 코드를 입력하여 플러그인을 설치하십시오.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-globalization

2 단계-버튼 추가

몇 개의 버튼을 index.html 나중에 만들 다른 메서드를 호출 할 수 있습니다.

<button id = "getLanguage">LANGUAGE</button>
<button id = "getLocaleName">LOCALE NAME</button>
<button id = "getDate">DATE</button>
<button id = "getCurrency">CURRENCY</button>

3 단계-이벤트 리스너 추가

이벤트 리스너가 내부에 추가됩니다. getDeviceReady 기능 index.js 사용을 시작하기 전에 앱과 Cordova가로드되었는지 확인하십시오.

document.getElementById("getLanguage").addEventListener("click", getLanguage);
document.getElementById("getLocaleName").addEventListener("click", getLocaleName);
document.getElementById("getDate").addEventListener("click", getDate);
document.getElementById("getCurrency").addEventListener("click", getCurrency);

4A 단계-언어 기능

우리가 사용하는 첫 번째 함수는 클라이언트 장치의 BCP 47 언어 태그를 반환합니다. 우리는 사용할 것입니다getPreferredLanguage방법. 이 함수에는 onSuccess 및onError. 이 기능을index.js.

function getLanguage() {
   navigator.globalization.getPreferredLanguage(onSuccess, onError);

   function onSuccess(language) {
      alert('language: ' + language.value + '\n');
   }

   function onError(){
      alert('Error getting language');
   }
}

일단 우리가 LANGUAGE 버튼을 누르면 경고가 화면에 표시됩니다.

4B 단계-로케일 기능

이 함수는 클라이언트의 로컬 설정에 대한 BCP 47 태그를 반환합니다. 이 함수는 이전에 만든 함수와 비슷합니다. 유일한 차이점은 우리가getLocaleName 이번에는 방법.

function getLocaleName() {
   navigator.globalization.getLocaleName(onSuccess, onError);

   function onSuccess(locale) {
      alert('locale: ' + locale.value);
   }

   function onError(){
      alert('Error getting locale');
   }
}

클릭하면 LOCALE 버튼을 누르면 경고에 로케일 태그가 표시됩니다.

4C 단계-날짜 기능

이 기능은 클라이언트의 로케일 및 시간대 설정에 따라 날짜를 반환하는 데 사용됩니다. date 매개 변수는 현재 날짜이며 options 매개 변수는 선택 사항입니다.

function getDate() {
   var date = new Date();

   var options = {
      formatLength:'short',
      selector:'date and time'
   }
   navigator.globalization.dateToString(date, onSuccess, onError, options);

   function onSuccess(date) {
      alert('date: ' + date.value);
   }

   function onError(){
      alert('Error getting dateString');
   }
}

이제 앱을 실행하고 DATE 버튼을 눌러 현재 날짜를 확인하세요.

마지막으로 보여줄 기능은 클라이언트의 기기 설정과 ISO 4217 통화 코드에 따라 통화 값을 반환하는 것입니다. 개념이 동일하다는 것을 알 수 있습니다.

function getCurrency() {
   var currencyCode = 'EUR';
   navigator.globalization.getCurrencyPattern(currencyCode, onSuccess, onError);

   function onSuccess(pattern) {
      alert('pattern: '  + pattern.pattern  + '\n' +
         'code: '     + pattern.code     + '\n' +
         'fraction: ' + pattern.fraction + '\n' +
         'rounding: ' + pattern.rounding + '\n' +
         'decimal: '  + pattern.decimal  + '\n' +
         'grouping: ' + pattern.grouping);
   }

   function onError(){
      alert('Error getting pattern');
   }
}

그만큼 CURRENCY 버튼은 사용자에게 통화 패턴을 보여주는 경고를 트리거합니다.

이 플러그인은 다른 방법을 제공합니다. 아래 표에서 모두 볼 수 있습니다.

방법	매개 변수	세부
getPreferredLanguage	onSuccess, onError	클라이언트의 현재 언어를 반환합니다.
getLocaleName	onSuccess, onError	클라이언트의 현재 로케일 설정을 반환합니다.
dateToString	날짜, onSuccess, onError, 옵션	클라이언트의 로케일 및 시간대에 따라 날짜를 반환합니다.
stringToDate	dateString, onSuccess, onError, 옵션	클라이언트의 설정에 따라 날짜를 구문 분석합니다.
getCurrencyPattern	currencyCode, onSuccess, onError	클라이언트의 통화 패턴을 반환합니다.
getDatePattern	onSuccess, onError, 옵션	클라이언트의 날짜 패턴을 반환합니다.
getDateNames	onSuccess, onError, 옵션	클라이언트 설정에 따라 월, 주 또는 일의 이름 배열을 반환합니다.
isDayLightSavingsTime	date, successCallback, errorCallback	클라이언트의 시간대 및 달력에 따라 일광 절약 시간이 활성화되어 있는지 확인하는 데 사용됩니다.
getFirstDayOfWeek	onSuccess, onError	클라이언트 설정에 따라 요일을 반환합니다.
numberToString	number, onSuccess, onError, 옵션	클라이언트 설정에 따라 숫자를 반환합니다.
stringToNumber	문자열, onSuccess, onError, 옵션	클라이언트 설정에 따라 숫자를 구문 분석합니다.
getNumberPattern	onSuccess, onError, 옵션	클라이언트 설정에 따라 숫자 패턴을 반환합니다.

이 플러그인은 Cordova 앱 내에서 웹 브라우저를 여는 데 사용됩니다.

1 단계-플러그인 설치

이 플러그인을 다음 위치에 설치해야합니다. command prompt 창을 사용하기 전에

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-inappbrowser

2 단계-추가 버튼

여는 데 사용할 하나의 버튼을 추가합니다 inAppBrowser 창 index.html.

3 단계-이벤트 리스너 추가

이제 버튼에 대한 이벤트 리스너를 추가하겠습니다. onDeviceReady 기능 index.js.

document.getElementById("openBrowser").addEventListener("click", openBrowser);

4 단계-함수 생성

이 단계에서는 앱 내에서 브라우저를 여는 함수를 만듭니다. 우리는 그것을ref 나중에 이벤트 리스너를 추가하는 데 사용할 수있는 변수입니다.

function openBrowser() {
   var url = 'https://cordova.apache.org';
   var target = '_blank';
   var options = "location = yes"
   var ref = cordova.InAppBrowser.open(url, target, options);
   
   ref.addEventListener('loadstart', loadstartCallback);
   ref.addEventListener('loadstop', loadstopCallback);
   ref.addEventListener('loaderror', loaderrorCallback);
   ref.addEventListener('exit', exitCallback);

   function loadstartCallback(event) {
      console.log('Loading started: '  + event.url)
   }

   function loadstopCallback(event) {
      console.log('Loading finished: ' + event.url)
   }

   function loaderrorCallback(error) {
      console.log('Loading error: ' + error.message)
   }

   function exitCallback() {
      console.log('Browser is closed...')
   }
}

우리가 누르면 BROWSER 버튼을 누르면 화면에 다음과 같은 출력이 표시됩니다.

콘솔도 이벤트를 수신합니다. loadstart URL이로드되기 시작하면 이벤트가 발생하고 loadstopURL이로드되면 실행됩니다. 콘솔에서 볼 수 있습니다.

브라우저를 닫으면 exit 이벤트가 발생합니다.

InAppBrowser 창에는 다른 가능한 옵션이 있습니다. 아래 표에서 설명하겠습니다.

S. 아니	옵션 및 세부 정보
1	location 브라우저 위치 표시 줄을 켜거나 끄는 데 사용됩니다. 가치는yes 또는 no.
2	hidden inAppBrowser를 숨기거나 표시하는 데 사용됩니다. 가치는yes 또는 no.
삼	clearCache 브라우저 쿠키 캐시를 지우는 데 사용됩니다. 가치는yes 또는 no.
4	clearsessioncache 세션 쿠키 캐시를 지우는 데 사용됩니다. 가치는yes 또는 no.
5	zoom Android 브라우저의 확대 / 축소 컨트롤을 숨기거나 표시하는 데 사용됩니다. 가치는yes 또는 no.
6	hardwareback yes 하드웨어 뒤로 버튼을 사용하여 브라우저 기록을 다시 탐색합니다. no 뒤로 버튼을 클릭하면 브라우저를 닫습니다.

우리는 사용할 수 있습니다 ref(참조) 다른 기능에 대한 변수. 이에 대한 간단한 예를 보여 드리겠습니다. 이벤트 리스너를 제거하려면 다음을 사용할 수 있습니다.

ref.removeEventListener(eventname, callback);

InAppBrowser를 닫으려면 다음을 사용할 수 있습니다.

ref.close();

숨겨진 창을 열면 표시 할 수 있습니다.

ref.show();

JavaScript 코드도 InAppBrowser에 삽입 할 수 있습니다.

var details = "javascript/file/url"
ref.executeScript(details, callback);

동일한 개념이 CSS 주입에 사용될 수 있습니다.

var details = "css/file/url"
ref.inserCSS(details, callback);

Cordova 미디어 플러그인은 Cordova 앱에서 오디오 사운드를 녹음하고 재생하는 데 사용됩니다.

1 단계-미디어 플러그인 설치

미디어 플러그인은 다음 코드를 실행하여 설치할 수 있습니다. command prompt 창문.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-media

2 단계-버튼 추가

이 튜토리얼에서는 간단한 오디오 플레이어를 만들 것입니다. 필요한 버튼을 만들어 보겠습니다.index.html.

<button id = "playAudio">PLAY</button>
<button id = "pauseAudio">PAUSE</button>
<button id = "stopAudio">STOP</button>
<button id = "volumeUp">VOLUME UP</button>
<button id = "volumeDown">VOLUME DOWN</button>

3 단계-이벤트 리스너 추가

이제 버튼에 이벤트 리스너를 추가해야합니다. onDeviceReady 내부 기능 index.js.

document.getElementById("playAudio").addEventListener("click", playAudio);
document.getElementById("pauseAudio").addEventListener("click", pauseAudio);
document.getElementById("stopAudio").addEventListener("click", stopAudio);
document.getElementById("volumeUp").addEventListener("click", volumeUp);
document.getElementById("volumeDown").addEventListener("click", volumeDown);

4A 단계-플레이 기능

추가 할 첫 번째 기능은 playAudio. 우리는 정의하고 있습니다myMedia나중에 추가 될 함수 (일시 중지, 중지, volumeUp 및 volumeDown)에서 사용하기를 원하기 때문에 함수 외부에 있습니다. 이 코드는index.js 파일.

var myMedia = null;
function playAudio() {
   var src = "/android_asset/www/audio/piano.mp3";

   if(myMedia === null) {
      myMedia = new Media(src, onSuccess, onError);

      function onSuccess() {
         console.log("playAudio Success");
      }

      function onError(error) {
         console.log("playAudio Error: " + error.code);
      }
   }
   myMedia.play();
}

클릭 할 수 있습니다 PLAY 버튼에서 피아노 음악을 시작합니다. src 통로.

4B 단계-기능 일시 중지 및 중지

다음으로 필요한 기능은 pauseAudio 과 stopAudio.

function pauseAudio() {
   if(myMedia) {
      myMedia.pause();
   }
}

function stopAudio() {
   if(myMedia) {
      myMedia.stop(); 
   }
   myMedia = null;
}

이제 클릭하여 피아노 사운드를 일시 중지하거나 중지 할 수 있습니다. PAUSE 또는 STOP 버튼.

4C 단계-볼륨 함수

볼륨을 설정하려면 setVolume방법. 이 메서드는0 ...에 1. 시작 값을0.5.

var volumeValue = 0.5;
function volumeUp() {
   if(myMedia && volumeValue < 1) {
      myMedia.setVolume(volumeValue += 0.1);
   }
}

function volumeDown() {
   if(myMedia && volumeValue > 0) {
      myMedia.setVolume(volumeValue -= 0.1);
   }
}

우리가 누르면 VOLUME UP 또는 VOLUME DOWN 볼륨 값을 다음과 같이 변경할 수 있습니다. 0.1.

다음 표는이 플러그인이 제공하는 다른 방법을 보여줍니다.

S. 아니	방법 및 세부 사항
1	getCurrentPosition 오디오의 현재 위치를 반환합니다.
2	getDuration 오디오의 길이를 반환합니다.
삼	play 오디오를 시작하거나 다시 시작하는 데 사용됩니다.
4	pause 오디오를 일시 중지하는 데 사용됩니다.
5	release 기본 운영 체제의 오디오 리소스를 해제합니다.
6	seekTo 오디오 위치 변경에 사용됩니다.
7	setVolume 오디오 볼륨 설정에 사용됩니다.
8	startRecord 오디오 파일 녹음을 시작합니다.
9	stopRecord 오디오 파일 녹음을 중지합니다.
10	stop 오디오 파일 재생을 중지합니다.

이 플러그인은 장치의 캡처 옵션에 액세스하는 데 사용됩니다.

1 단계-미디어 캡처 플러그인 설치

이 플러그인을 설치하려면 command prompt 다음 코드를 실행하십시오-

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-media-capture

2 단계-버튼 추가

오디오, 이미지 및 비디오를 캡처하는 방법을 보여 드리고자하므로 index.html.

<button id = "audioCapture">AUDIO</button>
<button id = "imageCapture">IMAGE</button>
<button id = "videoCapture">VIDEO</button>

3 단계-이벤트 리스너 추가

다음 단계는 내부에 이벤트 리스너를 추가하는 것입니다. onDeviceReady 에 index.js.

document.getElementById("audioCapture").addEventListener("click", audioCapture);
document.getElementById("imageCapture").addEventListener("click", imageCapture);
document.getElementById("videoCapture").addEventListener("click", videoCapture);

4A 단계-오디오 캡처 기능

첫 번째 콜백 함수 index.js 이다 audioCapture. 녹음기를 시작하려면captureAudio방법. 우리는 두 가지 옵션을 사용하고 있습니다.limit 단일 캡처 작업 당 하나의 오디오 클립 만 녹음 할 수 있으며 duration 사운드 클립의 시간 (초)입니다.

function audioCapture() {
   var options = {
      limit: 1,
      duration: 10
   };
   navigator.device.capture.captureAudio(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

우리가 누를 때 AUDIO 버튼을 누르면 녹음기가 열립니다.

콘솔은 사용자가 캡처 한 개체의 반환 된 배열을 표시합니다.

4B 단계-이미지 캡처 기능

이미지 캡처 기능은 마지막 이미지와 동일합니다. 유일한 차이점은 우리가captureImage 이번에는 방법.

function imageCapture() {
   var options = {
      limit: 1
   };
   navigator.device.capture.captureImage(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

이제 우리는 IMAGE 버튼을 눌러 카메라를 시작합니다.

사진을 찍을 때 콘솔은 이미지 객체로 배열을 기록합니다.

4C 단계-비디오 캡처 기능

비디오 캡처에 대해서도 동일한 개념을 반복 해 보겠습니다. 우리는 사용할 것입니다videoCapture 이번에는 방법.

function videoCapture() {
   var options = {
      limit: 1,
      duration: 10
   };
   navigator.device.capture.captureVideo(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

우리가 누르면 VIDEO 버튼을 누르면 카메라가 열리고 비디오를 녹화 할 수 있습니다.

비디오가 저장되면 콘솔은 배열을 다시 한 번 반환합니다. 이번에는 비디오 개체가 내부에 있습니다.

이 플러그인은 장치의 네트워크에 대한 정보를 제공합니다.

1 단계-네트워크 정보 플러그인 설치

이 플러그인을 설치하려면 command prompt 다음 코드를 실행하십시오-

C:\Users\username\Desktop\CordovaProject>cordova plugin 
   add cordova-plugin-network-information

2 단계-버튼 추가

버튼 하나를 만들어 보겠습니다. index.html 네트워크에 대한 정보를 얻는 데 사용됩니다.

<button id = "networkInfo">INFO</button>

3 단계-이벤트 리스너 추가

내부에 3 개의 이벤트 리스너를 추가합니다. onDeviceReady 기능 index.js. 하나는 이전에 만든 버튼의 클릭을 수신하고 다른 두 개는 연결 상태의 변경을 수신합니다.

document.getElementById("networkInfo").addEventListener("click", networkInfo);
document.addEventListener("offline", onOffline, false);
document.addEventListener("online", onOnline, false);

4 단계-함수 생성

networkInfo버튼을 클릭하면 기능은 현재 네트워크 연결에 대한 정보를 반환합니다. 우리는 전화하고 있습니다type방법. 다른 기능은onOffline 과 onOnline. 이러한 기능은 연결 변경을 수신하고 있으며 변경하면 해당 경고 메시지가 트리거됩니다.

function networkInfo() {
   var networkState = navigator.connection.type;
   var states = {};
   states[Connection.UNKNOWN]  = 'Unknown connection';
   states[Connection.ETHERNET] = 'Ethernet connection';
   states[Connection.WIFI]     = 'WiFi connection';
   states[Connection.CELL_2G]  = 'Cell 2G connection';
   states[Connection.CELL_3G]  = 'Cell 3G connection';
   states[Connection.CELL_4G]  = 'Cell 4G connection';
   states[Connection.CELL]     = 'Cell generic connection';
   states[Connection.NONE]     = 'No network connection';
   alert('Connection type: ' + states[networkState]);
}

function onOffline() {
   alert('You are now offline!');
}

function onOnline() {
   alert('You are now online!');
}

네트워크에 연결된 앱을 시작하면 onOnline 기능은 경고를 트리거합니다.

우리가 누르면 INFO 버튼을 누르면 네트워크 상태가 표시됩니다.

네트워크 연결이 끊어지면 onOffline 함수가 호출됩니다.

이 플러그인은 애플리케이션 실행시 스플래시 화면을 표시하는 데 사용됩니다.

1 단계-스플래시 화면 플러그인 설치

스플래시 화면 플러그인은 다음 위치에 설치할 수 있습니다. command prompt 다음 코드를 실행하여 창.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-splashscreen

2 단계-스플래시 화면 추가

스플래시 화면을 추가하는 것은 다른 Cordova 플러그인을 추가하는 것과 다릅니다. 우리는 열어야합니다config.xml 다음 코드 스 니펫을 widget 요소.

첫 번째 스 니펫은 SplashScreen. 그것은 가지고있다value 이미지의 이름 인 속성 platform/android/res/drawable-폴더. Cordova는 기본값을 제공합니다.screen.png이 예제에서 사용하고있는 이미지이지만 사용자 고유의 이미지를 추가하고 싶을 것입니다. 중요한 것은 세로 및 가로보기 용 이미지를 추가하고 다양한 화면 크기를 처리하는 것입니다.

<preference name = "SplashScreen" value = "screen" />

추가해야하는 두 번째 스 니펫은 SplashScreenDelay. 우리는 설정하고 있습니다value ...에 3000 3 초 후에 시작 화면을 숨 깁니다.

<preference name = "SplashScreenDelay" value = "3000" />

마지막 기본 설정은 선택 사항입니다. 값이 다음으로 설정된 경우true, 이미지가 화면에 맞게 늘어나지 않습니다. 설정되어있는 경우false, 늘어납니다.

<preference name = "SplashMaintainAspectRatio" value = "true" />

이제 앱을 실행하면 스플래시 화면이 표시됩니다.

이 플러그인은 장치의 진동 기능에 연결하는 데 사용됩니다.

1 단계-Vibration 플러그인 설치

이 플러그인을 다음 위치에 설치할 수 있습니다. command prompt 다음 코드를 실행하여 창-

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-vibration

2 단계-버튼 추가

플러그인이 설치되면 버튼을 추가 할 수 있습니다. index.html 나중에 진동을 유발하는 데 사용됩니다.

<button id = "vibration">VIBRATION</button>
<button id = "vibrationPattern">PATTERN</button>

3 단계-이벤트 리스너 추가

이제 이벤트 리스너를 내부에 추가하겠습니다. onDeviceReady 에 index.js.

document.getElementById("vibration").addEventListener("click", vibration);
document.getElementById("vibrationPattern").addEventListener("click", vibrationPattern);

4 단계-함수 생성

이 플러그인은 사용하기 매우 쉽습니다. 우리는 두 가지 기능을 만들 것입니다.

function vibration() {
   var time = 3000;
   navigator.vibrate(time);
}

function vibrationPattern() {
   var pattern = [1000, 1000, 1000, 1000];
   navigator.vibrate(pattern);
}

첫 번째 기능은 시간 매개 변수를 취하는 것입니다. 이 매개 변수는 진동 지속 시간을 설정하는 데 사용됩니다. 버튼을 누르면 기기가 3 초 동안 진동합니다.VIBRATION 단추.

두 번째 기능은 pattern매개 변수. 이 어레이는 장치가 1 초 동안 진동하도록 요청한 다음 1 초 동안 기다린 다음 프로세스를 다시 반복합니다.

이 플러그인을 통해 앱 탐색에 대한 화이트리스트 정책을 구현할 수 있습니다. 새로운 Cordova 프로젝트를 생성하면whitelist플러그인은 기본적으로 설치 및 구현됩니다. 당신은 열 수 있습니다config.xml 볼 파일 allow-intent Cordova에서 제공하는 기본 설정.

탐색 허용 목록

아래의 간단한 예에서는 일부 외부 URL에 대한 링크를 허용합니다. 이 코드는config.xml. 탐색file:// URL은 기본적으로 허용됩니다.

<allow-navigation href = "http://example.com/*" />

별표 기호 *는 여러 값을 탐색하는 데 사용됩니다. 위의 예에서는 모든 하위 도메인에 대한 탐색을 허용합니다.example.com. 프로토콜이나 호스트 접두사에도 동일하게 적용될 수 있습니다.

<allow-navigation href = "*://*.example.com/*" />

의도 화이트리스트

또한 있습니다 allow-intent시스템을 열 수있는 URL을 지정하는 데 사용되는 요소입니다. 당신은에서 볼 수 있습니다config.xml Cordova는 이미 우리에게 필요한 대부분의 링크를 허용했습니다.

네트워크 요청 화이트리스트

내부를 볼 때 config.xml 파일, 있습니다 <access origin="*" />요소. 이 요소는 Cordova 후크를 통해 앱에 대한 모든 네트워크 요청을 허용합니다. 특정 요청 만 허용하려면 config.xml에서 삭제하고 직접 설정할 수 있습니다.

이전 예에서와 동일한 원칙이 사용됩니다.

<access origin = "http://example.com" />

이것은 모든 네트워크 요청을 허용합니다 http://example.com.

콘텐츠 보안 정책

내 앱에 대한 현재 보안 정책을 볼 수 있습니다. head 요소 index.html.

<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 *">

이것이 기본 구성입니다. 동일한 출처의 모든 것을 허용하고example.com, 다음을 사용할 수 있습니다-

<meta http-equiv = "Content-Security-Policy" content = "default-src 'self' foo.com">

모든 것을 허용 할 수도 있지만 CSS와 JavaScript를 동일한 출처로 제한하십시오.

<meta http-equiv = "Content-Security-Policy" content = "default-src *; 
   style-src 'self' 'unsafe-inline'; script-src 'self' 
   'unsafe-inline' 'unsafe-eval'">

초보자 용 튜토리얼이므로 기본 Cordova 옵션을 권장합니다. Cordova에 익숙해지면 다른 값을 시도해 볼 수 있습니다.

Cordova는 하이브리드 모바일 앱을 만드는 데 사용되므로 프로젝트에 선택하기 전에이 점을 고려해야합니다. 다음은 Cordova 앱 개발을위한 모범 사례입니다.

단일 페이지 앱

이것은 모든 Cordova 앱에 권장되는 디자인입니다. SPA는 단일 페이지 (일반적으로index.html). 라우팅은 AJAX를 통해 처리됩니다. 튜토리얼을 따라했다면 거의 모든 Cordova 플러그인이 장치가 준비 될 때까지 기다려야 사용할 수 있음을 알 수 있습니다. SPA 디자인은 로딩 속도와 전반적인 성능을 향상시킵니다.

터치 이벤트

Cordova는 모바일 세계에 사용되기 때문에 사용하는 것이 당연합니다. touchstart 과 touchend 대신 이벤트 click이벤트. 클릭 이벤트에는 300ms 지연이 있으므로 클릭이 기본적으로 느껴지지 않습니다. 반면 터치 이벤트는 모든 플랫폼에서 지원되지 않습니다. 무엇을 사용할지 결정하기 전에이 점을 고려해야합니다.

애니메이션

항상 하드웨어 가속을 사용해야합니다. CSS Transitions 자바 스크립트 애니메이션 대신 모바일 기기에서 더 잘 작동 할 것입니다.

저장

가능한 한 스토리지 캐싱을 사용하십시오. 모바일 네트워크 연결은 일반적으로 좋지 않으므로 앱 내부의 네트워크 호출을 최소화해야합니다. 사용자의 기기가 오프라인 일 때도 있으므로 앱의 오프라인 상태도 처리해야합니다.

스크롤

대부분의 경우 앱의 첫 번째 느린 부분은 스크롤링 목록입니다. 앱의 스크롤 성능을 향상시키는 몇 가지 방법이 있습니다. 기본 스크롤링을 사용하는 것이 좋습니다. 목록에 항목이 많으면 부분적으로로드해야합니다. 필요한 경우 로더를 사용하십시오.

이미지

이미지로 인해 모바일 앱이 느려질 수도 있습니다. 가능하면 CSS 이미지 스프라이트를 사용해야합니다. 크기를 조정하는 대신 이미지를 완벽하게 맞추십시오.

CSS 스타일

그림자와 그라디언트는 페이지의 렌더링 시간을 늦추므로 피해야합니다.

단순화

브라우저의 DOM은 느리므로 DOM 조작과 DOM 요소 수를 최소화해야합니다.

테스팅

가능한 한 많은 기기 및 운영 체제 버전에서 앱을 테스트해야합니다. 앱이 한 기기에서 완벽하게 작동한다고해서 다른 기기 나 플랫폼에서도 작동한다는 의미는 아닙니다.