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

Socket.io로 Client에서 통신하는 방법에 대해 적어보도록 하겠습니다.

우선 터미널에서 프로젝트에 패키지를 설치합니다.

$ npm install typings --global
$ typings install dt~socket.io-client --global --save
$ npm install socket.io-client --save

그 다음 Socket.io를 사용하실 페이지에 import 및 생성자에 선언해줍니다.

import { NgZone } from '@angular/core';
import * as io from 'socket.io-client';

export class HomePage{
    constructor(private zone : NgZone){}
}

아래는 socket.io를 연결하는 부분입니다.

socket.io를 연결할 URL에는 http 혹은 https를 무조건 붙여주도록 합니다. (붙이지 않으면 Android에서 인식하지 못합니다.)

아래 console.log 부분의 "this._any_socket.id"는 socket.io가 연결되지 않을 시 undefined로 값이 나오며, socket.io가 연결되었다면 그 id값이 나오게 됩니다.

private _str_socketURL : string = "http://www.yourURL.co.kr:0000";
private _any_socket : any;
private _strarr_chats : string[];

socketConnect(){
   this._any_socket = io(this._str_socketURL);
   this._strarr_chats = [];
   this._any_socket.on('connect', () => {
      console.log("@@ Socket Connect Check : "+this._any_socket.id);
   });
}

이제 socket.io로 연결을 했으니 서버로 정보를 송신해보겠습니다.

아래와 같이 정보를 보내며 'sendEvent'는 서버측과 정해놓은 이벤트 명입니다.

SendValue는 서버측으로 송신할 정보입니다.

이벤트의 경우 서버측과 협의하여야 하며, 이벤트 명을 맞추어 그에 따른 동작에 대해 작업하여야 합니다.

socketSendMsg(){
   this._any_socket.emit('sendEvent', SendValue);
}

이제 보냈으니 받는 부분도 해봐야겠죠?

받는 부분도 보내는 부분과 비슷한 점은 서버측과 협의된 이벤트가 있어야한다는 점입니다. (receiveEvent로 기재했습니다.)

그리고 아래 나온 _strarr_chats는 아까 connect 부분에서 초기화시켜준 변수입니다.

socketReceiveMsg(){
   this._any_socket.on('receiveEvent', (receiveMsg) => {
      this.zone.run(() => {
         this._strarr_chats.push(receiveMsg);
         console.log(receiveMsg);
      })
   });
}

마지막으로 socket.io 연결을 끊는 동작입니다.

socketDisconnect(){
   this._any_socket.disconnect();
}

Socket.io로 서버와 통신하는 기본적인 부분만 기재해보았습니다.

진짜 기본적인 기능만 기재하였고 추가적인 기능은 API를 참조하시면 될 것 같습니다.

Socket.io API  <---- Client API 링크 남깁니다.

감사합니다.

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

오늘은 Ionic3에서 이미지 2개를 하나로 합하여 확대, 축소하는 방법까지 알아보도록 하겠습니다.

이 방법을 찾느라 한 일주일은 삽질한 것 같네요.... 처음엔 이미지가 안뜨고 나중에는 이미지를 띄웠더니 Android에서는 작동이 안되고

또 Android를 맞췄더니 IOS가 안되고.......... 그래서 이것저것 삽질하다가 찾은 방법입니다.

우선 image 작업을 하실 페이지 html 파일을 먼저 보겠습니다.

//page.html

<ion-header>
   <ion-navbar>
      <ion-title>
         타이틀명
      </ion-title>
   </ion-navbar>
</ion-header>

<ion-content padding>
   <div class="ion-canvas" hidden>
      <canvas #canvas id="canvas"></canvas>
   </div>
   <img src={{this.compositeImage}} #myImage (click)="presentImage(myImage)"/>
</ion-content>

html은 위와 같이 작성하였습니다.

canvas같은 경우는 어차피 두 이미지를 병합한 하나의 이미지를 this.compositeImage에서 보여주려고 일부러 hidden 처리 하였습니다.

그 다음 Zoom In / Zoom out 기능은 ioinc-img-viewer를 사용할 계획이니 터미널에서 추가해줍니다.

$ npm install --save ionic-img-viewer

추가했으니 app.module.ts에도 추가해줍니다.

import { IonicImageViewerModule } from 'ionic-img-viewer';

@NgModule({
   imports : [
      IonicImageViewerModule
   ]
})
export class AppModule {}

그 다음 이 이미지를 사용하실 페이지에 typescript 파일을 코딩해봅시다!

예를 들어 page.ts라고 하겠습니다.

import { Component, ElementRef, ViewChild } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { ImageViewerController } from 'ionic-img-viewer';

export class Page {

  @ViewChild('canvas') canvasEl : ElementRef;
  
    private _Canvas : any;
  
    private _Context : any;
    private compositeImage;
  
    private image1 : string;
    private image2 : string;
  
    private image : any = new Image();
    private _image : any = new Image();
    private _imageViewerCtrl : ImageViewerController;

  constructor(public navCtrl: NavController, private platform : Platform, 
     private imgViewerCtrl : ImageViewerController) {
    this._imageViewerCtrl = imgViewerCtrl;
  }

  presentImage(myImage){
    const imageViewer = this._imageViewerCtrl.create(myImage);
    imageViewer.present();
  }

  ionViewDidLoad(){
    this._Canvas = document.createElement('canvas');
    this._Canvas.width = (number)canvas width Size;
    this._Canvas.height = (number)canvas height Size;

    this.platform.ready().then(() => {
      if(this._Canvas.getContext){
        this._Context = this._Canvas.getContext('2d');
        
        this.showImage();
      }
    });
  }

