안녕하세요. IT김군입니다.

cordova IBeacon Plugin을 사용하면서 Advertise를 하시는 분들이라면 감도에 대해 궁금해하실텐데요.

저도 작업하다가 자주 까먹는 바람에 여기에 적어놓습니다.

IOS는 우선 Cordova Plugin으로 감도 조절이 되지 않는 것으로 알고 있습니다. (Native는 어떨지 모르겠네요.)

Android는 아래와 같이 감도 조절을 하시면 됩니다.

우선 플러그인을 추가해줍니다.

ionic cordova plugin add cordova-plugin-ibeacon
npm install --save @ionic-native/ibeacon

그 다음 app.module.ts에 선언해줍니다.

import { IBeacon } from '@ionic-native/ibeacon';

proviers : [
   IBeacon
]

/plugins/com.unarin.cordova.beacon/src/android/LocationManager.java

startAdvertising() 부분 중간에 beaconTransmitter의 값을 초기화하는 부분이 있습니다.

그 밑에

beaconTransmitter.setAdvertiseMode('설정값A');
beaconTransmitter.setAdvertiseTxPowerLevel('설정값B');

위와 같이 소스를 넣어주시고 저장해주시면 됩니다.

설정값 A는 송출 빈도를 설정하는 부분으로

ADVERTISE_MODE_LOW_POWER = 0     / 1초에 1번

ADVERTISE_MODE_BALANCED = 1    / 1초에 3번

ADVERTISE_MODE_LOW_LATENCY = 2    / 1초에 10번

으로 설정가능하며 (뒤에 number형으로 값을 넣으셔도 무방하고 앞에 상수로 넣으셔도 됩니다. 상수는 beaconTransmitter.ADVERTISE_MODE_LOW_POWER 형식으로 사용하시면 됩니다.),

설정값 B는 송출 강도를 설정하는 부분으로

ADVERTISE_TX_POWER_ULTRA_LOW = 0

ADVERTISE_TX_POWER_LOW = 1

ADVERTISE_TX_POWER_MEDIUM = 2

ADVERTISE_TX_POWER_HIGH =  3

으로 설정할 수 있습니다(뒤에 number형으로 값을 넣으셔도 무방하고 앞에 상수로 넣으셔도 됩니다. 상수는 beaconTransmitter.ADVERTISE_TX_POWER_HIGH 형식으로 사용하시면 됩니다.).

ex)

beaconTransmitter.setAdvertiseMode(beaconTransmitter.ADVERTISE_MODE_LOW_POWER);
beaconTransmitter.setAdvertiseTxPowerLevel(beaconTransmitter.ADVERTISE_TX_POWER_HIGH);
beaconTransmitter.setAdvertiseMode(0);
beaconTransmitter.setAdvertiseTxPowerLevel(2);

궁금하신 사항은 댓글달아주세요.

감사합니다.

안녕하세요. IT김군입니다.

Ionic 세로로 화면 고정하기에 대해 알아보도록 하겠습니다.

Screen Orientation Plugin을 사용합니다.

ionic cordova plugin add cordova-plugin-screen-orientation
npm install --save @ionic-native/screen-orientation

우선 Plugin을 프로젝트에 설치해주신 후에

import { ScreenOrientation } from '@ionic-native/screen-orientation';

providers : [
     ScreenOrientation
]

위와 같이 app.module.ts에 선언해줍니다.

그 다음 적용하실 페이지에 아래와 같이 import 와 생성자에 선언해주세요.

import { ScreenOrientation } from '@ionic-native/screen-orientation';

constructor(private screenOrientation : ScreenOrientation)

저 같은 경우는 모든 페이지에 적용하기 위해 app.component.ts에 적용하였습니다.

app.component.ts의 MyApp 클래스 생성자 내부에

this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT_PRIMARY);

를 입력하시면 적용한 페이지는 화면 회전이 불가하게 세로로 고정됩니다.

위 링크를 타고 API를 확인하러 가시면 더 많은 화면 컨트롤 기능이 있으니 확인하시면 될 것 같습니다.

문의사항 있으시면 댓글주세요.

감사합니다.

안녕하세요. IT김군입니다.

Ionic cordova plugin Background Mode 사용 시 IOS에서 빌드가 안되는 현상에 대해 알아보도록 하겠습니다.

해당 프로젝트를 Xcode로 열어줍니다.

그 후 프로젝트 탐색기 창에서 아래와 같이 'AppBackgroundMode.m' 파일을 찾아서 열어줍니다.

파일을 열고 'command+F'를 통해 'require'를 검색하면 아래 드래그 되어있는 부분과 같이 되어있을텐데요.

여기서 _ 밑줄을 지워줍니다. 아래와 같이 만들어줍니다.

그럼 이제 정상적으로 빌드가 되실겁니다.

