ionic-framework
Yeoman Ionic 프로젝트 용 이온 구름
수색…
Yo (Yeoman) Ionic Projects를위한 이온 플랫폼 (Ionic Cloud)
이온 플랫폼 :
쉬운 방법으로 이오니아 앱을 제작, 푸시, 배포 및 확장 할 수 있습니다.
제목 설명:
Ionic Platform은 교차 플랫폼 모바일 앱을 관리하고 확장하기위한 클라우드 플랫폼입니다. 통합 서비스를 통해 귀사와 귀사 팀은 앱을 효율적으로 구축, 배포 및 확장 할 수 있습니다.
문서 목적 :
이온 플랫폼은 표준 이온 프로젝트와 잘 작동합니다. 그러나 비표준 디렉토리 구조를 따르는 프로젝트는 몇 가지 장애물에 직면 할 수 있습니다. 이 문서는 Yeoman을 사용하여 생성 된 Ionic 프로젝트에서 Ionic Platform을 사용하는 단계를 제공합니다.
문서 범위 :
이 문서는 Yeoman을 사용하여 Ionic 프로젝트를 생성하고 Ionic Platform Web Client를 사용하여 Ionic 플랫폼과 통합하는 기본 단계를 설명합니다. 이 문서에서는 Ionic Deploy, Ionic Analytics 및 Ionic Push를 사용하기위한 기본 단계에 대해 설명합니다.
대상 :
이 문서의 대상 독자는 초보자와 전문가 수준의 전문 지식을 갖춘 Web / Mobile App 개발자로서 아래의 전제 조건을 잘 알고 있습니다.
선수 과목 :
이 문서를 사용하기 전에 다음 프레임 워크 / 도구에 익숙해야합니다.
- AngularJs : https://docs.angularjs.org/guide
- IonicFramework : http://ionicframework.com/docs/guide
- Yeoman : http://yeoman.io/codelab/index.html
- 이온 발생기 : https://github.com/diegonetto/generator-ionic
- 이온 플랫폼 : https://ionic.io/platform
이온 프레임 워크 생성기
Yeoman의 Ionic Framework 용 생성기, 현대 웹 응용 프로그램을위한 Web의 스캐 폴딩 도구
Node.js는 Chrome의 V8 자바 스크립트 엔진을 기반으로 작성된 자바 스크립트 런타임입니다. npm은 JavaScript 용 패키지 관리자입니다. http://nodejs.org 에서 Node (및 npm)를 다운로드하여 설치 하십시오.
$ npm install npm –g
$ npm install -g yo
Yeoman은 새로운 프로젝트를 시작하고 모범 사례와 도구를 처방하여 생산성을 유지하는 데 도움을줍니다.
$ yo ionic [app-name]
package.json 에서 devDependencies에 다음을 포함하십시오.
"grunt-string-replace": "^1.2.1"
bower.json 에서 의존성에 다음을 포함하십시오.
"ionic-platform-web-client": "^0.7.1"
Gruntfile.js 에서 스크립트 폴더를 'js' 로 변경하십시오. 필요한 경우 index.html 도 변경하십시오.
grunt.initConfig({ yeoman: {…………
scripts: 'js',
………… } })
그런 다음 실행
$ bower install && npm install
$ grunt
$ grunt serve
$ cordova platform add android
$ grunt build:android --debug
이온 플랫폼 웹 클라이언트
Ionic 플랫폼과의 상호 작용을 제공하는 웹 클라이언트.
앱이 Ionic 플랫폼과 통신 할 수 있도록 코드가 필요합니다. 플러그인과 Ionic.io 플랫폼과의 인터페이스를 위해 Ionic 앱을위한 Ionic 플랫폼 웹 클라이언트를 추가해야합니다.
$ ionic io init
app.js 에 'ionic.service.core' 모듈 종속성을 추가하십시오. Gruntfile.js에서 아래와 같이 'ionicSettings' 작업을 추가하십시오.
grunt.initConfig({
ionicSettings: JSON.stringify(grunt.file.readJSON('./.io-config.json')),
ionicIoBundlePath: 'www/bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js',
'string-replace': {
ionicSettings: {
files: {
'<%= ionicIoBundlePath %>': '<%= ionicIoBundlePath %>',
},
options: {
replacements: [
{
pattern:
'"IONIC_SETTINGS_STRING_START";"IONIC_SETTINGS_STRING_END"',
replacement:
'"IONIC_SETTINGS_STRING_START";var settings =<%= ionicSettings %>; return { get: function(setting) { if (settings[setting]) { return settings[setting]; } return null; } };"IONIC_SETTINGS_STRING_END";'
}
]
}
}
},
copy: {
ionicPlatform:{
expand: true,
cwd: 'app/bower_components/ionic-platform-web-client/dist/',
src: ['**'],
dest: 'www/bower_components/ionic-platform-web-client/dist'
}
}
});
grunt.registerTask('ionicSettings', ['copy:ionicPlatform','string-replace:ionicSettings']);
init에 'ionicSettings' 를 추가하고 복사 한 후에 작업을 압축 합니다. index.html에서 모든 태그 선언 다음에 아래 태그를 이동하십시오.
<script src="bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>
그런 다음 실행
$ Grunt serve
이오니아 배치
프로덕션 앱에 대한 실시간 업데이트를 푸시하고 버전 기록을 관리하십시오.
Ionic Deploy를 사용하면 바이너리 수정이 필요없는 변경 사항을 요구에 맞춰 업데이트 할 수 있기 때문에 며칠 또는 몇 주 내에 대기 시간을 절약 할 수 있습니다. 아래 절차에 따라 앱에 Ionic Deploy를 구성하십시오.
Gruntfile.js 에서 아래와 같이 grunt 작업 'deploy' 를 추가하십시오.
grunt.registerTask('deploy', function () {
return grunt.task.run(['init', 'ionic:upload' + this.args.join()]);
});
그 다음에 달린다.
$ ionic plugin add ionic-plugin-deploy
이온 배치 코드 :
var deploy = new Ionic.Deploy();
// Check Ionic Deploy for new code
deploy.check().then(function(hasUpdate) {
}, function(err) {
});
// Update app code with new release from Ionic Deploy
deploy.update().then(function(result) {
}, function(error) {
}, function(progress) {
});
업데이트 배포 :
앱용 새 코드를 보내십시오.
apk를 만들고 앱을 설치하십시오. 코드를 거의 변경하지 않고 ' grunt deploy '를 사용하여 변경 사항을 배포하십시오. 그런 다음 앱에서 업데이트하십시오.
apps.ionic.io 대시 보드에서 배포 할 수도 있습니다. deploy 매개 변수없이 앱을 배포 할 수 있습니다. 그런 다음 대시 보드에서 메타 데이터 및 버전 정보를 추가하고 거기에서 앱을 배포 할 수 있습니다.
$ grunt build:android --debug
$ grunt deploy --note "release notes"
$ grunt deploy --note "release notes" --deploy=production
이오니아 분석
실시간으로 진행되는 이벤트 피드 또는 시간 경과에 따른 원시 / 고유 이벤트 / 사용자 수를 봅니다.
현재 귀하의 앱에 몇 명의 사용자가 있습니까? 얼마나 많은 사람들이 내일이나 다음 주에 앱을 사용할 것입니까? 정보가 없으면 앱이 예상대로 사용되는지 알릴 방법이 없습니다. 아래 절차에 따라 앱에 대한 Ionic Analytics를 구성하십시오.
당신의 app.js는 ionic.service.core 후 'ionic.service.analytics'모듈 종속성을 추가에서 분석이 우리의 모듈의 실행 기능의 방법을 등록 실행합니다.
$ionicAnalytics.register();
Ionic Analytics에서 사용자가 앱에서 추적 한 각 동작은 이벤트 객체로 표현됩니다. 이벤트는 특정 시점에서 수행되는 단일 작업입니다. 자신의 이벤트를 추적하려면 작업이 발생할 때마다 $ionicAnalytics.track(eventType, eventData) 호출하십시오.
$ionicAnalytics.track('User Login', {
user: $scope.user
});
ion-track-tap 지시어는 호스트 요소가 두드려 질 때 이벤트를 보낸다. 관련 ion-track-data 지시문은 이벤트 데이터를 첨부합니다.
<button ion-track-tap="eventType" ion-track-data="expression"></button>
apps.ionic.io 대시 보드에서 다음 분석 데이터를 볼 수 있습니다.
이벤트 : 시간 경과에 따른 원시 이벤트 수 또는 이벤트를 완료 한 순 사용자 수를 봅니다. 이벤트는 앱을로드하는 사용자부터 구매를 확인하는 것까지 모두 가능합니다.
유입 경로 : 유입 경로는 사용자가 앱에서 취하는 것으로 기대되는 일련의 동작으로 정의 된 목표를 달성합니다. 사려 깊은 유입 경로를 사용하면 전환율을 높이는 데 도움이됩니다.
세그먼트 : 지정된 속성별로 그룹화 된 시간별 이벤트를 봅니다. 또는 주어진 속성과 일치하는 이벤트의 비율을 계산하십시오. 세그먼트를 사용하면 사용자 기반을 이해하고 시간이 지남에 따라 속성이 어떻게 변경되는지 확인할 수 있습니다.
보유 : 사용자가 앱 사용을 중지하기 전에 앱에서 얼마나 오래 활동하는지 추적합니다. 또는 사용자가 완료된 판매와 같이 정의 된 목표에 도달하는 데 걸리는 시간을 식별합니다.
펄스 : 사용자로부터 들어오는 이벤트의 라이브 피드입니다.
이오니아 푸시
타겟 및 자동 푸시 알림을 사용자에게 보냅니다.
Ionic Push를 사용하면 사용자가 특정 기준과 일치 할 때 자동으로 전송되는 간단한 대시 보드를 통해 대상 푸시 알림을 만들 수 있으며 자신의 서버에서 푸시 알림을 보내는 간단한 API를 제공합니다.
Android 푸시 프로필 :
Android 푸시 알림은 Google 클라우드 메시징 (GCM) 서비스를 사용합니다. Google Developers Console을 열고 프로젝트를 만듭니다. 프로젝트 번호를 복사하십시오. GCM 발신자 ID 또는 GCM 프로젝트 번호가 됩니다.
API 관리자 섹션에서 Google Cloud Messaging API를 사용하도록 설정합니다. 그런 다음 Credentials 섹션으로 이동하고 Create credentials을 선택한 다음 API Key를 선택한 다음 Server Key를 선택하십시오. API 키의 이름을 지정하고 다음 에서 요청 허용 ... 필드를 비워두고 작성을 클릭 하십시오 . API 키 저장
입증:
Ionic Platform 의 앱 대시 보드로 이동하여 설정 -> 인증서로 이동합니다. 아직 보안 프로필을 만들지 않은 경우 새 보안 프로필을 만든 다음 편집 을 누르십시오. 프로필 태그를 기록해 둡니다 .
이제 Android 탭을 클릭하고 Google Cloud Messaging 섹션을 찾은 다음 Google 개발자 콘솔에서 생성 한 API 키 를 입력하고 저장 을 클릭 하십시오 . 설정 -> API 키로 이동하십시오 . API 토큰 아래에 새 토큰을 만들고 복사합니다. 이것은 귀하의 API 토큰 입니다.
$ ionic plugin add phonegap-plugin-push --variable SENDER_ID="GCM_PROJECT_NUMBER"
$ ionic config set gcm_key <your-gcm-project-number>
$ ionic config set dev_push false
$ ionic io init
참고 : phonegap-plugin-push에는 Android 지원 리포지토리 버전 32 이상이 필요합니다.
당신의 app.js는 ionic.service.core 후 'ionic.service.push'모듈 종속성을 추가에서
이온 밀어 넣기 부호 :
서비스를 초기화하고 모듈을 모듈의 실행 기능에 등록하십시오. 사용자에게 알림을 보내기 위해 사용자가 등록한 장치 토큰이 필요합니다.
$ionicPush.init({
debug: true,
onNotification: function (notification) {
console.log'token:', notification.payload);
},
onRegister: function (token) {
console.log('Device Token:', token);
$ionicPush.saveToken(token); // persist the token in the Ionic Platform
}
});
$ionicPush.register();
그 다음에 달린다.
$ grunt build:android --debug
Ionic Push를 사용하면 대시 보드를 통해 대상 푸시 알림을 만들 수 있습니다. 아래 형식으로 서버에서 알림을 보낼 수도 있습니다.
curl -X POST -H "Authorization: Bearer API_TOKEN" -H "Content-Type: application/json" -d '{
"tokens": ["DEVICE_TOKEN"],
"profile": "PROFILE_TAG",
"notification": {
"message": "Hello World!"
"android": {
"title": "Hi User",
"message": "An update is available for your App",
"payload": {
"update": true
}
}
} }' "https://api.ionic.io/push/notifications"
참고 : iOS 용 Ionic Push를 구성하는 단계는 푸시 프로파일 만들기를 제외하고 동일합니다. iOS 푸시 프로필을 만들려면 http://docs.ionic.io/v2.0.0-beta/docs/ios-push-profiles를 참조 하십시오.
샘플 앱
참조 용으로 여기에 샘플 앱이 첨부되어 있습니다.
IonicApp:
│
│ bower.json
│ Gruntfile.js
│ package.json
│
└───app
│ index.html
│
├───js
│ app.js
│ controllers.js
│
└───templates
home.html
menu.html
참고 : 이것은 독립형 프로젝트가 아닙니다. 주어진 코드는 문제 또는 오류가있는 경우이 문서에서 위에 제시된 절차를 사용하여 작성 및 구현 된 프로젝트와 비교하기위한 것입니다.