소개

기본적으로 페블앱을 개발할때는 C언어를 이용하여 개발하게 됩니다. 하지만 Pebble.js (Simply.js에서 파생)를 이용하는 대안도 있습니다. Pebble.js는 패블을 위한 시계앱을 만드는데 단지 자바스크립트만으로 개발을 할 수 있게 해줍니다. 이 튜토리얼에서는 JS환경에서 사용자에게 날씨 정보를 보여주는 기본적인 시계앱을 만들어 볼 예정입니다. 한번 시작해 볼까요?

Pebble.js 기본

Pebble.js 시계앱 개발에 앞서 CloudPebble이라는 클라우드 환경의 개발툴을 사용할 것입니다. 새로운 프로젝트를 생성할 때 “Project Type”에서 “Pebble.js”를 선택하시기 바랍니다. 이렇게 프로젝트를 생성하면 app.js라는 이름의 템플릿 파일이 주어집니다.

우리의 시계앱을 개발하기위해 먼저 app.js를 선택한 뒤에 다음의 코드를 제외한 나머지 코드를 모두 삭제합니다.

var UI = require('ui');

이 UI 모듈은 Window와 Card를 사용하여 시계앱 레이아웃을 구성할 수 있게 해줍니다. 먼저 날씨 정보가 다운로드중임을 알려주기 위한 새로운 Card 를 만들겠습니다. 다음의 코드를 require() 밑에 바로 추가하여 Card 를 만들고 보여주도록 해보겠습니다.

// Create a Card with title and subtitle
var card = new UI.Card({
  title:'Weather',
  subtitle:'Fetching...'
});

// Display the Card
card.show();

이 코드는 다음과 같이 보여지는 Card를 생성해줄 것입니다.

Card 엘리먼트의 생성자로 title과 subtitle을 지정하였더니 자동으로 제목과 부제목의 레이아웃을 제공하는것을 알 수 있습니다. 마찬가지로 body, style, scrollable 등등의 설정을 할 수 있습니다.

날씨 정보를 보여주는 앱 개발

우리는 OpenWeatherMap.org에서 날씨 정보를 가져오고 위치와 온도와 날씨 정보를 Card에 보여줄 것입니다. 정보를 가져오기 위해서 우리는 Pebble.js에 기본 포함되어있는 ajax 라이브러리를 사용할 것입니다.

첫번째로 알맞은 required() 를 JS 파일의 최상단에 추가하여 ajax() 함수에 접근할 수 있도록 합니다.

var ajax = require('ajax');

다음 단계로 날씨 정보를 제공하는 API에 접근하기 위해 사용할 URL http://api.openweathermap.org/data/2.5/weather 에 도시 이름을 q 인자에 넣어 정보를 요청하겠습니다.

// Construct URL
var cityName = 'London';
var URL = 'http://api.openweathermap.org/data/2.5/weather?q=' + cityName;

다음으로 위의 요청 URL과 요청 타입과 성공/실패에 대한 콜백을 정의합니다.

// Make the request
ajax(
  {
    url: URL,
    type: 'json'
  },
  function(data) {
    // Success!
    console.log('Successfully fetched weather data!');
  },
  function(error) {
    // Failure!
    console.log('Failed fetching weather data: ' + error);
  }
);

날씨 정보가 정상적으로 다운로드 되었다면 data에 담겨서 성공 콜백으로 들어오게 될 것입니다. 여기서 위치나 온도 정보나 날씨에 대한 부가적인 정보를 얻을 수 있습니다.

function(data) {
  // Success!
  console.log('Successfully fetched weather data!');

  // Extract data
  var location = data.name;
  var temperature = Math.round(data.main.temp - 273.15) + 'C';

  // Always upper-case first letter of description
  var description = data.weather[0].description;
  description = description.charAt(0).toUpperCase() + description.substring(1);
}

마지막 단계는 Card안의 title, subtitle, body 필드들을 이용해 유저에게 원하는 정보를 보여주는 단계입니다. 성공 콜백안에서 Card가 제공하는 subtitle()과 body() 함수를 이용하여 값을 전달 할 수 있습니다.

// Show to user
card.subtitle(location + ', ' + temperature);
card.body(description);

다시 컴파일 뒤 재설치를 한 뒤에 다음과 같은 화면을 보실 수 있습니다.

