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 .7 Sản phẩm công ty Chương 2: Nội dung thực tập .8 Tìm hiểu cơng ty kỹ công ty .8 Nghiên cứu công cụ Nghiên cứu kỹ thuật 3.1 Tìm hiểu NodeJs, Npm package, version .8 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 .17 3.1 CSS Preprocessor gì? 17 Bùi Hữu Hiệu Hồ Quang Linh Restful Api .19 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 đồ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 tồ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 chun 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 cịn 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 16 2.4 Các version boostrap: 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 hoàn chỉnh nhiều so với version Một vài điểm bootstrap  Giao diện trang Docs thay đổi toà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 Bùi Hữu Hiệu Hồ Quang Linh 17 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   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 hồn tồn truyền tham số vào bên để sử dụng Bùi Hữu Hiệu Hồ Quang Linh 19 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 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 Bùi Hữu Hiệu Hồ Quang Linh 20 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? 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): Xoá 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 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... 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, ... (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