반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리


반응형

그동안 개발한 모바일 웹을 블랙베리용 WebWorks 어플리케이션으로 개발을 해야 합니다. 그래서 블랙베리 웹웍스에 대한 공부를 시작했습니다.



What's a WebWorks application?


BlackBerry WebWorks application은 블랙베리 스마트폰이나 태블릿에 설치할 수 있는 standalone web application 입니다.



What's the big deal?


첫번째로 BlackBerry WebWorks application이 standalone application 이라는 것은 원격에 있는 웹페이지나 어플리케이션을 로드하기 위해 그 주소를 일일이 타이핑할 필요가 없다는 겁니다. 이렇게 하려면 그 어플리케이션은 블랙베리 디바이스 내에 있어야 하겠죠. 그 어플리케이션은 따로 handle 할 필요가 없는 브라우저(WebKit engine container)로 볼 수 있는 앱이 되어야 합니다. 즉 컨테이너에 패키지로 들어있는 웹 asset들의 bundle 이라는 얘기죠. 


두번째로 어플리케이션을 빌드하기 위해  CSS와 HTML5 그리고 자바스크립트 같은 표준 웹 기술의 장점을 사용할 수 있다는 겁니다. 그리고 센차(Sencha), 폰갭(PhoneGap), jQuery 나 Dojo 같은 많이 사용되는 모바일 웹 프레임워크들을 사용할 수 있다는 겁니다. 표준 웹 기술을 사용함으로서 여러분이 가지고 있는 웹 개발 경험이나 웹 assets들을 활용할수 있기 때문에 어플리케이션을 빠르게 개발할 수 있는 장점을 갖게 됩니다.


세번째로는 가중 중요한 건데요. BlackBerry WebWorks platform을 사용함으로서 HTML5 어플리케이션에 native 기능을 사용하도록 만들 수 있다는 겁니다. 여러분은 자바스크립트 wrapper를 사용한 platform APIs 들을 사용하실 수 있습니다. 이를 이용해 블랙베리의 여러 기능들을 사용하실 수 있습니다. (BBM, PIM, media, hardware). 이렇게 함으로서 여러분 앱을 사용하는 유저들에게 integrated experience 를 전달할 수 있습니다. 이 모든 것들은 오픈 소스입니다. BlackBerry WebWorks 는 GitHub 에 있는 open source project 중 하나 입니다.



What tools do I need?


개발을 위한 에디터로는 여러분들이 사용하고 계시는 에디터를 그냥 사용하시면 됩니다.


BlackBerry WebWorks application을 테스트 하는 것은 여러분이 예상하시는 것 보다 훨씬 간단합니다. Ripple emulator 를 사용하세요. 그리고 여러분의 BlackBerry WebWorks application 이 작동하는 웹사이트 (로컬이든지 remote server 든지)를 point 해 주시면 됩니다. 그러면 완전히  BlackBerry WebWorks SDK 환경에서 emulating 하실 수 있습니다. 코드를 컴파일 하거나 시뮬레이터를 실행시키실 필요가 없습니다. Ripple emulator 를 사용하시면 일반 데스크탑 브라우저 개발하는 것과 비슷하게 개발하실 수 있습니다. 그러니까 소스를 고치고 싶으실 때도 그냥 에디터에서 곧바로 소스를 고치시면 됩니다. 그런 다음에 Ripple emulator 를 refresh 하시면 바뀐 소스의 결과를 보실 수 있습니다.


Ripple emulator 를 가지고 소스를 패키지화 하고 여러분 앱을 sign 하실 수도 있습니다. 여러분 앱을 패키지화하고 sign 을 하시려면 우선 BlackBerry WebWorks SDK를 인스톨 하셔야 합니다. 그리고 나서 Ripple emulator에 있는 packaging settings 를 configure 하시면 됩니다.


여러분의 어플리케이션을 블랙베리 스마트폰이나 태블릿에 deploy 하시려면 BlackBerry WebWorks SDK 을 사용하시면 됩니다.




아래 내용은 좀 더 high-level process 와 관련한 detail 들 입니다.


  1. Create your application web files (for example, HTML, CSS, and JavaScript).
  2. Test and debug your application with the Ripple emulator. For more information, see Getting started with the Ripple emulator.
  3. Create a BlackBerry WebWorks configuration document (config.xml) that contains details about your application. For more information, see Creating a configuration document.
  4. Package your application using the Ripple emulator (make sure that you install the BlackBerry WebWorks SDK first). For more information, see Packaging your app in Ripple.
  5. Deploy your application to a BlackBerry device or simulator. For BlackBerry 10 OS or BlackBerry PlayBook OS applications, you deploy a .bar file. For BlackBerry 7 (or earlier versions of the BlackBerry Device Software), you deploy a .cod file. For more information on deploying apps, see the testing section.



How do I distribute my application?


BlackBerry WebWorks application은 native BlackBerry smartphone 이나  tablet applications 과 마찬가지로 패키지화 하시면 됩니다. 블랙베리 7 용 이나 그 이전 버전 으로 개발된 스마트폰 앱들은 BlackBerry Desktop Manager 나 the BlackBerry App World storefront 같은 웹사이트를 통해서 distribute 될 수 있습니다. BlackBerry PlayBook OS 용 어플리케이션들은BlackBerry App World를 통해서면 distribute 될 수 있습니다.


앱을 distribute 하는것과 관련한 좀 더 자세한 정보를 원하시면 Distributing your application를 보세요.



What's next?

To get started, visit the following resources for developing web applications for the BlackBerry Application Platform:






반응형


반응형

iOS 6 부터 모바일 사파리 브라우저에 아주 재밌는 기능이 추가 됐었네요.

바로 어플리케이션에 대한 배너광고를 달아주는건데요.
해당 앱이 깔려 있으면 open 버튼이 나오고 깔려 있지 않으면 앱스토어로 링크를 걸어 줍니다.


그리고 그 링크에는 파라미터를 넣을 수 있어서 어플리케이션을 열 때 해당 파라미터를 전달 받아서 앱의 특정 페이지를 열거나 어떤 상황이 되도록 구현할 수도 있구요.

해당 앱이 그 디바이스에서 실행 가능한지도 자동으로 판별해서 지원하지 않는 디바이스이면 이 배너광고가 나오지 않습니다.


그리고 물론 iOS 버전도 자동으로 체크해서 지원하지 않는 버전이면 이 배너 광고가 나오지 않구요.

이 기능은 간단히 메타태그 한 줄로 처리 가능하도록 했네요.


웹 싸이트 만들 때 사용할 만 한데요.

이 기능은 CNN 사이트 접속했다가 나오길래 신기해서 여기저기 검색해 보고 알아 낸 겁니다.



괜찮은 기능인 것 같아서 일단 애플에서 제공하는 문서를 아래  번역해 뒀습니다.

나중에 유용하게 써 먹을 수 있을 것 같네요.


Promoting Apps with Smart App Banners


iOS 6 버전부터 Safari browser 에 smart App Banner 기능이 추가 됐습니다. 아래 그림에서 보듯이 이 기능은 웹사이트에서 앱 스토어의 앱을 promoting 하는 표준화된 방법을 제공합니다.


Figure 7-1  A Smart App Banner of the Apple Store app


Note: Smart App Banner는 iOS 에서만 보여지고 OS X에서는 보여지지 않습니다.



Smart App Banner는 다른 promotional method들과 비교해서 유저의 browsing experience 면에서 획기적으로 개선 됐습니다. 이 배너는 iOS6 에 implement 되서 웹상에서 일관된 look and feel을 제공해 유저가 알아보기 쉽게 되었습니다. 유저는 이 배너를 tap 하면 다른 third-party 광고가 아니라 앱스토어로 가게 된다는 사실을 신뢰할 수 있게 됐습니다. 이 배너는 웹페이지 상단에 나타납니다. full screen 으로 나타나 웹 콘텐츠를 가리지 않습니다. 그리고 크고 알아보기 쉬운 close button 이 있어 유저가 쉽게 이 배너를 닫을 수 있습니다.


앱이 이미 유저의 디바이스에 인스톨 돼 있으면 이 배너는 다른 모습으로 보이게 됩니다. 유저가 이 배너를 tap 하면 그 깔려 있는 앱이 열리게 되죠. 그리고 만약 유저의 디바이스에 해당 앱이 없다면 배너를 tab 하면 앱스토어의 해당 앱 페이지를 open 하게 됩니다. 유저가 웹사이트로 되돌아오면 배너에 progress bar 가 나타나 이 앱이 다운로드 되는 상황을 알려 줍니다. 앱이 다운로드를 끝마치게 되면 View button 은 open button 으로 바뀌게 됩니다. 이 때 배너를 tap 하면 해당 앱이 open 되죠.


Smart App Banner는 자동으로 해당 앱이 유저 디바이스에서 지원이 되는지 여부를 판단합니다. 그래서 유저의 디바이스가 이 배너기능을 지원하지 않거나 해당 앱이 실행되지 않는 환경이라면 자동으로 이 배너는 나타나지 않게 됩니다.


Implementing a Smart App Banner on Your Website


여러분 웹사이트에 Smart App Banner 를 구현하시려면 페이지의 헤더 안에 아래 메타 태그를 넣어 주세요.

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">


