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

Đặc biệt cảm ơn anh Thái, đã training reactjs và meteor, hướng dẫn, giúp đỡ cho em tậntình cả những khó khăn trong công việc, đến những khó khăn việc làm quen với môi trường mới; cảm ơn

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)

Thực tập sinh : Phan Thanh Tùng

TP Hồ Chí Minh, tháng 7 năm 2020

LỜI MỞ ĐẦU

Ngày nay, với sự phát triển chóng mặt của ngành công nghệ thông tin và mạng internet,hàng loạt ứng dụng của internet đã được ra đời, và thương mại điện tử (ecommerce) đã ra đời vàbùng phát mạnh mẽ Hàng loạt sàn thương mại điện tử đã ra đời và thịnh hành ở Việt Nam Cóthể nói, việc kinh doanh thông qua mạng internet đã và đang dần thay thế cho ngành bán hàngtruyền thống Vì vậy, việc xây dựng và phát triển một nền tảng bán hàng trực tuyến không còn

là một lợi thế mà là nhu cầu thiết yếu của mọi doanh nghiệp

Ngành lập trình web được sinh ra là do nhu cầu giải trí của giới trẻ bằng những thiết bịcông nghệ mới nhất Và cũng chính giới trẻ sẽ là nguồn nhân lực quan trọng cho việc phát triểncủa ngành lập trình web sau này Vì lý do này, em quyết định chọn lập trình web làm địnhhướng cho việc học tập của mình

Sau ba năm học tập trên trường, do mong muốn có thêm kinh nghiệm thực tế, cũng nhưmuốn được tham gia làm web trong một môi trường chuyên nghiệp, em có dự định là sẽ thựctập trong hè Vì vậy, em quyết định chọn Designveloper - một môi trường lý tưởng, hiện đại,chuyên nghiệp - là nơi sẽ giúp em thực hiện được dự định này

Đặc biệt cảm ơn anh Thái, đã training reactjs và meteor, hướng dẫn, giúp đỡ cho em tận

tình cả những khó khăn trong công việc, đến những 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 rất nhiều về các vấn đề khi làm việc trong công ty; cảm ơn anh Dương, đã chỉ dẫn chúng em về cách lên kế hoạch, những kỹ năng không thể thiếu của 1 developer; cảm ơn các anh Sơn, anh Quý, đã giúp đỡ để có thể vượt qua thời

gian thực tập tại công ty

Cũng xin cảm ơn thầy cô trong khoa Công nghệ phần mềm đã nhiệt tình hỗ trợ, tạo điềukiện em làm bài báo cáo này

Phan Thanh TùngTpHCM, ngày 28 tháng 7 năm 2020

NHẬN XÉT CỦA KHOA

MỤC LỤC

MỤC LỤC 1

Chương 1: Giới thiệu công ty thực tập 2

1 Giới thiệu về công ty Designveloper 2

2 Sản phẩm của công ty 2

Chương 2: Nội dung thực tập 3

1 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 3

2 Nghiên cứu kỹ thuật 3

3 Thực hiện project 7

4 Lịch làm việc 7

Chương 3: Chi tiết về project 9

1 Giới thiệu về Game 9

2 Thực hiện 11

3 Kế hoạch 11

TÀI LIỆU THAM KHẢO 13

TỔNG KẾT 14

Chương 1: Giới thiêu công ty thực tập

1 Giới thiệu công ty Designveloper

Designveloper là một công ty phát triển phần mềm được thành lập vào đầu năm

2013 ở Tp Hồ Chí Minh từ một tập thể các lập trình viên trẻ và đầy nhiệt huyết Designveloper có văn phòng đặt tại 144 Nguyễn Thái Bình, Quận 1 Với sứ mạnggiúp cho các doanh nghiệp start-up biến các ý 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 trong Java, Python, GoLang, NodeJS,ReactJS và React Native

2 Sản phẩm của công ty

