báo cáo thực tập xây dựng WEBSITE ECOMMERCE

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 XÂY DỰNG WEBSITE ECOMMERCE Công ty thực tập : Designveloper (DSV) Người phụ trách : Nguyễn Đình Sơn Thực tập sinh : Dương Thạnh Tín TP Hồ Chí Minh, tháng năm 2020 Dương Thạnh Tín TP.HCM, 25/12/2019 MỞ ĐẦU Ngày nay, với phát triển mạnh mẽ khoa học công nghệ, Công nghệ Thông tin ngành có vị dẫn đầu có vai trị lớn phát triển chung Các ứng dụng công nghệ thông tin áp dụng lĩnh vực nghiên cứu khoa học lĩnh vực đời sống Là phần Công nghệ Thơng tin, Cơng nghệ web có phát triển mạnh mẽ phổ biến nhanh lợi ích mà mang lại cho cộng đồng lớn Bằng việc lựa chọn thực đề tài “Xây dựng website ecommerce”, chúng em muốn tìm hiểu đưa giải pháp tốt nhằm giải công việc bán hàng trực tuyến Thông qua việc thực xây dựng website chúng em học hỏi hiều kiến thức hiểu quy trình để xây dựng website hồn chình Website bán hàng giúp cho khách hàng lựa chọn linh hoạt tiện lợi việc tìm mua sản phẩm thơng qua chức tìm kiếm giỏ hàng Các thơng tin sản phẩm hiển thị chi tiết với sản phẩm, từ khách hàng dễ dàng nhận biết lựa chọn thứ cần Tuy đồ án nhỏ giúp chúng em học tập nhiều kiến thức công nghệ Dương Thạnh Tín LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty Designveloper 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 Website bán hàng 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 chị Trang 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 Sơn , training Nodejs, Reactjs hỗ trợ chúng em nhiều vấn đề kỹ thuật Front-end Back-end Webiste, cảm ơn anh Sơn, 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 chị công ty hỗ trợ giúp đỡ em em vào cơng ty thực tập để thích nghi với môi trường 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 Dương Thạnh Tín TP Hồ Chí Minh, ngày 28 tháng năm 2020 Dương Thạnh Tín NHẬN XÉT CỦA KHOA Dương Thạnh Tín Mục lục MỞ ĐẦU LỜI CẢM ƠN Chương I: Giới thiệu công ty thực tập Giới thiệu công ty Sản phẩm công ty Chương II: 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 2.2.1 Các công cụ làm việc 2.2.2 Tìm hiểu giao diện Website 2.2.3 Tìm hiểu Bootstrap 2.2.4 Tìm hiểu JavaScript 10 2.2.5 Tìm hiểu Front-end với Reactjs 10 2.2.6 Tìm hiểu Back-end với Nodejs 11 Thực project 11 Lịch làm việc 12 Chương III: Chi tiết Project 13 Giới thiệu Website 13 Các tính 13 Thực 14 Quá trình thực 14 TÀI LIỆU THAM KHẢO 16 Dương Thạnh Tín TỔNG KẾT 17 Chương I: Giới thiệu công ty thực tập Giới thiệu công ty Designveloper công ty phát triển phần mềm ứng dụng hàng đầu Thành phố Hồ Chí Minh, Việt Nam, thành lập vào năm 2013 từ tập thể trẻ đầy nhiệt huyết lập trình viên web, mobile; chuyên viên thiết kế UI/UX chuyên gia VOIP Với quy trình làm việc chun nghiệp, chúng tơi cam kết cung cấp dịch vụ với chất lượng tốt mức giá hợp lý Sản phẩm công ty Designveloper chuyên thiết kế Website App Mobile Designveloper đưa giải pháp công nghệ cho start-up doanh nghiệp lĩnh vự lượng, tài chính, logistic, y tế, truyền thông, giáo dục, vận tải, Chúng đồng hành từ lúc dự án ý tưởng hoàn thiện sản phẩm tạo thành thương hiệu Nhờ cơng ty có dự án thành cơng: LuminPDF, Swell & Switchboard, Walrus Education, Joyn’it, Bonux, Dương Thạnh Tín Chương II: Nội dung thực tập Đợt thực tập với chủ đề “Xây dựng Website Ecommerce” nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện Front-end Back-end, đồ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 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, q 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 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 email công việc… Kết quả: Hiểu thêm cơng ty Designveloper, q trình thành lập phát triển Có thêm kỹ việc sử dụng email cơng việc, 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.2.1 Các công cụ làm việ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 Trong thời gian này, Mentor 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 Một số phần mềm số Trello sử dụng làm việc nhóm để theo dõi q trình hồn thiện Website, Masttermost phần mềm để trao đổi thông tin cá nhân với Thực hiện: Thực hành sử dụng phần mềm nêu Kết quả: Lập trình sử dụng cơng cụ miễn phí, giúp dễ dàng kết hợp công cụ với nhau, so với việc dung IDE Dương Thạnh Tín 2.2.2 Tìm hiểu giao diện Website Thời gian: ngày Nội dung: Được training kĩ thuật thiết kế Website đối tượng Webisite Các thành phần thường có trang web • Banner: file ảnh có kích thước dài, thường nằm 1/3 trang, dùng để quảng cáo • Logo: biểu tượng website, biểu tượng quan chủ quản website • Counter: phận đếm số người truy cập website • Search form: hộp thoại giúp người xem nhanh chóng tìm kiếm thơng tin cần tìm Search form dùng để tìm thơng tin trang, site hay tất site tồn cầu • Navigator: tập hợp đường liên kết dẫn đến trang chuyên đề Có thể gọi navigator menu list • Header: thành phần luôn diện phần tất trang web, thường chứa navigator Một website cấu trúc chặt chẽ cần phải có header • Footer: thành phần luôn diện phần tất trang, chứa thông tin cần thiết: Contact us, Private policy, About us hay nối với trang chuyên đề Mục đích header footer giúp người xem không bị lạc hướng kho thông tin bạn Nếu thiếu footer hay header, trang web trở thành trang cụt (orphan page) • Frame: hình thức chia khung trang, giúp bố trí trang vừa cố định hình thức, vừa thay đổi nội dung • Forum: trang thảo luận, người xem trao đổi thơng tin cho cách gõ ý kiến vào lưu lại trang web đợi người khác trả lời, hưởng ứng Forum giúp nâng cao kiến thức tập thể hấp dẫn người xem • Chat: thành phần khác giúp hai hay nhiều bạn đọc tán gẫu với trực tiếp Các thông tin Chat không lưu lại trang web • Multimedia: file ảnh, video hay âm lồng trang Thực hiện: Dương Thạnh Tín - Tham gia đầy đủ buổi training công ty Làm thực hành, kiểm tra kiến thức học Kết quả: - Nâng cao kỹ lập trình với ngơn ngữ HTML, CSS Có kiến thức quan trọng cho việc lập trình Website 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 2.2.3 Tìm hiểu Bootstrap Thời gian: ngày Nội dung: Được training kĩ thuật thiết kế Website - 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 - Những điểm thuận lợi sử dụng 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 Thực hiện: Dương Thạnh Tín 10 - Làm thực hành, kiểm tra kiến thức học Kết quả: - Nâng cao kỹ lập trình với ngơn ngữ HTML, CSS Làm quen biết công dụng cách sử dụng công cụ phục vụ cơng việc 2.2.4 Tìm hiểu JavaScript Thời gian: ngày (1 tuần) Nội dung: Tìm hiểu kiến thức nâng cao JavaScript - Các kiến thức Array, String, DOM, Object, Variable, Function, Scope, HTTP, … - Tìm hiểu TypeScript, npm, ES6 vấn đề liên quan đến JavaScript - Lập trình hướng chức Thực hiện: - Làm thực hành, kiểm tra kiến thức học Kết quả: - Làm quen biết công dụng cách sử dụng công cụ phục vụ công việc Có kiến thức quan trọng cho việc lập trình Website 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 2.2.5 Tìm hiểu Front-end với Reactjs Thời gian: ngày (1 tuần) Nội dung: Tìm hiểu kiến thức nâng cao Reactjs - Các kiến thức về: Component, JSX, State, Props, Lifecycle Hooks, Styles, … - Sử dụng Axios để tương tác với API - Tìm hiểu kiến trúc Redux - Sử dụng SCSS Dương Thạnh Tín 11 Thực hiện: - Làm thực hành, kiểm tra kiến thức học Kết quả: - Làm quen biết công dụng cách sử dụng công cụ phục vụ công việc Nắm cách triển khai ứng dụng 2.2.6 Tìm hiểu Back-end với Nodejs Thời gian: ngày (1 tuần) Nội dung: Được training kĩ thuật API vấn để liên quan Back-end - Các kiến thức Back-end: Middleware, route, Cookie, JWT, … - Triển khai sử dụng packages - Tìm hiểu Express thực Website theo mơ hình MVC - Sử dụng Database: MongoDB - Viết API Thực hiện: - Làm thực hành, kiểm tra kiến thức học Tham gia đầy đủ buổi training Kết quả: - Làm quen biết công dụng cách sử dụng công cụ phục vụ công việc Nắm cách triển khai ứng dụng Biết cách sử dụng MongoDB, Express Nodejs Thực project Sau training thực hành, thực tập sinh nắm kiến thực cách lập trình Front-end Back-end: Reactjs, Nodejs, Mongodb Các Mentor hướng dẫn thực tập sinh áp dụng kiến thức học để thực project Website Ecommerce Dương Thạnh Tín 12 Lịch làm việc Tuần Công việc - - Người hướng dẫn Mức độ hoàn thành Nhận xét người hướng dẫn Tìm hiểu cơng Chị Trần Mai Bích ty, cách tổ chức Trang 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 JavaScript, html, scss Tìm hiểu kiến thức Front-end với Reactjs Thực dự án Tìm hiểu kiến thức Back-end với Nodejs Thực dự án Thực dự án Anh Nguyễn Đình Sơn Anh Nguyễn Đình Sơn Anh Nguyễn Đình Sơn Dương Thạnh Tín 13 Chương III: Chi tiết Project Giới thiệu Website Với đề tài “Xây dựng Website Ecommerce” giúp cho khách hàng lựa chọn linh hoạt tiện lợi việc tìm mua sản phẩm thơng qua chức tìm kiếm giỏ hàng Các thơng tin sản phẩm hiển thị chi tiết với sản phẩm, từ khách hàng dễ dàng nhận biết lựa chọn thứ cần Các tính Vì nội cơng ty Designveloper nên em khái quát yêu cầu chức trang Web Danh sách tác nhân hệ thống: STT Tác nhân Ý nghĩa Người quản trị (Admin) Người quản trị hệ thống Người dùng Khách hàng có nhu cầu mua hàng truy cập vào hệ thống STT Use case Đăng nhập Ý nghĩa Cho phép người truy cập đăng nhập vào hệ thống Dựa vào vai trị user đăng nhập mà giới hạn thao tác với hệ thống Đăng ký Cho phép người truy cập tạo tài khoản đăng nhập vào hệ thống với thoogn tin đăng nhập lúc đăng ký Cập nhật thông tin Cho phếp người dùng sửa đổi thông profile tin cá nhân phù hợp hệ thống Dương Thạnh Tín 14 Quản lý sản phẩm Thực thêm/xoá/cập nhật/xem sản phẩm hệ thống Quản lý user Thực hiển thêm xóa cập nhật user đăng nhập vào hệ thống Quản lý đơn đặt hàng Cho phép người dùng xem đơn đặt hàng sau đăng nhập vơi vai trò admin Xem doanh sách sản Cho phép người dùng xem danh sách phâm bày sản phẩm phù hợp theo loại Thống kê doanh thu Thống kê doanh thu quán 10 Quản lý giỏ hàng Thực thêm/xoá/cập nhật/xem sản phẩm giỏ hàng hệ thống Thực Sinh viên: Dương Thạnh Tín Với giúp đỡ nhiệt tình anh Nguyễn Đình Sơn Quá trình thực Giai đoạn 1: - Trao đổi với mentor - Tìm hiểu chọn công nghệ phù hợp với project Kết quả: Front-end Reactjs, Back-end Nodejs sở liệu MongoDB Giai đoạn 2: - Thiết kế Website xây dựng chức Website - Demo cho mentor kết làm - Fix số lỗi trình thực Kết quả: Cơng việc hồn thành cách nhanh chóng hồn thiện Giai đoạn 3: - Được mentor yêu cầu thêm chức chỉnh sửa giao diện - Fix số lỗi trình thực Dương Thạnh Tín 15 Kết quả: Hồn thành việc triển khai dự án số chức cịn phát sinh lỗi q trình thực Dương Thạnh Tín 16 TÀI LIỆU THAM KHẢO [1]:https://scotch.io/tutorials/build-and-understand-a-simple-nodejs-website-with-userauthentication [2]: https://hackernoon.com/how-to-build-a-website-for-your-band-using-node-js-a7c856266c [3]: https://www.tutorialspoint.com/mongodb/index.htm [4] https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-get-started.php [5] https://www.mongodb.com/ [6] https://nodejs.org/en/ [7] https://reactjs.org/ [8] https://es6.io/ [9] http://expressjs.com/ Dương Thạnh Tín 17 TỔNG KẾT Như vậy, vòng tháng ngắn ngủi, em trải nghiệm làm quen với môi trường làm việc vô chuyên nghiệp Em học hỏi nhiều kiến thức nhiều kĩ quan trọng để thích nghi nhanh chóng với cơng việc lập trình viên chuyên nghiệp Chân thành cảm ơn anh chị công ty Designveloper hỗ trợ giúp đỡ em thời gian qua Em xin chân thành cảm ơn anh Nguyễn Đình Sơn giúp đỡ em thời gian thực tập cơng ty Dương Thạnh Tín ... Joyn’it, Bonux, Dương Thạnh Tín Chương II: Nội dung thực tập Đợt thực tập với chủ đề ? ?Xây dựng Website Ecommerce? ?? nhằm mục đích giúp sinh viên thực tập đào tạo toàn diện Front-end Back-end, đồng thời... Bằng việc lựa chọn thực đề tài ? ?Xây dựng website ecommerce? ??, chúng em muốn tìm hiểu đưa giải pháp tốt nhằm giải công việc bán hàng trực tuyến Thông qua việc thực xây dựng website chúng em học... Nodejs Thực project Sau training thực hành, thực tập sinh nắm kiến thực cách lập trình Front-end Back-end: Reactjs, Nodejs, Mongodb Các Mentor hướng dẫn thực tập sinh áp dụng kiến thức học để thực