MẪU ĐỒ ÁN -KHOÁ LUẬN TỐT NGHIỆP

ĐẠI HỌC ĐÀ NẴNG

KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

ĐỒ ÁN CƠ SỞ 4

ĐỀ TÀI: XÂY DỰNG WEB CHAT VIDEO VỚI CÔNG NGHỆ WEB RTC VÀ NODEJS

Sinh viên thực hiện : NGUYỄN NGỌC HIỀN

HOÀNG THỊ HỒNG NHUNG

Giảng viên hướng dẫn : NGUYỄN ĐỨC HIỂN

Lớp : 17IT2

Đà nẵng, tháng 01 năm 2020

ĐẠI HỌC ĐÀ NẴNG

KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

ĐỒ ÁN CƠ SỞ 4

ĐỀ TÀI: XÂY DỰNG WEB CHAT VIDEO VỚI CÔNG NGHỆ WEB RTC VÀ NODEJS

Đà Nẵng, tháng 01 năm 2020

MỞ ĐẦU

LỜI CẢM ƠN

NHẬN XÉT

(của giảng viên hướng dẫn)

………………………………………………………………………………………

………………………………………………………………………………………

………………………………………………………………………………………

………………………………………………………………………………………

………………………………………………………………………………………

………………………………………………………………………………………

………………………………………………………………………………………

………………………………………………………………………………………

………………………………………………………………………………………

………………………………………………………………………………………

………………………………………………………………………………………

………………………………………………………………………………………

………………………………………………………………………………………

………………………………………………………………………………………

………………………………………………………………………………………

MỤC LỤC

8Chương 1Giới thiệu

81.1Tổng quan

81.1.1Bối cảnh thực hiện đề tài

81.1.2Vấn đề cần giải quyết

81.1.3Đề xuất nội dung thực hiện

91.2Phương pháp, kết quả

91.2.1Sử dụng Công nghệ webRTC

91.2.2Lập trình Node.js

91.2.3Kết quả

10Chương 2Nghiên cứu tổng quan

102.1Các phương pháp

102.1.1Sử dụng Công nghệ webRTC

122.1.2Lập trình Node.js

132.2Hạn chế, tồn tại của các phương pháp

132.2.1Sử dụng Công nghệ webRTC

132.2.2Sử dụng Node.js

152.3Phân tích thiết kế hệ thống

152.3.1Mô tả bài toán

152.3.2Phân tích chức năng

152.4Thiết kế cơ sở dữ liệu

16Chương 3Triển khai xây dựng

163.1Quy trình thực hiện

163.2Công cụ thực hiện

163.2.1StarUML

193.2.2Mokup

203.2.3MySQL

213.2.4Visual studio code

23Chương 4Kết luận và Hướng phát triển

234.1Kết luận

234.1.1Đã đạt được

234.1.2Chưa đạt được

234.2Hướng phát triển

DANH MỤC HÌNH

Trang

10Hình 1: Data tranfer

11Hình 2: Network Address Translation

11Hình 3: Direct Media

17Hình 4: Mô hình UML

18Hình 5: Giao diện UML

20Hình 6: mySQL

22Hình 7: Tính năng của Visual Studio Code

Chương 1 Giới thiệu1.1 Tổng quan1.1.1 Bối cảnh thực hiện đề tài

Sự trao đổi thông tin tràn lan trên các mạng xã hội, không giới hạn tài khoản cũng như nội dung, về hình thức ngày càng được đa dạng hóa.

Nhiều ý kiến cho rằng việc không kiểm soát nội dung sẽ không đảm bảo vấn đề an ninh mạng đặc biệt là các cuộc trao đổi mang tính chất nghiêm trọng thuộc về yêu cầu công việc.

Mạng xã hội mở rộng về quy mô và cách thức, việc tận dụng internet có sẳn từ nhu cầu của người dùng sẽ là một điểm cộng cho vấn đề tối ưu hóa cách tiếp cận người dùng.

Call video không chỉ thực hiện cuộc gọi thông thường mà còn cho phép nhìn thấy hình ảnh của nhau. Đặc biệt khi gọi nhóm thì người dùng sẽ dễ dàng biết người đang nói là ai, thấy được cảm xúc hoặc hành động cử chỉ (ngôn ngữ hình thể)

Nhu cầu lưu lại lịch sử cuộc gọi, bản ghi âm hoặc phiên bản video cuộc gọi tại máy khách.

1.1.2 Vấn đề cần giải quyết

Nhu cầu bảo mật thông tin đối với một vài trường hợp liên quan đến công việc, hoặc đơn giản là vấn đề cá nhân tế nhị.

Băng thông đường truyền đối với những cuộc gọi nhóm, đây là vấn đề khá là khó chưa kể trên nền tảng web việc truyền tải dữ liệu trở nên khó khăn gấp bội lần đường truyền smartphone.

Cho thấy sự tối ưu của web so với smartphone, sự cạnh tranh khá là khập khiểng khi đặt lợi ích của người dùng lên trên hết.

1.1.3 Đề xuất nội dung thực hiện

