2017년과 이후 JavaScript의 동향 - 브라우저 밖의 JavaScript


참고 : http://developer.telerik.com/topics/web-development/javascripts-journey-2016/



2017년 전망은?

기존의 빌드 도구도 어느 정도의 역할을 수행하겠지만 전체적으로 webpack으로 전환이 이루어질 것으로 예측된다. 다양한 배포 전략에 따라 원하는 빌드를 구성할 수 있다는 장점은 물론 webpack에서 제공되거나 오픈소스로 추가되는 로더와 플러그인의 수많은 기능이 webpack과 빌드 도구의 격차를 더 벌릴 것으로 보인다.

브라우저를 넘어서다

전통적으로 JavaScript는 항상 브라우저에서만 실행할 수 있다고 인식돼 왔다. 그러나 이제는 그런 인식은 맞지 않는 것임을 누구나 알고 있다. Node.js를 통해 브라우저 밖의 영역으로 JavaScript가 확장하면서 다양한 가능성이 나타나고 있다. 이 장에서는 JavaScript를 멀티 플랫폼에서 단일 개발 언어로 사용할 수 있는 가능성을 살펴본다.

이 장의 주요 내용은 브라우저 이외의 영역에서 2017년의 JavaScript 기술과 전망을 살펴보는 글인 "JavaScript in 2017 – Beyond the Browser"를 참고로 했다.

Node.js

Node.js

Node.js는 오픈소스 런타임 라이브러리로, 서버사이드 애플리케이션과 브라우저 바깥 환경에서 실행되는 JavaScript 애플리케이션을 만드는 데 도움을 준다. 지난 수년간 주로 스타트업에서 사용되며 인기를 얻었고 점차 주요 기업체로 영향력을 확대해 왔다.

패키지 관리자인 npm의 저장소는 서버사이드 애플리케이션에서 사용할 수 있는 유틸리티 모듈들을 호스팅하는 역할에서 배포 가능한 JavaScript 코드의 표준 저장소로 변모하고 있다.

Module Counts 사이트에서 조사한 바로는 2017년 1월부터 5월 말까지 8만 3천여 개의 새로운 모듈이 등록됐다(5월 24일 기준, 총 458,275개 모듈). 매달 1만 6천여 개 이상의 모듈이 등록되는 수준이다. 영역에 국한하지 않고 살펴보더라도 npm에 등록된 모듈의 수가 다른 언어나 플랫폼에 등록된 모듈의 수보다 압도적으로 많다는 것을 확인할 수 있다.

그림 4 언어별 모듈 개수 통계

그림 4 언어별 모듈 개수 통계(원본 출처: Module Counts)

이러한 증가세에는 여러 이유가 있겠지만 하나를 꼽자면 엔터프라이즈 기업에서의 Node.js 사용 증가라 할 수 있다. 이는 단순히 사용된다는 의미에서 벗어나 안정성이 요구되는 영역에서 검증된 제품이라는 의미기도 하다. Node.js의 적용 사례 페이지에서는 잘 알려진 다양한 기업의 이름을 볼 수 있다. NASA와 같이 고도의 안정성이 요구되는 분야에서도 Node.js가 사용된다.

"When you've got the safety of astronauts on the line, little hiccups and service interruptions turn into life-and-death situations. From EVA [extra vehicular activity] data to astronauts up in space, Node.js helps ensure there's a safe home for everything and everyone." 
(우주 비행사의 안전이 위태로울 때는 사소한 고장이나 서비스 장애가 생과 사를 가를 수 있다. Node.js는 선외 활동(EVA) 데이터는 물론 우주 공간에 있는 우주 비행사까지 모두 안전할 것이라는 것을 보장해 준다.) 
— Node.js Helps NASA Keep Astronauts Safe and Data Accessible

2017년 전망은?

많은 기업이 전통적인 개발 접근 방법에서 Node.js로 전환할 것으로 예측된다. 특히 Microsoft가 발표한 JavaScript 확장 언어(superset)인 TypeScript는 JavaScript를 Java나 C# 개발자가 더 이해하기 쉬운 언어로 만들어 Node.js의 성장에 힘을 실어 줄 것으로 보인다.

다양한 개발 환경과 언어를 유지 보수하는 것을 싫어하는 큰 기업들은 개발 언어를 하나로 통합할 수 있게 하는 Node.js에 매력을 느낄 것이다.

PhoneGap과 Cordova

Cordova

PhoneGap과 Cordova는 JavaScript로 네이티브 모바일 애플리케이션을 개발하려 시도한 첫 오픈소스다. Cordova의 기본 접근 방법은 웹뷰(WebView)에서 웹 코드를 감싸고, 웹뷰를 통해 네이티브 모바일 애플리케이션을 구동하는 것이다.

웹뷰에 관한 더 자세한 내용은 "What is a WebView?"를 참고한다.

이 접근 방법은 웹 개발자가 이미 알고 있는 웹 기술(주로 JavaScript)을 사용할 수 있게 한다. 그래서 수 년 동안 모바일 애플리케이션 개발 영역에서 강력한 위치를 유지할 수 있었다. 그러나 "2016년과 이후 JavaScript의 동향"에서 언급한 것처럼 Google의 Progressive Web Apps(PWA)의 강력한 도전을 받고 있는 상태다.

