Đang tải... (xem toàn văn)
Microsoft Word TTDN 19522257 Nguyễn Minh Thi SE501 N11 PMCL doc Sinh viên Nguyễn Minh Thi 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 VIÊN FRONTEND Công ty th[.]
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 VIÊN FRONTEND Công ty thực tập : Công ty Cổ phần Công nghệ thông minh MiSmart Người phụ trách : Huỳnh Thế Hải Nam Thực tập sinh : Nguyễn Minh Thi TP Hồ Chí Minh, tháng 12 năm 2022 Sinh viên Nguyễn Minh Thi LỜI MỞ ĐẦU Hiện nay, xã hội ngày phát triển, nhiều công nghệ phát minh dẫn đến cách mạng giới Internet Lập trình web nằm số Với tốc độ phát triển vơ mạnh mẽ, ứng dụng Desktop, Website, Mobile nhân tố kích thích phát triển cơng nghệ thông tin giới, phần cứng phần mềm Cùng với phát triển công nghệ đó, doanh nghiệp dần số hóa thương mại điện tử đến sản phẩm để tiếp cận đến nhiều người, từ nước đến nước ngồi Do ngành lập trình web, đặc biệt thời đại 4.0 trở nên phát triển Và giới trẻ chúng em nguồn nhân lực quan trọng q trình phát triển Vì lí này, em định chọn lập trình web - cụ thể lập trình frontend làm định hướng cho việc học làm việc sau 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 phát triển mơi trường chun nghiệp Vì vậy, em định chọn Công ty Cổ phần Công nghệ thông minh MiSmart - môi trường lý tưởng, đại, chuyên nghiệp, nơi giúp em thực dự định Sinh viên Nguyễn Minh Thi LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty Cổ phần Công nghệ Thông minh MiSmart 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, em tiếp thu kiến thức quan trọng, kinh nghiệm thực tế làm Chân thành cảm ơn anh chị công ty 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 Huỳnh Thế Hải Nam 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 Em cố gắng vận dụng kiến thức học tập để hoàn thành báo cáo Nhưng kiến thức hạn chế khơng có nhiều kinh nghiệm thực tiễn nên khó tránh khỏi thiếu sót q trình nghiên cứu trình bày Rất kính mong góp ý để báo cáo em hoàn thiện Cũng xin cảm ơn thầy khoa Cơng nghệ phần mềm nhiệt tình hỗ trợ, tạo điều kiện cho em làm báo cáo Xin trân trọng cảm ơn! Nguyễn Minh Thi TpHCM, ngày 14 tháng 12 năm 2022 Sinh viên Nguyễn Minh Thi NHẬN XÉT CỦA KHOA Sinh viên Nguyễn Minh Thi 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 MiSmart 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.3 Lập trình web với ReactJs 2.4 Tìm hiểu dự án cơng ty phát triển Thực project Lịch làm việc Chương 3: Chi tiết project 10 Giới thiệu project 10 1.1 Tổng quan 10 1.2 Chi tiết hình 10 Thực 14 Kế hoạch 14 TÀI LIỆU THAM KHẢO 15 TỔNG KẾT 16 Sinh viên Nguyễn Minh Thi Chương 1: Giới thiệu công ty thực tập Giới thiệu công ty MiSmart MiSmart thiết kế làm chủ hoàn toàn hệ thống phần mềm điều khiển bay, phần mềm bay, phần mềm quản lý bay, phần mềm AI Với khả phân tích hình ảnh giám sát khơng có tỷ lệ xác cao lên đến 97% giúp Doanh nghiệp bạn hoạt động hiệu dễ dàng Bắt nguồn từ thực trạng ngành nông nghiệp Việt Nam xếp top 10 giới, nhiên sản lượng nông sản đánh giá mức trung bình thấp với lý cách thức canh tác cịn nhiều điều hạn chế Chính điều thúc đội ngũ MiSmart tập trung nghiên cứu tự chế tạo sản xuất loại Drone phun thuốc đáp ứng nhu cầu canh tác nông nghiệp bà nông dân Sau năm lên ý tưởng thực hiện, MiSmart thức thành lập cơng ty từ năm 2019 nhận ủng hộ từ nhà đầu tư tập đồn, cơng ty lĩnh vực nông nghiệp Sản phẩm công ty Với nỗ lực không ngừng mong muốn, đại hóa Ngành Nơng nghiệp Việt, thời gian nghiên cứu phát triển MiSmart bước đầu gặt hái thành công định Sinh viên Nguyễn Minh Thi Để hỗ trợ tốt cho việc hoạt động Drone mang đến hiệu canh tác mong muốn, MiSmart phát triển hàng loạt giải pháp phần mềm hỗ trợ theo dõi quản lý đội bay, sức khỏe trồng Một số sản phẩm bật công ty: Máy bay nông nghiệp khơng người lái DEMETER VS20-P/ VS30-P (Dịng phun áp lực) MiSmart GaiA – Phần mềm quản lý nông trại: Xác định vùng bất thường cánh đồng thơng qua hình ảnh chụp drone Sinh viên Nguyễn Minh Thi MiSmart FlightHub – Phần mềm quản lý đội bay máy bay Gần vào ngày 14/9/2033, Qualcomm Technologies Inc., công bố Top công ty chiến thắng Vòng Chung kết mùa giải thứ hai Cuộc thi Thử thách Đổi Sáng tạo Qualcomm® Việt Nam (QVIC) Theo Giải thuộc Cơng ty MiSmart Sinh viên Nguyễn Minh Thi Chương 2: Nội dung thực tập Đợt thực tập với vai trò lập trình viên frontend 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 web 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, q 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 quả: Hiểu thêm cơng ty MiSmart, 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 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ố như: • VSCode: Hỗ trợ đọc/viết code, debugging ứng dụng Sinh viên Nguyễn Minh Thi • Gitlab: Quản lý source code • Postman: Hỗ trợ làm việc, testing API • GraphQL: Một cú pháp mơ tả cách yêu cầu lấy liệu, dùng để load data từ server cho client • Swagger: Giúp trực quan hoá API 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 dùng IDE 2.2 Tìm hiểu HTML, CSS, JavaScript Thời gian: ngày Nội dung: Được training kỹ thuật kiến thức HTML, CSS, JavaScript, kiến thức quan trọng cho việc tối ưu cho website 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 ngơn ngữ Javascript - Có kiến thức quan trọng cho việc tối ưu 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 Sinh viên Nguyễn Minh Thi 2.3 Lập trình web với ReactJs Nội dung: Các kiến thức ReactJs với thư viện, framework liên quan để làm website đơn giản - Khái niệm ReactJs: React (còn gọi React js ReactJS) thư viện JavaScript giao diện người dùng mã nguồn mở miễn phí để xây dựng giao diện người dùng dựa thành phần giao diện người dùng Nó trì Meta (trước Facebook) cộng đồng gồm nhà phát triển công ty riêng lẻ - Khái niệm MaterialUI: Material UI thư viện thành phần React nguồn mở triển khai Google Nó bao gồm sưu tập toàn diện thành phần dựng sẵn sẵn sàng để sử dụng tức - TailwindCss: Tailwind utility-first CSS framework giúp bạn nhanh chóng xây dựng giao diện người dùng Thực giống với thư viện khác Bootstrap, Materialize điểm khác biệt khung CSS cấp thấp (low-level CSS framework) cung cấp cho nhiều chức tuỳ biến phát triển component mà không cần phải viết lại CSS - Sử dụng Redux & Redux Toolkit: Redux Toolkit (RTK) thư viện giúp viết Redux tốt hơn, dễ đơn giản (tiêu chuẩn để viết Redux) Ba vấn đề làm tảng đời RTK: Sinh viên Nguyễn Minh Thi • Configuring a Redux store is too complicated • I have to add a lot of packages to get Redux to anything useful • Redux requires too much boilerplate code Thực : - Tham gia đầy đủ buổi training - Làm tập thực hành cách sử dụng Redux cách kết nối với backend, lấy liệu với Restful Api, … - Tìm kiếm tài liệu mạng để tìm hiểu thêm kiến thức nâng cao Kết : - Hiểu khái niệm - Bước đầu thực thực hành để vận dụng kiến thức học tự tìm kiếm 2.4 Tìm hiểu dự án cơng ty phát triển Nội dung: Tìm hiểu technical stack công ty sử dụng, đọc, hiểu code cơng ty - Tìm hiểu Restful API RESTful API tiêu chuẩn dùng việc thiết kế API cho ứng dụng web (thiết kế Web services) để tiện cho việc quản lý resource Nó trọng vào tài nguyên hệ thống (tệp văn bản, ảnh, âm thanh, video, liệu động ), bao gồm trạng thái tài nguyên định dạng truyền tải qua HTTP - Sử dụng Swagger để trực quan hóa API Sinh viên Nguyễn Minh Thi Swagger công cụ mã nguồn mở để xây dựng OpenAPI specifications giúp thiết kế, xây dựng tài liệu sử dụng REST APIs Giúp team dễ dàng việc tạo bảo trì chúng - Sử dụng Postman để tương tác với API Postman App Extensions, cho phép làm việc với API, REST, giúp ích nhiều cho việc testing Hỗ trợ tất phương thức HTTP (GET, POST, PUT, DELETE, OPTIONS, HEAD ) Thực : - Tham gia đầy đủ buổi training online - Tìm hiểu thêm kiến thức mạng - Áp dụng kiến thức nội dung tìm hiểu để thực tập Kết quả: - Hiểu khái niệm Web API khái niệm liên quan khác - Có thể tạo Web API hồn chỉnh kèm tài liệu trực quan hóa Swagger Thực project Sau tháng training thực hành, thực tập sinh nắm kiến thức để làm website Ngay tháng đầu tiên, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để thực project thực tế công ty Chi tiết project nói phần sau Sinh viên Nguyễn Minh Thi Lịch làm việc Mức Tuần Công việc Người hướng độ Nhận xét người dẫn hồn hướng dẫn thành Tìm hiểu cơng ty, Anh Huỳnh cách tổ chức công ty Thế Hải Nam Tốt 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 email Tìm hiểu kiến thức Anh Huỳnh HTML, CSS, Thế Hải Nam Tốt JavaScript Tìm hiểu kiến thức Anh Huỳnh Reactjs kiến thức Thế Hải Nam Tốt liên quan Tìm hiểu technical stack Anh Huỳnh công ty sử dụng Thế Hải Nam Tốt đọc hiểu code Thực hành project Anh cơng ty với Thế Hải Nam kiến thức tìm hiểu Sinh viên Nguyễn Minh Thi Huỳnh Tốt 10 Chương 3: Chi tiết project Giới thiệu project 1.1 Tổng quan MiSmart WEB GAIA công cụ mở để tạo đồ, đám mây điểm, địa hình từ ảnh hàng khơng MiSmart WEB GAIA biến hình ảnh máy ảnh ngắm chụp đơn giản thành liệu địa lý hai chiều ba chiều sử dụng kết hợp với liệu địa lý khác Tóm lại, chương trình lấy hình ảnh làm đầu vào tạo nhiều loại nội dung tham chiếu địa lý làm đầu ra, chẳng hạn đồ mơ hình 3D 1.2 Chi tiết hình Hình 1: Agriculture Projects Sinh viên Nguyễn Minh Thi 11 Hình 2: Chi tiết Agriculture Projects Hình 3: Powerline Projects Sinh viên Nguyễn Minh Thi 12 Hình 4: Quản lý workspace Hình 5: Quản lý node AI Sinh viên Nguyễn Minh Thi 13 Hình 6: Quản lý node phân tích Hình 7: Quản lý GCS Map Sinh viên Nguyễn Minh Thi 14 Thực Được thực sinh viên Nguyễn Minh Thi thành viên khác cơng ty Cùng với giúp đỡ tận tình anh Huỳnh Thế Hải Nam Kế hoạch Giai đoạn 1: - Tìm hiểu ngơn ngữ - Tìm hiểu project structure technical stack cơng ty sử dụng - Tìm hiểu cài đặt framework, thư viện liên quan đến dự án Kết : - Hoàn thành việc tìm hiểu kiến thức liên quan từ đến nâng cao mà để làm website cần có Giai đoạn 2: - Tham gia thức vào dự án, nhận task trực tiếp từ mentor, báo cáo tiến độ theo deadline đặt - Phối hợp thành viên khác án tester, backend dev hướng dẫn mentor để hoàn thành task từ đơn giản đến phức tạp - Tham gia vào buổi họp nhận xét, góp ý mentor nhằm cải thiện lỗi phát sinh trình thực project Kết : - Đã hồn thành tồn tính giao Sinh viên Nguyễn Minh Thi 15 TÀI LIỆU THAM KHẢO [1] HTML/CSS, Javascript Tutorials Được truy cập https://www.w3schools.com/ [2] Get started with Reactjs Được truy cập https://reactjs.org/docs/getting-started.html [3] Documenting your API (July 07, 2022) Được truy cập https://learning.postman.com/docs/publishing-your-api/documenting-your-api/ [4] Swagger Documentation (n.d) Được truy cập https://swagger.io/docs/ [5] Tailwind CSS Documentation (n.d) Được truy cập https://tailwindcss.com/docs/installation [6] Postman Documentation (n.d) Được truy cập https://learning.postman.com/docs/publishing-your-api/documenting-your-api/ [7] Learn about GraphQL (n.d) Được truy cập https://graphql.org/learn/ Sinh viên Nguyễn Minh Thi 16 TỔNG KẾT Như vậy, vòng ba tháng, em học hỏi trải nghiệm nhiều thứ bổ ích Cơng ty giúp em học công nghệ ngành ReactJs, Swagger, GraphQL, biết sử dụng Postman để testing APIs biết tổ chức làm việc nhóm, giao tiếp trao đổi giúp đỡ người công việc, có khả làm việc chuyên nghiệp với đồng đội độc lập Chân thành cảm ơn giúp đỡ anh chị dự án đặc biệt anh Huỳnh Thế Hải Nam - trainer người hướng train cho em kỹ kiến thức Đặc biệt, em sâu sắc cảm ơn quý thầy cô khoa Công nghệ Phần mềm bảo, cung cấp cho em kiến thức mẻ để tham gia khóa thực tập công ty Một lần em xin chân thành cảm ơn Sinh viên Nguyễn Minh Thi ... Công ty MiSmart Sinh viên Nguyễn Minh Thi Chương 2: Nội dung thực tập Đợt thực tập với vai trị lập trình viên frontend 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... thức học tập để hoàn thành báo cáo Nhưng kiến thức hạn chế khơng có nhiều kinh nghiệm thực tiễn nên khó tránh khỏi thiếu sót q trình nghiên cứu trình bày Rất kính mong góp ý cô để báo cáo em hồn... Swagger Thực project Sau tháng training thực hành, thực tập sinh nắm kiến thức để làm website Ngay tháng đầu tiên, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để thực project thực tế