báo cáo thực tập doanh nghiệp lập trình WEB với REACTJS

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN - - BÁO CÁO THỰC TẬP DOANH NGHIỆP LẬP TRÌNH WEB VỚI REACTJS Nơi thực tập: Công ty CP PT Phần Mềm Á Đông Người hướng dẫn: Võ Đăng Khoa Sinh viên thực hiện: Hoàng Anh Dũng Mã số sinh viên: 14520192 Tp Hồ Chí Minh, ngày 10 tháng năm 2021 LỜI MỞ ĐẦU Những năm gần đây, ngành công nghệ thông tin phát triển với tốc độ cao Việt Nam đòi hỏi nguồn nhân lực lớn Các công ty product outsourcing muốn tạo sản phẩm chất lượng đến mang đến trải nghiệm tốt với khách hàng Chính thế, người chịu trách nhiệm đảm bảo chất lượng sản phẩm thông qua việc làm việc tương tác bên liên quan cần thiết Trong báo cáo này, tơi xin trình bày chương trình thực tập Công ty CP PT phần mềm Á Đông với nhiệm vụ Kỹ sư phần mềm (Reactjs Developer) với việc tham gia làm việc dự án outsource công ty Nội dung báo cáo gồm phần sau - Giới thiệu cơng ty chương trình 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 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN  Em xin chân thành cảm ơn trường Đại học Công nghệ Thông tin Khoa Công nghệ Phần mềm tạo điều kiện cho em hoàn thành tốt đợt thực tập doanh nghiệp Nhờ đợt thực tập giúp cho em nhiều kinh nghiệm q báu Những kinh nghiệm giúp em hồn thiện công việc môi trường làm việc sau Em xin cảm ơn quý 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 hoàn thành khóa thực tập doanh nghiệp Mặc dù em cố gắng hoàn thành báo cáo 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 Một lần em xin chân thành cảm ơn ! Hồ Chí Minh, ngày 10 tháng năm 2021 Sinh viên thực tập Hoàng Anh Dũng LỜI CẢM ƠN CÔNG TY CP PT PHẦN MỀM Á ĐÔNG  Em xin chân thành cảm ơn Công ty CP PT phần mềm Á Đông hỗ trợ, tạo điều kiện cho em tham gia thực tập Công ty thời gian vừa qua Em xin đặc biệt cảm ơn anh Võ Đăng Khoa, anh Bùi Thanh Chính, anh Lương Trường An giúp đỡ, kèm cặp em suốt q trình training thực tập cơng ty Nhờ hướng dẫn anh giúp em có kinh nghiệm quý báu Những kinh nghiệm giúp em hồn thiện cơng việc mơi trường làm việc sau Mặc dù em cố gắng hoàn thành báo cáo thực tập doanh nghiệp Tuy nhiên có thiếu sót, mong nhận thơng cảm, chia sẻ góp ý cơng ty để báo cáo em tốt hoàn thiện Một lần em xin chân thành cảm ơn ! Hồ Chí Minh, ngày 10 tháng năm 2021 Sinh viên thực tập Hoàng Anh Dũng NHẬN XÉT (Của giảng viên) Mục Lục PHẦN I GIỚI THIỆU TỔNG QUAN VỀ DOANH NGHIỆP Giới thiệu tổng quan công ty CP PT phần mềm Á Đông 1.1 Sơ lược công ty 1.2 Nhiệm vụ, chức 1.3 Cơ cấu tổ chức 1.4 Văn hóa cơng ty Giới thiệu công việc thực tập 2.1 Vị trí thực tập 2.2 Công việc thực tập 2.3 Yêu cầu sinh viên thực tập 2.4 Nhiệm vụ sinh viên thực tập 2.5 Lịch thực tập cụ thể PHẦN II CÔNG NGHỆ, GIẢI PHÁP, QUY TRÌNH ÁP DỤNG Giới thiệu Git Source Tree 1.1 Git 1.2.SourceTree Giới thiệu VSCode………………………………………………………………… Vòng đời ReactJS………………………………………………………………… UX/UI ReactJS Layout…………………………………………………………… Redux……………………………………………………………………………… Redux Saga…………………………………………………………………………… Reselect……………………………………………………………………………… Rjsx………………………………………………………………………………… Sync and Async programming……………………………………………………… 10 Agile Scrum………………………………………………………………………… PHẦN III NỘI DUNG THỰC TẬP Nhiệm vụ sinh viên giao Project Kaercher 2.1 Giới thiệu 2.2 Trách nhiệm dự án PHẦN IV KẾT LUẬN Nhận xét đánh giá doanh nghiệp góp ý sinh viên 1.1 Về quy mô công ty 1.2 Về môi trường làm việc 1.3 Về văn hóa cơng ty Kinh nghiệm đạt PHẦN V TÀI LIỆU THAM KHẢO PHẦN I GIỚI THIỆU TỔNG QUAN VỀ DOANH NGHIỆP Giới thiệu tổng quan công ty CP PT phần mềm Á Đông 1.1 Sơ lược công ty Tên công ty: Công ty CP PT phần mềm Á Đơng Địa chỉ: Tầng tịa nhà Etown 1, 364 Cộng Hịa, Phường 13, Tân Bình, Hồ Chí Minh Điện thoại: (+84) 28 3812 0101 Email: sales@orientsoftware.com Địa Website: https://www.orientsoftware.net/ Công ty CP PT phần mềm Á Đông thành lập vào năm 2005 với CEO chị Nguyễn Thị Tuyết Nhung với anh Oyvind Forsbak Ngày nay, Orient công ty phát triển phần mềm lớn Việt Nam Sau gần 10 năm cung cấp giải pháp CNTT chuyên nghiệp, đội ngũ 100 chuyên gia CNTT lành nghề giàu kinh nghiệm Orient hợp tác để cung cấp giải pháp phát triển phần mềm cho khách hàng với doanh nghiệp vừa nhỏ toàn giới Danh sách khách hàng Orient bao gồm công ty từ công ty thành lập, nóng bỏng tập đồn thành lập tốt Khách hàng biết sử dụng đội ngũ nhân viên chuyên nghiệp cho nhu cầu CNTT giúp tăng thu nhập, xây dựng cải thiện kênh truyền thông đơn giản hóa hoạt động Tại Orient, chúng tơi biết cần hiểu rõ tổ chức công ty bạn để cung cấp cho bạn giải pháp CNTT hiệu quả, chất lượng hàng đầu phát triển theo nhu cầu cơng ty bạn Chúng tơi cung cấp cho bạn giải pháp phần mềm cá nhân quy mơ chúng tơi biết cách sử dụng sức mạnh công nghệ khác tích hợp chúng cách liền mạch 1.2 Nhiệm vụ, chức 1.2.1 Phát triển ứng dụng mobile CP PT phần mềm Á Đông tập trung chủ yếu phát triển lĩnh vực sau:  Android  Phát triển ứng dụng máy khách / máy chủ Android  Giải pháp kiểm tra thiết bị cầm tay Android  Gửi ứng dụng lên Google Play Android Marketplace  Phát triển ứng dụng phần mềm Android tùy chỉnh  Phát triển ứng dụng đa phương tiện phong phú cho Android  Cổng ứng dụng bên thứ ba thiết bị Android  IOS  Phát triển ứng dụng IOS  Phát triển ứng dụng GPS  Phát triển trò chơi Iphone  Phát triển ứng dụng web safari  Phát triển ứng dụng mạng xã hội Các project bật Croozemode, Yappa App, Imageware App, Chit Chat English, Inspekt,… 1.2.2 Phát triển Web CP PT phần mềm Á Đông tập trung chủ yếu phát triển lĩnh vực sau: • Backend tập trung vào NET, ASP.NET, PHP, JAVA,… • Frontend framework cơng ty chủ yếu làm AngularJs, ReactJs Các project bật Penetrace, Skribenta & Finder, Kikora, Yuntaa,… 1.3 Cơ cấu tổ chức Giám Đốc Trợ Lý Giám Đốc Bộ phận nhân Bộ phận Designer Tech Developer Bộ phận BA/QA Sơ đồ 1: Cơ cấu tổ chức công ty CP PT phần mềm Á Đơng 1.4 Văn hóa cơng ty - Nhân viên phải có mặt cơng ty trước 10:30 AM check in fingerprint Nếu làm sau 10:30 AM bị vắng buổi sáng làm việc - Thời gian làm việc từ thứ đến thứ làm việc 40 tiếng tuần tối thiểu tiếng ngày - 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 vào buổi chiều Bootstrap có lẽ khơng cịn q xa lạ với lập trình viên front-end ReactBootstrap (Github) tập hợp component Bootstrap xây dựng riêng cho React Đây thư viện đơn giản cho React bootstrap Với 4k stars gần 100 người đóng góp Nó lựa chọn phổ biến rộng rãi cho fan bootstrap https://react-bootstrap.github.io/ 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 Được dựa tảng tư tưởng ngôn ngữ Elm kiến trúc Flux Facebook giới thiệu, Redux thường đơi kết hợp hồn hảo với React (ReactJs React Native) Nguyên lý Redux: Redux xây dựng dựa nguyên lý sau:  Trạng thái (state) toàn ứng dụng lưu trong store Object mơ hình tree 23  Chỉ có cách để thay đổi trạng thái (state) tạo action (là object mơ tả xảy ra)  Để rõ trạng thái (state) tree thay đổi action bạn phải viết pure reducers Cách sử dụng: Nếu muốn sử dụng Redux, cần nhớ thành phần Redux : Store, Views , Actions, Reducers Chi tiết thành phần mô tả sau: Store: Là nơi quản lý trạng thái (state), truy cập để lấy trạng thái (state) ra, update state có, listener để nhận biết xem có thay đổi khơng, cập nhật qua views Actions : pure object định nghĩa thuộc tính type: kiểu action, ví dụ ‘TOGGLE_STATUS’, payload: giá trị tham số mà action creator truyền lên 24 Reducers: Khác với actions 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 Redux Saga Redux-Saga thư viện redux middleware, giúp quản lý side effect ứng dụng redux trở nên đơn giản Bằng việc sử dụng tối đa tính Generators (function*) ES6, cho phép ta viết async code nhìn giống synchronos Cách hoạt động Đối với logic saga, ta cung cấp hàm cho saga, hàm hàm đứng xem xét action trước vào store, action quan tâm thực thi hàm thực thi, bạn biết khái niệm hook hàm cung cấp cho saga hàm hook Điều đặc biệt hàm hook 25 generator function, generator function có yield yield ta trả plain object Object trả gọi Effect object effect object đơn giản object bình thường chứa thơng tin đặc biệt dùng để dẫn middleware Redux thực thi hoạt động khác ví dụ gọi hàm async khác hay put action tới store Để tạo effect object đề cập ta gọi hàm từ thư viện saga redux-saga/effects Reselect Reselect thư viện tuyệt vời Reselect tạo bô nhớ cho chọn điều tuyệt với Reselect, tạo chọn với liệu chon khác createSelector( inputSelector | [inputSelectors], resultFunc) createSelector lệnh dùng để tạo selector với tham số chính:  Tham số funtion gọi selector  Tham só thử funtion dùng để tính tốn liệu trả selector với tham số đầu vào giá tri trả funtion tham sô Chúng ta tao selector sau Rxjs Nói đến Observables tức lúc ta phải viết code theo kiểu Reactive Programming (Lập trình đa luồng liệu) khơng cịn code OOP (Lập trình hướng đối tượng) Functional Programming (Lập trình hàm) Lúc ta cần đến thư viện để lấy Observable (Luồng liệu) 26 Chúng ta cần đến thư viện RxJS, thư viện tiếng để giúp ta sử dụng Observable Reactive Programming Reactive programming is programming with asynchronous data streams Vâng vậy, phương pháp lập trình xoay quanh data streams deal với vấn đề asynchronous Nhưng bạn đừng hiểu lầm, deal với synchronous Bạn tưởng tượng data streams hình sau, với data gửi đến suốt dòng thời gian stream (over time), giống array có phần tử gửi đến theo thời gian Sync and Async programming 27 28 29 10 Agile Scrum 30 Phát triển phần mềm linh hoạt (agile software development – gọi tắt Agile) triết lí với nhóm phương pháp phương pháp luận phát triển phần mềm dựa nguyên tắc phát triển phân đoạn lặp (iterative) tăng trưởng (incremental), theo nhu cầu giải pháp tiến hóa thơng qua hợp tác nhóm tự quản liên chức Scrum định nghĩa quy tắc cho bốn kiện chủ chốt nhằm tạo môi trường quy cách hoạt động cộng tác cho thành viên dự án Các kiện diễn trước Sprint bắt đầu (là kiện lập kế hoạch – Sprint Planning), Sprint diễn (sự kiện Daily Scrum) sau Sprint kết thúc (sự kiện Sprint Review Sprint Retrospective)  Sprint Planning (Họp Kế hoạch Sprint): Nhóm phát triển gặp gỡ với Product Owner để lên kế hoạch làm việc cho Sprint (xem thêm phần Sprint bên dưới) Công việc lập kế hoạch bao gồm việc chọn lựa yêu cầu cần phải phát triển, phân tích nhận biết công việc phải làm kèm theo ước lượng thời gian cần thiết để hoàn tất 31 tác vụ Scrum sử dụng cách thức lập kế hoạch phần tăng dần theo thời gian, theo đó, việc lập kế hoạch không diễn lần vòng đời dự án mà lặp lặp lại, có thích nghi với tình hình thực tiễn tiến trình đến sản phẩm  Daily Scrum (Họp Scrum ngày): Scrum Master tổ chức cho Đội sản xuất họp ngày khoảng 15 phút để Nhóm Phát triển chia sẻ tiến độ cơng việc chia sẻ khó khăn gặp phải trình phát triển phần mềm suốt Sprint  Sprint Review (Họp Sơ kết Sprint): Cuối Sprint, nhóm phát triển với Product Owner rà soát lại cơng việc hồn tất (DONE) Sprint vừa qua đề xuất chỉnh sửa thay đổi cần thiết cho sản phẩm  Sprint Retrospective (Họp Cải tiến Sprint): Dưới trợ giúp Scrum Master, nhóm phát triển rà sốt lại tồn diện Sprint vừa kết thúc tìm cách cải tiến quy trình làm việc thân sản phẩm 32 PHẦN III NỘI DUNG THỰC TẬP Nhiệm vụ sinh viên giao - Nắm kiến thức công nghệ giảng dạy áp dụng vào dự án thực tế (KaercherNet Project) - Sử dụng thành thạo ngơn ngữ lập trình Reactjs cơng nghệ hỗ trợ - Hoàn thiện task giao Dự án KaercherNet 2.1 Giới thiệu KaercherNet Project trang web đa ngôn ngữ dành riêng cho nhân viên nội cơng ty Kaercher, có trụ sở Đức 33 KaercherNet cho phép nhân viên đọc thông báo tin tức công ty, cho phép cấp quản lý làm nhiệm vụ quản lý riêng biệt quản lý canteen, quản lý tin tức, set up meeting 2.2 Trách nhiệm dự án Vị trí làm việc dự án: Reactjs Developer Cơng việc: - Xây dựng tính dựa use case, design có sẵn - Bảo trì hệ thống (fixed bugs, refactor code) - Liệt kê danh sách story làm Sprint - Tham gia buổi họp Daily Meeting ngày, report hàng tuần với khách hàng, Start Sprint, Sprint Release, Sprint Retropectives PHẦN IV KẾT LUẬN Nhận xét đánh giá doanh nghiệp góp ý sinh viên 1.1 Về quy mô công ty Công ty CP PT phần mềm Á Đông chuyên phát triển phần mềm trang web nước Cung cấp giải pháp tiên tiến thiết thực cho khách hàng với lợi giúp họ thành công đối thủ Nhấn mạnh hội để phát triển chuyên nghiệp với nghiệp Trong tương lai công ty hướng tới công ty consultan 1.2 Về môi trường làm việc Công ty CP PT phần mềm Á Đông nhìn chung giống gia đình, số lượng nhân viên tầm tương đối (300 nhân viên) nên thành viên công ty thân thiện, biết quan tâm giúp đỡ lẫn Điều tạo điều 34 kiện thuận lợi cho thành viên công ty hỗ trợ lẫn nhau, tạo cảm giác thoải mái cho nhân viên làm việc công ty Bên cạnh đó, cơng ty có số lượng nhân viên khơng q lớn nên xung đột không xảy Điều tạo điều kiện tốt cho mối quan hệ thành viên cơng ty, giúp thành viên gắn bó thân thiết với nhau, san sẻ cơng việc cho nhau, tạo điều kiện cho công ty ngày phát triển 1.3 Về văn hóa cơng ty Tuy cơng ty nằm gọn phần tầng tầng G nhà điều kiện sở vật chất đầu tư đầy đủ tiện nghi, đáp ứng nhu cầu làm việc nhân viên Mỗi nhân viên có khơng gian làm việc riêng thoải mái, trang bị máy cấu hình cao, đường truyền cáp quang phục vụ tốt cho nhu cầu công việc Khi cần thiết nhân viên trao đổi dễ dàng với nhau, tìm cách hiệu để đạt mục đích cơng việc Khi cần book phịng hợp để bàn bạc, họp cách tốt Mỗi tuần/tháng công ty tổ chức cho nhân viên công ty thư giãn với hoạt động nhỏ, happy lunch, sinh nhật Điều giúp cho nhân viên giải tỏa căng thẳng mệt mỏi sau làm việc căng thằng mà thể quan tâm, sách ưu đãi cơng ty dành cho nhân viên Ngoài ra, thực tốt dự án, nhân viên công ty khen thưởng xứng đáng Kinh nghiệm đạt - Qua thời gian thực tập công ty, nắm kiến thức số phần nâng cao liên quan đến công việc lập trình viên ReactJS 35 - Làm việc dự án KaercherNet với vai trò ReactJS developer mơ hình Scrum/Agile, tơi học nhiều điều trình làm sản phẩm phần mềm thực Không đảm bảo chất lượng phần mềm mà giúp sản phẩm tốt chất lượng quy trình - Sự hỗ trợ, giúp đỡ Scrum Master thành viên team cịn lại cho tơi nhiều kinh nghiệm quý báu trình làm việc, cách làm để giao tiếp làm việc hiệu team - Được trở thành nhân viên thức cơng ty sau tập đủ khả làm việc dự án thực tế khác công ty 36 PHẦN V TÀI LIỆU THAM KHẢO - https://stackoverflow.com/ - https://medium.com/ - https://www.raywenderlich.com/ - https://vi.wikipedia.org/wiki/Scrum - https://www.agilealliance.org/glossary/bdd/ - https://reactjs.org/ 37 ... thực tập doanh nghiệp Mặc dù em cố gắng hoàn thành báo cáo 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. .. việc thực tập 2.1 Vị trí thực tập 2.2 Công việc thực tập 2.3 Yêu cầu sinh viên thực tập 2.4 Nhiệm vụ sinh viên thực tập 2.5 Lịch thực tập. .. làm việc dự án outsource công ty Nội dung báo cáo gồm phần sau - Giới thiệu cơng ty chương trình 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