Cordova를 사용하여 모바일 장치에서 크롬 앱을 실행합니다

키 테이크 아웃

> 크롬 앱은 HTML, CSS 및 JavaScript를 사용하여 모바일 앱을 포장하기위한 오픈 소스 프레임 워크 인 Apache Cordova를 기반으로 한 도구 세트를 사용하여 Android 및 iOS 장치에서 실행할 수 있습니다. Cordova는 기본 쉘을 사용하여 이러한 웹 앱을 감싸서 Google Play, Apple App Store 및 기타 상점에서 배포 할 수 있습니다. Chrome 앱 생성 프로세스에는 프로젝트 폴더 생성, Danifest.json 파일에서 필요한 설정을 정의하고 출시시 앱의 창을 작성하고 데이터 검색을 위해 AJAX 호출을 설정하는 것이 포함됩니다. 이 프로세스는 간단한 트위터 크롬 앱을 만들면서 입증되었습니다.

Android, Java JDK 7 이상, Android SDK 4.4.2 이상에서 Chrome 앱을 실행하려면 시스템에 Apache Ant를 설치해야합니다. CCA 명령 줄 도구도 필요합니다. 환경을 설정 한 후 특정 명령을 사용하여 기존 Chrome 앱에서 Port to Android로 새로운 프로젝트를 만들 수 있습니다.

Chrome 앱은 Chrome 사용자에게 인기가 있습니다. 그리고 왜 그들은 크롬 브라우저의 친숙한 환경 내에서 휴대용 '응용 프로그램'을 만드는 방법을 제공합니다.

