meteor => 모바일 앱

다른 장치의 페이지 레이아웃 - CSS

응용 프로그램이 다른 장치에서 실행될 경우 장치 크기에 따라 다른 ViewPorts로 렌더링해야합니다. 두 가지 방법으로 이것을 처리 할 수 있습니다 : 자바 스크립트 규칙 또는 CSS 미디어 스타일. 앵귤러 또는 엠버 (또는 블레 이즈)와 같은 MVC 또는 MVVM 라이브러리를 사용하고 있고 단일 장치 또는 하드웨어 플랫폼만을 대상으로 한 경우 다른 하드웨어 ViewPorts가 다른 MVC 모델을 다시 생각해 볼 필요가 있습니다 귀하의 응용 프로그램에 도입되었습니다.

// desktop 
@media only screen and (min-width: 960px) {
}

// landscape orientation
@media only screen and (min-width: 768px) {
}

// portrait orientation
@media only screen and (min-width: 480px) {
}

스타일을 768px (세로 모드) 또는 1024px (가로 방향)로 나누려면 스타일을 구분해야합니다. 타겟 모바일 장치가 3 : 4 비율을 사용하는 iPad라고 가정합니다. 그렇지 않으면 대상으로하려는 장치의 종횡비를 알아 내고 거기에서 임계 값 레벨을 계산해야합니다.

고정 크기 윈도우

모바일 장치별로 고정 크기 화면 레이아웃을 설계하려는 경우 데스크톱에서 앱을 실행할 때 해당 디자인을 미러링해야 할 수 있습니다. 다음 방법은 PhoneGap의 외부 창의 크기를 수정하여 바탕 화면에 고정 크기의 창을 제공합니다. 옵션을 제한하여 사용자의 기대치와 UI 디자인을 관리하는 것이 가장 쉬운 경우가 있습니다!

// create a window of a specific size
var w=window.open('','', 'width=100,height=100');
w.resizeTo(500,500);

// prevent window resize
var size = [window.width,window.height];  //public variable
$(window).resize(function(){
    window.resizeTo(size[0],size[1]);
});

오프라인 캐싱

이 모든 작업을 수행하려면 응용 프로그램 데이터와 사용자 데이터를 캐싱하는 오프라인 지원이 필요할 것입니다.

meteor add appcache
meteor add grounddb

스크롤 - 바운스 비활성화

데스크톱 앱의 경우 스크롤 바운스를 사용하지 않도록 설정하여 앱의 기본 느낌을 높일 수 있습니다. 브라우저에서 DOM을 제어하는 방법을 비활성화하여 javascript로이 작업을 수행 할 수 있습니다.

// prevent scrolling on the whole page
// this is not meteorish; TODO: translate to meteor-centric code
document.ontouchmove = function(e) {e.preventDefault()};

// prevent scrolling on specific elements
// this is not meteorish; TODO: translate to meteor-centric code
scrollableDiv.ontouchmove = function(e) {e.stopPropagation()};

또는 css 및 오버플로 및 스크롤 스타일을 사용할 수 있습니다.

#appBody {
  overflow: hidden;
}

