모바일에서 Chrome 앱을 실행하기 위한 도구 모음은 초기 개발자 미리보기에 있습니다. 주저하지 말고 GitHub Issue Tracker, Chrome 앱 개발자 포럼을 사용하여 의견을 보내 주세요. Stack Overflow 또는 Google+ 개발자 페이지를 참고하세요.
개요
Apache 기반의 도구 모음을 통해 Android와 iOS에서 Chrome 앱을 실행할 수 있습니다. Cordova: 네이티브 광고로 모바일 앱을 빌드하기 위한 오픈소스 모바일 개발 프레임워크입니다. HTML, CSS 및 JavaScript를 사용하여 ML 모델을 빌드하는 실습을 수행했습니다.
Apache Cordova는 네이티브 애플리케이션 셸로 애플리케이션의 웹 코드를 래핑하여
Google Play 및/또는 Apple App Store를 통해 하이브리드 웹 앱을 배포할 수 있습니다. Apache Cordova 사용
기존 Chrome 앱에서 cca (c ordova c hrome a pp) 명령줄을 사용합니다.
있습니다.
추가 리소스
- Cordova를 사용하여 개발할 때 염두에 두어야 할 몇 가지 특별한 고려사항이 있습니다. 고려사항 섹션에 나와 있습니다.
- 모바일에서 지원되는 Chrome API를 보려면 API 상태 페이지를 방문하세요.
- 도구 모음 없이 Android 기기에서 Chrome 앱을 미리 보려면 Chrome 앱 개발자 도구 (ADT).
이제 시작해 볼까요?
1단계: 개발 도구 설치하기
모바일용 Chrome 앱 도구 모음은 iOS 6 이상 및 Android 4.x 이상을 대상으로 할 수 있습니다.
모든 플랫폼의 개발 종속 항목
npm를 사용하는 Node.js 버전 0.10.0 이상이 필요합니다.- Windows: 다음 위치에서 다운로드할 수 있는 설치 실행 파일을 사용하여 Node.js를 설치합니다. nodejs.org.
- OS X 또는 Linux: nodejs.org에서 설치 실행 파일도 다운로드할 수 있습니다. 만약 루트 액세스의 필요성을 피하려면 nvm을 통해 설치하는 것이 더 편리할 수 있습니다. 예:
curl https://raw.github.com/creationix/nvm/master/install.sh | sh source ~/.bash_profile || source ~/.profile || source ~/.bashrc nvm install 0.10 nvm alias default 0.10
Android 타겟팅
Android용 애플리케이션을 개발할 때는 다음 항목도 설치해야 합니다.
- Java JDK 7 이상
- Android SDK 버전 4.4.2 이상
<ph type="x-smartling-placeholder">
- </ph>
- Android ADT 번들과 함께 제공되는 Android SDK 및 Android 개발자 도구를 설치합니다.
sdk/tools및sdk/platform-tools를 PATH 환경 변수에 추가합니다.- OS X: Android SDK와 함께 제공되는 Eclipse 버전에는 JRE 6이 필요합니다. 여는 경우 Eclipse.app이 JRE 6을 설치하라는 메시지를 표시하지 않으므로 Mac App Store를 통해 다운로드할 수 있습니다.
- Linux: Android SDK에는 32비트 지원 라이브러리가 필요합니다. Ubuntu에서 다음을 통해 가져옵니다.
apt-get install ia32-libs
- Apache Ant
<ph type="x-smartling-placeholder">
- </ph>
apache-ant-x.x.x/bin를 PATH 환경 변수에 추가합니다.
iOS 타겟팅
iOS 개발은 OS X에서만 수행할 수 있습니다. 또한 다음을 설치해야 합니다.
- Xcode 명령줄 도구가 포함된 Xcode 5 이상
- ios-deploy (iOS 기기에 배포하는 데 필요)
<ph type="x-smartling-placeholder">
- </ph>
npm install -g ios-deploy
- ios-sim (iOS 시뮬레이터에 배포 필요)
<ph type="x-smartling-placeholder">
- </ph>
npm install -g ios-sim
- 선택사항: iOS 개발자로 등록
<ph type="x-smartling-placeholder">
- </ph>
- 이는 실제 기기에서 테스트하고 앱 스토어에 제출하는 데 필요합니다.
- iPhone/iPad 시뮬레이터만 사용하려는 경우 등록을 건너뛸 수 있습니다.
cca 명령줄 도구 설치
npm을 통해 cca를 설치합니다.
npm install -g cca
나중에 새 버전으로 도구 모음을 업데이트하려면: npm update -g cca
명령줄에서 다음 명령어를 실행하여 모든 것이 올바르게 설치되었는지 확인합니다.
cca checkenv
출력된 cca 버전 번호와 Android 또는 iOS SDK에 관한 확인이 표시됩니다.
설치해야 합니다
2단계: 프로젝트 만들기
YourApp라는 디렉터리에 기본 모바일 Chrome 앱 프로젝트를 만들려면 다음을 실행합니다.
cca create YourApp
이미 Chrome 앱을 만들어 모바일 플랫폼으로 포팅하려는 경우
--link-to 플래그를 사용하여 심볼릭 링크를 만듭니다.
cca create YourApp --link-to=path/to/manifest.json
기존 Chrome 앱 파일을 복사하려면 --copy-from 플래그를 사용하면 됩니다.
cca create YourApp --copy-from=path/to/manifest.json
아직 Chrome 앱이 없으신가요? 모바일에서 다양한 샘플 Chrome 앱 중 하나를 사용해 보세요. 지원을 참조하세요.
3단계: 개발
다음 두 가지 방법으로 애플리케이션을 빌드하고 실행할 수 있습니다.
- 옵션 A: 명령줄에서
cca도구를 사용합니다. - 옵션 B: Eclipse 또는 Xcode와 같은 IDE 사용 IDE 사용은 전적으로 선택 사항이지만 사용)을 사용하여 하이브리드 모바일 애플리케이션의 실행, 구성 및 디버깅을 지원할 수 있습니다.
옵션 A: 명령줄을 사용하여 개발 및 빌드
cca에서 생성된 프로젝트 폴더의 루트에서 다음을 실행합니다.
Android
- Android Emulator에서 앱을 실행하려면
cca emulate android<ph type="x-smartling-placeholder">- </ph>
- 참고: 이렇게 하려면 에뮬레이터를 설정해야 합니다.
android avd를 실행하여 이를 설정할 수 있습니다.android를 실행하여 추가 에뮬레이터 이미지를 다운로드합니다. 인텔리전스 이미지를 더 빠르게 실행하려면 Intel의 HAXM을 설치합니다.
- 참고: 이렇게 하려면 에뮬레이터를 설정해야 합니다.
- 연결된 Android 기기에서 앱을 실행하려면 다음 단계를 따르세요.
cca run android
iOS
- iOS 시뮬레이터에서 앱을 실행하는 방법은 다음과 같습니다.
cca emulate ios - 연결된 iOS 기기에서 앱을 실행하려면 다음 단계를 따르세요.
cca run ios<ph type="x-smartling-placeholder">- </ph>
- 참고: 이 기능을 사용하려면 기기에 프로비저닝 프로필이 설정되어 있어야 합니다.
옵션 B: IDE를 사용하여 개발 및 빌드
Android
- Eclipse에서
File을 선택합니다. ->Import입니다. Android선택 >Existing Android Code Into Workspace입니다.cca를 사용하여 방금 만든 경로에서 가져옵니다.- 가져올 프로젝트 2개가 있어야 하며 그중 하나는
*-CordovaLib입니다.
- 가져올 프로젝트 2개가 있어야 하며 그중 하나는
- Play 버튼을 클릭하여 앱을 실행합니다.
<ph type="x-smartling-placeholder">
- </ph>
- 모든 Java 애플리케이션과 마찬가지로 실행 구성을 만들어야 합니다. 일반적으로 다음과 같은 결과가 발생합니다. 메시지가 처음으로 자동으로 표시됩니다.
- 기기/에뮬레이터도 처음으로 관리해야 합니다.
iOS
터미널 창에 다음을 입력하여 Xcode에서 프로젝트를 엽니다.
cd YourApp open platforms/ios/*.xcodeproj올바른 타겟을 빌드하고 있는지 확인합니다.
왼쪽 상단의 (실행 및 중지 버튼 옆에) 대상 프로젝트를 선택하는 드롭다운이 있고 있습니다.
CordovaLib가 아닌YourApp가 선택되어 있는지 확인합니다.재생 버튼을 클릭합니다.
앱 소스 코드 변경
HTML, CSS, JavaScript 파일은 cca 프로젝트 폴더의 www 디렉터리에 있습니다.
중요: www/를 변경한 후에는 cca prepare를 실행해야
애플리케이션입니다. 명령줄에서 cca build, cca run 또는 cca emulate를 실행하는 경우
준비 단계가 자동으로 수행됩니다 Eclipse/XCode를 사용하여 개발하는 경우,
cca prepare 수동으로
디버깅
Cordova 애플리케이션을 디버깅하는 것과 동일한 방법으로 모바일에서 Chrome 앱을 디버그할 수 있습니다.
4단계: 다음 단계
이제 모바일 Chrome 앱이 제대로 작동합니다. Chrome의 환경을 개선할 수 있는 여러 가지 방법이 있습니다. 있습니다.
모바일 매니페스트
모바일 플랫폼에만 적용되는 특정 Chrome 앱 설정이 있습니다. Google에서는
www/manifest.mobile.json 파일에서 이를 포함하며 특정 값은
플러그인 문서 및 이 가이드를 참조하세요.
적절하게 값을 조정해야 합니다.
아이콘
모바일 앱은 데스크톱 Chrome 앱보다 아이콘 해상도가 더 높아야 합니다.
Android의 경우 다음 크기가 필요합니다.
- 36px, 48px, 78px, 96px
iOS 앱의 경우 필수 크기는 iOS 6 및 iOS 7 지원 여부에 따라 다릅니다. 필요한 최소 아이콘 수는 다음과 같습니다.
- iOS 6: 57px, 72px, 114px, 144px
- iOS 7: 72px, 120px, 152px
전체 아이콘 목록은 manifest.json 파일에 다음과 같이 표시됩니다.
"icons": {
"16": "assets/icons/icon16.png",
"36": "assets/icons/icon36.png",
"48": "assets/icons/icon48.png",
"57": "assets/icons/icon57.png",
"72": "assets/icons/icon72.png",
"78": "assets/icons/icon78.png",
"96": "assets/icons/icon96.png",
"114": "assets/icons/icon114.png",
"120": "assets/icons/icon120.png",
"128": "assets/icons/icon128.png",
"144": "assets/icons/icon144.png",
"152": "assets/icons/icon152.png"
}
실행할 때마다 아이콘이 각 플랫폼의 적절한 위치에 복사됩니다.
cca prepare
스플래시 화면
iOS에서 실행되는 앱에는 앱이 로드될 때 짧은 스플래시 화면이 표시됩니다. 코르도바 물놀이 세트
화면은 platforms/ios/[AppName]/Resources/splash에 포함됩니다.
필요한 크기는 다음과 같습니다.
- 320x480px + 2x
- 768px x 1024px + 2x (iPad 세로 모드)
- 1024px x 768px + 2x (iPad 가로 모드)
- 640x1146px
스플래시 화면 이미지는 현재 cca에 의해 수정되지 않습니다.
5단계: 게시
프로젝트의 platforms 디렉터리에는 두 개의 완전한 네이티브 프로젝트가 있습니다. 하나는 Android용이고 다른 하나는 Android용이고
1개는 iOS용입니다. 이러한 프로젝트의 출시 버전을 빌드하고 Google Play 또는
iOS App Store를 방문하세요.
Play 스토어에 게시
Play 스토어에 Android 애플리케이션을 게시하려면 다음 단계를 따르세요.
두 개의 Android 버전 ID를 업데이트한 다음
cca prepare를 실행합니다.android:versionName는www/manifest.json의version키를 사용하여 설정됩니다. 이렇게 하면 데스크톱 패키지 앱 버전에도 액세스할 수 있습니다.android:versionCode는www/manifest.mobile.js에서versionCode키를 사용하여 설정됩니다.
platforms/android/ant.properties를 수정하거나 만들고key.store및key.alias를 설정합니다. 속성 (Android 개발자 문서의 설명 참고)프로젝트를 빌드합니다.
./platforms/android/cordova/build --releaseplatforms/android/ant-build/에 있는 서명된 .apk를 찾습니다.서명된 애플리케이션을 Google Play 개발자 콘솔에 업로드합니다.
iOS App Store에 게시
www/manifest.mobile.js에서CFBundleVersion키를 설정하여 앱 버전을 업데이트한 후cca prepare를 실행합니다.platforms/ios디렉터리에 있는 Xcode 프로젝트 파일을 엽니다.open platform/ios/*.xcodeproj
Apple의 앱 배포 가이드를 따릅니다.
특별 고려사항
Chrome 앱을 처음 사용하는 경우 가장 큰 문제는 일부 웹 기능이 사용 중지된다는 점입니다. 그러나 이 중 일부는 현재 Cordova 내에서 작동합니다.
Chrome 앱은 모바일에서 즉시 작동하지 않을 수 있습니다. 모바일로 포팅 시 일반적인 문제:
- 특히 세로 방향일 때 소형 화면에서 레이아웃 문제가 발생합니다.
- 추천 해결 방법: CSS 미디어 쿼리를 사용하여 작은 화면에 맞게 콘텐츠를 최적화하세요.
- chrome.app.window를 통해 설정된 Chrome 앱 창 크기는 무시되며 대신
크기를 조절해야 합니다.
- 권장 해결 방법: 하드 코딩된 창 크기를 삭제합니다. 앱을 디자인할 때 사용할 수 있는 생각해야 합니다.
- 작은 버튼과 링크는 손가락으로 탭하기가 어렵습니다.
- 권장 해결 방법: 터치 영역을 44x44포인트 이상으로 조정하세요.
- 터치 스크린에는 없는 마우스 오버를 사용할 때 예기치 않은 동작이 발생합니다.
- 권장 해결 방법: 마우스 오버 외에도 탭합니다.
- 300ms의 탭 지연
- 추천 해결 방법: FT Labs의 FastClick JavaScript 폴리필을 사용합니다.
- 배경 정보는 이 HTML5Rocks 도움말을 참조하세요.
지원되는 Chrome API
Google에서는 다음과 같은 여러 핵심 Chrome API를 모바일 Chrome 앱에서 사용할 수 있도록 했습니다.
- identity - OAuth2를 사용하여 로그인하는 사용자
- payments - 모바일 앱 내에서 가상 상품을 판매합니다.
- pushMessaging - 서버에서 앱으로 메시지 푸시
- 소켓 - TCP와 UDP를 사용하여 네트워크를 통해 데이터 전송 및 수신
- 알림 (Android만 해당) - 모바일 앱에서 리치 알림을 보냅니다.
- storage - 키-값 데이터를 로컬로 저장하고 검색
- syncFileSystem - Google Drive에서 지원하는 파일을 저장하고 검색합니다.
- 알람 - 주기적으로 작업 실행
- idle - 머신의 유휴 상태가 변경되는 시점을 감지합니다.
- power - 시스템의 전원 관리 기능을 재정의합니다.
하지만 모든 Chrome JavaScript API가 구현되는 것은 아닙니다. 모든 Chrome 데스크톱 기능이 모바일에서 이용 가능:
<webview>태그 없음- IndexedDB 없음
- getUserMedia() 없음
- NaCl 없음
API 상태 페이지에서 진행 상황을 추적할 수 있습니다.
Chrome 앱 개발자 도구
Android용 Chrome 앱 개발자 도구 (ADT)는 위에 설명된 개발 도구 모음을 설정하지 않고 Chrome 앱을 다운로드 및 실행 사용 이미 .crx로 패키징된 기존 Chrome 앱을 빠르게 미리 보고 싶을 때 Chrome ADT 하세요.
Android용 Chrome ADT는 현재 알파 이전 버전입니다. 사용해 보려면 ChromeADT.apk 출시 노트를 참고하여 설치 및 사용 안내를 확인하세요.