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 Xuân Thái Thực tập sinh : Phan Thanh Tùng TP Hồ Chí Minh, tháng năm 2020 Người phụ trách: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tùng LỜI MỞ ĐẦU Ngày nay, với phát triển chóng mặt ngành cơng nghệ thơng tin mạng internet, hàng loạt ứng dụng internet đời, thương mại điện tử (ecommerce) đời bùng phát mạnh mẽ Hàng loạt sàn thương mại điện tử đời thịnh hành Việt Nam 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 lợi mà nhu cầu thiết yếu doanh nghiệp Ngành lập trình web sinh nhu cầu giải trí giới trẻ thiết bị công nghệ Và giới trẻ nguồn nhân lực quan trọng cho việc phát triển ngành lập trình web sau 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: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tùng 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 thương mại điện tử 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 Thái, training reactjs meteor, 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 đề làm việc công ty; cảm ơn anh Dương, dẫn chúng em cách lên kế hoạch, kỹ thiếu developer; cảm ơn anh Sơn, anh Quý, 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 Phan Thanh Tùng TpHCM, ngày 28 tháng năm 2020 Người phụ trách: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tùng NHẬN XÉT CỦA KHOA Người phụ trách: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tù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 Designveloper .2 Sản phẩm công ty Chương 2: Nội dung thực tập .3 Tìm hiểu cơng ty kỹ công ty Nghiên cứu kỹ thuật Thực project Lịch làm việc Chương 3: Chi tiết project .9 Giới thiệu Game .9 Thực 11 Kế hoạch 11 TÀI LIỆU THAM KHẢO 13 TỔNG KẾT 14 Người phụ trách: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tùng 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 thành lập vào đầu năm 2013 Tp Hồ Chí Minh từ tập thể lập trình viên trẻ đầy nhiệt huyết Designveloper có văn phịng đặt 144 Nguyễn Thái Bình, Quận Với sứ mạng giúp cho doanh nghiệp start-up biến ý tưởng thành sản phẩm thực sự, DSV có đội ngũ lập trình viên chuyên nghiệp Java, Python, GoLang, NodeJS, ReactJS React Native Sản phẩm công ty LuminPDF Lumin dịch vụ lưu trữ tích hợp tệp PDF phát triển DSV Lumin cho phép người dùng chỉnh sửa lưu trữ tệp PDF ứng dụng mobile website, đồng hoá tệp PDF thiết bị, chia sẻ tệp PDF với người Hiện Lumin đạt 22 triệu người dùng Người phụ trách: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tùng Swell & Switchboard 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 Người phụ trách: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tùng thành tựu này, DSV phát triển nâng cao mơ hình sản phẩm để đạt độ phủ sóng tồn giới Người phụ trách: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tùng Walrus Education Walrus tảng để kết nối sinh viên, giáo viên trường học Công nghệ React, React Native Nodejs dùng để phát triển ứng dụng web mobile cho tảng Nghiên cứu thu thập liệu thích hợp để làm rõ thơng số kỹ thuật để giúp cho khách hàng hiểu rõ mong muốn thân Người phụ trách: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tùng 10 Chương 2: 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 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 phần mềm 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 : 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 – product công ty dùng để tặng điểm cho nhân viên công ty, 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 dung IDE 2.2 Tìm hiểu ngơn ngữ Reactjs Thời gian : ngày Nội dung : Được training khái niệm tối quan trọng Reactjs, sử dụng cho việc thiết kế UI - JSX = Javascript + HTML Nó transform element HTML thành JS, giúp dev nhúng code HTML vào thẳng JS file thay phải chia thành file độc lập Người phụ trách: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tùng 11 lập trình web bình thường Chính JSX điểm đột phá giúp React thư viện sử dụng nhiều JS - Component : Bên cạnh JSX, component khái niệm giúp React ưa chuộng, giúp chia ui thành nhiều phẩn nhỏ dev tái sử dụng component nhiều trang khác nhau, thay phải code lại thành phần giống nhiều lần Nhờ dev dễ dàng chia nhỏ trang web dễ dàng debug - Props Props giá trị input truyền từ bên ngồi vào component props thuộc tính read-only, có nghĩa component phép sử dụng giá trị khơng có quyền thay đổi giá trị - State : State object lưu trạng thái component Với biến sử dụng trang web thay đổi trình sử dụng, biến phải lưu trữ state không phép thay đổi cách gán trực tiếp giá trị mà phải sử dụng hàm setState (class component) dùng useState (function component) Thực : - Đọc document từ trang chủ React vài viết tham khảo blogger - 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 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 backend với Meteor Mongodb Thời gian : ngày Nội dung: Các kiến thức Meteor để làm backend đơn giản - Khái niệm Meteor Meteor tảng xây dựng dựa môi trường Nodejs cho phép tạo ứng dụng web thời gian thực Nó đảm bảo việc đồng thông tin CSDL ứng dụng giao diện người dùng Người phụ trách: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tùng 12 Vì xây dựng nodejs nên Meteor sử dụng JS client server Hơn nữa, Meteor cho phép chia sẻ code môi trường Khác với vài framework js Angular, Meteor khơng framework mà cịn hệ sinh thái (ecosystem) Meteor cung cấp gần toàn thứ cần để làm ứng dụng web/mobile: • Phần frontend sử dụng framework/library có JS như: React, Vue, Angular, • Phần backend sử dụng Nodejs Express để làm server, dùng MongoDB làm database Tuy nhiên, khơng cần phải tìm hiểu nodejs hay express mà cần code Meteor • Sử dụng hệ thống module tương tự npm, Maven hay Nuget • Một số tool để build/deploy web site mobile app Chỉ cần code lần, deploy thành web app build thành mobile app Một vào ưu điểm giúp Meteor ưa chuộng: • Khơng cần q nhiều kiến thức lập trình, cần biết JS, chút kiến thức OOP database dược Mọi thao tác với database thông qua API Meteor, viết JS, khơng cần phải sử dụng SQL • Nhanh chóng tạo sản phẩm: startup, doanh nghiệp nhỏ ưa chuộng • Có vơ số module viết sẵn, nhờ 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 modile vào, chỉnh sửa lại để phù hợp với app • Tích hợp nhiều cơng nghệ: Nodejs, Express, MongoDB, Websocket, Phonegap, • Code ít, nhiều, deploy nhanh Thực : - Tham gia đầy đủ buổi trainning Tìm kiếm tài liệu mạng để tìm hiểu thêm Người phụ trách: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tùng 13 Kết : 2.4 Hiểu khái niệm lập trình backend với Meteor Tìm hiểu Bootstrap Thời gian : ngày Nội dung : Tìm hiểu kỹ thuật làm 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 bạn dễ dàng, thuận tiện nhanh chóng - Những điểm thuận lợi sử dụng bootstrap: o 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 o 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 Thực : - 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 Thực project Người phụ trách: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tùng 14 Sau tuần tìm hiểu kiến thức mới, thực tập sinh nắm kiến thực Reactjs Meteor 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 - 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 - Thực hành số vd - Lên kế hoạch - Thực dự án - Review code - Testing Giai đoạn kết thúc, báo cáo : - Fix bug - Demo code - Báo cáo cuối đợt thực tập Người hướng dẫn Chị Trang Mức độ hoàn thành 100% Anh Nguyễn Xuân 100% Thái Anh Thái Anh Thái Anh Thái Anh Thái Nguyễn Xuân 100% Nguyễn Xuân 100% Nguyễn Xuân 100% Nguyễn Xuân 100% Chương 3: Chi tiết project Người phụ trách: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tùng 15 Giới thiệu game Với đề tài “Xây dựng website ecommerce”, trainee phải phát triển website gồm phần client admin Phía client cho phép người dùng lựa chọn linh hoạt tiện lợi việc tìm sản phẩm đặt hàng Phía admin cho phép người dùng quản lý đơn hàng 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 đơn hàmg Cho phép admin quản lý đơm hàng, tìm kiếm, lý Người phụ trách: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tùng 16 (admin) 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 Thực Sinh viên: Phan Thanh Tùng Với giúp đỡ nhiệt tình mentor Nguyễn Xuân Thái + anh chị dev cơng ty Q trình thực Giai đoạn 1: - Trao đổi với mentor để thống cơng nghệ sử dụng Tìm hiểu cơng nghệ 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 database + 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 Người phụ trách: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tùng 17 Một số hình ảnh giao diện ứng dụng - Header: - Footer: - Homepage: - Đăng nhập: Người phụ trách: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tùng 18 - Đăng ký: Người phụ trách: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tùng 19 - Danh sách sản phẩm: - Chi tiết sản phẩm: - Giỏ hàng: Người phụ trách: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tùng 20 - Trang đặt hàng: Người phụ trách: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tùng 21 - Quản lý đơn hàng: - Cập nhật thông tin đơn hàng: Người phụ trách: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tùng 22 - Quản lý sản phẩm: - Thêm sản phẩm: Người phụ trách: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tùng 23 Người phụ trách: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tùng 24 TÀI LIỆU THAM KHẢO For React https://reactjs.org/docs/create-a-new-react-app.html For Meteor https://docs.meteor.com/ For MongoDB https://docs.mongodb.com/ More: https://stackoverflow.com/ https://www.udemy.com/course/meteor-react-tutorial/ Người phụ trách: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tùng 25 TỔNG KẾT Như vậy, vòng tháng ngắn ngủi, em kịp hoàn thành website ecommerce Reactjs + Meteor Web có vài tính yêu cầ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 hoàn thành website Người phụ trách: Nguyễn Xuân Thái Sinh viên: Phan Thanh Tùng ... Sinh viên: Phan Thanh Tùng 10 Chương 2: 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 lập trình web, đồng thời rèn... tuần tìm hiểu kiến thức mới, thực tập sinh nắm kiến thực Reactjs Meteor 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... Reactjs - Thực hành Reactjs - Làm test Reactjs - Tìm hiểu Meteor - Thực hành số vd - Lên kế hoạch - Thực dự án - Review code - Testing Giai đoạn kết thúc, báo cáo : - Fix bug - Demo code - Báo cáo