하지만 BackgroundMode Plugin을 추가함과 동시에 info.plist에 <UIBackgroundModes> <audio>가 추가되기에

배포 시 문제가되어 apple에서 승인을 내주지 않을 수 있으니 주의하시기 바랍니다.

감사합니다.

안녕하세요. IT김군입니다.

오늘은 html 화면에 Android , IOS 구분하여 보여지게 하는 법에 대해 알아보겠습니다.

아래와 같이 기능을 사용하실 페이지의 ts파일에서 Platform을 import 해주셔야합니다.

import { Platform } from 'ionic-angular';

constructor(platform : Platform){
    this.platform = platform;
}

위 코드를 완료하였다면 이제 분리해서 코딩할 html 파일에 들어갑니다.

아래는 버튼으로 만든 예제입니다.

<button *ngIf="platform.is('android')" ion-button>Android</button>
<button *ngIf="platform.is('ios')" ion-button>IOS</button>

위와 같이 써주면 Android 디바이스에서는 Android 라는 이름의 버튼만 보이고

IOS 디바이스에서는 IOS 라는 이름의 버튼만 보입니다.

궁금하신 점 댓글주세요. 감사합니다.

안녕하세요. IT김군입니다.

Ionic typescript에서 플랫폼 구분하여 코딩하는 방법에 대해 알아보겠습니다.

우선 구분하여 코딩할 ts파일 상단에 보면 아래와 같은 소스가 있습니다.

import { NavController } from 'ionic-angular'

여기서 ,로 구분하여 Platform을 추가하여 줍니다.

import { NavController, Platform } from 'ionic-angular'

Platform을 추가로 import 하였으니 생성자에도 작업을 해줘야겠죠?

constructor(private platform : Platform)

위와 같이 생성자 파라미터에 추가해줍니다.

그 다음 플랫폼 구분하여 코딩해야하는 부분에 아래와 같이 사용하시면 됩니다.

