BÁO CÁO THỰC TẬP LẬP TRÌNH FRONTEND HTML CSS VÀ REACTJS

Đi kèm theo đó, các hệ thống website cũng phát triển không ngừng với đủ các lĩnh vực: văn hóa, thời sự, khoa học công nghệ, làm đẹp, nấu ăn, thể thao, … Tuy nhiên để tạo một trang web có

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 FRONTEND HTML CSS VÀ REACTJS

Công ty thực tập: New Ocean Người phụ trách: Đào Minh Sáng Thực tập sinh: Huỳnh Ngọc Pháp

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

LỜI MỞ ĐẦU Ngày này chúng ta đang được sống trong kỷ nguyên của tin học nhờ sự vượt bậc,

sự bùng nổ mạnh mẽ của công nghệ thông tin Công nghệ thông tin không chỉ dừng lại ở mục đích phục vụ cho khoa học kỹ thuật mà đi sâu vào đời sống, chính trị, kinh tế, xã hội, trở nên thân thiện , gần gũi, mang lại nhiều lợi ích cho con người Công nghệ thông tin ngày càng khẳng định được tính hữu dụng và sức mạnh trong mọi phương diện, mọi ngành nghề của cuộc sống, nhất là trong thời đại kinh tế thị trường như bây giờ

Đi kèm theo đó, các hệ thống website cũng phát triển không ngừng với đủ các lĩnh vực: văn hóa, thời sự, khoa học công nghệ, làm đẹp, nấu ăn, thể thao, … Tuy nhiên để tạo một trang web có sức sống bền lâu thì bản thân nó phải mang lại lợi ích cho nhiều người Giao diện bắt mắt là yếu tố quan trọng để giữ chân người xem lại trang web của mình Và Reactjs là frontend framework giúp chúng ta thiết kế web một cách dễ dàng và chuyên nghiệp hơn

LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty New Ocean Automation System đã 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, nhưng nhờ sự chỉ dẫn nhiệt tình của nhóm trainer,

em đã tiếp thu được những kiến thức, học hỏi nhiều kĩ năng quan trọng để có thể tự xây dựng trang được giao diện cho trang web công ty bằng html css và reactjs Chân thành cảm ơn các anh chị trong nhóm trainer đã bỏ ra nhiều thời gian,công sức để hướng dẫn

em hoàn thành đợt thực tập này

Đặc biệt cảm ơn anh Sáng đã training front-end, hướng dẫn, giúp đỡ cho em tận

tình cả những khó khăn trong công việc, và những vấn đề gặp phải khi làm thực tế

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

Huỳnh Ngọc Pháp Thành phố HCM, 5/2022

NHẬN XÉT CỦA KHOA

………

……….

………

……….

………

……….

………

……….

………

……….

………

……….

………

……….

………

……….

………

……….

………

……….

………

……….

………

……….

………

……….

………

……….

………

……….

………

………

……….

………

……….

………

……….

………

……….

………

……….………

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

1.Giới thiệu công ty New Ocean Automation System 6

2.Sản phẩm- giải pháp của công ty 6

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 8

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

- Công cụ làm việc 8

-Tìm hiểu về Html Css , JavaScript, Bootstrap5 8

-Tìm hiểu về Reactjs 9

-Nghiệp vụ công ty 10

3 Lịch làm việc 10

CHƯƠNG 3: XÂY DỰNG WEBSITE 12

1 Project HTML CSS 12

2 Project Reactjs 13

CHƯƠNG 4 :TÀI LIỆU THAM KHẢO 16

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

1 Giới thiệu công ty New Ocean Automation System

Công ty được thành lập vào năm 2002 và đã có những phát triển không ngừng Năm

2002 New Ocean CDC được thành lập, năm 2004 đổi tên thành New Ocean ICDC, năm

2010 New Ocean IS(Information System) được thành lập, năm 2011 New Ocean AS (Automation System) được thành lập, năm 2022 New Ocean Group được thành lập Công

ty được thành lập bởi anh Trần Đăng Ninh

