LẬP TRÌNH GIAO DIỆN WEBSITE VỚI REACTJS

Lịch sử doanh nghiệp - Từ đầu 2020 khi đại dịch Covid 19 xảy ra và nhận thấy thời cơ của chuyển đổi số tại Việt Nam, Saha với đội ngũ cựu du học sinh và kỹ sư phần mềm tại Nhật Bản đã b

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 GIAO DIỆN WEBSITE

VỚI REACTJS

Công ty thực tập : Công ty cổ phần Công nghệ Saha Người phụ trách : Nguyễn Đức Hiếu

LỜI MỞ ĐẦU

Trong cuộc cách mạng công nghiệp 4.0, công nghệ thông tin nói chung và ngành Công nghệ phần mềm nói riêng luôn là nhân tố đóng vai trò quan trọng trong quá trình phát triển của xã hội

Công nghệ Web, hay công nghệ sản xuất các trang web đã phục vụ hầu hết các nhu cầu của con người từ bán hàng, cung cấp kiến thức đến thông tin liên lạc, Hiện nay đã có đến hơn 1.5 tỷ trang web, nhưng nhu cầu tạo ra những trang web mới vẫn chưa có dấu hiệu giảm

Do đó, một trang web muốn được nhiều người sử dụng phải đáp ứng được yếu tố hình thức

và nội dung Làm thế nào để sản phẩm tạo ra đạt chất lượng cao ở hai yếu tố trên luôn làm bất kì một đội ngũ phát triển website nào cũng cần phải suy nghĩ đau đầu Để thử thách bản thân trong ngành công nghiệp web, em đã lựa chọn Front-end web developer là định hướng cho việc học cũng như nghề nghiệp trong tương lai

React là một thư viện UI phát triển tại Facebook, một thư viện Javascript đang nổi lên trong những năm gần đây để hỗ trợ việc xây dựng những thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được React được sử dụng tại Facebook cũng như trên Instagram được viết hoàn toàn trên React

Có thể nói ReactJS là một công cụ tuyệt vời giúp doanh nghiệp vượt qua đối thủ khi cạnh tranh về mảng thiết kế các ứng dụng web

• Ứng dụng được tạo ra bởi ReactJS với cấu trúc UI tốt hơn giúp nâng cao và tối ưu hóa UX Các doanh nghiệp có thể dễ dàng tăng tương tác của người dùng, tỉ lệ click và tỉ lệ chuyển đổi (conversion) trên trang web của mình

• Hiệu suất kinh doanh khi có dùng ứng dụng của ReactJS cũng tốt hơn so với khi dùng các framework khác Nó sẽ hạn chế cập nhật của DOM, từ đó tăng tốc độ truy cập ứng dụng và cải tiến UX tốt hơn

• ReactJS cũng được thiết kế để giúp cải thiện số trang render tổng từ phía server Đồng thời

sẽ giúp tối ưu các nút để render phía client-side Khả năng tùy chỉnh công cụ tốt, thậm chí làm giảm ngân sách bảo trì hệ thống, giúp ReactJS hiệu quả cao hơn

Bên cạnh thời gian 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 việc trong một môi trường chuyên nghiệp, em có dự định là sẽ thực tập trong kì này Vì vậy, em quyết định chọn công ty SAHA là nơi sẽ giúp em thực hiện được dự định này

–

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty cổ phần Công nghệ Saha đã tạo điều kiện cho em có cơ hội được thực tập tại công ty

Chỉ trong một thời gian ngắn gần 3 tháng nhưng được hướng dẫn nhiệt tình giúp em cùng các bạn thực tập sinh khác có thêm nhiều kiến thức, kinh nghiệm bổ ích mà tụi em chưa có được trước khi tới công ty Đã giúp em hòa mình vào được với các bậc đàn anh đi trước, cùng nhau chia sẻ các nhiệm vụ mà công ty giao và hơn hết là lần đầu trải nghiệm làm một lập trình viên thứ thiệt

Đặc biệt cảm ơn anh Nguyễn Đức Hiếu đã hướng dẫn, giúp đỡ 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, đã chỉ dẫn em về cách làm báo cáo, lên kế hoạch, những kỹ năng không thể thiếu

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ều kiện em làm bài báo cáo này

Nguyễn Nam Hùng

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