Xây dựng các chức năng dựa trên ca sử dụng, bám sát đề bài.

Thiết kế cơ sở dữ liệu cho phép lưu trữ thông tin rõ ràng cụ thể, chia hệ thống thành máy chủ và máy khách.

1.2 Phương pháp, kết quả1.2.1 Sử dụng Công nghệ webRTC

WebRTC ( Web Real-Time Communication) là một web API được phát triển bởi Google, Mozilla, Opera và một số đơn vị khác nữa, khả năng hỗ trợ trình duyệt (browser) giao tiếp với nhau thông qua VideoCall, VoiceCall hay transfer data “Peer-to-Peer” (P2P) mà không cần browser phải cài thêm plugins hay phần mềm hỗ trợ nào từ bên ngoài.

1.2.2 Lập trình Node.js

Node.js là một nền tảng chạy trên môi trường V8 JavaScript runtime - một trình thông dịch JavaScript cực nhanh chạy trên trình duyệt Chrome. Bình thường thì bạn cũng có thể tải bộ V8 và nhúng nó vào bất cứ thứ gì. Node.js làm điều đó đối với các web server.

1.2.3 Kết quả

Kết hợp cả hai phương pháp để đạt hiệu quả tối ưu cho sản phẩm tuy vậy vẫn còn nhiều nhược điểm chưa thể khắc phục

Chương 2 Nghiên cứu tổng quan2.1 Các phương pháp 2.1.1 Sử dụng Công nghệ webRTC

· Cách hoạt động của webRTC

Trong mô hình hoạt động của các web truyền thống mô hình client-server, các điều khiển,security,truyền tải dữ liệu sẽ do toàn bộ server đảm nhiệm. Tuy nhiên khi mang mô hình này vào các ứng dụng thời gian thực sẽ ảnh hưởng tới hiệu năng rất nhiều.

Dữ liệu trao đổi giữa các client với một lượng rất lớn và liên tục  Nếu dữ liệu này truyền thằng trực tiếp tới server để server truyền tải tới client thì sẽ xảy ra việc quá tải không chỉ dành cho server mà cho cả hệ thống mạng.

Chất lượng dịch vụ QoS(Quality of service). Trong QoS dành cho các ứng dụng thời gian thực, có hai tham số cực kỳ quan trọng cần được giảm thiểu tối đa là deplay (trễ client ) và jitter (trễ giữa các gói tin). Việc phải truyền tải toàn bộ dữ liệu tới server và server tới client sẽ làm ra tăng các chỉ sổ này.

Do đó, các ứng dụng thời gian thực cần phải giải quyết được các vấn đề trên đây mô hình Peer-to-Peer (P2P), Mô hình này chia dữ liệu ra làm 2 nhánh một là dữ liệu Signalling và Data Stream . Các client sẽ nhận các Signalling điều khiển từ server và tự giao tiếp với nhau bằng Data Stream:

Hình 1: Data tranfer

Một ví dụ cơ bản của mô hình này như sau:  Anh A và Chị B muốn giao tiếp với nhau thì cần thực hiện :

· Anh A sẽ gửi thông tin của mình bao gồm thông tin về ứng dụng, địa chỉ ip,port của mình tới server khi khởi động ứng dụng

· Anh A sẽ thực hiện một yêu cầu được kết nối với chị B. server sẽ trả về các thông tin của chị B ,ứng dụng,thiết bị,port,ip, cho Anh A và thông báo cho chị B biết rằng mình có một yêu cầu giao tiếp

· 2 Người bắt đầu cuộc trò chuyện “trực tiếp” với nhau

Mặc dù “trực tiếp” nhưng cũng phải trải qua một hệ thống vô cùng phức tạp thông qua hệ thống mang, Ta sẽ tìm hiểu để có một cuộc gọi như trên chúng ta cần những gì

· NAT (Network Address Translation)

Hình 2: Network Address Translation

· IP private và IP public chắc mọi người đã biết về cái này rồi nên mình sẽ ko viết nhiều IPprivate là địa chỉ ip mà khi chúng ta kết nối vào một các router nào đó sẽ được NAT để có thể kết nối mạng và được cấp IP private để kết nối với router, ipPublic là ip mà nhà mạng cung cấp cho các router đó. trên thực tế khi ta thực hiện kết nối mỗi peer trên đây đều sử dụng địa chỉ private.

· Khi một máy tính gửi một thông tin tới một máy tính nào đó trên internet thì gói tin đó gửi từ máy tính đến NAT và NAT sẽ gửi gói tin này đi với IP public mà không phải IP của máy tính đó.

· STUN (Simple Traversal Of UDP Through NAT):

Hình 3: Direct Media

Để truyền tải được dữ liệu thì chúng ta sẽ thực hiện chuyển đổi từ IP private->IP public để biết được gói tin sẽ đi đến đích nào ta cần phải biết được IPprivate của máy ta cần đến STUN.STUN server sẽ đóng vai trò trung gian giúp cho các peer có thể lấy được địa chỉ của peer khác.

· TURN (Traversal Using NAT Relay):

