báo cáo thực tập FRONT END DEVELOPER

1 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 FRONT END DEVELOPER Công ty thực tập : Công ty TNHH Công nghệ thơng tin Visitek Người phụ trách : Đinh Thanh Tình Thực tập sinh : Đỗ Ngọc Bích Trâm TP Hồ Chí Minh, tháng năm 2020 ĐỖ NGỌC BÍCH TRÂM LỜI MỞ ĐẦU Hiện với phát triển mạnh cơng nghệ giới nhu cầu sử dụng internet tăng lên ngày điều chắn Chính 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,… mang lại nhiều lợi ích cho người Đi kèm theo hệ thống website ngày phát triển không ngừng với đủ lĩnh vực, ngành nghề giáo dục, y tế, phim ảnh, ca nhạc, thể thao, làm đẹp,… Tuy nhiên để tạo website nhiều người sử dụng cần nhiều yếu tố nội dung, giao diện, trải nghiệm người dùng mang lại cho người sử dụng lợi ích định Và ngày nay, với phát triển framework Angular, React Vue đưa tảng web trở nên mạnh mẽ nữa, mang lại trải nghiệm người dùng tốt Sau ba năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn tham gia làm web môi trường chuyên nghiệp, em có dự định thực tập Vì vậy, em định chọn Cơng ty TNHH Visitek – mơi trường lý tưởng để em học tập rèn luyện thân ĐỖ NGỌC BÍCH TRÂM LỜI CẢM ƠN Để hồn thành q trình thực tập doanh nghiệp trước hết em xin gửi đến quý Thầy Cô giảng viên trường Đại học Công Nghệ Thông Tin – Đại học Quốc Gia TP.HCM Thầy Cô giảng viên khoa Công Nghệ Phần Mềm tận tình giúp đỡ tạo điều kiện để em hồn thành q trình thực tập doanh nghiệp Em xin trân trọng gửi lời cảm ơn đến Ban Lãnh Đạo, phòng ban Công ty TNHH Công nghệ thông tin Visitek tạo điều kiện thuận lợi cho em tìm hiểu trải nghiệm thực tế suốt trình thực tập công ty Cuối em xin chân thành cảm ơn anh Cao Thanh Ý – Giám đốc công ty anh Đinh Thanh Tình – người phụ trách chuyên môn giúp đỡ, tin tưởng cho em tham gia vào dự án thực tế để em hoàn thành tốt báo cáo thực tập doanh nghiệp Cuối em xin chúc quý Thầy Cô dồi sức khỏe thành công nghiệp cao quý Đồng kính chúc cơ, chú, anh, chị Cơng ty TNHH Công nghệ thông tin Visitek mạnh khỏe, đạt nhiều thành công tốt đẹp công việc Đỗ Ngọc Bích Trâm TP.Hồ Chí Minh, ngày 29 tháng 07 năm 2020 ĐỖ NGỌC BÍCH TRÂM NHẬN XÉT CỦA KHOA ĐỖ NGỌC BÍCH TRÂM MỤC LỤC 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 Visitek 2.Sản phẩm công ty Chương 2: Nội dung thực tập .7 1.Tìm hiểu cơng ty kỹ công ty 2.Nghiên cứu kỹ thuật 3.Thực project 4.Lịch làm việc Chương 3: Chi tiết project .11 1.Giới thiệu trang admin quản lý karaoke .11 2.Thực 13 3.Thực project 13 4.Kết .14 TÀI LIỆU THAM KHẢO 15 TỔNG KẾT 16 ĐỖ NGỌC BÍCH TRÂM Chương 1: Giới thiêu công ty thực tập Giới thiệu công ty Visitek Visitek công ty start up thành lập năm nay, nhà cung cấp dịch vụ Công nghệ thông tin, công ty tập trung cung cấp giải pháp CNTT cho doanh nghiệp vừa nhỏ Việt Nam Công việc công ty cung cấp giải pháp CNTT chất lượng cao, trì bảo vệ sở hạ tầng IT doanh nghiệp vừa nhỏ - Thông tin liên hệ: Công ty TNHH Công nghệ thông tin Visitek - Địa chỉ: 86 đường số , phường , khu Cityland Center Hills , Gò Vấp , TP HCM - Hotline: 0567055912 - Website: https://visitek.com.vn/ - Email: Visitekvn@gmail.com Sản phẩm công ty Là công ty start up vừa thành lập gần công ty phát triển phần mềm quản lý bán hàng, phần mềm hỗ trợ thực nghiệp vụ quản lý trường học, quản lí kho,… outsource trang website thiết kế riêng theo nhu cầu khách hàng,… ĐỖ NGỌC BÍCH TRÂM Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Frontend developer” nhằm mục đích giúp sinh viên thực tập đào tạo chủ yếu lập trình giao diện website rèn luyện bổ sung kỹ lập trình, từ logic đồng thời rèn luyện kỹ mềm làm việc nhóm, giao tiếp Tại cơng ty, sinh viên có hội học tập, khám phá làm việc mơi trường phát triển phần mềm chun nghiệp Tìm hiểu công ty kỹ công ty 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, trình thành lập 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ông ty Ngồi ra, thực tập sinh cịn 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 : Hiểu thêm cơng ty Visitek, 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 2.1 2.2 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, supervisor hướng dẫn thực tập sinh tìm hiểu cơng cụ giúp ích cho cơng việc sau Một số phần mềm số Phần mềm Telegram – sử dụng trao đổi bạn anh công ty, Notepad ++ - chương trình soạn thảo văn hữu ích phổ biến với lập trình viên, Github – nơi up quản lý source code 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 sơ lược HTML, CSS, Javascript Thời gian : ngày Nội dung : - Sử dụng thẻ , ,… xếp hợp lý, dễ đọc, dễ nhìn cho chuẩn SEO Đồng thời tìm hiểu html5 ĐỖ NGỌC BÍCH TRÂM - Tổ chức css theo cấu trúc từ layout lớn đến layout chi tiết, đặt tên class element html cho phù hợp dễ đọc Và atribute css để trang web có ui/ux tốt thân thiện với người dùng - Responsive cho trang website hoàn chỉnh - Tìm hiểu Bootstrap framework hỗ trợ tốt cho việc lập trình giao diện website Thực : Tham gia đầy đủ buổi training công ty Kết : - Nâng cao kỹ lập trình html/css - Biết số quy tắc viết code html/css cho người dễ đọc, dễ hiểu dễ dàng sử dụng 2.3 Tìm hiểu ReactJS Thời gian : ngày (1 tuần) Nội dung : - Khởi tạo ứng dụng ReactJS create-react-app - Tìm hiểu vòng đời ReactJS - Cách chuyển từ Class Component sang React Hook - Cách sử dụng thư viện Material UI – thư viện giúp hỗ trợ cho việc xây dụng UI nhanh chóng theo quy chuẩn Material Design Thực : - Tham gia đầy đủ buổi training công ty - Làm layout admin page có responsive Kết : - 2.4 Nắm kiến thức cần thiết ReactJS Nắm cách để triển khai ứng dụng web với ReactJS Biết thêm nhiều thư viện hỗ trợ xây dựng ứng dụng web ReactJS Tìm hiểu cách lấy data từ API store liệu vào Redux Thời gian : ngày (2 tuần) Nội dung : - Cách kiểm tra, đọc data lấy từ API thông qua Postman - Cách gọi API React thư viện axios - Tìm hiểu Redux, cách Redux hỗ trợ React việc quản lý state ứng dụng - Async/await function - Thiết lập Redux Thunk structure React Thực : ĐỖ NGỌC BÍCH TRÂM - Tham gia đầy đủ buổi training công ty Làm admin page hoàn chỉnh với đầy đủ chức cần thiết Kết : - Nắm kiến thức cần thiết ReactJS + Redux Nắm cách để triển khai ứng dụng web với ReactJS với đầy đủ chức Thực project Sau tháng training thực hành, thực tập sinh nắm kiến thực html, css biết cách sử dụng bootstrap 4, jquery kiến thức tảng reactjs Trong thời gian tiếp theo, mentor hướng dẫn thực tập sinh áp dụng kiến thức vào dự án thực tế công ty 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 người hướng dẫn Tìm hiểu cơng ty, Anh Đinh Thanh cách tổ chức Tình cơng ty Làm quen với công cụ làm việc công ty Học cách trao đổi, làm việc qua Telegram Tìm hiểu sơ lược HTML, CSS, Javascript 3,4 Tìm hiểu Anh Đinh Thanh ReactJS Tình - Làm layout admin page React với thư viện Material UI - Học cách lấy data Anh Đinh Thanh ĐỖ NGỌC BÍCH TRÂM 10 5,6 7,8,9 10 từ API - Tìm hiểu Redux - Xây dựng hệ thống React + Redux Thunk - Hoàn thiện admin page đầy đủ chức với React + Redux - Hỗ trợ team viết trang web công ty - Tiếp nhận team lên kế hoạch viết trang admin quản lý karaoke theo yêu cầu khách hàng - Xây dựng giao diện trang web - Thực trang admin với đầy đủ chức yêu cầu - Tiếp nhận team lên kế hoạch viết trang web bán sản phẩm chim yến - Xây dựng layout trang chủ trang danh sách, chi tiết sản phẩm - Tình Anh Đinh Thanh Tình Anh Đinh Thanh Tình Anh Đinh Thanh Tình ĐỖ NGỌC BÍCH TRÂM 11 Chương 3: Chi tiết project Giới thiệu trang admin quản lý quán karaoke Website giúp cho chủ doanh nghiệp quản lý quán karaoke với đầy đủ chức chính: đăng nhập, thêm xóa sửa phịng, sản phẩm, nhân viên thơng tin hóa đơn, chia ca làm việc cho nhân viên, phân quyền, báo cáo, tính lương nhân viên theo tuần, … Một số hình ảnh website: Trang Dashboard Trang User (lưu thông tin nhân viên): ĐỖ NGỌC BÍCH TRÂM 12 Trang chia lịch cho nhân viên bảng tính lương theo tuần: Trang thơng tin hóa đơn chi tiết hóa đơn: ĐỖ NGỌC BÍCH TRÂM 13 Thực hiện: Front end: sinh viên Đỗ Ngọc Bích Trâm Với giúp đỡ bạn Back end team anh hướng dẫn Đinh Thanh Tình Kế hoạch: Giai đoạn phân tích requirement: - Trang web với chức thêm xóa sửa, chia lịch, báo cáo,… - Thiết kế layout thân thiện, dễ sử dụng Giai đoạn coding: - Thiết kế trang web theo layout thống Giai đoạn testing: - Test tay qua chức năng, fix bugs ĐỖ NGỌC BÍCH TRÂM 14 - Gửi cho khách hàng, nhận feedback chức năng, thiết kế cần sửa cho phù hợp Kết quả: - Đầy đủ chức yêu cầu - Có chậm với dự kiến ban đầu - ĐỖ NGỌC BÍCH TRÂM 15 TÀI LIỆU THAM KHẢO For React https://reactjs.org/ For Redux https://redux.js.org/ For Material UI https://material-ui.com/ ĐỖ NGỌC BÍCH TRÂM 16 TỔNG KẾT Như vậy, vòng hai tháng ngắn ngủi, sinh viên thực tập hoàn thành web quản lý karaoke Trang web có đầy đủ tính đề mà bên đối tác yêu cầu Chân thành cảm ơn giúp đỡ bạn nhóm lập trình web ban giám đốc công ty, đặc biệt cảm ơn anh Đinh Thanh Tình ln giúp đỡ hỗ trợ cho em hồn thành báo cáo thực tập lần ĐỖ NGỌC BÍCH TRÂM ... thực nghiệp vụ quản lý trường học, quản lí kho,… outsource trang website thiết kế riêng theo nhu cầu khách hàng,… ĐỖ NGỌC BÍCH TRÂM Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Frontend... chức Thực project Sau tháng training thực hành, thực tập sinh nắm kiến thực html, css biết cách sử dụng bootstrap 4, jquery kiến thức tảng reactjs Trong thời gian tiếp theo, mentor hướng dẫn thực. .. Chương 1: Giới thiệu công ty thực tập 1.Giới thiệu công ty Visitek 2.Sản phẩm công ty Chương 2: Nội dung thực tập .7 1.Tìm hiểu cơng ty kỹ công