PWA는 네이티브 애플리케이션에서 사용하는 기능을 웹에서 사용할 수 있게 한다. 예를 들어 Push API와 Notifications API는 웹 애플리케이션에서 푸시 알림을 사용할 수 있게 한다. 그 외에 오프라인 상태에서 캐시를 사용할 수 있게 하는 서비스 워커(service worker), 스마트폰의 홈 화면에 웹 애플리케이션 아이콘을 등록하게 할 수 있는 웹 앱 매니페스트(web app manifest) 등의 기술이 있다.

2016년에 Google은 PWA에 많은 관심과 노력을 쏟았다. Google의 주요 개발자 콘퍼런스인 Chrome Dev Summit 2016에서는 총 25개 세션 가운데 9개 세션을 PWA 관련 세션으로 진행했다. 또 다른 주요 콘퍼런스인 Google I/O 2016에서도 많은 세션을 PWA 관련 세션으로 진행해 PWA 기술의 확산에 노력을 기울였다.

PWA를 활용한 애플리케이션 개발에 관한 더 자세한 내용은 "현실적 PWA"를 참고한다.

Cordova와 같은 하이브리드 애플리케이션 개발 방식 대신 PWA를 선택하는 개발자의 비율을 정확하게 계산하기는 어렵다. 그러나 많은 데이터가 Cordova의 사용량이 정체되거나 감소하고 있다는 사실을 나타내고 있다. npm-stat 사이트에서 지난 2년 동안(2015년 3월 17일~2017년 3월 17일)의 통계를 살펴보면 npm에서 Cordova의 다운로드 횟수는 2015년 12월에 50만으로 정점을 찍은 이후 30~40만 정도에 머물러 있다.

그림 5 npm에서 Cordova 다운로드 횟수 통계

그림 5 npm에서 Cordova 다운로드 횟수 통계(원본 출처: npm-stat: cordova)

2017년 전망은?

하이브리드 애플리케이션 개발 방식의 매력은 점점 더 감소하고 있다. 한때 네이티브 애플리케이션 개발의 대안으로 여겨지기도 했지만 PWA와 같은 새로운 기술의 등장과 단일 도구를 통한 개발 효율성(시간 및 비용 측면)에 대한 욕구가 커지면서 관심도가 점차 낮아지고 있다.

2017년에도 상황이 뚜렷하게 바뀔 만한 요인은 보이지 않는다. Google I/O 2017의 "The Mobile Web: State of the Union" 세션에서 확인할 수 있듯이 Google은 모바일 웹 영역에서 AMP(Accelerated Mobile Pages)와 PWA에 힘을 싣고 있다. 하이브리드 애플리케이션 개발 방식의 입지는 점점 더 줄어들 수밖에 없을 것으로 보인다.

네이티브 모바일 애플리케이션

React Native와 NativeScript

JavaScript 주도적(JavaScript-driven) 네이티브 애플리케이션 개발은 Appcelerator의 Titanium이 개척하고 선도했던 영역이다. 현재는 React Native와 NativeScript가 그 자리를 점점 대체하고 있다.

웹뷰를 감싸는 형태의 Cordova와는 다르게 JavaScript 주도적 네이티브 애플리케이션 개발은 웹뷰를 사용하지 않는다. 그렇기 때문에 웹 기반 개발에서 일어나는 성능 문제에 영향을 받지 않는다.

npm-stat 사이트에서 지난 1년 동안의 다운로드 통계를 살펴보면 React Native의 성장세가 확실히 두드러진다. NativeScript의 다운로드 횟수는 완만하게 상승하다가 2017년 3월에 정점을 찍은 후 조금은 하락하는 모습을 보이고 있다.

그림 6 npm에서 React Native와 NativeScript의 다운로드 횟수 통계

그림 6 npm에서 React Native와 NativeScript의 다운로드 횟수 통계(원본 출처: npm-stat: react-nativenpm-stat: nativescript)

2017년 전망은?

더욱더 많은 JavaScript 개발자가 모바일 애플리케이션을 개발하게 되면서 JavaScript 주도적 네이티브 애플리케이션 개발은 지속적으로 성장할 것으로 예측된다.

React의 인기를 업은 React Native는 React로 개발한 애플리케이션을 손쉽게 네이티브 애플리케이션으로 전환하는 방법을 제공한다. 성능에서도 네이티브 애플리케이션에 뒤지지 않아 React Native로 개발한 iOS 애플리케이션이 Swift로 개발한 네이티브 애플리케이션보다 더 나은 성능을 보인다는 사례도 있다("Comparing the Performance between Native iOS (Swift) and React-Native" 참고).

2016년 5월에 NativeScript가 Angular 2 지원을 발표하면서("Sharing Code Between Web and Native Apps" 참고) 대표적인 JavaScript 프레임워크 모두에서 단일한 코드를 기반으로 웹과 네이티브 모바일 애플리케이션을 개발할 수 있게 됐다. 이는 개발자와 기업 모두에게 매우 매력적인 일이다.

데스크톱 애플리케이션

Electron과 NW.js

데스크톱 영역에서 JavaScript를 사용할 수 있는 방법은 그리 많지 않다. Electron과 NW.js가 대표 주자로 이 영역을 이끌어 가고 있다.

Electron과 NW.js 모두 성장했지만 Electron이 점점 실질적인 표준(de-facto)으로서의 위치를 굳혀 가고 있다. Electron은 Microsoft의 Visual Studio Code 개발에 사용된 이후 많은 데스크톱 애플리케이션 개발 도구로 사용되고 있다. Electron은 또한 React 커뮤니티와 Angular 커뮤니티의 지지를 동시에 받는 흔치 않은 모습을 보일 정도로 이 영역에서는 독보적인 위치를 구축하고 있다.

