Cordova – hybrid app 만들기 위한 프레임워크

• CORDOVA
  • Apache 재단에서 지원중인 하이브리드 앱 제작을 위한 프레임워크다.
  • https://cordova.apache.org/docs/en/6.x/guide/overview/index.html  참조
  • Cordova 프로젝트를 기반으로 진행되고 있는 프로젝트들
    • PhoneGap : 폰갭은 코르도바를 폰갭 콘트롤러로 패키징했는데, 기본 코르도바 플러그인들과 추가적인 폰갭 플로그인들을 이용해서 모바일 디바이스용 웹 페이지를 만들어 하이브리드 앱을 개발할 수 있는 프레임워크이다.
      링크된 페이지에서 설치부터 앱 작성, 빌드하는 과정 등이 상세히 설명되어 있음.
    • Ionic : Angular.js를 사용하여 모바일 디바이스용 웹 페이지를 좀 더 쉽게 만들 수 있게 해준다는 점이 코르도바나 PhoneGap과 다름
    • Monaca : PhoneGap/Coredova와 함께 html5 하이브리드 앱을 쉽게 개발할 수 있게 해줌
  • 사전 설치
    • node 설치
    • cordova cli 설치
      • npm install -g cordova
      • 업데이트
        • npm update -g cordova
    • 앱 템플릿 생성
      • cordova platform add android –save
      • cd hello
    • add platforms( 플랫폼 데이타를 추가해 준다)
      • cordova platform add ios –save
      • cordova platform add android –save
      • cordova platform ls : 현재 set이 어떤 플랫폼에 대한 셋인지 체크한다.
      • 플랫폼 업데이트
        • cordova platform update android –save
        • cordova platform update ios –save
    •  앱을 빌드
      • 빌드하기 위해서 SDK가 설치되어 있어야 함
      • SDK 설치되었는지 확인하는 방법
        • cordova requirements
      • cordova build android
    • 에뮬레이터 실행
      • cordova emulate android
      • 혹은 원하는 에뮬레이터 실행해 놓는다.
    • 앱 실행
      • cordova run android
    • IDE(Xcode, android, eclipse 등으로 앱을 불러와서 www 폴더 아래에서 앱을 수정할 수 있다)
    • 플러그인 추가
      • 설치할 플러그인 검색
        • cordova plugin search camera
          browser가 열리며 camera를 이름에 포함하는 모든 plugin을 표시해 준다. 각 plugin은 이름과 함께 어떤 플랫폼에서 지원되는지 나타내준다.
      • 플러그인 설치
        • cordova plugin add cordova-plugin-camera
          플러그인을 설치하면 app/platforms/android/res/xml/config.xml에 설치된 플러그인에 대한 feature 를 추가해 준다.
      • 플러그인 제거
        • cordova plugin remove cordova-plugin-camera
      • 설치된 플러그인 검색
        • cordova plugin ls
    • plugin 소개
      • IDE console log 를 위한 plugin
        • cordova-plugin-console
      • 코르도바 버전, 디바이스 플랫폼(OS), 디바이스 플랫폼 버전 확인할 수 있는 plugin
        • cordova-plugin-device-mrdo
      • 앱이 뜨는 동안 이미지 보여주기
        • cordova-plugin-splashscreen
    • 그 밖에 디버깅 툴 소개
      • weinre : WebView를 위한 리모트 디버깅이 지원되지 않는 경우 리모트에서 디버깅해줄 수 있도록 한다.
    • Core Plugin API 사용
    • app을 위한 템플릿 사용하기
      • npm package

        • cordova create hello com.example.hello HelloWorld –template <npm-package-name>

      • git repository

        • cordova create hello com.example.hello HelloWorld –template <git-remote-url>

      • local

        • cordova create hello com.example.hello HelloWorld –template <path-to-template>

    • 데이터 저장
      • LocalStorage
        • 5 mega 제한됨.
        • key/value 형태
      • WebSQL
      • IndexedDB
    • security guide
• 테스트 샘플

Advertisements