Trong mô hình OSI, tại lớp vận chuyển (Transport layer) có hai giao thức nổi tiếng là TCP và UDP. Trong khi UDP cung cấp khả năng vận chuyển nhanh nhất có thể thì TCP lại đảm bảo truyền tin cậy. Hầu hết trong các ứng dụng thời gian thực, tín hiệu điều khiển sẽ sử dụng TCP trong khi dữ liệu sẽ truyền bằng UDP. Tuy nhiên, UDP không phải là cơ chế truyền tin cậy, dễ làm tăng số lượng các gói tin bị mất (Packet lost), do vậy đôi khi TCP được ưu tiên sử dụng.

Ở đây, dữ liệu thay vì được gửi trực tiếp tới các peer thì các peer sẽ gửi dữ liệu tới các TURN server và TURN server sẽ đóng vai trò trung gian vận chuyển gói tin. Điều này nâng cao không những chất lượng dịch vụ của ứng dụng mà còn đảm bảo an toàn thông tin khi truyền dẫn.

Nhưng cái gì cũng có hai mặt đúng ko?  bất lợi của TURN là chi phí sử dụng lớn, vì sẽ có một lưu lượng băng thông lớn được sử dụng đúng không nào? Nhất là với chất lượng full HD hay video HD nữa.

· ICE (Interactive Communication Establishment)

ICE nôm na dễ hiểu là một giao thức được cùng để thiết lập phiên media dựa trên UDP đi qua NAT một cách nhanh nhất.

ICE sẽ tìm đường tốt nhất để kết nối giữa các peer, nó thử tất cả khả năng có thể kết nối một cách song song và lựa chọn con đường hiệu quả nhất (cướp ngân hàng làm giàu).

Đầu tiên nó sẽ cố gắng tạo ra một kết nối bằng cách sử dụng địa chỉ thu được từ hệ điều hành và card mạng của thiết bị, nếu không thành công (có thể thiết bị đằng sau NAT) thì ICE sẽ lấy địa chỉ bên ngoài của thiết bị bằng cách sử dụng máy chủ STUN (nhưng đời có lúc không gặp may), nếu không thành công nữa thì nó sẽ chuyển lưu lượng mạng qua một máy chủ chuyển tiếp là TURN.

Để dễ nhớ ta có thể nghĩ là ICE xài STUN xong không được thì đi xài TURN.

2.1.2 Lập trình Node.js

· Node.js là gì

JavaScript chỉ là một ngôn ngữ lập trình phía client chạy trên trình duyệt, phải không? Nhưng điều này không còn đúng chút nào nữa. Node.js là một cách để chạy JavaScript trên server; nhưng nó còn hơn thế nữa.

Trong một môi trường server điển hình LAMP (Linux-Apache-MySQL-PHP), bạn có một web server là Apache hoặc NGINX nằm dưới, cùng với PHP chạy trên nó. Mỗi một kết nối tới server sẽ sinh ra một thread mới, và điều này khiến ứng dụng nhanh chóng trở nên chậm chạp hoặc quá tải - cách duy nhất để hỗ trợ nhiều người dùng hơn là bằng cách bổ sung thêm nhiều máy chủ. Đơn giản là nó không có khả năng mở rộng tốt. Nhưng với Node.js thì điều này không phải là vấn đề. Không có một máy chủ Apache lắng nghe các kết nối tới và trả về mã trạng thái HTTP - bạn sẽ phải tự quản lý kiến trúc lõi của máy chủ đó. May mắn thay, có một số module giúp thực hiện điều này được dễ dàng hơn, nhưng công việc này vẫn gây cho bạn một chút khó khăn khi mới bắt đầu. Tuy nhiên, kết quả thu được là một ứng dụng web có tốc độ thực thi cao.

JavaScript là một ngôn ngữ dựa trên sự kiện, vì vậy bất cứ thứ gì xảy ra trên server đều tạo ra một sự kiện non-blocking. Mỗi kết nối mới sinh ra một sự kiện; dữ liệu nhận được từ một upload form sinh ra một sự kiện data-received; việc truy vấn dữ liệu từ database cũng sinh ra một sự kiện. Trong thực tế, điều này có nghĩa là một trang web Node.js sẽ chẳng bao giờ bị khóa (lock up) và có thể hỗ trợ cho hàng chục nghìn user truy cập cùng lúc. Node.js đóng vai trò của server - Apache - và thông dịch mã ứng dụng chạy trên nó. Giống như Apache, có rất nhiều module (thư viện) có thể được cài đặt để bổ sung thêm các đặc trưng và chức năng - như lưu trữ dữ liệu, hỗ trợ file Zip, đăng nhập bằng Facebook, hoặc các cổng thanh toán. Dĩ nhiên, nó không có nhiều thư viện như PHP, nhưng Node.js vẫn đang ở trong giai đoạn ban đầu và có một cộng đồng rất mạnh mẽ ở đằng sau nó. 