1 LuminPDFLumin là 1 dịch vụ lưu trữ và tích hợp tệp PDF được phát triển bởi DSV Lumincho phép người dùng chỉnh sửa và lưu trữ tệp PDF trên cả ứng dụng mobile vàwebsite, đồng bộ hoá tệp PDF trên các thiết bị, và chia sẻ tệp PDF với mọi người.Hiện Lumin đã đạt được 22 triệu người dùng

2 Swell & SwitchboardSwell & Switchboard là 1 nền tảng quản lý doanh nghiệp trong ngành côngnghiệp năng lượng mặt trời Đến nay, nền tảng này đang được áp dụng và đánhgiá rất cao trong việc quản lý quy trình làm việc hàng ngày của khách hàng Với

thành tựu này, DSV đang phát triển nâng cao mô hình của sản phẩm để đạt được

độ phủ sóng ra toàn thế giới

3 Walrus EducationWalrus là một nền tảng để kết nối sinh viên, giáo viên và trường học Công nghệReact, React Native và Nodejs đã được dùng để phát triển các ứng dụng web vàmobile cho nền tảng này Nghiên cứu và thu thập các dữ liệu thích hợp để làm rõthông số kỹ thuật và để giúp cho khách hàng hiểu rõ những mong muốn của bảnthân.

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ênthực tập được đào tạo toàn diện về lập trình web, đồng thời rèn luyện những kỹ năng mềm nhưlàm việc nhóm, thuyết trình, giao tiếp Tại công ty, sinh viên có cơ hội được học tập, khám phá

và làm việc trong một môi trường phát triển phần mềm chuyên nghiệp

1. Tìm hiểu công ty và các kỹ năng cơ bản trong công ty

Thời gian : 1 ngày

Nội dung : Giới thiệu về công ty, cách tổ chức của công ty

Được nghe người phụ trách giới thiệu về công ty, quá trình thành lập và 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ủacông ty

Ngoài ra, thực tập sinh còn được giới thiệu về cách thức làm việc trong công tynhư thời gian đi làm, các quy định cần phải tuân thủ, cách sử dụng email trong côngviệc…

Kết quả : Hiểu thêm về công ty Designveloper, quá trình thành lập và phát triển Có

thêm các kỹ năng về việc sử dụng email trong công việc, làm việc có kế hoạch, có kỷluật, có trách nhiệm hơn

2. Nghiên cứu kỹ thuật

2.1 Các công cụ làm việc

Thời gian : 1 ngày

Nội dung : Tìm hiểu về các công cụ sẽ được sử dụng trong quá 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 về các công

cụ sẽ giúp ích cho trong công việc sau này Một số phần mềm trong số đó nhưMattermost - sử dụng để giao tiếp nội bộ trong công ty, Boon – product của công tydùng để tặng điểm cho nhân viên trong công ty, Github – trang quản lý source code

Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên.

Kết quả : Lập trình sử dụng các công cụ miễn phí, giúp dễ dàng kết hợp các công cụ

với nhau, so với việc dung các IDE

2.2 Tìm hiểu ngôn ngữ về Reactjs

Thời gian : 2 ngày

Nội dung : Được training về các khái niệm cơ bản và tối quan trọng của Reactjs, sử

dụng cho việc thiết kế UI

- JSX = Javascript + HTML Nó transform 1 element HTML về thành JS, giúp dev

có thể nhúng code HTML vào thẳng JS file thay vì phải chia thành 2 file độc lập

như lập trình web bình thường Chính JSX là điểm đột phá giúp React là 1 thưviện được sử dụng nhiều nhất của JS.

- Component :

Bên cạnh JSX, component là một khái niệm giúp React được ưa chuộng, bởi nógiúp chia ui thành nhiều các phẩn nhỏ hơn và dev có thể tái sử dụng cáccomponent ở nhiều trang khác nhau, thay vì phải code lại 1 thành phần giốngnhau nhiều lần Nhờ đó dev có thể dễ dàng chia nhỏ 1 trang web và dễ dàngdebug

- Props