Với gần 20 năm kinh nghiệm Công ty TNHH Hệ thống Tự động Đại Dương Mới (New Ocean Automation System) đã và đang là một trong những nhà cung cấp giải pháp tự động hóa hàng đầu cho các nhà máy, đơn vị chế tạo máy và nhà thầu phụ tại Việt Nam cùng khu vực Đông Nam Á

Các giải pháp tư vấn - lắp đặt mà công ty cung cấp hướng đến việc giải quyết các vấn đề phát sinh, tối ưu hóa quy trình sản xuất, quản lí kho hàng hiệu quả, sử dụng các nguồn lực hợp lí và nâng cao chất lượng thành phẩm Từ đó, các nhà máy, đơn vị chế tạo máy

và nhà thầu phụ có thể từng bước nâng cao năng suất, đồng thời phát triển mục tiêu kinh doanh dài hạn!

Tầm nhìn: Trở thành sự lựa chọn hàng đầu cho các khách hàng, đối tác và kĩ sư trong thị trường ứng dụng tự động hóa và công nghệ thông tin sản xuất

Sứ mệnh: Công ty chọn lựa sản phẩm tốt nhất từ các nhà sản xuất hàng đầu trên toàn thế giới để cung cấp cho khách hàng các giải pháp với hiệu suất cao nhất Công ty tuyển dụng những cá nhân xuất sắc và cung cấp môi trường làm việc tốt nhất, đào tạo phát triển thành các nhân viên chuyên nghiệp, nhằm cung cấp các giải pháp với độ tin cậy cao, cùng dịch vụ khách hàng chu đáo và trách nhiệm

Giá trị cốt lỗi: Tôn trọng & Khiêm tốn, Trung thành & Trung thực, Thấu hiểu & Tin cậy, Đổi mới & Sáng tạo

2 Sản phẩm- giải pháp của công ty

-Ngành dược phẩm:

+ Hệ thống OCR & OCV ( OCR&OCV System ), Hệ thống quản lý sản xuất (MES), hệ thống truy suất nguồn gốc (Track & trace system),hệ thống xử lý nước thải (Water

treatmet)

-Ngành Điện tử:

+ Hệ thống kiểm tra và đọc mã vạch trên linh kiện điện tử (Barcode Reader & Barcode Verifier), hệ thống kiểm tra kích thước đúng sai của sản phẩm gia công, hệ thống robot hàn, hệ thống điều khiển tốc độ sản xuất (Motion Control)

-Ngành hàng tiêu dung:

+ Hệ thống in &dán nhãn thùng (Print and Apply label), hệ thống làm sạch CIP(Cleaning

In Place), hệ thống phối trộn (Batch control system),hệ thống quản lý sản xuất MES (Manufacturing Execution System), hệ thống robot gắp thả (Pick & Place robotic)… -Ngành hóa chất:

+Hệ thống quản lý năng lượng (Energy Management System)…

-Ngành dịch vụ hậu cần:

+Hệ thống an toàn (Safety system), hệ thống kiểm tra khối lượng hàng hóa

( Preweight) ,hệ thống quản lý kho (Warehouse Management), hệ thống quản lý bằng mã vạch (Barcode Server), hệ thống xe tự hành (AGV-Automated guided vehicle)…

-Ngành thực phẩm và đồ uống :

+ Hệ thống kiểm tra nhãn dán (Label inspection),hệ thống kiểm tra nắp chai (Cap

inspection)…

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

Đợt thực tập với chủ đề “Lập trình Web với Bootrap 5 và ReactJs” nhằm mục đích giúp sinh viên thực tập học tập, làm quen với các công nghệ để làm web application, đồ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 công nghệ như ReactJs Ngoài ra, thực tập sinh được trực tiếp hướng dẫn bởi các anh giàu kinh nghiệm Bên cạnh đó, sinh viên được 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, tích lũy những kiến thức giá trị

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

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, 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

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 ty như thời gian đi làm, các quy định cần phải tuân thủ, cách sử dụng outlook ,Microsoft teams , azure devops để làm việc

Kết quả : Hiểu thêm về công ty, 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

- Công cụ làm việc

Thời gian : 3 ngày

Nội dung : Tìm hiểu và cài đặt các công cụ cần thiết cho 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ư : Visual studio code, git, Microsoft Team …

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