Một khái niệm cốt lõi của Node.js đó là các function bất đồng bộ (asynchronous functions) - vì vậy về cơ bản thì mọi thứ chạy trên nền tảng này. Với hầu hết các ngôn ngữ kịch bản máy chủ, chương trình phải đợi mỗi function thực thi xong trước khi có thể tiếp tục chạy tiếp. Với Node.js, bạn xác định các function sẽ chạy để hoàn thành một tác vụ nào đó, trong khi phần còn lại của ứng dụng vẫn chạy đồng thời. Nó là một chủ đề phức tạp mà tôi sẽ không đi vào quá sâu trong bài viết này, nhưng đó là một trong những đặc trưng tiêu biểu của Node.js, vì vậy việc nắm vững nó là điều hết sức quan trọng. Tuy nhiên tôi sẽ đưa ra một ví dụ Hello World để mang lại cho bạn một cái nhìn thoáng qua một vài những khái niệm này.

· Tại sao lại sử dụng Node.js?

Đầu tiên là ưu điểm về tốc độ thực thi và khả năng mở rộng. Node.js có tốc độ rất nhanh. Đó là một yêu cầu khá quan trọng khi bạn là một startup đang cố gắng tạo ra một sản phẩm lớn và muốn đảm bảo có thể mở rộng nhanh chóng, đáp ứng được một lượng lớn người dùng khi trang web của bạn phát triển lên. 

Node.js có thể xử lý hàng ngàn kết nối đồng thời trong khi PHP sẽ chỉ có nước sụp đổ. Bên cạnh các lợi ích về tốc độ thực thi và khả năng mở rộng, có thể bạn cũng đã biết một chút về JavaScript, vì vậy tại sao lại phải phiền toái để học thêm về một ngôn ngữ lập trình hoàn toàn mới như PHP? Và sau đó bạn sẽ có một sự phấn khích khi học về một cái gì đó mới mẻ và gần như chưa được khám phá. Bạn còn nhớ cái cảm giác khi mà một cái gì đó mới xuất hiện và sau đó trở thành phổ biến khắp mọi nơi mà bạn hối tiếc đã không học về nó sớm hơn, và mãi mãi chỉ là người đến sau? Đừng phạm phải sai lầm như vậy lần này nữa. Node.js đang ngày càng trở nên lớn mạnh hơn.

2.2 Hạn chế, tồn tại của các phương pháp

2.2.1 Sử dụng Công nghệ webRTC2.2.2 Sử dụng Node.js

Giống như hầu hết các công nghệ mới, việc triển khai Node.js trên host không phải là điều dễ dàng. Nếu bạn có một web hosting xài chung, bạn không thể đơn giản tải lên một ứng dụng Node.js và mong chờ nó hoạt động tốt. VPS và dedicated server là một sự lựa chọn tốt hơn - bạn có thể cài đặt Node.js trên chúng. Thậm chí dễ hơn là sử dụng một dịch vụ có khả năng mở rộng như là Heroku, và bạn có thể hoàn toàn an tâm để phát triển trang web của mình trên đó - bạn chỉ cần trả tiền khi cần thêm nhiều tài nguyên hơn. 

Mặt khác, chúng ta rất dễ cài đặt Node.js chạy cục bộ trên máy tính của bạn sử dụng các hệ điều hành như Windows, Mac hoặc Linux và bắt đầu phát triển ứng dụng ngay lập tức - chỉ việc tải phiên bản Node.js tương ứng tại đây. Một điều quan trọng nên chú ý là Node.js không chỉ đơn giản là một sự thay thế cho Apache - các ứng dụng web đang tồn tại sẽ không có khả năng tương thích, và bạn sẽ làm việc hiệu quả với những ứng dụng phát triển từ đầu (mặc dù có rất nhiều framework ngoài kia để giúp đỡ bạn với nhiều đặc trưng phổ biến). 

Một nhược điểm lớn khác của Node.js đó là nó vẫn đang trong giai đoạn phát triển ban đầu, điều này có nghĩa là một số đặc trưng sẽ thay đổi trong quá trình phát triển tiếp theo. Trong thực tế, nếu bạn đọc các tài liệu đi kèm, thì nó bao gồm một chỉ số ổn định (stability index), chỉ số này cho thấy mức độ rủi ro khi bạn sử dụng các đặc trưng hiện có.

2.3 Phân tích thiết kế hệ thống2.3.1 Mô tả bài toán

Web chat cho phép tạo các tài khoản dựa trên số điện thoại đăng kí. Mỗi tài khoản sau khi đăng kí sẽ có một giao diện hoạt động. Với tài khoản người dùng cho phép thực hiện gọi video cá nhân, gọi nhóm, và tạo sự kiện.

Có một tài khoản admin do hệ thống cung cấp sẽ quản lí dữ liệu nếu cần lấy lại thông tin người dùng hoặc cho phép sự kiện diễn ra trên hệ thống

2.3.2 Phân tích chức năng

Chức năng đối với tài khoản người dùng:

+Video call

-Cá nhân

-Nhóm

+Lưu lịch sử

-Lịch sử gọi

-Cuộc trò chuyện video

+Để lại lời nhắn video

+Danh bạ

+Hiển thị danh sách người dùng đang hoạt động