콤마(,) 로 나눠지는 세개의 파라미터가 있는데요. 그 내용은 아래와 같습니다.


  • app-id: (Required.) 여러분 앱의 unique identifier. iTunes Link Maker 에서 여러분 앱 ID 를 찾으려면 Search Field 에서 여러분 앱 이름을 넣으세요. 그리고 해당 국가와 media type 을 선택하세요. 그리고 여러분 앱을 찾아서 오른쪽 column 에 있는 iPhone App Link 를 선택하세요. 여러분의 앱 아이디는 id 와 ?mt 사이에 있는 9자리 숫자입니다.

  • affiliate-data: (Optional.) 여러분의 iTunes affiliate string 입니다. 만약 여러분이 iTunes affiliate 이 아니라면 http://www.apple.com/itunes/affiliates/ 에서 좀 더 자세한 사항을 읽어 보세요.

  • app-argument: (Optional.) 여러분 native app 에게 context를 제공하는 URL. 이 파라미터를 사용하고 유저의 디바이스에 여러분 앱이 인스톨 돼 있다면 여러분의 iOS app 의 특정 지점을 open 할 수 있습니다. 이 기능은 navigational context 를 보유하고 있을 경우 유용합니다.

    • 만약 유저가 웹사이트의 navigational hierarchy 내 깊이 들어와 있다면 해당 document's entire URL을 pass 할 수 있습니다. 그리고 그것을 여러분 앱에서 parse 해서 앱 내의 적당한 곳이 open 되게 할 수 있습니다.

    • 만약 유저가 웹사이트에서 search를 하면 그 query string을 pass 할 수도 있습니다. 그래서 자연스럽게 앱내에서도 그 search가 작동하도록 할 수 있습니다.

    • 유저가 creating content 중이라면 해당 seesion ID를 pass 해서 앱내의 웹 세션 state를 다운로드 하도록 할수도 있습니다.

    server side script로 각 페이지의 app-argument를 dynamic하게 생성할 수도 있습니다. 그래서 여러분이 원하는 URL을 동적으로 생성할 수 있습니다.


Providing Navigational Context to Your App


app delegate로 application:openURL:sourceApplication:annotation: method를 구현하면 해당 URL을 가지고 앱이 시작할 때 어떤 동작을 fire 할 수 있습니다. 즉 pass 한 URL을 interpret 해서 어떤 로직을 만들 수 있죠. app-argument parameter에 세팅한 값은 NSURL url object로서 활용 가능합니다.


Listing 7-1 에제는 native iOS app에 데이터를 pass 하는 웹사이트를 염두에 두고 작성한 겁니다. 이 기능을 구현하기 위해 URL이 string /profile를 포함하고 있는지 여부를 감지합니다.만약 있으면 profile view controller 를 열고 query string에 있는 해당 profile ID number를 pass 합니다.


Listing 7-1  Routing the user to the correct view controller

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
    // in this example, the URL from which the user came is http://example.com/profile/?12345
    // determine if the user was viewing a profile
    if ([[url path] isEqualToString:@"/profile"]) {
        // switch to profile view controller
        [self.tabBarController setSelectedViewController:profileViewController];
        // pull the profile id number found in the query string
        NSString *profileID = [url query];
        // pass profileID to profile view controller
        [profileViewController loadProfile:profileID];
    }
    return YES;
}





반응형


반응형
그동안 Eric Sarrion 이라는 분이 만든 http://the-jquerymobile-tutorial.org/ 라는 웹사이트에 있는 jQuery Mobile tutorial 로 공부 했었습니다.

Part 2 부분인 JavaScript Programming 부분을 완전히 끝냈는데요.

(관련 글들은 JQM tutorial 코너에 있습니다. 여기로 가시면  관련 글들을 보실 수 있습니다.


앞으로도 계속 jQuery Mobile 공부는 이어 가겠지만 이젠 Sencha Touch 쪽에 좀 더 신경을 쓸까 합니다.


Eric Sarrion 은 제가 알기로 프랑스 사람인 것으로 아는데요.

jQuery Mobile Tutorial 책을 저술 했고 관련 내용을 안드로이드와 iOS 애플리케이션으로 만들어서 보급하고 있습니다.


저는 그 중에서 jQuery Mobile 과 자바스크립트로 프로그래밍하는 부분을 다룬 Part 2 부분을 공부한 겁니다.


Eric Sarrion 에게 감사드리고 여러분들도 마켓에 있는 Eric Sarrion 의 jQuery Mobile Tutorial application 을 많이 사 보시기 바랍니다. 가격은 1불 입니다.


일단 목표했던 jQuery Mobile 튜토리얼도 2012년을 마감하면서 완료 됐네요.

2013년 새해도 기분 좋게 시작됐습니다.

새해 첫날 올린 글에 Daum View의 Best 글에도 선정되고...

대서양 해돋이를 보고 글과 그림을 올렸는데 2000분이 넘는 분들이 보셨네요.


이제는 Sencha Touch 를 공부해 보려고 하는데요.


너무 오랫동안 손을 놔서 다 잊어 버렸습니다.

그래서 일단 제가 예전에 올린 Sencha Touch 관련 글들을 보면서 공부하려고 합니다.


예전에 센차터치 관련해서 24개의 글을 올렸었네요.

그 글을 읽으면서 계속 이어서 할지 아니면 jQuery Mobile 에서 했던 것 처럼 어떤 Tutorial 싸이트를 찾아서 공부를 진행할지 결정할 생각입니다.


제 글을 보면서 공부하고 직접 실습도 하고 있는데요.

만든 소스 파일은 얼마전 웹 호스팅을 받은 서버에 올려놓고 있습니다.

도메인 주소도 받았는데요.



주소는  ...... (잠시 폐쇄했습니다. )입니다.

(Sencha Touch 는 구글 크롬 브라우저에서 실행해야 제일 잘 되더라구요.)


이 글을 쓰는 시점엔 http://coronasdk.tistory.com/88 글과 http://coronasdk.tistory.com/167 글에 있는 소스코드를 실습해 보고 올려 놨습니다.


그 사이에 http://coronasdk.tistory.com/157 부터 이어지는 4회에 걸친 Sencha Touch 로 앱 만들기 예제들이 있는데요.

그 글을 쓸 때도 잘 안됐는데 이번에도 잘 안되더라구요.

뭐가 잘 못 된건지..

혹시 그 글에 나온 소스코드 제대로 실행되시는 분들은 소스코드 좀 공유해 주시면 감사하겠습니다.


그러면 앞으로도 계속 이어지는 Sencha Touch 관련 글들과 또 다른 Cross Platform Mobile Application 개발에 필요한 여러 테크닉들 관련 글들에 많은 관심 부탁 드려요. ^^



반응형

command 로 iOS 에 있는 Pulse 시작시키기

2012. 12. 17. 23:26 | Posted by 솔웅


반응형
이번에 회사에서 모바일 VPN 앱인 Junos Pulse를 이용할 것 같습니다.
이와 관련해서 사전 조사를 하게 되서 관련 글을 정리해 둡니다.


Launching the Pulse for iOS App with a Command




Pulse launcher 는 디바이스 유적 iOS 앱으로 Junos Pulse를 install 했을 때 iOS와 에 register 된 command 입니다. 이 command 는 모든 login parameter 들을 명시할 수 있습니다.



여러분은 웹페이지 내와 외부 앱에서 이 Pulse launcher를 사용할 수 있습니다. 예를 들어 VPN 연결이 필요한 외부앱에서 이 Pulse launcher 를 사용해서 Pulse 를 실행시킬 수 있습니다. 만약 정확한 passcode로 이 앱을 시작시키거나 access 하려고 했다면 Pulse 는 시작 될 것이고 VPN 연결은 유저가 별도로 무엇을 입력할 필요 없이 시작 될 겁니다. 유저가 iOS 디바이스에서 Pulse Secure 의 웹포탈에 로그인을 하면 디폴트 페이지가 뜰 겁니다. iOS 디바이스 유저는 Pulse Secure Access Service Web Portal 로 로그인을 하고 VPN link를 클릭 하면 모바일 사파이에서 Pulse를 실행 시킬 수 있습니다.





Figure 1: iOS Device의 Pulse Secure Access Service Web Portal

모바일 사파리에 있는 VPN link를 tap 합니다. 그러면 Pulse app 이 실행될 겁니다. 만약 iOS 디바이스에 Pulse 가 install 돼 있지 않다면 에러가 뜰 겁니다. 그 다음 단계는 현재의 Pulse 연결 상태와 configuration 에 따라 진행 될 겁니다.


  • Pulse 가 연결상태가 아니라면 현재 세팅된 configuration에 따라 VPN 을 연결할 겁니다.
  • The target URL is already defined and the user just needs to specify a name for the connection. Pulse 가 연결된 상태가 아니고 target Pulse server 에 대한 configuration이 없다면 Pulse 는 Add Configuration 화면을 띄울 겁니다. Target URL 은 이미 정의 돼 있을 겁니다. 유저는 단지 connection 이름을 명시하시면 됩니다.
  • Pulse app 이 이미 Pulse server 에 연결된 상태라면 Pulse app 이 foreground 로 뜰 겁니다.


여러분의 Web Page나 external app에 Pulse launcher 를 employ 하시려면 아래 형식의 format 을 사용해서 링크를 걸어 주세요.

junospulse://<server-host>/<server-path>?method={vpn}&action={start|stop}
&DSID=<dsid-cookie>&SMSESSION=<smsession-cookie>&username=<username>
&password=<password>&realm=<realm>&role=<role>


Usage notes:


  • 만약 유저가 Junos Pulse 앱에 VPN configuration을 생성할 때 username, realm, role을 명시했다면 그 값들이 Web-based login 시 로그인 페이지에 자동으로 표시가 될 겁니다. 로그인 하는 동안 VPN configuration의 field들에 모두 자동적으로 이 값들이 채워졌거나 junospulse:// launch URL 이 채워졌다면 로그인 과정은 유저의 추가적인 input 과정 없이 자동으로 진행 될 겁니다.

  • Pulse app 은 VPN configuration의 password field 에 암호를 저장해 두지 않습니다. Pulse 앱은 iPhone Configuration Utility 나 Junos Pulse Mobile Security Suite 에 의해 인스톨 된 VPN configuration의 password field로 부터 어떤 값을 사용하지 않습니다. Junos Pulse 는 junospulse:// URLs에 명시된 암호만 이용합니다.

  • 유저가 직접 username,realm, role을 로그인하기 위해 입력하면 앱은 이 값들을 VPN configuration에 저장해 둡니다. 그리고 다음번에 이 값으로 자동으로 채워지게 될 겁니다. 유저가 입력한 password 는 VPN configuration에 저장되지 않습니다.

  • realm과 role field는 Apple iOS 4.2 이상의 버전에서 지원됩니다. 만약 Pulse 가 iOS 4.1 에서 실행이 됐다면 realm과 role field들은 Junos Pulse Add/Edit configuration view 에 나타나지 않을 겁니다.


반응형


반응형

회사에서 앞으로 Hybrid 앱 쪽을 고민하는 것 같습니다.

지금까지 저희 팀에서는 모바일 웹 어플리케이션만 만들었는데요.


이번에 Hybrid 관련해서도 관심을 가지더라구요.


일단 제가 알아볼 기술은 아래 3가지 입니다.


1) 현재 디바이스가 네트워크와 연결 상태에 있는지 여부