2017년 전망은?

Electron이 2017년에도 압도적인 우위를 보일 것이라 예측하는 것이 전혀 이상하지 않다. React와 Angular 같은 인기 있는 프레임워크의 지원도 예상된다. JavaScript가 Java와 Microsoft 기반 기술(WPF)이 차지하고 있는 영역을 서서히 침범하고 있어 기존 기술을 대체하는 역할이 점점 더 커질 것으로 보인다.

JavaScript의 새로운 영역

앞으로 등장하거나 각광을 받을 기술을 꼽으라면 빠지지 않고 등장하는 기술이 있다. 바로 챗봇(chatbot)과 사물 인터넷(IoT, Internet of things), 가상현실(virtual reality)이다.

챗봇

챗봇 프레임워크

챗봇 생태계에서 JavaScript의 영향력은 크다. 많은 개발자가 JavaScript로 챗봇을 개발하고 있다. 그 외에 단순한 Slack 봇부터 복잡한 상거래용 봇까지 다양한 챗봇을 개발한다.

다양한 유형의 챗봇에 관해서는 "11 Examples of Conversational Commerce and Chatbots"를 참고한다.

또한 Botkit, Microsoft의 Bot Framework, Facebook의 Wit.ai 등 챗봇 프레임워크의 대부분은 SDK에 Node.js 라이브러리를 포함하고 있다.

사물 인터넷

사물 인터넷 라이브러리

사물 인터넷인 IoT 영역에서도 JavaScript를 쉽게 볼 수 있다.

IoT 라이브러리인 Losant와 Zetta는 Node.js API를 제공한다. 가상현실 컨트롤러 기기로 유명한 립모션은 JavaScript API를 제공한다. 삼성은 웹 기반의 IoT 플랫폼 구축을 위한 IoT 엔진인 JerryScript를 2015년에 발표했다.

가상현실

가상현실 프레임워크

웹의 가상현실 기술 표준화는 WebVR을 통해 진행되고 있다. WebVR API는 JavaScript로 가상현실 기기(Oculus의 Rift와 같은 HMD(head mounted display) 등)에서 감지되는 위치와 움직임 등에 대한 정보를 얻을 수 있게 한다.

Google의 Chrome 팀은 실험적이면서 인상적인 가상현실 예제를 Chrome Experiments for Virtual Reality 사이트에 공개하고 있다. Mozilla는 2015년 중반부터 가상현실 경험을 개발할 수 있는 프레임워크인 A-Frame을 개발하고 있다. Microsoft는 자사의 가상현실 기기인 HoloLens에서 사용할 수 있는 애플리케이션 개발을 위한 프레임워크인 HoloJS를 2016년 12월에 공개했다.

2017년 전망은?

JavaScript의 유명세와 인기는 2017년에도 다양한 영역에서 이어질 것이라 예상된다. 다양한 환경에 JavaScript가 침투하고, 새로 등장할 개발 생태계에서도 JavaScript는 주요 언어가 될 것으로 보인다.

마치며

10년 전에는 JavaScript의 현재 모습을 결코 생각할 수 없었다. 곧 생명력이 다할 것처럼 보이는 시기마다 상황을 전환하는 다양한 플랫폼과 프레임워크가 때맞춰 등장했고, 이제는 다양한 영역에서 JavaScript가 사용되고 있다. JavaScript가 모든 영역에서 사용되거나 기존 개발 언어를 대체하지는 않겠지만, 범용적인 사용성 때문에 개발 영역에서 주요한 자리를 차지하고 있다는 점에는 의심의 여지가 없어 보인다.

스탠퍼드 대학교의 컴퓨터공학 학부는 JavaScript로 기본 프로그래밍 방법론을 가르치는 "CS106J: Programming Methodologies in JavaScript" 과정을 2017년 봄에 시험적으로 개설했다("CS department updates introductory courses" 참고)했다. 기존의 기본 프로그래밍 방법론 과정인 "CS 106A: Programming Methodology"에서 사용하는 언어는 Java인데, JavaScript가 이를 대체할 가능성이 있다("Stanford CS department updates introductory courses: Java is Gone" 참고). 이런 변화는 학문적인 영역에서도 JavaScript의 미래에 대한 가능성을 염두에 두고 있다는 것을 보여 주는 일이기도 하다.

개발자라면 누구나 아는 질의, 응답 사이트인 Stack Overflow의 공동 창업자 중 한 명인 Jeff Atwood는 현재와 같은 상황을 미리 예견했는지도 모르겠다. Jeff Atwood는 2007년에 블로그에서 다음과 같은 'Atwood의 법칙'을 이야기했다("The Principle of Least Power" 참고).

Any application that can be written in JavaScript, will eventually be written in JavaScript. 
(JavaScript로 작성될 수 있는 애플리케이션은 결국 모두 JavaScript로 작성될 것이다.)

2017년과 이후 JavaScript의 동향




.

Posted by 홍반장水 홍반장水

Native Vs Hybrid Vs HTML5 Mobile Apps

 - http://www.pixelcrayons.com/blog/mobile/native-vs-hybrid-vs-html5-mobile-apps-which-one-is-best-for-your-business/


2017 - http://noeticforce.com/best-hybrid-mobile-app-ui-frameworks-html5-js-css

 

2016 - http://blogs.perceptionsystem.com/15-mobile-app-development-frameworks/