시간별 일기예보를 제공하는 앱 개발

일기예보를 보여주기 위한 가장 적절한 방법은 Pebble.js가 제공하는 Menu 객체를 사용하는것입니다. 이 객체는 Card와 비슷하지만 다수의 섹션과 메뉴 아이템들로 구성할 수 있습니다. 예를 들어 페블 시스템 메뉴에 들어가면 Music, Notification, Alarms 기타등등이 보이는데 이것을 생각하시면 됩니다.

새로운 프로젝트에서 시작할 예정인데 이전 프로젝트와 마찬가지로 UI와 ajax 모듈을 마찬가지로 require()를 이용하여 로드합니다.

var UI = require('ui');
var ajax = require('ajax');

이전 프로젝트에서는 Card에서 시작하였었지만 이번에는 UI 요소들을 원하는 위치에 마음대로 배치할 수 있는 Window를 이용해 보겠습니다. 이 Window는 날씨 정보가 다운로드 될때까지 보여질 스플래시 스크린으로 제공할 것입니다. 사용자가 기다리는 동안 보여질 하나의 Text 엘리먼트를 추가합니다. 이 새로운 엘리먼트는 Vector2 모듈(x, y좌표 또는 가로, 세로 길이를 표시하는데 쓰임)을 필요로합니다. UI 모듈과 마찬가지 방법으로 JS 파일의 최상단에 다음을 추가해줍니다.

var Vector2 = require('vector2');

다음은 Window와 Text 엘리먼트를 생성하겠습니다. Text의 경우 다음에서 보여지는것과 같이 다양한 속성을 부여할 수 있습니다.

// Show splash screen while waiting for data
var splashWindow = new UI.Window();

// Text element to inform user
var text = new UI.Text({
  position: new Vector2(0, 0),
  size: new Vector2(144, 168),
  text:'Downloading weather data...',
  font:'GOTHIC_28_BOLD',
  color:'black',
  textOverflow:'wrap',
  textAlign:'center',
  backgroundColor:'white'
});

// Add to splashWindow and show
splashWindow.add(text);
splashWindow.show();

위의 코드의 결과물은 다음과 같을것입니다.

 이번에는 시간단위의 일기예보 정보를 가져와보겠습니다. 이전과 비슷하게 런던의 일기예보 정보를 가져오는 예제 코드는 다음과 같습니다.

// Make request to openweathermap.org
ajax(
  {
    url:'http://api.openweathermap.org/data/2.5/forecast?q=London',
    type:'json'
  },
  function(data) {

  },
  function(error) {
    console.log('Download failed: ' + error);
  }
);

여기서 성공할 때에 받게 되는 정보는 이전과 크게 다르지 않지만 위치정보(data.city.coord), 도시 이름(data.city.name) 그리고 국가 이름(data.city.country) 마지막으로 미래의 일기예보 정보(data.list)가 담겨오게 됩니다. 여기서 이 list 필드가 가장 중요하게 봐야 하는 데이터입니다.

이 list 배열은 시간별 일기예보 정보가 3시간 단위로 제공합니다. 우리가 ajax() 호출을 통해 요청을 성공하였다면 현재 시간 이후의 10개의 일기예보 정보를 받게 됩니다. 다음에서 보여드릴 함수는 이러한 데이터를 보여주기 위한 데이터로 가공하는 역할을 합니다.

var parseFeed = function(data, quantity) {
  var items = [];
  for(var i = 0; i < quantity; i++) {
    // Always upper case the description string
    var title = data.list[i].weather[0].main;
    title = title.charAt(0).toUpperCase() + title.substring(1);

    // Get date/time substring
    var time = data.list[i].dt_txt;
    time = time.substring(time.indexOf('-') + 1, time.indexOf(':') + 3);

    // Add to menu items array
    items.push({
      title:title,
      subtitle:time
    });
  }

  // Finally return whole array
  return items;
};

우리는 이제 이 함수를 이용하여 다음의 10시간의 일기예보를 사용할 수 있게 되었습니다.

// Create an array of Menu items
var menuItems = parseFeed(data, 10);

// Check the items are extracted OK
for(var i = 0; i < menuItems.length; i++) {
  console.log(menuItems[i].title + ' | ' + menuItems[i].subtitle);
}

