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

하이브리드/아이오닉|2018. 5. 27. 22:02

하이브리드 앱

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



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

네이티브 앱

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

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


웹앱

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

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


하이브리드 앱

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

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




아이오닉 소개

아니오닉

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

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

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

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


코르도바

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

 

 
개발환경 구축

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

-> npm install -g cordova ionic



댓글()

아이오닉 실행방법

하이브리드/아이오닉|2018. 5. 27. 21:59

아이오닉 실행방법


아이오닉에서 개발된 앱을 실행하는 방법은 총 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 디렉토리를 보면, 각 플랫폼에 따라 플랫폼 의존적인 파일들이 생성됨.

댓글()

백그라운드 상태에서 활성화 되었을때 동작 수행

하이브리드/아이오닉|2018. 5. 27. 21:57

앱을 사용하다가

다른 앱을 사용하다가 다시 사용하려고 할때 

이벤트를 잡으려고 할경우엔

app.component.ts 

파일에




1
2
3
4
5
6
7
8
9
10
constructor( private platform: Platform ) {
platform.ready().then(() => {    
    this.platform.pause.subscribe(() => {
        console.log('[INFO] App paused');
    });
 
    this.platform.resume.subscribe(() => {
        console.log('[INFO] App resumed');
    });
});
cs



resume.subscribe를 구현하여 그안에

다시 활성화 되었을때 실행할 코드를 기입한다



댓글()

UI 요소 동적으로 disabled 처리

하이브리드/아이오닉|2018. 5. 27. 21:56

ts 파일에 기준이 되는 변수 선언
isenabled:boolean=false;

ts 파일에서 상황에 따라 변수 값을 변경
changeAble() {
  if(input !== '')
  { 
     //enable the button isenabled=true; 
   else { 
      //disable the button isenabled=false; 
   }
}

Html표시
<button ion-button [disabled]="!isenabled"></button>

ts에 변수의 값이 변경됨에 따라 view에서 button의 활성화 여부가 결정된다.

댓글()

일정, 일기작성 다이어리. 위들 다이어리 출시

프로그램/Wedul Diary|2018. 5. 27. 21:39







나의 하루를 책임지는 어플 
위들 다이어리가 출시 되었습니다.

일별로 작성된 일기와 일정을 
Timeline에서 월별로 모아 보는 기능을 제공합니다.

**영역별 기능 정리**


※ Timeline

* 월별 입력된 일기 및 스케줄 타임라인 형식으로 확인 가능
* 일기를 입력한 사진과 함께 card 형식으로 제공


※ Diary

* 일별 사진 및 문자를 포함한 일기 작성 기능
* 월별 출력되는 달력을 통해 일자별 일기 뷰 제공

※ Schedule

* 일정 등록 기능 제공
* 월, 일, 주별로 등록된 일정 확인 가능

※ Config

* 어플리케이션 잠금기능 
* TouchID로 잠금 해제 기능 (ios)
* 일기 알림기능 
* 개발자 문의 기능
* 개발자 홈페이지 접속 기능



**다운로드 주소**

Android 다운로드 - PlayStore 주소


https://play.google.com/store/apps/details?id=com.wedul.diary

지원되는 Android 버전
4.1 이상

업데이트 날짜
2017년 10월 22일

현재 버전
0.0.1



아이폰 버전
ios 다운로드 - 추후 지원




많은 다운로드 및 리뷰 부탁드립니다.



댓글()