Xây dựng hệ thống “Gợi ý…” (Phần 4)
White

Minh Thành viết ngày 18/08/2016

Hế looooooo. Bài này chúng ta cùng nhau xây dựng client nhé
Phần 1: http://cuthanh.com/nodejs/xay-dung-he-thong-goi-y-phan-1
Phần 2: http://cuthanh.com/nodejs/xay-dung-thong-goi-y-phan-2
Phần 3: http://cuthanh.com/nodejs/xay-dung-thong-goi-y-phan-3

Demo

http://demo.cuthanh.com/professorx-client/

Chuẩn bị

húng ta sẽ xây dựng web app sử dụng framework Angular nhé. Thực tế là có api thì mình có thể áp dụng cho cái gì cũng được. Viết app cho Windows dùng C#, viết cho iOS dùng Switf, Object C, …
Một vài kĩ năng HTML và CSS. Đẹp hay xấu là ở cái này đấy
Để bắt đầu thì các bạn chỉ cần có tí xíu căn bản về Angular là được rồi. Ah, nhớ đọc qua bài giới thiệu Angular Generator bữa trước của mình để dev cho nhanh nhé
Một vài bức hình Xmen

Chiến thuật

Chúng ta sẽ xây dựng 2 route là

  • /homepage chỗ này là trang chủ giúp ta có thể thêm một Xmen nào đấy vào đội hình, hiện danh sách đội Xmen
  • /xmen/:id đây là thông tin cá nhân của xmen, tại đây có thể xem những người đã “thả tim”, lấy gợi ý những người có thể có… tình cảm

Code

Tạo folder Client

mkdir client

cd client

Áp dụng Angular generator

yo angular ProjectX

Ráng đợi xíu cho nó cài đặt nha, hơi lâu
Mặc định sau khi cài xong thì nó có sẵn 2 route mặc định cho các bác là homepageabout. Ngon, sài luôn, rename cái about lại thành xmen (nhớ rename lại trong index.html, app.js nữa đấy nhá ).

Homepage

Mình thì thường làm html một trang mẫu đã xem nó Ok chưa, không đụng tí gì đến js nhé. File ./view/main.html

<div class="row">
  <div class="col-sm-12 text-center">
    <h1 class="title">Project X</h1>
    <br>
  </div>
  <div class="col-sm-7 text-center row">
    <h1>Get suggest for...</h1>
    <br>
    <div class="col-sm-4">
      <a href="#/xmen/1"><img src="image/jeangray.jpg" alt="Jean Gray" class="img-thumbnail img-circle avatar"></a>
      Jean Gray
    </div>
    <div class="col-sm-4">
      <a href="#/xmen/1"><img src="image/jeangray.jpg" alt="Jean Gray" class="img-thumbnail img-circle avatar"></a>
      Jean Gray
    </div>
    <div class="col-sm-4">
      <a href="#/xmen/1"><img src="image/jeangray.jpg" alt="Jean Gray" class="img-thumbnail img-circle avatar"></a>
      Jean Gray
    </div>
  </div>
  <div class="col-sm-4 col-sm-offset-1 text-center box">
    <h1>Add Xmen</h1>
    <br>
    <form class="text-left" ng-init="newXmen">
      <div class="form-group">
        <label for="exampleInputEmail1">Name</label>
        <input type="text" class="form-control" ng-model="newXmen.name" placeholder="Wolverine">
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Avatar</label>
        <input type="text" class="form-control" ng-model="newXmen.avatar" placeholder="http://wolverine.com/avatar.png">
      </div>
      <button type="submit" class="btn btn-xmen" ng-click="add()">Submit</button> {{message}}
    </form>
  </div>
</div>

Đấy, chưa có tí gì gọi là Angular hay JavaScript gì trong đấy đâu . Tiếp theo nhẩy vào controller lấy danh sách Xmen về show ra nhé.
File ./scripts/controllers/main.js

'use strict';

/**
 * @ngdoc function
 * @name projectxApp.controller:MainCtrl
 * @description
 * # MainCtrl
 * Controller of the projectxApp
 */
angular.module('projectxApp')
  .controller('MainCtrl', function ($http, $scope) {
    // Load xmen
    $http.get(apiUrl+'/xmen').then(function (response) {
      $scope.xmens = response.data;
    });
    $scope.add = function () {
      $http.post(apiUrl+'/xmen', $scope.newXmen).then(function (response) {
        $scope.message = response.data;
      });
    }
  });

Chạy thử

grunt serve

Lưu ý là đang chạy thử rồi sửa đổi file thì nó cập nhật lại luôn nhé, không cần phải chạy lại lệnh trên đâu. Mình khoái nhất cái này .
Mở Firebug ra (bác nào sài Chrome dev thì nó là F12 đấy ). Xem xem nó request được những info gì, cấu trúc làm thao.
alt text
Bây giờ sửa lại ./view/main.html thôi. Bước này cần tí kĩ năng AngularJS đấy

   <div class="col-sm-4" ng-repeat="xmen in xmens">
      <a href="#/xmen/{{xmen.UID}}"><img src="{{xmen.avatar}}" alt="{{xmen.name}}" class="img-thumbnail img-circle avatar"></a>
      {{xmen.name}}
    </div>

Hehe, thực ra là xóa 3 cái icon kia, thay lại bằng ng-repeat rồi thả info vô thôi
Còn cài form thì dễ rồi, các bác tự nghiên cứu nhé. Em chỉ hướng dẫn theo các bước mà em hay làm khi dev thôi, hy vọng giúp ích được cho các bác

Trang cá nhân Xmen

Cũng tương tự như cách dev với homepage, chúng ta được ./view/xmen.html