Props là những giá trị input được truyền từ bên ngoài vào component và props làthuộc tính read-only, có nghĩa là component chỉ được phép sử dụng giá trị đó vàkhông có quyền thay đổi giá trị của nó

- State :

State là 1 object lưu trạng thái của component Với những biến được sử dụngtrong trang web và có thể thay đổi trong quá trình sử dụng, những biến này phảiđược lưu trữ trong state và không được phép thay đổi bằng cách gán trực tiếp giátrị mới mà phải sử dụng hàm setState (class component) hoặc dùng useState(function component)

Thực hiện :

- Đọc document từ trang chủ React và một vài bài viết tham khảo của các blogger

- Tham khảo từ những chia sẻ của mentor

Kết quả :

- Nâng cao kỹ năng lập trình với Reactjs

- Có được những kiến thức quan trọng cho việc lập trình frontend với reactjs

- Ngoài ra còn được biết thêm một số quy tắc trong việc viết code sao cho đúngchuẩn, dễ đọc, dễ hiểu

2.3 Lập trình backend với Meteor và Mongodb

Thời gian : 2 ngày

Nội dung: Các kiến thức cơ bản về Meteor để có thể làm ra một backend đơn giản.

- Khái niệm cơ bản về Meteor.

Meteor là 1 nền tảng được xây dựng dựa trên môi trường Nodejs cho phép tạo racác ứng dụng web thời gian thực Nó đảm bảo việc đồng bộ thông tin giữa CSDLcủa ứng dụng và giao diện người dùng

Vì được xây dựng trên nền nodejs nên Meteor sử dụng JS trên cả client và server.Hơn nữa, Meteor còn cho phép chia sẻ code giữa 2 môi trường này

Khác với một vài framework của js như Angular, Meteor không chỉ là 1framework mà còn là cả 1 hệ sinh thái (ecosystem) Meteor cung cấp gần như toàn

• Sử dụng hệ thống module tương tự npm, Maven hay Nuget

• Một số tool để build/deploy web site và mobile app Chỉ cần code 1 lần, cóthể deploy nó thành 1 web app hoặc build thành 1 mobile app

Một vào ưu điểm giúp Meteor được ưa chuộng:

• Không cần quá nhiều kiến thức về lập trình, chỉ cần biết về JS, một chútkiến thức về OOP và database là dược Mọi thao tác với database đều thôngqua API của Meteor, viết bằng JS, không cần phải sử dụng SQL

• Nhanh chóng tạo ra sản phẩm: được các startup, các doanh nghiệp nhỏ ưachuộng

• Có vô số module đã viết sẵn, nhờ đó chỉ cần gắn vào và sử dụng Ví dụviệc đăng nhập, phân quyền khá phức tạp trong C#, Java, trong Meteorchỉ cần modile vào, chỉnh sửa lại để phù hợp với app là được

• Tích hợp nhiều công nghệ: Nodejs, Express, MongoDB, Websocket,Phonegap,

• Code ít, được nhiều, deploy nhanh

Thực hiện :

- Tham gia đầy đủ các buổi trainning

- Tìm kiếm tài liệu trên mạng để tìm hiểu thêm

Kết quả :

- Hiểu được những khái niệm cơ bản trong lập trình backend với Meteor

2.4 Tìm hiểu về Bootstrap

Thời gian : 1 ngày

Nội dung : Tìm hiểu về các kỹ thuật làm frontend với bootstrap

- Bootstrap là 1 framework HTML, CSS, và JavaScript cho phép người dùng dễdàng thiết kế website theo 1 chuẩn nhất định, tạo các website thân thiện với cácthiết bị cầm tay như mobile, ipad, tablet,

- Bootstrap bao gồm những cái cơ bản có sẵn như: typography, forms, buttons,tables, navigation, modals, image carousels và nhiều thứ khác Trong bootstrap cóthêm nhiều Component, Javascript hỗ trợ cho việc thiết kế reponsive của bạn dễdàng, thuận tiện và nhanh chóng hơn

- Những điểm thuận lợi khi sử dụng bootstrap:

