báo cáo thực tập FRONTEND DEVELPOER

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 FRONTEND DEVELPOER Công ty thực tập : Đất Việt Software Người phụ trách : Nguyễn Duy Lành Thực tập sinh : Tạ Quốc Khánh TP Hồ Chí Minh, tháng 07 năm 2020 Trang 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 Sau bốn 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 mơi trường chun nghiệp, em có dự định thực tập Vì vậy, em định chọn Đất Việt Software - môi trường lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định TẠ QUỐC KHÁNH Trang 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 Trách Nhiệm Hữu Hạn Công nghệ Dịch vụ Đất Việt 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 q trình thực tập cơng ty Cuối em xin chân thành cảm ơn anh Phạm Đình Hịa – Giám đốc công ty giúp đỡ, tin tưởng cho em tham gia vào dự án thực tế để em hồn thành tốt báo cáo thực tập doanh nghiệp Nhà trường cho em kiến thức quan trọng qua năm học trường để em áp dụng vào thực tế vào cơng việc thời gian thực tập công ty Qua trình thực tập em biết thêm nhiều kiến thức mẻ, hoạt động công ty,… giúp em có thêm nhiều kinh nghiệm tự tin cho công việc sau thân Tuy nhiên kiến thức thân hạn chế nên q trình thực tập hồn thiện báo cáo khơng tránh khỏi sai sót, kính mong nhận ý kiến đóng góp từ q Thầy Cơ quý Công ty Cuối em xin chúc quý Thầy Cô dồi sức khỏe thành công nghiệp cao q Đồng kính chúc cơ, chú, anh, chị Công ty Trách Nhiệm Hữu Hạn Công nghệ Dịch vụ Đất Việt mạnh khỏe, đạt nhiều thành công tốt đẹp công việc TP.Hồ Chí Minh, ngày 28 tháng 07 năm 2020 Sinh viên thực Tạ Quốc Khánh TẠ QUỐC KHÁNH Trang NHẬN XÉT CỦA KHOA TẠ QUỐC KHÁNH Trang MỤC LỤC LỜI MỞ ĐẦU LỜI CẢM ƠN 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 Giới thiệu công ty Đất Việt Software Sản phẩm công ty CHƯƠNG 2: NỘI DUNG THỰC TẬP Tìm hiểu cơng ty kỹ công ty Nghiên cứu kỹ thuật 2.1 Các công cụ làm việc 2.2 Tìm hiểu HTML, CSS ngôn ngữ JavaScript 2.3 Tìm hiểu cấu trúc project ASP.NET MVC 2.4 Tìm hiểu Reactjs Thực project 10 Lịch làm việc 10 CHƯƠNG 3: CHI TIẾT VỀ PROJECT 12 Giới thiệu dự án 12 Thực 16 Kế hoạch 16 TÀI LIỆU THAM KHẢO 16 TỔNG KẾT 17 TẠ QUỐC KHÁNH Trang CHƯƠNG 1: GIỚI THIÊU CƠNG TY THỰC TẬP Giới thiệu cơng ty Đất Việt Software Đất Việt Software thành lập vào tháng 10 năm 2011 Với tiền thân đội ngũ chun gia phần mềm giải pháp viễn thơng có kinh nghiệm từ Hàn Quốc Chuyên môn Đất Việt Software bao gồm xây dựng giải pháp phát triển phần mềm, ứng dụng di động dịch vụ đám mây Đất Việt Software cân tư chiến lược với chuyên môn kỹ thuật công nghệ đột phá ứng dụng di động, đám mây phân tích để phát triển giải pháp đáp ứng nhu cầu kinh doanh cụ thể Thông tin liên hệ: Datviet software LTD - Địa chỉ: Tầng Cao Ốc Bình Minh, Lương Định Của, phường Bình An, Quận 2, thành phố Hồ Chí Minh - Hotline: (028) 620 2480 - Website: https://datvietsoftware.com.vn/ - Email: lienhe@datvietsoftware.com.vn Sản phẩm công ty Với năm hoạt động ngành công nghệ phần mềm, Đất Việt Software phát triển nhiều phần mềm áp dụng vào doanh nghiệp phần mềm quản lý bán hàng, phần mềm hoá đơn điện tử, phần mềm hỗ trợ thực TẠ QUỐC KHÁNH Trang nghiệp vụ quản lý trường học, quản lí kho trang website thiết kế riêng theo nhu cầu khách hàng,… TẠ QUỐC KHÁNH Trang 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ỹ ăng 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ủ, giới thiệu phần mềm hỗ trợ để liên lạc với người công ty Kết : Hiểu thêm cơng ty Đất Việt, 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 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 Hai ngày làm việc tiếp theo, anh Lành hướng dẫn thực tập sinh tìm hiểu sử dụng Tortoise SVN – phần mềm hỗ trợ hiệu làm việc nhóm Phần mềm Skype – sử dụng trao đổi anh/chị công ty cài đặt IDE phục vụ cho việc lập trình Node Version TẠ QUỐC KHÁNH Trang Manager – công cụ để quản lý thay đổi version nodejs để phù hợp với dự án công ty Thực : Thực hành sử dụng phần mềm nêu Kết : Làm quen, biết công cụ biết cách sử dụng công cụ để phục vụ cho cơng việc 2.2 Tìm hiểu HTML, CSS ngôn ngữ JavaScript Thời gian : ngày Nội dung : Được training kiến thức quan trọng html,css, javascript - Sử dụng thẻ , ,… xếp hợp lý, dễ đọc, dễ nhìn phải xếp thẻ cho chuẩn SEO Đồng thời tìm hiểu html5 - 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 jQuery (thư viện viết từ Javascript) - 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 - Làm thực hành kiến thức học - Làm lại giao diện website website mỹ phẩm 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 - Hoàn thành giao diện trang TẠ QUỐC KHÁNH Trang 2.3 Tìm hiểu cấu trúc project ASP.NET MVC Thời gian : ngày Nội dung : Được training cấu trúc project ASP.NET MVC Thực : - Tham gia training công ty - Chỉnh sửa giao diện bị lỗi project cũ Kết : - Nâng cao kỹ đọc xử lí code người khác - Biết thêm nhiều cách tổ chức project ASP.NET MVC 2.4 Tìm hiểu Reactjs Thời gian : ngày Nội dung : - Khởi tạo ứng dụng reactjs - Tìm hiểu vịng đời component reactjs - Các kiến thức quan trọng component,router, state, props, cách viết ES6, chuyển từ html phân chia thành component reactjs, cách gọi api axios, Redux, - Kiểm tra api thông qua postman - Biết cách sử dụng ant design – tập hợp hầu hết thư viện reactjs layout, notification, modal, checkbox, upload file, pagination,… Thực : - Tham gia đầy đủ buổi training công ty Kết : - 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Ạ QUỐC KHÁNH Trang 10 Thực project Sau gần tuần 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 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 - Học cách trao đổi làm việc qua skype - Đọc tài liệu liên quan tới html,css, jquery bootstrap,… - Được hướng dẫn cấu trúc project ASP.NET công ty - Fix giao diện project ASP.NET cũ - Thiết kế giao diện trang chủ website ecommerce mỹ phẩm - Tiếp tục xây dựng giao diện cịn lại website - Tìm hiểu Reactjs ES6, Component, Redux - 3,4,5 Người hướng dẫn Mức độ hoàn thành Nhận xét người hướng dẫn Anh Nguyễn Duy Lành Anh Nguyễn Duy Lành Anh Nguyễn Duy Lành Anh Nguyễn Duy Lành TẠ QUỐC KHÁNH Trang 11 8,9,10 - Hoàn thành vài task nhỏ website quản lí reactjs Fix bug website ecommerce responsive, lỗi hiển thị Chỉnh sửa giống desgin Anh Nguyễn Duy Lành Anh Nguyễn Duy Lành TẠ QUỐC KHÁNH Trang 12 CHƯƠNG 3: CHI TIẾT VỀ PROJECT Giới thiệu dự án Website mỹ phẩm sử dụng với mục đích nhận dạng quảng bá thương hiệu với mặt hàng phong phú đa dạng chăm sóc da mặt, thể, phấn son dưỡng chất bảo vệ da, Với giao diện đặc trưng màu sắc, layout, bố cục theo mong muốn đối tác, tạo cảm thấy thoải mái mua sắm website, hiển thị thông tin sản phẩm đầy đủ, chi tiết với định dạng hình ảnh chất lượng cao Website thiết kế chuẩn SEO website với công nghệ hỗ trợ tối ưu cho kế hoạch truyền thông Online thông qua facebook, google Google Tag, Facebook pixel điều đặc biệt website tối ưu để sử dụng nhiều tảng khác Vì website ecommerce nên đầy đủ chức đăng nhập, đăng kí, xem thơng tin sản phẩm thông tin khách hàng, thông tin liên quan đến đơn hàng, đặt hàng, tốn, trang thơng tin tin tức,… Trang web đối tác: https://yhl.com.vn/ Một số hình ảnh website: TẠ QUỐC KHÁNH Trang 13 Trang chủ Trang chi tiết sản phẩm TẠ QUỐC KHÁNH Trang 14 Các trang khác TẠ QUỐC KHÁNH Trang 15 TẠ QUỐC KHÁNH Trang 16 Thực Sinh viên: Tạ Quốc Khánh Và giúp đỡ tận tình anh Lành anh Công Kế hoạch Giai đoạn 1: - Thiết kế UI cho tất trang trao đổi với khách hàng - Tạo trang html,css Kết quả: Cơ hoàn thành giao diện cho website Giai đoạn 2: - Đổ liệu vào trang xây dựng xong - Tiếp tục xây dựng trang html lại Giai đoạn 3: - Fix bug cho khách hàng trải nghiệm trước TÀI LIỆU THAM KHẢO Document Html,css, javascript https://www.w3schools.com/ https://developer.mozilla.org/vi/docs/Learn https://getbootstrap.com/docs/4.0/getting-started/introduction/ Document ASP.NET MVC https://dotnet.microsoft.com/apps/aspnet/mvc Document Reactjs https://reactjs.org/ https://ant.design/ TẠ QUỐC KHÁNH Trang 17 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 website thương mại điện tử mảng mỹ phẩm làm đẹp Trang web có đầy đủ tính đề mà bên đối tác yêu cầu Do thời gian có hạn nên có vài lỗi hiển thị chưa có kinh nghiệm nhiều việc phát triển website, trải nghiệm người dùng cịn nhiều hạn chế Nhưng nhìn chung, đáp ứng đầy đủ yêu cầu website thương mại điện tử nhận dạng thương hiệu cần có Chân thành cảm ơn giúp đỡ anh chị nhóm lập trình web ban giám đốc cơng ty, đặc biệt cảm ơn anh Nguyễn Duy Lành ln giúp đỡ hỗ trợ cho em hồn thành báo cáo thực tập lần TẠ QUỐC KHÁNH ... suốt q trình thực tập cơng ty Cuối em xin chân thành cảm ơn anh Phạm Đình Hịa – Giám đốc cơng ty giúp đỡ, tin tưởng cho em tham gia vào dự án thực tế để em hồn thành tốt báo cáo thực tập doanh nghiệp... 10 Thực project Sau gần tuần 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. .. hỗ trợ thực TẠ QUỐC KHÁNH Trang nghiệp vụ quản lý trường học, quản lí kho trang website thiết kế riêng theo nhu cầu khách hàng,… TẠ QUỐC KHÁNH Trang CHƯƠNG 2: NỘI DUNG THỰC TẬP Đợt thực tập với