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

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 năm 2022 LỜI MỞ ĐẦU Ngày sống kỷ nguyên tin học nhờ vượt bậc, bùng nổ mạnh mẽ công nghệ thông tin Công nghệ thông tin không dừng lại mục đích phục vụ cho khoa học kỹ thuật mà sâu vào đời sống, 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 người Cơng nghệ thơng tin ngày khẳng định tính hữu dụng sức mạnh phương diện, ngành nghề sống, thời đại kinh tế thị trường Đi kèm theo đó, hệ thống website phát triển không ngừng với đủ 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 trang web có sức sống bền lâu thân phải mang lại lợi ích cho nhiều người Giao diện bắt mắt yếu tố quan trọng để giữ chân người xem lại trang web Và Reactjs frontend framework giúp thiết kế web cách dễ dàng chuyên nghiệp 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ó 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, em tiếp thu kiến thức, học hỏi nhiều kĩ quan trọng để tự xây dựng trang giao diện cho trang web công ty html css reactjs 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 em hoàn thành đợt thực tập Đặc biệt cảm ơn anh Sáng training front-end, hướng dẫn, giúp đỡ cho em tận tình khó khăn cơng việc, vấn đề gặp phải làm thực tế Cũng xin cảm ơn thầy cô 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 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 1.Giới thiệu công ty New Ocean Automation System .6 2.Sản phẩm- giải pháp công ty CHƯƠNG 2: NỘI DUNG THỰC TẬP Tìm hiểu cơng ty kỹ Nghiên cứu kỹ thuật - Công cụ làm việc -Tìm hiểu Html Css , JavaScript, Bootstrap5 -Tìm hiểu Reactjs -Nghiệp vụ công ty 10 Lịch làm việc 10 CHƯƠNG 3: XÂY DỰNG WEBSITE 12 Project HTML CSS .12 Project Reactjs 13 CHƯƠNG :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 thành lập vào năm 2002 có phát triển không ngừng Năm 2002 New Ocean CDC thành lập, năm 2004 đổi tên thành New Ocean ICDC, năm 2010 New Ocean IS(Information System) thành lập, năm 2011 New Ocean AS (Automation System) thành lập, năm 2022 New Ocean Group thành lập Công ty thành lập 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) nhà cung cấp giải pháp tự động hóa hàng đầu cho nhà máy, đơn vị chế tạo máy nhà thầu phụ Việt Nam 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 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 nguồn lực hợp lí nâng cao chất lượng thành phẩm Từ đó, nhà máy, đơn vị chế tạo máy nhà thầu phụ bước nâng cao 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 lựa chọn hàng đầu cho khách hàng, đối tác kĩ sư thị trường ứng dụng tự động hóa 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 từ nhà sản xuất hàng đầu toàn giới để cung cấp cho khách hàng giải pháp với hiệu suất cao Công ty tuyển dụng cá nhân xuất sắc cung cấp môi trường làm việc tốt nhất, đào tạo phát triển thành nhân viên chuyên nghiệp, nhằm cung cấp giải pháp với độ tin cậy cao, dịch vụ khách hàng chu đáo 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 & Sáng tạo 2.Sản phẩm- giải pháp 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 đọc mã vạch linh kiện điện tử (Barcode Reader & Barcode Verifier), hệ thống kiểm tra kích thước sai 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 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ý 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ý mã vạch (Barcode Server), hệ thống xe tự hành (AGV-Automated guided vehicle)… -Ngành thực phẩm đồ 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 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ông nghệ để làm web application, đồ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 cơng nghệ ReactJs Ngoài ra, thực tập sinh trực tiếp hướng dẫn anh giàu kinh nghiệm Bên cạnh đó, sinh viên khám phá làm việc mơi trường phát triển phần mềm chun nghiệp, tích lũy kiến thức giá trị Tìm hiểu cơng ty kỹ 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, 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 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 outlook ,Microsoft teams , azure devops để làm việc Kết : Hiểu thêm cơng ty, 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 - Công cụ làm việc Thời gian : ngày Nội dung : Tìm hiểu cài đặt công cụ cần thiết cho trình làm việc Trong thời gian này, cài đặt công cụ phục vụ cho công việc : Visual studio code, git, Microsoft Team … 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 -Tìm hiểu Html Css , JavaScript, Bootstrap5 Thời gian : tuần Nội dung : Được hướng dẫn kĩ thuật html css javascript nâng cao, kiến thức quan trọng cho việc chia layout responsive cho trang web Html : cấu trúc thành phần trang web ứng dụng, phân chia đoạn văn, heading, links,… Css : Tạo phong cách kiểu cho trang web nhu tạo bố cục layout, color, khoảng cách, reponsive,… Tìm hiểu JS/Jquery Tìm hiểu bootstrap Tìm hiểu firebase Tìm hiểu khái niệm cách tạo tài khoản firebase Tìm hiểu tính firebase Tìm hiểu cách deloy ứng dụng lên firebase … Thực : Tham gia đầy đủ buổi làm training công ty Làm thực hành kiến thức học Ứng dụng làm demo Kết : Nâng cao kỹ lập trình web Hệ thống lại kiến thức học trước Biết thêm số quy tắc việc viết code, làm để code clean Đã tự tạo cho ứng dụng demo viết html css bootstrap -Tìm hiểu Reactjs Thời gian : tuần Nội dung : Tìm hiểu ReactJs - Tìm hiểu JSX - Tìm hiểu props 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 : Tham gia đầy đủ buổi làm training công ty Làm thực hành kiến thức học Ứng dụng làm demo Kết : Hiểu nắm kiến thức thành phần cần có để xây dựng website Xây dựng ứng dụng demo -Nghiệp vụ công ty Thời gian : 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 : Hiểu rõ quy trình làm việc cơng ty Nắm cách quản lý deloy code với firebase Thực Project Sau tuần training thực hành nắm kiên thức 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ế website landingpage website- reactjs 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 Người hướng dẫn Nhận xét Mức độ hoàn người hướng thành dẫn Anh Sáng 100% Nắm rõ quy định công ty Làm quen với Azure devOps, setup môi trường để làm việc 10 với dự án Quy trình làm việc Tìm hiểu html, css,javascript,bootstrap5 Anh Sáng 100% Hoàn thành project Anh Sáng 70% Chưa hoàn thiện sản phẩm 2-3-4 Áp dụng kiến thức vừa học để xây dựng website landing-page Tìm hiểu Reactjs - Tìm hiểu JSX - Tìm hiểu props state - Tìm hiểu React routing 5-67-8 - 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 11 CHƯƠNG 3: XÂY DỰNG WEBSITE Project HTML CSS Project landing-page-mobile Để nâng cao tư kĩ html, css, javascript bootstrap bắt đầu dự án thực thiết kế website landing page sử dụng html css bootstrap Một số hình ảnh project: Desktop: Tablet: Mobile: 12 Deploy project lên firebase: Tên miền: landing-mobile.web.app Project Reactjs Project Website -Reactjs: Để nâng cao tư kĩ Reactjs , reactstrap bắt đầu dự án thực thiết kế website sử dụng Reactjs Một số hình ảnh project: Trang đăng nhập đăng ký 13 Trang Dashboard: 14 Sản phẩm hoàn thành 70% 15 CHƯƠNG :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) 16 ... DỰNG WEBSITE Project HTML CSS Project landing-page-mobile Để nâng cao tư kĩ html, css, javascript bootstrap bắt đầu dự án thực thiết kế website landing page sử dụng html css bootstrap Một số... vehicle)… -Ngành thực phẩm đồ 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... thiết cho q trình làm việc Trong thời gian này, cài đặt công cụ phục vụ cho công việc : Visual studio code, git, Microsoft Team … Thực : Thực hành sử dụng phần mềm nêu Kết : Lập trình sử dụng