Apache Cordova 시작

중요

Visual Studio App Center는 2025년 3월 31일에 사용 중지될 예정입니다. Visual Studio App Center가 완전히 사용 중지될 때까지 계속 사용할 수 있지만 마이그레이션을 고려할 수 있는 몇 가지 권장 대안이 있습니다.

지원 타임라인 및 대안에 대해 자세히 알아보세요.

• Android
• iOS
• iOS 확장
• React Native
• MAUI/Xamarin
• UWP
• WPF/WinForms
• Unity
• macOS
• macOS 확장
• tvOS
• Cordova

참고

Cordova 앱에 대한 지원은 2022년 4월에 종료되었습니다. 자세한 내용은 App Center 블로그를 참조하세요.

App Center SDK는 모듈식 아키텍처를 사용하므로 Apache Cordova 애플리케이션에서 App Center 서비스를 하나, 여러 개 또는 모두 쉽게 사용할 수 있습니다.

이 문서에서는 Apache Cordova 애플리케이션에 App Center SDK를 추가한 다음, 애플리케이션에서 App Center 분석 및 App Center 크래시 기능을 구성하는 방법을 알아봅니다.

1. 사전 요구 사항

시작하기 전에 Apache Cordova 애플리케이션 프로젝트가 다음 최소 요구 사항을 충족하는지 확인합니다.

• Cordova CLI 6.4.0 이상
• cordova-android 엔진 5.0.0 이상
• cordova-ios 엔진 4.3.0 이상

Cordova CLI 버전을 확인하려면 터미널 창 또는 Windows 명령 프롬프트를 열고 다음 명령을 실행합니다.

cordova -v

및 버전을 확인 cordova-android 하려면 프로젝트의 config.xml 파일을 열려면 아래 표시된 요소에 정의된 플랫폼 엔진을 engine 찾을 수 있습니다.cordova-ios

<engine name="android" spec="~6.2.3" />
<engine name="ios" spec="~4.4.0" />

CocoaPods도 설치되어 있어야 합니다. 이를 위해 를 실행합니다. sudo gem install cocoapodspod setup

2. App Center 앱 비밀 가져오기

App Center SDK가 App Center의 애플리케이션 프로젝트와 연결하려면 SDK에 App Center 프로젝트의 앱 암호가 필요합니다. 나중에 이 값으로 App Center Apache Cordova SDK를 구성하는 방법을 알아보지만 지금은 찾을 위치를 확인할 수 있습니다.

기존 App Center 애플리케이션 프로젝트가 있는 경우 App Center 대시보드에 액세스하고 프로젝트를 엽니다. 애플리케이션 프로젝트의 설정 페이지에서 앱 비밀을 사용할 수도 있습니다. 페이지의 오른쪽 위 모서리에 있는 메뉴에 액세스한 다음 앱 비밀 복사를 선택하여 앱 비밀을 클립보드에 복사합니다.

App Center 대시보드에 만든 애플리케이션이 없는 경우 다음 단계를 완료합니다.

1. App Center 계정에 등록하거나 의 기존 App Center 계정에 https://appcenter.ms로그인합니다.
2. App Center 대시보드의 페이지 오른쪽 위 모서리에 있는 새 추가 드롭다운을 클릭합니다. 메뉴에서 새 앱 추가 를 선택합니다.
3. 필요에 따라 선택적 설명을 추가하여 애플리케이션 프로젝트의 이름을 입력합니다.
4. 애플리케이션 프로젝트에 적합한 OS(Android 또는 iOS에만 해당)를 선택한 다음 Cordova 플랫폼 옵션을 선택합니다.
5. 페이지의 오른쪽 아래 모서리에서 새 앱 추가 단추를 클릭합니다.
6. 애플리케이션 프로젝트의 설정 페이지에서 앱 비밀을 찾습니다. 페이지의 오른쪽 위 모서리에 있는 메뉴에 액세스한 다음 앱 비밀 복사 항목을 선택하여 앱 비밀을 클립보드에 복사합니다.

3. 프로젝트에 App Center SDK 추가

SDK 설치

Apache Cordova 프로젝트의 경우 SDK는 표준 Apache Cordova 플러그 인을 통해 배포됩니다. 이 섹션에 제공된 지침을 사용하여 Cordova 프로젝트에 App Center SDK를 추가합니다. 먼저 터미널 창 또는 Windows 명령 프롬프트를 열고 Cordova 프로젝트의 루트 폴더로 이동합니다.

App Center Analytics에 대한 지원을 프로젝트에 추가하려면 다음 명령을 실행합니다.

cordova plugin add cordova-plugin-appcenter-analytics

App Center 크래시 지원을 프로젝트에 추가하려면 다음 명령을 실행합니다.

cordova plugin add cordova-plugin-appcenter-crashes

하나의 명령으로 모든 App Center 기능에 대한 플러그 인을 프로젝트에 추가하려면 다음 명령을 실행합니다.

cordova plugin add cordova-plugin-appcenter-analytics cordova-plugin-appcenter-crashes

참고

App Center를 사용하는 대부분의 앱에서 cordova-plugin-appcenter-analytics 및 cordova-plugin-appcenter-crashes를 추가해야 합니다. 추가 설정 또는 코딩 없이 개발자에게 유용한 정보를 제공합니다.

플러그 인 구성

앱 비밀

Apache Cordova 프로젝트에서 App Center SDK를 사용하려면 먼저 App Center 프로젝트 앱 비밀로 프로젝트를 구성해야 합니다.

Apache Cordova 프로젝트의 config.xml 파일을 엽니다. Apache Cordova 프로젝트의 각 대상 platform 요소(현재 Android 및 iOS만 해당)에 대해 다음 형식의 자식 preference 요소를 추가합니다.