+Tạo sự kiện theo chủ đề

Chức năng đối với tài khoản admin:

+Đối chiếu tài khoản

+Lấy lại thông tin tài khoản người dùng

+Cho phép sự kiện hoạt động

2.4 Thiết kế cơ sở dữ liệu

Chương 3 Triển khai xây dựng 3.1 Quy trình thực hiện

· Tìm hiểu nhu cầu thực tế, khảo sát thị hiếu người dùng.

· Tìm hiểu công nghệ phù hợp và phương pháp triển khai

· Thiết lập môi trường và Công cụ: WebRTC, NodeJS.

· Phân tích và thiết kế hệ thống, tối ưu hóa chức năng

· Thiết kế giao diện

· Xây dựng thiết kế cơ sở dữ liệu

· Lập trình sử dụng một vài mã nguồn mở và thiết kế riêng cho hệ thống

· Vận hành và Kiểm thử: dù đã kiểm tra qua từng công đoạn, tuy vậy khi vẫn phải tiến hành kiểm thử tổng quan hệ thống

3.2 Công cụ thực hiện3.2.1 StarUML

StarUML là một công cụ UML của MKLab. Phần mềm được cấp phép theo phiên bản sửa đổi của GNU GPL cho đến năm 2014, khi phiên bản viết lại 2.0.0 được phát hành để thử nghiệm beta theo giấy phép độc quyền.

Sau khi bị bỏ rơi một thời gian, dự án đã hồi sinh để chuyển từ Delphi sang Java / Eclipse và sau đó dừng lại. Vào năm 2014, một phiên bản viết lại đã được phát hành dưới dạng phần mềm độc quyền . Tuy nhiên, cộng đồng của phiên bản nguồn mở vẫn hoạt động và nhiều chủ đề được thảo luận trên các diễn đàn . 

Mục tiêu đã nêu của dự án là thay thế các ứng dụng thương mại lớn hơn như Rational Rose và Borland Together .

StarUML hỗ trợ hầu hết các loại sơ đồ được chỉ định trong UML 2.0 . Nó hiện đang thiếu sơ đồ tổng quan về 

HYPERLINK "https://en.wikipedia.org/wiki/UML_Timing_Diagram" \o "Sơ đồ thời gian UML" thời gian và tương tác .

StarUML được viết bằng Delphi, đây là một trong những lý do khiến nó bị bỏ rơi trong một thời gian dài. Kể từ tháng 12 năm 2005, StarUML không được cập nhật nữa, mặc dù một số mô-đun bên ngoài đã được cập nhật 

Hiện tại phiên bản mới nhất của StarUML của các tác giả ban đầu đã có sẵn để tải xuống dưới phần xử lý "StarUML 2". Bản beta công khai có sẵn, mặc dù không theo giấy phép GPL. Giá cuối cùng và loại giấy phép mới vẫn chưa được biết. Phiên bản này đã được viết lại hoàn toàn từ đầu và bao gồm nhiều tính năng: hỗ trợ cho các tiện ích mở rộng, khả năng tương thích OS X và giao diện người dùng đồ họa mới.

Đặc trưng

Khi bạn bắt đầu một dự án mới, StarUML đề xuất cách tiếp cận bạn muốn sử dụng: 4 + 1 (Krutchen), các thành phần Rational, UML (từ sách Cheesman và Daniels), mặc định hoặc trống. Tùy thuộc vào cách tiếp cận, hồ sơ và / hoặc khung có thể được bao gồm và được tải. Nếu bạn không theo một cách tiếp cận cụ thể, lựa chọn "trống" có thể được sử dụng. Mặc dù một dự án có thể được quản lý dưới dạng một tệp, nhưng có thể thuận tiện khi chia nó thành nhiều đơn vị và quản lý chúng riêng biệt nếu nhiều nhà phát triển đang làm việc trên đó cùng nhau.

StarUML phân biệt khái niệm rõ ràng giữa các mô hình, khung nhìn và sơ đồ. Mô hình là một yếu tố chứa thông tin cho mô hình phần mềm. Chế độ xem là biểu hiện trực quan của thông tin có trong mô hình và Sơ đồ là tập hợp các yếu tố chế độ xem đại diện cho suy nghĩ thiết kế cụ thể của người dùng.

Hình 4: Mô hình UML

StarUML được xây dựng như một công cụ mô-đun và mở. Nó cung cấp các khung để mở rộng chức năng của công cụ. Nó được thiết kế để cho phép truy cập vào tất cả các chức năng của mô hình / mô hình meta và công cụ thông qua COM Tự động hóa, và nó cung cấp phần mở rộng của các mục tùy chọn và menu. Ngoài ra, người dùng có thể tạo các phương pháp và khung riêng theo phương pháp của họ. Công cụ này cũng có thể được tích hợp với bất kỳ công cụ bên ngoài nào.

StarUML hỗ trợ các loại sơ đồ sau

· Sử dụng sơ đồ trường hợp

· Sơ đồ lớp

· Sơ đồ trình tự

· Sơ đồ cộng tác

