Báo cáo lập trình WEB APPLICATION

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 WEB APPLICATION Công ty thực tập : Công ty Cổ phần Thế Giới Di Động Người phụ trách : Anh Võ Nhật Nam Thực tập sinh : Đinh Quang Hoàng TP Hồ Chí Minh, tháng 12 năm 2021 Sinh viên Đinh Quang Hoàng LỜI MỞ ĐẦU Hiện nay, xã hội ngày phát triển, nhiều công nghệ phát minh dẫn đến cách mạng giới Internet Lập trình Web Application nằm số Với tốc độ phát triển vơ mạnh mẽ, Website 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 Cùng với phát triển cơng nghệ đó, doanh nghiệp số hóa thương mại điện tử đế sản phẩm tiếp cận đến nhiều người, từ nước đến nước Taobao, Amazon, Tiki, Lazada, Shopee, Thegioididong.com 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 Lập trình Web Application mơi trường chun nghiệp Vì vậy, em định chọn Cơng ty Cổ phần Thế Giới Di Động - MWG - môi trường lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định Sinh viên Đinh Quang Hoàng LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty cổ phần Thế Giới Di Động 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ập trình Web Application 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 Võ Nhật Nam, training, hướng dẫn, giúp đỡ training 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 Bùi Mạnh Đức, dẫn chúng em cách làm báo cáo, lên kế hoạch, kỹ thiếu; cảm ơn anh Phạm Hữu Danh, anh Lê Hồng Quân training cho chúng em kiến thức quan trọng C#, Javascript, ASP.Net MVC để 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 Đinh Quang Hoàng Tp.HCM, ngày 14 tháng 12 năm 2021 Sinh viên Đinh Quang Hoàng NHẬN XÉT CỦA KHOA Sinh viên Đinh Quang Hoàng MỤC LỤC 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 Thế Giới Di Động - MWG 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 kỹ thuật Thực project 12 Lịch làm việc 12 Chương 3: Chi tiết project 14 Tổng quan Website 14 Thực 19 Kế hoạch 19 TÀI LIỆU THAM KHẢO 20 TỔNG KẾT 21 Sinh viên Đinh Quang Hoàng Chương 1: Giới thiệu công ty thực tập Giới thiệu công ty Thế Giới Di Động - MWG Công ty Cổ phần Đầu tư Thế Giới Di Động (MWG) nhà bán lẻ số Việt Nam doanh thu lợi nhuận, với mạng lưới 4.500 cửa hàng toàn quốc MWG vận hành chuỗi bán lẻ thegioididong.com, Điện Máy Xanh, Bách Hố Xanh Ngồi ra, MWG cịn mở rộng thị trường nước ngồi với chuỗi bán lẻ thiết bị di động điện máy Campuchia đầu tư vào chuỗi nhà thuốc An Khang Năm 2020, thành viên MWG 4KFarm đời với mục tiêu cung cấp cho người tiêu dùng thực phẩm an toàn theo chuẩn không (không thuốc trừ sâu, không chất bảo quản, không chất tăng trưởng, không sử dụng giống biến đổi gen) MWG vinh dự liên tiếp lọt vào bảng xếp hạng TOP 50 công ty niêm yết tốt Châu Á tạp chí uy tín Forbes đại diện Việt Nam Top 100 nhà bán lẻ hàng đầu Châu Á – Thái Bình Dương Tạp chí bán lẻ châu Á (Retail Asia) Tập đồn nghiên cứu thị trường Euromonitor bình chọn MWG nhiều năm liền có tên bảng xếp hạng danh TOP 500 nhà bán lẻ hàng đầu Châu Á – Thái Bình Dương (Retail Asia) dẫn đầu TOP 50 công ty kinh doanh hiệu Việt Nam (Nhịp Cầu Đầu Tư) … Sự phát triển MWG điển hình tốt nghiên cứu trường Đại học hàng đầu Harvard, UC Berkeley, trường kinh doanh Tuck (Mỹ) Không doanh nghiệp hoạt động hiệu nhìn nhận nhà đầu tư tổ chức đánh giá chuyên nghiệp, MWG người lao động tin yêu lần thứ liên tiếp vinh danh TOP 50 Doanh nghiệp có mơi trường làm việc tốt Việt Nam doanh nghiệp xuất sắc giải thưởng Vietnam HR Awards – “Chiến lược nhân hiệu quả” Sinh viên Đinh Quang Hoàng Sản phẩm công ty Sản phẩm khối Công nghệ Thông tin – MWG hệ thống Website thương mại điện tử phục vụ cho bán hàng, cụ thể lĩnh vực: • Chuỗi Thế Giới Di Động kinh doanh thiết bị di động (điện thoại di động, máy tính bảng, laptop phụ kiện) • Chuỗi Điện Máy Xanh kinh doanh sản phẩm điện tử tiêu dùng (điện tử, điện lạnh gia dụng) • Chuỗi Bách Hóa Xanh kinh thực phẩm tươi sống (thịt cá, rau củ, trái cây…) nhu yếu phẩm • Chuỗi Bluetronics kinh doanh hàng điện tử tiêu dùng thị trường nước ngồi MWG • 4KFarm chuyển giao công nghệ hỗ trợ nông dân trồng rau an tồn KHƠNG (khơng thuốc trừ sâu, khơng chất tăng trưởng, không chất bảo quản không sử dụng giống biến đổi gen) 4KFarm cam kết thu mua 100% sản lượng rau an tồn nơng dân cung cấp độc quyền cho chuỗi Bách Hóa Xanh • Chuỗi Nhà thuốc An Khang chuyên bán dược phẩm, thực phẩm chức năng, thiết bị y tế Sinh viên Đinh Quang Hoàng Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Lập trình Web Application” 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 Web Application, đồ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, trình thành lập phát triên (như nhắc đến trên), 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 email số phần mềm nội công việc… Kết quả: Hiểu thêm công ty MWG, trình thành lập phát triển Có thêm kỹ việc sử dụng ứng dụng quản lý cơng việc, ERP, làm việc có kế hoạch, có kỷ luật, có trách nhiệm Nghiên cứu kỹ thuật 2.1 Các công cụ làm việc Thời gian: tuần Nội dung: Tìm hiểu cơng cụ sử dụng trình làm việc 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 SourceTree: quản lý source code Wireshark: bắt gói tin, đọc API Postman: hỗ trợ làm việc với API Thực hiện: Thực hành sử dụng phần mềm nêu Kết quả: Kết hợp sử dụng cơng cụ miễn phí để hỗ trợ việc phát triển ứng dụng 2.2 Tìm hiểu ngơn ngữ Thời gian: tuần Sinh viên Đinh Quang Hoàng Nội dung: - Tìm hiểu JQuery Javascript Tìm hiểu thư viện JQuery để hỗ trợ xây dựng chức dễ dàng nhanh chóng - Extension C#: Hỗ trợ viết code đẹp hơn, dễ đọc dễ hiểu Cho phép code viết theo functionally styped programming, cần thiết ngôn ngữ hướng đối tượng - Dependency Injection C#: Là kỹ thuật lập trình, hình thức cụ thể Inverse of Control (Dependency Inverse), hướng tới việc loại bỏ phụ thuộc code Thực hiện: - Tham gia đầy đủ buổi training online công ty - Làm thực hành, kiểm tra kiến thức học Kết quả: - 2.3 Nâng cao kỹ lập trình với Javascript, C# Có kiến thức quan trọng cho việc lập trình web application sau Ngồi cịn biết thêm số quy tắc việc viết code cho chuẩn, dễ đọc, dễ hiểu Lập trình Web MVC Thời gian: tuần Nội dung: Các kiến thức Web Service để hỗ trợ việc lập trình Web Application - Kiến trúc MVC ASP.NET Core MVC tên gọi framework ASP.NET Core thực thi mơ hình kiến trúc MVC Framework giúp phát triển nhiều loại ứng dụng khác nhau, từ ứng dụng web truyền thống đến ứng dụng đơn trang Web API - Phân biệt sử dụng ViewComponent, PartailView, … Sinh viên Đinh Quang Hoàng 10 View component chế tái sử dụng Razor Pages (cùng với Partial Pages) View component hướng tới xây dựng thành phần tương đối độc lập, phức tạp với logic xử lý liệu riêng Partial View xem user control ASP.NET Webform Nó gần giống View khác nhiều View sử dụng Nó giúp ta khỏi phải tốn công xây dựng sử dụng thành phần View mà khơng cần phải tạo nhiều lần Ta việc tạo lần sử dụng Partial View View mà ta muốn dùng lại - Routing Nắm khái niệm Route Routing Mỗi Route bao gồm thơng tin (hay cịn gọi URL pattern), giúp xác định thông tin Controller Action mặc định rang buộc (constraints) - Middleware: Nắm rõ khái niệm - Middleware mã nguồn thành phần riêng lẻ để xử lý request đến Các middleware đứng theo dãy với gọi request pipeline Chúng ta tạo middleware đăng ký phương thức Configure class Startup - Cache Việc Caching lưu trữ liệu vào cache dạng mã nhị phân Nó giúp người dùng rút ngắn thời gian truy cập, giảm độ trễ thực thao tác ứng dụng/website/hệ điều hành thuận tiện, nhanh chóng - Session Một session bắt đầu client gửi request đến server, tồn xuyên suốt từ trang đến trang khác ứng dụng web kết thúc hết thời gian timeout bạn đóng ứng dụng Giá trị session lưu file server - Cookie Cookies tệp trang web người dùng truy cập tạo Cookie giúp trải nghiệm trực tuyến bạn dễ dàng cách lưu thông tin duyệt web Với Sinh viên Đinh Quang Hoàng 11 Cookies, trang web trì trạng thái đăng nhập bạn, ghi nhớ tùy chọn trang web cung cấp nội dung phù hợp với vị trí người dùng - Authen, JWK, Token Các công cụ hỗ trợ xác thực để tăng khả bảo mật client & server - Logger Tìm hiểu Log - trình ghi lại thơng tin thơng báo, lưu lại trình hoạt động ứng dụng nơi tập trung Mục đích để xem lại thơng tin hoạt động ứng dụng khứ debug có lỗi xảy ra, check health, xem info, error, warning, … Tìm hiểu cách sử dụng Logger ASP.Net Core MVC Thực hiện: - Tham gia đầy đủ buổi training online Tìm kiếm tài liệu mạng để tìm hiểu thêm Áp dụng kiến thức nội dung tìm hiểu để thực hành thực tế Website nhỏ Kết quả: 2.4 Hiểu khái niệm Web MVC khái niệm liên quan khác Có thể ứng dụng kiến thức vào thực tế Lập trình Web API Thời gian: tuần Nội dung: Các kỹ thuật tạo Web API - Tìm hiểu 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 Tạo Web API với ASP.Net Core Dựa MVC framework với số thay đổi kỹ thuật để xây dựng Web API Sinh viên Đinh Quang Hoàng 12 - Sử dụng Swagger để trực quan hóa API Swagger cơng cụ mã nguồn mở để xây dựng OpenAPI specifications giúp thiết kế, xây dựng tài liệu sử dụng REST APIs Giúp team dễ dàng việc tạo bảo trì chúng - Sử dụng Postman để tương tác với API Postman App Extensions, cho phép làm việc với API, REST, giúp ích nhiều cho việc testing Hỗ trợ tất phương thức HTTP (GET, POST, PUT, DELETE, OPTIONS, HEAD ) Thực hiện: - Tham gia đầy đủ buổi training online Tìm hiểu them kiến thức mạng Áp dụng kiến thức nội dung tìm hiểu để thực Web API Kết quả: - Hiểu khái niệm Web API khái niệm liên quan khác Có thể tạo Web API hoàn chỉnh kèm tài liệu trực quan hóa Swagger Thực project Sau 1.5 tháng training thực hành, thực tập sinh nắm kiến thực HTML, CSS, C#, Web MVC & Web API công cụ lập trình web application Trong 1.5 tháng tiếp theo, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để lập trình Web Application hồn chỉnh Chi tiết đồ án nói phần sau Lịch làm việc Tuần - Mức độ Công việc Người hướng dẫn hồn thành Tìm hiểu cơng Anh Bùi Mạnh Hoàn ty, cách tổ chức Đức thành công ty Làm quen với công cụ làm việc Nhận xét người hướng dẫn Hoàn thành đầy đủ, deadline Sinh viên Đinh Quang Hoàng 13 công ty Học cách trao đổi, làm việc qua email - Tìm hiểu cơng cụ lập trình (Postman, Wireshark, SourceTree) - Tìm hiểu ngơn ngữ lập trình C# nâng cao - Tìm hiểu JQuery Javascript - Tìm hiểu RestfulAPI - Sử dụng Postman để tương tác với API - Sử dụng Swagger để trực quan hóa API - Sử dụng Wireshark để bắt gói tin Giai đoạn thực Project: - Lên kế hoạch - Tạo Web API - Tạo Web MVC - Anh Võ Nhật Nam Hoàn thành Hoàn thành đầy đủ, deadline Anh Võ Nhật Nam Hoàn Anh Phạm Hữu thành Danh Hoàn thành đầy đủ, deadline Anh Võ Nhật Nam Hoàn Anh Lê Hồng thành Quân Hoàn thành đầy đủ, deadline Anh Võ Nhật Nam Hoàn Anh Phạm Hữu thành Danh Hoàn thành đầy đủ, deadline Sinh viên Đinh Quang Hoàng 14 Chương 3: Chi tiết project Tổng quan Website 1.1 Giới thiệu BlueSport chuỗi cửa hàng chuyên bán đồ thể thao công ty Thế Giới Di Động.BlueSport đời nhu cầu chăm sóc sức khỏe ngày tăng cao người dân, đặc biệt từ đại dịch Covid-19 xuất Với đa dạng, chất lượng sản phẩm uy tín thương hiệu, AVASport đem đến cho khách hàng quan tâm đến sức khỏe, đam mê thể thao có thêm địa đáng tin cậy để mua sắm Tại đây, bạn cảm thấy hài lịng tìm đa dạng đầy đủ sản phẩm thể thao như: Quần áo, giày thể thao, xe đạp, phụ kiện, đồng hồ thể thao… đến từ thương hiệu tiếng như: Adidas, Nike, Puma, Reebok, Skechers, Anta, Erke, Livan, Phiten, Goodfit, Kingsmith… Những thương hiệu không xa lạ với khách hàng Việt Nam giới, đặc biệt bạn quan tâm đến thể thao toàn thương hiệu tiếng trang phục thể thao việc hỗ trợ, bảo hộ trình tập luyện 1.2 Danh sách trang Sinh viên Đinh Quang Hoàng 15 - Trang chủ Sinh viên Đinh Quang Hoàng 16 - Trang ngành hàng Sinh viên Đinh Quang Hoàng 17 - Trang chi tiết sản phẩm Sinh viên Đinh Quang Hoàng 18 - Trang liên hệ Sinh viên Đinh Quang Hoàng 19 Thực thành viên team internship Web Application BlueSport: - Đinh Quang Hoàng Trần Phương Duy Thẩm Minh Đức Và giúp đỡ tận tình team trainer MWG Kế hoạch - - - - Xây dựng DB với PostgreSQL Xây dựng Web API Sử dụng Swagger để trực quan hóa tài liệu API Xây dựng Web MVC với trang lớn: o Trang chủ o Trang ngành hàng o Trang chi tiết o Trang liên hệ Với trang liên hệ: o Áp dụng tính Form, Validate bảo mật Web o Mỗi Session cho phép gửi lần o Cho phép lưu thông tin nhập vào Cookie Với trang ngành hàng: o Áp dụng Ajax load more o Áp dụng form serialize Đếm số lượng người truy cập Website Cho phép chặn IP truy cập - ứng dụng Middleware Khách hàng truy cập vào link bị lỗi – notify tới ứng dụng Line Kiến trúc chung: Base Kết quả: - Tất tính thực Sinh viên Đinh Quang Hoàng 20 TÀI LIỆU THAM KHẢO Web API https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore6.0&tabs=visual-studio Web MVC https://docs.microsoft.com/vi-vn/aspnet/core/tutorials/first-mvc-app/startmvc?view=aspnetcore-3.0&tabs=visual-studio Postman https://learning.postman.com/docs/publishing-your-api/documenting-your-api/ Swagger https://swagger.io/docs/ JQuery https://api.jquery.com/ Sinh viên Đinh Quang Hồng 21 TỔNG KẾT Như vậy, vịng bốn tháng ngắn ngủi, nhóm kịp hồn thành Web Application thương mai điện tử Website có đầy đủ trang tính đề ban đầu Do thời gian có hạn nên tính Website đơn giản Nhưng Website phát triển theo framework có tính kế thừa nên sau có thời gian phát triển lên mức cao Chân thành cảm ơn giúp đỡ anh chị nhóm trainer MWG, nỗ lực nhóm Internship để hồn thành Web Application Cảm ơn thầy Huỳnh Tuấn Anh giúp em hoàn thành báo cáo Sinh viên Đinh Quang Hoàng ... thực HTML, CSS, C#, Web MVC & Web API cơng cụ lập trình web application Trong 1.5 tháng tiếp theo, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để lập trình Web Application hồn chỉnh... Nâng cao kỹ lập trình với Javascript, C# Có kiến thức quan trọng cho việc lập trình web application sau Ngồi biết thêm số quy tắc việc viết code cho chuẩn, dễ đọc, dễ hiểu Lập trình Web MVC Thời... tập với chủ đề ? ?Lập trình Web Application? ?? 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 Web Application, đồng thời rèn luyện kỹ mềm làm việc nhóm, thuyết trình, giao tiếp