Đang tải... (xem toàn văn)
Single Page Application (hay còn được biết đến với cái tên viết tắt: SPA) là một ứng dụng web hoặc trang web tương tác với người dùng bằng cách tự động viết lại hiện trang web với dữ liệu mới từ máy chủ web , thay vì phương pháp mặc định của một trình duyệt web tải toàn bộ trang mới. Mục đích là chuyển nhanh hơn mà làm cho trang web cảm giác giống như một bản ứng dụng .Trong một SPA, việc làm mới trang không bao giờ xảy ra; thay vào đó, tất cả mã HTML , JavaScript và CSS cần thiết hoặc được trình duyệt truy xuất với một lần tải trang, hoặc các tài nguyên thích hợp được tải động và thêm vào trang khi cần thiết, thường là để đáp ứng các hành động của người dùng.Single Page Application còn được tìm thấy trong một kiểu lập trình ứng dụng web rất thân thiện với thiết bị di động và người dùng sẽ không cần phải load lại trang trong quá trình sử dụng ngay trên trình duyệt. Nếu bạn đang sử dụng Facebook, Youtube, Google Search, Gmail, Twitter,… Tất cả những ứng dụng này đều là những ví dụ điển hình cho Single Page Application. Với Single Page Application, người dùng sẽ có trải nghiệm tối ưu nhất, tận hưởng môi trường một cách tự nhiên chỉ việc “lướt lướt” trên 1 trang duy nhất mà không cần phải load lại trang.
TỔNG LIÊN ĐOÀN LAO ĐỘNG VIỆT NAM TRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNG KHOA CÔNG NGHỆ THÔNG TIN ĐỒ ÁN GIỮA KỲ LẬP TRÌNH WEB VÀ ỨNG DỤNG Single Page Application Người hướng dẫn : GV MAI VĂN MẠNH Người thực : LẠC MINH LONG – 51900758 TRẦN BẢO KHA-51900751 ĐỒN THÁI MINH HỒNG-51900335 Khố THÀNH PHỐ HỒ CHÍ MINH, NĂM 2021 : K23 TỔNG LIÊN ĐOÀN LAO ĐỘNG VIỆT NAM TRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNG KHOA CÔNG NGHỆ THƠNG TIN ĐỒ ÁN GIỮA KỲ LẬP TRÌNH WEB VÀ ỨNG DỤNG Single Page Application Người hướng dẫn : GV MAI VĂN MẠNH Người thực : LẠC MINH LONG – 51900758 TRẦN BẢO KHA-51900751 ĐOÀN THÁI MINH HOÀNG-51900335 Khố : K23 THÀNH PHỐ HỒ CHÍ MINH, NĂM 2021 LỜI CẢM ƠN Trước tiên, em xin gửi lời chân thành lòng biết ơn sâu sắc đến Thầy Mai Văn Mạnh Người thầy hỗ trợ hướng dẫn tận tình cho em suốt trình nghiên cứu hồn thành đồ án kì Bên cạnh đó, em xin gửi lời cảm ơn đến khoa Công Nghệ Thông Tin trường Đại học Tôn Đức Thắng tạo điều kiện cho em học tập nghiên cứu môn học Khoa sẵn sàng chia sẻ đem tới kiến thức bổ ích cho em kinh nghiệm tra cứu, tham khảo tài liệu Điều giúp ích khơng cho việc thực hồn thành đề tài nghiên cứu mà cịn giúp ích cho việc học tập, rèn luyện trình thực hành trường Đại học Tơn Đức Thắng nói chung Cuối cùng, sau khoảng thời gian học tập lớp, em hoàn tất đề tài nghiên cứu nhờ vào hướng dẫn, giúp đỡ kiến thức mà quý thầy cô mang đến Do giới hạn mặt kiến thức khả lý luận nên em nhiều thiếu sót hạn chế, kính mong dẫn đóng góp từ q thầy giáo để nghiên cứu em hoàn thiện Hơn nữa, nhờ lời góp ý từ thầy bạn bè, em hoàn thành tốt nghiên cứu tương lai Em mong quý thầy cô bạn bè – người quan tâm hỗ trợ – tràn đầy sức khỏe bình an EM XIN CHÂN THÀNH CẢM ƠN ! ĐỒ ÁN ĐƯỢC HOÀN THÀNH TẠI TRƯỜNG ĐẠI HỌC TƠN ĐỨC THẮNG Tơi xin cam đoan sản phẩm đồ án riêng hướng dẫn Thầy Mai Văn Mạnh Các nội dung nghiên cứu, kết đề tài trung thực chưa công bố hình thức trước Những số liệu bảng biểu phục vụ cho việc phân tích, nhận xét, đánh giá tác giả thu thập từ nguồn khác có ghi rõ phần tài liệu tham khảo Ngồi ra, đồ án cịn sử dụng số nhận xét, đánh số liệu tác giả khác, quan tổ chức khác có trích dẫn thích nguồn gốc Nếu phát có gian lận tơi xin hồn tồn chịu trách nhiệm nội dung đồ án Trường đại học Tơn Đức Thắng không liên quan đến vi phạm tác quyền, quyền tơi gây q trình thực ( có ) TP Hồ Chí Minh, ngày tháng năm 2021 Tác giả ( ký tên ghi rõ họ tên ) Lạc Minh Long Trần Bảo Kha Đoàn Thái Minh Hoàng PHẦN XÁC NHẬN VÀ ĐÁNH GIÁ CỦA GIẢNG VIÊN Phần xác nhận giảng viên hướng dẫn _ _ _ _ _ _ Tp Hồ Chí Minh, ngày tháng năm 2021 ( kí ghi họ tên ) Phần đánh giá giảng viên chấm _ _ _ _ _ _ Tp Hồ Chí Minh, ngày tháng ( kí ghi họ tên ) năm 2021 MỤC LỤC SINGLE PAGE APPLICATION 1.1 Tổng quan sơ lược Single Page Application 1.2 Sự đời Single Page Application 1.3 Cấu Trúc Nguyên Lý hoạt động SPA 1.4 Khác Biệt SPA Web truyền thống 1.5 Ưu điểm Single Page Application 1.6 Bất lợi Single Page Application 2.1 Phần Demo 12 TÀI LIỆU THAM KHẢO 22 Single Page Application 1.1 Tổng quan sơ lược SPA Single Page Application (hay biết đến với tên viết tắt: SPA) ứng dụng web trang web tương tác với người dùng cách tự động viết lại trang web với liệu từ máy chủ web , thay phương pháp mặc định trình duyệt web tải tồn trang Mục đích chuyển nhanh mà làm cho trang web cảm giác giống ứng dụng Trong SPA, việc làm trang không xảy ra; thay vào đó, tất mã HTML , JavaScript CSS cần thiết trình duyệt truy xuất với lần tải trang, tài nguyên thích hợp tải động thêm vào trang cần thiết, thường để đáp ứng hành động người dùng Single Page Application tìm thấy kiểu lập trình ứng dụng web thân thiện với thiết bị di động người dùng không cần phải load lại trang trình sử dụng trình duyệt Nếu bạn sử dụng Facebook, Youtube, Google Search, Gmail, Twitter,… Tất ứng dụng ví dụ điển hình cho Single Page Application Với Single Page Application, người dùng có trải nghiệm tối ưu nhất, tận hưởng môi trường cách tự nhiên việc “lướt lướt” trang mà không cần phải load lại trang 1.2 Sự đời Single Page Application Trước đây, chưa có Single Page Application, việc lập trình website sử dụng mơ hình MVC Phương thức hoạt động tập trung phía server: client gửi request cho server, server xử lý response lại client Thông thường, server trả lại kết trang web hoàn chỉnh với HTML, CSS JavaScript Trong đó, client gần khơng phải làm Thao tác phản hồi đầy đủ server gọi SSR – Server Side Rendering Đến giai đoạn tiếp theo, website ngày phức tạp yêu cầu người dùng cao Điều buộc nhà phát triển phải tập trung vào trải nghiệm người dùng SSR khơng cịn đáp ứng yêu cầu trước Nếu muốn tối ưu hóa trải nghiệm người dùng, ứng dụng/ website buộc phải giảm tải bớt công việc server tập trung xử lý client để gia tăng tốc độ, gia tăng trải nghiệm jQuery xuất “cứu tinh” để hỗ trợ cho “việc người làm” server client Tuy nhiên, giai đoạn này, jQuery cịn thơ sơ chưa đáp ứng thao tác xử lý phức tạp client Và Single Page Application đời hệ tất yếu cho việc lập trình web nhằm để gia tăng thao tác xử lý client, giảm tải cho server Single Page Application công nghệ khiến công việc lập trình web trở nên phức tạp phân tách frontend backend Ngồi ra, lập trình viên frontend phải quan tâm đến cấu trúc dự án, mơ hình thiết kế thay tập trung UX, UI trước 1.3 Cấu trúc hoạt đơng SPA ngun lý hoạt động Có nhiều nội dung lặp lại đa số website Một số thành phần giữ nguyên người dùng điều hướng web (header, footer, logo, navigation bar…), số nằm vị trí cố định (filter bar, banner), cịn nhiều layout template lặp lại (blog, self-service, thiết lập google mail) SPA sử dụng hiệu lặp lại nhờ vào việc linh động viết lại thành phần cần thiết (có thay đổi) trang thay tải lại tồn trang từ Server, SPA loại bỏ ngắt quãng người dùng trải nghiệm trang nối tiếp nhau, tạo cho người dùng cảm giác sử dụng ứng dụng desktop 1.4 Khác biệt hoạt động SPA Web truyền thống Có điểm lớn tạo nên khác biệt cách hoạt động web SPA so với web truyền thống là: ● Web SPA có backend frontend rõ ràng o Website code theo kiểu truyền thống cần dự án, môt dự án lớn phức tạp, xử lý cồng kềnh Website code theo kiểu SPA cần dự án: dự án cho backend dự án cho frontend tách bạch o Việc trao đổi liệu backend frontend thường qua Restful API, định dạng liệu thường JSON o Cách hoạt động frontend backend website kiểu SPA hình dung sau: o Khi truy cập vào trang web, frontend tiếp nhận request Nếu lập trình truyền thống cho backend thực routing, web SPA cho thực frontend o Sau tiếp nhận request, frontend phân tích người dùng web muốn sử dụng tính nào, cần liệu gì, từ gửi request tới backend, yêu cầu backend trả liệu mong muốn o Backend trả liệu frontend (thường dạng json), frontend dựa vào liệu để render nội dung trang web hoàn chỉnh (Thao tác gọi Client Side Rendering) ● Web SPA đẩy mạnh xử lý frontend o Với web SPA, frontend đảm nhiệm hoàn toàn việc render giao diện xử lý thay đổi giao diện, đó, backend làm theo yêu cầu trả liệu cần thiết cho frontend o Frontend web SPA thường framework thư viện SPA Những framework hay thư viện code JavaScript, giúp developer dễ dàng phát triển SPA o Để xử lý yêu cầu phức tạp frontend, framework SPA hoạt động theo kiến trúc cụ thể, MVC (Angular), MV-VM (VueJS, ReactJS),… Nhìn chung, code SPA framework chuyên SPA đơn giản nhiều so với việc code jQuery kiến trúc khác thường thấy 1.5 Ưu điểm Single Page Application: Load lần cho file HTML, CSS, JS • Đối với SPA, sau lần tải đầu tiên, Server không gửi thêm HTML cho client client download tất từ đầu • Server gửi cấu trúc trang browser bạn render giao diện người dùng (UI) cấu trúc ấy.Sau đó, bạn click vào đâu, SPA gửi yêu cầu liệu cấu trúc, Server gửi lại nguyên liệu thô cần thiết để browser bạn dùng chúng việc render vùng giao diện cần cập nhật mà khơng phải làm lại trang • Khả thay đổi nhanh chóng thành phần bên giúp cho SPA hiệu cho trang có tính điều hướng cao sử dụng lặp lại template Hạn chế câu truy vấn đến Server • Bởi Server khơng cần phải tốn thời gian hiệu để vẽ lên tồn bơ trang, SPA giảm tải ảnh hưởng toàn Server – đồng nghĩa với việc bạn tiết kiệm chi phí dùng Server cho lưu lượng yêu cầu Tăng trải nghiệm người dùng • Ngày nhiều tính xây dựng dịch vụ mang tính module (kiến trúc microservice) cập nhật cách độc lập, trở nên dễ dàng để thử nghiệm chúng hiển thị sử dụng • Mặc dù nhiều người muốn phát triển ngơn ngữ lập trình định (rất nhiều SPA framework sử dụng javascript) nhờ có API, SPA bạn dựng ngơn ngữ làm việc tốt dịch vụ từ backend phát triển nhiều ngôn ngữ lập trình khác Giảm thiểu thời gian phát triển chi phí hạ tầng • Angular, React, Vue, framework phổ biến lựa chọn để tạo SPA Ngoài việc chứa kiến trúc để xây dựng website theo vòng đời SPA, framework cung cấp component thiết yếu tích hợp sẵn component nhà phát triển khác đóng góp cộng đồng Nếu bạn nghĩ giống xây ngơi nhà, bạn trộn đất sét, làm khô gạch, khai thác tạo khn thép cho - bạn sử dụng gạch đường ống mà người khác thiết kế tập trung thời gian vào thứ tạo nên ngơi nhà bạn độc Nhờ vào tính kế thừa mà dự án SPA giảm thời gian phát triển, chi phí hạ tầng có khả nâng cấp dài hạn 1.6 Bất lợi Single Page Application: Content độ chi tiết cao 10 • Ví dụ điển hình nội dung Facebook Bạn thấy rằng, viết Facebook hỗ trợ nội dung hình ảnh, nội dung chữ thơng thường Nếu bạn muốn có ký tự đặc biệt hay chia heading viết này, bạn cần phải sử dụng bên thứ để can thiệp.Và tại, Facebook hỗ trợ bạn thực in đậm, in nghiêng, chia heading,… thao tác khác máy tính Khơng phù hợp với lập trình viên thiếu kinh nghiệm frontend • Là lập trình viên thiên xử lý backend, bạn chống khơng có kinh nghiệm frontend HTML, JavaScript, CSS, ajax,… triển khai Single Page Application.Vì vậy, bạn buộc phải học thêm frontend để làm việc Gia tăng khối lượng cơng việc • Như đề cập viết, dự án website hướng đến Single Page Application phải tách thành dự án backend frontend riêng biệt Điều khiến doanh nghiệp nhỏ với nhân lực trở nên “bất lực” khối lượng cơng việc tăng gấp đơi so với bình thường 2.1 Phần demo Chủ đề nhóm lựa chọn là: Giới thiệu tuyển nhân công ty Ritatech – Công ty chuyên đầu tư phát triển công nghệ Nhóm sử dụng angular để xây dựng single 11 page application Cách hoạt động page Để chạy web, ta cần tải cài đặt trước Node.js Angular CLI Sau cài đặt, ta mở command line nhập câu lệnh trỏ tới thư mục chứa project thực Angular, sau nhập sau để bắt đầu chạy Angular project này: 12 Lúc Angular chạy, tiến hành chạy trang web qua đường dẫn http://localhost:4200/crisis-list Angular cung cấp cách hoạt động khác so với việc tự tạo trang web SPA JavaScript thông thường, ban đầu rối phức tạp khâu cài đặt setup, nhiên Angular công cụ thực tốt tiện dụng để tạo web SPA Cách hoạt động SPA tương đối dễ hiểu, có trang 13 index.html sau: Tại trang này, ta setup thư viện bootstrap để dùng cho toàn trang khác dự án Trang trỏ tới file index approot, selector để trỏ tới trang app.component.html, tương tự selector đối tượng Angular thể file xxx.component.ts Quay trở lại với trang app.component.html, mục đích trang giống navigation đầu trang web, có nhiệm vụ trỏ tới lựa chọn để hiển thị trang sau cho người dùng mà khơng cần phải load lại (SPA) 14 Đoạn code hiển thị sau: Và phía nội dung mà trang trỏ tới tiếp theo, project heroes-list crisis-list: Trang chủ: 15 Trang để lại thông tin liên lạc cho doanh nghiệp: Ngồi cách trỏ selector trên, ta cịn gán trực tiếp link dẫn tới trang khác cách trực tiếp giao diện web Ví dụ trang crisis-list (Home), ta tiếp tục trỏ tới trang khác intro, cardone, cardtwo cardthree, trang để hiển thị giao diện khác web, gắn tương ứng với nút hiển thị trang Trang thông tin doanh nghiệp: 16 Trang giới thiệu nhân sự: Trang sứ mệnh doanh nghiệp: 17 Trang nguồn lực doanh nghiệp: 18 Mỗi trang có folder chứa file html, css ts riêng trang, nghĩa ta tùy biến giao diện trang Tổng kết lại, chế hoạt động web SPA tạo Angular đơn giản Chúng ta khởi đầu với trang index, sau trang khác web có folder riêng để tùy biến, trang có selector khác nhau, hỗ trợ hiệu việc trỏ từ trang khác tới, trỏ tới link, tất điều khiến việc làm web SPA trở nên đơn giản nhiều dễ dàng việc tạo thêm trang mới, phát triển project Tuy nhiên bên cạnh mạnh mẽ hỗ trợ nhiều mình, Angular chứa nhiều file nhóm khơng thể dùng hết tính dự án quy mơ này, điều khiến Angular thực hợp project có quy mơ lớn hơn, lúc framework thực có hội biểu diễn hết lực 19 20 TÀI LIỆU THAM KHẢO [1] https://www.stdio.vn/javascript/spa-single-page-application-la-gi-3jnH51 [2] https://wiki.tino.org/single-page-application-la-gi/ [3] https://thietkewebaio.com/single-page-application-la-gi/ [4] https://material.angular.io/ 21 ... 1.5 Ưu điểm Single Page Application 1.6 Bất lợi Single Page Application 2.1 Phần Demo 12 TÀI LIỆU THAM KHẢO 22 Single Page Application 1.1 Tổng quan sơ lược SPA Single Page Application (hay biết... LỤC SINGLE PAGE APPLICATION 1.1 Tổng quan sơ lược Single Page Application 1.2 Sự đời Single Page Application 1.3 Cấu Trúc Nguyên Lý hoạt động SPA 1.4 Khác Biệt SPA Web truyền thống 1.5 Ưu điểm Single. .. https://www.stdio.vn/javascript/spa -single- page- application- la-gi-3jnH51 [2] https://wiki.tino.org /single- page- application- la-gi/ [3] https://thietkewebaio.com /single- page- application- la-gi/ [4] https://material.angular.io/