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 DOANH NGHIỆP LẬP TRÌNH WEB VỚI REACTJS Cơng ty thực tập : CTY TNHH HITIME Người Hướng Dẫn : Đinh Xuân Lộc Thực tập sinh : Cao Hà Minh Quyết Mã số sinh viên : 14520750 TP Hồ Chí Minh, tháng năm 2020 LỜI MỞ ĐẦU Ngày nay, mạng xã hội trở thành ăn tinh thần thiếu sống hai tỷ người toàn giới Sự bùng nổ mạng xã hội năm gần thay đổi đáng kể cách sống làm việc nhiều người Mạng xã hội trở thành công cụ hữu ích đặc biệt cho mục đích bán hàng Các mạng xã hội đáp ứng nhiều mục đích khác nhau, chưa cung cấp tính chuyên biệt cho mục đích bán hàng chưa có hệ thống thị trường Việt Nam hỗ trợ việc bán hàng, quản lý kênh bán hàng từ nhiều mạng xã hội Với lý trên, ứng dụng Doopage xây dựng công ty TNHH Hitime với mong muốn tạo hệ thống ứng dụng DooPage tất một, hỗ trợ đa tảng, đa kênh bán hàng, cung cấp tính cho mục đích bán hàng, hỗ trợ bán hàng mạng xã hội phổ biến, nhằm giúp việc tư vấn, hỗ trợ, bán hàng trở nên thuận tiện, dễ dàng Nội dung báo cáo gồm phần sau - Giới thiệu công ty thực tập - Báo cáo nội dung thực tập - Kinh nghiệm thực tiễn thu - Những đóng góp cho cơng ty - Tài liệu tham khảo LỜI CẢM ƠN KHOA CÔNG NGHỆ PHẦN MỀM VÀ CÔNG TY CỔ PHẦN HITIME Em xin cảm ơn q thầy khoa tận tình giảng dạy trang bị cho em kiến thức cần thiết Chính kiến thức hỗ trợ em việc hồn thành khóa thực tập doanh nghiệp Tuy nhiên có thiếu sót, mong nhận thông cảm, chia sẻ quý thầy cô để giúp em hồn thành tốt mơn thực tập doanh nghiệp Trân trọng gửi lời cảm ơn Công ty Cổ phần Hitime 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 anh chị cơng ty, nhóm thực tập em tiếp thu kiến thức quan trọng để làm số chức nhỏ dự án Doopage Chân thành cảm ơn anh chị bỏ nhiều thời gian, công sức để hướng dẫn chúng em hoàn thành đợt thực tập TP HCM, ngày 20 tháng năm 2020 Sinh Viên Thực Tập Cao Hà Minh Quyết NHẬN XÉT CỦA KHOA Mục Lục Mục Lục PHẦN I: GIỚI THIỆU VỀ CÔNG TY THỰC TẬP PHẦN II: NỘI DUNG THỰC TẬP PHẦN III: CHI TIẾT VỀ DỰ ÁN 11 PHẦN IV: TÀI LIỆU THAM KHẢO 31 PHẦN I: GIỚI THIỆU VỀ CÔNG TY THỰC TẬP Giới thiệu tổng quan công ty cổ phần Hitime 1.1 Sơ lược công ty Tên công ty: Công Ty Cổ phần Hitime Địa chỉ: 373/9 đường âu Cơ, tổ 09, khu phố 1, Phường Phú Trung, Quận Tân Phú, Thành phố Hồ Chí Minh Điện thoại: 0903725050 Kể từ thành lập năm 2017, Hitime trở thành công ty dịch vụ CNTT phát triển Việt Nam Được thúc đẩy niềm đam mê làm việc chăm chỉ, Hitime giúp khách hàng xây dựng doanh nghiệp mạnh hơn, nhanh nhẹn sáng tạo Là tổ chức xây dựng tảng có sẵn, HiTime mang công nghệ tới gần bạn với phương châm đơn giản hóa cho khách hàng sử dụng, giải pháp để mang lại cho khách hàng có kết cơng việc Kinh doanh 1.2 Văn hóa cơng ty - Nhân viên phải có mặt cơng ty trước 9:00 AM kết thúc ngày làm việc vào 6:00 PM - Thời gian làm việc từ thứ đến thứ 6, - Thời gian nghỉ trưa từ 12:00 PM đến 1:00 PM, nhân viên ăn trưa ngủ trước bắt đầu công việc buổi chiều Giới thiệu cơng việc thực tập 2.1 Vị trí thực tập Sinh viên thực tập vị trí React.js Developer Intership 2.2 Cơng việc thực tập - Tìm hiểu quy trình phát triển phần mềm - Tìm hiểu chuyên đề phát triển ứng dụng web hoàn thiện - Tìm hiểu nguyên tắc code - Tìm hiểu công cụ hỗ trợ đảm bảo chất lượng phần mềm 2.3 STT Lịch thực tập cụ thể Thời gian Cơng việc Người hướng dẫn - Tìm hiểu công ty, cách tổ chức công ty Đinh Xuân Lộc - Làm quen với công cụ làm Đinh Xuân Lộc việc công ty - Tìm hiểu HTML, CSS - Thực hành làm Test - Tìm hiểu Javascript - Tìm hiểu ReactJS - Thực hành làm test - Tìm hiểu Redux - Tìm hiểu React Native 7 Đinh Xuân Lộc Đinh Xuân Lộc Đinh Xuân Lộc Đinh Xuân Lộc Đinh Xuân Lộc Đinh Xuân Lộc - Dự án Doopage - Hiển thị thông tin channel ( list zalo, list sendo) cập nhật, xóa PHẦN II: NỘI DUNG THỰC TẬP Tìm hiểu làm việc với ReactJS, quy trình agile nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện lập trình front-end, đồng thời rèn luyện kỹ mềm làm việc nhóm, thuyết trình, giao tiếp 1.Tìm hiểu cơng ty Hitime 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 email công việc… Kết quả: Hiểu thêm công ty Hitime, trình thành lập phát triển Các 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 2.1 Các công cụ làm việc Thời gian: ngày Nội dung: Tìm hiểu cơng cụ sử dụng q trình làm việc Trong thời gian này, anh Lê Tường Lâm hướng dẫn sử dụng công cụ làm việc công ty như: ứng dụng chat công ty (Slack), theo giõi dự án (pm.Hitime.net), quản lý dự án (git.Hitime.net), lịch làm việc (erp.Hitime.net) Kết quả: Hiểu cơng cụ làm việc cơng ty 2.2 Tìm hiểu HTML, CSS, JAVASCRIPT Thời gian: ngày (1 tuần) Nội dung: Được anh Đinh Xuân Lộc training kiến thức html, css, javascript để làm trang web đơn giản - Khái niệm html • HTML viết tắt Hyper Text Markup Language • HTML mơ tả cấu trúc trang Web • HTML bao gồm loạt yếu tố • phần tử HTML cho trình duyệt làm để hiển thị nội dung • phần tử HTML đại diện thẻ • thẻ HTML nhãn mẩu nội dung "tiêu đề", "đoạn", "bảng", vân vân • Trình duyệt khơng hiển thị thẻ HTML, sử dụng chúng để làm cho nội dung trang Nắm khái niệm kiến thức quan trọng để phát triển chức dự án - Khái niệm css: - CSS viết tắt Cascading Style Sheets - CSS mô tả cách phần tử HTML hiển thị hình, giấy, phương tiện khác - CSS giúp tiết kiệm nhiều cơng việc Nó kiểm sốt cách bố trí nhiều trang web lúc - Stylesheets bên lưu trữ file CSS - Khái niệm javascript Là phép biến đổi vertex, color hiệu ứng đặc biệt Việc thực pipeline, từ phiên OpenGL 2.0 trở Thực hiện: - Tham gia đầy đủ buổi trainning Làm tập thực hành thiết kế trang web tin tức Tìm kiếm tài liệu mạng để tìm hiểu thêm Kết quả: - Hiểu khái niệm lập trình web 2.3 Tìm hiểu ReactJS Thời gian: 15 ngày (3 tuần) Nội dung: Được training ReactJS - State: Là thành phần component, giá trị component, button màu xanh trạng thái, màu đỏ trạng thái Tương tự component jsx có trạng thái, quản lí state - Props: Là liệu truyền cho đối tượng Thường thằng cha truyền cho thằng - Redux: Redux JS thư viện Javascript giúp tạo thành lớp quản lý trạng thái ứng dụng Redux có thành phần là: store, views, actions, reduces • Store: Là nơi quản lí trạng thái (state), truy cập để lấy trạng thái state • Actions: Nó pure object định nghĩa thuộc tính type: kiểu action • Reducers: Khác với action có chức mơ tả thứ xảy ra, khơng rõ state response thay đổi, mà việc reducers đảm nhiệm, nơi xác định state thay đổi nào, sau trả state • View: Hiển thị liệu cung cấp Store - Hook • Hook bổ sung React 16.8 • Hook hàm cho phép bạn “kết nối” React state lifecycle vào component sử dụng hàm • Với hooks sử dụng state lifecycle mà khơng cần dung ES6 class Thực hiện: - Tham gia đầy đủ buổi training công ty - Làm thực hành, kiểm tra kiến thức học Kết quả: - Nâng cao kỹ lập trình với ReactJS Có kiến thức quan trọng cho việc lập trình front-end sau 10 1.6 Các component Steps : Step để hát không lặp lặp lại nhịp - Step lẻ : - Step để gom step lẻ: 18 Sửa lại transport: 19 Kết quả: 1.7 Sửa đổi Component: Instrument Hack: Thêm method: 20 areEqual = (a, b) => { a.forEach((item, index) => { if(item !== b[index]) return false } return true; } 21 1.8 Tạo nút Play/ Pause: Lấy Transport.start đặt vào method TransportComponent: 22 23 1.9 Thêm nhạc cụ khác: Tạo render cho loại nhạc cụ: 24 Snare: 25 Clap: 26 Hat: 27 Jam (1 đoạn nhạc): 28 1.10 Chọn nhạc cụ: IntrumentHack lựa chọn loại nhạc cụ để chơi tuyền vào steps Các loại khác null: Method render Instrument: Và cuối truyền trạng thái từ TransportComponent vào InstrumentHack: 29 1.11 Thành quả: Thực - Cao Hà Minh Quyết giúp đỡ tận tình anh Đinh Xuân Lộc 30 PHẦN IV: TÀI LIỆU THAM KHẢO - HTML: https://www.w3schools.com/html/default.asp - CSS: https://www.w3schools.com/css/default.asp - JAVASCRIPT: https://www.w3schools.com/js/default.asp - ReactJS: https://reactjs.org/ - React Native: https://facebook.github.io/react-native/ 31 TỔNG KẾT Như vậy, vòng thời gian ngắn ngủi, em đóng góp chút vào việc xây dựng dự án Doopage Mặc dù đóng góp chưa nhiều cho công ty sau khoảng thời gian thực tập em học hỏi nhiều kinh nghiệm làm việc thực tế Hitime Em chân thành cảm ơn giúp đỡ anh chị công ty Hitime Một lần em xin cảm ơn thầy cô khoa Công Nghệ Phần Mềm giảng dạy cho em kiến thức cần thiết để hồn thành tốt việc thực tập công ty Hitime 32 ... việc thực tập 2.1 Vị trí thực tập Sinh viên thực tập vị trí React.js Developer Intership 2.2 Cơng việc thực tập - Tìm hiểu quy trình phát triển phần mềm - Tìm hiểu chuyên đề phát triển ứng dụng web. .. DUNG THỰC TẬP Tìm hiểu làm việc với ReactJS, quy trình agile nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện lập trình front-end, đồng thời rèn luyện kỹ mềm làm việc nhóm, thuyết trình, ... trợ, bán hàng trở nên thuận tiện, dễ dàng Nội dung báo cáo gồm phần sau - Giới thiệu công ty thực tập - Báo cáo nội dung thực tập - Kinh nghiệm thực tiễn thu - Những đóng góp cho cơng ty - Tài