<div class="container">
    <a href="#/"><span class="glyphicon glyphicon-menu-left"></span> Back to Homepage</a>
</div>
<div class="text-center">
    <h1 class="title">{{curXmen.name}}'s friends list </h1>
    <br>
    <div class="row">
        <div class="col-sm-2 avt-wraper" ng-repeat="xmen in xmens" ng-show="curXmen.like.indexOf(xmen.UID) >= 0 && xmen.UID !== curXmen.UID">
            <img src="{{xmen.avatar}}" alt="{{xmen.name}}" ng-click="like(xmen.UID)" class="img-thumbnail img-circle avatar">
            {{xmen.name}}
            <a href="" class="action"><span class="glyphicon glyphicon-heart"></span></a>
        </div>
        <div ng-if="curXmen.like.length <= 0"><h2>Opps... This one so selfish! Let's fall in love below</h2></div>
    </div>
    <hr>
    <h1 class="title"><span class="glyphicon glyphicon-heart"></span> if you love them</h1>
    <br>
    <div class="row">
        <div class="col-sm-2" ng-repeat="xmen in xmens" ng-show="curXmen.like.indexOf(xmen.UID) < 0 && xmen.UID !== curXmen.UID">
            <img src="{{xmen.avatar}}" alt="{{xmen.name}}" ng-click="like(xmen.UID)" class="img-thumbnail img-circle avatar">
            {{xmen.name}}
        </div>
    </div>
    <hr>
    <h1 class="title">Maybe you love...</h1>
    <br>
    <div class="row">
        <div class="col-sm-2" ng-repeat="xmen in suggests" ng-if="curXmen.like.length > 0">
            <img src="{{xmen.avatar}}" alt="{{xmen.name}}" ng-click="like(xmen.UID)" class="img-thumbnail img-circle avatar">
            <p>{{xmen.name}}</p>
            <p class="number">{{xmen.score*100 | number:2}}% {{xmen.suggestScore | number:2}}</p>
        </div>
        <div ng-if="curXmen.like.length <= 0"><h2>Opps... Love someone to get suggesting</h2></div>
        <div ng-if="suggests.length <= 0"><h2>Opps... We can not find anyone you want to live with</h2></div>
    </div>
</div>

./scripts/controllers/xmen.js

'use strict';

/**
 * @ngdoc function
 * @name projectxApp.controller:XmenCtrl
 * @description
 * # XmenCtrl
 * Controller of the projectxApp
 */
angular.module('projectxApp')
  .controller('XmenCtrl', function ($http, $scope, $routeParams, $route) {
    var init = function () {
      $http.get(apiUrl+'/'+$routeParams.uid).then(function (response) {
        $scope.curXmen = response.data;
        $http.get(apiUrl+'/xmen').then(function (response) {
          $scope.xmens = response.data;
        });
      });
      $http.get(apiUrl+'/'+$routeParams.uid+'/suggest').then(function (response) {
        $scope.suggests = response.data;
      });
    }
    init();
    $scope.like = function (uid) {
      $http.post(apiUrl+'/'+$routeParams.uid+'/like', {uid: uid}).then(function (response) {
        $route.reload();
      });
      return false;
    }

  });

Phần controller thì có vẻ dễ hiểu rồi ha. Mình sẽ giải thích sơ qua về chiến lược, và thực hiện ở xmen.html thôi nhé

  • Lấy thông tin của xmen đang xét tới, sau đó lấy danh sách xmen
  • Hiện thực 3 section
  • * Những người đã Like
  • * Những người chưa Like
  • * Danh sách gợi ý

Nhìn lên trên thì bạn sẽ thấy mấy cái ng-show. Mấy cái này để lọc ra danh sách đã/chưa like
Mấy cái ng-if sẽ hiển thị thông báo nếu thằng này chưa like thằng nào cả, hãy là “xin lỗi, em chả tìm được thằng nào hợp với anh ”
Đấy. vậy là hoàn thành xong project cho bác X. Chắc bác sẽ rất biết ơn các bác vì đã chung tay bảo vệ trái đất.

Ai nói lập trình viên không cứu được thế giới nào

Series này vẫn chưa xong đây . Bài tiếp theo mình sẽ đưa ra một vài nhận xét, bình luận về thuật toán, cách xây dựng một ứng dụng. Mong các bác tiếp tục ủng hộ vì theo mình, phần kết luận lúc nào cũng bổ ích nhất . Đón đọc nhé!
À quên repo cho các bác chạy thử không lại nói em chém gió. Nhớ đọc code rồi nghiên cứu nhé, đừng chạy xong rồi để đấy!
https://github.com/nlug/Professor-X-client

Bài gốc, các bạn qua xem dễ hiểu hơn nhé http://cuthanh.com/nodejs/xay-dung-thong-goi-y-phan-4

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Minh Thành

5 bài viết.
30 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
21 0
Chào các bác. Hôm nay mình sẽ việt một bài mang tính chuyên môn một tí nha, các bác ủng hộ Giới thiệu Hệ thống, hay là chức năng gợi ý – mình cũn...
Minh Thành viết gần 2 năm trước
21 0
White
17 6
Chào các CEO tương lai Tối qua mò mẫm kiếm film siêu anh hùng coi mà chả hiểu tự sao lại click vào cái film này coi, chắc có hình gái xinh . Sau k...
Minh Thành viết gần 2 năm trước
17 6
White
15 4
Tiếp tục loạt bài nào… (Link) Ý tưởng Đâu tiên phải xem ý tưởng mình gợi ý phòng cho giao sư như thế nào đã. Với hệ thống gợi ý như thế này, thì...
Minh Thành viết gần 2 năm trước
15 4
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
5 bài viết.
30 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!