NHẬN XÉT CỦA KHOA

–

MỤC LỤC

LỜI MỞ ĐẦU 2

LỜI CẢM ƠN 3

NHẬN XÉT CỦA KHOA 4

CHƯƠNG 1: GIỚI THIÊU CÔNG TY THỰC TẬP 6

1 Giới thiệu Công ty cổ phần Công nghệ Saha 6

CHƯƠNG 2: NỘI DUNG THỰC TẬP 10

1 Tìm hiểu cơ chế vận hành công ty và các chuẩn mực liên quan 10

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

3 Lịch làm việc 15

CHƯƠNG 3: CHI TIẾT VỀ PROJECT 16

1 Áp dụng kiến thức đã học, kiểm tra thực hành thiết kế trang thương mại điện tử 16

CHƯƠNG 4: TỔNG KẾT 18

TÀI LIỆU THAM KHẢO 18

–

CHƯƠNG 1: GIỚI THIÊU CÔNG TY THỰC TẬP

1 Giới thiệu Công ty cổ phần Công nghệ Saha

APP – POS quản lí và bán hàng đa kênh cho các doanh nghiệp luôn hướng đến giải pháp kinh doanh O2O ( Online to Ofline ) cho các chủ doanh nghiệp Đây đợc xem là mô hình của tương lai mang đến mục tiêu tận dụng các ưu điểm của cả 2 kênh bán hàng truyền thống và trực tuyến

Lịch sử doanh nghiệp

- Từ đầu 2020 khi đại dịch Covid 19 xảy ra và nhận thấy thời cơ của chuyển đổi số tại Việt Nam, Saha với đội ngũ cựu du học sinh và kỹ sư phần mềm tại Nhật Bản đã bắt đầu xây dựng và cho ra mắt nền tảng quản lý và bán hàng đa kênh phù hợp với tất cả các nhà bán hàng Sau một thời gian đưa nền tảng đồng bộ giữa App – Web – Pos với 3 tiêu chí cụ thể

DỄ DÀNG – NHANH CHÓNG - TIẾT KIỆM đến tay người bán hàng Với bộ giải pháp bán hàng này giúp đối tác của SAHA dễ dàng tiếp cận tới khách hàng của họ và tăng doanh thu nâng tầm doanh nghiệp

- Hiện đã có hơn 500 doanh nghiệp đã và đang sử dụng các giải pháp của Saha

- Quy mô hoạt động: Với tiêu chí đưa doanh nghiệp tới gần hơn với người khách hàng SAHA đã đưa ra thị trường công nghệ các sản phẩm thương mại điện tử theo các lĩnh vực sau :

- IKI POS: Phần mền quản lí và bán hàng offline dễ dàng sử dụng nhất giúp quản lí bán

hàng, doanh thu , lãi lỗ ,tính tiền , in hóa đơn , chấm công và quản lí nhân viên cho khách hàng nhanh chóng

- IKI WEB: Thiết kế Website quản lí và bán hàng offline chuẩn SEO, chuyên nghiệp

- IKI TECH: Phần mềm quản lí bán hàng tích hợp Online và Offline, giúp người bán hàng

trên các nề tảng đa kênh : Lazada , Shopee, quản lí được nhiều kênh và bán hàng , nhưng những vậy Saha còn có chương trình Affiliate giúp cho doanh nghiệp tiếp cận tới nhiều đối tượng kinh doanh hơn Đặc biệt đối tác của SAHAcó thể được mở thêm APP bán hàng riêng cho khách hàng của họ

-

- WEBSITE IKI TECH: đây là website bán hàng Online và Offline, giúp người bán hàng

trên các nề tảng đa kênh : Lazada , Shopee, quản lí được nhiều kênh và bán hàng , nhưng những vậy Saha còn có chương trình Affiliate giúp cho doanh nghiệp tiếp cận tới nhiều đối tượng kinh doanh hơn

- IKI STORE: Ngoài ra, SAHA còn mở rộng thiết kế app bán hàng dành riêng cho khách

hàng của doanh nghiệp Giúp cho doanh nghiệp tăng mức độ nhận diện thương hiệu với khách hàng của họ

Ngoài các sản phẩm về công nghệ cho các doanh nghiệp bán hàng, Saha – IKI Tech còn

