Báo cáo thực tập lập trình WIDGET trên nền tảng REACT

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 WIDGET TRÊN NỀN TẢNG REACT Lê Xuân Tùng Công ty thực tập : ELCA Việt Nam Người phụ trách : Nguyễn Nhật Minh Thực tập sinh : Lê Xuân Tùng Báo cáo thực tập TP Hồ Chí Minh, tháng 12 năm 2021 Lê Xuân Tùng Báo cáo thực tập LỜI MỞ ĐẦU Ngày nay, công nghệ Web phận thiếu ngành công nghiệp phần mềm Với tốc độ phát triển vô mạnh mẽ, công nghệ Web sử dụng nhiều phổ biến rộng rãi Cùng với xu phát triển giới, Việt Nam ngoại lệ Công nghệ Web sản phẩm hầu hết công ty Đặc biệt với đời React đưa công nghệ Web phát triển thêm tầm cao Công nghệ Web phát triển mạnh đầu tư nhiều phần mềm Với hỗ trợ đa tảng, dường Web dần thay phần mềm desktop lợi ích mà đem lại Vì lý này, em định chọn lập trình Web làm định hướng cho việc học tập 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 chun nghiệp, em có dự định thực tập hè Vì vậy, em định chọn ELCA - môi trường lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định Lê Xuân Tùng Báo cáo thực tập LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty ELCA Việt Nam 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, nhóm thực tập chúng em tiếp thu kiến thức quan trọng để làm widget 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 chúng em hoàn thành đợt thực tập Đặc biệt cảm ơn anh Nguyễn Nhật Minh, training React, hướng dẫn, giúp đỡ cho chúng em tận tình khó khăn cơng việc, đến khó khăn việc làm quen với môi trường mới; cảm ơn anh Nguyễn Việt Dương, training Java, hỗ trợ chúng em nhiều vấn đề RestAPI, Java trình làm widget; cảm ơn anh Hồ Văn Thiện Tâm, dẫn chúng em cách làm báo cáo, lên kế hoạch, kỹ thiếu; cảm ơn anh Phạm Thế Vinh training cho chúng em kiến thức quan trọng JavaScript, CSS3, HTML5 để làm sản phẩm thời gian qua 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 Lê Xuân Tùng TP HCM, ngày 19 tháng 12 năm 2021 Lê Xuân Tùng Báo cáo thực tập NHẬN XÉT CỦA KHOA Lê Xuân Tùng Báo cáo thực tập MỤC LỤC 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 ELCA Việt Nam 2 Sản phẩm công ty Chương 2: Nội dung thực tập 3 Tìm hiểu cơng ty kỹ công ty Nghiên cứu kỹ thuật Thực project Lịch làm việc Chương 3: Chi tiết project Giới thiệu Widget Thực 12 Kế hoạch 12 TÀI LIỆU THAM KHẢO 13 TỔNG KẾT 14 Lê Xuân Tùng Báo cáo thực tập Chương 1: Giới thiệu công ty thực tập Giới thiệu công ty ELCA Việt Nam ELCA công ty phát triển phần mềm độc lập lớn Thụy Sĩ Từ năm 1968, nhiệm vụ công ty thực giải pháp ban đầu sáng tạo với giá trị gia tăng mạnh mẽ Làm việc với khách hàng đối tác công ty, ELCA đảm bảo hệ thống độ bền Trong 15 năm nhóm cơng ty hoạt động thành cơng trung tâm phát triển nước Việt Nam Quyết định mở ELCA Việt Nam khởi công cho nhóm Năm 1998 ELCA cơng ty phần mềm 100% vốn nước mở văn phịng Thành phố Hồ Chí Minh Sản phẩm công ty ELCA công ty với nhiều đơn vị, đơn vị có sản phẩm riêng Với vị trí thực tập sinh tham gia vào SecuTix – đơn vị lớn ELCA với sản phẩm Hệ thống bán vé tiếng toàn cầu Hệ thống bao gồm web bán vé phần mềm bán vé cho máy bán vé tự động Tất phát triển công nghệ Web Đối tác cơng ty thường hệ thống tham quan, sân vận động du lịch Một đối tác lớn phải kể đến FIFA EURO với thành công việc bán vé cho mùa EURO 2021 Lê Xuân Tùng Báo cáo thực tập Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Lập trình Widget tảng React” 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 Web, đồ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, khám phá làm việc mơi trường phát triển game 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 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 ELCA, 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 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ố Source Tree - sử dụng làm việc nhóm, Cygwin – cơng cụ build source code với nhiều tiện ích, 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 Thực hiện: Thực hành sử dụng phần mềm nêu Kết quả: 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 nhau, so với việc dung IDE Tìm hiểu ngôn ngữ Java Spring Framework Thời gian: ngày (1 tuần) Nội dung: Được training kỹ thuật Java nâng cao, kiến thức quan trọng cho việc tối ưu Spring - Lập trình hướng đối tượng Lê Xuân Tùng Báo cáo thực tập Các kiến thức lập trình hướng đối tượng khái niêm, đặc tính tính kế thừa, tính đóng gói, tính ảo hóa, tính đa hình Ngồi ra, thực tập sinh hướng dẫn cách thiết kế lớp cho đối tượng game - Biểu thức lambda stream API Java : Từ phiên Java 8, với đời biểu thức lambda giúp cho việc lập trình tối ưu - Spring MVC Spring Framework tảng web server sử dụng phổ biến xây dựng ngôn ngữ Java 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ả: - 2.3 Nâng cao kỹ lập trình với ngơn ngữ Java Có kiến thức quan trọng cho việc lập trình web sau Ngồi cịn biết thêm số quy tắc việc viết code cho chuẩn, dễ đọc, dễ hiểu Tìm hiểu React JavaScript Nội dung: Các kiến thức JavaScript ReactJS - Các lý thuyết JavaScript Kiến thức ngôn ngữ JavaScript Nắm vững lý thuyết const, let, var JavaScript Bên cạnh cịn có lý thuyết: function, promise, … - Kiến thức React: Nắm khái niệm Virtual DOM React Lý thuyết React Hook Responsive với React Bootstrap Bundle size widget Thực hiện: Lê Xuân Tùng Báo cáo thực tập - Tham gia đầy đủ buổi trainning Làm tập thực hành javascript bản, React, … Tìm kiếm tài liệu mạng để tìm hiểu thêm Kết quả: 2.4 Hiểu khái niệm lập trình ReactJS Biết cách tổ chức xây dựng web page widget Lập trình widget tảng React Nội dung: Các kỹ thuật tạo widget React TypeScript - Định nghĩa Widget: Widget phận trang web, phát triển tương tự web page Widget integrate vào trang web script từ bundle Bản thân widget tự call Rest API trang web - Tạo widget: Dựa project setup theo cấu trúc business công ty, widget thêm vào folder widget, widget có file index.html để integrate vào lúc lập trình sử dụng storybook - Lập trình Widget React TypeScript Để lập trình widget TypeScript, cần sử dụng template TypeScript React Mỗi widget class Component mang đủ đặc tính web page lúc lập trình website React Tuy nhiên export page ra, khơng thể chạy cách thơng thường lập trình web, mà cần tích hợp vào file html storybook để hiển thị widget Thực hiện: - Tham gia đầy đủ buổi training Tạo widget Chạy thử widget kiểm tra bundle size Kết quả: - Đã tạo widget biết cách tích hợp vào file html Thực project Lê Xuân Tùng Báo cáo thực tập Sau tháng training thực hành, thực tập sinh nắm kiến thực React, JavaScript, HTML5 CSS3 Trong tháng thứ hai, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để thực project widget React TypeScript Chi tiết đồ án nói phần sau Lịch làm việc Tuần Công việc Setup environment Java + Maven + Java + Exception Handling + Design pattern + Debugging + Exercise Spring + Multilingual, multitier + Coding convention + Spring framework Hibernate + Application security + Surrogate key & concurrent update + SQL + Unit test Java + Hibernate React + CSS + JavaScript + React framework + Coding best practice Business + ELCA + SecuTix Readiness Review + WBS + Thời gian 5, 6, Lê Xuân Tùng 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 Việt Dương Anh Nguyễn Việt Dương Anh Nguyễn Việt Dương Anh Nguyễn Nhật Minh Anh Nguyễn Nhật Minh Anh Nguyễn Nhật Minh Báo cáo thực tập 10, 11, 12 13 14 Lê Xuân Tùng Widget development + RestAPI cho widget + Widget UI Correction bugs Report Anh Nguyễn Nhật Minh Anh Nguyễn Nhật Minh Anh Nguyễn Nhật Minh Báo cáo thực tập Chương 3: Chi tiết project Giới thiệu widget Widget mang tên Delivery Mode – widget sử dụng bước chọn cách gửi mặt hàng tới người dùng (shipment mode) Widget xây dựng với mục đích để phận lập trình web core tích hợp sử dụng 1.1 Nghiệp vụ Trong sản phẩm khách hàng lựa chọn, sản phẩm có phương thức giao hàng định Ở có trường hợp: - Tất sản phẩm giỏ hàng có chung phương thức giao hàng Đới với trường hợp này, widget cần hiển thị danh sách phương thức chung cho người dùng chọn phương thức Mỗi phương thức có phí cụ thể (tính theo sản phẩm theo lần mua) Nếu theo sản phẩm: Tổng phí = phí * số sản phẩm Nếu theo lần mua, phí phí chuyển giao Đối với phương thức cần dùng tới địa chỉ, phải hiển thị mục chọn địa cho người dùng Nếu người dùng guest (khách) có button để thêm địa Nếu người dùng có tài khoản lại khơng có địa nào, cần ẩn phương thức này, thông báo cho người dùng phương thức bị ẩn - Không tồn phương thức chung cho tất mặt hàng Đới với trường hợp này, widget phải hiển thị thông tin sản phẩm danh sách phương thức sản phẩm Nếu có nhiều sản phẩm chọn phương thức giống nhau, cần kiểm tra để tính giá tiền hợp lý Nếu cần chọn địa chỉ, tất phải chọn chung địa Nếu tồn sản phẩm khơng có phương thức nào, khơng cho phép tiếp tục 1.2 Tiến hành xây dựng widget viết Rest API Mô tả Lê Xuân Tùng Báo cáo thực tập Để viết API, cần phải có orderId (mã lượt mua) contactId (mã người dùng) Từ lấy thơng tin sản phẩm người dùng chọn tìm phương thức chung (hoặc khơng có phương thức chung) Đồng thời lấy tất địa giao hàng người dùng để trả Đối với widget, cần xác định từ liệu trả có chung phương thức hay khơng để hiển thị cho phù hợp Trường hợp có phương thức chung: Lê Xuân Tùng Báo cáo thực tập 10 Trường hợp khơng có phương thức chung Lê Xn Tùng Báo cáo thực tập 11 Lê Xuân Tùng Báo cáo thực tập 12 Thực Thực tập sinh Lê Xuân Tùng Và giúp đỡ tận tình team trainer SecuTix – ELCA Kế hoạch Giai đoạn Alpha: - Hoàn thành nghiệp vụ Widget hoạt động tốt hai trường hợp Kết quả: - Hầu hết tính thực Hỗ trợ thêm trường hợp người dùng chọn phương thức không hợp lệ lọc phương thức Giai đoạn Beta: - Hoàn thành nghiệp vụ bổ sung Sửa lỗi tính tốn phí sai lọc phương thức theo vùng, mốc thời gian Kết quả: Đã hồn thành tồn tính Lê Xuân Tùng Báo cáo thực tập 13 TÀI LIỆU THAM KHẢO For Java & Spring https://spring.io/projects/spring-boot For React TypeScript & Bootstrap https://www.typescriptlang.org/ https://react-bootstrap.github.io/ https://reactjs.org/ For Style https://styled-components.com/ Lê Xuân Tùng Báo cáo thực tập 14 TỔNG KẾT Như vậy, vòng tháng ngắn ngủi, widget quan trọng phát triển thành công Widget có đầy đủ tính đề ban đầu Do nghiệp vụ SecuTix rộng có nhiều thay đổi dẫn đến cịn số điểm chưa hoàn hảo Widget, nhiên với tính kế thừa cao, widget dễ dàng để sửa chữa nâng cấp Chân thành cảm ơn giúp đỡ anh chị nhóm trainer SecuTix – ELCA, giúp đỡ team Gravity để hoàn thành widget Cảm ơn anh Nguyễn Nhật Minh giúp em hoàn thành báo cáo Lê Xuân Tùng Báo cáo thực tập ... 2021 Lê Xuân Tùng Báo cáo thực tập Chương 2: Nội dung thực tập Đợt thực tập với chủ đề ? ?Lập trình Widget tảng React? ?? 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 Web, đồng thời... Hiểu khái niệm lập trình ReactJS Biết cách tổ chức xây dựng web page widget Lập trình widget tảng React Nội dung: Các kỹ thuật tạo widget React TypeScript - Định nghĩa Widget: Widget phận trang... DOM React Lý thuyết React Hook Responsive với React Bootstrap Bundle size widget Thực hiện: Lê Xuân Tùng Báo cáo thực tập - Tham gia đầy đủ buổi trainning Làm tập thực hành javascript bản, React,