spectrum learns to dig

최근 framework7( https://framework7.io/ )을 비롯해 UI Framework들이 기존의 하이브리드 웹앱의 한계를 극복하고자 하는 움직임도 있고 cordova 버전도 올라갔고(WKWebview + Crosswalk 지원) 하이브리드 앱 환경이 상당히 개선이 되었다는 반가운 소식을 들어 다시 Meteor를 가지고 하이브리드 앱을 만지고 있다. Cordova로 앱을 만들다 보면 가장 처음에 직면하는 것은 아무래도 어색한 Splash Screen인데. https://atmospherejs.com/meteor/launch-screen  를 발견하고 미시적이지만 꽤 프로페셔널한 개선이 어서 소개하고자 한다. 모바일 앱에서 최초 splashScreen은 무의미하고 느린 UI의 일종이라고 생각하지만 subscription등이 오래걸리거나 화면 이미지 로딩등으로 준비가 아직 되지않은 상태를 보여주기 싫다면 의미가 있다고 본다. 가령, 별도로 손을 쓰지 않으면 Splash 노출 -> Splash 소멸 -> 첫화면 (빈목록) -> subscription 끝 -> 첫화면 - 목록 노출 과 같은 단계를 실행할 것이고 빈목록이 보이는 지루한 시간은 사용자에게 완성도가 떨어지는 앱이라는 느낌을 줄 수 있다. Splash 노출 -> subscription 완료 -> Splash 소멸 -> 첫화면 - 목록 노출 처럼 작동한다면 splash화면을 봐줄만한 이유가 있고 제 역할을 하는 좋은 UI라고 생각한다. 먼저 package를 추가해보자. meteor add launch-screen namespace 가 없다! 그렇다. 서드파티가 아니고 공식지원이다! 일단 사용은 무척이나 간편한데 var handle = LaunchScreen.hold(); 를 글로벌 scope 에 넣기만 하면 끝. subscribe를 받아서 subs.ready() 같은 reactive data source를 ...

HTML5 + js 를 UI로 사용하는 앱을 만들때 제일 당혹스러운 점은 크로스플랫폼으로 사용하기 위해 같은 기준인 UI 렌더러를 쓰는 목적이었는데도 불구하고 파편화가 매우 심각하다는 점이다. 해상도 같은 건 논외로 치고 공통으로 사용하는 WebView 시스템 컴포넌트가 똑같은 " Modern Browser "가 아니라는 점이다. 심지어 같은 OS라고 해도 버전별로 다르다는 건 문제가 크다. 그래서 canvas만 가지고 떼어내서 만들까 어쩔까하고 고민하면서 검색 중  https://crosswalk-project.org/  프로젝트를 발견. webRTC( https://github.com/alongubkin/phonertc )나 webAudio( https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/PlayingandSynthesizingSounds/PlayingandSynthesizingSounds.html )같은 것들도 있지만 가장 큰 관심사는 iOS에서 safari가 아니라 chrome 일지가 첫번째. 첫번째 시도. cordova platform add ios cordova run ios Safari에서 확인. 기존 mobile safari임. cordova add cordova plugin add cordova-plugin-crosswalk-webview 소스 확인. 역시 WKWebView는 없음. 없다고 했는데 확인사살. 그러면  https://crosswalk-project.org/documentation/ios/quick_start_guide.html 이렇게 소스코드를 아예 받아서 해볼 수 밖에 없다. git clone https://github.com/crossw...

Camera와 Gallery를 사용하는 앱을 Meteor로 만들자. 준비 meteor 설치 ( https://www.meteor.com/install ) 실행과정 : project를 생성하고 $ meteor create camera-practice $ cd camera-practice iOS, android 환경을 추가한다. $ meteor add-platform ios $ meteor add-platform android You must agree to the terms to proceed.        Do you agree (Y/n)?  에서 Y혹은 enter android: added platform  플랫폼 추가 완료. 플러그인 추가 $  meteor add cordova :org.apache.cordova.camera Must declare exact version of dependency: org.apache.cordova.camera@undefined https://github.com/apache/cordova-plugin-camera/blob/master/plugin.xml 에서 버전 정보를 확인해보니 0.3.4-dev 하지만 역시 빌드시 오류가 있으므로 안전한 0.3.2로 가자. $ meteor add cordova :org.apache.cordova.camera@0.3.2 added cordova plugin org.apache.cordova.camera@0.3.2 성공. cordova라는 namespace만 붙여주면 마치 원래 Meteor package인양 가져오는 모습이 아주 흐뭇하다 :) 나는 coffeescript를 좋아하니까 meteor add cofffeescript 일단 필요없는 초...

드디어 Meteor가 1.0을 찍었다. 감동 ;ㅅ;)/ Todo가 예쁘게 바뀐 건 봤고 새로운 예제 앱이 생겼다. 그 이름은 바로 LocalMarket. 동영상을 찍어서 보여주고 싶지만 귀찮기도 하고 어짜피 meteor create --example localmarket 치면 다 알테니까. 이전까지 실험적이었던 Mobile 정확히 말해 Cordova 와의 통합이 아주 멋지게 이루어졌다. 실행 옵션이 좀 많아졌는데 meteor run : 그냥 Meteor 웹서버만 기동. 이하 아래의 것들도 기본적으로 Meteor 서버를 실행한다. meteor run android meteor run ios : 안드로이드, iOS 시뮬레이션을 실행한다. 안드로이드의 경우 Hardware Accelerated Execution Manager (Intel HAXM) 을 설치한다. meteor run android-device meteor run ios-device : 실제 iOS/Android 장비에서 실행한다. 실행에 대해선 어짜피 해보면 되니까 여기쯤 해두고 Web과 Mobile(android/iOS)간의 차이를 어떻게 극복했는지가 궁금한 거니까 디렉토리 구조를 살펴보기로 하자. 먼저 디렉토리 구조를 보자. client 는 사용자가 실제로 보는 html+css+js+기타등등이고 server 는 backend 쪽인 것까지는 기존과 동일하다. lib는 client/server 양쪽에서 실행되는 Collection, Router등등의 코드가 있다. client 쪽에선 lib 아래에 jquery.touchwipe.js 를 쓴게 보인다. 그리고 head.html을 따로 분리하여 공통 헤더를 만들어 놓았고 init.js 에선 사용자가 앱/웹을 실행시 Geolocation.currentLocation(); 를 사용하여 위치정보를 수집할 수 있도록 해놓았다. package 는 atmosphere가 아닌 프로젝트별 custom...

app에 meteor-rider 적용 기존 url scheme 관련 plugin인 com.borismus.webintent을 지웠다가 재설치 iOS 적용. 정상작동 확인 talk 섭 도메인 생성 및 meteor deploy새로 완료 wwwizer 에 naked domain 신청함. 아직은 안됨. 마이그 완료 새 도메인으로 앱 업뎃도 해야겠군. 언제든지 호스팅을 바꿔도 되도록. meteor-rider는 hijacking DOM을 이용해 로컬에서 먼저 기동하고 호스팅하고 있는 원격지 앱으로 갈아타기 하는 아주 간단한 방식인데 단점은  http://zeroasterisk.com/2013/08/22/meteor-phonegapcordova-roundup-fall-2013/  몇몇 하드웨어 관련 플러그인이 작동하지 않을 수도 있다고 한다. 그런데 RalphChat이 쓴걸 보니 별 문제는 없어보인다. Push 같은 게 작동하지 않으려나? iOS 적용은 초기에 네트웍 연결 불가능한 상태에서 404메시지 같은 걸 뿌릴 때 심사팀에서 매우 안좋아하더라. 거의 리젝이라고 보면 된다. https://github.com/apache/cordova-ios/blob/master/guides/Cordova%20Custom%20URL%20Scheme%20Handling.md iOS의 경우 URL Scheme을 적용하는 건 Android보다 간단. 원래 내부적으로 지원하나보다. 단 android의 경우는 meteor app에서 사용한 반면 iOS는 최초 index.html로 진입할때 하도록 함. 뭐 상관없나 싶기도 하지만.

어떤 폰에선 되고 어떤 폰에선 안되고 되다가도 안되고 하도 현상이 여러가지라서 거의 2주동안 붙잡고 씨름했는데 허무한 결말. navigator.geolocation.getCurrentPosition(success, failure, option); 에서 option에 {   timeout: 10000 } 만 줘서 하니 잘 된다. iOS는 뭐 아무렇게나 해도 잘되는데 Android에선 enableHighAccuracy : true 옵션을 주면 안된다. 나머지는 config.xml에     <feature name="Geolocation">         <param name="android-package" value="org.apache.cordova.geolocation.GeoBroker" />     </feature> 이런게 있는지 platforms/android/AndroidManifest.xml에 가 있는지 ....     <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" /> 권한이 잘 들어갔는지 정도만 신경 써주면 된다.