cung cấp cho doanh nghiệp các dịch vụ Digital Marketing chuyên nghiệp, hướng đến giải

pháp chuyển đổi số hoàn thiện

–

CHƯƠNG 2: NỘI DUNG THỰC TẬP

Đợt thực tập với chủ đề “Lập trình, xây dựng front-end website với ReactJS” nhằm mục đích giúp sinh viên thực tập được đào tạo về lập trình ReactJS và Redux trong xây dựng giao diện web, đồng thời rèn luyện những kỹ năng mềm như làm việc nhóm, giao tiếp Tại SAHA, 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ơ chế vận hành công ty và các chuẩn mực liên quan

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, khối phát triển phần mềm, team, quy trình làm việc từ cao xuống thấp, cách thức tổ chức của công ty

- Được giới thiệu về cách thức làm việc trong công ty như 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ông việc, điểm danh, check in/checkout…

Kết quả: Hiểu thêm về cách tổ chức của một công ty là như thế nào Có thêm các kĩ năng

làm việc như gửi mail, cách hỏi và đặt vấn đề, giúp cho em tự tin hơn trong những thời gian làm viêc sau này

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

2.1.1 Cài đặt, làm quen các công cụ làm việc

Thời gian : 3 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, mentor đã 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ư Trello, VSCode– IDE chính để lập trình giao diện, Terminal để sử dụng git, SourceTree để sử dụng git với GUI

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.1.3 Tìm hiểu HTML, CSS, SCSS, JavaScript

Vì muốn được hiểu sâu về front-end nên em được công ty củng cố kiến thức và đào tạo lại từ đầu

Thời gian : 14 ngày

Nội dung : Được training về các kỹ thuật html, css, scss cơ bản và nâng cao, những kiến thức

quan trọng cho việc tạo các layout responsive cho trang web

- Html : cấu trúc và các thành phần trong trang web và ứng dụng, phân chia các đoạn văn, heading, links,…

- Css : Tạo phong cách và kiểu cho trang web nhu tạo bố cục các layout, color, khoảng cách, reponsive,…

- Scss : Là tiền xử lý css, giúp viết css theo cách một ngôn ngữ lập trình, có cấu trúc rõ ràng , rành mạch, dễ phát triển và bảo trì code hơn

- Tìm hiểu về JS/Jquery:

- Tìm hiểu JS DOM

- Tìm hiểu về object, function, class, Async

- Tìm hiểu JQuery

- Tìm hiểu JS web API

- Kiến thức cơ bản về UI/UX: Tìm hiểu khái niệm ui/ux

-

Thực hiện :

- Tham gia đầy đủ các buổi training của công ty

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

Kết quả :

- Nắm được kiến thức html/css/scss cơ bản

- Nắm được BEM name

- Có thể dàn được layout trang web, style theo design và responsive

2.1.4 Nghiên cứu tài liệu và những kỹ thuật về ReactJS

Thời gian: 7 ngày Nội dung: Được giao và tìm hiểu về những tài liệu và kỹ thuật liên quan đến

dự án Các tài liệu bao gồm:

2.1.4.1 JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript

Đặc điểm: Faster: Nhanh hơn JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript Safer: an toàn hơn

dịch trước khi chạy, giống như Java, C++ Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch Ngoài ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt Easier: Dễ dàng hơn JSX kế thừa dựa trên Javascript,

vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng

2.1.4.2 React được xây dựng xung quanh các component, chứ không dùng template

như các framework khác Trong React, chúng ta xây dựng trang web sử dụng những thành phần (component) nhỏ Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái Mọi thứ React đều là component Chúng giúp bảo trì mã code khi làm việc với các dự án lớn Một react component đơn giản chỉ cần một method render Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo

2.1.4.3 Props: giúp các component tương tác với nhau, component nhận input gọi là props, và trả thuộc tính mô tả những gì component con sẽ render Prop là bất biến State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để cập nhật UI

Thực hiện:

2.1.4.3 Tham gia đầy đủ các buổi training của công ty

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

Kết quả:

2.1.4.5 Nâng cao kỹ năng lập trình Front-end 2.1.4.6 Tạo được những giao diện demo đơn giản về kỹ thuật đã nghiên cứu

2.1.4.7 Có được những kiến thức quan trọng cho việc lập trình sau này

