ionic + Meteor 튜토리얼 통하는 소감 메모 vol.2

마지막 vol.1

정적 데이터 처리

정적 데이터 처리에 관한 것입니다.
채팅 상대방의 사용자 정보 (이름 및 아이콘 URL), 채팅 상대방의 마지막으로 보낸 메시지 및 그 시간을 클라이언트 컨트롤러에

$scope.chats = [
  {
    _id: 0,
    name: 'Ethan Gonzalez',
    picture: 'https://randomuser.me/api/portraits/thumb/men/1.jpg',
    lastMessage: {
      text: 'You on your way?',
      timestamp: moment().subtract(1, 'hours').toDate()
    },
    ...
  }
]

이런 식으로 준비합니다.

현재 날짜와 시간을 기준으로 timestamp를 만들었으므로 위의 채팅 정보는 meteor 명령을 실행하여 날짜와 시간부터 하루 전의 시간 정보를 표시합니다.
이 시점에서는 날짜 정보가 정형되지 않았습니다.

이 튜토리얼에서는 timestamp 의 취득과 성형을 위해 momentjs:moment 라는 Meteor 공식 패키지를 이용하고 있습니다.
다음 명령으로 프로젝트에 패키지를 추가합니다.
$meteor add momentjs:momentmomentjs:moment 에 대해서는 여기 .

자습서 앱에서는 타임스탬프를 필터링하여 형식에 맞게 표시할 수 있습니다.

client/scripts/filter/calendar.filtter.js

angular
  .module('Whatsapp')
  .filter('calendar', calendar);

function calendar () {
  return function (time) {
    if (! time) return;

    return moment(time).calendar(null, {
      lastDay : '[Yesterday]',
      sameDay : 'LT',
      lastWeek : 'dddd',
      sameElse : 'DD/MM/YY'
    });
  }
}

return moment(time).calendar(null, ... 부분에서 시간 정보를 필터링합니다. 어제, 당일, 지난주, 그 이외의 구분으로 필터를 걸어, 일치한 항목으로 지정하고 있는 포맷으로 성형된 시각 정보를 돌려줍니다.

Step2까지 완료하면,

chats.controller.js

$scope.chats = [
    {
      _id: 0,
      name: 'Ethan Gonzalez',
      picture: 'https://randomuser.me/api/portraits/thumb/men/1.jpg',
      lastMessage: {
        text: 'You on your way?',
        timestamp: moment().subtract(1, 'hours').toDate()
      }
    },
    {
      _id: 1,
      name: 'Bryan Wallace',
      picture: 'https://randomuser.me/api/portraits/thumb/lego/1.jpg',
      lastMessage: {
        text: 'Hey, it\'s me',
        timestamp: moment().subtract(2, 'hours').toDate()
      }
    },
    {
      _id: 2,
      name: 'Avery Stewart',
      picture: 'https://randomuser.me/api/portraits/thumb/women/1.jpg',
      lastMessage: {
        text: 'I should buy a boat',
        timestamp: moment().subtract(1, 'days').toDate()
      }
    },
    {
      _id: 3,
      name: 'Katie Peterson',
      picture: 'https://randomuser.me/api/portraits/thumb/women/2.jpg',
      lastMessage: {
        text: 'Look at my mukluks!',
        timestamp: moment().subtract(4, 'days').toDate()
      }
    },
    {
      _id: 4,
      name: 'Ray Edwards',
      picture: 'https://randomuser.me/api/portraits/thumb/men/2.jpg',
      lastMessage: {
        text: 'This is wicked good ice cream.',
        timestamp: moment().subtract(2, 'weeks').toDate()
      }
    }
  ];

이와 같이 준비한 데이터는 날짜 정보를 성형합니다.


이러한 화면을 볼 수 있습니다 1

시메와 다음 번

일단 이번에는 이런 곳에서.

다음 번에는 서버 작성과 클라이언트와의 데이터 공유에 대한 Step3에 대해 쓰고 싶습니다.

덤

이것은 ionic의 내용입니다만, ion-option-button 라고 하는 클래스가 ionic에는 준비되어 있습니다.
이것을 위의 스쿠쇼의 html에 이런 식으로 사용하면,

<ion-item
    ng-repeat="chat in chats | orderBy:'-lastMessage.timestamp'"
    class="item-chat item-remove-animate item-avatar item-icon-right"
    type="item-text-wrap">
    <img ng-src="{{chat.picture}}">
    <h2>{{chat.name}}</h2>
    <p>{{chat.lastMessage.text}}</p>
    <span class="last-message-timestamp">{{chat.lastMessage.timestamp | calendar}}</span>
    <i class="icon ion-chevron-right icon-accessory"></i>
    <ion-option-button class="button-assertive" ng-click="remove(chat)"> <!-- これ -->
      Delete
    </ion-option-button>
</ion-item>

이런 식으로 왼쪽으로 스 와이프하여 버튼을 표시하는 UI를 할 수 있습니다.
어이···.

덧붙여서 오른쪽의 > 입니다만, <i class="icon ion-chevron-right icon-accessory"></i> 의 icon-accessory 클래스에 의한 것으로, ion-option-button 에서는 관계 없습니다.

이상.



Step2의 시점에서는 채팅이나 메세지의 데이터를 클라이언트의 콘트롤러에 마루 준비하고 있습니다만, Step3로 클라이언트로부터 서버측에 옮깁니다. ↩