안녕하세요. 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김군입니다.

Ionic Native API에 나온대로 Ibeacon을 사용하려고 cordova plugin을 추가했는데요.

추가하자마자 Android에서는 정상작동하는데 IOS에서 app이 splash screen후에 하얀화면만 나오면서 실행이 되지 않습니다.

이럴 때 해결하는 방법입니다.

일단 제가 생각하는 원인은 Ibeacon Library를 설치하는 순간 IOS Platform에서는 background에 대한 설정이 자동으로 들어갑니다.

하지만 소스 상에서는 명시가 되지 않는거죠.

그래서 두 개의 해결방법 중 한 개는  소스 상에 백그라운드에 대한 설정을 명시해주는 것입니다.

Ionic 프로젝트 폴더에서

/platform/ios/AppName/AppName-info.plist 내부에

<key>UIBackgroundModes</key>
<array>
   <string>location</string>
</array>

위와 같이 넣어주시면 IOS에서도 정상작동합니다.

또 한 가지 방법은 

아래 링크와 같이 작업해주시면 정상작동합니다.

Ionic IOS 배포 시 Background Modes 제거

혹시 궁금하신 사항 있으신 분은 댓글 달아주세요.

감사합니다.

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

이번에는 Ionic에서 Android 배포를 시작할 때 apk를 생성하고 서명하는 방법까지 알아보겠습니다.

저는 MAC OS X에서 진행중이기에 MAC을 중심으로 설명드리겠습니다.

우선 터미널에서 배포할 프로젝트 폴더 경로에 접근합니다.

1. 배포 키가 없다면 키를 먼저 생성합니다. (Android는 IOS와 다르게 이 키를 분실할 경우 업데이트를 진행할 수 없기때문에 잘 백업해두시길 권장드립니다.)

keytool -genkey -v -keystore 키이름.jks
-keyalg RSA -keysize 2048 -validity 10000 -alias app

키 이름에는 그냥 관리하시기 편한 키 이름을 적어주시면 되고, 위에 10000이라는 숫자는 유효기간을 뜻합니다.

유효기간은 길게 잡아야하기에 보통 주변 분들도 10000으로 많이 사용하십니다.

2. release apk 파일을 생성합니다.

ionic cordova build android --release

위 명령어를 입력하면 /ProjectFolder/platform/android/build/outputs/apk에 release apk파일이 생성됩니다.

이유는 모르겠지만 이렇게 생성한 release apk 파일은 스마트폰 기기에 옮겨서 설치해도 설치가 되지 않습니다. (아마 서명이 되지 않아서 그런 것 같습니다.)

저도 왜 설치가 안되는지 제가 잘못만든것인지 한참 찾다가 시간을 낭비했는데요... 그냥 이후 단계를 같이 따라하시면서 서명하시면 정상적으로 설치가 진행되니 걱정하지 않으셔도 됩니다.

3. "zipalign"의 경로를 찾아줍니다.

find ~/Library/Android/sdk/build-tools -name "zipalign"

MAC 사용자 기준으로 보통 /Users/username/Library/Android/sdk/build-tools/sdkversion 안에 있습니다.

4. 위에서 찾은 경로에 apk 파일과 1번에서 생성했던 키를 복사해서 넣어줍니다. (굳이 복사할 필요는 없는데 복사하신 후 작업하시는게 빠르고 편합니다.)

5. 서명하기 전에 apk 파일을 최적화합니다.

./zipalign -v -p 4 ApkName.apk 변경할ApkName.apk

위와 같이 진행하면 입력하신 '변경할ApkName' 으로 apk가 하나 더 생성됩니다.

6. apk에 1번에서 만들어놓은 key로 서명을 진행합니다.

./apksigner sign --ks 키이름.jks 서명할Apk이름.apk

위와 같이 진행해주시면 서명이 완료됩니다.

7. 서명 완료 후 서명이 완료되었는지 확인하는 방법은

./apksigner verify --verbose 서명된Apk이름.apk

위와 같이 입력 후 나오는 정보에 JAR signing, APK Signature Scheme 정보가 모두 true로 나오면 인증이 완료된 것입니다.

문의사항 있으시면 댓글 부탁드립니다.