if(this.platform.is('android')){
   console.log('android!!!!');
}else if(this.platform.is('ios'){
   console.log('ios!!!!);
}else{
   console.log('other platform');
}

궁금하신 점 있으시면 댓글 부탁드립니다.

감사합니다.

안녕하세요. IT김군입니다.

이번에는 Ionic Button에서 longPress에 대해 알아보도록 하겠습니다.

ionic button을 html에 생성하실 때 아래와 같이 생성하시면 됩니다. (A,B,C,D,E에 대한 설명은 아래 추가하겠습니다.)

<button ion-button ion-long-press [interval]="A" (onPressStart)="B" (onPressing)="C"
(onPressEnd)="D">E</button>

A = 몇 초에 한 번씩 이벤트를 발생할 것인지 시간을 적는 부분입니다. 만약 2초를 선택하시려면 2000을 적어주시면 됩니다.

B = 처음 누르기 시작할 때의 이벤트입니다. typescript 파일에 코딩한 function을 많이 사용합니다.

C = A에서 입력된 시간만큼 버튼을 누르고 있을 시 발생할 이벤트입니다. typescript 파일에 코딩한 function을 많이 사용합니다.

D = 버튼을 누르고 땔 때 발생하는 이벤트입니다. A에서 입력한 만큼 누르고 있지 않아도 땔 때마다 이벤트가 발생합니다. typescript 파일에 코딩한 function을 

      많이 사용합니다.

E = 버튼의 이름입니다. 버튼의 이름을 자유롭게 입력해주시면 됩니다.

예를 들어 버튼을 누르자마자 start()를 호출하고 5초간 누르고 있을 시 press()를 호출하고 버튼에서 손을 땔 때 end()를 호출하는 '테스트'라는 이름의 버튼을 만들고 싶다면

<button ion-button ion-long-press [interval]="5000" (onPressStart)="start()" (onPressing)="press()"
(onPressEnd)="end()">테스트</button>

위와 같이 코딩해주시면 됩니다.

추가하실 기능들은 직접 응용하셔서 추가하시면 될 것 같습니다.

궁금하신 점 있으시면 댓글 달아주세요.

감사합니다.

안녕하세요. IT김군입니다.

오늘은 Ionic Project에서 새로운 페이지를 추가하는 방법에 대해 알아보겠습니다.

터미널을 실행하여 Ionic 프로젝트 폴더의 경로로 이동합니다.

그 다음 새로운 페이지를 추가하는 명령어는

ionic g page 페이지이름

또는

ionic generate 페이지이름

명령어를 입력하게 되면 '페이지이름'으로 /src/pages/ 밑에 폴더가 생성되며 입력한 페이지이름으로 html / module.ts / scss / ts 4개의 파일이 생성됩니다.

저는 test라는 페이지를 생성해보겠습니다.

test라는 페이지를 맨 위의 명령어로 생성하면 위 사진과 같이 파일들이 생성됩니다.

파일은 생성되었지만 여기서 끝이 아닙니다.

다음은 test.ts 파일을 열어보도록 하겠습니다.

그럼 위와 같이 나오는데요. 여기서 class명인 TestPage를 복사합니다.

그 다음 /src/app/app.module.ts로 이동하겠습니다.

여기에 아래와 같이 3가지를 입력해주셔야 페이지 생성이 완료됩니다.

궁금하신 점 있으시면 댓글 부탁드립니다.

감사합니다.

안녕하세요. IT김군입니다.

ionic 프로젝트를 생성하신 후 platform을 추가하시면 ionic 프로젝트 폴더 바로 밑에 config.xml이 생성되는데요.

그 config.xml의 첫 내용은 아래와 같습니다.

2번째 줄 <widget id="패키지명">

위 패키지명에 변경할 패키지명을 입력하시고 빌드하시면 정상적으로 패키지명이 변경됩니다. (Android & IOS 동일)

2번째 줄 <widget version="변경할 버전">

위 변경할 버전에 버전을 입력하시고 빌드하시면 정상적으로 버전이 변경됩니다. (Android & IOS 동일)

3번째 줄 <name>앱 이름(제목)</name>

위 앱 이름(제목) 부분에 앱 이름을 입력하시면 되는데요.

앱 이름은 그냥 빌드하셔서 변경되지 않습니다.

꼭 현재 설치되어 있는 플랫폼을 모두 제거해주신 후 다시 설치해주셔야 정상적용됩니다.

ionic cordova platform rm android
ionic cordova platform rm ios

ionic cordova platform add android
ionic cordova platform add ios

궁금하신 부분 있으시면 댓글 부탁드립니다.

감사합니다.

안녕하세요. IT김군입니다.

Ionic Framework에서 icon과 splash를 변경하는 방법에 대해 알아보도록 하겠습니다.

우선 Icon, splash로 사용할 각각의 png파일을 준비해줍니다. (Icon = 1024 x 1024  / splash = 2732 x 2732 )

원형이나 삼각형 등은 되지 않고 정사각형으로 되어야 합니다.

그럼 준비된 두 파일을 Ionic 프로젝트 폴더 내에 있는 resources 폴더에 넣어줍니다. (   /resources/icon.png ,  /resources/splash.png   )

그리고 이 작업을 수행하시려면 ionic의 id와 password가 있어야합니다.

없으신 분들은 ionic 홈페이지에 가셔서 계정을 만드신 후 아래를 진행하시면 될 것 같습니다.

1. icon / splash 둘 다 만들기 및 적용하기

터미널을 실행하여 해당 프로젝트 폴더 밑에 있는 resources 경로까지 이동하여 줍니다.

그 후 아래와 같이 입력하시면 됩니다.

ionic cordova resources

터미널에 위와 같이 입력하면 icon과 splash가 모두 만들어지며 적용됩니다.

2. icon만 만들기

ionic cordova resources --icon

3. splash만 만들기

ionic cordova resources --splash

위와 같이 진행하면 icon과 splash가 만들어집니다.

그 다음 app을 실행하면 쨘! 왜 적용이 안되어있지...............

platform을 삭제했다가 다시 설치해야합니다.

삭제했다가 다시 설치해줍시다.

ionic cordova platform rm android
ionic cordova platform rm ios

ionic cordova platform add android
ionic cordova platform add ios

위와 같이 해주신 후 다시 빌드하고 실행하시면 정상적으로 적용된 것을 확인하실 수 있으실겁니다!

궁금하신 점 있으시면 댓글달아주세요.

감사합니다.

안녕하세요. IT김군입니다.

MAC OS X를 사용하면서 듀얼모니터를 사용하다보니 저도 모르게 dock이 다른 모니터로 이동해버리는 현상이 있었습니다.

도무지 dock이 왜 이동을 하는지 몰랐는데 알고보니 마우스로 dock을 이동하더군요....

그 방법에 대해 설명해보도록 하겠습니다.

제가 설정한 초기 화면은 아래와 같이 좌측 모니터에 dock이 있는 형태였습니다.

그런데 가끔 사용하다보면 보조모니터 쪽으로 dock이 이동하더라구요.

그 이유는 마우스 포인터였습니다.

마우스 포인터를 우측 모니터 하단부로 쭉 내리기만하면 dock이 이동합니다.

다시 좌측으로 바꾸려면 좌측 모니터 하단부로 마우스 포인터를 쭉 내리면 dock이 이동합니다.

너무 기본적인건데 저만 몰랐던 사실인가요....??

추가적으로 option + command + d 버튼으로 아래와 같이 dock을 숨길 수 있습니다.

dock을 숨기신 후에 마우스를 가져다 대시면 다시 dock이 올라옵니다.

windows에서 작업표시줄 숨김 기능과 같습니다.

궁금하신점 댓글주세요~

감사합니다.