Tìm hiểu và xây dựng ứng dụng SINGLE PAGE APPLICATION

Tìm hiểu và xây dựng ứng dụng SINGLE PAGE APPLICATION

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA KỸ THUẬT MÁY TÍNH

- -

TÌM HIỂU VÀ XÂY DỰNG ỨNG DỤNG

SINGLE PAGE APPLICATION

BÁO CÁO THỰC TẬP DOANH NGHIỆP

Tp Hồ Chí Minh, ngày 12/09/2014

Tp Hồ Chí Minh ngày 12/09/2014

Tp Hồ Chí Minh ngày 12/09/2014

“Đi một ngày đàng, học một sàng khôn” – Quá trình thực tập ở TMA đã giúp em chứng minh được câu nói trên là hoàn toàn đúng đắn Thật vậy, có những kiến thức, kĩ năng và kinh nghiệm mà em chỉ có thể học hỏi được, trau dồi được khi làm việc thực tế Song, cũng không thể phủ nhận tầm quan trọng của những kiến thức mà em đã tiếp thu trong suốt 4 năm qua khi còn ngồi trên ghế nhà trường Chính những kiến thức nền tảng quý giá ấy đã giúp em có một cái nhìn tổng quát, khoa học cũng như tiếp thu những kiến thức mới một cách hiệu quả hơn

Chính vì lẽ đó, đầu tiên em muốn gởi đến lời tri ân sâu sắc đến toàn thể quý thầy

cô Trường Đại Học Công Nghệ Thông Tin nói chung và thầy cô Khoa Kĩ Thuật Máy Tính nói riêng, đặc biệt là cô Trần Thị Như Nguyệt, người đã tận tâm tận lực giúp đỡ

em trong suốt khóa thực tập, tạo mọi điều kiện thuận lợi để em hoàn thành tốt công việc của mình

Em cũng xin gởi lời cám ơn đến công ty TMA, đã giúp cho em có cơ hội được làm việc trong môi trường thực tế chuyên nghiệp, được áp dụng những điều đã học vào thực tiễn cuộc sống Đồng thời, em cũng muốn cảm ơn đến anh Nguyễn Thanh Bình và toàn thể các bạn trong nhóm đã nỗ lực làm việc cùng nhau trong suốt thời gian qua

Mặc dù đã rất cố gắng trong quá trình thực tập, tuy nhiên, chắc chắn em vẫn còn tồn tại nhiều thiếu sót Vì vậy, kính mong quý thầy cô cho em những nhận xét khách quan, chân thực để từ đó em hoàn thiện mình hơn Những lời góp ý từ phía thầy cô cũng chính là hành trang quý báu để em tự tin vững bước vào đời

Đại diện nhóm Sinh viên thực tập

Trát Hoàng Trung Nguyên

TP HCM, ngày … tháng … năm ………

Giảng viên hướng dẫn

(Ký và ghi rõ họ tên)

MỤC LỤC

DANH MỤC BẢNG 1

DANH MỤC HÌNH 1

1 LỊCH LÀM VIỆC TẠI NƠI THỰC TẬP 2

2 GIỚI THIỆU VỀ CÔNG TY TMA SOLUTIONS 4

3 NỘI DUNG NHIỆM VỤ CHÍNH ĐƯỢC GIAO 6

3.1 Tìm hiểu các công nghệ 6

3.2 Thực hiện Demo 6

3.3 Thực hiện Project chính 6

4 NỘI DUNG CÁC CÔNG VIỆC VÀ KẾT QUẢ ĐẠT ĐƯỢC 8

4.1 Nội dung các công việc 8

4.2 Kết quả đạt được 8

4.2.1 Single Page Application (SPA) 8

4.2.2 Các mô hình phát triển web 10

4.2.3 Angularjs 14

4.2.4 Nodejs 18

4.2.5 NoSQL + MongoDB 22

4.2.6 Demo Nodejs+Express+Jade+MongoDB 26

4.2.7 Project chính: Xây dựng Web Internship 27

