하이브리드
하이브리드 앱 소개 및 아이오닉 소개, 설치 방법
하이브리드 앱-> 웹 기술을 통해 앱을 개발하여 다양한 OS에 지원되는 앱을 칭한다 하이브리드 앱과 네이티브, 웹앱 비교네이티브 앱장점 : 빠르다, 네이티브 API 사용의 편의성단점 : 언어의 제약, 플랫폼 한정적 웹앱장점: 유지보수의 편리성, 크로스 플랫폼단점 : 네이티브 액세스 못함 하이브리드 앱장점 : 웹개발과 동일하여 개발의 연속성, 크로스 플랫폼단점 : 성능이 느리다. (저사양 기기에서 호환안됨, 최저 OS 버전 필요) 아이오닉 소개 아니오닉-> 웹 사이트와 웹 애플리케이션 개발에 사용했던 html, css, javaScript 등을 그대로 사용할 수 있게 해주는 도구와 유틸리티의 모음-> AngularJS를 사용하여 웹 애플리케이션을 지원-> 사용자 인터페이스와 UX를 지원-> CLI 환경에서..
ionic 파일구조 설명
아이오닉 파일구조 아이오닉을 설치하고 프로젝트를 만들면 코드로바 설정에 관련된 파일과아이오닉 프레임워크에서 생성되는 파일들이 존재한다. 파일 구조.bowerrc.gitignorebower.jsonconfig.xmlgulpfile.jshooksionic.projectpackage.jsonpluginsscsswww 이중 config.xml, hooks, platforms, plugins, www는 코르도바 설정에 관련된 파일과 디렉토리나머지는 아이오닉에 의해 만들어진 것 config.xml는 코르도바가 플랫폼 파일들을 생성할 때 사용제작자 정보, 프로그램 정보, 플러그인 정보들이 포함됨 www는 웹뷰 안에서 실행될 웹 애플리케이션 정보가 포함 됨
아이오닉 실행방법
아이오닉 실행방법 아이오닉에서 개발된 앱을 실행하는 방법은 총 3가지가 존재한다. 1. 브라우저에서 보여주기2. 에뮬레이터 미리보기3. 장치에서 미리보기 1. 브라우저 미리보기 (ionic serve)-> 기본 주소는 http://localhost:8100-> 기본 포트는 8100 2. 에뮬레이터 미리보기 (ionic emulate {ios|android})-> 맥은 xcode, 안드로이드는 안드로이드 스튜디오 설치 필요->맥에서 ios를 에뮬레이팅 할때는 ios-sim도 설치해야한다. (npm install -g ios-sim)-> 실시간 새로고침 및 로그 뷰 가능ionic emulate ios -l -cionic emulate android -l -c 3. 장치에서 미리보기 (ionic run)-> ..
ionic2 현재 플랫폼 확인 방법
// platform 확인을 위한 모듈 추가 import { Platform } from 'ionic-angular'; // app.component.ts 파일에서 플랫폼 확인 12345678910111213141516171819202122@Component({ templateUrl: 'app.html' }) export class MyApp { rootPage = HomePage; constructor(platform: Platform) { platform.ready().then(() => { if (this.platform.is('android')) { console.log("running on Android device!"); } if (this.platform.is('ios')) { console..
뒤로가기 버튼 차단
앱의 비밀번호 입력 페이지등을 만들다 보면 뒤로가기 버튼을 막아야 하는 경우가 있다. 이 경우 platform에서 제공하는 뒤로가기 버튼 Action을 재정의하여 차단한다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445 // Property used to store the callback of the event handler to unsubscribe to it when leaving this page public unregisterBackButtonAction: any; constructor(...) { ... } ionViewDidEnter() { this.initializeBackButtonCusto..
백그라운드 상태에서 활성화 되었을때 동작 수행
앱을 사용하다가 다른 앱을 사용하다가 다시 사용하려고 할때 이벤트를 잡으려고 할경우엔 app.component.ts 파일에 12345678910constructor( private platform: Platform ) {platform.ready().then(() => { this.platform.pause.subscribe(() => { console.log('[INFO] App paused'); }); this.platform.resume.subscribe(() => { console.log('[INFO] App resumed'); });});Colored by Color Scriptercs resume.subscribe를 구현하여 그안에 다시 활성화 되었을때 실행할 코드를 기입한다
UI 요소 동적으로 disabled 처리
ts 파일에 기준이 되는 변수 선언 isenabled:boolean=false; ts 파일에서 상황에 따라 변수 값을 변경 changeAble() { if(input !== '') { //enable the button isenabled=true; } else { //disable the button isenabled=false; } } Html표시 ts에 변수의 값이 변경됨에 따라 view에서 button의 활성화 여부가 결정된다.