Báo cáo thực tập lập trình ứng dụng web với javascript

1 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO THỰC TẬP LẬP TRÌNH ỨNG DỤNG WEB VỚI JAVASCRIPT Công ty thực tập: Netpower Việt Nam Người phụ trách: Anh Bùi Hữu Hiệu Thực tập sinh: Hồ Quang Linh TP Hồ Chí Minh, tháng 12 năm 2022 Bùi Hữu Hiệu Hồ Quang Linh LỜI MỞ ĐẦU Ngày nay, ngành công nghiệp web application phận thiếu ngành công nghiệp phần mềm Với tốc độ phát triển vô mạnh mẽ, web application nhân tố kích thích phát triển cơng nghệ thơng tin giới, phần cứng phần mềm Sau ba năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn tham gia phát triển web môi trường chuyên nghiệp, em có dự định thực tập đầu năm tư Vì vậy, em định chọn Cơng ty TNHH NetPower Việt Nam - môi trường lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định Bùi Hữu Hiệu Hồ Quang Linh LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty TNHH NetPower Việt Nam tạo điều kiện cho em có hội thực tập công ty Chỉ thời gian ngắn, nhờ dẫn nhiệt tình nhóm trainer, nhóm thực tập chúng em tiếp thu kiến thức quan trọng để làm ứng dụng web application hoàn chỉnh Chân thành cảm ơn anh chị nhóm trainer bỏ nhiều thời gian,cơng sức để hướng dẫn chúng em hoàn thành đợt thực tập Đặc biệt cảm ơn anh Bùi Hữu Hiệu, training công nghệ công ty sử dụng, hướng dẫn, giúp đỡ cho chúng em tận tình khó khăn cơng việc, đến khó khăn việc làm quen với môi trường mới; cảm ơn anh Nguyễn Tam Phúc, training quy trình, hỗ trợ chúng em nhiều vấn đề kỹ thuật dẫn chúng em cách làm báo cáo, lên kế hoạch, kỹ thiếu để làm sản phẩm thời gian qua Cũng xin cảm ơn thầy cô khoa Cơng nghệ phần mềm nhiệt tình hỗ trợ, tạo điều kiện em làm báo cáo Hồ Quang Linh TpHCM, ngày 20 tháng 12 năm 2022 Bùi Hữu Hiệu Hồ Quang Linh NHẬN XÉT CỦA KHOA Bùi Hữu Hiệu Hồ Quang Linh Mục lục Chương 1: Giới thiêu công ty thực tập Giới thiệu công ty NetPower Việt Nam Sản phẩm công ty Chương 2: Nội dung thực tập Tìm hiểu cơng ty kỹ công ty Nghiên cứu công cụ Nghiên cứu kỹ thuật 3.1 Tìm hiểu NodeJs, Npm package, version 3.2 Tìm hiểu BootStrap, SCSS, SASS 3.3 Tạo demo (form đăng kí cho user) có sử dụng BootStrap 10 Chương 4: Giới thiệu ngôn ngữ, thư viện, framework tìm hiểu 13 NodeJS, Npm Package 13 1.1 Các phiên NodeJS 13 1.2 Khái niệm Nodejs 14 1.3 Những ứng dụng viết Nodejs 14 Bootstrap 15 2.1 Bootstrap 15 2.2 Tại nên sử dụng Bootstrap 15 2.3 Các cách để download bootstrap 15 2.4 Các version boostrap: 16 SCSS, SASS 16 3.1 CSS Preprocessor gì? 16 Bùi Hữu Hiệu Hồ Quang Linh Restful Api 18 Chương 3: Chi tiết project 23 Giới thiệu project 23 Mục đích 23 Phạm vi 23 Các chức 24 Kết 25 Bùi Hữu Hiệu Hồ Quang Linh Chương 1: Giới thiêu công ty thực tập Giới thiệu công ty NetPower Việt Nam NetPower Việt Nam nhà cung cấp giải pháp dịch vụ tảng Internet tốt Được thành lập năm 1995, NetPower có 125 nhân viên với văn phịng thành phố lớn NaUy Oslo Stavanger Bergen Một văn phịng Tp.Hồ Chí Minh, Việt Nam Sản phẩm công ty Công ty thành công thuyết phục tin tưởng tuyệt đối khách hàng việc cung cấp giải pháp web, dịch vụ Internet, truyền liệu bảo mật liệu NetPower có nguồn tài dồi với khách hàng công ty tập đoàn lớn toàn giới Dolly Dimple, Expert, Apotek1, Nikita, Norsk Scania, Helse Sør-Øst, Ullevål University Hospital, NVE, Oslo kommune, Seadrill, Aker Kvaerner, the Norwegian Petroleum Directorate, … Bùi Hữu Hiệu Hồ Quang Linh Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Lập trình ứng dụng web với JavaScript” nhằm mục đích giúp sinh viên thực tập đào tạo toàn diện lập trình cơng nghệ web đại, sử dụng kiến trúc framework để tạo ứng dụng đáp ứng nhu cầu nghiệp vụ khách hàng, đồng thời rèn luyện kỹ mềm làm việc nhóm, thuyết trình, giao tiếp Tại cơng ty, sinh viên có hội học tập, khám phá làm việc môi trường phát triển website chuyên nghiệp Tìm hiểu cơng ty kỹ công ty Thời gian: ngày Nội dung: Giới thiệu công ty, cách tổ chức công ty Được nghe người phụ trách giới thiệu cơng ty, quy trình làm việc từ cao xuống thấp, cách thức tổ chức cơng ty Ngồi ra, thực tập sinh giới thiệu cách thức làm việc công ty thời gian làm, quy định cần phải tuân thủ, cách sử dụng Microsoft Team, email để trao đổi công việc Kết quả: Hiểu thêm công ty TNHH Netpower Việt Nam Hiểu thệm quy định bắt đầu làm việc môi trường doanh nghiệp, cách trao đổi công việc với thành viên nhóm Nghiên cứu cơng cụ • • • • Thời gian: ngày Nội dung: Tìm hiểu công cụ sử dụng trình làm việc (Visual Studio, Visual Studio Code, Sql Server, Postman, Git, Github), Microsoft Team) Trong thời gian này, supervisor hướng dẫn thực tập sinh tìm hiểu cơng cụ giúp ích cho cơng việc sau Thực hiện: Tiến hành cài đặt chạy thử công cụ Kết quả: Đã hồn tất cài đặt tìm hiểu công cụ nêu Nghiên cứu kỹ thuật 3.1 Tìm hiểu NodeJs, Npm package, version • • • Thời gian: Ngày Nội dung: Tìm hiểu kiến thức khái niệm NodeJs, khởi tạo server port, import, export module, tìm hiểu qua vài package npm moment, express, nodemon, env, path, Thực hiện: Xem document từ trang chủ, từ tài liệu tham khảo mà anh leader cung cấp, tiến hành code minh hoạ ví dụ Bùi Hữu Hiệu Hồ Quang Linh • 3.2 Kết quả: Đã thực tìm hiểu công nghệ từ nhiều nguồn, triển code minh hoạ, hiểu thêm kiến thức NodeJs npm package Tìm hiểu BootStrap, SCSS, SASS • • • Thời gian: Ngày Nội dung: + Tìm hiểu grid layout, forms, buttons, tables, media queries, cách import thư viện vào dự án, cách responsive Bootstrap + Tìm hiểu khái niệm SASS, SCSS CSS Preprocessing, Variables, Nesting, Partials, Modules, Mixins, Extend Thực hiện: Đọc tài liệu trang chủ từ anh leader cung cấp, tiến hành code minh hoạ cho phần Sau vài hình ảnh code minh hoạ Bùi Hữu Hiệu Hồ Quang Linh 10 • 3.3 Kết quả: Đã thực tìm hiểu cơng nghệ từ nhiều nguồn, triển code minh hoạ, hiểu thêm kiến thức Bootstrap, SASS SCSS Tạo demo (form đăng kí cho user) có sử dụng BootStrap • • • Thời gian: ngày Nội dung: Sử dụng Bootstrap, SCSS,SAS để tạo form đăng kí bao gồm thơng tin (ID Card, Fullname, Email, Address, Gender, Phone) có hai button Register Cancel Thực hiện: Triển khai code, sau vài hình ảnh code minh hoạ Bùi Hữu Hiệu Hồ Quang Linh 15 Bootstrap 2.1 Bootstrap • • Bootstrap framework HTML, CSS, JavaScript cho phép người dùng dễ dàng thiết kế website theo chuẩn định, tạo website thân thiện với thiết bị cầm tay mobile, ipad, tablet,… Bootstrap bao gồm có sẵn như: typography, forms, buttons, tables, navigation, modals, image carousels nhiều thứ khác Trong bootstrap có thêm nhiều Component, Javascript hỗ trợ cho việc thiết kế reponsive bạn dễ dàng, thuận tiện nhanh chóng Tại nên sử dụng Bootstrap 2.2 • • • • Bootstrap framework sử dụng nhiều giới để xây dựng nên website Bootstrap xây dựng nên chuẩn riêng người dùng ưa chuộng Chính thế, hay nghe tới cụm từ thông dụng "Thiết kế theo chuẩn Bootstrap" Rất dễ để sử dụng: Nó đơn giản base HTML, CSS Javascript cẩn có kiến thức sử dụng bootstrap tốt Responsive: Bootstrap xây dựng sẵn reponsive css thiết bị Iphones, tablets, desktops Tính khiến cho người dùng tiết kiệm nhiều thời gian việc tạo website thân thiện với thiết bị điện tử, thiết bị cầm tay Tương thích với trình duyệt: Nó tương thích với tất trình duyệt (Chrome, Firefox, Internet Explorer, Safari, and Opera) Tuy nhiên, với IE browser, Bootstrap hỗ trợ từ IE9 trở lên Điều vô dễ hiểu IE8 khơng support HTML5 CSS3 Các cách để download bootstrap 2.3 Có cách để bạn sử dụng Bootstrap web bạn ✓ Download Bootstrap packet từ getbootstrap.com ✓ Thêm Bootstrap từ CDN Bùi Hữu Hiệu Hồ Quang Linh 16 Các version boostrap: 2.4 Hiện Bootstrap có version 5.0 Bootstrap 5.0 thời điểm cịn thời kì alpha Nhìn chung Bootstrap 5.0 có cải tiến hồn chỉnh nhiều so với version Một vài điểm bootstrap • Giao diện trang Docs thay đổi tồn diện Người dùng có hội trải nghiệm giao diện thân thiện • Thay đổi jQuery JavaScript: Version khơng cịn dùng jQuery Từ đó, tốc độ load trang nhanh Code nâng cao chất lượng bỏi Javasript • Những thuộc tính tuỳ chỉnh CSS • Cập nhật Form SCSS, SASS 3.1 CSS Preprocessor gì? • CSS Preprocessors ngơn ngữ tiền xử lý CSS Nó có cơng dụng giúp bạn viết cú pháp CSS gần với ngơn ngữ lập trình compile CSS • Có nhiều CSS Preprocessor SASS, LESS, Stylus, SASS 3.2 SASS (Syntactically Awesome StyleSheets) CSS Preprocessor giúp bạn viết CSS nhanh có cấu trúc rõ ràng Với SASS, bạn viết CSS theo thứ tự rõ ràng, quản lý biến định nghĩa sẵn, class dùng chung hay tự động nén tập tin CSS lại để bạn tiết kiệm dung lượng Bùi Hữu Hiệu Hồ Quang Linh 17 • • 3.3 SCSS SCSS thiết kế viết lập trình viên Ruby Bởi vậy, Scss stylesheets sử dụng cú pháp giống Ruby với việc khơng có dấu ngoặc nhọn {}, dấu chấm phẩy Sass giống phiên 3.0 phát hành vào tháng 5/2010, giới thiệu cú pháp gọi SCSS (Sassy CSS) Cú pháp nhằm thu hẹp khoảng cách Sass CSS cách mang tới cú pháp thân thiện với CSS Hiểu cách đơn giản, SCSS nâng cấp SASS giúp viết CSS cách dễ dàng dễ hiểu 3.4 Nested Rule Đây tính sử dụng thường xuyên Cho đoạn code mẫu sau Nếu sử dụng Nested route SCSS viết sau Bùi Hữu Hiệu Hồ Quang Linh 18 Và biên dịch CSS ta thu • Biến – variable Sử dụng biến với SCSS vô bản, bạn cần đặt tên cho biến – bắt đầu $ Biến chứa đựng giá trị mà dùng nhiều lần ví dụ mã màu, font hay kiểu chữ • Quy tắc Mixin Mixin giúp bạn tạo hàm sử dụng SCSS, bạn hoàn toàn truyền tham số vào bên để sử dụng Mixin chế phổ biến SASS Cơng dụng mang nhiều thuộc tính mà bạn quy ước mix @include vào thành phần mà khơng cần phải viết lại thuộc tính (Ví dụ color vs font-style) • Kế thừa – Extends Khi nghe đến extends hay gọi kế thừa Cách làm bạn định nghĩa class, tag cần @extend vào xong Restful Api RESTful API tiêu chuẩn dùng việc thiết kế API cho ứng dụng web (thiết kế Web services) để tiện cho việc quản lý resource Nó trọng vào tài nguyên hệ thống (tệp văn bản, ảnh, âm thanh, video, liệu động…), bao gồm trạng thái tài nguyên định dạng truyền tải qua HTTP Bùi Hữu Hiệu Hồ Quang Linh 19 API (Application Programming Interface) tập quy tắc chế mà theo đó, ứng dụng hay thành phần tương tác với ứng dụng hay thành phần khác API trả liệu mà bạn cần cho ứng dụng kiểu liệu phổ biến JSON hay XML REST (REpresentational State Transfer) dạng chuyển đổi cấu trúc liệu, kiểu kiến trúc để viết API Nó sử dụng phương thức HTTP đơn giản để tạo cho giao tiếp máy Vì vậy, thay sử dụng URL cho việc xử lý số thông tin người dùng, REST gửi yêu cầu HTTP GET, POST, DELETE, vv đến URL để xử lý liệu RESTful API tiêu chuẩn dùng việc thiết kế API cho ứng dụng web để quản lý resource RESTful kiểu thiết kế API sử dụng phổ biến ngày ứng dụng (web, mobile…) khác giao tiếp với Chức quan trọng REST quy định cách sử dụng HTTP method (như GET, POST, PUT, DELETE…) cách định dạng URL cho ứng dụng web để quản resource RESTful không quy định logic code ứng dụng không giới hạn ngơn ngữ lập trình ứng dụng, ngơn ngữ framework sử dụng để thiết kế RESTful API RESTful hoạt động nào? Bùi Hữu Hiệu Hồ Quang Linh 20 REST hoạt động chủ yếu dựa vào giao thức HTTP Các hoạt động nêu sử dụng phương thức HTTP riêng GET (SELECT): Trả Resource danh sách Resource POST (CREATE): Tạo Resource PUT (UPDATE): Ghi đè thông tin cho Resource PATCH(UPDATE): Update phần thơng tin cho Resource DELETE (DELETE): Xố Resource Các Status code Khi request API thường có vài status code để nhận biết sau: • • • • • • • • • • • • 200 OK – Trả thành công cho phương thức GET, PUT, PATCH DELETE 201 Created – Trả Resouce vừa tạo thành công 204 No Content – Trả Resource xố thành cơng 304 Not Modified – Client sử dụng liệu cache 400 Bad Request – Request không hợp lệ 401 Unauthorized – Request cần có auth 403 Forbidden – bị từ chối khơng cho phép 404 Not Found – Khơng tìm thấy resource từ URI 405 Method Not Allowed – Phương thức không cho phép với user 410 Gone – Resource không cịn tồn tại, Version cũ khơng cịn hỗ trợ 415 Unsupported Media Type – Không hỗ trợ kiểu Resource 422 Unprocessable Entity – Dữ liệu không xác thực Bùi Hữu Hiệu Hồ Quang Linh 21 • 429 Too Many Requests – Request bị từ chối bị giới hạn Thực project Sau hai tháng training thực hành, thực tập sinh nắm kiến thực Javascript framework thực thành cơng đồ án Chi tiết đồ án nói phần sau Lịch làm việc Tuần Cơng việc Tìm hiểu công ty, cách tổ chức công ty Làm quen với công cụ làm việc công ty Học cách trao đổi, làm việc qua email Tìm hiểu ngơn ngữ lập trình C#, JavaScript Thực hành C#, JavaScript - - - Người hướng dẫn Mức độ hoàn thành Nhận xét người hướng dẫn Anh Bùi Hữu Hiệu Anh Bùi Hữu Hiệu Tìm hiểu NodeJs, ASP.Net core, Javascript (ReactJs) - Làm demo đơn giản - Ơn tập lập trình Anh Bùi Hữu hướng đối tượng Hiệu - Tìm hiểu mơ hình N-Layer để cấu hình backend - Bùi Hữu Hiệu Hồ Quang Linh 22 Ơn tập sở liệu - Tìm hiểu mơ hình liệu có quan hệ khơng có quan hệ - Lên kế hoạch Anh Bùi Hữu - Sử dụng Hiệu framework để tạo ứng dụng - Tạo UI - Cấu trúc dự án frontend lẫn backend Anh Bùi Hữu - Viết layers để Hiệu tạo backend endpoint - Tạo services, models, repositories theo requirement từ frontend Anh Bùi Hữu Hiệu - Ứng dụng authentication authozition cho tốn - Tích hợp recaptcha V2 V3 vào ứng dụng - Fix bug, fix rị rì Anh Bùi Hữu Hiệu vùng nhớ - Báo cáo cuối đợt thực tập - Bùi Hữu Hiệu Hồ Quang Linh 23 Chương 3: Chi tiết project Giới thiệu project Sự phát triển mở rộng quy mô mạng xã hội lớn dần lên, phù hợp với nhu cầu xã hội Việc chia sẻ thông tin, kết bạn, nhắn tin, trao đổi công việc ngày phổ biến mạng xã hội Ngày nay, với phát triển công nghệ thông tin mà điệnthoại di động sử dụng rộng rãi quan, trường học, … giúp cho việc giao lưu kết bạn tốt Việc sử dụng điện thoại vào việc tham gia yêu cầu cần thiết nhằm xóa bỏ phương pháp lạc hậu lỗi thời gây tốn nhiều mặt Từ lý nhóm chúng em định bắt tay vào đề tài ứng dụng Mạng xã hội ẩm thực nhằm gắn kết, kết nối người khắp nơi với chung sở thích đam mê Trong đồ án mà chúng em xây dựng ứng dụng mạng xã hội, kết nối người với chung sở thích, chia sẻ trải nghiệm ăn uống Phần mềm giúp người quán lý nắm bắt chia sẻ đồ ăn, thức uống yêu thích địa điểm hay nấu chế biến Mục đích • Nghiên cứu tổng quan nghiệp vụ, hoạt động, quy trình mạng xã hội • Nghiên cứu sở lý thuyết việc phát triển ứng dụng mạng xã hội • Xây dựng ứng dụng mạng xã hội, kết nối người đáp ứng nhu cầu thực tế Phạm vi Quy trình quản lý thành viên, tài khoản, tin nhắn nhóm cá nhân Các vấn đề cần giải ứng dụng, ví dụ như: • Theo dõi, quản lý nội dung đăng • Chức upload ảnh • Chức bình luận, react, share, chỉnh sửa đăng, comment • Chức video call Bùi Hữu Hiệu Hồ Quang Linh 24 Ứng dụng hướng phía người dùng giúp người dùng tiết kiệm nhiều công sức thời gian, mang lại nhiều thông tin đồ ăn, thức uống Các chức Phát triển ứng dụng chạy tảng web thực chức sau: • • • • • • • • • • Bùi Hữu Hiệu Đăng kí, đăng nhập cho thành viên Chức nhắn tin thời gian thực Chức đăng Kết bạn, follow thành viên hệ thống Chức hiển thị bảng tin Chức bình luận, react cảm xúc, share bài, chỉnh sửa comment, viết Chức gọi điện có video call Chức chỉnh sửa thông tin cá nhân Ứng dụng cloud để upload ảnh Chức thông báo hoạt động Hồ Quang Linh 25 Kết Bùi Hữu Hiệu Hồ Quang Linh 26 Bùi Hữu Hiệu Hồ Quang Linh 27 Bùi Hữu Hiệu Hồ Quang Linh 28 Bùi Hữu Hiệu Hồ Quang Linh 29 TÀI LIỆU THAM KHẢO https://reactjs.org/ https://expressjs.com/ https://webrtc.org/ https://peerjs.com/ TỔNG KẾT Sau thời gian thực đề tài, chương trình hồn thành đạt số kết sau: • Hiểu rõ quy trình ứng dụng mạng xã hội • Xây dựng thành cơng ứng dụng mạng xã hội, đáp ứng nhu cầu người dùng • Giao diện ứng dụng thân thiện, dễ sử dụng, • Hiểu nắm kiến thức mơ hình Client - Server, MERN Stack • Luyện tập Javascript, ReactJS, SocketIO Chân thành cảm ơn giúp đỡ anh chị nhóm trainer Cơng ty Netpower Việt Nam, nỗ lực nhóm để hồn thành ứng dụng web Cảm ơn thầy cô khoa công nghệ phần mềm giúp em hoàn thành báo cáo Bùi Hữu Hiệu Hồ Quang Linh ... Chương 2: Nội dung thực tập Đợt thực tập với chủ đề ? ?Lập trình ứng dụng web với JavaScript? ?? nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện lập trình cơng nghệ web đại, sử dụng kiến trúc framework... RESTful API: ứng dụng mà sử dụng cho ứng dụng khác thông qua API Any Real-time Data Application: ứng dụng có yêu cầu tốc độ thời gian thực Micro Services: Ý tưởng micro services chia nhỏ ứng dụng lớn... DELETE…) cách định dạng URL cho ứng dụng web để quản resource RESTful không quy định logic code ứng dụng không giới hạn ngơn ngữ lập trình ứng dụng, ngơn ngữ framework sử dụng để thiết kế RESTful API