지금까지 개발한 코드를 저장하고 컴파일한 뒤 ‘VIEW LOGS’를 눌러 다음과 같은 로그가 출력된것을 확인할 수 있습니다.

[PHONE] pebble-app.js:?: PJSTUT2__1/pebble-js-app.js:156 Few clouds | 07-30 21:00
[PHONE] pebble-app.js:?: PJSTUT2__1/pebble-js-app.js:156 Sky is clear | 07-31 00:00
[PHONE] pebble-app.js:?: PJSTUT2__1/pebble-js-app.js:156 Sky is clear | 07-31 03:00
[PHONE] pebble-app.js:?: PJSTUT2__1/pebble-js-app.js:156 Few clouds | 07-31 06:00
[PHONE] pebble-app.js:?: PJSTUT2__1/pebble-js-app.js:156 Broken clouds | 07-31 09:00
[PHONE] pebble-app.js:?: PJSTUT2__1/pebble-js-app.js:156 Few clouds | 07-31 12:00
[PHONE] pebble-app.js:?: PJSTUT2__1/pebble-js-app.js:156 Broken clouds | 07-31 15:00
[PHONE] pebble-app.js:?: PJSTUT2__1/pebble-js-app.js:156 Few clouds | 07-31 18:00
[PHONE] pebble-app.js:?: PJSTUT2__1/pebble-js-app.js:156 Broken clouds | 07-31 21:00
[PHONE] pebble-app.js:?: PJSTUT2__1/pebble-js-app.js:156 Few clouds | 08-01 00:00

이제 Menu 객체를 사용하여 이 아이템들을 사용자에게 보여줄 수 있도록 해보겠습니다. ajax()의 성공 콜백안에서 parseFeed()를 호출 뒤에 Menu 객체를 다음과 같이 알맞은 섹션과 아이템들을 사용하여 생성합니다.

// Construct Menu to show to user
var resultsMenu = new UI.Menu({
  sections: [{
    title: 'Current Forecast',
    items: menuItems
  }]
});

// Show the Menu, hide the splash
resultsMenu.show();
splashWindow.hide();

이 코드에서 resultsMenu.show()를 호출한 뒤에 splashWindow.hide() 호출하여 Window 스택을 관리하고 있는데 이는 사용자가 BACK 버튼을 눌러 또다시 스플레시 화면을 보는 상황을 막기 위해서입니다.

저장하고 컴파일하고 설치한뒤에 다음과 같이 일기 예보 정보가 보여지는 MenuLayer를 볼 수 있습니다. 이번에는 Menu 의 아이템들중에 선택된(SELECT 버튼을 누름, 오른쪽 가운데 버튼) 일기예보 정보의 상세 정보를 보여주는 기능을 추가해 보겠습니다. resultsMenu에 Menu.on() 함수를 구현함으로 써 SELECT 버튼의 이벤트를 처리할 수 있습니다.

// Add an action for SELECT
resultsMenu.on('select', function(e) {
  console.log('Item number ' + e.itemIndex + ' was pressed!');
});

다시 컴파일하고 실행하여 보면 Menu 에서 SELECT 버튼을 누르면 다음과 같은 로그가 출력되는것을 확인할 수 있습니다.

[PHONE] pebble-app.js:?: PJSTUT3__1/pebble-js-app.js:169 Item number 1 was 
pressed!

SELECT 버튼이 눌려 원하는 일기 예보 정보가 선택되면 우리는 새로운 Card 를 만들어 상세 정보를 보여줄 것입니다. 또한 BACK 버튼이 눌리면 다시한번 Menu 목록을 보여줌으로 써 다른 선택을 할 수 있도록 해줄 것입니다.

첫번째 단계로 .on() 콜백에서 console.log() 대신의 다음과 같이 Card를 생성하는 코드를 추가해줍니다. 여기서는 온도, 기압, 바람 정보를 문자열 형태로 보여줄것입니다.