PhoneGap http://www.pixelcrayons.com/blog/mobile-applications/how-phonegap-app-development-service-helps-your-business/


http://phonegap.com/ 






.

Posted by 홍반장水 홍반장水

Android example app with PhoneGap and JQM in Holo style

 

http://teusink.blogspot.kr/2013/04/android-example-app-with-phonegap-and.html

 

PhoneGap + JQuery Mobile + JQuery + energize.js

 

this example app is to have a some sort of a template to make a new app very fast, based on the technologies supplied by PhoneGap and jQuery Mobile, using web-technology.

Details


Frameworks:

  • Suitable for Android 2.3.3 and higher. API level 10 and up to be more technical :).
  • PhoneGap 2.7.0.
  • jQuery 1.9.1
  • jQuery Mobile 1.3.1
Plugins for jQuery Mobile:
  • Energize.js (to speed up the tap and click events in the app)
Plugins for PhoneGap:
  • Toast (to show android toasts)
  • Share (to send a share intent)
Features in this example app:
  • Holo theme. Dark, light with dark header and light with light header. The last one ain't very worked out yet, but it should give you a heads up start. The header features the same style as a native app including press effects.
  • Panel menu like the Google Plus app. Tap on title to open and tap outside panel menu to close. You can also swipe to left to close. Upon first boot the panel menu opens and closes for a brief second automatically, to demonstrate where the menu is. Panel menu content is defined only once, in the javascript.
  • Of course the use of the plugins Share and Toast.
  • Native Android like back-button behavior.
  • Supplied Gimp image files (xcf files) to easy edit the icons to your liking.