. 스마트 폰에서 사용할 수있는 크롬 앱의 힘을 상상해보십시오. 이제 Apache Cordova를 기반으로 한 도구 세트를 사용하여 Android 및 iOS에서 좋아하는 Chrome 앱을 실행할 수 있습니다. Cordova는 HTML, CSS 및 JavaScript를 사용하여 모바일 앱을 포장하기위한 오픈 소스 프레임 워크입니다. Cordova는 Native Shell을 사용하여 HTML, CSS 및 JavaScript 웹 앱을 랩하고 Google Play, Apple App Store 및 기타 상점에서 배포 할 수 있습니다.
• 개요 이 튜토리얼에서는 HTML, CSS 및 JavaScript를 사용하여 자신의 Chrome 앱을 만들고 Android 에뮬레이터로 포트합니다. 우리가 작성할 응용 프로그램은 특정 트위터 해시 태그를 기반으로 최신 트윗을 가져 오는 간단한 앱입니다. 크롬 앱 생성 크롬 앱을 만들부터 시작하겠습니다. Chrome 앱을 만들고 Chrome 브라우저에서 테스트 한 후에는 Android로 포팅됩니다. 이 자습서의 소스 코드는 github에서 사용할 수 있습니다 twitterchromeapp라는 프로젝트 폴더를 만듭니다. 프로젝트 폴더 내부에서 앱의 구성 파일이 될 Manifest.json이라는 Manifest 파일을 만듭니다. Inside Manifest.json Chrome 앱에서 필요한 몇 가지 설정을 정의합니다. Chrome 앱은 Danifest_version이 2가되어야합니다. 또한 앱의 이름, 버전 및 앱 시작시 실행할 배경 스크립트의 경로도 정의합니다. 외부 서비스 URL에서 트윗을 가져 오 므로이 파일 내부에도 지정합니다. 다음은 Manifest.json을보아야합니다
• 크롬 앱이 시작되면 트위터의 트윗이 표시되는 창이 표시됩니다. Chrome Apps는 Onlaunched라는 이벤트가있어 앱 시작시 앱의 창을 작성하는 데 사용합니다. 프로젝트 폴더 내부 Twitterchromeapp 내부에서 스크립트라는 다른 폴더를 만들고 내부에 main.js라는 배경 스크립트를 만듭니다. 다음 코드를 main.js에 추가하십시오 :

  Onlaunched 이벤트 내에서 Chrome 앱을위한 미망인을 만들 것입니다. 다음 코드를 main.js에 추가하십시오 :

  위 코드에서는 화면 객체를 사용하여 사용 가능한 화면 너비와 높이를 얻었습니다. 화면의 실제 너비를 기준으로 새 크롬 창의 외부 경계를 올바르게 표시하도록 설정합니다. <app> chrome.app.window.create는 파일 index.html 내부의 HTML을 사용하여 새 창을 만듭니다. <fol> 프로젝트 폴더 내부 TwitterChromeApp 아래와 같이 index.html이라는 새 파일을 만듭니다. <pre class="brush:php;toolbar:false">&lt;span&gt;{ &lt;/span&gt; &lt;span&gt;&quot;manifest_version&quot;: 2, &lt;/span&gt; &lt;span&gt;&quot;name&quot;: &quot;Tweet Chrome App&quot;, &lt;/span&gt; &lt;span&gt;&quot;version&quot;: &quot;1.0&quot;, &lt;/span&gt; &lt;span&gt;&quot;app&quot;: { &lt;/span&gt; &lt;span&gt;&quot;background&quot;: { &lt;/span&gt; &lt;span&gt;&quot;scripts&quot;: [&quot;scripts/main.js&quot;] &lt;/span&gt; &lt;span&gt;} &lt;/span&gt; &lt;span&gt;}, &lt;/span&gt; &lt;span&gt;&quot;permissions&quot;: [ &lt;/span&gt; &lt;span&gt;&quot;http://twittersearchapi.herokuapp.com/search&quot; &lt;/span&gt; &lt;span&gt;] &lt;/span&gt;&lt;span&gt;}&lt;/span&gt;</pre> <install> 이제 Chrome 브라우저에 Chrome 앱을 설치하십시오. <tools> 도구 -> 확장자 (아마도 <p>)로 열립니다. 오른쪽 상단의 확인란에서 개발자 모드를 활성화 한 다음 </p>를 포장되지 않은 확장자로드하고 프로젝트 폴더를 선택하십시오. <pre class="brush:php;toolbar:false">chrome&lt;span&gt;.app.runtime.onLaunched.addListener(function() { &lt;/span&gt; &lt;span&gt;// creating window for app code will be here &lt;/span&gt;&lt;span&gt;});&lt;/span&gt;</pre> <ension>는 또는 확장을 통해 확장을 실행하면 다음을 볼 수 있습니다. <p> <ll> 다음, 우리는 서비스 URL에서 트윗을 검색하는 창을 시작할 때 트리거되는 Ajax 호출을 만들 것입니다. 우리는 Heroku에서 호스팅 된 서비스를 사용할 것입니다. 서비스에는 몇 가지 제한 사항이 있습니다. 해시 태그 </ll></p> perkytweets 로만 트윗 만 가져옵니다. 이것은 우리의 예에 충분합니다. . <j> 우리는 jQuery를 사용하여 ajax를 호출 할 것이므로 스크립트 폴더로 다운로드하여 index.html에 포함하십시오. <p> <new> 이제 Scripts 폴더에서 script.js라는 새 파일을 만들고 그림과 같이 Ajax 호출을 만듭니다. </new></p> <.> index.html에 script.js를 포함시킵니다 <p> </p> 이제 도구 -> 확장 chrome&lt;span&gt;.app.runtime.onLaunched.addListener(function() { &lt;/span&gt; &lt;span&gt;var screenWidth = screen.availWidth; &lt;/span&gt; &lt;span&gt;var screenHeight = screen.availHeight; &lt;/span&gt; &lt;span&gt;var width = 500; &lt;/span&gt; &lt;span&gt;var height = 300; &lt;/span&gt; chrome&lt;span&gt;.app.window.create('index.html', { &lt;/span&gt; &lt;span&gt;id: &quot;tweetAppID&quot;, &lt;/span&gt; &lt;span&gt;outerBounds: { &lt;/span&gt; &lt;span&gt;width: width, &lt;/span&gt; &lt;span&gt;height: height, &lt;/span&gt; &lt;span&gt;left: Math.round((screenWidth - width) / 2), &lt;/span&gt; &lt;span&gt;top: Math.round((screenHeight - height) / 2) &lt;/span&gt; &lt;span&gt;} &lt;/span&gt; &lt;span&gt;}); &lt;/span&gt;&lt;span&gt;});&lt;/span&gt; (또는 더 많은 도구 )를 열고 reload 를 클릭하여 변경 사항을 반영하십시오. 다음으로 앱을 클릭하여 다시 시작하십시오. Chrome 콘솔 (Chrome에서 액세스하는 일반 콘솔 만)을 확인하면 서비스 URL의 응답이 표시됩니다. <ll ll> 다음으로, 우리는 index.html에 응답을 표시합니다. 페이지 스타일링에 부트 스트랩을 사용합니다. <p> <y> 프로젝트 폴더 내부에서 스타일 폴더를 만들고 부트 스트랩 CSS 파일을 폴더로 다운로드하십시오. bootstrap css 파일을 index.html에 포함시킵니다 <em> <element> index.html에 ul 요소를 포함하여 트윗을 표시합니다. 다음은 index.html이 지금 보는 방법입니다 </element></em> <j> 내부 Ajax 성공에 대한 Call Back in Scripts.js는 서비스 호출에서 UL에서 가져온 항목을 index.html. <em> <rel rel> 앱을 다시로드하고 다시 시작하면 트윗으로 가득 찬 화면을 볼 수 있어야합니다. </rel></em><ome> 안드로이드 용 크롬 앱 생성 <be> 우리는 Android에서 앱을 실행하기 때문에 Java JDK 7 이상, Android SDK 4.4.2 이상 및 Apache Ant가 시스템에 설치되어 있는지 확인하십시오. <need> CCA 명령 줄 도구도 필요합니다. <it it>를 사용하여 설치할 수 있습니다 <p> 크롬 앱을 Android 및 iOS로 포팅하기위한 환경 설정에 대한 자세한 정보는 공식 문서에서 찾을 수 있습니다. <our> 환경을 설정하면 기존 Twitterchromeapp에서 Port to Android까지 새로운 프로젝트를 만들 것입니다. 프로젝트를 만들려면 다음 명령을 실행하십시오 </our></p> <twitter twitter> TwitterapPforandroid로 이동하여 다음 명령을 실행하여 Android 에뮬레이터에서 프로젝트를 실행하십시오. <p> <ulator> 에뮬레이터가 성공적으로 시작되면 에뮬레이터 내부에서 앱이 실행되는 것을 볼 수 있습니다. </ulator></p> 결론 이 튜토리얼에서는 간단한 Chrome 앱을 만들고 Android 플랫폼에 포트하는 방법을 보았습니다. Apache Cordova를 사용하여 모바일 장치에서 Chrome 앱 실행에 대한 자세한 내용은 공무원 문서에서 찾을 수 있습니다. <pre class="brush:php;toolbar:false">&lt;span&gt;{ &lt;/span&gt; &lt;span&gt;&quot;manifest_version&quot;: 2, &lt;/span&gt; &lt;span&gt;&quot;name&quot;: &quot;Tweet Chrome App&quot;, &lt;/span&gt; &lt;span&gt;&quot;version&quot;: &quot;1.0&quot;, &lt;/span&gt; &lt;span&gt;&quot;app&quot;: { &lt;/span&gt; &lt;span&gt;&quot;background&quot;: { &lt;/span&gt; &lt;span&gt;&quot;scripts&quot;: [&quot;scripts/main.js&quot;] &lt;/span&gt; &lt;span&gt;} &lt;/span&gt; &lt;span&gt;}, &lt;/span&gt; &lt;span&gt;&quot;permissions&quot;: [ &lt;/span&gt; &lt;span&gt;&quot;http://twittersearchapi.herokuapp.com/search&quot; &lt;/span&gt; &lt;span&gt;] &lt;/span&gt;&lt;span&gt;}&lt;/span&gt;</pre> <think> 모바일 앱을 만들기위한이 Chrome 앱 옵션에 대해 어떻게 생각하십니까? Cordova 내부의 표준 HTML, CSS 및 JavaScript 웹 앱을 사용하는 것보다 이점을 제공합니까? <p> <questions> cordova 를 사용하여 모바일 장치에서 크롬 앱 실행에 대한 자주 묻는 질문 (FAQ) <install> 내 시스템에 cordova를 설치하려면 어떻게해야합니까? </install></questions></p> Cordova를 설치하려면 시스템에 Node.js가 설치되어 있어야합니다. Node.js가 설치되면 터미널 또는 명령 프롬프트에서 NPM Install -G Cordova 명령을 실행하여 NPM (Node Package Manager)을 사용하여 Cordova를 설치할 수 있습니다. -g 플래그는 시스템에 Cordova를 전 세계적으로 설치하는 데 사용됩니다. <p> Cordova를 사용하여 모바일 장치에서 Chrome 앱을 실행하기위한 전제 조건은 무엇입니까? </p> <pre class="brush:php;toolbar:false">chrome&lt;span&gt;.app.runtime.onLaunched.addListener(function() { &lt;/span&gt; &lt;span&gt;// creating window for app code will be here &lt;/span&gt;&lt;span&gt;});&lt;/span&gt;</pre> 모바일에서 Chrome Apps를 실행하기 전에 Cordova를 사용하는 장치에는 Node.js, Cordova, Mobile Toolchain 용 Chrome 앱 및 Android SDK 또는 iOS SDK에 다음과 같은 설치가 필요합니다. 타겟팅하는 플랫폼에 따라 Chrome 앱을 Cordova 프로젝트로 변환하려면 어떻게해야합니까? <p> </p> Chrome 앱을 Cordova 프로젝트로 변환하려면 CCA 명령을 사용하여 CCA ​​명령을 사용해야합니다. Create 명령과 프로젝트 이름에 따라 예를 들어, CCA는 myProject를 만듭니다. MyProject라는 디렉토리에 새로운 Cordova 프로젝트가 생성됩니다. <pre class="brush:php;toolbar:false">chrome&lt;span&gt;.app.runtime.onLaunched.addListener(function() { &lt;/span&gt; &lt;span&gt;var screenWidth = screen.availWidth; &lt;/span&gt; &lt;span&gt;var screenHeight = screen.availHeight; &lt;/span&gt; &lt;span&gt;var width = 500; &lt;/span&gt; &lt;span&gt;var height = 300; &lt;/span&gt; chrome&lt;span&gt;.app.window.create('index.html', { &lt;/span&gt; &lt;span&gt;id: &quot;tweetAppID&quot;, &lt;/span&gt; &lt;span&gt;outerBounds: { &lt;/span&gt; &lt;span&gt;width: width, &lt;/span&gt; &lt;span&gt;height: height, &lt;/span&gt; &lt;span&gt;left: Math.round((screenWidth - width) / 2), &lt;/span&gt; &lt;span&gt;top: Math.round((screenHeight - height) / 2) &lt;/span&gt; &lt;span&gt;} &lt;/span&gt; &lt;span&gt;}); &lt;/span&gt;&lt;span&gt;});&lt;/span&gt;</pre> Cordova 프로젝트에 플랫폼을 추가하려면 어떻게해야합니까? <p> Cordova 프로젝트에 플랫폼을 추가하려면 Cordova 플랫폼을 사용해야합니다. 명령을 추가 한 다음 플랫폼 이름을 추가하십시오. 예를 들어, Cordova 플랫폼 추가 Android 추가 프로젝트에 Android 플랫폼을 추가합니다. </p> Cordova 프로젝트를 어떻게 구축 할 수 있습니까? <h2> Cordova 프로젝트를 구축하려면 Cordova 빌드 명령을 사용해야합니다. 플랫폼 이름이 뒤 따릅니다. 예를 들어, Cordova Build Android는 Android 플랫폼을위한 프로젝트를 구축합니다.<run> 장치에서 Cordova 프로젝트를 실행할 수있는 방법은 무엇입니까? <h3 id="장치에서-Cordova-프로젝트를-실행하려면-Cordova-Run-명령을-사용하고-플랫폼-이름을-사용해야합니다-예를-들어-Cordova-Run-Android는-Android-기기에서-프로젝트를-실행합니다"> 장치에서 Cordova 프로젝트를 실행하려면 Cordova Run 명령을 사용하고 플랫폼 이름을 사용해야합니다. 예를 들어, Cordova Run Android는 Android 기기에서 프로젝트를 실행합니다. </h3> Cordova 프로젝트를 디버그하는 방법 <p> Cordova 프로젝트를 디버깅하려면 Chrome DevTools를 사용할 수 있습니다. 이렇게하려면 Chrome : // Chrome 브라우저에서 검사를하고 장치 아래의 검사 링크를 클릭해야합니다. </p> <h3 id="Cordova를-사용하여-모바일-장치에서-Chrome-앱을-실행하는-제한-사항은-무엇입니까"> Cordova를 사용하여 모바일 장치에서 Chrome 앱을 실행하는 제한 사항은 무엇입니까? </h3> Chrome 앱에서 Cordova 플러그인을 사용할 수 있습니까? 🎜> <p> 예, Chrome 앱에서 Cordova 플러그인을 사용할 수 있습니다. 이렇게하려면 Cordova 플러그인 추가 명령과 플러그인 이름을 사용하여 프로젝트에 플러그인을 추가해야합니다. </p> Cordova Project를 업데이트하려면 어떻게해야합니까? <h3> </h3> 업데이트하려면 어떻게해야합니까? Cordova Project, Cordova 플랫폼 업데이트 명령과 플랫폼 이름을 사용할 수 있습니다. 예를 들어, Cordova 플랫폼 업데이트 Android는 프로젝트의 Android 플랫폼을 업데이트합니다.</run> </h2></think></twitter></it></need></be></ome></j></y></p></ll></.></j></ension></tools></install></fol></app>

위 내용은 Cordova를 사용하여 모바일 장치에서 크롬 앱을 실행합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!