o Rất dễ để sử dụng: Nó đơn giản vì nó được base trên HTML, CSS vàJavascript chỉ cẩn có kiến thức cơ bản về 3 cái đó là có thể sử dụngbootstrap tốt

o Responsive: Bootstrap xây dựng sẵn reponsive css trên các thiết bịIphones, tablets, và desktops Tính năng này khiến cho người dùng tiếtkiệm được rất nhiều thời gian trong việc tạo ra một website thân thiện vớicác thiết bị điện tử, thiết bị cầm tay

Thực hiện :

- Làm ra các bài thực hành, kiểm tra kiến thức đã học

Kết quả:

- Nâng cao kỹ năng lập trình với ngôn ngữ HTML, CSS

- Làm quen và biết được công dụng và cách sử dụng các công cụ phục vụ trongcông việc

3. Thực hiện project

Sau một tuần tìm hiểu về các kiến thức mới, thực tập sinh đã nắm được những kiến thực

cơ bản về Reactjs và Meteor Trong 3 tuần còn lại, trainer đã hướng dẫn thực tập sinh ápdụng những kiến thức đã học để thực hiện một project website ecommerce

Chi tiết đồ án sẽ được nói ở phần sau

2 - Tìm hiểu về Reactjs- Thực hành Reactjs

- Làm bài test Reactjs

Anh Nguyễn Xuân

- Báo cáo cuối đợt thực tập

Anh Nguyễn XuânThái

100%

Chương 3: Chi tiết về project

1 Giới thiệu về game

Với đề tài “Xây dựng website ecommerce”, trainee phải phát triển một website gồm 2 phần client và admin Phía client cho phép người dùng lựa chọn linh hoạt

và tiện lợi trong việc tìm sản phẩm và đặt hàng Phía admin cho phép người dùng quản lý đơn hàng.

2 Nội dung:

1 Danh sách tác nhân của hệ thống:

1 Người dùng (user) Khách hàng có nhu cầu mua hàng truy cập vào

2 Đăng ký (user) Cho phép người dùng tạo tài khoản với các

thông tin cung cấp cho hệ thống

3 Lọc sản phẩm (user) Cho phép người dùng xem danh sách sản phẩm

và lọc sản phẩm theo các filter khác nhau

hàng và quản lý giỏ hàng của mình

(admin) thay đổi trạng thái đơn hàng

đặt đơn hàng hoặc huỷ đơn hàng

3 Thực hiện

Sinh viên: Phan Thanh Tùng

Với sự giúp đỡ nhiệt tình của mentor Nguyễn Xuân Thái + các anh chị dev trong côngty

- Thiết kế giao diện cho phần client

- Khởi tạo project Meteor + MongoDB

- Trao đổi với mentor về 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 và hoàn thành ứng dụng

- Demo cho mentor

Kết quả : Hoàn thành việc phát triển ứng dụng theo các yêu cầu đề ra đúng thời hạn

5 Một số hình ảnh giao diện của ứng dụng

- Header:

- Footer:

- Homepage:

- Đăng nhập:

- Đăng ký:

- Danh sách sản phẩm:

- Chi tiết sản phẩm:

- Giỏ hàng:

- Trang đặt hàng:

- Quản lý đơn hàng:

- Cập nhật thông tin đơn hàng:

- Quản lý sản phẩm:

- Thêm sản phẩm:

TÀI LIỆU THAM KHẢO

TỔNG KẾT

Như vậy, chỉ trong vòng một tháng ngắn ngủi, em đã kịp hoàn thành một websiteecommerce bằng Reactjs + Meteor Web đã có được một vài tính năng như yêu cầu đề ra Dothời gian có hạn nên tính năng web còn đơn giản, hình ảnh chưa được đẹp như mong đợi.Nhưng do web phát triển theo framework có tính kế thừa nên sau này khi có thời gian sẽ có thểphát triển lên mức cao hơn

Chân thành cảm ơn sự giúp đỡ của các anh chị nhóm trainer Designveloper để em có thểhoàn thành website này