5 KẾT QUẢ ĐẠT ĐƯỢC QUA KHOÁ THỰC TẬP 32

5.1 Kiến thức 32

5.2 Kỹ năng 32

5.3 Kinh nghiệm 32

6 TÀI LIỆU THAM KHẢO 33

1

DANH MỤC BẢNG

Bảng 1 - Thời gian biểu các tuần thực tập tại công ty 3

Bảng 2 - Giới thiệu công ty 5

DANH MỤC HÌNH Hình 1 - Nhiệm vụ của Database, Server và Client 10

Hình 2 - Mô hình Front Controller 11

Hình 3 - Mô hình MVC 12

Hình 4 - Mô hình Spring MVC 13

Hình 5 - Data Binding 16

Hình 6 - Threading truyền thống 20

Hình 7 - Threading trong Nodejs 20

Hình 8 - Demo Nodejs+Express+Jade+MongoDB 26

Hình 9 - Database của Web Internship 28

Hình 10 - Giao diện của ứng dụng 28

Hình 11 - Giao diện hiển thị bài viết khi ở trang “Công ty” 29

Hình 12 - Một bài viết trong trang “Công ty” 30

Hình 13 - Giao diện ở trang “Đăng tin” 30

Hình 14 - Giao diện Đăng nhập 31

Hình 15 - Giao diện Đăng kí mới 31

1 LỊCH LÀM VIỆC TẠI NƠI THỰC TẬP

- Công ty thực tập : TMA Solutions

- Phòng làm việc khi thực tập : SDC Room - Lầu 2 tòa nhà TMA Tower – Đường

số 2, Công viên phần mềm Quang Trung – Phường Tân Chánh Hiệp, Quận 12

- Người hướng dẫn: Nguyễn Thanh Bình

- Lịch làm việc tại nơi thực tập :

Tham gia Toastmaster (CLB Tiếng Anh) vào sáng thứ sáu hàng tuần

Tham gia các buổi Seminar của công ty (Quy trình phát triển phần mềm, Kĩ năng làm việc nhóm, Mô hình Scrum…) theo lịch của công ty

Tuần 1

(21/07 – 27/07)

- Tìm hiểu về Single Page Application (SPA)

- Tìm hiểu về Modern web

- Tìm hiểu 10 Framework thông dụng

Tuần 2

(28/07 – 03/08)

- Tìm hiểu các mô hình phát triển web

- Tìm hiểu Asynchronous Module Definition (AMD) + Vaadin

- Tìm hiểu Google Web Toolkit (GWT)

- Chuẩn bị bài báo cáo

- Báo cáo trước hội đồng công ty

Bảng 1 - Thời gian biểu các tuần thực tập tại công ty

2 GIỚI THIỆU VỀ CÔNG TY TMA SOLUTIONS

Công ty TMA Solutions (Tên tiếng việt: Tường Minh) được thành lập năm 1997

và nhanh chóng trở thành công ty phần mềm hàng đầu Việt Nam với tốc độ tăng trưởng trung bình hàng năm là hơn 50% Mục tiêu của TMA là trở thành tập đoàn công nghệ cao hàng đầu và góp phần đưa tên Việt Nam vào bản đồ gia công phần mềm thế giới

- Là công ty phần mềm có quy mô lớn nhất Tp.HCM và thứ hai Việt Nam với trên 1,500+ kỹ sư

- 7 năm liền đạt huy chương vàng xuất khẩu phần mềm

- Công ty phần mềm viễn thông hàng đầu Đông Nam Á

- Được các công ty hàng đầu thế giới tin tưởng và hợp tác lâu dài: Avaya, IBM, Alcatel-Lucent, Nortel, Juniper Networks, Flextronics, Genband, NTT, Toshiba, Andrew, Telus, NEC, etc

- Được nhiều đài truyền hình và báo chí quốc tế giới thiệu: CNN (Mỹ), NHK (Nhật), Global (Brazil), National (Thái Lan), Nikkei Computer (Nhật) để minh chứng cho sự phát triển của ngành phần mềm của Việt Nam

