[JS] Tworzymy aplikację JS z wykorzystaniem Backbone.js, część 3 – Integracja z Facebookiem

// js/app/model/post.js
(function () {
  'use strict';
 
  APP.model = APP.model || {};
 
  APP.model.Post = Backbone.Model.extend();
})();

// js/app/collection/posts.js
(function () {
  'use strict';
 
  APP.collection = APP.collection || {};
 
  APP.collection.Posts = Backbone.Collection.extend({
    model : APP.model.Post
  });
})();

// js/app/view/post.js
(function () {
  'use strict';
 
  APP.view = APP.view || {};
 
  APP.view.Post = Backbone.View.extend({
    // pojedyncza wiadomość z Facebooka będzie umieszczona w tagu article
    tagName   : 'article',
    // i będzie miała klasę
    className : 'post',
    // a kod HTML widoku będzie pobierany z szablonu post.js
    template  : 'post',
    // renderowanie widoku
    render    : function () {
      var text;
      var templateVars = {
        text      : '',
        userName  : '',
        photoUrl  : '',
        postDate  : ''
      };
      var item;
      var that      = this;
      // generowanie linka HTML na podstawie adresu URL zamieszczonego w treści posta
      var createUrl = function urlify(text) {
        var urlRegex = /(https?:\/\/[^\s]+)/g;
        return text.replace(urlRegex, function (url) {
          return '<a href="https://blog.piotrnalepa.pl/2013/10/23/js-tworzymy-aplikacje-js-z-wykorzystaniem-backbone-js-czesc-3/" rel="nofollow" target="_blank">' + url + '</a>';
        });
      };
      // jeśli wiadomość ma treść, to rozpoczynamy generowanie widoku wiadomości
      if (that.model.get('message')) {
        // przygotowanie zapytania do Facebook Graph w celu uzyskania zdjęcia użytkownika w odpowiednim formacie
        var userPictureQuery = '/' + that.model.get('from').id + '/picture?width=180&height=180';
        var userPicture;
 
        // wysyłamy przygotowane zapytanie do Facebooka
        FB.api(userPictureQuery, function(response) {
          // w odpowiedzi dostajemy informację o adresie URL do zdjęcia
          userPicture = response.data.url;
          // na podstawie informacji pobranych z Facebooka i zamieszczonych w modelu
          // wypełniamy zmienne danymi
          text          = createUrl(that.model.get('message'));
          templateVars  = {
            text      : text,
            userName  : that.model.get('from').name,
            userDescription : '',
            photoUrl  : userPicture,
            postDate  : APP.parseDate(that.model.get('created_time')),
            followersCount  : 1,
            friendsCount    : 1,
            tweetsCount     : 1
          };
          // ładujemy szablon widoku posta i wypełniamy go przygotowanymi danymi
          item = APP.loadTemplate(that.template, templateVars);
          // wstawiamy do kontenera wiadomości
          that.$el.append(item);
        });
        return that;
      } else {
        return false;
      }
    }
  });
})();

// js/app/template/post.js
<aside>
  <img class="post-user-image" src="{{= photoUrl }}" alt="{{= userName }}" width="75" height="75">
</aside>
<section>
  <header>
    <h3>{{= userName }}</h3>
    <time datetime="{{= postDate }}">{{= postDate }}</time>
  </header>
  <p>{{= text }}</p>
</section>
<div class="user-profile">
  <div class="user-info">
    <img class="user-image" src="{{= photoUrl }}" alt="{{= userName }}" width="75" height="75"/>
    <div class="user-name">
      <h3>{{= userName }}</h3>
      <p>{{= userDescription }}</p>
    </div>
    <div class="user-follow icon"><i class="icon-group"></i> <span>Follow user</span></div>
    <div class="user-send-message icon"><i class="icon-envelope-alt"></i> <span>Send private message</span></div>
  </div>
  <div class="user-social">
    <div class="user-followers count">
      <span>{{= followersCount }}</span>
      <span>Followers</span>
    </div>
    <div class="user-friends count">
      <span>{{= friendsCount }}</span>
      <span>Friends</span>
    </div>
    <div class="user-tweets count">
      <span>{{= tweetsCount }}</span>
      <span>Tweets</span>
    </div>
  </div>
  <i class="icon-remove-sign"></i>
</div>