감사합니다.

안녕하세요. IT김군입니다. IOS 처음 배포할 때 겪었던 어려움이 있어 적어봅니다.

IOS iPhone용 App을 배포하려다 보니 아래와 같은 피드백을 받았고, 배포가 거부되었습니다.

--------------------------------------------------------------------------------------------------------------------------------------------------

Guideline 2.5.4 - Performance - Software Requirements

Your app declares support for location in the UIBackgroundModes key in your Info.plist file but does not have any features that require persistent location. Apps that declare support for location in the UIBackgroundModes key in your Info.plist file must have features that require persistent location.

Next Steps

To resolve this issue, please revise your app to include features that require the persistent use of real-time location updates while the app is in the background.

If your app does not require persistent real-time location updates, please remove the "location" setting from the UIBackgroundModes key. You may wish to use the significant-change location service or the region monitoring location service if persistent real-time location updates are not required for your app features.

--------------------------------------------------------------------------------------------------------------------------------------------------

이에 따라 저는 AppName-info.plist 파일에서 <UIBackgroundModes>에서 Location을 제거하는 방법으로 해결하였는데요.

Plugin 때문에 자동으로 생성되고 사용되는 위 소스를 어떻게 제거하느냐 방법은

Xcode로 해당 App을 열고 Plugin 폴더를 확인해보시면 CDVLocationManager.m 파일이 있습니다.

해당 파일을 열고 allow를 검색하시면 아래와 같은 소스가 있는데요.

초기값은 YES로 되어있을 것입니다. 해당 값을 NO로 바꿔줍니다.

그 다음 좌측 프로젝트 탐색기에서 프로젝트 명을 더블클릭하면 나오는 설정 부분에서

백그라운드 모드를 ON에서 OFF로 바꿔주시면 됩니다.

그 후 AppName-info.plist 파일에 가셔서

<UIBackgroundModes>에 대한 항목을 삭제해주신 후 빌드하시면 정상처리됩니다.

저는 이렇게해서 위 피드백에 대한 답변을 통과하여 App을 배포할 수 있었습니다.

문의사항 있으시면 댓글 부탁드립니다.

감사합니다.

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

오늘 Ionic을 빌드하다가 잘 되던게 갑자기 오류가 나서 공유하려고 포스팅합니다.

에러 내용은

(exit code 1) xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance 

해결 방법은 터미널에

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer 

를 입력하여 해결하였습니다.

HomeBrew를 중간에 설치하면서 Command Line Tools for Xcode가 같이 설치되면서 꼬인 것 같습니다.

다른분들께도 도움되길 바랍니다. 감사합니다.

안녕하세요.

전 편에 이어 오늘은 Ionic 시작하기에 대해 포스팅하도록 하겠습니다.

Ionic 설치 부분은 

MAC OS X에 Ionic 환경 구축 및 세팅하기 를 참조해주세요.

그리고 저는 앞으로 Ionic 포스팅에 대해서는 쭉 Visual Studio Code를 사용할 예정입니다.

MAC OS X에 Visual Studio Code 설치하기 및 터미널, 쉘 명령 설정 을 참조해주세요.

Ionic 시작하기의 첫 설명은 프로젝트 생성입니다.

우선 프로젝트를 관리할 적당한 폴더를 하나 생성해주세요. (저는 Ionic_workspace 로 생성하였습니다.)

그 다음 terminal.app 을 실행 후 생성하신 폴더의 경로로 접근합니다.

Ionic 프로젝트 생성 명령어는

ionic start 프로젝트명 템플릿

이렇게 이루어집니다.

어떤 얘기인지 잘 모르시는 분들을 위해 상세설명 드리겠습니다.

프로젝트명은 말그대로 생성하실 프로젝트명이라서 마음대로 입력하시면 됩니다.

템플릿 Ionic에서 기본으로 제공해주는 View와 비슷하다고 보시면 되는데요.

템플릿 명을 입력하지 않고 아래와 같이 입력하셔도 무관합니다.

ionic start 프로젝트명

위와 같이 템플릿을 쓰지 않고 프로젝트 생성 명령어를 입력하게 되면 아래 화면과 같이 템플릿을 고를 수 있는 화면이 나옵니다.

