Báo cáo thực tập lập trình ứng dụng web với reactjs và angular

Page | 2 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 ỨNG DỤNG WEB VỚI REACTJS VÀ ANGULAR Công ty thực tập Công ty TNHH Giải Pháp ECR Việt Nam Người phụ trách[.]

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 ỨNG DỤNG WEB VỚI REACTJS VÀ ANGULAR Công ty thực tập: Công ty TNHH Giải Pháp ECR Việt Nam Người phụ trách: Trần Quang Khải Lớp: SE501.N11 Thực tập sinh: ĐINH VIỆT HÀO - 19521475 Page |2 TP Hồ Chí Minh, tháng 12 năm 2022 Thực tập doanh nghiệp Đinh Việt Hào Page |3 LỜI MỞ ĐẦU Ứng dụng web ngày có sức lan tỏa mạnh mẽ sống người Nó trở thành phần tất yếu họ Mọi người sử dụng để giải trí, mua sắm, chia sẻ ảnh, v.v Ngồi ra, cơng ty, doanh nghiệp sử dụng để quảng cáo thương hiệu, sản phẩm, dịch vụ, hỗ trợ hoạt động kinh doanh thúc đẩy bán hàng Do nhu cầu tương đối cao ứng dụng web, nhiều thư viện phát triển để hỗ trợ phát triển web nhanh dễ dàng hơn, chẳng hạn Reactjs, Angular Ngày nay, ứng dụng web đóng vai trị tất yếu sống người Mọi người sử dụng web để kết nối với người khác, mua sắm, giải trí Bên cạnh đó, doanh nghiệp dần lựa chọn môi trường web để phát triển phần mềm theo nhu cầu họ Và với nhu cầu ngày tăng cao, nhiều thư viện đời để giúp việc phát triển web nhanh chóng hiệu hơn, có thư viện phổ biến, nhu cầu việc làm cao, Reactjs, Angular  Reactjs thư viện javascript giúp xây dựng UI cho website, với ưu điểm hỗ trợ xây dựng giao diện nhanh, cải thiện hiệu năng, hạn chế lỗi trình code, tái sử dụng component, Reactjs nhanh chóng trở thành cơng cụ phát triển web hot nay, nhiều công ty ưa dùng Angular tảng khuôn khổ để xây dựng ứng dụng trang sử dụng HTML TypeScript Angular viết TypeScript Nó triển khai chức cốt lõi chức tùy chọn tập hợp thư viện TypeScript mà bạn import vào ứng dụng Sau ba năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, cố nâng cao kiến thức mơi trường chun nghiệp, em định thực tập kì Vì vậy, em định chọn ECR -  môi trường lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định Thực tập doanh nghiệp Đinh Việt Hào Page |4 LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty TNHH Giải Pháp ECR 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 để hịa nhập, phát triển kỉ lập trình 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 Trần Quang Khải nói riêng người cơng ty nói chung training, hướng dẫn, giúp đỡ cho 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 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 Đinh Việt Hào TPHCM, ngày 23 tháng 12 năm 2022 Thực tập doanh nghiệp Đinh Việt Hào Page |5 NHẬN XÉT CỦA KHOA Thực tập doanh nghiệp Đinh Việt Hào Page |6 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 TNHH Giải Pháp ECR Việt Nam: 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 .8 Nghiên cứu kỹ thuật .8 2.1 Các công cụ làm việc .8 2.2 Tìm hiểu ngơn ngữ Javascript, Typescript 2.3 Lập trình ReactJS với MobX .9 2.4 Git, Gitlab: 10 2.5 Lập trình với Angular 10 Thực project .11 Lịch làm việc .11 Chương 3: Chi tiết project .14 Dự án Click-Bluezinc 14 1.1 Đặt lịch khám, đặt hẹn, tạo lịch: .14 1.2 Tạo route, tính 15 Dự án Stock-Ticketing .16 2.1 Cổng toán Stripe, Opayo, Wordpay: 16 2.2 Thực đặt ghế, đặt chỗ ngồi: 18 Chương 4: Tổng kết 20 Kết thu được: 20 Các điểm yếu thân: 20 Cảm nhận công ty: 20 TÀI LIỆU THAM KHẢO 22 Thực tập doanh nghiệp Đinh Việt Hào Page |7 Chương 1: Giới thiêu công ty thực tập Giới thiệu công ty TNHH Giải Pháp ECR Việt Nam: ECR cung cấp hệ thống bán vé đặt chỗ cho Big Bus Tours, National Express, Hội đồng thành phố Bournemouth (BCC) Auckland Explorer ECR Việt Nam đóng vai trị quan trọng việc phát triển TicketPoS ECR Việt Nam làm việc với số công ty phà như: Công ty Thuyền Ngọc Mỹ & Phà Huế Chúng coi ECR Việt Nam hội để mở rộng danh mục đầu tư toàn cầu ECR với ngành dọc Việc mua lại cho phép hai bên đóng góp vào việc cung cấp cho khách hàng phà khả sáng tạo như; ứng dụng tiến nhật ký cổng thông tin thành viên Đến nay, nhóm phát triển Việt Nam tạo số giải pháp bán vé sáng tạo ECR Với nhiều dự án triển khai năm trước đó, cơng ty tiếp tục mở rộng dấu ấn thị trường bán lẻ bán vé di động Sản phẩm công ty ECR cung cấp nhiều loại công cụ bao gồm ứng dụng có thương hiệu, lập kế hoạch hành trình, tốn di động, phân tích chi tiết, chuyển tuyến theo yêu cầu lên lịch trước Bao gồm loại dịch vụ vận chuyển nào, số lượng nhà khai thác nào, tảng chúng tơi vượt trội tính linh hoạt hiệu suất Trong giải pháp bán vé quản lý khách truy cập hoàn toàn thiết bị di động ECR mang đến cho bạn khả hiển thị kiểm sốt tốt chưa có thời gian thực với hệ thống mạnh mẽ chúng tơi Độ tin cậy, tính linh hoạt tính mơ đun nhiều ứng dụng đa dạng thông qua bán vé, quản lý khách truy cập, CRM, kiện, bán lẻ đặt chỗ Thực tập doanh nghiệp Đinh Việt Hào Page |8 Chúng phát triển giải pháp riêng cho TOC khắp Vương quốc Anh Châu Âu RailPoS, chạy thiết bị đầu cuối cầm tay Go2 tất nhất, cung cấp giải pháp hợp lý chứng minh để mang lại hiệu tốt bán lẻ tàu, kiểm soát hàng tồn kho hậu cần, quản lý phi hành đoàn bán vé LeisurePoS qua nhiều lần phát triển, giải pháp chúng tơi bao gồm khía cạnh hoạt động bạn Được sử dụng khắp châu Âu cho công ty dẫn đầu thị trường bao gồm David Lloyd Leisure, Audley Villages BUPA, LeisurePoS mang đến cho bạn tính mơ đun, khả mở rộng khả kiểm chứng tương lai Chuyển đổi từ hệ thống cũ thực dễ dàng Thêm chức năng, trang web bổ sung địa điểm bán hàng, mở rộng quy mô để phù hợp với nhu cầu phát triển bạn Dữ liệu thời gian thực cung cấp cho bạn khả hiển thị kiểm sốt đầy đủ nhiều khía cạnh doanh nghiệp Từ đặt chỗ spa đến sân cắm trại, phục vụ ăn uống, cửa hàng bật lên, thuê đặt địa điểm, kiện tư cách thành viên Chúng điều chỉnh hệ thống theo nhu cầu bạn Thực tập doanh nghiệp Đinh Việt Hào Page |9 Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Front-end Web Developer” nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện việc lập trình Web, giao diện, UI/UX, đồ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 chuyên nghiệp, đa quốc gia Tìm hiểu cơng ty kỹ công ty Thời gian : ngày Nội dung : Tham gia buổi sharing chung giới thiệu cơng ty, q trình phát triển, quy tắc, quy định bảo mật, an tồn thơng tin, văn hóa, kiện, cách làm việc, v.v Kết : Hiểu thêm công ty ECR, 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ố như: o Gitlab - Cơng cụ quản lý code, nhiệm vụ o Jira - sử dụng làm việc nhóm o Bitbucket – dùng để quản lý mã nguồn o RocketChat - phần mềm để giao tiếp nội o 1Office - sử dụng để chấm công, xem bảng lương, quản lý nhân 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 ngơn ngữ Javascript, Typescript Thời gian : ngày (1 tuần) Nội dung : Thực tập doanh nghiệp Đinh Việt Hào P a g e | 10 - Được training kỹ thuật Javasciprt, Typescript nâng cao với cơng cụ hỗ trợ khác VS Code, ESLint kiến thức quan trọng cho việc học framework - Lập trình đồng bộ, bất đồng bộ: Hiểu rõ lập trình bất đồng javascript - VS Code: Hiểu cú pháp, ứng dụng tiện ích mở rộng để tăng hiệu suất làm việc - Typescript: Hiểu cách khởi tạo vùng liệu cho biến, loại type, interface Thực : - 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 : - 2.3 Nâng cao kỹ lập trình với ngơn ngữ Javascript, Typescript 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 Lập trình ReactJS với MobX Nội dung: Các kiến thức ReactJS công cụ quản lý state Mobx để tham gia vào dự án cơng ty - Khái niệm ReactJS: React thư viện JavaScript tạo facebook instagram, hỗ trợ việc thiết kế giao diện người dùng (UI) giống phần View mơ hình MVC thực tế nhiều - MobX: Mobx thư viện Javascript dùng để quản lý state ứng dụng Mobx sử dụng với Javascript với modern framework Angular, Vue hay React Đằng sau Mobx tư tưởng lớn Reactive Programming Flow hoạt động Mobx gồm bước sau: o Các event từ UI gọi đến actions store Mobx Thực tập doanh nghiệp Đinh Việt Hào P a g e | 11 o Các actions thay đổi trực tiếp (mutate) observable state store o Những observable state sau thay đổi truyền đến cập nhật lại computed value (những giá trị tính tồn trả method getter) o Cuối cùng, side-effect (như render component) trigger để render component với state Thực : - Tham gia đầy đủ buổi trainning Tìm kiếm tài liệu mạng để tìm hiểu thêm Kết : 2.4 - Vì có kiến thức tảng từ trước nên việc học nhanh Git, Gitlab: Nội dung : Các kỹ thuật việc sử dụng git Cũng làm quen giao diện, luồng gitlab - Học lệnh git bản: Được trainer hướng dẫn dùng lệnh cho việc làm nhóm commit, pull, push, status, clone - Học lệnh git nâng cao, fix conflict: Được trainner hướng dẫn dùng lệnh nâng cao reset, cherry-pick, stash, stash pop tùy vào trường hợp cụ thể, hướng dẫn fix conflict cách Thực : - Tham gia đầy đủ buổi training Tìm hiểu thêm tài liệu trang chủ git, gitlab Thực tập doanh nghiệp Đinh Việt Hào P a g e | 12 Kết quả: - Đã sử dụng git hiệu theo chuẩn team, quen với luồng làm việc gitlab 2.5 Lập trình với Angular Nội dung : Các kỹ thuật lập trình với Angular - Khái niệm Angular: Angular tảng khuôn khổ để xây dựng ứng dụng trang sử dụng HTML TypeScript Angular viết TypeScript Nó triển khai chức cốt lõi chức tùy chọn tập hợp thư viện TypeScript mà bạn import vào ứng dụng Angular javascript framework google phát triển để xây dựng Single Page Application (SPA) JavaScript , HTML TypeScript Angular cung cấp tính tích hợp cho animation , http service có tính autocomplete , navigation , toolbar , menus ,… Code viết TypeScript , biên dịch thành JavaScript hiển thị tương tự trình duyệt Thực : - Tham gia đầy đủ buổi training Tìm hiểu thêm tài liệu trang chủ git, gitlab Kết : - Đã sử dụng git hiệu theo chuẩn team, quen với luồng làm việc gitlab Thực project Sau hai tháng training thực hành, thực tập sinh nắm kiến thực techstack công ty bao gồm ReactJS, Angular, Jira, Bitbucket, Gitlab Kể từ tháng thứ ba, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để làm task hệ thống cơng ty Chi tiết đồ án nói phần sau Lịch làm việc Thực tập doanh nghiệp Đinh Việt Hào P a g e | 13 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 email Tìm hiểu ngơn ngữ lập trình Javascript nâng cao Thực hành với Javascript, Typescript Chị Nguyễn Ngọc Phương Trâm Tìm hiểu ReactJs, cơng cụ quản lý state MobX - Tìm hiểu Git, Gitlab, Jira, Bitbucket - Tìm hiệu Angular, tập để hiểu thêm framework - Tiến hành vào dự án, làm task cư để làm quen - Đọc codebase hệ thống Anh Phan Tuấn Tú - 2,3 - - 4,5 7,8 9,10 11,12,13,14 15,16 Người hướng dẫn - Mức độ hoàn thành Nhận xét người hướng dẫn Anh Phan Tuấn Tú Anh Lê Anh Đông Anh Trần Quang Khải Anh Phan Tuấn Tú Làm task liên Anh Phan Tuấn quan đến call api, Tú kiếm tra lỗi nhập vào, loading, tạo route … Fixbug toán Anh Phan Tuấn Thực tập doanh nghiệp Đinh Việt Hào P a g e | 14 - 17,18 - - 19,20 - 21,22,23,24 - card, sai logic từ khách hàng, scrolldown đến liệu cần nhập chuyển trang… Dự án chuyển qua maintain, sang dự án Angular Làm task để làm quen dự án, tiến hành cherry-pick commit client Làm task liên quan đến hệ thống bán vé, đồ ăn… Kiểm tra mặt hàng có bị OutOfStock, có offer bên sản phẩm để popup câu hỏi, … Field data vào lịch, ngày đặt lịch, đặt vé Fix bugs Tiến hành làm phương thức toán quốc tế Strike, Opayo, WorldPay áp dụng vào website bán sản phẩm Làm ma trận ghế ngồi, số ghế, chữ Fix bugs Tú Anh Trần Quang Khải Anh Trần Quang Khải Anh Trần Quang Khải Thực tập doanh nghiệp Đinh Việt Hào P a g e | 15 Thực tập doanh nghiệp Đinh Việt Hào P a g e | 16 Chương 3: Chi tiết project Dự án Click-Bluezinc Là phần mềm OMS OMS viết tắt Operation Management System phần mềm ứng dụng thiết kế để hỗ trợ việc quản lý vận hành Cung cấp cho bạn cơng cụ để quản lý khía cạnh doanh nghiệp từ hệ thống trung tâm, giảm thời gian dành cho quản trị viên để đảm bảo bạn dành nhiều thời gian cho khách hàng Ví dụ quản lý hồ sơ khách hàng, phòng, hẹn, lớp học, thông tin liên lạc, báo cáo kinh doanh, tài chính, biểu mẫu, ghi lâm sàng,  Các tính làm: 1.1 - Đặt lịch khám, đặt hẹn, tạo lịch: Giao diện: Thực tập doanh nghiệp Đinh Việt Hào P a g e | 17 - Cơng việc chính: o Tái cấu trúc giao diện trang đặt hẹn cho khách hang o Kiểm tra, validate lại giá trị nhập vào trước thực “Save” o Tạo, sửa, tìm kiếm “Client” hiển thị phía bên phải Tăng trải nghiệm cho người dung, thuận tiện việc chọn “Client” - Thực hiện: thành viên team FE Reactjs o Đinh Việt Hào o Phạm Đình Đơng 1.2 - Mentor: Anh Phan Tuấn Tú Tạo route, tính Giao diện: Thực tập doanh nghiệp Đinh Việt Hào P a g e | 18 - Công việc chính: o Tạo route, tính “Case Notes” o Thiết kế bảng liệu theo yêu cầu, theo thiết kế mẻ, động - Thực hiện: Đinh Việt Hào - Mentor: Anh Phan Tuấn Tú Dự án Stock-Ticketing Là phần mềm E-Comerce kết hợp với OMS OMS viết tắt Operation Management System phần mềm ứng dụng thiết kế để hỗ trợ việc quản lý vận hành Phần mềm chia làm phần Phần thứ “Stock”, nơi quản lý kho hàng, sản phẩm, vé bán, vận hành từ phía quản lý Phần thứ hai “Ticketing”, nơi tương tác khách hàng tới tính phần mềm  Các tính làm: 2.1 Cổng toán Stripe, Opayo, Wordpay: Thực tập doanh nghiệp Đinh Việt Hào P a g e | 19 - Giao diện: Thực tập doanh nghiệp Đinh Việt Hào P a g e | 20 - Công việc chính: o Tái cấu trúc lại phần tốn để apply cổng toán Opayo WorldPay o Kết hợp, thảo luận với team BE để truyền lên nhận liệu mong muốn - Thực hiện: thành viên team FE thành viên team BE o Đinh Việt Hào (FE) o Hà Nhật Linh (BE) - Mentor: Anh Trần Quang Khải 2.2 Thực đặt ghế, đặt chỗ ngồi: - Giao diện: Thực tập doanh nghiệp Đinh Việt Hào ... dụng git hiệu theo chuẩn team, quen với luồng làm việc gitlab 2.5 Lập trình với Angular Nội dung : Các kỹ thuật lập trình với Angular - Khái niệm Angular: Angular tảng khuôn khổ để xây dựng ứng. .. bạn Thực tập doanh nghiệp Đinh Việt Hào Page |9 Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Front-end Web Developer” nhằm mục đích giúp sinh viên thực tập đào tạo toàn diện việc lập trình. .. Javascript, Typescript 2.3 Lập trình ReactJS với MobX .9 2.4 Git, Gitlab: 10 2.5 Lập trình với Angular 10 Thực project .11 Lịch làm