<preference name="APP_SECRET" value="0000-0000-0000-0000-000000000000" />

이 예제에서는 값이 인 특성과 namevalue 예제에 표시된 값APP_SECRET이 있는 특성을 사용하여 요소를 추가합니다. 0000-0000-0000-0000-000000000000 여기서 예제에 표시된 는 App Center 프로젝트 앱 비밀의 임의 표현입니다. 예제에 표시된 앱 비밀을 App Center 프로젝트의 실제 앱 비밀로 바꿉니다.

전체 예제로 Android 및 iOS 대상을 모두 지원하는 Apache Cordova 프로젝트의 경우 App Center에 별도의 앱 프로젝트 정의가 있으므로 각 대상 플랫폼에 대해 서로 다른 앱 비밀 값이 있습니다. 프로젝트 config.xml 파일의 관련 섹션은 다음과 같습니다.

<platform name="android">
   <preference name="APP_SECRET" value="0000-0000-0000-0000-000000000001" />
</platform>
<platform name="ios">
   <preference name="APP_SECRET" value="0000-0000-0000-0000-000000000002" />
</platform>

참고

이 예제에서는 실제 앱 비밀 값을 표시하지 않습니다. 이는 단지 모형일 뿐이므로 App Center 프로젝트의 앱 비밀을 잡고 여기에서 사용해야 합니다. 앱 비밀은 App Center에서 Android 및 iOS 애플리케이션 프로젝트에 대한 고유한 비밀을 갖기 때문에 다릅니다.

분석 기본 설정

앱에서 App Center Analytics를 사용하는 경우 수행할 몇 가지 추가 구성 단계가 있습니다. 편집기에서 Apache Cordova 프로젝트의 config.xml 파일을 열고 다음 preferences 요소 중 하나 이상을 파일에 추가합니다.

• APPCENTER_ANALYTICS_ENABLE_IN_JS - (선택 사항, 기본값은 false) 분석이 자동으로 사용되는지 여부를 제어합니다. 이면 false분석이 기본적으로 사용하도록 설정됩니다. 인 경우 true애플리케이션은 App Center로 데이터를 보내기 전에 JavaScript 코드에서 를 호출 AppCenter.Analytics.setEnabled(true) 하여 분석을 사용하도록 설정해야 합니다. 이 기본 설정은 애플리케이션 내에서 사용하도록 설정하기 전에 사용자에게 분석 정보를 공유할지 여부를 묻는 경우에 유용합니다. 사용자 이벤트를 수동으로 보내는 방법에 대해 자세히 알아봅니다.

  예제:

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

• APPCENTER_CRASHES_ALWAYS_SEND - (선택 사항, 기본값은 true) 앱이 충돌할 때 크래시 보고서가 App Center로 자동으로 전송되는지 여부를 지정합니다. 크래시 보고서를 자동으로 보낼 때 모든 충돌이 보고되어 엔지니어링 및 지원 팀이 압도될 수 있습니다. 크래시 보고서를 수동으로 보낼 때(로 설정 APPCENTER_CRASHES_ALWAYS_SENDfalse) 애플리케이션 내의 코드는 크래시를 심사하고 크래시 보고서가 App Center로 전송되는 시기, 보고서에 포함된 데이터 등을 결정할 수 있습니다. 즉, 개발자에게 더 많은 작업이 필요하지만 사용자 개인 정보를 보다 잘 제어할 수 있으며 크래시 보고서와 함께 메시지를 첨부할 수 있습니다. JS에서 크래시 보고서 처리에 대해 자세히 알아봅니다.

  예제:

  <preference name="APPCENTER_CRASHES_ALWAYS_SEND" value="false" />
  

  자동 백업을 사용하여 디바이스에 대한 잘못된 정보를 가져오지 않도록 하는 경우 다음 단계를 수행합니다.

참고

Android 6.0(API 수준 23) 이상을 대상으로 하는 앱은 자동 백업을 자동으로 사용하도록 설정됩니다. 

참고

백업 규칙이 있는 사용자 지정 파일이 이미 있는 경우 세 번째 단계로 전환합니다.

a. res/xml 폴더에 appcenter_backup_rule.xml 파일을 만듭니다.

<resource-file src="appcenter_backup_rule.xml" target="res/xml/appcenter_backup_rule.xml" />

b. 특성을 AndroidManifest.xml 파일 내의 요소에 <application> 추가하려면 android:fullBackupContent 앱의 config.xml 파일에 다음 줄을 추가합니다.

<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
     <application android:fullBackupContent="@xml/appcenter_backup_rule" />
</edit-config>
 ```

c. Add the following backup rules to the **appcenter_backup_rule.xml** file:

```xml
<full-backup-content xmlns:tools="http://schemas.android.com/tools">
   <exclude domain="sharedpref" path="AppCenter.xml"/>
   <exclude domain="database" path="com.microsoft.appcenter.persistence"/>
   <exclude domain="database" path="com.microsoft.appcenter.persistence-journal"/>
   <exclude domain="file" path="error" tools:ignore="FullBackupContent"/>
   <exclude domain="file" path="appcenter" tools:ignore="FullBackupContent"/>
</full-backup-content>

4. 다음에 어디로 가야 할까요?

포털에서 SDK에서 자동으로 수집한 분석 및 크래시 데이터를 시각화할 수 있습니다. 추가 설정이 필요하지 않습니다. App Center에서 수행할 수 있는 작업을 알아보려면 API 가이드 및 연습에 대한 분석 및 충돌 섹션을 참조하세요.