#contentContainer {
  .content-scrollable {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

위의 작업에 필요한 객체 모델은 다음과 같습니다.

<div id="appBody">
  <div id="contentContainer">
    <div class="content-scrollable">
      <!-- content -->
    </div>
  </div>
</div>

멀티 터치 및 제스처

모바일 장치에는 일반적으로 키보드가 없으므로 응용 프로그램에 햅틱 컨트롤러를 추가해야합니다. 사람들이 사용하는 것으로 보이는 두 가지 인기있는 패키지는 FastClick과 Hammer입니다. 설치가 쉽습니다.

meteor add fastclick
meteor add hammer:hammer

FastClick은 거의 구성이 필요하지 않지만 Hammer는 배선 작업이 약간 필요합니다. Todos 앱의 기본적인 예는 다음과 같습니다.

Template.appBody.onRendered(function() {
  if (Meteor.isCordova) {
    // set up a swipe left / right handler
    this.hammer = new Hammer(this.find('#appBody'));
    this.hammer.on('swipeleft swiperight', function(event) {
      if (event.gesture.direction === 'right') {
        Session.set(MENU_KEY, true);
      } else if (event.gesture.direction === 'left') {
        Session.set(MENU_KEY, false);
      }
    });
  }
});

아이콘 및 시작 화면 자산 만들기

앱을 컴파일하고 기기에서 실행하기 전에 아이콘과 스플래시 화면을 mobile-config.js 앱에 mobile-config.js 파일을 추가해야합니다.

App.icons({
  // iOS
  'iphone': 'resources/icons/icon-60x60.png',
  'iphone_2x': 'resources/icons/[email protected]',
  'ipad': 'resources/icons/icon-72x72.png',
  'ipad_2x': 'resources/icons/[email protected]',

  // Android
  'android_ldpi': 'resources/icons/icon-36x36.png',
  'android_mdpi': 'resources/icons/icon-48x48.png',
  'android_hdpi': 'resources/icons/icon-72x72.png',
  'android_xhdpi': 'resources/icons/icon-96x96.png'
});

App.launchScreens({
  // iOS
  'iphone': 'resources/splash/splash-320x480.png',
  'iphone_2x': 'resources/splash/[email protected]',
  'iphone5': 'resources/splash/[email protected]',
  'ipad_portrait': 'resources/splash/splash-768x1024.png',
  'ipad_portrait_2x': 'resources/splash/[email protected]',
  'ipad_landscape': 'resources/splash/splash-1024x768.png',
  'ipad_landscape_2x': 'resources/splash/[email protected]',

  // Android
  'android_ldpi_portrait': 'resources/splash/splash-200x320.png',
  'android_ldpi_landscape': 'resources/splash/splash-320x200.png',
  'android_mdpi_portrait': 'resources/splash/splash-320x480.png',
  'android_mdpi_landscape': 'resources/splash/splash-480x320.png',
  'android_hdpi_portrait': 'resources/splash/splash-480x800.png',
  'android_hdpi_landscape': 'resources/splash/splash-800x480.png',
  'android_xhdpi_portrait': 'resources/splash/splash-720x1280.png',
  'android_xhdpi_landscape': 'resources/splash/splash-1280x720.png'
});

유성 코르도바 건축 파이프 라인

이제는 Meteor Cordova Phonegap Integration 문서를 살펴볼 차례 입니다.

이 문서가 작성된 이후 Xcode와 Yosemite가 출시되어 설치 과정에서 약간의 딸꾹질이 발생했습니다. Meteor를 iOS 장비로 컴파일하기 위해 수행해야 할 단계가 있습니다.

요세미티로 업그레이드하세요.
XCode 삭제 (응용 프로그램 폴더에서 휴지통으로 드래그)
앱 스토어에서 Xcode 6.1을 설치하십시오.
다양한 이용 약관에 동의하십시오.

# 5.  clone and rebuild the ios-sim locally
#     (this step will not be needed in future releases)
git clone https://github.com/phonegap/ios-sim.git
cd ios-sim
rake build

# 6.  make sure we can update the .meteor/packages locations
#     (this step will not be needed in future releases)
sudo chmod -R 777 ~/.meteor/packages

# 7.  copy the new build into Meteor locations
#     (this step will not be needed in future releases)
for i in `find ~/.meteor/packages/meteor-tool/ -name ios-sim -type f`; do
  cp -R ./build/Release/ios-sim "$i"
done

# 8.  install the ios platform to your app
cd myapp
meteor list-platforms
meteor add-platform ios
meteor list-platforms

# 9.  and that there aren't dead processes
ps -ax 
kill -9 <pid>
# /Users/abigailwatson/.meteor/packages/meteor-tool/.1.0.35.wql4jh++os.osx.x86_64+web.browser+web.cordova/meteor-tool-os.osx.x86_64/dev_bundle/mongodb/bin/mongod
# tail -f /Users/abigailwatson/Code/Medstar/dart/webapp/.meteor/local/cordova-build/platforms/ios/cordova/console.log

# 10.  make sure there are correct permissions on the application (important!)
sudo chmod -R 777 .meteor/local/

# 11.  run app
meteor run ios

# 12.  if that doesn't work, clear the directory
sudo rm -rf .meteor/local

# 13a.  run meteor again to create the default browser build
meteor

# 13b.  run it a second time so bootstrap and other packages get downloaded into the browser build
ctrl-x
meteor

# 14.  then run the ios version
ctrl-x
meteor run ios

Xcode는 프로세스 중에 실행되어야합니다. 시뮬레이터를 선택하고 '재생'버튼을 누릅니다.

IOS 개발

Apple 개발자 계정 등록
앱의 앱 ID 등록
테스트 장치의 UUID 등록
iOS App Development 프로비저닝 프로파일 생성
- KeychainAccess에서 CertificateSigningRequest 생성
- CertificateSigningRequest를 https://developer.apple.com/account/ios/profile/profileCreate.action에 제출 하십시오.
- 키 체인으로 가져 오기 위해 인증서를 다운로드하고 더블 클릭하십시오.
Xcode> 환경 설정> 계정으로 이동하여 Apple 개발자 계정을 등록하십시오.

IOS 장치 테스트

개발 워크 스테이션과 iPhone이 동일한 WiFi 네트워크에 연결되어 있는지 확인하십시오. 테 더링, 핫스팟 및 기타 임시 네트워킹은 작동하지 않습니다.
sudo meteor run ios-device
기기에 배포하십시오!

Cordova 프로젝트 구성 (config.xml)

Meteor는 빌드 중에 앱 디렉토리의 루트에있는 mobile-config.js 파일을 읽고 거기에 지정된 설정을 사용하여 Cordova의 config.xml 을 생성합니다.

Project_folder
 ├── /.meteor
 └── mobile-config.js

대부분의 구성은 mobile-config.js (앱 메타 데이터, 환경 설정, 아이콘 및 launchscreens 및 Cordova 플러그인 설치 매개 변수)를 사용하여 수행 할 수 있습니다.

App.info({
  id: 'com.example.matt.uber',
  name: 'über',
  description: 'Get über power in one button click',
  author: 'Matt Development Group',
  email: '[email protected]',
  website: 'http://example.com'
});

// Set up resources such as icons and launch screens.
App.icons({
  'iphone': 'icons/icon-60.png',
  'iphone_2x': 'icons/[email protected]',
  // ... more screen sizes and platforms ...
});

App.launchScreens({
  'iphone': 'splash/Default~iphone.png',
  'iphone_2x': 'splash/Default@2x~iphone.png',
  // ... more screen sizes and platforms ...
});

// Set PhoneGap/Cordova preferences
App.setPreference('BackgroundColor', '0xff0000ff');
App.setPreference('HideKeyboardFormAccessoryBar', true);
App.setPreference('Orientation', 'default');
App.setPreference('Orientation', 'all', 'ios');

// Pass preferences for a particular PhoneGap/Cordova plugin
App.configurePlugin('com.phonegap.plugins.facebookconnect', {
  APP_ID: '1234567890',
  API_KEY: 'supersecretapikey'
});

/.meteor/local/cordova-build/config.xml 파일을 수동으로 편집 하지 마십시오. meteor run ios/android 및 meteor build meteor run ios/android 때마다 재생성되므로 수정 사항이 모두 손실됩니다.

참조 페이지 : Meteor 가이드> 빌드> 모바일> 앱 구성

검색 이벤트 감지

물론, 모바일을 감지하는 가장 좋은 방법은 하드웨어가 직접 사용자에게 알리는 것입니다. Cordova PhoneGap은 이벤트 리스너를 추가 할 수있는 'deviceready'이벤트를 제공합니다.

 document.addEventListener('deviceready', function(){
  Session.set('deviceready', true);
 }, false);

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

meteor
모바일 앱

수색…