- Chứng minh năng lực của kỹ sư Việt Nam trong lĩnh vực công nghệ cao

Tên công ty Tường Minh (TMA Solutions)

 - Viễn thông và mạng: PBX, call center software, soft switch, IMS,

SIP, VoIP, Asterisk, broadband/security router, firewall, network management software, NGN

 - Phần mềm nhúng và di động: VxWorks, RT-Linux, Symbian,

Windows Mobile, J2ME, iPhone, SMS, WML

- - 90% có bằng đại học, 10% có bằng thạc sĩ hoặc tiến sĩ

- - Hơn 1/3 kỹ sư có ít nhất 5 năm kinh nghiệm làm việc

- - 40% kỹ sư có kinh nghiệm học tập và làm việc ở nước ngoài

- - Tiếng Anh là ngôn ngữ chính giao tiếp trong công việc Những ngôn ngữ khác: Tiếng Nhật, Tiếng Pháp, Tiếng Hoa

3 NỘI DUNG NHIỆM VỤ CHÍNH ĐƯỢC GIAO

Trong quá trình thực tập, có 3 nhiệm vụ chính:

3.1 Tìm hiểu các công nghệ

 Single Page Application (SPA)

 Modern Web (HTML5, CSS3, Responsive Web)

 10 Framework thông dụng

 Asynchronous Module Definition (AMD) + Vaadin

 Google Web Toolkit (GWT)

 Angularjs

 Nodejs

 NoSQL + MongoDB

3.2 Thực hiện Demo

Đối với từng công nghệ, nhóm thực hiện demo tương ứng:

 Demo Single Page Application (SPA)

 Demo Asynchronous Module Definition (AMD) + Vaadin

 Demo Google Web Toolkit (GWT)

 Demo Nodejs + Express + Jade + MongoDB

3.3 Thực hiện Project chính

Sau quá trình thảo luận, nhóm đã chọn project “Xây dựng Web Internship” dưới sự đồng ý của anh Bình - người hướng dẫn nhóm tại công ty TMA

 Tổng quan Web Internship:

Web Internship là một ứng dụng Web SPA, là cầu nối giữa sinh viên và doanh nghiệp trong việc tìm kiếm công việc thực tập Cụ thể, ứng dụng cho phép sinh viên tạo bài viết cá nhân, đăng thông tin giới thiệu bản thân đến các doanh nghiệp tuyển dụng Đồng thời, ứng dụng cũng cho phép các doanh nghiệp tạo bài viết, đăng tin tuyển dụng

7

Ứng dụng này có sự phân cấp rõ ràng: Guest – Student – Company

Ứng dụng có thời gian hồi đáp rất nhanh nhờ áp dụng SPA

Ứng dụng gồm các chức năng:

- Đăng kí, đăng nhập, đăng xuất

- Thay đổi/ Cập nhật thông tin user (Student/Company)

- Xem thông tin các bài viết (Guest)

- Tạo bài viết mới (Student/Company)

- Tìm kiếm bài viết theo từ khóa

- Liệt kê các bài viết của doanh nghiệp

- Liệt kê các bài viết của sinh viên

4 NỘI DUNG CÁC CÔNG VIỆC VÀ KẾT QUẢ ĐẠT ĐƯỢC

4.1 Nội dung các công việc

4.2.1 Single Page Application (SPA)

Single Page Application (SPA), hay còn gọi là Single Page Interface (SPI), là một web app hoặc là một website hiển thị vừa vặn trên 1 mặt trang web, với mục đích

là giúp user có trải nghiệm giống như đang dùng ứng dụng trên desktop

Là ứng dụng chạy bên trong trình duyệt, không yêu cầu phải reload lại toàn bộ trang web mỗi lần sử dung

Trong 1 SPA, hoặc là tất cả những code cần thiết – HTML, JavaScript và CSS, được lấy trong một lần load trang, hoặc những tài nguyên thích hợp sẽ được load động

và thêm vào trang khi cần thiết, thường là đáp lại với những hoạt động của user Trang

