XÂY DỰNG WEB CHAT VIDEO VỚI CÔNG NGHỆ WEB RTC VÀNODEJS.

ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ĐỒ ÁN CƠ SỞ ĐỀ TÀI: XÂY DỰNG WEB CHAT VIDEO VỚI CÔNG NGHỆ WEB RTC VÀ NODEJS Sinh viên thực : 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Ở ĐỀ 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 Đã sản phẩm đồ án thứ 4, nhóm mong muốn thực dự án mang tính thiết thực gần gũi với thực tế Cho dù phát triển mạnh mẽ smartphone đời sống nhóm 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 xây dựng tảng web RTC Các công ty viễn thơng gần vị trí lên mạnh mẽ internet Các gọi hay tin nhắn thực mạng xã hội Người dùng cho họ thấy tiện lợi tiết kiệm nhiều sử dụng mạng internet mà khơng có giới hạn Bên cạnh có vài ý kiến trái chiều cho việc dễ dàng cho truy cập kết nối liệu có đảm bảo yêu cầu bảo mật có vài thơng tin nội quan trọng Trong q trình thực dự án nhóm đưa nhiều giả thiết tìm hướng giải Tuy chưa thể đảm bảo sản phẩm hoàn thiện yêu cầu đặt Sản phẩm đời với kì vọng nhóm phát triển đưa vào hoạt động thực tế Vì đề vài chiến lược phát triển chất lượng quảng cáo Hy vọng với nỗ lực thực nhóm sản phẩm nhận nhận xét góp ý để hồn thiện LỜI CẢM ƠN Trong q trình nhóm sinh viên thực dự án gặp khơng khó khăn từ khâu phát triển ý tưởng trình thực dự án Tuy nhóm nhận giúp đỡ, hướng dẫn từ thầy cô giáo giảng viên Khoa Công nghệ thông tin truyền thông Đặc biệt dẫn dắt thầy giáo Nguyễn Đức Hiển giảng viên hướng dẫn Qua tuần có theo dõi hướng dẫn thầy 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ờ đạo sát thầy mà sản phẩm nhóm đạt nhiều kết quả, phù hợp với nhu cầu thực tế định hướng đặt NHẬN XÉT (của giảng viên hướng dẫn) ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… MỤC LỤC Chương Giới thiệu .8 1.1 Tổng quan 1.1.1 Bối cảnh thực đề tài .8 1.1.2 Vấn đề cần giải 1.1.3 Đề xuất nội dung thực 1.2 Phương pháp, kết 1.2.1 Sử dụng Công nghệ webRTC 1.2.2 Lập trình Node.js 1.2.3 Kết Chương Nghiên cứu tổng quan 10 2.1 Các phương pháp .10 2.1.1 Sử dụng Công nghệ webRTC 10 2.1.2 Lập trình Node.js .12 2.2 Hạn chế, tồn phương pháp 13 2.2.1 Sử dụng Công nghệ webRTC 13 2.2.2 Sử dụng Node.js 13 2.3 Phân tích thiết kế hệ thống .15 2.3.1 Mô tả toán 15 2.3.2 Phân tích chức 15 2.4 Thiết kế sở liệu .15 Chương Triển khai xây dựng 16 3.1 Quy trình thực 16 3.2 Công cụ thực 16 3.2.1 StarUML 16 3.2.2 Mokup .19 3.2.3 MySQL 20 3.2.4 Visual studio code .21 Chương Kết luận Hướng phát triển 23 4.1 Kết luận 23 4.1.1 Đã đạt .23 4.1.2 Chưa đạt 23 4.2 Hướng phát triển 23 DANH MỤC HÌNH Trang Hình 1: Data tranfer .10 Hình 2: Network Address Translation 11 Hình 3: Direct Media .11 Hình 4: Mơ hình UML 17 Hình 5: Giao diện UML 18 Hình 6: mySQL .20 Hình 7: Tính Visual Studio Code 22 Chương Giới thiệu 1.1 Tổng quan 1.1.1 Bối cảnh thực đề tài Sự trao đổi thông tin tràn lan mạng xã hội, không giới hạn tài khoản nội dung, hình thức ngày đa dạng hóa Nhiều ý kiến cho việc khơng kiểm sốt nội dung không đảm bảo vấn đề an ninh mạng đặc biệt trao đổi mang tính chất nghiêm trọng thuộc yêu cầu công việc Mạng xã hội mở rộng quy mô cách thức, việc tận dụng internet có sẳn từ nhu cầu người dùng đ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 thực gọi thơng thường mà cịn cho phép nhìn thấy hình ảnh Đặc biệt gọi nhóm người dùng dễ dàng biết người nói ai, thấy cảm xúc hành động cử (ngơn ngữ hình thể) Nhu cầu lưu lại lịch sử gọi, ghi âm phiên video gọi máy khách 1.1.2 Vấn đề cần giải Nhu cầu bảo mật thông tin vài trường hợp liên quan đến công việc, đơn giản vấn đề cá nhân tế nhị Băng thông đường truyền gọi nhóm, vấn đề khó chưa kể tảng web việc truyền tải liệu trở nên khó khăn gấp bội lần đường truyền smartphone Cho thấy tối ưu web so với smartphone, cạnh tranh khập khiểng đặt lợi ích người dùng lên hết 1.1.3 Đề xuất nội dung thực Xây dựng chức dựa ca sử dụng, bám sát đề Thiết kế sở 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ủ máy khách 1.2 Phương pháp, kết 1.2.1 Sử dụng Công nghệ webRTC WebRTC ( Web Real-Time Communication) web API phát triển Google, Mozilla, Opera số đơn vị khác nữa, khả hỗ trợ trình duyệt (browser) giao tiếp với 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ợ từ bên ngồi 1.2.2 Lập trình Node.js Node.js tảng chạy mơi trường V8 JavaScript runtime - trình thơng dịch JavaScript cực nhanh chạy trình duyệt Chrome Bình thường bạn tải V8 nhúng vào thứ Node.js làm điều web server 1.2.3 Kết Kết hợp hai phương pháp để đạt hiệu tối ưu cho sản phẩm nhiều nhược điểm chưa thể khắc phục Chương Nghiên cứu tổng quan 2.1 Các phương pháp 2.1.1 Sử dụng Công nghệ webRTC  Cách hoạt động webRTC Trong mơ hình hoạt động web truyền thống mơ hình client-server, điều khiển,security,truyền tải liệu tồn server đảm nhiệm Tuy nhiên mang mơ hình vào ứng dụng thời gian thực ảnh hưởng tới hiệu nhiều Dữ liệu trao đổi client với lượng lớn liên tục Nếu liệu truyền thằng trực tiếp tới server để server truyền tải tới client xảy việc tải không dành cho server mà cho hệ thống mạng Chất lượng dịch vụ QoS(Quality of service) Trong QoS dành cho ứng dụng thời gian thực, có hai tham số quan trọng cần giảm thiểu tối đa deplay (trễ client ) jitter (trễ gói tin) Việc phải truyền tải toàn liệu tới server server tới client làm tăng sổ Do đó, ứng dụng thời gian thực cần phải giải vấn đề mô hình Peer-to-Peer (P2P), Mơ hình chia liệu làm nhánh liệu Signalling Data Stream Các client nhận Signalling điều khiển từ server tự giao tiếp với Data Stream: Hình 1: Data tranfer Một ví dụ mơ hình sau: Anh A Chị B muốn giao tiếp với cần thực : - Anh A gửi thông tin bao gồm thơng tin ứng dụng, địa ip,port tới server khởi động ứng dụng - Anh A thực yêu cầu kết nối với chị B server trả thông tin chị B ,ứng dụng,thiết bị,port,ip, cho Anh A thơng báo cho chị B biết có yêu cầu giao tiếp - Người bắt đầu trò chuyện “trực tiếp” với Mặc dù “trực tiếp” phải trải qua hệ thống vô phức tạp thông qua hệ thống mang, Ta tìm hiểu để có gọi cần  NAT (Network Address Translation) Hình 2: Network Address Translation - IP private IP public người biết nên ko viết nhiều IPprivate địa ip mà kết nối vào router NAT để kết nối mạng cấp IP private để kết nối với router, ipPublic ip mà nhà mạng cung cấp cho router thực tế ta thực kết nối peer sử dụng địa private - Khi máy tính gửi thơng tin tới máy tính internet gói tin gửi từ máy tính đến NAT NAT gửi gói tin với IP public mà khơng phải IP máy tính  STUN (Simple Traversal Of UDP Through NAT): Hình 3: Direct Media Để truyền tải liệu thực chuyển đổi từ IP private>IP public để biết gói tin đến đích ta cần phải biết IPprivate máy ta cần đến STUN STUN server đóng vai trị trung gian giúp cho peer lấy địa peer khác  TURN (Traversal Using NAT Relay): Trong mơ hình OSI, lớp vận chuyển (Transport layer) có hai giao thức tiếng TCP UDP Trong UDP cung cấp khả vận chuyển nhanh TCP lại đảm bảo truyền tin cậy Hầu hết ứng dụng thời gian thực, tín hiệu điều khiển sử dụng TCP liệu truyền UDP Tuy nhiên, UDP chế truyền tin cậy, dễ làm tăng số lượng gói tin bị (Packet lost), TCP ưu tiên sử dụng Ở đây, liệu thay gửi trực tiếp tới peer peer gửi liệu tới TURN server TURN server đóng vai trị trung gian vận chuyển gói tin Điều nâng cao khơng chất lượng dịch vụ ứng dụng mà đảm bảo an tồn thơng tin truyền dẫn Nhưng có hai mặt ko? bất lợi TURN chi phí sử dụng lớn, có lưu lượng băng thơng lớn sử dụng không nào? Nhất với chất lượng full HD hay video HD  ICE (Interactive Communication Establishment) ICE nôm na dễ hiểu giao thức để thiết lập phiên media dựa UDP qua NAT cách nhanh ICE tìm đường tốt để kết nối peer, thử tất khả kết nối cách song song lựa chọn đường hiệu (cướp ngân hàng làm giàu) Đầu tiên cố gắng tạo kết nối cách sử dụng địa thu từ hệ điều hành card mạng thiết bị, khơng thành cơng (có thể thiết bị đằng sau NAT) ICE lấy địa bên thiết bị cách sử dụng máy chủ STUN (nhưng đời có lúc khơng gặp may), khơng thành cơng chuyển lưu lượng mạng qua máy chủ chuyển tiếp TURN Để dễ nhớ ta nghĩ ICE xài STUN xong khơng xài TURN 2.1.2 Lập trình Node.js  Node.js JavaScript ngơn ngữ lập trình phía client chạy trình duyệt, phải khơng? Nhưng điều khơng cịn chút Node.js cách để chạy JavaScript server; cịn Trong mơi trường server điển hình LAMP (Linux-Apache-MySQL-PHP), bạn có web server Apache NGINX nằm dưới, với PHP chạy Mỗi kết nối tới server sinh thread mới, điều khiến ứng dụng nhanh chóng trở nên chậm chạp tải - cách để hỗ trợ nhiều người dùng cách bổ sung thêm nhiều máy chủ Đơn giản khơng có khả mở rộng tốt Nhưng với Node.js điều khơng phải vấn đề Khơng có máy chủ Apache lắng nghe kết nối tới trả mã trạng thái HTTP - bạn phải tự quản lý kiến trúc lõi máy chủ May mắn thay, có số module giúp thực điều dễ dàng hơn, cơng việc gây cho bạn chút khó khăn bắt đầu Tuy nhiên, kết thu ứng dụng web có tốc độ thực thi cao JavaScript ngôn ngữ dựa kiện, thứ xảy server tạo kiện non-blocking Mỗi kết nối sinh kiện; liệu nhận từ upload form sinh kiện data-received; việc truy vấn 10 liệu từ database sinh kiện Trong thực tế, điều có nghĩa trang web Node.js chẳng bị khóa (lock up) hỗ trợ cho hàng chục nghìn user truy cập lúc Node.js đóng vai trị server - Apache - thơng dịch mã ứng dụng chạy Giống Apache, có nhiều module (thư viện) cài đặt để bổ sung thêm đặc trưng chức - lưu trữ liệu, hỗ trợ file Zip, đăng nhập Facebook, cổng toán Dĩ nhiên, khơng có nhiều thư viện PHP, Node.js giai đoạn ban đầu có cộng đồng mạnh mẽ đằng sau Một khái niệm cốt lõi Node.js function bất đồng (asynchronous functions) - thứ chạy tảng Với hầu hết ngôn ngữ kịch máy chủ, chương trình phải đợi function thực thi xong trước tiếp tục chạy tiếp Với Node.js, bạn xác định function chạy để hoàn thành tác vụ đó, phần cịn lại ứng dụng chạy đồng thời Nó chủ đề phức tạp mà không vào sâu viết này, đặc trưng tiêu biểu Node.js, việc nắm vững điều quan trọng Tuy nhiên tơi đưa ví dụ Hello World để mang lại cho bạn nhìn thoáng qua vài khái niệm  Tại lại sử dụng Node.js? Đầu tiên ưu điểm tốc độ thực thi khả mở rộng Node.js có tốc độ nhanh Đó yêu cầu quan trọng bạn startup cố gắng tạo sản phẩm lớn muốn đảm bảo mở rộng nhanh chóng, đáp ứng lượng lớn người dùng trang web bạn phát triển lên Node.js xử lý hàng ngàn kết nối đồng thời PHP có nước sụp đổ Bên cạnh lợi ích tốc độ thực thi khả mở rộng, bạn biết chút JavaScript, lại phải phiền toái để học thêm ngơn ngữ lập trình hồn tồn PHP? Và sau bạn có phấn khích học mẻ gần chưa khám phá Bạn nhớ cảm giác mà xuất sau trở thành phổ biến khắp nơi mà bạn hối tiếc không học sớm hơn, mãi người đến sau? Đừng phạm phải sai lầm lần Node.js ngày trở nên lớn mạnh 2.2 Hạn chế, tồn phương pháp 2.2.1 Sử dụng Công nghệ webRTC 11 2.2.2 Sử dụng Node.js Giống hầu hết công nghệ mới, việc triển khai Node.js host điều dễ dàng Nếu bạn có web hosting xài chung, bạn khơng thể đơn giản tải lên ứng dụng Node.js mong chờ hoạt động tốt VPS dedicated server lựa chọn tốt - bạn cài đặt Node.js chúng Thậm chí dễ sử dụng dịch vụ có khả mở rộng Heroku, bạn hồn tồn an tâm để phát triển trang web - bạn cần trả tiền cần thêm nhiều tài nguyên Mặt khác, dễ cài đặt Node.js chạy cục máy tính bạn sử dụng hệ điều hành Windows, Mac Linux bắt đầu phát triển ứng dụng - việc tải phiên Node.js tương ứng Một điều quan trọng nên ý Node.js không đơn giản thay cho Apache - ứng dụng web tồn khơng có khả tương thích, bạn làm việc hiệu với ứng dụng phát triển từ đầu (mặc dù có nhiều framework ngồi để giúp đỡ bạn với nhiều đặc trưng phổ biến) Một nhược điểm lớn khác Node.js giai đoạn phát triển ban đầu, điều có nghĩa số đặc trưng thay đổi trình phát triển Trong thực tế, bạn đọc tài liệu kèm, bao gồm số ổn định (stability index), số cho thấy mức độ rủi ro bạn sử dụng đặc trưng có 12 2.3 Phân tích thiết kế hệ thống 2.3.1 Mơ tả toán Web chat cho phép tạo tài khoản dựa số điện thoại đăng kí Mỗi tài khoản sau đăng kí có giao diện hoạt động Với tài khoản người dùng cho phép thực gọi video cá nhân, gọi nhóm, tạo kiện Có tài khoản admin hệ thống cung cấp quản lí liệu cần lấy lại thơng tin người dùng cho phép kiện diễn hệ thống 2.3.2 Phân tích chức Chức 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 hoạt động +Tạo kiện theo chủ đề Chức 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 kiện hoạt động 2.4 Thiết kế sở liệu 13 Chương Triển khai xây dựng 3.1 Quy trình thực - 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 phương pháp triển khai Thiết lập môi trường Công cụ: WebRTC, NodeJS Phân tích thiết kế hệ thống, tối ưu hóa chức Thiết kế giao diện Xây dựng thiết kế sở liệu Lập trình sử dụng vài mã nguồn mở thiết kế riêng cho hệ thống Vận hành Kiểm thử: dù kiểm tra qua công đoạn, phải tiến hành kiểm thử tổng quan hệ thống 3.2 Công cụ thực 3.2.1 StarUML StarUML công cụ UML MKLab Phần mềm cấp phép theo phiên sửa đổi GNU GPL năm 2014, phiên viết lại 2.0.0 phát hành để thử nghiệm beta theo giấy phép độc quyền Sau bị bỏ rơi thời gian, dự án hồi sinh để chuyển từ Delphi sang Java / Eclipse sau dừng lại Vào năm 2014, phiên viết lại phát hành dạng phần mềm độc quyền Tuy nhiên, cộng đồng phiên nguồn mở hoạt động nhiều chủ đề thảo luận diễn đàn Mục tiêu nêu dự án thay ứng dụng thương mại lớn Rational Rose Borland Together StarUML hỗ trợ hầu hết loại sơ đồ định UML 2.0 Nó thiếu sơ đồ tổng quan thời gian tương tác StarUML viết Delphi, lý khiến bị bỏ rơi thời gian dài Kể từ tháng 12 năm 2005, StarUML không cập nhật nữa, số mô-đun bên cập nhật Hiện phiên StarUML tác giả ban đầu có sẵn để tải xuống phần xử lý "StarUML 2" Bản beta cơng khai có sẵn, khơng theo giấy phép GPL Giá cuối loại giấy phép chưa biết Phiên viết lại hoàn toàn từ đầu bao gồm nhiều tính năng: hỗ trợ cho tiện ích mở rộng, khả tương thích OS X giao diện người dùng đồ họa Đặc trưng Khi bạn bắt đầu dự án mới, StarUML đề xuất cách tiếp cận bạn muốn sử dụng: + (Krutchen), thành phần Rational, UML (từ sách Cheesman Daniels), mặc định trống Tùy thuộc vào cách tiếp cận, hồ sơ / khung bao gồm tải Nếu bạn không theo cách tiếp cận cụ thể, lựa chọn 14 "trống" sử dụng Mặc dù dự án quản lý dạng tệp, thuận tiện chia thành nhiều đơn vị quản lý chúng riêng biệt nhiều nhà phát triển làm việc StarUML phân biệt khái niệm rõ ràng mơ hình, khung nhìn sơ đồ Mơ hình yếu tố chứa thơng tin cho mơ hình phần mềm Chế độ xem biểu trực quan thơng tin có mơ hình Sơ đồ tập hợp yếu tố chế độ xem đại diện cho suy nghĩ thiết kế cụ thể người dùng Hình 4: Mơ hình UML StarUML xây dựng công cụ mô-đun mở Nó cung cấp khung để mở rộng chức cơng cụ Nó thiết kế phép truy cập vào tất chức mơ hình / mơ hình meta cơng cụ thơng qua COM Tự động hóa, cung cấp phần mở rộng mục tùy chọn menu Ngoài ra, người dùng tạo phương pháp khung riêng theo phương pháp họ Công cụ tích hợp với cơng cụ bên StarUML hỗ trợ 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 15 Hình 5: Giao diện UML Giao diện người dùng trực quan Ở phía bên phải, cửa sổ cho phép điều hướng nhanh chóng tất nội dung dự án, thơng qua mơ hình chế độ xem sơ đồ Nhiều sơ đồ mở lúc tab cho phép chuyển đổi nhanh chế độ xem Cửa sổ bên phải phía cho phép ghi lại sơ đồ tại, văn túy đính kèm tài liệu bên ngồi Trong q trình chỉnh sửa sơ đồ, "trình hướng dẫn" đặt xung quanh đối tượng cung cấp cho bạn phím tắt nhanh đến tác vụ liên kết với hoạt động bạn, thêm thuộc tính bạn tạo lớp chẳng hạn Nhấp chuột phải vào chuột mang đến toàn hoạt động theo ý bạn StarUML có tính xác minh mơ hình Bạn xuất sơ đồ định dạng khác (jpg, bmp, wmf) Nó hỗ trợ cách tiếp cận mẫu nhập tệp Rational Rose Trình tạo StarUML mơ-đun tảng để tạo tạo phẩm khác (như Microsoft Word, Excel, PowerPoint tạo phẩm dựa văn bản) theo mẫu tùy thuộc vào thành phần mơ hình UML StarUML Người dùng xác định mẫu riêng họ áp dụng nhiều loại mẫu khác cho mơ hình UML, người dùng nhận nhiều tạo phẩm khác cách tự động, dễ dàng nhanh chóng Công cụ hỗ trợ tạo mã kỹ thuật đảo ngược cho Java, C # C ++ Phần kết luận 16 StarUML có nhiều tính mạnh mẽ chắn không công cụ lập biểu đồ "đơn giản" Với hỗ trợ MDA (Model Driven Architecture), nhắm đến người sử dụng UML theo cách chuyên sâu với số mục tiêu tạo mã đơn giản vẽ sơ đồ cho yêu cầu tài liệu Tuy nhiên, sử dụng StarUML công cụ lập biểu đồ hoạt động tốt, đặc biệt Windows cơng cụ xây dựng với Delphi thực thi nhanh công cụ dựa Java 3.2.2 Mokup  Lựa chọn công cụ phù hợp để tạo mockup Có nhiều cách để tạo mockup, từ công cụ phần mềm chuyên dụng Công cụ phổ biến Photoshop, phần mềm giúp bạn tạo hình ảnh giả lập miêu tả sản phẩm thiết kế bạn Để bắt đầu, thiết lập chế độ overlay (một thủ thuật 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 thiết kế môi trường khơng gian chiều Tùy chọn hữu ích để bạn có nhìn thực sản phẩm thiết kế mơi trường giả lập, khiến dịng text sản phẩm đọc được, thành tố thiết kế khơng bị biến dạng Bạn thiết lập mockup công cụ với mức độ từ tới phức tạp, nâng cao Việc tạo mockup cho sản phẩm thiết kế phụ thuộc nhiều vào đối tượng mà bạn thiết kế (rằng có dạng hình phẳng, có đường cong, nếp gấp, ) Nhưng bản, tất thiết kế bao gồm ba bước: biến đổi đối tượng (transform tool), chế độ blend (blend modes), smart object Để sử dụng chế độ smart object 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 thao tác transform, filter, mà khơng làm thay đổi thuộc tính layer, hình ảnh hay vectơ gốc Chức giúp bạn giữ lại đặc tính gốc ảnh, mà can thiệp thiết kế mockup cho hoạt động tương lai 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 mockup Lựa chọn chế độ blend hợp lý, để điều chỉnh ánh sáng bố cục hợp lý cho mockup (thường bạn nên sử dụng chế độ Multiply Overlay) Đừng qn cơng cụ khác Photoshop nâng cao hiệu thiết kế mockup, đổ màu, điều chỉnh filter, số thủ thuật khác Bạn hồn tồn sử dụng chức Action Photoshop để đẩy nhanh trình làm việc Với Action, bạn ghi lại thao tác làm ảnh (tạm gọi A) Đến ảnh (như ảnh B, C, D), bạn sử dụng thao tác ghi lại ảnh A để áp dụng cho ảnh B, C, D 17 Vừa tiết kiệm thời gian, lại giúp bạn có thao tác xác Điều hữu ích việc giúp bạn thử nghiệm mockup khác cách nhanh chóng hiệu 3.2.3 MySQL MySQL hệ quản trị sở liệu tự nguồn mở phổ biến giới nhà phát triển ưa chuộng trình phát triển ứng dụng Vì MySQL sở liệu tốc độ cao, ổn định dễ sử dụng, có tính khả chuyển, hoạt động nhiều hệ điều hành cung cấp hệ thống lớn hàm tiện ích mạnh Với tốc độ tính bảo mật cao, MySQL thích hợp cho ứng dụng có truy cập CSDL internet Người dùng tải MySQL miễn phí từ trang chủ MySQL có nhiều phiên cho hệ điều hành khác nhau: phiên Win32 cho hệ điều hànhdòng Windows, linux, Mac OSX, Unix, FreeBSD, NetBSD, Novell NetWare, SGI Irix, Solaris, SunOS,… MySQL ví dụ Hệ Quản trị Cơ sở liệu quan hệ sử dụng Ngơn ngữ truy vấn có cấu trúc (SQL) MySQL sử dụng cho việc bổ trợ NodeJs, PHP, Perl, nhiều ngôn ngữ khác, làm nơi lưu trữ thông tin trang web viết NodeJs, PHP hay Perl, MySQL SQL không giống Hãy nhớ, MySQL phần mềm RDBMS, hoạt động theo mơ hình client-server Nhưng, làm clietn server liên lạc với môi trường 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 thương hiệu có SQL kèm theo, PostgreSQL, Microsoft SQL server, chúng thường thương hiệu sử dụng syntax SQL RDBMS software lại viết ngơn ngữ lập trình, ln sử dụng SQL làm ngơn ngữ để tương tác với database Bản thân MySQL viết C C++ Hãy tưởng tượng nước Nam Mỹ, chúng có vị trí địa lý lịch sử khác nhau, nói tiếng Tây Ban Nha MySQL hoạt động nào? Hình 6: mySQL Hình ảnh giải thích cấu trúc việc giao tiếp client-server model Một máy client liên lạc với máy server mạng định Mỗi client gửi request từ giao diện người dùng (Graphical user interface – GUI) hình, server trả kết mong muốn Miễn hai hiểu Cách vận hành mơi trường MySQL vậy: 18 MySQL tạo bảng để lưu trữ liệu, định nghĩa liên quan bảng Client gửi yêu cầu SQL lệnh đặc biệt MySQL Ứng dụng server phản hồi thông tin trả kết máy client Có thơi Từ máy client, việc chọn GUI MySQL quan trọng GUI nhẹ chừng nào, thao tác quản lý data dễ dàng nhanh chừng MySQL GUI phổ biến MySQL WorkBench, SequelPro, DBVisualizer, Navicat DB Admin Tool Một vài số chúng miễn phí, vài thương mại, vài chạy macOS, vài ứng dụng chạy hết hệ điều hành phổ biến Clients nên chọn GUI tùy vào nhu cầu họ Để quản lý web database, ví dụ trang web WordPress, rõ ràng nên chọn phpMyAdmin 3.2.4 Visual studio code Visual Studio Code trình biên tập mã phát triển Microsoft dành cho Windows, Linux macOS Nó hỗ trợ chức debug, kèm với Git, có syntax highlighting, tự hồn thành mã thơng minh, snippets, cải tiến mã nguồn Nó cho phép tùy chỉnh, đó, người dùng thay đổi theme, phím tắt, cá tùy chọn khác Nó miễn phí phần mềm mã nguồn mở, gói tải xuống có giấy phép Visual Studio Code dựa Electron, tảng sử dụng để triển khai ứng dụng Node.js máy tính cá nhân chạy động bố trí Blink Mặc dù sử dụng tảng Electron phần mềm khác Atom, thực dựa trình biên tập Visual Studio Online (tên mã "Monaco") Trong khảo sát vào năm 2018 Stack Overflow, Visual Studio Code xếp hạng trình biên tập mã phổ biến nhất, với 34.9% 75398 người trả lời tun bố sử dụng Tính : Visual Studio Code trình biên tập mã Nó hỗ trợ nhiều ngơn ngữ chức tùy vào ngôn ngữ sử dụng theo bảng sau Nhiều chức Visual Studio Code không hiển thị menu tùy chọn hay giao diện người dùng Thay vào đó, chúng gọi thơng qua khung nhập lệnh qua tập tin json (ví dụ tập tin tùy chỉnh người dùng) Khung nhập lệnh giao diện theo dòng lệnh Tuy nhiên, biến người dùng nhấp nơi khác, nhấn tổ hợp phím để tương tác với bên ngồi Tương tự với dòng lệnh tốn nhiều thời gian để xử lý Khi thực điều q trình xử lý dịng lệnh bị hủy 19 Hình 7: Tính Visual Studio Code Visual Studio Code mở rộng qua plugin Điều giúp bổ sung thêm chức cho trình biên tập hỗ trợ thêm ngơn ngữ Một tính đáng ý khả tạo phần mở rộng để phân tích mã, linter cơng cụ phân tích, sử dụng Language Server Protocol 20 Chương Kết luận Hướng phát triển 4.1 Kết luận 4.1.1 Đã đạt Hệ thống hoạt động cho phép thực chức sau: - Gọi video - Gọi nhóm - Kiểm tra lịch sử 4.1.2 Chưa đạt - Chưa đảm bảo băng thơng gọi nhóm - Chưa lưu video 4.2 Hướng phát triển - Hoàn thiện dự án Website Phát triển app để thuận lợi cho người dùng với Smart Phone 21