// Add an action for SELECT
resultsMenu.on('select', function(e) {
  // Get that forecast
  var forecast = data.list[e.itemIndex];

  // Assemble body string
  var content = data.list[e.itemIndex].weather[0].description;

  // Capitalize first letter
  content = content.charAt(0).toUpperCase() + content.substring(1);

  // Add temperature, pressure etc
  content += '\nTemperature: ' + Math.round(forecast.main.temp - 273.15) + '°C' 
  + '\nPressure: ' + Math.round(forecast.main.pressure) + ' mbar' +
    '\nWind: ' + Math.round(forecast.wind.speed) + ' mph, ' + 
    Math.round(forecast.wind.deg) + '°';
});

content 문자열이 만들어지고 나면 이 정보를 상세 정보를 보여주는 Card를 생성하는데 사용할 것입니다.

// Create the Card for detailed view
var detailCard = new UI.Card({
  title:'Details',
  subtitle:e.item.subtitle,
  body: content
});
detailCard.show();

다시 저장하고 재실행 한뒤에 확인해 보면 Menu 아이템중에 SELECT를 눌러 선택을 하게 되면 그 시간에 대한 상세 정보를 보여주는 화면이 나오는 것을 확인할 수 있습니다.

흔들어서 정보 업데이트 하기

마지막으로 부수적인 기능을 구현해 볼것인데. Accel API를 사용하여 페블의 가속도 센서를 사용하여 정보를 업데이트하는 기능을 추가해보겠습니다. 이 기능을 구현하여 사용자가 손목을 흔들기만 함으로 써 날씨 정보가 업데이트 될 것입니다.

첫번째로는 JS파일의 최상단에 추가적인 require() 를 추가해주는것입니다.

var Accel = require('ui/accel');

다음으로는 가속도 센서를 앱이 시작될 때 초기화 해줍니다. 이 코드를 ajax 호출이 끝나는 시점에 호출해 줍니다.

// Prepare the accelerometer
Accel.init();

우리가 구현하려는 기능은 데이터가 이미 다운로드 되어 준비된 상태이고 여기서 정보를 업데이트 하는 기능입니다. 우리는 ajax() 성공 콜백에서 resultsMenu가 만들어지고 보여진 뒤에 “tap”이라는 리스너를 설정할 것입니다. 여기서 accelTap 리스너를 resultsMenu에 추가함으로써 detailCard가 보여지지 않을 때에 업데이트가 일어나는 것을 보장할 수 있습니다.

// Register for 'tap' events
resultsMenu.on('accelTap', function(e) {
  console.log('TAP!');
  console.log('axis: ' + e.axis + ', direction:' + e.direction);
});

tap 이벤트에는 e.axis와 e.direction이 담겨오게 되지만 일단 여기서는 사용할 필요가 없으니 날씨 정보를 업데이트 하는 코드를 추가하도록 하겠습니다.

// Register for 'tap' events
resultsMenu.on('accelTap', function(e) {
  // Make another request to openweathermap.org
  ajax(
    {
      url:'http://api.openweathermap.org/data/2.5/forecast?q=London',
      type:'json'
    },
    function(data) {

    },
    function(error) {
      console.log('Download failed: ' + error);
    }
  );
});

다음으로는 성공 콜백에서 parseFeed를 호출하여 사용자가 읽을 수 있는 형태로 데이터를 다시 생성하고 기존의 Menu에서 items() 함수를 사용하여 보여지고 있던 데이터를 새로운 데이터로 변경합니다. 여기서 0이라는 섹션 번호를 지정하였는데 우리는 하나의 섹션밖에 사용하고 있지 않으므로 0으로 지정하였습니다.

function(data) {
  // Create an array of Menu items
  var newItems = parseFeed(data, 10);

  // Update the Menu's first section
  resultsMenu.items(0, newItems);
}

마지막으로 다운로드가 완료되었을 때 짧은 진동을 추가해 보도록 하겠습니다. require()를 이용하여 Vibe 모듈을 임포트합니다.

var Vibe = require('ui/vibe');

데이터의 다운로드가 완료되었을 때 items() 메소드를 이용하여 새로운 데이터로 교체를 하고 난 뒤에 다음의 코드를 호출하여 진동을 발생 시킬 수 있습니다.

// Notify the user
Vibe.vibrate('short');

이제 다시 컴파일하고 실행해 보면 손목을 흔들면 몇초 후 짧은 진동이 오고 Menu 데이터 역시 변경된 것을 확인할 수 있게 됩니다.

참고 : Build A Watchapp with Pebble.js