// js/app/view/facebook.js
(function () {
  'use strict';
 
  APP.view = APP.view || {};
 
  APP.view.Facebook = Backbone.View.extend({
    el          : $('body').find('main'),
    container   : $('<div/>').prop({ id : 'facebook' }),
    collection  : {},
    // zdarzenie kliknięcia na przycisku do zalogowania się na Facebooku
    events      : {
      'click.APP #facebook-login' : 'login'
    },
    initialize  : function () {
      console.info('Facebook: initializing Facebook timeline view');
      var fbResponse;
      // pobieramy informację czy użytkownik jest zalogowany w aplikacji
      // za pomocą Facebooka
      APP.facebook.getLoginStatus(function (data) {
        fbResponse = data;
      });
 
      // jeśli nie jest zalogowany, pokaż przycisk logowania
      if (fbResponse.status === 'unknown') {
        console.warn('Facebook: User is not logged in to Facebook');
 
        this.showLoginButton();
      } 
      // jeśli jest zalogowany, ale nie dokonał autoryzacji dostępu aplikacji
      // do jego danych na Facebooku to dokonaj autoryzacji
      else if (fbResponse.status === 'not_authorized') {
        console.warn('Facebook: App is not authorized');
 
        this.login();
      } 
      // jeśli jest zalogowany i aplikacja została autoryzowana,
      // to wyświetl wiadomości z profilu na Facebooku
      else if (fbResponse.status === 'connected') {
        console.info('Facebook: User is logged in to Facebook and app is authorized');
        this.getPosts();
      }
    },
    //funkcja generująca widok ściany wiadomości
    render : function () {
      console.info('Facebook: rendering Facebook view');
      var that = this;
 
      // wyczyść dotychczasową zawartość widoku
      that.$el.empty();
      that.container.empty();
 
      // dla każdego obiektu wiadomości znajdującego się w kolekcji wiadomości z Facebooka
      _.each(this.collection.models, function (item) {
        // wygeneruj widok pojedynczej wiadomości
        that.renderPost(item);
      }, this);
 
      // wygenerowany widok wszystkich wiadomości wstaw do widoku ściany wiadomości
      that.$el.append(that.container);
    },
    // funkcja pobierająca wiadomości z Facebooka za pomocą API Facebooka
    getPosts : function () {
      console.info('Facebook: rendering timeline posts');
      var that = this;
      // pobierz wiadomości ze ściany użytkownika
      APP.facebook.api('/me/home', function(response) {
        console.info('Facebook: creating collection of posts from data');
        // utwórz nową kolekcję wiadomości
        that.collection = new APP.collection.Posts(response.data);
        // paginacja wiadomości, dzięki temu można doczytywać na bieżąco 
        // starsze bądź nowsze wiadomości
        that.prevPage  = response.paging.previous;
        that.nextPage  = response.paging.next;
 
        that.render();
      });
    },
    // funkcja generująca widok pojedynczej wiadomości
    renderPost : function (item) {
      console.info('Facebook: render post');
 
      var postView = new APP.view.Post({ model : item });
 
      this.container.append(postView.render().el);
    },
    // funkcja wyświetlająca przycisk do logowania na Facebooku
    showLoginButton : function () {
      console.info('Facebook: showing Facebook login button');
 
      var button = $('<a/>').prop({
        id        : 'facebook-login',
        className : 'btn btn-primary',
        href      : '#facebook-login'
      }).text('Zaloguj się do Facebooka');
 
      this.$el.empty().append(button);
    },
    // funkcja logująca użytkownika do Facebooka
    login : function (event) {
      if (event) {
        event.preventDefault();
      }
      console.info('Facebook: Logging into Facebook', event);
 
      var that = this;
 
      // logowanie użytkownika za pomocą Facebook API
      APP.facebook.login(function (response) {
        if (response.authResponse) {
          console.info('Facebook: User is logged in and app is authorized');
          that.getPosts();
        } else {
          console.error('Facebook: User declined to authorize app', response);
 
          that.showLoginButton();
        }
      }, { scope : 'email,read_stream,publish_actions,publish_stream,manage_pages' });
      // scope określa zakres uprawnień dostępu do danych użytkownika potrzebnych
      // do działania aplikacji społecznościowej
      // zakres uprawnień był omówiony wcześniej w tej części tutorialu
    }
  });
})();