Notice: the Holo theme is almost like and very inspired by Holo for Android. It is not exactly the same for 100% as native.

    Screenshots of the interface




     






     

    Additional info

    Download

    You can download the package by clicking here. If you have any questions, please let me know!

     

     

    Posted by 홍반장水 홍반장水

    Swipe is the most accurate touch slider. Read more

     

    http://swipejs.com/

     

    https://github.com/bradbirdsall/Swipe

     

     

     

    =================================================

     

    Jo was made for apps, not websites.

    Your HTML5 app lives in a single page and Jo helps you create a native-like app experience. Sure, there's some DOM manipulation going on in there, but you don't have to worry about it unless you want to. Build your app with JavaScript, tweak some CSS and call it a day.

     

    https://github.com/davebalmer/jo

     

    Jo is a thin (~12K) candy shell for PhoneGap apps. It's an HTML5 mobile app framework which provides UI widgets, a flexible event model, a wrapper for sound, and a light data layer. Apps are skinnable with CSS3, and work everywhere PhoneGap does... and then some, including Adobe Air and OSX (desktop and dashboard). Read more

    DEMOS

    Cross-platform Screencast

    Back in October, with an old UI theme called "Aluminum", the same Jo app running on a bunch of devices.

     

     

    Kitchen Sink

    DEMO Well, mostly a kitchen sink. Needs updating.

    DEMO Another take on a kitchen sink, in progress.

    YQL

    DEMO Using JSONp to fetch some data from an RSS feed.

    AJAX File Loader

    DEMO Simple file load using AJAX wrapper.

     

     

    .

     

    Posted by 홍반장水 홍반장水

    코드이그나이터(이하 CI)는 PHP를 이용하여 웹사이트를 구축하고자 하는 사람들을 위한 개발 프레임 워크 입니다. CI 는 날코딩 하는 분들을 위해 풍부한 라이브러리,쉬운 인터페이스 및 쉬운로직을 제공함으로써 개발속도를 무쟈게 높혀드릴것입니다. CI는 님들이 최소한의 코딩만 하도록 하여 프로젝트에 집중할수 있도록 해드릴거예요.


    CodeIgniter

    * 공식 사이트 : http://codeigniter.com/

    * 다  운  로  드 : http://codeigniter.com/downloads/

    * 한국사용자포럼 : http://www.cikorea.net/



    코드이그나이터는 바로 이런 여러분 모두의 것입니다:

    • 최소노력으로 사용할수있는 프레임워크를 원한다.
    • 놀라운 프로그램 성능을 원한다.
    • 다양한 호스팅환경,다양한 PHP 버전에서 사용가능한 호환성을 원한다.
    • 거의 설정이 필요없는 프레임워크를 원한다.
    • 커맨드라인에서 뭔가를 입력할 필요가 없는 프레임워크를 원한다.
    • 제한적인 코딩 규칙이 없는 프레임워크를 원한다.
    • PEAR 같이 큰 라이브러리를 별로 좋아하지않는다.
    • 템플릿 언어를 억지로 배우고싶지 않다.
    • 복잡한것 대신 심플한 솔루션을 좋아한다.
    • 명확하고 전체내용을 몽땅다설명해주는 설명서를 원한다.


    Posted by 홍반장水 홍반장水

    네이티브앱을 만들기만 하던 시대를 지나 이젠 웹으로 앱을 만드는게 보편화 되어버린 시대로 도달했다.

    하이브리드앱은 이미 많은 검증을 거쳤고, 상용화되서 시장을 점유하고 있는것이 사실이다.

    대표적인 앱제작플롯폼으로 "폰갭(http://phonegap.com/)"을 들 수 있다.

    폰갭,앱스프레소, 티타늄들 많이 있지만, 폰갭이 가장 간단하고 사용하기 좋은거 같다. 


    자바스크립트를 이용한 처리가 작년만 해도 느렸지만, 하드웨어 성능도 향상되고, 자바스크립트 엔진 성능도 향상되어 지금은 네이티브 API를 사용하는것을 거의 따라잡았다고 볼 수 있다.

    오프라인에서는 HTML5 캐시 또는 Web Storage 기능등이 있기때문에 온라인이 아니더라도 일반적인 정보를 보여줄 수 있게되었다. (Web Storage, Web SQL DB, IndexedDB ) 캐시 기능은 문제가 캐시가 잘 변경이 되지 않는다는 단점이 있긴 하지만. 오프라인에서도 화면을 잘 보여준다. 서버 셋팅만 잘 해두었다면 말이다.


    HTML5 application Cache

    What is Application Cache?

    HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.

    Application cache gives an application three advantages:

    1. Offline browsing - users can use the application when they're offline
    2. Speed - cached resources load faster
    3. Reduced server load - the browser will only download updated/changed resources from the server

    Browser Support

    Internet Explorer Firefox Opera Google Chrome Safari

    Application cache is supported in all major browsers, except Internet Explorer.


    * 일단 서버에서 manifest 타입이 웹에서 활성화 되어야 한다.

       contentType = "text/cache-manifest" 이 적용되어야 한다.

       (contentType만 맞추면 jsp 파일로 구현가능하다. )


    1. manifest 파일에 애플리케이션 캐시정책이 기록되어 있다.

        - 어떤 파일을 캐시할지, 오프라인에서 어떤 파일을 보여줄 것인지 등등

    2. 처음 화면 접속시 manifest 파일의 내용을 캐시를 해둔다. 

    3.두번째 부터는 manifest 파일이 갱신되지 않았으면 캐시를 불러온다.

    4.갱신이 되어있어도 일단 캐시를 불러오고, 백그라운드로 업데이트를 한다.

       그래서, 갱신해도 처음에는 이전 캐시를 보여주고 새로고침을 한번 더하거나 하면 갱신된 내용을 보여준다.


    웹이 발전하는것은 결국 사용자 편의성을 위한 것이지, 어떤 특정한 기술로 인해 편의성을 져버린다면 그 서비스는 퇴화될것이다 .







    Posted by 홍반장水 홍반장水

    phonegap에서 webview가 위아래로 움직이는걸 멈추고 싶을때.
    화면이 위아래나 좌우로 흔들리는걸 막을때.

    ~delegate.m


    [[
    webView.subviews objectAtIndex:0] setScrollEnabled:NO]; //to stop scrolling completely
    [[webView.subviews objectAtIndex:0] setBounces:NO]; //to stop bouncing

    ------
    document.onload = function(){
        document.ontouchmove = function(e){ e.preventDefault(); }
    };


    Posted by 홍반장水 홍반장水

    - (void)webViewDidStartLoad:(UIWebView *)theWebView
    {
         theWebView.dataDetectorTypes = UIDataDetectorTypeNone;
         return [ super webViewDidStartLoad:theWebView ];
    }

    Posted by 홍반장水 홍반장水
    TAG App, PhoneGap
     

    Getting started with Android PhoneGap in Eclipse

    http://wiki.phonegap.com/w/page/16494774/Getting-started-with-Android-PhoneGap-in-Eclipse

    한글 번역 : http://goodidea.tistory.com/11


    Prerequisite Software


    PhoneGap requires you have the following software installed:

         1. Eclipse Integrated Design Environment (IDE), a program to write code and manage software development

         2. Java Development Kit (JDK), the Java compiler and support tools

         3. The Android Software Development Kit (SDK), base code and emulators for developing Android apps

         4. Android Development Toolkit (ADT), a plug-in for Eclipse that makes Android development seamless

         5. Apache Ant, a program that automates software build processes (similar to 'make')

         6. Ruby, a programming language

         7. Git Bash, an alternative command program for Windows environments (Windows only)


    If you've previously done any development in the Android environment, you probably have 1-4 already installed.  If you have not, it is strongly recommended you visit http://developer.android.com/index.html to better understand Android development and create your own, "Hello, World" example prior to jumping into PhoneGap.  A great resource exists at: http://developer.android.com/sdk/installing.html for new developers.


    Step 1: Installing the Prerequisite Software


    1A. Eclipse

    Install the Eclipse IDE for Java Developers from http://www.eclipse.org/downloads/. This a ZIP archive file, extract the folder “eclipse”. Most other flavors of Eclipse (like Aptana or platform specific builds) will also work, provided that you install all the necessary Eclipse plug-ins.


    1B. Java JDK

    If you do not already have the java JDK installed on you're system, install the Java SE Development Kit - JDK 6 from here:
    http://java.sun.com/javase/downloads/index.jsp


    If you're running Windows this is a standard installer file, just follow the on screen instructions for installation.


    1C. Android SDK

    Install the Android SDK Package from here

    http://developer.android.com/sdk/index.html 


    Extract the downloaded archive and place it somewhere you'll remember and add the tools sub directory your PATH. Additional information and instructions for adding the Android SDK to your PATH can be found at:
    http://developer.android.com/sdk/installing.html


    Be sure to do the following (Windows):

    1. If you install into a folder containing a space (c:\Program Files), you must refer to it by its truncated name in the command program.  In this case "c:\progra~1".  The truncated name will be the first six characters + ~ + a sequential number starting with 1 for each instance of the same six characters.
    2. Add android SDK to your Path
    3. Add android sdk tools (\android-sdk-windows\tools) to your path. This is necessary for ruby to find the command "android create project" later on.

    1D. ADT Plug-in for Eclipse

    Install the ADT Plug-in for Eclipse as described here:

    http://developer.android.com/sdk/eclipse-adt.html


    To verify your installation of Eclipse, Android SDK, ADT, and Java, you can build a sample “Hello World” application using the instructions located here:

    http://developer.android.com/guide/tutorials/hello-world.html.


    1E. Apache ANT

    Visit: http://ant.apache.org/index.html

    • Windows -
      • If you install into a folder containing a space (c:\Program Files), you must refer to it by its truncated name in the command program.  In this case "c:\progra~1".  The truncated name will be the first six characters + ~ + a sequential number starting with 1 for each instance of the same six characters.
      • Download and unzip binaries
      • add the unzipped folder path to your PATH
    • OS X - it comes with XCode otherwise "sudo port install apache-ant".

    1F. Ruby

    Visit: http://rubyinstaller.org for an automatic installation (Windows only)

             Ruby bin 으로 이동해서  'gem install nokogiri' 를 해주면 끝

    1G. Git Bash (Windows only) 

         Visit: http://code.google.com/p/msysgit/downloads/list

         Download and install the latest full installer for official Git

         Visit: http://git-scm.com/ for additional information about Git

         Note: During installation, you may select the "Use Git Bash only" option


    Step 2: Confirm Environment Variables


    Environment variables are data stored by your system; in this case we are interested in the file locations of the various developer tools. You should have these environment variables:

    • ANDROID_HOME, location of the Android SDK (for example: D:/android-sdk-windows)
    • ANT_HOME, location of Android Ant (for example: D:\apache-ant-1.8.1)
    • JAVA_HOME, location of the JDK (for example: C:\Program Files\Java\jdk1.6.0_20)
    • Path, folders where the operating system always looks when given a command (includes these, for example: C:\Ruby191\bin; D:\apache-ant-1.8.1\bin; C:\Program Files\Java\jdk1.6.0_20\bin; D:\android-sdk-windows\tools)

    You can confirm the environment variables the following way:

    Windows:

    2A. Right-click on My Computer (or Computer)

    2B. Select Properties -> Advanced tab -> Environment Variables button).

    2C.  "Edit..." the Path to include the needed folders.  Use a semicolon (;) to separate folders.

    Hint:  You can copy the path from the address bar in Windows Explorer.




    If everything looks good in the environment variables, try opening a command prompt (Start > Run > cmd) and typing in "ant", "ruby", "java", or "android".  If you get the error message "x was not recognized as an internal or external command" you need to check your PATH value.  If the program continues to execute you can use ctrl-c to terminate it.


    Step 3. Download the PhoneGap Source Code


    First you will need to download the latest PhoneGap code.  It is hosted on github.com.  The easier way to get the code is to download it directly from the github website.

    3A.  Visit:  http://github.com/phonegap/phonegap-android



    Alternatively, you may use a dedicated 'git' client to download the code or you may use Eclipse.  This guide will not cover either of those methods.


    3B.  Unzip the files into a folder.


    Step 4. Build the Example PhoneGap App


    Now we will use Ruby and a script called 'droidgap' that is provided with PhoneGap to package up our example app.  This will create two outputs; a file called 'PhoneGap.jar' and an Android Eclipse project, which we will then import into Eclipse.


    4A.  Open a command window and change directory ('cd') to the 'phonegap-android' folder.  In Windows, use git bash as the command window.  In Mac OS, use Terminal.

    4B.  Run the following command.  This will create a PhoneGap.jar file and create a basic Android Eclipse project in the output path that can then be opened in Eclipse.


    NOTE: The droidgap script has been updated and now there are two methods to create the necessary files. The new script is significantly simpler to use than the old method. For those who prefer the old method, it is still available.


    NEW METHOD:

    4C. From the 'phonegap-android' folder, run 'ruby bin/droidgap create [path_of_application]'. For the example app, the command would be 'ruby bin/droidgap create example'. If the example folder does not exist inside 'phonegap-android', run 'ruby bin/droidgap gen' first.


    The new create command in the droidgap script will generate the Eclipse project, ready to be imported. The results of the script can be found at '[path_of_application]_android'. Example: If [path_of_application] = '~/my_app', then droidgap create will place results at '~/my_app_android'. The for the example app, the results will be placed at '../phonegap-android/example_android'


    Skip ahead to Step 5 for Eclipse import instructions.


    Run 'droidgap help' to see other new commands including run, log, test and ship.


    OLD METHOD:

    Previous users of the droidgap script please note that droidgap must now be invoked with the 'classic' command to use this method.


        ruby bin/droidgap classic "[android_sdk_path]" [name] [package_name] "[www]" "[path]"


        android_sdk_path ... The path to your Android SDK install. (Must use forward slashes (/) in path)

        name ...................... The name of your application.

        package_name ....... The name of your package (For example: com.nitobi.demo). Can not be just the app name, must contain at least one "." (i.e. "com.example").

        www ...................... The path to your www folder. (Where your HTML, CSS and JavaScript code is located)

        path ...................... The path to generate the application. (CANNOT be inside ANY Eclipse workspace) (Must use forward slashes (/) in path)

    You should get a message in your terminal saying completed!


    Example (Windows environment):


    $ ruby ./droidgap classic "C:/Progra~1/Androi~1/android-sdk-windows" pgtest com.example.android.pgtest example/ "c:/Progra~1/Androi~1/phonegap-android/output"


    In the above Windows example, the following environment settings were used:

    android_sdk_path = "c:\Program Files\Android SDK\android-sdk-windows"

    name = pgtest

    path = "c:\Program Files\Android SDK\phonegap-android\output" (This is the output location where the example files were placed)


    Example (Mac environment):


    > cd phonegap-android

    > ruby ./droidgap classic android/android-sdk-mac_86/ test_app com.mayerdan.testapp example/ ~/projects/test_droid_phonegap


    Note if you get errors like:

    BUILD FAILED

    ~/projects/phonegap-android/framework/build.xml:49: taskdef class com.android.ant.SetupTask cannot be found


    followed by more errors like:

    0:in `stat': No such file or directory - ~/projects/phonegap-android/framework/phonegap.jar


    To fix this, just run the command with the full path to the android SDK

    "sdk.dir=/andriod/android-sdk-mac_86" => "sdk.dir=/projects/andriod/android-sdk-mac_86"


    Then run `ruby ./droidgap classic /Users/danmayer/projects/android/android-sdk-mac_86 test_app com.mayerdan.testapp example/ ~/projects/test_droid_phonegap` again.


    Some notes:


    • Your output path should not be inside your Eclipse workspace. *See note in Step 5
    • Make sure the path you set to generate the application doesn't exist
    • For the www folder, phonegap-android comes with a folder called example that includes some sample html, css and js.
    • I found I was getting errors for not having set android or ant in my path. Make sure you followed the earlier steps.
    • When pointing to a directory, you need to have quotes around the path "C:/mobile/......"
    • While in the command prompt, you should manually change all the backslashes ( \ ) to forward slashes ( / ).  This helps the droidgap script with its syntax.  E.g. The android_sdk_path argument must use forward slashes (/).
    • If you install into a folder containing a space (c:\Program Files), you must refer to it by its truncated name in the command program.  In this case "c:\progra~1".  Otherwise, the script will look for "c:\Program" and fail.
      • Note: The truncated name will be the first six characters + '~' + a sequential number starting with 1 for each instance of the same six characters.  For instance if you have two folders c:\PhoneGapA and c:\PhoneGapB, the former's truncated name will become, "c:\phoneg~1" and the latter's will become, "c:\phoneg~2".
    • For Windows users:  The droidgap script is written to expect UNIX-style syntax, which is why you need to use 'git bash' to execute these commands.  'Bash' is a shell language and the 'git bash' application can handle the expected syntax.  Alternatively you may use another bash-style command application, such as 'cygwin', but if you know what that is, you know how to install and use it.
    • Do not have "tools" as a folder in your path to the android sdk folder; C:\Users\Daniel\Dev\tools\android-sdk won't work.
    • If at any point you need to check your PATH variables in git bash you can use the command "echo $PATH"

     


    Step 5. Importing Your Example App into Eclipse

    Now time to create your project. In Eclipse, go to File > New project > Android > Android Project


    Now select create project from existing source and navigate to the new folder that was generated in the last step. Select a build target and press finish.


    *NOTE: The folder you specified in the Ruby script will actually be the folder that your Eclipse will save to, and compile from and NOT your current Eclipse Workspace. Saving your folder to a location inside of a Workspace will not allow you to create the project because the .metadata folder. If you have pointed your folder to one of your Eclipse Workspaces, simply cut and paste the folder to a location that is outside of any Workspace.


     



    Now, in Eclipse you should see your project


    Rightclick phonegap.jar under the libs folder and go to Buildpath -> Add to build path.

    Note: Now the folder structure should look like the one shown below.






    Click on the project folder again and then the Run button in Eclipse, it is the button that looks like "Play". When you run this project, you should the dialog box to Run As.., choose Android Application.
    You may get the unable to launch dialog, this can happen if you have the Android 1.5 or some other file highlighted when you try to run the project. Just select the project folder and click run.


    If you have done everything correctly, there should be an Application that loads.  It should be noted that testing with an actual device is preferable to the Emulator for many reasons, namely the fact that it's easier to test the Accelerometer, Geolocation, Beep and Vibrate Functionality.  However, for testing on the actual browser browser events, and various issues with Webkit on Android the Emulator does just as well.



    Notes


    • Perhaps JAVA_HOME does not point to the JDK. Or maybe JAVA_HOME doesn't exist. To fix this you must right click on my computer, go to advanced system settings, click the advanced tab, press the environment variables button, Under system variables click new and add JAVA_HOME if it doesn't exist and make the path to the JDK that was installed earlier.
    • ERROR:

              droidgap:48:in ``': No such file or directory
             android create project -t 7 -k be.progone.test -a PG1 -n PG1 -p E:/baud/work/Mobile/Pr_Eclipse/PG1/build (Errno::ENOENT)
              from droidgap:48:in `create_android'


              SOLUTION:

              Add the Android SDK tools path to the system. Follow steps above to get to system environment variables.

              Eg: C:\Program Files\Android SDK\tools


    • ERROR:
      "BUILD FAILED
      C:\phonegap-android\framework\build.xml:49: taskdef class com.android.ant.SetupTask cannot be found"

      SOLUTION:
      Try going to the "framework" folder and check the path in the local.properties file. See if its correct and pointing to your android sdk directory.

              You MUST use a forward slash in the directory (Windows users) otherwise the paths will not match up.

              Eg: C:/Program Files (x86)/Android SDK


     

     

    • ERROR:

     

          "Click on various buttons on the example app, doesn't do anything" or some things are working but I can't tell what is going on, or I want more information how do I view the Android logs?

         SOLUTION:
         To get more information about what is going one while phonegap is running, run the Android log viewer. `adb logcat` if adb isn't found you just need to do the full path to it something like `~/projects/andriod/android-sdk-mac_86/tools/adb logcat`. If you have both a device and a Android emulator running use -d and -e like so `adb -e logcat`. This should give you more info about what is going on. Here is a small example clipping form the android logs.


     

    D/PhoneGapLog(  291): file:///android_asset/www/phonegap.js: Line 216 : TypeError: Result of expression 'accel' [undefined] is not an object.

    E/Web Console(  291): TypeError: Result of expression 'accel' [undefined] is not an object. at file:///android_asset/www/phonegap.js:216

    D/dalvikvm(  117): GC_EXPLICIT freed 1727 objects / 91840 bytes in 110ms

    D/PhoneGap(  291): The provider network is disabled

    D/SntpClient(   61): request time failed: java.net.SocketException: Address family not supported by protocol


        From this we can see that the accel is not working. And some information about the location of the Error. This helps debug problems and also helps you to give more information when asking the PhoneGap community for help. 


    Posted by 홍반장水 홍반장水

    PhoneGap iPhone

    PhoneGapLib is a static library that enables users to include PhoneGap in their iPhone application projects easily, and also create new PhoneGap based iPhone application projects through a Xcode project template.


    https://github.com/phonegap

    https://github.com/phonegap/phonegap-iphone

    Pre-requisites

    Make sure you have installed the latest iPhone SDK. Download at http://developer.apple.com/ios

    Build and install the Installer Package

    1. Launch "Terminal.app"
    2. Navigate to the folder where Makefile is (this folder)
    3. Type in "make" then press Enter

    The installer should build "PhoneGapInstaller.pkg" into this folder, then:

    1. Quit Xcode
    2. Launch "PhoneGapInstaller.pkg" to install PhoneGapLib, the PhoneGap framework and the PhoneGap Xcode Templates.

    Create a PhoneGap project (Xcode 3)

    1. Launch Xcode, then under the File menu, select "New Project...".
    2. Navigate to the "User Templates" section, select PhoneGap, then in the right pane, select "PhoneGap-based Application"
    3. Select the "Choose..." button, name your project and choose the location where you want the new project to be.
    4. Modify the contents of the "www" directory to add your HTML, CSS and Javascript.

    Create a PhoneGap project (Xcode 4)

    1. Launch Xcode, then under the File menu, select "New Project...".
    2. Navigate to the "iOS" section, under "Applications" - then in the right pane, select "PhoneGap-based Application"
    3. Select the "Next" button, name your project and company idenfifier, then select the "Next" button again.
    4. Choose the location where you want the new project to be.
    5. Run the project at least once to create the "www" folder in your project folder.
    6. Drag and drop this "www" folder into your project in Xcode, and add it as a folder reference.
    7. Modify the contents of the "www" directory to add your HTML, CSS and Javascript.

    Alternately, you can watch this screencast.

    Uninstalling PhoneGapLib, PhoneGap.framework and the Xcode Templates

    1. Launch "Terminal.app"
    2. Navigate to the folder where Makefile is (this folder)
    3. Type in "make uninstall" then press Enter

    NOTE: It will ask you to confirm whether you want to delete the installed PhoneGapLib directory (just in case you made changes there) as well as the PhoneGap framework. It will not ask for confirmation in deleting the installed Xcode templates.

    Installer Notes

    This installer will only install items under your home folder (signified by ~)

    Items that will be installed:

    1. Xcode global var in ~/Library/Preferences/com.apple.Xcode.plist (which will be listed under Xcode Preferences -> Source Trees)
    2. PhoneGapLib Xcode static library project under ~/Documents/PhoneGapLib
    3. Xcode project template in ~/Library/Application Support/Developer/Shared/Xcode/Project Templates/PhoneGap
    4. Xcode 4 project template in ~/Library/Application Support/Developer/Shared/Xcode/Templates/Project Templates/Application
    5. PhoneGap Xcode static framework under /Users/Shared/PhoneGap/Frameworks/PhoneGap.framework (may change in future updates)
    6. Symlink to the framework in (5) under ~/Library/Frameworks

    To uninstall:

    1. Remove the PHONEGAPLIB value in Xcode Preferences -> Source Trees
    2. Delete the ~/Documents/PhoneGapLib folder
    3. Delete the ~/Library/Application Support/Developer/Shared/Xcode/Project Templates/PhoneGap folder
    4. Delete the "~/Library/Application Support/Developer/Shared/Xcode/Templates/Project Templates/Application/PhoneGap-based Application.xctemplate" folder
    5. Delete the /Users/Shared/PhoneGap/Frameworks/PhoneGap.framework folder
    6. Delete the ~/Library/Frameworks/PhoneGap.framework symlink

    PhoneGapLib Tests

    There is a Xcode project that will test PhoneGapLib according to the mobile spec. There is some setup needed before the project can be run. You will also need git installed and in your path.

    Set up the test project:

    1. Launch "Terminal.app"
    2. Type in "chmod 755 update_test.sh"
    3. Type in "./update_test.sh"

    This will get the mobile-spec submodule and install it under the PhoneGapLibTests folder. You can then build and run the PhoneGapLibTest project to see the results.

    You should run step (3) again before running any tests, to get the updated mobile-spec.











    Posted by 홍반장水 홍반장水