2.1.4.8 Ngoài ra còn được biết thêm một số quy tắc trong việc viết code sao cho

đúng chuẩn, dễ đọc, dễ hiểu

2.1.5 Nghiên cứu bản design của SAHA

Thời gian: 3 ngày Nội dung: Nghiên cứu design và chức năng các page của SAHA, tìm hiểu cách

các kĩ thuật được áp dụng trong dự án, cách áp dụng các quy chuẩn code, clean code vào project, cách tổ chức project…

Kết quả: Hiểu trực quan các xử lý trong project, cách tổ chức project, các quy

chuẩn code, …

2.1.6 Thực hành trên Visual Studio Code

Thời gian: 14 ngày Nội dung: Áp dụng các kiến thức đã tìm hiểu, thực hành mô phỏng lại website

2.1.6.1 Đọc hiểu thiết kế web 2.1.6.2 Nắm luồng xử lý 2.1.6.3 Thiết kế các giao diện, màn hình của trang chủ Tạo các hiệu ứng cho

website

2.1.6.4 Thiết kế các xử lý logic cơ bản, chuyển màn hình trong website

Kết quả:

2.1.6.5 Mô phỏng lại được website theo code của bản thân 2.1.6.6 Nâng cao khả năng lập trình front-end, javascript và các kỹ năng liên quan,

bổ trợ cho quá trình sau này

Giai đoạn 2: Xây dựng tìm hiểu Redux 2.1.7 Tìm hiểu và cài đặt Redux

Thời gian: 3 ngày Nội dung: Do khối lượng công việc giảm, thêm vào đó team sắp nhận thêm dự

án về Redux nên team leader đã phân công công việc tìm hiểu thực hành trước

về Redux để có thể hỗ trợ cho dự án sau này Các công việc được giao là:

2.1.7.1 Cài đặt NodeJS 2.1.7.2 Học cách sử dụng và vận hành của Redux 2.1.7.3 Thực hành demo các chức năng đơn giản của website có áp dụng Redux

2.1.8 Nghiên cứu tài liệu và các kỹ thuật

Thời gian: 7 ngày Nội dung:

2.1.8.1 Redux js là một thư viện Javascript giúp tạo ra thành một lớp quản lý trạng

chúng ta phải gọi 3 lần, điều đó sẽ khiến việc code và quản lý state rất phức tạp, và to dần lên theo thời gian

2.1.8.3 Với việc sử dụng Redux, chúng ta sẽ lưu state của các component vào 1 store

chung ở bên ngoài Sau đó nếu muốn dùng ở component nào chúng ta chỉ cần gọi nó và sử dụng

Redux được xây dựng dựa trên 3 nguyên lý:

2.1.8.3.1 Nguồn dữ liệu tin cậy duy nhất: State của toàn bộ ứng được chứa

trong một object tree nằm trong Store duy nhất 2.1.8.3.2 Trạng thái chỉ được phép đọc: Cách duy nhất để thay đổi State của

ứng dụng là phát một Action (là 1 object mô tả những gì xảy ra) 2.1.8.3.3 Thay đổi chỉ bằng hàm thuần túy: Để chỉ ra cách mà State được

biến đổi bởi Action chúng ta dùng các pure function gọi

là Reducer

Về cơ bản Redux có 4 thành phần như sau:

2.1.8.4 Action: Là nơi mang các thông tin dùng để gửi từ ứng dụng đến Store Các

thông tin này là 1 object mô tả những gì đã xảy ra

2.1.8.5 Reducer: Là nơi xác định State thay đổi như thế nào

2.1.8.6 Store: Là nơi quản lý State, cho phép truy cập State qua getState(), update

State qua dispatch(action), đăng kí listener qua subscribe(listener)

2.1.8.7 View: Hiển thị dữ liệu được cung cấp bởi Store

Thực hiện :

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

Kết quả :

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

- Tạo được những ứng dụng demo đơn giản về kỹ thuật đã nghiên cứu

- Có được những kiến thức quan trọng cho việc lập trình sau này

2.1.9 Thực hành xây dựng website theo yêu cầu

Thời gian:

Nội dung: Thực hành xây dựng giao diện một website theo yêu cầu của người

hướng dẫn

Kết quả: Xây dựng được một giao diện website đáp ứng các yêu cầu đặt ra.

–