저는 포스팅 예제를 위해 test 라는 프로젝트를 생성해보겠습니다.

템플릿을 입력하지 않고 생성하게 되면 위와 같이 선택 가능한 창이 나오며 여러 종류 중 빈 페이지는 blank를 선택해주시면 됩니다.

blank와 tabs, sidemenu 의 프로젝트 초기 생성 시 화면은 아래와 같습니다.

이제 템플릿이 어떤 것인지 이해되셨는지요.

그래서 예를 들어 test라는 이름의 프로젝트를 빈프로젝트로 생성하고 싶다면

ionic start test blank

라고 입력하면 되는 것입니다.

입력을 하게 되면 test라는 폴더를 생성해주고 그 안에 프로젝트 파일들을 모두 생성하는 작업이 완료됩니다.

완료된 후 cd test를 통해  test라는 폴더로 들어가보겠습니다.

Ionic으로 모바일 Application을 제작하시는 분들은 대부분 Android와 IOS 두 가지 플랫폼의 동시 호환에 목적을 두고 계실거라 생각합니다.

그럼 생성한 프로젝트 폴더내부로 경로를 옮긴 후 Platform 추가하는 방법을 알아보겠습니다.

프로젝트에서 Platform 추가하는 방법입니다.

ionic cordova platform add android

ionic cordova platform add ios

위와 같이 각각 하나씩 platform을 추가해주시면 되겠습니다.

플랫폼을 추가하신 후 저 같은 경우는 Visual Studio Code를 사용하기에 터미널에서 그대로 code . 를 입력하면 코딩을 진행할 수 있습니다.

IDE는 각자의 취향에 따라 사용하시면 될 것 같습니다.

그 다음은 빌드하는 방법입니다.

ionic cordova build android

ionic cordova build ios

위와 같이 각각 하나씩 빌드를 해주시면 됩니다.

그 다음 웹페이지에서 화면을 확인하고 싶다면

ionic serve

위와 같은 명령어를 입력하시면 현재 기본으로 설정되어 있는 브라우저를 통해 제작한 Ionic App의 페이지가 나오게 됩니다.

ionic serve --lab

위와 같이 입력을 하시면 ionic의 livereload 기능이 들어가서 소스를 편집하고 저장 시에 웹페이지도 자동으로 새로고침되며 최신 빌드로 아래와 같이 브라우저에서

보여집니다.

다음 포스팅에서는 새로운 페이지를 생성하는 방법과 Plugin을 추가하는 방법 등등에 대해 다루어보도록 하겠습니다.

감사합니다.

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

오늘은 MAC OS X에 Ionic 환경 세팅 및 구축을 알아보도록 하겠습니다.

1. JAVA JDK와 Android Studio를 설치합니다.

- MAC OS X에 JAVA 설치 및 환경변수 설정

- MAC OS X에 Android Studio 설치하기

2. Node JS를 설치합니다.

Download URL : https://nodejs.org/en/

저는 Node js 호환성 및 안정성때문에 6점대 버전을 사용합니다.

3. AppStore에서 Xcode를 설치합니다.

4. terminal.app을 실행하여 아래와 같이 입력합니다.

   ( Cordova와 Ionic을 설치하는 과정입니다.)

sudo npm install -g cordova ionic

그럼 이쯤에서 중간확인!

terminal.app에서 아래와 같이 입력한 후 nodeJS 버전, Cordova 버전, Ionic 버전이 정상적으로 나오는지 확인합니다,

node -v
cordova -version
ionic -v

제가 현재 사용하는 버전은

Nodejs 6.11.5

ionic 3.19.0

cordova 7.1.0 입니다.

이렇게 하면 Ionic 설치가 완료됩니다.

저는 Ionic으로 App을 개발하면서 Atom Editor를 가장 먼저 사용해봤었는데요.

사용하다보니 Visual Studio Code로 갈아탔습니다.

어떤 IDE가 편한지는 각자의 취향에 맞춰 설치하여 사용하시면 될 것 같습니다.

다음 포스팅은 Ionic 첫 시작하기로 돌아오겠습니다.

궁금하신 사항은 댓글로 남겨주세요. 감사합니다.