하이브리드앱 개발 on Visual Studio #1

페이스북에서 아래와 같은 소식이 잠시 화제가 되었다.

image

한 장의 스크린샷과 함께, 안드로이드SDK/크롬SDK/Git/SQL를 지원할 예정이라는 내용이었다. 잘못 알려진 부분이 있어서 좀 더 자세히 다뤄보고자 한다.

일단 마이크로소프트는 “비주얼 스튜디오에서 안드로이드SDK, 크롬SDK, Git, SQL 지원 예정”이라는 발표를 한 적이 없다. 대신 최근에 Apache Cordova와 함께 하이브리드 앱 개발을 지원하겠다고 발표하였다. 현재 이 기능은 프리뷰 버전으로 제공되고 있다.

하이브리드앱은 앱 내에서 웹 컨텐츠를 처리하기 위해서 간단한 로컬 웹서버/웹뷰를 필요로 한다. 또한, 웹 컨텐츠에서 디바이스 기능을 호출할 수 있는 API와 각 플랫폼 별로 앱 패키징해주는 기능이 필요하다. 이러한 기능을 하는 것이 Apache Cordova이다. 원래는 PhoneGap이라는 이름으로 유명하지만, Adobe에서 이를 오픈소스화하여 코드 베이스를 Apache로 넘겨서 Apache Cordova가 되었다고 한다. 두 프로젝트는 현재 이름만 다른 패키지 배포판이다. (참고)

그렇다면, VS에서 하이브리드 앱을 지원하기 위한 기술 요소들을 한번 생각해보자. 먼저, Android나 iOS 개발도구가 필요하다. 각 앱을 빌드하고 에뮬레이터(Android의 경우)를 띄워서 앱을 실행할 수 있어야 하기 때문이다. Android 앱을 빌드하려면 Java도 필요하고, Webkit 기반의 웹뷰를 에뮬레이팅하기 위해 Chrome이 필요할 것으로 보인다. SQLite는 WebSQL를 대신해서 로컬 스토리지 용도로 쓰일 수 있다. 그리고, iOS 앱을 배포하기 위해서 iTunes가 필요할 것으로 보인다.

실제로, Multi-Device Hybrid Apps과 함께 제공되는 문서에 보면 이러한 내용이 명시되어 있다.

The installer will then ask permission to download certain dependencies. These are mostly open source software pre-requisites required by individual platforms or Apache Cordova to build and run your applications. Any dependencies that already exist on your system will not be re-installed (as long as the required version is present).

하이브리드 앱을 빌드하기 위해 필요한, 개별 플랫폼이나 Apache Cordova에 필요한 오픈소스 구성요소들을 설치한다고 되어있다. 좀 더 자세하고 정확한 설명은 다음과 같다.

Third Party Dependencies 

  • Joyent Node.js – Enables Visual Studio to integrate with the Apache Cordova Command Line Interface (CLI) and Apache Ripple™ Emulator
  • Git CLI – Required only if you need to manually add git URIs for plugins
  • Google Chrome – Required to run the Apache Ripple emulator for iOS and Android
  • Apache Ant 1.8.0+ – Required as a dependency for the Android build process
  • Oracle Java JDK 7 – Required as a dependency for the Android build process
  • Android SDK – Required as a dependency for the Android build process and Ripple
  • SQLLite for Windows Runtime – required to add SQL connectivity to Windows apps (for the WebSQL Polyfill plugin)
  • Apple iTunes – Required for deploying an app to an iOS device connected to your Windows PC

앞서 페이스북의 소식에 지원 예정이라고 되어 있었던, GitSQLite의 경우는 이전 Visual Studio 2012에서 부터 사용할 수 있었다.

이왕 살펴보는 겸, VS에서 하이브리드 앱을 어떻게 만드는지 좀 더 살펴보자.

image

VS 2013 Update 2부터는 TypeScript가 정식으로 지원되어, 위 화면과 같이 하이브리드 앱을 만들 때에도 JavaScript와 TypeScript 프로젝트 템플릿이 제공된다.

프로젝트 구성은 다음과 같다.(TypeScript의 경우)

image

여기서 살펴볼 만한 부분은 res, typeings, merges 정도이다.