· Sơ đồ Statechart

· Sơ đồ hoạt động

· Sơ đồ thành phần

· Sơ đồ triển khai

· Sơ đồ cấu trúc hỗn hợp

Hình 5: Giao diện UML

Giao diện người dùng là trực quan. Ở phía trên bên phải, một cửa sổ cho phép điều hướng nhanh chóng giữa tất cả nội dung của dự án, thông qua mô hình hoặc chế độ xem sơ đồ. Nhiều sơ đồ có thể được mở cùng một lúc và các tab cho phép chuyển đổi nhanh giữa các chế độ xem. Cửa sổ bên phải phía dưới cho phép ghi lại sơ đồ hiện tại, bằng văn bản thuần túy hoặc đính kèm một tài liệu bên ngoài. Trong quá trình chỉnh sửa sơ đồ, "trình hướng dẫn" được đặt xung quanh đối tượng cung cấp cho bạn các phím tắt nhanh đến các tác vụ chính được liên kết với hoạt động hiện tại của bạn, như thêm một thuộc tính khi bạn tạo một lớp chẳng hạn. Nhấp chuột phải vào chuột mang đến toàn bộ hoạt động theo ý của bạn.

StarUML cũng có một tính năng xác minh mô hình. Bạn có thể xuất sơ đồ ở các định dạng khác nhau (jpg, bmp, wmf). Nó cũng hỗ trợ một cách tiếp cận mẫu và nhập các tệp Rational Rose.

Trình tạo StarUML là mô-đun nền tảng để tạo các tạo phẩm khác nhau (như Microsoft Word, Excel, PowerPoint và các tạo phẩm dựa trên văn bản) theo các mẫu tùy thuộc vào các thành phần mô hình UML trong StarUML. Người dùng có thể xác định các mẫu riêng của họ và có thể áp dụng nhiều loại mẫu khác nhau cho cùng một mô hình UML, do đó người dùng có thể nhận được nhiều tạo phẩm khác nhau một cách tự động, dễ dàng và nhanh chóng. Công cụ này hỗ trợ tạo mã và kỹ thuật đảo ngược cho Java, C # và C ++.

Phần kết luận

StarUML có nhiều tính năng mạnh mẽ và chắc chắn không chỉ là một công cụ lập biểu đồ "đơn giản". Với sự hỗ trợ của MDA (Model Driven Architecture), nó nhắm đến những người sử dụng UML theo cách chuyên sâu và với một số mục tiêu tạo mã hơn là chỉ đơn giản là vẽ sơ đồ cho các yêu cầu tài liệu. Tuy nhiên, sử dụng StarUML như một công cụ lập biểu đồ hoạt động tốt, đặc biệt là trên Windows vì công cụ này được xây dựng với Delphi và có thể thực thi nhanh hơn các công cụ dựa trên Java.

3.2.2 Mokup

· Lựa chọn công cụ phù hợp để tạo mockup

Có rất nhiều cách để tạo một mockup, từ công cụ là một phần mềm chuyên dụng. Công cụ phổ biến nhất chính là Photoshop, phần mềm có thể giúp bạn tạo một hình ảnh giả lập miêu tả sản phẩm thiết kế của bạn.

Để bắt đầu, thiết lập chế độ overlay (một thủ thuật trong Photoshop nhằm tạo hiệu ứng cho hình ảnh giả lập), lựa chọn tùy chọn Skew (bằng cách vào Edit > Transform > Skew) để xem bản thiết kế trong môi trường không gian 3 chiều. Tùy chọn này rất hữu ích để bạn có cái nhìn thực về sản phẩm thiết kế trong môi trường giả lập, khiến dòng text trên sản phẩm có thể đọc được, và các thành tố trên thiết kế sẽ không bị biến dạng.

Bạn có thể thiết lập mockup trong các công cụ với mức độ từ cơ bản tới phức tạp, nâng cao hơn.

Việc tạo mockup cho sản phẩm thiết kế phụ thuộc rất nhiều vào đối tượng mà bạn đang thiết kế (rằng nó có dạng hình phẳng, có đường cong, nếp gấp,...). Nhưng về cơ bản, tất cả các thiết kế đều bao gồm ba bước: biến đổi đối tượng (transform tool), chế độ blend (blend modes), và smart object.

1. Để sử dụng chế độ smart object trong Photoshop, vào Layer > Smart Objects > Convert to Smart Object. Smart Object cho phép tác động lên đối tượng để thực hiện các thao tác như transform, filter,... mà không làm thay đổi thuộc tính của layer, hình ảnh hay vectơ gốc. Chức năng này giúp bạn giữ lại các đặc tính gốc của ảnh, mà vẫn có thể can thiệp và thiết kế bản mockup cho các hoạt động trong tương lai.

2. Sử dụng công cụ biến đổi đối tượng (transform tool) để điều chỉnh góc độ, điều chỉnh độ nghiêng,... để thuận lợi cho việc chỉnh sửa đối tượng cho bản mockup.

