ionic-framework 튜토리얼
ionic-framework 시작하기
수색…
비고
Ionic은 HTML, CSS 및 JavaScript를 사용하여 모바일 응용 프로그램을 개발하기위한 프레임 워크입니다. 이오닉 응용 프로그램은 기본 응용 프로그램으로 실행되며 고유 한 "모양과 느낌"을가집니다.
Ionic은 AngularJS 프레임 워크를 기반으로하며 모바일 응용 프로그램을 설계, 빌드 및 패키징하는 완벽한 솔루션을 제공합니다. 디자인은 템플릿 도구 모음과 사용자 정의 아이콘 라이브러리로 이루어 집니다. Ionic은 사용자 정의 CSS / SASS 구성 요소 와 Javascript UI Extensions를 제공 합니다. 이오니아 응용 프로그램은 명령 줄 인터페이스 (CLI)를 사용하여 작성, 에뮬레이션 및 패키지화 할 수 있습니다.
이오니아 템플릿은 다이내믹하고 응답 성이 뛰어나며 환경에 적응하여 고유 한 "모양과 느낌"을 제공합니다. 이 적응에는 레이아웃, 스타일 및 아이콘이 포함됩니다. Ionic은 독립적 인 플랫폼 사용자 정의 기능을 제공합니다. 이오닉 앱은 프론트 엔드 웹 기술을 사용하기 때문에 빠른 개발을 위해 브라우저에서도 볼 수 있습니다.
이오니아 애플리케이션은 기본적으로 Apache Cordova 위에 구축됩니다. Cordova 플러그인 은 푸시 알림, 카메라, 가속도계 등과 같은 기본 기능을 사용할 수있게 해주는 모든 Cordova 플러그인에 액세스 할 수 있습니다. Cordova 앱은 별도의 노력 없이도 여러 플랫폼 및 장치 (전화, 태블릿 등)에서 작동합니다. 코르도바는 trigger.io 와 같은 다른 크로스 플랫폼 기술 로 전환 될 수 있습니다.
버전
| 번역 | 출시일 |
|---|---|
| 1.3.1 "엘살바도르" | 2016-05-12 |
| 1.3.0 "델리" | 2016-04-21 |
| 1.2.0 "지르코늄 - 제레 늄" | 2015-12-09 |
| 1.1.0 "크세논 - 제 루스" | 2015-08-13 |
| 1.0.0 "우라늄 - 유니콘" | 2015-05-12 |
설치 또는 설정
1. nonic (노드 패키지 관리자)을 사용하여 Ionic Framework 및 Cordova (Ionic 응용 프로그램은 Cordova를 기반으로 함)를 설치합니다.
시스템에 Node.js의 최신 버전이 설치되어 있는지 확인하십시오. Node.js가 설치되어 있지 않으면 여기 에서 설치할 수 있습니다 .
또한 Mac 사용자의 경우 시스템에 최신 Xcode 버전이 설치되어 있으면 명령 줄 도구와 iOs Simulator가 제공되며 여기 에서 다운로드 할 수 있습니다 .
터미널 창 (Mac) 또는 명령 창 (Windows)을 열고 Cordova 및 Ionic을 설치하십시오.
$ npm install -g cordova ionic
Mac에서는 시스템 구성에 따라 sudo를 사용해야 할 수도 있습니다.
$ sudo npm install -g cordova ionic
컴퓨터에 이미 Cordova 및 Ionic이 설치되어있는 경우 최신 버전으로 업데이트해야합니다.
$ npm update -g cordova ionic
또는
$ sudo npm update -g cordova ionic
Android 및 iOS 플랫폼 가이드에 따라 필요한 플랫폼 종속성을 설치하십시오.
참고 : iOS 개발에는 Mac OS X이 필요합니다. Ionic CLI를 통한 iOS 시뮬레이터에는 다음 명령으로 설치할 수있는 ios-sim npm 패키지가 필요합니다.
$ sudo npm -g install ios-sim
2. 새로운 이온 프로젝트를 시작하십시오 :
기성품 앱 템플리트 중 하나를 사용하여 이오닉 프로젝트를 작성하거나, 새로 시작하기위한 빈 프로젝트 템플리트를 사용하여 이오닉 프로젝트를 작성하십시오.
$ ionic start myApp blank
또는
$ ionic start myApp tabs
또는
$ ionic start myApp sidemenu
3. 이오니아 앱을 테스트합니다.
iOS 및 Android 플랫폼의 데스크톱 브라우저에서 Ionic 앱을 테스트하려면 다음 단계를 따르세요.
$ ionic serve --lab
ionic serve --lab 은 여러 플랫폼에서 앱 UI를 테스트하는 데 ionic serve --lab 하지만 Javascript 콘솔 또는 요소 검사에서 몇 가지 문제가 발생할 수 있습니다.
$ ionic serve
에뮬레이터에서 이오닉 앱을 테스트하려면 다음을 수행하십시오.
$ cd myApp
$ ionic platform add ios android
$ ionic build ios
$ ionic emulate ios
안드로이드 에뮬레이터 테스트를 위해 안드로이드로 iOS를 대체하십시오 :
$ ionic build android
$ ionic emulate android
USB를 통해 연결된 Android 기기에서 Ionic 앱을 테스트하려면 다음 단계를 따르세요.
$ ionic run android
USB를 통해 연결된 iOS 기기에서 Ionic 앱을 테스트하려면 다음 단계를 따르세요.
$ ionic run ios --device
이오니아 프레임 워크 소개 및 설치 및 설정
이온 프레임 워크
Angular JS 및 프런트 엔드 웹 기술을 사용하는 교차 플랫폼 모바일 응용 프로그램 개발 프레임 워크
공식 웹 사이트 : http://ionicframework.com/
문서 : http://ionicframework.com/docs/
설치 및 설정
설치 Ionic 필수 NPM (노드 패키지 관리자) 및 Cordova.
당신은 다운로드에서 Npde JS 설치할 수 있습니다 여기 박스에서 NPM와 함께 제공됩니다.
Apache Cordova를 다운로드하려면 명령 줄에서 NPM을 사용할 수 있습니다.
npm install -g cordova
이미 NPM과 Cordova가 있다면 다음 명령을 사용하여 명령 줄에서 ionic framework을 설치할 수 있습니다.
npm install -g ionic
이렇게하면 명령 줄에서 사용할 수있는 이온 프레임 워크가 설치되고 설정됩니다.
참고 * 시스템 환경에 따라 관리자 권한으로 실행해야 할 수도 있습니다.
새 프로젝트 시작하기
새로운 Ionic Framework Project를 시작하려면 다음 명령을 사용할 수 있습니다.
ionic start myproject
또는
ionic start myproject [template_name]
템플릿 :
Ionic을 사용하면 내장 된 템플릿을 사용하여 프로젝트를 만들 수 있습니다.
tabs (기본값) : 탭보기가있는 간단한 앱을 만듭니다.
sidemenu : 사이드 메뉴와 이온 응용 프로그램을 만들 것입니다.
blank : 빈 이온 성 응용 프로그램을 만듭니다.
모든 이온 프로젝트 파일과 함께 myproject 라는 새 폴더가 생성됩니다.
브라우저에서 프로젝트를 테스트하려면 다음 명령을 사용할 수 있습니다.
ionic serve --lab
또는
ionic serve
에뮬레이터 또는 전화에서 실행하려면 에뮬레이션 또는 테스트 응용 프로그램을 실행 먼저 당신이 다음 명령을 사용할 수에 대한 플랫폼을 추가해야합니다
ionic platform [Platform Name]
ionic build [Platform Name]
ionic emulate [platform name]
플랫폼 이름 각 플랫폼에 대해 android and ios를 직접 언급 할 수 있습니다. 또한 여러 플랫폼 이름을 공백으로 구분할 수 있습니다.
앱을 실행하려면 다음을 사용할 수 있습니다.
ionic run [platform name]
사용할 수있는 도움을 얻으려면
ionic --help
또는
ionic help
ionic cli에 대한 자세한 설명은 이 링크 를 참조하십시오.
ionic에서 사용할 수있는 CSS 구성 요소는 이 링크 를 참조하십시오.
ionic에 대한 Javascript API 참조는 이 링크 를 참조하십시오.
이온으로 더 빨리 개발할 수 있도록 이온 플레이 그라운드를 시도해 볼 수도 있습니다.
최고의 이온 프레임 워크와 행운을 ...
Ionic Framework Hello World 앱
모든 설정을 마친 후 Hello World App을 만들려면
- 간단한 공백 응용 프로그램을 만들려면 터미널에서 아래 명령을 실행하십시오.
ionic start HelloWorld blank // create new project
cd HelloWorld // get into HelloWorld directory
- subline / webstrome IDE에서 HelloWorld 프로젝트를여십시오.
- www / ditectory에서 index.html 편집
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Hello World App</h1>
</ion-header-bar>
<ion-content>
<div class="center">Hello World..!</div>
</ion-content>
</ion-pane>
</body>
- 터미널에서 브라우저로 실행하려면 다음과 같이하십시오.
ionic serve // run the app in browser
- 플랫폼을 추가하려면 :
ionic platform add android // add android platform
ionic platform add ios // add ios platform
- 기기에서 실행하려면 다음 단계를 따르세요.
adb devices // to check devices is connected
ionic run android // to run on android devices
ionic run ios // to run on ios devices
- livereload에서 실행하려면 :
ionic run android -c -s -l // to check app in live reload with console.
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
참고 : 이것은 독립형 프로젝트가 아닙니다. 주어진 코드는 문제 또는 오류가있는 경우이 문서에서 위에 제시된 절차를 사용하여 작성 및 구현 된 프로젝트와 비교하기위한 것입니다.