Hybrid Mobile Application - Apache Cordova Framework

Hybrid Mobile Application - Apache Cordova Framework

Hybrid Mobile Application - Apache Cordova Framework 주) 혜안정보통신 김진승 ( [email protected] ) AGENDA 2 / 74 1. Apache Cordova 2. Hello World 3. Environment for development 4. jQuery Integration 5. Create plugins For Cordova 1.Apache Cordova - Overview 3 / 74 • Apache Cordova is an open-source mobile development framework. • It allows you to use standard web technologies - HTML5, CSS3, and JavaScript for cross-platform development. • Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device's capabilities such as sensors, data, network status, etc. 1.Apache Cordova - Architecture 4 / 74 1.Apache Cordova - Plugins 5 / 74 • They provide an interface for Cordova and native components to communicate with each other and bindings to standard device APIs. • This enables you to invoke native code from JavaScript. • You can search for Cordova plugins using plugin search or npm. • Plugins may be necessary, for example, to communicate between Cordova and custom native components. 1.Apache Cordova - Workflow(1/3) 6 / 74 Cross-platform (CLI) workflow: • if you want your app to run on as many different mobile operating systems as possible, with little need for platform-specific development. • This workflow centers around the cordova CLI. The CLI is a high-level tool that allows you to build projects for many platforms at once, abstracting away much of the functionality of lower-level shell scripts. • The CLI copies a common set of web assets into subdirectories for each mobile platform, makes any necessary configuration changes for each, runs build scripts to generate application binaries. 1.Apache Cordova - Workflow(2/3) 7 / 74 Platform-centered workflow • if you want to focus on building an app for a single platform and need to be able to modify it at a lower level. • if you want your app to mix custom native components with web-based Cordova components. • As a rule of thumb, use this workflow if you need to modify the project within the SDK. • While you can use this workflow to build cross-platform apps, it is generally more difficult because the lack of a higher-level tool means separate build cycles and plugin modifications for each platform. • https://cordova.apache.org/docs/en/latest/guide/platforms/android/webview.html 1.Apache Cordova - Workflow(3/3) 8 / 74 UI Design Project Creation FrontEnd Programming Source Optimization for Android Deployment for Android Build with HTML5 (Android market) Final Build HTML5, CSS3, JS Apache Cordova Source Optimization for iOS Deployment for iOS (Apple Appstore) Final Build BackEnd Programming PHP, ASP, PERL, Binding PYTHON, Node.JS... REST SOAP JSON XML RSS DBMS MySql,MS-SQL, HTTP Postgresql, Oracle… DevelopTools for working UI Design & FronEnd Programming : Text Editor ( EditPlus, UltraEdit, AcroEdit, TextWrangler…..), Web Editor Project Creation : Node.js, cordova CLI(CommandLineInterface) Source Optimization for Android : Android Studio, Eclipse Source Optimization for iOS : Xcode BackEndProgramming : Text Editor ( EditPlus, UltraEdit, AcroEdit, TextWrangler…..) 1.Apache Cordova - Installing Cordova(1/8) 9 / 74 Requirements Common Android iOS Node.js Java JDK Apple OS X Cordova Android SDK XCode Android Studio 1.Apache Cordova - Installing Cordova(2/8) 10 / 74 Node.js Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. Node.js는 이벤트 기반, 논 블로킹 I/ O 모델을 사용해 가볍고 효율적입니다. Node.js의 패키지 생태 계인 npm은 세계에서 가장 큰 오픈 소스 라이브러리이기도 합 니다. 1.Apache Cordova - Installing Cordova(3/8) 11 / 74 Node.js • 비동기 I/O 처리 / 이벤트 위주: Node.js 라이브러리의 모든 API는 비동기식입니다, 멈추지 않는다는거죠 (Non-blocking). Node.js 기반 서버는 API가 실행되었을때, 데이터를 반환할 때까지 기다리지 않고 다음 API 를 실행합니다. 그리고 이전에 실행했던 API가 결과값을 반 환할 시, NodeJS의 이벤트 알림 메커니즘을 통해 결과값을 받아옵니다. • 빠른 속도: 구글 크롬의 V8 자바스크립트 엔진을 사용하여 빠른 코드 실행을 제공합니다. • 단일 쓰레드 / 뛰어난 확장성: Node.js는 이벤트 루프와 함께 단일 쓰레드 모델을 사용합니 다. 이벤트 메커니즘은 서버가 멈추지않고 반응하도록 해주어 서버의 확장성을 키워줍니다. 반면, 일반적인 웹서버는 (Apache) 요청을 처리하기 위하여 제한된 쓰레드를 생성합니다. Node.js 는 쓰레드를 한개만 사용하고 Apache 같은 웹서버보다 훨씬 많은 요청을 처리할 수 있습니다. • 노 버퍼링: Node.js 어플리케이션엔 데이터 버퍼링이 없고, 데이터를 chunk로 출력합니다. • 라이센스: Node.js 는 MIT License가 적용되어있습니다. 1.Apache Cordova - Installing Cordova(4/8) 12 / 74 Node.js - Node Package Manager (NPM) • NPMSearch 에서 탐색 가능한 Node.js 패키지/모듈 저장소 • Node.js 패키지 설치 및 버전 / 호환성 관리를 할 수 있는 커맨 드라인 유틸리티 npm search 1.Apache Cordova - Installing Cordova(5/8) 13 / 74 Node.js - Installing https://nodejs.org/en/download/ 1.Apache Cordova - Installing Cordova(6/8) 14 / 74 1. Download and install Node.js. On installation you should be able to invoke node and npm on your command line. 2. (Optional) Download and install a git client, if you don't already have one. Following installation, you should be able to invoke git on your command line. The CLI uses it to download assets when they are referenced using a url to a git repo. 3. Install the cordova module using npm utility of Node.js. The cordova module will automatically be downloaded by the npm utility. 1.Apache Cordova - Installing Cordova(7/8) 15 / 74 • on OS X and Linux: $ sudo npm install -g cordova On OS X and Linux, prefixing the npm command with sudo may be necessary to install this development utility in otherwise restricted directories such as /usr/ local/share. If you are using the optional nvm/nave tool or have write access to the install directory, you may be able to omit the sudo prefix. There are more tips available on using npm without sudo, if you desire to do that. 1.Apache Cordova - Installing Cordova(8/8) 16 / 74 • on Windows: C:\>npm install -g cordova The -g flag above tells npm to install cordova globally. Otherwise it will be installed in the node_modules subdirectory of the current working directory. Following installation, you should be able to run cordova on the command line with no arguments and it should print help text. 1.Apache Cordova - Checking Cordova(1/3) 17 / 74 cordova installation status 1.Apache Cordova - Checking Cordova(2/3) 18 / 74 Global Commands create ............................. Create a project help ............................... Get help for a command telemetry .......................... Turn telemetry collection on or off Project Commands info ............................... Generate project information requirements ....................... Checks and print out all the requirements for platforms specified platform ........................... Manage project platforms plugin ............................. Manage project plugins prepare ............................ Copy files into platform(s) for building compile ............................ Build platform(s) clean .............................. Cleanup project from build artifacts run ................................ Run project (including prepare && compile) serve .............................. Run project with a local webserver (including prepare) 1.Apache Cordova - Checking Cordova(3/3) 19 / 74 cordova Project Commands jinseungkimui-MacBook-Pro:~ jinseungkim$ cordova requirements Error: Current working directory is not a Cordova-based project. jinseungkimui-MacBook-Pro:~ jinseungkim$ jinseungkimui-MacBook-Pro:npc jinseungkim$ ls config.xml hooks plugins cordova_create_kra.rtf platforms www jinseungkimui-MacBook-Pro:npc jinseungkim$ cordova requirements Requirements check results for android: Java JDK: installed 1.8.0 Android SDK: installed Android target: installed android-21,android-22,android-23,android-24,android-25 Gradle: installed Requirements check results for ios: Apple OS X: installed darwin Xcode: installed 8.2 ios-deploy: not installed ios-deploy was not found. Please download, build and install version 1.8.3 or greater from https://github.com/phonegap/ios- deploy into your path, or do 'npm install -g ios-deploy' Error: Some of requirements check failed jinseungkimui-MacBook-Pro:npc jinseungkim$ 2.Hello World - create project 20 / 74 cordova create path [id [name [config]]] [options] $ cordova create hello kr.co.rcube.hello HelloWorld Creating a new cordova project. hello ├── config.xml ├── hooks │ └── README.md ├── platforms ├── plugins └── www ├── css │ └── index.css ├── img │ └── logo.png ├── index.html └── js └── index.js 7 directories, 6 files 2.Hello World - Config.xml(1/2) 21 / 74 • Config.xml is a global configuration file that controls many aspects of a cordova application's behavior. • This platform-agnostic XML file is arranged based on the W3C's Packaged Web Apps (Widgets) specification, and extended to specify core Cordova API features, plugins, and platform-specific settings. • When using the CLI to build a project, versions of this file are passively copied into various platforms/ subdirectories. 2.Hello World - Config.xml(2/2) 22 / 74 <?xml version='1.0' encoding='utf-8'?> <widget id="kr.co.rcube.hello" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http:// cordova.apache.org/ns/1.0"> <name>HelloWorld</name> <description> A sample Apache Cordova application that responds to the deviceready event. </description> <author email="[email protected]" href="http://cordova.io"> Apache Cordova Team </author> <content src="index.html" /> <plugin name="cordova-plugin-whitelist" spec="1" /> configuration for WhitelistPlugin <access origin="*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="tel:*" /> <allow-intent href="sms:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <platform name="android"> <allow-intent href="market:*" /> </platform> <platform name="ios"> <allow-intent href="itms:*" /> <allow-intent href="itms-apps:*" /> </platform> </widget>

View Full Text

Details

  • File Type
    pdf
  • Upload Time
    -
  • Content Languages
    English
  • Upload User
    Anonymous/Not logged-in
  • File Pages
    74 Page
  • File Size
    -

Download

Channel Download Status
Express Download Enable

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

  • Not to be reproduced or distributed without explicit permission.
  • Not used for commercial purposes outside of approved use cases.
  • Not used to infringe on the rights of the original creators.
  • If you believe any content infringes your copyright, please contact us immediately.

Support

For help with questions, suggestions, or problems, please contact us