2) 현재 연결된 네트워크 이름 알아낼 수 있는지 여부 (WiFi 이면 그 이름도)

3) 현재 특정 앱이 디바이스에 깔려 있는지 여부 알아내기 (혹은 실행하기)


이 세가지인데요.


제가 알아낸 것은 PhoneGap 에서 지원하는 Connection 이라는 API 입니다.

이 API 로 1번 문제는 해결할 수 있었습니다.


인도에 있는 팀에서 플러그인을 만들어서 2번 문제까지도 해결을 했는데요.

아마 PhoneGap 과 Java와 JS 등등을 사용해서 해결한 것 같더라구요.

나중에 소스 분석 좀 해 봐야겠어요.


3번은 아직 방법을 찾지 못했습니다.

안드로이드나 iOS Native language 를 사용해서 해결해야 될 것 같기도 하고 아니면....

웹 기술로도 모바일 기기의 이메일, 카메라, SMS 등을 실행시킬수 있는 걸로 봐서 간단하게 해결 할 수도 있을 것 같기도 한데...


좀 더 연구해 봐야겠습니다.


일단 이 글에서는 제가 알아본 PhoneGap 의 Connection 을 이용한 예제를 정리해 놓겠습니다.




결과화면은 이렇습니다. 처음 시작할 때나 'Click It 버튼을 클릭할 때 Alert 화면으로 현재 연결된 네트워크 Type 을 보여 줍니다.


우선 파일 구조부터 살펴 보죠.



우선 PhoneGap 프로젝트를 만듭니다.

자세한 내용은 이전글을 참조하시구요.


우선 빨간 줄을 그은 파일들은 그냥 복사만 해 넣으면 되는 겁니다.

폰갭 다운 받은 폴더에서 해당 파일을 복사해서 넣으세요.

이것도 이전글을 참조하세요. config.xml 은 지난번에는 복사해 넣지 않은건데 이번엔 복사해 넣으셔야 됩니다.


이 파일에서 PhoneGap 에서 지원하는 기능들을 사용할 경우 해당하는 플러그인을 불러올거거든요.


그 다음 파란줄로 그은 파일들이 여러분이 손을 보셔야 될 파일들 입니다.

일단 MainActivity.java 파일들을 보죠.


package com.example.test;

import org.apache.cordova.*;
import android.os.Bundle;
import android.view.Menu;

public class MainActivity extends DroidGap {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }
}

처음 Android Project 를 만들면 약간 다르게 돼 있을겁니다.

자세한 내용은 역시 이전글에 있습니다. 참고하세요.


주요한 코딩은 index.html 부분에 있습니다.


<!DOCTYPE html>
<html>
  <head>
    <title>navigator.connection.type Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is loaded and it is now safe to make calls Cordova methods
    //
    function onDeviceReady() {
        checkConnection();
    }

    function checkConnection() {
        var networkState = navigator.network.connection.type;

        var states = {};
        states[Connection.UNKNOWN]  = 'Unknown connection';
        states[Connection.ETHERNET] = 'Ethernet connection';
        states[Connection.WIFI]     = 'WiFi connection';
        states[Connection.CELL_2G]  = 'Cell 2G connection';
        states[Connection.CELL_3G]  = 'Cell 3G connection';
        states[Connection.CELL_4G]  = 'Cell 4G connection';
        states[Connection.NONE]     = 'No network connection';

        alert('Connection type: ' + states[networkState]);
    }

    </script>
  </head>
  <body>
  <p><br><p>
    <p>A dialog box will report the network state.</p><br>
    <center><input type="button" value="Click it" onClick="checkConnection()"></center>
  </body>
</html>


이 코드는 PhoneGap API Document에 나와 있는 내용입니다.

제가 덧붙인 부분은 아랫부분에 버튼을 만들고 그 버튼을 클릭하면 checkConnection() 함수를 호출하는 부분입니다.


우선 처음에 시작은 onDeviceReady() 함수에서 합니다.

이 함수는 앱이 시작하면 자동으로 호출되는 함수 같습니다.


이 함수 안에서 checkConnection() 함수를 호출하니까 앱이 시작할 떄 checkConnection()이 동작을 하게 됩니다.


checkConnection() 에는 Cordova API 에서 제공하는 Connection 기능을 구현해 놓았습니다.


navigator.connection.type 로 현재 연결된 Network type 을 받아서 

networkState 변수에 담습니다.

그리고 var states 배열에 각 Network 타입마다 적당한 문장을 대입시켜 넣구요.

alert('Connection type: ' + states[networkState]); 로 해당 배열을 출력시킵니다.


하고 나니 간단하네요.


Test.zip

필요하신 분들은 이 파일을 다운 받아서 실행해 보세요.


Test.apk

위 파일은 안드로이드 애플리케이션으로 빌드한 파일 입니다.


이 파일을 안드로이드 폰에 깔아서 실행시키시면 동작할 겁니다.



반응형


반응형

정말 오랜만에 폰갭 관련 글을 올립니다.

요즘 회사일로 Hybrid App 을 연구 중이거든요.

기존의 모바일 웹을 Hybrid App 으로 만들려고 합니다.


그래서 그 기능을 Corona SDK 와 Corona SDK 의 Web App 을 이용해서 Hybrid App으로 만들 수 있는지 여부에 대해 궁금해서요.

지난주에 몇가지 기능에 대해 문의를 했거든요.

목요일 아침에 했는데 아직 응답이 안 오네요.


그래서 오늘(일)은 따로 폰갭을 설치해서 필요한 기능들을 테스트 해 볼까 하는 기특한 마음이 생기더라구요.

(일요일이라고 뒹굴뒹굴 거리지 않고요.. ^^ 이런 날 며칠 없어요..)


지난번에 설치한 건 제 노트북에 설치해서.. 오늘은 회사 노트북에 설치 하기로 맘 먹었습니다.

설치하는 법을 검색하려고 네이버에 '폰갭 이클립스' 로 검색했더니......

제 글이 제일 상단에 뜨는 거예요.. 이런 영광이... ^^

그래서 제 블로그로 들어왔는데 검색해서 뜬 글보다는 그 전에 더 간단하게 PhoneGap 설치 과정을 정리한 글이 있더라구요.

PhoneGap 설치하고 예제 실행하기 

이 블로그에 글을 정리하는 이유가 이렇게 나중에 필요할 때 찾아보기 위해서거든요.
나름 뿌듯하게 생각하면서 따라하고 있는데요...

이럴수가 그동안 너무 많이 바뀌었어요.
그 글은 올해(2012) 4월에 올린글인데 12월인 지금은 너무나도 많이 바뀌어 있는거예요.

물론 너무너무 간단해 졌다는거...

간단해 진 부분은 안드로이드 SDK 설치 과정입니다.
이거 설치하면 자동적으로 이클립스까지 설치되서 복잡하게 Android Development Tool (ADT) 설치하고 환경 맞추고 뭐 그럴 필요 없이 그냥 버튼만 누르면 다 되더라구요.
(이거 오래전에 바뀌었겠죠? 전 계속 모바일 웹만 개발하느라 Android Native 쪽에는 손을 놓은지 오래 되서 몰랐어요. ^;)

이 변경된 방법도 여기 한번 정리해 놓으렵니다.

우선 PhoneGap 웹사이트로 갑니다. http://phonegap.com/developer


여기서 Getting Started Guides 를 클릭합니다.

거기서 Getting Started with Android를 클릭합니다.


뭘 많이 설치하라구 나오죠? 다 무시하고 Android SDK 를 클릭합니다.


Download the SDK 를 클릭해서 다운 받습니다.

다운받은 압축파일을 풀면 끝입니다.


이렇게 두개의 폴더가 있을 텐데요. 그냥 이클립스로 들어가셔서 실행시키기만 하시면 됩니다.


첫 실행에서는 작업할 때 파일이 저장될 workspace 의 경로를 임의의 장소로 정해 주시구요.

