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 소개
      • 그 밖에 디버깅 툴 소개
        • 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>

      • 데이터 저장
      • security guide
  • 테스트 샘플
Advertisements

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중