ionic2 takit

1. Class overview
kalen.lee@takit.biz
0505-170-3636
www.takit.biz

2. ionic component
• layout: ionic-grid, ionic-row, ionic-col
• scroll : shophome페이지 참조, this.menusContentRef.resize();
https://ionicframework.com/docs/v2/api/components/content/Content/
• infinite scroll : shopmypage,cash페이지 참조, infiniteScroll.enable(false);
https://ionicframework.com/docs/v2/api/components/infinite-
scroll/InfiniteScroll/
• ModalController: cashConfirmPage참조, alert대신 사용, custom format 가능
iphone에서 alert 중복시 앱 락발생
• Scroll처리는 아직 버그가 많음(특히 iphone키패드). 적절히 workaround작업
이 필요함.

3. angular2 기초
• Provider: storageProvider, serverProvider, LoginProvider참조
ionic g provider providerName
@Injectable()
export class ProviderName{…}
• app.module.ts의 providers: [{…}]에 추가
• Storage(local storage) 사용을 위해서는 Storage provider추가 필요함
• 설계할때 circular reference 안되도록 정의해주세요.
• Custom Directive: focuser참조
ionic g directive directiveName
app.module.ts의 @NgModule({ …})에 추가

4. Tips-NgZone
• 사용자의 입력없이 페이지의 UI를 업데이트해야 할
경우 사용
예) push메시지 수신시 화면 값을 업데이트함

5. Tips-EventEmitter
• 페이지간에 sync를 맞춰야 할때
유용함
1. 페이지가 공통으로 접근가능한
EventEmitter 정의
2. event에 영향받는 페이지에서
subscribe 함수를 통해 event
handler를 정의
3. event전달 페이지에서 emit함수
를 통해 event생성

6. cordova plugin 사용하
기
• ionic plugin add pluginName
https://cordova.apache.org/plugins/참조
• clobbers 사용
cordova_plugins.js에 정의된 "clobbers" 사용
./platforms/android/assets/www/cordova_plugins.js
./platforms/ios/www/cordova_plugins.js
• 반드시 ts문법(?)으로 callback 호출
window.plugins.sim.hasReadPermission(result=>{
this.xxxx;
});
window.plugins.sim.hasReadPermission(
function(){
this.xxx ====> undefined error
});

7. cordova plugin만들기
• plugman create --name Name --plugin_id com-
name-plugins-echo --plugin_version 0.0.1 --path
nameplugin
• http://moduscreate.com/plugin-authoring-cordova-6-
ios-android/참조
• 여러번 불려지는 callback 등록 구현

8. 로그인 시스템 구성하기
• 현재 사용자의 Identifier로는 소셜 로그인으로 부터
엊을수 있는 정확한 값은 reference ID외에는 없다.
reference ID이외의 정보는 사용자로 부터의 입력이 필
요함
• 실습: 페이스북, 카카오톡, email
• LoginProvider디렉토리 참조

9. server와 통신(http)
• Ajax, json의 이해
• 다시 로그인
• storage에 로그인 정보 기록
• 세션 종료시 로그인 정보를 바탕으로 (사용자 입력없이) 다시 로그인
• serverProvider참조
• 다시 로그인 적용을 위해 모든 서버 Request는 serverProvider의 함수를 통해 호출

10. inappbrowser를 통한 외부 서비스
연동
• inappbrowser는 blackbox
• 접속 url과 event(load,exit,..)만 알수
있음
• 서버와 시나리오를 잘 구성하여야 함
• cash.ts에 휴대폰 본인 인증 참조
• 참고: ios의 경우 user input없이는
trigger가 안됨.
Tomc
at
cert
서버
node
1
2
3
4
5

11. 푸쉬(FCM) 메시지
• 앱단은 단순함
• 서버단에서 ios와 android를 위한 포맷팅을 정확히 해줘야함
.(notification.js에 router.sendGCM 참조, 대소문자까지 맞춰줘야함.)
• 오류시 firebase console과 postman을 통한 검증을 수행하기 바람
• IOS: developer 계정없이는 불가능함.
• provision정보 오류시 디렉토리 삭제
(~/Library/MobileDevice/Provisioning Profiles )후 다시 xcode실행하
여 가져옴(xcode->preference->apple ID확인).
• http://stackoverflow.com/questions/26732251/how-to-remove-
provisioning-profiles-from-xcode-6-and-xcode-7

12. 앱 release하기
• https://ionicframework.com/docs/guide/publishing.ht
ml
• Apple developer에 회사로 등록시 4주이상이 필요할
수 있음으로 미리 등록하시기 바랍니다.

13. 핀테크 가이드
• 금융 오픈 API
NH핀테크 오픈 플랫폼(https://nhfintech.nonghyup.com)
은행권 공동 오픈플랫폼(https://www.open-platform.or.kr/)
• 묻지도 따지지도 말고 시키는대로 해라.
• 규제 산업으로 기술적인 완성도와 상관없이 정해진 규정을 지키
는것이 가장 빠르게 갈수 있는 방법이다.
• 법적인 문제에 대해 반드시 검토하고 진행하시기 바랍니다.
• 클라우드 법, 개인정보보호법, 정보보안관련 규정

14. NH핀테크 인증
1. 서류 제출
2. 실사
3. 보안서류제출, 심사 통과
4. 테스트키 수령
5. 계약서 제출
6. 운영키 수령

15. Takit Server
Architecture
maria DB
public IP
Private Network
in/out port 제어