- Tìm hiểu về Html Css , J avaScript, Bootstrap5

Thời gian : 4 tuần

Nội dung : Được hướng dẫn về các kĩ thuật html css javascript cơ bản và nâng cao,

những kiến thức quan trọng cho việc chia 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,…

Tìm hiểu về JS/Jquery

Tìm hiểu bootstrap 5

Tìm hiểu về firebase

Tìm hiểu khái niệm và cách tạo tài khoản firebase

Tìm hiểu các tính năng chính của firebase

Tìm hiểu cách deloy ứng dụng lên firebase

…

Thực hiện :

Tham gia đầy đủ các buổi làm và training của công ty

Làm các bài thực hành ở mỗi kiến thức đã học

Ứng dụng làm demo

Kết quả :

Nâng cao kỹ năng lập trình web

Hệ thống lại được những kiến thức đã được học trước đó

Biết thêm một số quy tắc trong việc viết code, làm thế nào để code clean hơn

Đã tự tạo cho mình được ứng dụng demo viết bằng html css bootstrap 5

- Tìm hiểu về Reactjs

Thời gian : 4 tuần

Nội dung : Tìm hiểu về ReactJs

- Tìm hiểu JSX

- Tìm hiểu props và state

- Tìm hiểu React routing

- Tìm hiểu React Hooks

- Tìm hiểu Reactstrap

- Tìm hiểu react-c3js

Thực hiện :

Tham gia đầy đủ các buổi làm và training của công ty

Làm các bài thực hành ở mỗi kiến thức đã học

Ứng dụng làm demo

Kết quả :

Hiểu và nắm được những kiến thức cơ bản về những thành phần cần có để xây dựng

website

Xây dựng được ứng dụng demo

-Nghiệp vụ công ty

Thời gian : 1 ngày

Nội dung : Tìm hiểu quản lý dự án với Azure devOps, thao tác với git

Kết quả :

Hiểu rõ quy trình làm việc công ty

Nắm được cách quản lý và deloy code với firebase

Thực hiện Project

Sau hơn 4 tuần được training và thực hành thì đã nắm được kiên thức cơ bản và một số kiến thức cần thiết Để chuẩn bị bước vào xây dựng ứng dụng thực tế là website landing-page và website- reactjs

3 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ức của công ty.

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

Làm quen với Azure devOps, setup môi trường để làm việc

Anh Sáng 100% Nắm rõ quy

định của công ty

với dự án Quy trình làm việc

2-3-4

Tìm hiểu về html, css,javascript,bootstrap5

Áp dụng kiến thức vừa học để xây dựng website landing-page

Anh Sáng 100% Hoàn thành

project

5-6-7-8

Tìm hiểu Reactjs

- Tìm hiểu JSX

- Tìm hiểu props và state

- Tìm hiểu React routing

- Tìm hiểu React Hooks -tìm hiểu Reactstrap

- tìm hiểu react-c3js

- xây dựng website sử dụng reactjs

Anh Sáng 70% Chưa hoàn

thiện sản phẩm

CHƯƠNG 3: XÂY DỰNG WEBSITE

1 Project HTML CSS

Project landing-page-mobile

Để nâng cao tư duy và kĩ năng về html, css, javascript bootstrap 5 bắt đầu dự án thực hiện thiết kế website landing page chỉ sử dụng html css bootstrap 5

Một số hình ảnh của project:

Desktop:

Tablet:

Mobile:

Deploy project lên firebase:

Tên miền: landing-mobile.web.app

2 Project Reactjs

Project Website -Reactjs:

Để nâng cao tư duy và kĩ năng về Reactjs , reactstrap bắt đầu dự án thực hiện thiết kế website chỉ sử dụng Reactjs

Một số hình ảnh của project:

Trang đăng nhập và đăng ký

Trang Dashboard:

Sản phẩm chỉ hoàn thành được 70%

CHƯƠNG 4 : TÀI LIỆU THAM KHẢO

Html css javascript: W3Schools Online Web Tutorials

Bootstrap 5: Introduction · Bootstrap v5.0 (getbootstrap.com)

ReactJs: Introducing JSX – React (reactjs.org)