'하이브리드'에 해당되는 글 8건

하이브리드/아이오닉

하이브리드 앱 소개 및 아이오닉 소개, 설치 방법

하이브리드 앱

-> 웹 기술을 통해 앱을 개발하여 다양한 OS에 지원되는 앱을 칭한다



하이브리드 앱과 네이티브, 웹앱 비교

네이티브 앱

장점 : 빠르다, 네이티브 API 사용의 편의성

단점 : 언어의 제약, 플랫폼 한정적


웹앱

장점: 유지보수의 편리성, 크로스 플랫폼

단점 : 네이티브 액세스 못함


하이브리드 앱

장점 : 웹개발과 동일하여 개발의 연속성, 크로스 플랫폼

단점 : 성능이 느리다. (저사양 기기에서 호환안됨, 최저 OS 버전 필요)




아이오닉 소개

아니오닉

-> 웹 사이트와 웹 애플리케이션 개발에 사용했던 html, css, javaScript 등을 그대로 사용할 수 있게 해주는 도구와 유틸리티의 모음

-> AngularJS를 사용하여 웹 애플리케이션을 지원

-> 사용자 인터페이스와 UX를 지원

-> CLI 환경에서 명령어 사용을 통해 조작


코르도바

->플랫폼과 애플리케이션 사이의 브릿지를 생성하기 위한 도구이며, 설치 가능한 네이티브 앱을 만들어 준다.

 

 
개발환경 구축

-> node.js 설치하여 onic CLI 설치, 코르도바 설치

-> npm install -g cordova ionic



하이브리드/아이오닉

ionic 파일구조 설명


아이오닉 파일구조


 아이오닉을 설치하고 프로젝트를 만들면 코드로바 설정에 관련된 파일과

아이오닉 프레임워크에서 생성되는 파일들이 존재한다.



파일 구조

.bowerrc

.gitignore

bower.json

config.xml

gulpfile.js

hooks

ionic.project

package.json

plugins

scss

www


이중 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 -c

ionic emulate android -l -c


3. 장치에서 미리보기 (ionic run)

-> 장치 연결 필요

-> 아이폰의 경우 시큐리티 프로필 연결이 xcode에서 설정이 필요하다.

-> 아이폰의 경우 platforms/ios 디렉토리에서 .xcodeproj 확장자 파일을 열어 배포 옵션으로 장치를 고를 수 있다.

-> 실시간 새로고침 및 로그 뷰 가능

ionic run ios -l -c

ionic run android -l -c


프로젝트에 실행가능한 플랫폼 추가

에뮬또는 장치에서 실행할 때는 프로젝트가 선택한 플랫폼을 지원할 수 있게 설정

-> ionic platform add ios

-> ionic platform add android

=> platforms 디렉토리를 보면, 각 플랫폼에 따라 플랫폼 의존적인 파일들이 생성됨.

하이브리드/아이오닉

ionic back button 제거

ion-navbar 태그에서

hideBackButton 옵션만 기재해주면 된다.



<ion-navbar hideBackButton color="primary">


하이브리드/아이오닉

ionic2 현재 플랫폼 확인 방법

// platform 확인을 위한 모듈 추가
import { Platform } from 'ionic-angular';  


// app.component.ts 파일에서 플랫폼 확인


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@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.log("running on iOS device!"); 
            } 
            if (this.platform.is('mobileweb')) { 
                console.log("running in a browser on mobile!"); 
            } 
 
        }); 
    } 
}
cs



 [ 1 ]  [ 2 ] 

푸터바

알림

이 블로그는 구글에서 제공한 크롬에 최적화 되어있고, 네이버에서 제공한 나눔글꼴이 적용되어 있습니다.

카운터

  • Today : 41
  • Yesterday : 627
  • Total : 55,492