3. Lựa chọn một chế độ blend hợp lý, để điều chỉnh ánh sáng và bố cục hợp lý cho bản mockup (thường bạn nên sử dụng chế độ Multiply hoặc Overlay).

4. Đừng quên những công cụ khác trong Photoshop có thể nâng cao hiệu quả trong thiết kế mockup, như đổ màu, điều chỉnh filter, và một số thủ thuật khác.

Bạn hoàn toàn có thể sử dụng chức năng Action trong Photoshop để đẩy nhanh quá trình làm việc. Với Action, bạn có thể ghi lại các thao tác đã làm trong 1 bức ảnh (tạm gọi là A). Đến các bức ảnh tiếp theo (như ảnh B, C, D), bạn có thể sử dụng các thao tác đã được ghi lại ở bức ảnh A để áp dụng cho ảnh B, C, D.

Vừa tiết kiệm thời gian, lại giúp bạn có được những thao tác chính xác. Điều này hữu ích trong việc giúp bạn thử nghiệm các mockup khác nhau một cách nhanh chóng và hiệu quả.

3.2.3 MySQL

MySQL là hệ quản trị cơ sở dữ liệu tự do nguồn mở phổ biến nhất thế giới và được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng. Vì MySQL là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển, hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh. Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho các ứng dụng có truy cập CSDL trên internet. Người dùng có thể tải về MySQL miễn phí từ trang chủ. MySQL có nhiều phiên bản cho các hệ điều hành khác nhau: phiên bản Win32 cho các hệ điều hànhdòng Windows, linux, Mac OSX, Unix, FreeBSD, NetBSD, Novell NetWare, SGI Irix, Solaris, SunOS,…

MySQL là một trong những ví dụ rất cơ bản về Hệ Quản trị Cơ sở dữ liệu quan hệ sử dụng Ngôn ngữ truy vấn có cấu trúc (SQL).

MySQL được sử dụng cho việc bổ trợ NodeJs, PHP, Perl, và nhiều ngôn ngữ khác, làm nơi lưu trữ những thông tin trên các trang web viết bằng NodeJs, PHP hay Perl,...

MySQL và SQL không giống nhau. Hãy nhớ, MySQL là một trong các phần mềm RDBMS, hoạt động theo mô hình client-server. Nhưng, làm thế nào clietn và server liên lạc với nhau trong môi trường của RDBMS? Chúng sử dụng ngôn ngữ truy vấn có cấu trúc chung – Structured Query Language (SQL). Nếu bắt gặp một thương hiệu nào đó có SQL kèm theo, như PostgreSQL, Microsoft SQL server, chúng thường là những thương hiệu sử dụng syntax của SQL. RDBMS software lại được viết bằng ngôn ngữ lập trình, nhưng luôn sử dụng SQL làm ngôn ngữ chính để tương tác với database. Bản thân MySQL được viết bằng C và C++. Hãy tưởng tượng các nước Nam Mỹ, chúng có vị trí địa lý và lịch sử khác nhau, nhưng đều nói tiếng Tây Ban Nha.

MySQL hoạt động như thế nào?

Hình 6: mySQL

Hình ảnh trên giải thích cấu trúc cơ bản về việc giao tiếp giữa client-server model. Một máy client sẽ liên lạc với máy server trong một mạng nhất định. Mỗi client có thể gửi một request từ giao diện người dùng (Graphical user interface – GUI) trên màn hình, và server sẽ trả về kết quả như mong muốn. Miễn là cả hai hiểu nhau. Cách vận hành chính trong môi trường MySQL cũng như vậy:

MySQL tạo ra bảng để lưu trữ dữ liệu, định nghĩa sự liên quan giữa các bảng đó.

Client sẽ gửi yêu cầu SQL bằng một lệnh đặc biệt trên MySQL.

Ứng dụng trên server sẽ phản hồi thông tin và trả về kết quả trên máy client.

Có vậy thôi đó. Từ máy client, việc chọn GUI MySQL khá quan trọng. GUI càng nhẹ chừng nào, thì các thao tác quản lý data sẽ càng dễ dàng và nhanh chừng đó. MySQL GUI phổ biến nhất MySQL WorkBench, SequelPro, DBVisualizer, và Navicat DB Admin Tool. Một vài trong số chúng miễn phí, một vài bản thương mại, một vài bản chỉ chạy được trên macOS, và một vài ứng dụng chạy được hết trên các hệ điều hành phổ biến. Clients nên chọn GUI tùy vào nhu cầu của họ. Để quản lý web database, ví dụ như một trang web WordPress, rõ ràng nên chọn phpMyAdmin.

3.2.4 Visual studio code

Visual Studio Code là một trình  biên tập mã được phát triển bởi Microsoft dành cho Windows, Linux và macOS. Nó hỗ trợ chức năng debug, đi kèm với Git, có syntax highlighting, tự hoàn thành mã thông minh, snippets, và cải tiến mã nguồn. Nó cũng cho phép tùy chỉnh, do đó, người dùng có thể thay đổi theme, phím tắt, và cá tùy chọn khác. Nó miễn phí và là phần mềm mã nguồn mở, mặc dù gói tải xuống chính thì là có giấy phép.