sẽ không tự load lại tại bất kì thời điểm nào của tiến trình, cũng như không chuyển qua một trang khác, mặc dù những công nghệ modern web (như những công nghệ trên bao gồm HTML5) có thể cung cấp khả năng nhận thức và điều hướng đối với các trang rời rạc trong ứng dụng đó Sự tương tác với single page application thường liên quan đến giao tiếp động với webserver

Những trình duyệt hiện đại có khả năng phân tích HTML5 cho phép các developer thay đổi UI và application logic từ web server cho đến client Những thư viện mã nguồn mở hỗ trợ xây dựng SPA mà không cần phải can thiệp quá sâu vào Javascript và đối mặt với các vấn đề về công nghệ

Một số đặc điểm riêng biệt của Single Page Application chuyên nghiệp:

9

 Phân đoạn: Trang web được xây dựng bằng cách nạp các đoạn gồm các HTML fragment và dữ liệu JSON thay vì lấy toàn bộ HTML từ một webserver trong mỗi yêu cầu (Backbone.js, pjax, jQuery, Upshot.js)

 Controllers: JavaScript code xử lí các DOM phức tạp cũng như các thao tác dữ liệu, application logic, lời gọi AJAX sẽ đươc thay thế bằng các controllers – phân tách view và model sử dụng mô hình MVC hoặc MVVM (Backbone.js, Knockout.js, JavaScriptMVC)

 Khuôn mẫu: Lập trình các UI và thao tác DOM được thay thế bằng các khai báo ràng buộc dữ liệu đối với các template HTML (Knockout.js, Mustache, jQuery Templates, UnderScore.js)

 Đinh tuyến: Các tập hợp gồm view và navigation (không cần nạp lại trang) giữ được trạng thái của trang, yếu tố và dữ liệu (History.js, Crossroad.js, Backbone.js, pjax, HTML5 History API)

 Giao tiếp thời gian thực: Giao tiếp hai chiều gồm một ứng dụng client và web server đươc thay thế bằng yêu cầu một chiều từ một trình duyệt (HTML5 Web Sockets, Socket.io, SignalR)

 Lưu trữ cục bộ: Những khả năng lưu trữ dữ liệu trên một trình duyệt nhằm tăng hiệu năng và truy cập offline thay thế cho các cookie và việc nạp các

dữ liệu chuyên sâu từ web server (HTML 5 Local storage)

Hình 1 - Nhiệm vụ của Database, Server và Client

4.2.2 Các mô hình phát triển web

 Mô hình thiết kế Front Controller:

Mô hình thiết kế này thực thi một điểm duy nhất như là cổng vào cho tất cả những yêu cầu gởi đến Tất cả những yêu cầu được xử lí bởi một mảng code, sau đó có thể tiếp tục giao phó trách nhiệm xử lí các yêu cầu đến các object của ứng dụng

11

Hình 2 - Mô hình Front Controller

 Mô hình thiết kế MVC:

Mô hình thiết kế này giúp chúng ta phát triển các ứng dụng giảm sự gắn kết

bằng cách cách ly các quan hệ thành các lớp khác nhau Mô hình thiết kế MVC thực thi

ứng dụng chia thành ba lớp: Model, View, và Controller:

- Model: Tượng trưng cho dữ liệu của ứng dụng

- View: Tượng trưng cho giao diện người dùng của ứng dụng View sẽ lấy

Model như là một input của nó và biểu diễn chúng một cách thích hợp đến

các người dùng cuối

- Controller: Controller chịu trách nhiệm xử lí yêu cầu, tạo ra model và lựa chọn view thích hợp cho yêu cầu đó

Hình 3 - Mô hình MVC

 Spring’s MVC Module:

Spring’s MVC Module được dựa trên mô hình thiết kế Front controller kết hợp với mô hình thiết kế MVC Tất cả những yêu cầu gởi đến sẽ được xử lí bởi một single

serlet có tên là DispatcherSerlet đóng vai trò như front controller trong Spring ‘s MVC