  showImage(){
    this.image1 = 'assets/imgs/sky.png';
    this.image2 = 'assets/imgs/img.png';
    this.image.src = this.image1;
    this.image.onload = () => {
      this._Context.drawImage(this.image, 0, 0, (number)widthSize, (number)heightSize);

      this._image.src = this.image2;
      this._image.onload = () => {
        this._Context.drawImage(this._image, 347.315, 317.288, 50, 50 );
  
        this.compositeImage = this._Canvas.toDataURL("image/png");
      }
    };
  }
}

platform.ready().then()이나 onload()의 경우는 Android와 IOS 각 플랫폼에서 실행 시 모두 호환되는 최적의 시점을 찾다보니 사용하였습니다.

(number) width Size나 (number) Height Size에는 원하시는 크기의 숫자를 넣으시면 됩니다.

this._Context.drawImage()의 파라미터는 (new Image(), x축 좌표, y축 좌표, 이미지 넓이, 이미지 높이); 입니다.

그래서 저는 테스트용으로

위 두 그림을 합쳐보았습니다.

그래서 아래와 같은 결과물을 얻을 수 있었습니다.

위 스크린샷에서 이미지를 누르면 Plugin API를 통해 이미지만 따로 표시되는 modal창이 발생하며 이 modal창에서 확대 축소 기능을 사용할 수 있습니다.

투명화 이미지로 사용하시면 투명화 된 그대로 병합됩니다.

혹시나 궁금하신 점 있으시거나 제가 잘못적은 부분이 있다면 댓글 부탁드립니다.

감사합니다.

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

저는 사용자가 백그라운드로 이동했다가 포그라운드로 돌아올 때 어떠한 설정이 바뀌었는지 확인할 수가 없기에

해당 이벤트가 필요했습니다.

해당 이벤트를 사용하실 페이지의 ts파일에 아래와 같은 소스를 사용하시면 될 것 같습니다.

import { Platform } from 'ionic-angular';

private toForeground : any;
constructor(private platform : Platform){
   this.toForeground = this.platform.resume.subscribe(() => {
      console.log("Entered Foreground");
   });
}

잘못된 점이나 궁금한 점 있으시면 댓글부탁드립니다.

감사합니다.

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

사용자 설정같은 부분에 토글(toggle)버튼을 많이들 사용하실텐데요.

이 토글버튼 활용에 대해서 알아보도록 하겠습니다.

아래는 토글 버튼을 추가하실 html에 넣을 소스입니다.

<ion-list>
   <ion-item>
      <ion-label>토글 버튼</ion-label>
         <ion-toggle value="test" [(ngModel)]="test" color="danger" (ionChange)="toogleTest(test)">
         </ion-toggle>
   </ion-item>
</ion-list>

위에서 보시면 test라는 변수와 toggleTest(test)라는 함수를 포함하였습니다.

아래는 typescript 파일의 소스입니다.

private test : boolean = true;

toggleTest(value){
   if(value){
      console.log("toggle Value : "+value); //toggle True
   }else{
      console.log("toggle Value : "+value); //toggle False
   }
}

최초 test변수가 true로 되어있으면 toggle 버튼도 체크되어 있는 상태입니다.

위 html에서 (ionChange)에 toggleTest(test)를 넣었기에 toggle 버튼을 클릭하여 상태가 바뀔 때 마다 toggleTest()에 변동값 (test = true / false)를 파라미터로 활용하여 실행합니다.

위 예제 소스를 보시고 응용해서 사용하시면 될 것 같습니다.

감사합니다.

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

Ionic Framework로 Cross Platform을 개발할 시 IOS는 종료의 기능을 지원하지 않으니 Android의 종료기능을 구현하셔야 될텐데요.

저 같은 경우는 뒤로가기 두 번으로 App을 종료하는 기능을 자주 사용합니다.

모든 페이지에 다 적용되도록 app.component.ts에 작업하였습니다.

우선 import 작업과 생성자에 선언 작업을 아래와 같이 해줍니다.

import { App, Platform , ToastController } from 'ionic-angular';

constructor(platform : Platform, private app : App, private toastCtrl : ToastController)

위의 작업이 완료되셨다면 저는 생성자 platform.ready().then(() => {'여기'}); 저 플랫폼레디 내부에 아래 소스를 넣었습니다.

// 뒤로가기 두 번 종료
      platform.registerBackButtonAction(() => {
        const overlay = this.app._appRoot._overlayPortal.getActive();
        const nav = this.app.getActiveNav();
        const closeDelay = 2000;
        const spamDelay = 500;

        if(overlay && overlay.dismiss) {
          overlay.dismiss();
        } else if(nav.canGoBack()){
          nav.pop();
        } else if(Date.now() - this.lastBack > spamDelay && !this.allowClose) {
          this.allowClose = true;
          let toast = this.toastCtrl.create({
            message: "'뒤로가기' 버튼을 연속으로 두 번 누르시면 App이 종료됩니다.",
            duration: closeDelay,
            dismissOnPageChange: true
          });
          toast.onDidDismiss(() => {
            this.allowClose = false;
          });
          toast.present();
        } else if(Date.now() - this.lastBack < closeDelay && this.allowClose) {
          platform.exitApp();
        }

        this.lastBack = Date.now();
      });

넣고 나면 정상작동하는 것을 확인하실 수 있습니다.

궁금하신 점이나 제가 틀린 부분이 있다면 댓글달아주세요.

감사합니다.

안녕하세요. 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');
}

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

감사합니다.