BÁO CÁO THỰC TẬP LẬP TRÌNH FONT END REACTJS WEBSITE THƯƠNG MẠI ĐIỆN TỬ RANUS.VN

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

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 FONT END REACTJS

WEBSITE THƯƠNG MẠI ĐIỆN TỬ

RANUS.VN

Công ty thực tập : Ranus Tech Người phụ trách : Hoàng Quang Huy

TP Hồ Chí Minh, tháng 06 năm 2022

LỜI MỞ ĐẦU

Trong thời đại 4.0 ngày nay, công nghệ thông tin đã và đang phát triển mạnh, được ứngdụng rộng vào hầu hết tất cả lĩnh vực Nắm bắt được điều này công ty Ranus Tech xây dựngwebsite thương mại điện tử Ranus.vn nhằm đem lại cho khách hàng tiện ích khi mua hàng trựctuyến tin cậy và tiết kiệm Qua đó, khách hàng có thể tìm kiếm thông tin trực tuyến về các sảnphẩm thời trang chất lượng được thiết kế bởi hàng nghìn nhà sáng tạo khác nhau Mục tiêuwebsite ranus.vn hướng tới là cầu nối thương mại giữa nhà sáng tạo, khách hàng và các sảnphẩm chất lượng

Do mong muốn có thêm kinh nghiệm thực tế và cảm thấy hứng thú với dự án của công tynên em quyết định chọn Ranus Tech là nơi thực tập trong học kỳ này

NHẬN XÉT CỦA KHOA

MỤC LỤC

MỤC LỤC 6

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

1 Giới thiệu về công ty Ranus 7

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

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

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

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

3 Thực hiện project 9

4 Lịch làm việc 9

Chương 3: Các công việc đã làm 10

1 Header bar và slider trang home page 10

2 Header layout mobile trang home page 11

3 Content trang home page cửa hàng 11

4 Các công việc khác 12

TÀI LIỆU THAM KHẢO 28

TỔNG KẾT 28

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

1 Giới thiệu công ty Ranus Tech

Ranus tech tiền thân là công ty E-Partner là công ty con của Lazada, nay là công tystart-up cung cấp dịch vụ và công nghệ liên quan đến lĩnh vực thương mại điện tử

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

Ranus tech đang phát triển website Ranus.vn cung cấp dịch vụ thương mại điện tử

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

Thực hiện các task được giao

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 Ranus Tech, 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, cài đặt các công cụ phục vụ cho công việc như :AIPhotoshop, visual studio code, visual studio, smart git

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àm quen được với các công cụ

2.2 Đọc hiểu source code, fix bug được giao

Thời gian : 5 ngày (1 tuần)

Nội dung : Do dự án đã được phát triển trước đó 5-6 tháng nên cần phải đọc source

code và fix các bug nhỏ được giao để hiểu hơn về các tính năng, các component đãđược team phát triển trước đó

3 Thực hiện project

Sau 1 tuần đọc hiểu source code và fix các bug nhỏ được giao, đã nắm được sơ bộ dự án

mà team đang phát triển, tiến hành nhận và hoàn thành thành các task theo print củateam

Chi tiết công việc đã làm sẽ được nói ở phần sau

4 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 của người hướng dẫn

1

- Tìm hiểu về công

ty, cách tổ chứccủa công ty

- Làm quen với cáccông cụ làm việctrong công ty

- Đọc code, fix bug

để hiểu về dự áncủa đang phát triểncủa công ty

Anh Hoàng QuangHuy

2 - Thực hiện các tasktheo Print của team Anh Hoàng QuangHuy

Chương 3: Các công việc đã làm

1 Header bar và slider trang home page

Nội dung : Handle Font End theo thiết kế của designer.

Thực hiện :

- Sử dụng styled component để dựng giao diện

- Sử dụng axios để call api

- Sử dụng Context để lấy state của giỏ hàng

- Sử dụng history.push để redirect sang các trang khác

- Sử dụng React slick cho slider

Kết quả :

- Hoàn thành task đúng với thiết kế của designer

2 Header layout mobile trang home page

Nội dung : Handle Font End theo thiết kế của designer.

Thực hiện :

- Sử dụng styled component để dựng giao diện

- Sử dụng Context để lấy state của giỏ hàng

- Sử dụng useState để set state chuyển tab cửa hàng, thương hiệu, tự thiết kế

- Sử dụng React slick cho slider

Kết quả :

- Hoàn thành task đúng với thiết kế của designer

3 Content trang home page cửa hàng

Thực hiện :

- Sử dụng styled component để dựng giao diện

- Sử dụng axios để call api

- Sử dụng Context để lấy state của giỏ hàng

- Sử dụng history.push để redirect sang các trang khác

- Sử dụng window.addEventListener để bắt sự kiện scroll, check điều kiện nếu scroll qua thanh search thì show một thanh header bar position fixed như trên ảnh

Kết quả :

- Hoàn thành task đúng với thiết kế của designer

4 Một số công việc khác

TÀI LIỆU THAM KHẢO