res는 플랫폼 고유 리소스들이 들어 있는 폴더이다. 서명, 아이콘, 스플래시 스크린 등이 들어간다. 그리고, merges는 CSS 파일과 같은 플랫폼 고유의 코드를 추가하는데 사용한다.

기본 문서에는 JS로 되어 있으나, 호기심에 TypeScript(이하 TS)로 해보았다. JS 프로젝트와의 차이는, scripts 폴더에 index.js 대신 index.ts 파일이 있으며, 추가로 typings 폴더가 있다는 점이다. JS 프로젝트에는 typings 폴더가 없다. typings 폴더 밑에는 Cordova를 구성하는 각 클래스 별로 Type이 선언되어 있는 *.d.ts 파일이 있다.

image

다른 JavaScript 라이브러리의 TypeScript에서 사용하기 위해서 사용하는 파일들이다. Cordova의 API를 사용할 때 Type 체크나 IntelliSense 등에 사용된다. 자세한 내용은 이 글의 Ambient Declaration 부분이나 TypeScriptLang.org의 내용을 참고하자.

일단 비어있는 템플릿 앱을 실행해 보았다.

image

실행하는 옵션에 Android 에뮬레이터와 디바이스가 보인다. 그런데 실행하자 다음과 같은 에러가 나온다.

image

해당 에러를 검색해보면 스택오버플로우에 답변이 있다. 환경 변수와 PATH 설정이 잘 못 되어 있어서 그런 듯 하다. 가이드 대로 환경 변수와 PATH 설정을 변경하고 재시작하면, Ripple 에뮬레이터에서 실행하는데에는 더 이상 문제가 발생하지 않는다.

흥미로운 점은, Ripple이라는 하이브리드 앱의 에뮬레이터이다.

image

하이브리드 앱의 에뮬레이터가 Chrome 브라우저에서 실행되고 있다. 앞서 설치 과정에서 Chrome을 왜 설치하는지 알 수 있었다.

마지막으로 Device/Emulator에서 앱을 실행해보려고 했으나 위와 유사한 또 다른 에러가 발생했다. 내 경우에는 Android ADK 가 2곳에 설치가 되어 있었는데 예전에 설치했던 ADK의 버전이 낮아서 발생하는 문제인 것 같았다. Android SDK Manager에서 API 레벨을 19이상으로 업데이트해서 문제를 해결하고 다음과 같이 디바이스에서의 실행에 성공하였다.

_978

여기까지 Multi-Device Hybrid Apps 공식 가이드 문서를 참고로 하여 기본적인 하이브리드 앱 개발환경을 살펴보았다. 사실 개인적으로는 WinJS 라이브러리를 타 플랫폼에서 어떻게 사용할 수 있는지가 궁금한데, 이 부분은 다음 편에서 WinJS 앱 샘플을 통해 살펴보도록 하겠다.

Advertisements

4 comments

  1. 안녕하세요~관심있는 주제라서 잘 보고 갑니다~
    한가지 여쭤볼께 있는데요.
    전 빌드하고 실행하려고 하면
    Chrome must be installed in order to launch the app in Ripple.
    이런 에러가 나면서 실행이 되지 않아서요.
    VS2013 Pro이고 최신 Multi-Device Hybrid Apps for Visual Studio CTP1.1로 설치를 했습니다.
    에러네용은 명확한데 해결방법을 모르겠네요.
    이미 크롬은 설치되어 있긴한데요.

    1. 혹시 해결하셨습니까!? 저도 동일한 크롬 Ripple 오류가 나네요.
      Stack over flow 를 찾아보면 Program files 밑에 크롬이 설치되어있어야 한다는데..
      실제로 저는 그 밑에 설치되어 있거든요..ㅠ.ㅠ

      난감합니다. ㅎㅎㅎ 하루종일 이 오류만 처다보고 구글링 하고 있는데 해결을 못하겠네요.

  2. Chrome must be installed in order to launch the app in Ripple. 라는 메시지는
    Register에서 HKEY_LOCAL_MACHINE\SOFTWARE\Clients\StartMenuInternet\Google Chrome 에 있는 (Default) 키값을 “Chrome” 에서 “Google Chrome” 으로 변경하니 잘되었습니다.

답글 남기기

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

WordPress.com 로고

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

Twitter 사진

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

Facebook 사진

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

Google+ photo

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

%s에 연결하는 중