그리고 이런 화면이 나올 겁니다.
첫번째 프로젝트를 만들기 위해 이 Welcome 화면에서 시키는 대로 하겠습니다.
(이 Welcome 화면은 나중에 Help-Welcome 을 선택하시면 언제든지 보실 수 있습니다.)

  1. Click File > New > Android Application Project.
    (If you don't see this option, click File > New > Other, then open the Android folder and select Android Application Project.)
  2. Follow the wizard to set up your new Android app project.



이 글대로 따라 하세요. 그냥 시키는 대로만 하면 됩니다.
그러면 첫번째 안드로이드 프로젝트가 만들어 질 텐데요.
여기다 그냥 안드로이드 앱 프로그래밍을 하셔도 되구요.
오늘 목적은 PhoneGap을 사용할 거니까 여기서 PhoneGap 을 사용하는 방법을 알아 보겠습니다.



아까 저 맨 첫번째 그림에서 Download & Archives 를 클릭해서 폰갭을 다운 받습니다.
그리고 압축을 풉니다.

그 압축을 푼 다음 lib-android 폴더로 들어가시면 위와 같이 뜰 겁니다.
여기서 저 cordova-2.2.0.jar 와 cordova-2.2.0.js 파일만 복사해서 아까 이클립스에 만든 프로젝트의 적당한 위치에 복사해 넣으시면 됩니다.


바로 저 assets 에 www 란 폴더를 만들고 cordova-2.2.0.js 를 복사해 넣구요.

그 다음에는 원래 있던 libs 라는 폴더에 cordova-2.2.0.jar를 복사해 넣습니다.

그럼 이제 java 파일을 약간 손보실 차례입니다.


저 빨간 줄 그은 부분만 보이시는 대로 수정하시면 됩니다.

이 부분은 이전에 제가 올린 글에서 복사해 넣을 께요.

다음에는 AndroidManifest.xml 파일을 수정합니다.

AndroidManifest.xml 안에서 <uses-sdk android:minSdkVersion="8" /> 코드를 찾으세요.

그리고 그 위에 아래 코드를 붙여 넣으세요.


<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />


그리고 <activity ..... > 태그에 아래 코드를 추가하세요.

android:configChanges="orientation|keyboardHidden"


그러면 대개 아래와 같은 형식이 될 겁니다.






10. 그 다음은 PhoneGap 프로그래밍을 하시면 됩니다.

저는 제 블로그의 http://coronasdk.tistory.com/521 에 있는 소스코드를 사용했는데요.
여러분들도 거기서 다운 받으셔도 되고 아니면 여러분 나름대로 html 파일을 만드시면 됩니다.
전 tistory521_01.html 파일을 사용했습니다.


11. 이제 실행하시면 됩니다. Ctrl + F11 을 누르시던지 프로젝트에서 오른쪽 마우스 버튼을 클릭한 후 Run As - Android Application을 실행 해 보세요.


아래 화면이 완성된 화면입니다.


PhoneGap 을 사용해서 jQuery Mobile 페이지를 표시할 때 까지의 과정이었습니다.


여전히 복잡한가요?

그래도 이게 많이 단순화 한 거예요.
따라해 보시고 좋은 application 많이 만드세요.



반응형

CSS color 작업을 보다 편리하게....

2012. 11. 21. 01:23 | Posted by 솔웅


반응형

제가 원래 프로그래머라서 웹개발하다가 색상 맞추고 이쁘게 꾸미고 뭐 그런일을 해야 되면 짜증나거든요.


그냥 원하는 기능이 돌아가도록 프로그래밍 하는 것만 하면 좋을 텐데...

하다보면 그렇지 않을 때도 많아요.

더군다나 HTML5, CSS3 로 발전하면서 거의 그래픽 디자이너와 프로그래머의 경계가 더 많이 겹치게 되서 더 그렇죠.


오늘도 그런 작업을 해야 됐는데....


디자이너인 Sandesh 에게 부탁했더니 아래 싸이트에서 CSS gradient 를 간단하게 해서 주더라구요.


http://www.colorzilla.com/




Chrome이나 Firefox에 플러그인으로 설치해서 사용하는 colorpicker, color analyzer 같은 것들이 있구요.


웹에서 곧바로 CSS Gradient 를 만드는 툴이 있네요.

아주 간편하고 좋습니다.





그럼 모두들 즐코딩 바래요.....


반응형


반응형
Tracking Multiple Domains



이 문서는 single profile에 multiple domain에 대한 visits를 수집하는 여러 방법들에 대해 설명하고 있습니다. (그 multiple domain 들이 두 개의 별도 site 에 있지 않고 한개의 site 에 있다고 가정할 때) 그리고 웹사이트의 portion들을 어떻게 track 하는지에 대해서도 다루고 있습니다. 예를 들어 sub-directory 와 iFramed content 같은 경우들을 말하죠. 만약 여러분이 cross-domain tracking 에 대해 잘 모르신다면 저희 Help Center 에 있는 Domains and Directories를 참조하세요.


Introduction


Google Analytics 의 디폴트 setup 은 Single Domain 에 대한 content 와 visitor data를 track 하도록 디자인 돼 있습니다. (예. www.example.com)

그렇지만 만약 여러분이 좀 더 복잡한 상황에서 Analytics를 사용하기를 원하신다면, 예를 들어 


  • Subdomainsdogs.example.com 와 www.example.com 에 방문하는 모든 방문기록. 두 도메인에 대한 정보가 같이 report 되기 원할 때
  • Subdirectories—  오직 www.example.com/dogs 의 subdirectory에 대한 방문만 별도로 report 하기를 원할 때. 만약 한 사이트(single site) 에 있는 경우
  • 3rd-party shopping carts—  온라인 쇼핑몰과 소핑카트 가 서로 다른 도메인에 host 돼 있을 때
  • Top-level domains—  당신이 가지고 있는 두개의 도메인에 대한 모든 visitor들의 정보가 같은 report profile 에 보여지기를 원할 때. 예를 들어www.example-petstore.comwww.my-example-blog.com,
  • IFramed Content— 다른 도메인에 있는 내용이 당신의 웹페이지에서 iFrame 으로 표시될 때. 거기에 대한 visitor와 pageview 데이터를 얻고 싶은 경우



위의 경우에 해당되면 여러분은 정확히 visitor 를 track 하기 위해 tracking code 에 약간의 customization 을 해야 합니다. 이 작업을 하기 전에 디폴트 Analytics installation 에서 Domains and Directories들이 어떻게 다뤄지는지를 먼저 이해하시면 훨씬 도움이 되실 겁니다.



Tracking Scenarios


이 section은 다양한 tracking scenario들에 대해 다룹니다. 가장 많이 사용되는 경우부터 정리했습니다.


Tracking Across Multiple Domains and Sub-domains


이 시나리오는 두개의 unique 한 도메인들과 하나의 sub-domain 을 track 해야 하는 상황입니다. 예를 들어 당신은 온라인 쇼핑몰을 가지고 있고 또한 당신의 블로그에 방문하는 사람도 track 하기를 원합니다.





아래내용은 3개의 example URL 들에 대한 key tracking code customization을 보여줍니다.

  • Online Store Domain: www.example-petstore.com


    당신이 customize 해야하는 유일한 링크나 form data는 www.my-example-blogsite.com 를 point 하는 겁니다. _setDomainName() function이 정의 되었기 때문에 이 사이트의 sub-domain 에 대한 링크는 요구되지 않습니다.
    .example-petstore.com 는 도메인으로서 어떤 subdomain들도 cookie access 가 가능합니다.

  • Online Store Subdomain: dogs.example-petstore.com


    primary domain 으로 link back 하는 부분을 configuration 할 필요는 없습니다 .왜냐하면 sub-domain 이 primary domain 과 같은 cookie 들을 share 하기 때문입니다.

  • Blog Domain: www.my-example-blogsite.com


    이 configuration은 도메인 name을 blog site 에 대한 top-level domain name으로 set 합니다. 이렇게 해서 나중에 당신이 이 블로그 사이트에 어떤 sub-domain들을 추가하게 되면 그 sub-domain 은 그 parent 와 cookie를 share 할 수 있게 됩니다. 당신은 특별히 다른 linked call 을 set up 할 필요가 없는 것이죠. 어쨌든 당신은 www.example-petstore.com에 대한 어떠한 form 이나 link에 대해서 _link()_linkByPost() methods를 사용하셔야 됩니다.


Tracking Across a Domain and Its Subdomains


위에 언급했듯이 Google Analytics의 디폴트 셋업은 single domain 에 대한 content와 visitor 데이터를 track 하기 위해 디자인 됐습니다. (예를 들어 www.example.com 같은 도메인이죠.)  이 의미는 여러분이 그 도메인과 sub-domain 을 관리한다고 면 두개의 도메인에 걸친 visitor data 를 share 하기 위해서는 tracking code를 수정해야 한다는 겁니다.


예를 들어 다음 세개의 도메인들을 .

  • www.example-petstore.com
  • dogs.example-petstore.com
  • cats.example-petstore.com


이를 위해서는 이 세개의 domain 들의 tracking code에 대해 아래와 같은 customization을 해야 합니다.




이 3개의 site들에 대해 링크나 form 에 대해 어떤 adjustment 도 하실 필요가 없습니다. 당신이 도메인 이름을 top-level domain (e.g., example-petstore.com) 으로 세팅했기 때문에 이 3개의 도메인은 모두 같은 쿠키를 공유합니다.


Tracking Between a Domain and a Sub-Directory on Another Domain


흔히 발생할 수 있는 다른 하나의 일반적인 시나리오로는... 서로 다른 도메인에 있는 single domain 과 sub-directory 입니다. 아마 여러분의 웹사이트와 블로그 서비스의 sub-directory로 있는 여러분의 온라인 블로그에 대한 traffic 을 track 하고 싶은 경우 이 시나리오에 해당됩니다. 아래 샘플은 이 두 페이지들에 대한 tracking code를 어떻게 customization 해야 되는지를 보여 줍니다.



Main Website Domain: www.example.com

Blog URL: www.blog-hosting-service.com/myBlog


www.example-petstore.com 에서 shopping cart 웹사이트로 가는 form submission에 대해서는 _linkByPost() method 를 사용해서 shopping cart site 로 가는 HTTP POST 를 거쳐 방문자의 쿠키 데이터와 traffic을 받습니다. _setAllowLinker() method 는 target site를 가리키는데요, 일반적인 유저 세션 정보가 아닌 POST 데이터로 부터 쿠키 정보를 읽는데 사용됩니다. 이런식으로 하나의 도메인에서 다른 도메인으로 쿠키 데이터를 pass 할 수 있습니다. 그러면 여러분의 온라인 쇼핑몰에서 쇼핑카트로 가는 방문자의 세션을 그대로 유지할 수 있습니다.

이와 비슷하게 온라인 쇼핑몰에서 쇼핑카트로 가는 어떤 links 들에 대해서 visitor data를 transfer 하려면 _link() function을 사용하시면 됩니다.



Tracking Across iFrames


도메인들가의 transfer 가 있는 SIte 안에서 domain들이 새 윈도우에서 열리거나 iFrame으로 content 를 보여줄 수 있습니다. 이럴 경우 한 도메인에서 다른 도메인으로방문자와 campaign 쿠키를 transfer 하기 위해 _getLinkerUrl() method 를 사용할 수 있습니다. 예를 들어 여러분 페이지에 iFrame 이 있는데 여기에 www.my-example-iframecontent 에 호스트된 content 가 display 된다고 합시다. www.example-parent.com 에 있는 iFrame 의 parent page 로부터 방문자 정보를 transfer 하기 위해 iFrame 을 로드하는 Javascript 를 사용하고 쿠키안에 있는 정보를 _getLinkerURL() method 를 사용해서 pass 합니다.


다음 예제는 linking function 에 대해서만 다루는데요  cross-domain tracking이 두 도메인에 대해 tracking 정보 일부를 다루도록 configure 된 경우입니다.



Configuring iFrame Tracking for Internet Explorer

parent page 바깥의 다른 도메인에 있는 iFrame content 는 third-party content로 취급됩니다. Internet Explorer 6 이상의 버전에서의 디폴트는 first-party site에 third-party 웹사이트에 대해 first-party site에 쿠키를 저장하지 못하도록 합니다. 

이렇게 되면 iFrame된 페이지에 대해 Analytics tracking 을 하려면 Internet Explorer 에 대해서 별도로 특별한 configuration 을 해야 합니다. iFrame 에 있는 웹페이지에 대해 여러분은 privacy preferences configuration 을 해야 합니다. 아래 방법들 중 한가지를 사용해서 hosted page들에 대해 privacy preferences 를 셋업실 수 있습니다.

  • 포함된 site의 페이지에 대해 특별히 "Platform for Privacy Preferences" (P3P) HTTP header를 include 한다.
  • 포함된 site의 페이지에 대해 P3P XML manifest 를 제공한다.


좀 더 자세한 정보를 원하시면 아래 자료들을 참조하세요.


Tracking a Single Subdirectory


큰 도메인의 single sub-directory 에 대해 Analytics tracking 을 제한해야하는 경우도 있습니다. 두 가지 일반적인 상황을 예로 들어 보면요.

  • 오직 sub-directory 로만 access 합니다. 예를 들어 ecommerce hosting service 를 사용하는 경우가 되겠습니다.
  • sub-directory에 대해 제한적으로 tracking 하기를 원합니다. 예를 들어  Analytics tracking을 사용하는 회사 웹사이트에 project 를 launch 했을 경우죠.


블로그 서비스를 제공하는 큰 website host 의 일부분에 여러분의 블록가 있고 여기서 방문자 정보를 track 하는 Analytics account 에 대한 profile 이 있다고 가정합니다. 여러분의 사이트는 www.example.com/myBlog/ 같은 주소를 갖습니다. 다른 블로그들은 여러분의 블로그와 별도의 싸이트 입니다. 이 경우 그 블로그페이지와 그 sub-directory 에만 해당 정보를 필요로 하겠죠. 여러분 블로그에 대한 정보만 tracking 하도록 셋업하려면 여러분의 tracking code에 _setCookiePath() function 을 사용해야 합니다.


이렇게 한번 셋업 되면 오직 sub-directory 에 대한 visitor와 campaign 데이터만 display 될 것입니다. 그 이유는 쿠키 경로 때문인데요. 이 쿠키경로가 www.example.com 의 root directory 가 아닌 sub-directory로 세팅 됐기 때문이죠. 이렇게 되면 당신의 프로파일은 당신 쇼핑몰에 대해서만 유니크하게 쿠키를 셋업 할 것입니다.


이 시나리오에서는  _setCookiePath() function을 사용하는 것이 가장 좋은 방법인것 같습니다. 이렇게 하지 않으면 여러분 레포트에는 다음의 두가지 영향이 끼칠 겁니다.


  • Other Analytics account cookies set on www.example.com can be shared by your account.


    new 와 returning 같은 visitor statistics 들의 방문 시각과 방문 횟수가 다르게 나올 겁니다. 그리고 여러분의 방문자 세션 쿠키들도 www.example.com 의 다른 쇼핑몰에 영향을 줄 수 있습니다.

  • Your reports might reflect campaign details from another part of the site.


    예를 들어 방문자가 같은 도메인의 다른 사이트(www.example.com/theirBlog) 로 가는 email campaign 을 클릭했다고 합시다. 이 경우 방문자 쿠키의 referral 정보는 Latest News on Blogging이라는 이름의 campaign 으로 세팅 될 겁니다. 나중에 같은 방문자가 구글에서 검색을 해서 여러분 사이트를 구글에서 클릭을 하고 여러분 블로그의 어떤 물건을 구매했습니다. 검색 결과에 ad 와 email campaign 정보가 계속 붙게 될 겁니다. 이럴 경우 그 구매한 상품에 대해서는  Latest News on Blogging campaign 이 그 구매를 이끌었다고 기록 될 겁니다. 왜냐하면 여러분 온라인 쇼핑몰의 _utmz cookie 가 여러분 쇼핑몰 경로로 unique 하게 관리되지 않기 때문입니다.

여러분 쇼핑몰의 경로에만 방문자 쿠키를 제한하면 www.example.com 의 다른 곳에 있는 다른 쇼핑몰에 대한 캠페인과 세션은 여러분의 report 에 포함되지 않을 겁니다.

(웹브라우저와 쿠키에 대해 좀 더 알고 싶으시면 Cookies 를 참조하세요.)


Other Subdirectory Tips

  • 만약 여러분이 sub-directory 에 대한 visitor와 referral traffic 을 tracking 한다면 오직 그 sub-directory 에 대한 content 에 대해서만 적용 되도록 그 sub-directory 를 Include filter 에 셋업 하시고 싶을 겁니다. 좀 더 자세한 사항에 대해서는  pre-defined filter article 을 참조하세요.

  • 만약 여러분의 도메인에 sub-directory tracking 을 셋업하려면 Analytics tracking 이 root path (e.g. /)와 이 아래의 페이지들  에 대해 disabled 돼 있어야 합니다.  예를 들어 www.example.com/index.html 은 Analytics tracking 이 적용되지 않아야 합니다. (여러분이 subdirectory들을 별도로 track 하기를 원하는 경우). 만약 root path 에 대한 tracking 이 disable 되지 않았다면 한 페이지에 대해 두 종류의 쿠키가 세팅 될 겁니다. 하나는 subdirectory 이고 또 다른 하나는 top-level 도메인이 되겠죠.

Tracking Across Two Sub-directories on the Same Domain


한 도메인에 있는 여러개의 subdirectory 들을 track 하고 싶을 때도 있을 겁니다. 그리고 그 상위에 있는 (larger domain)에는 접근할 수 없는 경우입니다. 예를 들어 두개의 온라인 쇼핑몰과 쇼핑카트를 아래와 같이 가지고 있을 수 있습니다.

  • www.example-commerce-host.com/myStore/
  • www.example-commerce-host.com/myCart/




쇼핑몰에서 쇼핑카트로 가는 유저 세션과 campaign data를 track 하고 싶다면 이를 위해서는 두가지 방법을 사용해야 합니다.



아래 예제에서 쇼핑몰에서 쇼핑카트로 가는 유저 세션과 캠페인 데이터에 대한 track 을 할 수 있는 방법을 보여 줄 겁니다.


이 경우 유니크한 쿠키가 해당 도메인에 대해 세팅 될 겁니다. 제공된 첫번째 디렉토리에 대한 접근시 쿠키가 만들어 질 것이고 같은 쿠키 데이터가 두번째 디렉토리로 copy 될 겁니다. 왜냐하면 두개의 사이트 모두 같은 도메인에 있기 때문이죠. 이 두개의 디렉토리 간에 어떤 링크나 form data 와 관련해서 작업하실 필요가 없습니다.


Key Components to Cross-Domain Tracking


This section will help you troubleshoot your cross-domain tracking setup by providing detailed information on the key components and how best to use them.
이 섹션에서는 여러분의 cross-domain tracking setup 에 대하 troubleshoot 하는 것을 도와 줄 겁니다. 

Profiles

cross-domain tracking을 셋업 할 때 여러분의 프로파일에 아래 사항들을 제대로 수행했는지 한번 더 확인하세요.

  • Set up a master profile for your primary domain without filters.

    cross-domain tracking 을 하기 위해 우선 primary domain 에 대해 master profile 을 셋업할 것을 권고 합니다. 이 프로파일은 filter 없이 생성하세요. 이렇게 하면 primary domain에 대한 기본적인 historical data를 확보할 수 있습니다. 그래야지 여러분이 cross-tracking profile을 셋업하고 나서 에러가 있는지 없는지 확인할 수 있겠죠.


  • Create a profile especially for cross-domain tracking and re-use your tracking code.

    프로파일을 셋업하고 primary domain 에 대한 트래킹 코드를 retrieve 하고  난 후  다른 모든 웹 프로퍼티들에 대해 같은 트래킹 코드를 사용하세요. 이렇게 하면 configuration에 제대로 셋업 될 겁니다. 그리고 그렇게 하면 모든 웹 프로퍼티들에 대한 historical data 도 가질 수 있게 됩니다. master profile 에 대해 위에서 권고한 셋업을 했다면 마스터 프로파일에 있는 같은 트래킹코드를 사용해서 promary domain 에 대한 프로파일을 추가하는 것은 간단한 일입니다. 여러분이 lint 하기를 원하는 다른 모든 웹 프로퍼티들도 모두 같은 트래킹코드를 가지고 있어야 합니다.


  • Modify your cross-domain profile with a filter to show the full domain in your content reports.


    domain linking established 가 되고 나면 content reports 에 오직 URI request 만 보게 될 겁니다. 그리고 top-level 이나 sub-domain에 대한 request 는 안 보이죠. 예를 들어 다음 페이지들에 대한 visits 에 대해 알아보죠.

    http://www.example.com/index.php and another page on
    http://sub.example.com/more.php

    이 경우 report 는 아래와 같이 보여질 겁니다.

    — index.php
    — more.php


    어떤 페이지가 어떤 도메인에 속해 있는지 구분할 수 가 없죠. 페이지 report 에 domain 을 보이도록 하기 위해서는 page URL의 모든 components를 포함하는 filter를 세팅해 주세요.

    1. In the Profile Settings page, click the Add Filter link.
    2. Choose Add New Filter and provide the filter a name.
    3. Choose Custom Filter and select Advanced on the Filter type settings.
    4. Under Advanced settings:
      1. FieldA should be set to Hostname
      2. FieldB should be set to Request URI
    5. Set the values for both Field A and Field B to (.*), which is an expression that captures all characters.
    6. Set the Output To --> Constructor option to Request URI and provide $A1$B1 as the value for that choice.

    Your reports will now show:

    www.example.com/index.php
    sub.example.com/more.php

Cookies: Necessary to Transferring Visitor Data



두개의 도메인이 같은 visitor data(세션과 visitor type)를 공유하기 위해서는 같은 쿠키 정보를 copy 하거나 share 할 수 있어야 합니다. 그리고 아래 내용을 기억해 두세요.



A session from one domain can only be transferred to another domain via a properly configured click or form submission, or via _getLinkerURL.



이 3개의 methods를 통해 하는 쿠키 데이터 pass 는 single session 하의 두개의 페이지 뷰를 연결합니다. 즐겨찾기같은 것을 이용해서 만약에 유저가 두개의 사이트를 별도로 visit 한다면 (같은 프로파일을 tracking 하는 경우),  이 visits는 separate session으로 간주 될 겁니다. 이 시나리오에서는 linking methods 가 invoke 되지 않습니다. 그러므로 해당 유저에 대해 initiating session 을 할 방법이 없습니다.


cross-domain tracking을 제대로 이해하려면 쿠키가 여러 필드들에 의해 identified 되고 디폴트로 도메인들간에 share 하지 않는 다는 것을 잘 이해하면 도움이 될 겁니다.

디폴트로 cookie sharing 은 Analytics에서 자동으로 turn off 됩니다. 왜냐하면 많은 경우 도메인들강에 같은 쿠키를 sharing 하는 것은 바람직하지 않기 때문이죠. 

Cookie Reference에 있는 Significance of Cookie Identification and Expiration를 보세요. 또한 Analytics는 디폴트로 쿠키에 대한 integrity check를 추가합니다.


_setDomainName('yourDomainName')

What it does.
This method sets the domain field of the cookie to the string provided in the parameter. With this method, you can control the domain name used by the cookie. You will ONLY have to set up linking between top-level domains because sub-domains will share the same cookies with their parents.
When to use it.
Use this when you want to treat top- and sub-domains as one entity and track in the same profile. Also use this when you want to track across multiple top-level domains AND their sub-domains. In this case, you will need to using linking between the top-level domains, but not between the top-level domains and their sub-domains.
When not to use it.
If you are tracking a single domain, you do not need to explicitly set the domain name.



========= o ========== o ======== o ========


저의 경우에는 

www.example.com/except1

www.example.com/except2

www.example.com/except3

www.example.com/except4


이 중에 except1 만 별도로 관리하고 나머지는 다 같이 관리해야 하는데...


여기에 맞는 시나리오는 못 찾겠네요.


다시 한번 자세히 보고 방법을 찾아봐야겠네요....

반응형


반응형

스마트폰이 나오고 모바일 앱을 개발 할 일이 많아지고 그래서 HTML 5 나 CSS3 같은 기술을 사용할 기회가 많아지고 있습니다.

자바스크립트도 그렇지만 이 HTML5 나 CSS3 도 기능에 따라 지원하는 브라우저도 있고 또 그렇지 않은 브라우저도 있습니다.


요즘 저는 회사 내부 모바일 앱쪽으로 주로 일을 하고 있는데요.

회사 구성원이 쓰는 디바이스가 대부분 블랙베리 입니다.


그러다 보니까 기능을 지원하는 디바이스도 있고 또 그렇지 않은 디바이스도 있고 그러네요.


정말 웹 개발하기가 엄청 복잡해 졌습니다.


요즘 테스트 작업 하다가 찾은 싸이트 인데요.

이 기능이 왜 이 디바이스나 브라우저에서 제대로 작동하지 않는지 설명할 때 유용하더라구요.


싸이트 주소는 http://caniuse.com/ 입니다.


가 보면 CSS, HTML5, SVG, Java Script 의 기능별로 지원되는 브라우저 및 디바이스가 잘 정리 돼 있습니다.





개발하시거나 테스트 하실 때 활용하세요.

반응형


반응형

AppQ


What is AppQ?


AppQ는 Kurogo Mobile Framework 의 하나의 component 입니다. 이것은 모바일 웹 모듈을 iOS 와 Android native application으로 빠르게 porting 해 주는 기능을 하죠. AppQ는 hybrid 앱 시스템입니다. 네이티브 엡 안에 웹뷰로 embedded 된 Kurogo Mobile Web Module들이 있게 되는 것이죠.


AppQ Features


AppQ uses a native navigation stack


  • iOS (and to a lesser extent Android 4.0+) page transitions 들은 아주 독특합니다. 그리고 웹 기술로는 구현하기가 아주 어렵죠.  AppQ 모듈들은 좀 더 나은 user experience를 드리기 위해 다른 hybrid 솔루션들보다 더 native 에 가깝게 느끼도록 설계돼 있습니다.
  • page transition들이 natively 처리 되기 때문에 AppQ 모듈들은 jQuery Mobile이나 Sencha Touch 같은 라이브러리들을 필요로 하지 않습니다. 이러한 large 자바스크립트 라이브러리들은 페이지 load time을 증가시키고 hybrid 앱들의 퍼포먼스를 아주 낮추는 영향을 주게 됩니다.


AppQ modules can co-exist with native Kurogo-iOS and Kurogo Android modules


  • native와 AppQ 모듈들을 쉽게 mixing 하고 matching 하도록 함으로서 여러분들은 기능적인 면에 좀 더 집중할 수 있게 됩니다. 쿠로고 모듈들이 native 에 fully implementation 되도록 AppQ 가 도와드립니다.


AppQ modules use templates customized for each native platform


  • AppQ leverages the Kurogo Mobile Web’s template inheritance system to allow you to customize your UI elements for each native platform.
  • Stock Kurogo Mobile Web templates are already customized for the native platforms.


AppQ modules store CSS, Javascript and images inside the native app
(AppQ 모듈은 native 앱 안에 CSS, Javascript, 이미지등을 저장합니다.)


  • 이렇게 함으로서 페이지 로딩 시간과 네트워크 bandwidth use를 절감시킬 수 있습니다.
  • 여러분의 native app 에 이런 파일들을 포함시킴으로서 이 앱을 시작할 때 일반적인 모바일 웹 보다 좀 더 빠르게 로딩할 수 있도록 해 줍니다.
  • 여러분의 모바일 웹 UI를 업데이트 할 때 native 앱들은 모듈 파일들의 new version들을 다운로드 할 겁니다.


AppQ 1.0 Technical Capabilities and Limitations


어떤 Kurogo Mobile Web module 이라도 AppQ 모듈이 될 수 있습니다. 여러분이 웹 모듈로 만들 수 있다면 AppQ 모듈로도 만들 수 있습니다. 웹 모듈과 마찬가지로 AppQ 모듈들은 Kurogo Mobile Web server 로부터 live content 를 display 합니다. AppQ 는 아직까지 여러분의 native 앱이 offline viewing 을 위한 저장이나 cache 작업을 충분히 지원하지는 못합니다.


1.0 버전에서는 아래와 같은 기능과 제한이 있습니다.


What AppQ 1.0 can do:


  • Anything a Kurogo Mobile Web module can do, including:
    • Module development with HTML, CSS and Javascript technologies
    • Kurogo Mobile Web theming support

  • Ability to update module look and feel without releasing new versions of the native apps

  • Use custom “native look and feel” assets for common UI elements and built-in Kurogo mobile web templates

  • Access to native UI elements:
    • Navigation bar: can set title, back button title and add a refresh content button
    • Alert dialogs
    • Action dialogs (cancel, optional destructive button, and up to 10 other optional buttons)
    • Share dialog (automatically via Smarty share.tpl template)
    • Native mail composition dialog when user taps on a mailto: link

  • Basic GPS location as provided by HTML5 web engine (navigator.geolocation)

What AppQ 1.0 can’t do:

  • Offline storage
    • Providing AppQ offline storage similar to what is available on fully native apps is a difficult technical and architectural problem
    • HTML5 offline storage is too small for many use cases
    • Access to native storage mechanisms is a difficult technical and architectural problem on Android
      • On Android the APIs necessary for this (web view cache) were introduced in Ice Cream Sandwich (ICS)
        • Currently most devices are on Gingerbread so we cannot require ICS
      • All supported iOS versions can provide this functionality via NSURLCache and CoreData

  • Camera access

  • NFC access

  • Other direct sensor access


Preparing a Web Module for AppQ

대부분의 모듈들은 약간의 작업만 하면 AppQ를 적용할 수 있습니다. 약간의 modification은 필요하죠. 특히 많은 javascript 나 conditional UI display 가 있는 complex 모듈의 경우는 좀 더 작업이 필요할 겁니다.

Telling AppQ about your module pages


AppQ 가 알아야할 여러분의 모듈에 대한 것들 중 하나는 어떤 페이지들이 지원될 것이냐는 겁니다. AppQ는 이 정보를 모듈의 pages.ini configuration 파일에서 가져 옵니다. AppQ가 제대로 작동할 수 있도록 여러분 모듈의 각 페이지들이 pages.ini 에 리스트 되야 합니다.


pages.ini

[index] [detail] pageTitle = "Detail" [search] pageTitle = "Search Results" breadcrumbTitle = "Search"


Locating images and other static assets

AppQ는 웹 모듈에서 사용되는 자바스크립트, css , 이미지 등의 asset을 zip 파일로 빌드합니다.  이런 파일들이 검색되면 모든 템플릿 variable들과 함께 이 파일들은 template에 로드되게 됩니다. 만약 여러분 웹 모듈이 템플릿 variable이 set 됐을 떄 특정 UI element들만 보여준다면 AppQ는 그러한 element들을 찾지 못할 겁니다. 이것을 하기 위해 각 모듈을 initializeForPage() 의 custom version 을 정의할 수 있는데요. 이것은 AppQ에 의해 사용되는 initializeForNativeTemplatePage() 라고 불립니다. 이 기능을 정의할 때 탬플릿 variable들을 세팅하셔야 합니다. 그러면 이미지나 CSS, 자바스크립트 파일까지 포함한 모든 UI element 들이 visible 하게 됩니다.


예를 들어 여기 index와  search 페이지에 에 ellipsizer javascript module을 사용하는 모듈이 있습니다. 그리고 detail page에 share button 을 가지고 있구요.


MyWebModule.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
 <?php
 protected function initializeForNativeTemplatePage() {
     // Native template support
     // specify anything that goes into the header or footer here
     // and force the appearance of assets so they get loaded into the template
     switch ($this->page) {
         case 'index':
             // force appearance of section select button
             $this->assign('sections', array(1, 2));
         case 'search':
             $this->addInternalJavascript('/common/javascript/lib/ellipsizer.js');
             break;

         case 'story':
             $this->assign('shareTitle', $this->getLocalizedString('SHARE_THIS_STORY'));
             $this->assign('shareEmailURL', 'dummy');
             $this->assign('shareRemark',   'dummy');
             $this->assign('storyURL',      'dummy');
     }
 }


두번째 옵션은 array 에 있는 파일들을 정해주기 위한 겁니다. 이 옵션은 어떤 asset을 display 하기 위해 많은 code 가 요구 될 때 간단하게 작업할 수 있는 옵션입니다.


MyWebModule.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
 <?php
 protected function nativeWebTemplateAssets() {
     return array(
         '/min/g=file:/common/javascript/lib/ellipsizer.js',
         '/common/images/share.png',
         '/common/images/button-email.png',
         '/common/images/button-facebook.png',
         '/common/images/button-twitter.png'
     );
 }


세번째 옵션은 module.ini 파일에 필요한 내용들 입니다. 이 옵션은 여러분의 custom module theme 에 이미지를 add 하고 subclass에서는 add 하고 싶지 않을 때 아주 유용하죠.


module.ini

[module]
title = "AppQ Test"
disabled = 0
protected = 0
search = 1
secure = 0
MAX_RESULTS = 10
SHARING_ENABLED = 1

[native_template]
additional_assets[] = "/min/g=file:/common/javascript/lib/ellipsizer.js"
additional_assets[] = "/common/images/share.png"
additional_assets[] = "/common/images/button-email.png"
additional_assets[] = "/common/images/button-facebook.png"
additional_assets[] = "/common/images/button-twitter.png"

[strings]
help[] = "The news home screen features most recent news across all categories. Click on an individual news item to read the full story. Note that clicking a link within the story will launch your browser. You can share each article using email, Facebook, or Twitter by clicking on the gray arrow button top right."


Javascript global variables


가끔 웹 모듈들은 글로벌 namespace로 variable들을 세팅합니다. 그러면 로딩된 자바스크립트 파일들에서 계속 참조되겠죠.


AppQ-incompatible global variable use


아래 예제를 보시죠. 이 site 는 custom header.tpl을 정의했습니다. 이 탬플릿에는 글로벌 자바스크립트 변수인 myGlobals 가 템플릿 변수의 배열로 정의돼 있구요.


header.tpl

{extends file="findExtends:common/templates/header.tpl"}
{block name="javascript"}
  <script type="text/javascript">
    var myGlobals = {json_encode($globalsArray)};
  </script>
  {$smarty.block.parent}
{/block}


그리고 이 site의 common.js 에서 myGlobals 변수가 참조 됩니다. (파일의 top level 에서)


common.js


var firstGlobal = myGlobals[0];



이런 테크닉은 AppQ 와 같이 사용할 수 없습니다. 왜냐하면 <head> tag 는 비어있고 자바스크립트 파일은 전에 generate 되고 페이지당 content 는 AJAX를 통해서 로드되기 때문이죠. 위와 같은 경우에는 myGlobals 값이 항상 null 일겁니다. 왜냐하면 globalsArray 가 html wrapper 가 generate 될 때 세팅되지 않을 것이기 때문입니다.


AppQ-compatible global variable use


AppQ 는 글로벌 변수의 사용을 모두 막지는 않습니다. key 는 built-in 모듈 함수인 WebModule::addInlineJavascript() WebModule::addInlineJavascriptFooter()를사용해 페이지마다 글로벌 자바스크립트 변수들을 정의하고 WebModule::addOnLoad() 사용해서 common.js 안의 function 을 trigger 해서 그것들을 reference 하도록 하는 겁니다. AppQ는 AJAX call 이 이루어진 이후에 이 자바스크립트 블럭을 있어야 할 위치에 자동으로 옮겨 놓습니다. 그리고 글로벌 namespace 에 선언하게 되죠.


예를 들어 위의 myGlobals variable 를 implementing 하는 AppQ-safe 방법은 header.tpl 를 오버라이딩하는 대신입니다. 우리는 extra 자바스크립트를 모듈의 php 파일에 옮깁니다.


MyWebModule.php


<?php
protected function initializeForPage() {
    parent::initializeForPage();
    $this->addInlineJavascript('var myGlobals = '.json_encode($this->globalsArray).';');
    $this->addOnLoad('myOnLoad();');
}



그리고나서 common.js 의 load 함수 내에 firstGlobal 을 initialize 하죠.


common.js


var firstGlobal = null;
function myOnLoad() {
    firstGlobal = myGlobals[0];
}



Using Native Callbacks


AppQ 는 간단한 작업으로 native 기능을 가능하도록 합니다.


Page Load


페이지 로드시 AppQ는 page title을 set 하고 그 페이지의  navigation stack 에 보여지게 될 back button 의 title을 세팅하게 됩니다. 디폴트로 AppQ는 모바일 웹에서 사용하는 page title과 breadcrumb title을 사용합니다. AppQ에서 다른 이름을 사용하고 싶으면 모듈의 pages.ini  의 nativePageTitlenativeBreadcrumbTitle 를 수정하시면 됩니다.



추가로 AppQ는 navigation bar에 reload button을 추가할 수 있도록 해 줍니다. 이 reload 버튼은 페이지의 content를 reload 할 수 있도록 해 주죠. 이것도 pages.ini  의 nativePageRefresh or programmatically 를 수정해 주시면 됩니다. 그리고 WebModule::setWebBridgePageRefresh() 함수도 사용하시구요.


Dialogs


hybrid 앱에서 유저에게 메세지를 안내하는 방법중이 하나가 dialogs 입니다. 이 dialog 는 top 에 URL을 가지고 있는 자바스크립트 팝업이던지 floating div 이고 native dialog 처럼 보이는 것이 될 겁니다. AppQ 모듈을 좀 더 native 처럼 만들도록 하기 위해 AppQ는 native dialog를 만들수 있는 자바스크립트 함수를 제공합니다.


Alert Dialogs


Alert dialog는 유저에게 기대하지 않은 상황이 초래 됐을 때 무엇인가를 알리기 위해 사용됩니다. 그리고 유저에게 cancel 이라던지 어떤 action을 할것인지를 물어보는 기능이 있을 겁니다.


kgoBridge.alertDialog(title, message, cancelButtonTitle, mainButtonTitle, alternateButtonTitle, statusCallback, buttonCallback)

  • title - (required) A short human readable title (shown in bold on the dialog)
  • message - (optional) A human-readable message (show in regular text below the title)
  • cancelButtonTitle - (required) Title of the button which dismisses the alert and cancels any actions the alert refers to
  • mainButtonTitle - (optional) Title of the primary button
  • alternateButtonTitle - (optional) Title of an alternate button
  • statusCallback - (optional) A callback function which will return an error if the dialog fails to display. The callback should have the following signature:
    • function statusCallback(error, params)
      • error - If there is no error, this will be null. If there is an error, the error object will contain the following properties:
        • code - a numeric code indicating what error occurred
        • title - a short string categorizing the error
        • message - a string describing the error
      • params - (ignored) always null
  • buttonCallback - (optional) A callback function which is called when one of the buttons is clicked. The callback should have the following signature:
    • function buttonCallback(error, params)
      • error - If there is no error, this will be null. If there is an error, the error object will contain the following properties:
      • code - a numeric code indicating what error occurred
      • title - a short string categorizing the error
      • message - a string describing the error
    • params - If there is no error, the params object will contain the following property:
      • button - with a string value indicating which button was tapped. This string may be one of:
        • cancel
        • main
        • alternate



일반적인 상황들을 간략화 하기 위해 아래 두가지 함수를 사용하실 수 있습니다.


kgoBridge.alert(message, responseCallback)


  • message - (required) A human-readable message
  • responseCallback - (optional) A callback function which will be called when the dialog is dismissed. The callback should have the following signature:
    • function responseCallback()


kgoBridge.confirm(question, responseCallback)


  • question - (required) A human-readable message
  • responseCallback - (optional) A callback function which will be called when the dialog is dismissed. The callback should have the following signature:
    • function responseCallback(confirmed)
      • confirmed - true if the user clicked “OK” and false if they clicked “Cancel”.


Action Dialogs


kgoBridge.actionDialog(title, cancelButtonTitle, destructiveButtonTitle, alternateButtonTitles, statusCallback, buttonCallback)


  • title - (required) A short human readable title
  • cancelButtonTitle - (required) Title of the button which dismisses the dialog and cancels the action the alert refers to
  • destructiveButtonTitle - (optional) Title of a destructive action if there is one (e.g. delete data). Button is emphasized or shown in red to warn user.
  • alternateButtonTitles - (required) An array of titles of additional buttons to display. Each button should correspond to a possible non-destructive action the user can take.
  • statusCallback - (optional) A callback function which will return an error if the dialog fails to display. The callback should have the following signature:
    • function statusCallback(error, params)
      • error - If there is no error, this will be null. If there is an error, the error object will contain the following properties:
        • code - a numeric code indicating what error occurred
        • title - a short string categorizing the error
        • message - a string describing the error
      • params - (ignored) always null
  • buttonCallback - (optional) A callback function which is called when one of the buttons is clicked. The callback should have the following signature:
    • function buttonClickedCallback(error, params)
      • error - If there is no error, this will be null. If there is an error, the error object will contain the following properties:
        • code - a numeric code indicating what error occurred
        • title - a short string categorizing the error
        • message - a string describing the error
      • params - If there is no error, the params object will contain the following property:
        • button - with a string value indicating which button was tapped. This string may be one of:
          • cancel
          • destructive
          • alternateN - where N is a number between 0 and the number of alternate buttons minus 1


일반적인 상황들을 간략화 하기 위해 아래 두가지 함수를 사용하실 수 있습니다.


kgoBridge.shareDialog(buttonConfig)


  • buttonConfig - (required) An object with the following properties
    • mail - (optional) a string containing a URL to share something via email (mailto:user@example.com)
    • facebook - (optional) a string containing a URL to share something on Facebook
    • twitter - (optional) a string containing a URL to share something on Twitter


일반적으로 kgobridge.shareDialog() function를 call 할 필요는 없습니다. 그냥 share.tpl 템플릿을 include 하시면 이 함수가 자동으로 call 할 겁니다.


Debug Logging


iOS 에서는 UIWebView 밖의 곳에서 logging message를 표시하는 console을 사용하기 어렵습니다. 이것을 하기 위해 AppQ는 logging function을 제공합니다. 이 함수는  native 앱이 디버그 모드에서 run 할 경우 NSLog()를 통해 Xcode console 로 메세지를 보낼 겁니다.  이 함수는 안드로이드에서도 사용할 수 있습니다.


kgoBridge.log(message)

  • message - (required) A human-readable message to log to the native console


Theming a Module for AppQ


Kurogo Mobile 웹은 stock 템플릿을 위해 native app images 와 styles를 활용합니다. 만약 여러분이 custom UI를 사용한다면 아마 AppQ 에 맞는 어떤 UI theme 을 사용하기를 우ㅝㄴ할 겁니다. 여러분은 모든 native platform에 적용하거나 아니면 특정 platform 에만 적용되는 AppQ 용 theme을 사용하실 수 있습니다. 이것은 모바일 웹에서 phone 브라우저의 서로 다른 type들을 구분하기 위해 사용한 pagetype/platform mechanism을 이용해서 구현할 수 있습니다.



Targeting AppQ devices


특별히 target native app을 하도록 도와주기 위해 AppQ는 세번째 classification type은 "browser" 를 제공합니다. 이것을 이용하면 각 pagetype과 platform 별로 그에 해당하는 브라우저도 구분할 수 있습니다.



예를 들어 아래 여러 CSS 가 있고 그 영향을 받을 device 들이 있습니다.


pagetype - platform - browser   Devices Impacted
common         .css all devices
compliant         .css all phones
tablet         .css all phones
common - android     .css all Android Devices
compliant - android     .css all Android phones
compliant - iphone     .css all iPhones
common - common - native .css AppQ on all devices
compliant - common - native .css AppQ on all phones
tablet - common - native .css AppQ on all tablets
common - android - native .css AppQ on Android devices
common - iphone - native .css AppQ on iOS devices
compliant - android - native .css AppQ on Android phones
compliant - iphone - native .css AppQ on iOS phones
tablet - android - native .css AppQ on Android tablets
tablet - iphone - native .css AppQ on iPad



자바스크립트 파일과 템플릿 그리고 이미지 directory들도 비슷한  naming scheme을 따릅니다.


Debugging AppQ theme problems


AppQ theming에서의 디버깅 문제는 full featured DOM inspector의 제한 때문에 device 에서 하기엔 어려운 점이 있습니다. 다행히도 AppQ 모듈을 디버깅하기 위해 Kurogo Mobile Web server 의 device debugging feature 를 사용할 수 있습니다.



우선 site.ini 파일에서 DEVICE_DEBUG=1이 되어 있어야 합니다. 그 다음 http://localhost/device/compliant-iphone-native/mymodule/로 가셔서 여러분 모듈의 AppQ iPhone module version을 보세요. 그리고 http://localhost/device/tablet-android-native/mymodule/은 모듈의 AppQ 안드로이드 태블릿 버전을 보여줄 겁니다. 이 때 native 앱의 브라우저와 유사한 웹 브라우저를 사용하셔야 될 겁니다. 예를 들어 iOS 와 안드로이드는 Webkit 브라우저를 사용하니까 Safari 나 Chrome 을 사용해서 디버깅 하셔야 됩니다.


AppQ는 native navigation stack 을 제공하기 때문에 AppQ device debugging mode 는 breadcrumb bar를 display 하지 않을 겁니다. 대신에 뒤로 가기 위해 browser navigation arrow를 사용하셔야 됩니다.


이 디버깅 모두는 AppQ에 의해 사용되는 AJAX 페이지 로딩을 simulate 합니다. 왜냐하면 지금 웹 브라우저에서 running 하고 있기 때문에 일반적으로 AppQ에서 가능한 native hooks 들을 implement 할 수 없기 때문이죠. 이들 중 하나를 trigger 하기위해 시도한다면 그 trigger URL을 console.log()  하려고 할 겁니다. 그러니까 어떤 파라미터드이 전달됐는지를 보려면 Web Inspector를 사용하시면 됩니다.


The AppQ Native Asset Zip File


일단 여러분의 모듈이 AppQ를 지원하도록 modify 되면 여러분의 첫번째 asset zip 파일을 빌드하실 수 있습니다. 이 archive 에는 모든 이미지와 CSS 그리고 자바스크립트가 포함 됩니다. 이것들은 퍼포먼스를 개선할 수 있도록 native 내에서 locally cache 되게 됩니다.



Building the Asset Zip File


asset zip 파일을 빌드하려면 Admin panel로 가셔서 왼쪽 메뉴의 Module Configuration을 선택하세요. 그러면 오른쪽에 모듈 이름 다음에 3개의 탭을 보실 수 있을 겁니다. 여기서 AppQ 탭을 선택하세요. iPhone 과 Android 템플릿으로 빌드하기 위한 버튼들을 보실 수 있을 겁니다. 빌드하고 싶은 것을 골라서 클릭하세요. AppQ asset zip 파일이 generate 될 겁니다. 파일 크기에 따라 시간이 좀 걸릴 수 있습니다. 


asset zip files이 모드 빌드 되면 각 버튼 밑에 이미지를 다운 로드 할 수 있는 링크를 보시게 될 겁니다. 이 링크는 다음과 같을 겁니다. http://www.example.com/media/web_bridge/iphone/mymodule.zip. 만약 이 사이트에 tablet theme을 enable 하도록 했다면 AppQ는 같은 asset zip file에 tablet version 도 같이 빌드 할 겁니다. http://www.example.com/media/web_bridge/iphone/mymodule-tablet.zip.


asset zip 파일들을 새롭게 빌드 할 때마다 Kurogo Mobile Web server는 새로운 파일을 다운로드 받으라고 알려 줄 겁니다. 아마 production server에 올릴 수 있도록 용량을 줄이기 위해 여러번 빌드 할 수 있을 겁니다. 그 때 마다 새로운 파일을 다운로드 받으셔야 합니다.


Preloading the Asset Zip File


AppQ asset zip 파일은 여러분의 site의 media 폴더 내의 Kurogo Mobile Web server 에 있습니다. Kurogo Mobile Web server는 native 앱에게 어떤 모듈이 AppQ를 지원하는지 얘기해 줍니다. 그리고 그 앱은 media 폴더에서 그 asset 파일들을 다운로드 받을 겁니다. 이 작업은 매번 asset zip file들이 change 될 때마다 반복될 겁니다. 이 asset zip 파일에 현재 버전을 넣는 다면 유저가 처음 앱을 시작할 때 훨씬 빨리 보여줄 수 있겠죠.


Admin panel은 이 asset zip file들의 copy를 얻을 수 있도록 다운로드 할 수 있는 link 를 제공합니다. 만약 여러분이 tablet 버전을 가지고 있다면 거기에 대한 링크도 있을 겁니다.


iOS (iPhone and iPad)


AppQ asset file은 iOS 에는 프로젝트의 resource 폴더에 있습니다. 아래에 iOS app “MyApp” 과 AppQ 모듈인 “mymodule” 에 대한 asset zip file path example 이 있습니다.

  • Kurogo-iOS/Projects/MyApp/Resources/modules/mymodule/mymodule.zip
  • Kurogo-iOS/Projects/MyApp/Resources/modules/mymodule/mymodule-tablet.zip


이 파일들은 Xcode 폴더 references를 통해서 여러분 프로젝트에 자동적으로 추가 될 겁니다.


Android


아래에 안드로이드 앱 “MyApp” 과  AppQ module “mymodule” 가 있는 경로 예제가 있습니다.

  • Kurogo-Android/site/MyApp/config/modules/mymodule/assets/web_bridge.zip
  • Kurogo-Android/site/MyApp/config/modules/mymodule/assets/web_bridge-tablet.zip


이 위치에 asset zip 파일들이 copy 되면 여러분 프로젝트를 clean 하시고 rebuild 하세요. 그러면 asset들이 여러분 앱에 built 될 겁니다.


Updating an AppQ Module


여러분의 모듈을 업데이트하고 그것을 Kurogo Mobile Web server 에 deploy 할 때마다 여러분은 이 새로운 asset zip file을 빌드할 필요가 있습니다. 그래야 그 zip 파일이 모바일 웹 버전과 일치할 수 있습니다. 현재 존재하는 native app은 new zip file을 다운로드 할 겁니다. 그러니까 여러분은 이미 이전 버전을 사용하고 있는 유저에 대해서는 걱정하실 필요가 없습니다. 일단 Kurogo Mobile Web server를 deploy 하고 난 후에 여러분은 새로운 zip 파일과 함께 여러분의 native 앱의 새 버전을 release 하고 싶어질 겁니다. 그래야 "first launch" experience 에서 새로운 버전의 asset zip file을 다운로드 받는 일이 없을 테니까요. 여러분의 모듈에 이미지가 아주 많이 있지 않다면 zip 파일은 그리 크지 않을 겁니다. 하지만 네트워크 속도가 느리다면 다운로드 시간이 noticeable 하게 될 겁니다.



반응형

'WEB_APP > Kurogo' 카테고리의 다른 글

Kurogo Tutorial 24 - People Module -  (0) 2012.10.10
Kurogo Tutorial 23 - Links Module -  (0) 2012.10.10
Kurogo Tutorial 22 - Content Module -  (0) 2012.10.10
Database Authentication  (0) 2012.09.12
Authentication  (0) 2012.09.06
Flat File Authentication  (0) 2012.09.06
Access Control and Authorization  (0) 2012.09.06
Kurogo Tutorial 21 - Emergency Module -  (0) 2012.07.12
Kurogo Tutorial 20 - Module Interaction -  (0) 2012.06.13
Kurogo Tutorial 19 - The Kurogo Object -  (0) 2012.06.12