Visual Studio Code được dựa trên Electron, một nền tảng được sử dụng để triển khai các ứng dụng Node.js máy tính cá nhân chạy trên động cơ bố trí Blink. Mặc dù nó sử dụng nền tảng Electron nhưng phần mềm này không phải là một bản khác của Atom, nó thực ra được dựa trên trình biên tập của Visual Studio Online (tên mã là "Monaco").

Trong cuộc khảo sát vào năm 2018 trên Stack Overflow, Visual Studio Code được xếp hạng là trình biên tập mã phổ biến nhất, với 34.9% của 75398 người trả lời tuyên bố sử dụng nó.

Tính năng : Visual Studio Code là một trình biên tập mã. Nó hỗ trợ nhiều ngôn ngữ và chức năng tùy vào ngôn ngữ sử dụng theo như trong bảng sau. Nhiều chức năng của Visual Studio Code không hiển thị ra trong các menu tùy chọn hay giao diện người dùng. Thay vào đó, chúng được gọi thông qua khung nhập lệnh hoặc qua một tập tin .json (ví dụ như tập tin tùy chỉnh của người dùng). Khung nhập lệnh là một giao diện theo dòng lệnh. Tuy nhiên, nó biến mất khi người dùng nhấp bất cứ nơi nào khác, hoặc nhấn tổ hợp phím để tương tác với một cái gì đó ở bên ngoài đó. Tương tự như vậy với những dòng lệnh tốn nhiều thời gian để xử lý. Khi thực hiện những điều trên thì quá trình xử lý dòng lệnh đó sẽ bị hủy.

Hình 7: Tính năng của Visual Studio Code

Visual Studio Code có thể được mở rộng qua plugin. Điều này giúp bổ sung thêm chức năng cho trình biên tập và hỗ trợ thêm ngôn ngữ. Một tính năng đáng chú ý là khả năng tạo phần mở rộng để phân tích mã, như là các linter và công cụ phân tích, sử dụng Language Server Protocol.

Chương 4 Kết luận và Hướng phát triển4.1 Kết luận4.1.1 Đã đạt được

Hệ thống đã hoạt động và cho phép thực hiện các chức năng như sau:

· Gọi video

· Gọi nhóm

· Kiểm tra lịch sử

4.1.2 Chưa đạt được

· Chưa đảm bảo băng thông cuộc gọi nhóm

· Chưa lưu được video

4.2 Hướng phát triển

· Hoàn thiện dự án trên Website

· Phát triển trên app để thuận lợi cho người dùng với Smart Phone

Đã là sản phẩm đồ án thứ 4, nhóm mong muốn thực hiện một dự án mang tính thiết thực và gần gũi với thực tế. Cho dù sự phát triển mạnh mẽ của smartphone trong đời sống hiện tại nhóm vẫn hướng đến giải pháp web. Với mong muốn tối ưu hóa tiện ích web sản phẩm lần này được xây dựng trên nền tảng web RTC. Các công ty viễn thông gần như mất đi vị trí của mình vì sự đi lên mạnh mẽ của internet. Các cuộc gọi hay tin nhắn được thực hiện bằng mạng xã hội. Người dùng cho rằng họ thấy tiện lợi và tiết kiệm rất nhiều khi sử dụng mạng internet mà không có một giới hạn nào cả. Bên cạnh đó vẫn có một vài ý kiến trái chiều cho rằng việc quá dễ dàng cho truy cập và kết nối liệu có đảm bảo yêu cầu bảo mật nếu như có một vài thông tin nội bộ quan trọng.

Trong quá trình thực hiện dự án nhóm đã đưa ra nhiều giả thiết và tìm hướng giải quyết . Tuy vậy vẫn chưa thể đảm bảo sản phẩm hoàn thiện như yêu cầu đặt ra. Sản phẩm ra đời với kì vọng của nhóm là phát triển đưa vào hoạt động thực tế. Vì vậy cũng đã đề ra một vài chiến lược phát triển về cả chất lượng và quảng cáo.

Hy vọng với sự nỗ lực thực hiện của nhóm sản phẩm sẽ nhận được những nhận xét và góp ý để hoàn thiện hơn nữa.

Trong quá trình nhóm sinh viên thực hiện dự án đã gặp không ít khó khăn từ khâu phát triển ý tưởng cũng như quá trình thực hiện dự án. Tuy vậy nhóm đã nhận được sự giúp đỡ, hướng dẫn từ các thầy cô giáo là giảng viên Khoa Công nghệ thông tin và truyền thông. Đặc biệt là sự dẫn dắt của thầy giáo Nguyễn Đức Hiển giảng viên hướng dẫn. Qua các tuần đều có sự theo dõi và hướng dẫn của thầy trong từng chi tiết sản phẩm.

Nhóm sinh viên xin gửi lời cảm ơn chân thành đến thầy, nhờ sự chỉ đạo sát sao của thầy mà sản phẩm của nhóm đã đạt được nhiều kết quả, phù hợp với nhu cầu thực tế cũng như định hướng đã đặt ra.

1