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 E-COMMERCE Công ty thực tập : Designveloper (DSV) Người phụ trách : Hoàng Văn Dũng Thực tập sinh : Nguyễn Tây Trung TP Hồ Chí Minh, tháng năm 2021 Người phụ trách: Hoàng Văn Dũng Sinh viên: Nguyễn Tây Trung LỜI MỞ ĐẦU E-Commerce (Electronic commerce) hay gọi thương mại điện tử – hoạt động mua bán sản phẩm thông qua dịch vụ trực tuyến Thương mại điện tử tiện lợi đến mức người tiêu dùng mua bán sản phẩm tồn giới thời gian Đây điều mà cửa hàng truyền thống khơng thể có Có thể nói, việc kinh doanh thông qua mạng internet dần thay cho ngành bán hàng truyền thống Vì vậy, việc xây dựng phát triển tảng bán hàng trực tuyến khơng cịn lợi mà nhu cầu thiết yếu doanh nghiệp Bằng việc lựa chọn thực đề tài “Xây dựng website E-Commerce”, 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 Vì lý này, em định chọn lập trình web làm định hướng cho việc học tập 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àm web môi trường chuyên nghiệp, em có dự định thực tập hè Vì vậy, em định chọn Designveloper - môi trường lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định Người phụ trách: Hoàng Văn Dũng Sinh viên: Nguyễn Tây Trung LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty Designveloper 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, em tiếp thu kiến thức quan trọng để làm Website thương mại điện thử 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 Dũng, training cho em HTML/CSS, ReactJs MeteorJS, hướng dẫn, giúp đỡ cho 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 chị Trang training hỗ trợ chúng em nhiều vấn đề công ty, giúp em hịa nhập thích nghi nhanh với văn hóa cơng ty, cảm ơn anh Nhật dẫn chúng em cách làm báo cáo, lên kế hoạch, debug code, kỹ thiếu developer; cảm ơn chị My, anh Nhật, giúp đỡ để vượt qua thời gian thực tập công ty Cũng xin cảm ơn thầy 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 Nguyễn Tây Trung TpHCM, ngày 11 tháng năm 2021 Người phụ trách: Hoàng Văn Dũng Sinh viên: Nguyễn Tây Trung NHẬN XÉT CỦA KHOA Người phụ trách: Hoàng Văn Dũng Sinh viên: Nguyễn Tây Trung 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 Designveloper .6 Sản phẩm công ty Chương 2: Nội dung thực tập .10 Tìm hiểu cơng ty kỹ công ty .10 Nghiên cứu kỹ thuật 10 Thực project 13 Lịch làm việc .14 Chương 3: Chi tiết project .15 Giới thiệu project 15 Nội dung 15 Thực 16 Quá tình thực .16 Một số hình ảnh giao diện ứng dụng .17 TÀI LIỆU THAM KHẢO 23 TỔNG KẾT 24 Người phụ trách: Hoàng Văn Dũng Sinh viên: Nguyễn Tây Trung Chương 1: Giới thiêu công ty thực tập Giới thiệu công ty Designveloper 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 chun gia VOIP Designveloper có văn phịng đặt 144 Nguyễn Thái Bình, Quận Với sứ mạng/nhiệm vụ Designveloper giúp doanh nghiệp start-up biến ý tưởng thành sản phẩm thật Designveloper có lập trình viên chuyên nghiệp Java, Python, GoLang, C++, PHP, Angular, NodeJS, ReactJS React Native Người phụ trách: Hoàng Văn Dũng Sinh viên: Nguyễn Tây Trung Sản phẩm công ty LuminPDF LuminPDF dịch vụ lưu trữ tích hợp tệp PDF phát triển Designveloper LuminPDF cho phép người dùng chỉnh sửa lưu trữ tệp PDF ứng dụng di động website, đồng hóa tệp PDF thiết bị, chia sẻ tệp PDF với người Hiện LuminPDF đạt 22 triệu người dùng Swell & Switchboard Người phụ trách: Hoàng Văn Dũng Sinh viên: Nguyễn Tây Trung Swell & Switchboard tảng quản lý doanh nghiệp ngành công nghiệp lượng mặt trời Đến nay, tảng áp dụng đánh giá cao việc quản lý quy trình làm việc hàng ngày khách hàng Với thành tựu này, Designveloper phát triển nâng cao mơ hình sản phẩm để đạt độ phủ sóng tồn giới Joyn’it Nền tảng Joyn’it cung cấp dịch vụ dành riêng cho cộng đồng để tạo kiện dễ dàng thông báo cho thành viên kiện diễn Người phụ trách: Hoàng Văn Dũng Sinh viên: Nguyễn Tây Trung Bonux Bonux dự án xây dựng ví tiền điện tử với tính lưu trữ, quản lý thực giao dịch cho người sử dụng Thiết kế giao diện UI-UX số kỹ thuật khác áp dụng vào trình phát triển dự án Người phụ trách: Hoàng Văn Dũng Sinh viên: Nguyễn Tây Trung 10 Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Xây dựng website E-Commerce” 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, đồ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 game 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, 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.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, 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 Một số phần mềm số Mattermost - sử dụng giao tiếp nội công ty, Boon – sản phẩm công ty dùng để nhân viên tặng điểm cho nhau, Github – trang quản lý source code Thực : Thực hành sử dụng phần mềm nêu Kết : 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 dùng IDE 2.2 Tìm hiểu ReactJS Thời gian : ngày Nội dung : Được training khái niệm thuật ngữ ReactJS - JSX cú pháp mở rộng cho JavaScript Reactjs khuyến khích người dùng sử dụng JSX với React để mơ tả giao diện (UI) JSX trông giống Ngôn ngữ Khuôn mẫu (Template language), JSX kèm với tồn tính JavaScript Người phụ trách: Hoàng Văn Dũng Sinh viên: Nguyễn Tây Trung 11 - Component React xây dựng xung quanh component, không dùng template framework khác Trong React, xây dựng trang web sử dụng thành phần (component) nhỏ Chúng ta tái sử dụng component nhiều nơi, với trạng thái thuộc tính khác nhau, component lại chứa thành phần khác Mỗi component React có trạng thái riêng, thay đổi, React thực cập nhật component dựa thay đổi trạng thái Mọi thứ React component Chúng giúp bảo trì mã code làm việc với dự án lớn Một react component đơn giản cần method render Có nhiều methods khả dụng khác, render method chủ đạo Có loại component: Functional Class Component - Props: giúp component tương tác với nhau, component nhận input gọi props, trả thuộc tính mơ tả component render Prop bất biến - State: thể trạng thái ứng dụng, state thay đồi component đồng thời render lại để cập nhật UI Thực : - Đọc documentation từ trang chủ React vài viết tham khảo blogger Viblo - Tham khảo từ chia sẻ mentor Kết : - 2.3 Nâng cao kỹ lập trình với Reactjs Có kiến thức quan trọng cho việc lập trình frontend với reactjs Ngồi biết thêm số quy tắc việc viết code cho chuẩn, dễ đọc, dễ hiểu Tìm hiểu Bootstrap Thời gian : ngày Nội dung : Được training cãc kĩ thuật Frontend với 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 người dùng dễ dàng, thuận tiện nhanh chóng Người phụ trách: Hoàng Văn Dũng Sinh viên: Nguyễn Tây Trung 12 - Lí nên 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 : - Đọc documentaion Bootstrap Làm thực hành để củng cố kiến thức Hỏi mentor có thắc mắc Kết quả: 2.4 - 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 Tìm hiểu MeteorJs MongoDB Thời gian : ngày Nội dung : Được training cãc kĩ thuật để làm backend đơn giản - Meteor tảng xây dựng dựa môi trường NodeJS cho phép tạo ứng dụng web theo thời gian thực Nó đảm bảo việc đồng thơng tin sở liệu ứng dụng giao diện người dùng - Vì xây dựng NodeJS nên Meteor sử dụng JavaScript client server Hơn nữa, Meteor cho phép chia sẻ code hai mơi trường Người phụ trách: Hồng Văn Dũng Sinh viên: Nguyễn Tây Trung 13 - Một vài ưu điểm Meteor:  Không cần nhiều kiến thức lập trình, cần HTML, CSS, Javascript, chút kiến thức OOP database Mọi thao tác tới DB thông qua API Meteor, viết Javascript Do mà người dùng khơng cần biết viết câu lệnh SQL  Nhanh chóng tạo sản phẩm  Có vơ số module viết sẵn, cần gắn vào sử dụng Ví dụ việc đăng nhập, phân quyền phức tạp C#, Java, … Meteor cần gắn module vào chỉnh sửa chút theo ý sử dụng  Tích hợp nhiều cơng nghệ: NodeJS, Express, MongoDB, WebSocket, Phonegap  Code ít, nhiều Deploy nhanh Thực : - Đọc documentaion Meteor Tham gia đầy đủ buổi training Tìm kiếm trài liệu mạng xem tutorial Kết quả: - Hiểu khái niệm lập trình Backend với Meteor Thực project Sau tuần đầu training thực hành, thực tập sinh nắm kiến thực ReactJS, Meteor Bootstrap Trong tuần lại, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để thực project Website ECommerce Chi tiết đồ án nói phần sau Lịch làm việc Tuần Công việc Người Mức độ Người phụ trách: Hoàng Văn Dũng Sinh viên: Nguyễn Tây Trung 14 hướng dẫn - 4-7 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 Mattermost - Tìm hiểu ReactJS - Thực hành ReactJS - Làm test ReactJS - Tìm hiểu Meteor MongoDB - Thực hành số ví dụ - Lên kế hoạch thực dự án - Thực dự án - Review code - Test code Giai đoạn kế thúc, báo cáo: Fix bug Demo code Báo cáo cuối đợt thực tập Bài test củng cố kiến thức Chị Trang hoàn thành 100% Anh Hoàng 100% Văn Dũng Anh Hoàng 100% Văn Dũng Anh Hoàng 100% Văn Dũng Anh Hoàng 100% Văn Dũng Chương 3: Chi tiết project Giới thiệu project Người phụ trách: Hoàng Văn Dũng Sinh viên: Nguyễn Tây Trung 15 Với đề tài “Xây dựng Website E-Commerce”, thực tập sinh phải xây dựng website gồm phần client admin Phía client cho phép người dùng tìm kiếm sản phẩm tạo đơn hàng Phía admin cho phép người dùng quản lý đơn hàng quản lý sản phẩm Nội dung: Danh sách tác nhân hệ thống: STT Tên tác nhân Ý nghĩa Người dùng (user) Khách hàng có nhu cầu mua hàng truy cập vào hệ thống Người quản trị (admin) Người quản trị hệ thống Các tính chính: STT Use case Ý nghĩa Đăng admin) nhập (user, Cho phép người dùng truy cập vào hệ thống Người dùng yêu cầu đăng nhập muốn đặt hàng Đăng ký (user) Cho phép người dùng tạo tài khoản với thông tin cung cấp cho hệ thống Lọc sản phẩm (user) Cho phép người dùng xem danh sách sản phẩm lọc sản phẩm theo filter khác Giỏ hàng (user) Cho phép người dùng thêm sản phẩm vào giỏ hàng quản lý giỏ hàng Đặt hàng (user) Cho phép người dùng đặt hàng Quản lý (admin) sản phẩm Cho phép admin tìm kiếm/ thêm/ xố/ sửa thơng tin sản phẩm Quản lý (admin) đơn hàmg Cho phép admin quản lý đơn hàng, tìm kiếm, thay đổi trạng thái đơn hàng Email Gửi mail tới khách hàng đăng ký tài khoản, đặt đơn hàng huỷ đơn hàng Người phụ trách: Hoàng Văn Dũng Sinh viên: Nguyễn Tây Trung 16 Thực hiện: Sinh viên: Nguyễn Tây Trung Với giúp đỡ nhiệt tình mentor Hồng Văn Dũng anh chị dev công ty Quá trình thực hiện: Giai đoạn 1: - Trao đổi với mentor để thống công nghệ sử dụng Tìm hiểu cơng nghệ phù hợp với project Kết : - Sử dụng Reactjs + Meteor + MongoDB để phát triển ứng dụng Giai đoạn 2: - Thiết kế giao diện cho phần client - Khởi tạo project Meteor + MongoDB - Trao đổi với mentor CSDL + kế hoạch hoàn thành ứng dụng Giai đoạn 3: - Thiết kế giao diện cho phần admin - Hoàn thiện DB + Viết API Giai đoạn 4: - Bổ sung phần gửi email - Fix bug hoàn thành ứng dụng - Demo cho mentor Kết : Hoàn thành việc phát triển ứng dụng theo yêu cầu đề thời hạn Một số hình ảnh giao diện ứng dụng: Người phụ trách: Hoàng Văn Dũng Sinh viên: Nguyễn Tây Trung 17 - Homepage: - Form đăng nhập: Người phụ trách: Hoàng Văn Dũng Sinh viên: Nguyễn Tây Trung 18 - Form đăng ký: - Danh sách sản phẩm: Người phụ trách: Hoàng Văn Dũng Sinh viên: Nguyễn Tây Trung 19 - Chi tiết sản phẩm: - Trang giỏ hàng đặt hàng - Quản lý đơn hàng admin Người phụ trách: Hoàng Văn Dũng Sinh viên: Nguyễn Tây Trung 20 - Quản lý sản phẩm Người phụ trách: Hoàng Văn Dũng Sinh viên: Nguyễn Tây Trung 21 Người phụ trách: Hoàng Văn Dũng Sinh viên: Nguyễn Tây Trung 22 TÀI LIỆU THAM KHẢO For React https://reactjs.org/docs/getting-started.html https://www.youtube.com/user/LevelUpTuts For HTML/CSS https://www.w3schools.com/ For Bootstrap https://getbootstrap.com/ For Meteor https://docs.meteor.com/ https://www.youtube.com/user/LevelUpTuts For MongoDB https://docs.mongodb.com/ More: https://stackoverflow.com/ Người phụ trách: Hoàng Văn Dũng Sinh viên: Nguyễn Tây Trung 23 Người phụ trách: Hoàng Văn Dũng Sinh viên: Nguyễn Tây Trung 24 TỔNG KẾT Như vậy, vòng tháng ngắn ngủi, em kịp hoàn thành hoàn thành website E-commerece Reactjs Meteor Web có đầy đủ tính đề ban đầu Do thời gian có hạn nên tính web cịn đơn giản, hình ảnh chưa đẹp mong đợi Nhưng web 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 Designveloper, để em hồn thành website E-commerce Cảm ơn anh Hoàng Văn Dũng giúp em hoàn thành báo cáo Người phụ trách: Hoàng Văn Dũng Sinh viên: Nguyễn Tây Trung ... tiết project Giới thiệu project Người phụ trách: Hoàng Văn Dũng Sinh viên: Nguyễn Tây Trung 15 Với đề tài ? ?Xây dựng Website E- Commerce? ??, thực tập sinh phải xây dựng website gồm phần client admin... Tây Trung 10 Chương 2: Nội dung thực tập Đợt thực tập với chủ đề ? ?Xây dựng website E- Commerce? ?? 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, đồng thời rèn luyện kỹ mềm... Meteor cần gắn module vào chỉnh sửa chút theo ý sử dụng  Tích hợp nhiều cơng nghệ: NodeJS, Express, MongoDB, WebSocket, Phonegap  Code ít, nhiều Deploy nhanh Thực : - Đọc documentaion Meteor