module DispatcherSerlet sau đó sẽ tham chiếu đến HandlerMapping để tìm một controller object thích hợp có khả năng xử lí yêu cầu Tiếp theo DispatcherServlet sẽ gởi yêu cầu đến controller object để nó có thể thực hiện business logic để thỏa mãn

13

những yêu cầu của người dùng (Controller có thể giao trách nhiệm cho các application object hay còn gọi là các service object) Controller sẽ trả về một object được đóng gói, chứa model object và view object (hoặc là một logic name của view) Trong Spring’s MVC, đối tượng đóng gói này được đại diện bởi lớp ModelAndView Trong trường hợp ModelAndView chứa logical name của view, DispatcherServlet tham chiếu đến ViewResolver để tìm chính xác View object dựa trên logical name DispatcherServlet

sẽ giao model object cho view object để biểu diễn cho người dùng cuối

Hình 4 - Mô hình Spring MVC

4.2.3 Angularjs

Angularjs là một web application mã nguồn mở, được duy trì bởi Google và cộng đồng, hỗ trợ thiết kế Single-Page Application (SPA), Web Application đơn trang chỉ yêu cầu HTML, CSS và JavaScript ở phía client Mục tiêu của nó là để tăng cường khả năng của web application với mô hình model-view-controller (MVC), nhằm đảm bảo việc phát triển cũng như kiểm thử trở nên dễ dàng hơn

Thư viện đọc trong HTML trong đó có các thuộc tính custom tag; sau đó nó tuân theo các directives trong những thuộc tính tùy biến, và liên kết input hay output các phần của trang đến một model đại diện bởi các biến JavaScript tiêu chuẩn Các giá trị của các biến JavaScript có thể được thiết lập bằng tay, hoặc lấy từ nguồn JSON tĩnh hay động

Những đặc điểm chính của Angurlarjs:

Application Domain (viết tắt AppDomain, đây cũng là tên lớp tương ứng trong Net) có mục đích tạo một môi trường cách ly nằm bên trong một process, tương tự như các process hoạt động trong cùng một hệ điều hành Bạn có thể sử dụng AppDomain

để nạp các assembly và thực thi các tác vụ một cách riêng biệt trong cùng process

 MVC : Model, View, Controller:

Controller có nhiệm vụ khởi tạo, xây dựng các Model vào kết nối chúng với các View (HTML) Các scopes đứng giữa controllers và views Khi lập trình, code ở bên trong controller cần phải thật sự sáng sũa và chỉ xữ lý nhưng business logic cần thiết cho view Trong AngularJS, Controllers có thể thừa kế Một điểm khác biệt rất lớn

 Services:

AngularJS service là một object hoặc một function phụ trách một tác vụ nào đó Việc viết service chỉ là việc gom các đoạn xử lý logic vào object hoặc function để dễ quản lý hơn Cũng giống như mô hình MVC tách phần xử lý, điều hướng và hiển thị riêng biệt

Trong AngularJS service sẽ chứa tất cả các phần xử lý, Controller nhận yêu cầu

và gọi các service cần thiết để xử lý, Model handle dữ liệu từ các control, View hiển thị

dữ liệu, Route điều hướng request tới controller

Services trong AngularJS được thiết kế theo singletons(tập hợp có 1 phần tử) để

xữ lý các tác vụ phổ biến cho một web application Nếu bạn muốn chia sẽ các chức năng giữa các Controllers, có thể sử dụng Services Được xây dựng sẵn trong AngularJS Services bắt đầu bằng một dấu $, và có nhiều cách để xây dựng một Service: Service API, Factory API, hoặc $provide API

 Data Binding:

Data Binding trong AngularJS được triển khai theo two-way binding giữa View

và Model Việc đồng bộ tự động giữa Views và Data Model khiến cho AngularJS cực

kỳ dễ sử dụng và rỏ ràng Việc cập nhật Data giữa Views và Model được thực hiện mà không cần bất kỳ một dòng code Javascript nào để binding hay event listeners để lắng nghe