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 FRONT-END VÀ ISB PLATFORM Công ty thực tập : TISOHA Người phụ trách : VÕ HOÀNG ĐỨC KHOA Thực tập sinh : NGUYỄN VĂN DŨNG TP Hồ Chí Minh, tháng 10 năm 2022 LỜI MỞ ĐẦU Ngày nay, lập trình 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ẽ, ứng dụng web nhân tố kích thích phát triển cơng nghệ thông tin giới Công nghệ Web, hay công nghệ sản xuất trang web phục vụ hầu hết nhu cầu người từ bán hàng, dạy học đến thông tin liên lạc, Hiện có đến 1.7 tỷ trang web, nhu cầu tạo trang web chưa có dấu hiệu giảm Lập trình web thứ thiếu Bạn muốn quảng bá cơng ty để người đâu biết? Cách tiếp cận nhanh lập trình web Vì lý này, em định chọn vị trí front-end lập trình web làm định hướng cho việc học tập Bên cạnh thời gian học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn tham gia làm game mơi trường chun nghiệp, em có dự định thực tập hè Vì vậy, em định chọn Tisoha - môi trường lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định 2 LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty Tisoha 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 anh chị, leader team, nhóm thực tập chúng em tiếp thu kiến thức quan trọng để làm thể tự xây dựng trang web hay ứng dụng di động Chân thành cảm ơn anh chị nhóm bỏ nhiều thời gian,cơng sức để hướng dẫn chúng em hồn thành đợt thực tập Đặc biệt cảm ơn anh Đỗ Cơng Bá, người với em, tạo điều kiện, hướng dẫn, giúp đỡ cho chúng em tận tình khó khăn cơng việc, khó khăn việc làm quen với mơi trường đến khó khăn gặp phải sống; cảm ơn anh Trần Nhật An, Nguyễn Văn Biên hòa đồng, training cho em Flutter, hỗ trợ chúng em nhiều vấn đề kỹ thuật kiến trúc ứng dụng di động; cảm ơn bạn Võ Hoàng Đức Khoa, dẫn chúng em nhiệt tình cơng nghệ Angular, lên kế hoạch, tạo nội dung tập lúc em học tập Angular; Và cảm ơn tất người nhóm, người đồng hành trải qua kỉ niệm, giúp cho em thay đổi cách ngoại mục kỹ lẫn lối sống, giúp em học nhiều điều 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 Nguyễn Văn Dũng TpHCM, ngày 20 tháng 10 năm 2022 NHẬN XÉT CỦA KHOA Mục lục Chương Giới thiệu công ty thực tập Giới thiệu công ty Tisoha .6 Sản phẩm công ty Chương 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 .8 2.1 Các công cụ làm việc 2.2 Tìm hiểu ngôn ngữ TypeScript .9 2.3 Lập trình front-end với Angular .9 2.4 Nghiên cứu thư viện Rxjs 11 2.5 Nghiên cứu thư viện Rxjs 12 Thực project 12 Lịch làm việc 12 Chương Chi tiết dự án 14 Giới thiệu project .14 Các công việc thực 14 2.1 Cài đặt, chạy thử dự án 14 2.2 Xây dựng agent card .14 2.3 Xây dựng property card 15 2.4 Xậy dựng single property page .16 Chương TÀI LIỆU THAM KHẢO 18 Chương Giới thiệu công ty thực tập Giới thiệu công ty Tisoha Công ty TNHH Giải pháp phần mềm TISOHA doanh nghiệp thành lập vào 10/2020 đến hoạt động gần năm Trong thời gian hoạt động, công ty nhận cung cấp dịch vụ cho nhiều khách hàng Mỹ, Malta, Úc Singapore nơi tập trung phát triển ứng dụng web lập trình ứng dụng cho điện thoại thơng minh TISOHA đem lại cho khách hàng dịch vụ lập trình, gia cơng phần mềm uy tín chất lượng với độ an toàn cao, khả mở rộng tiết kiệm chi phí cho khách hàng Tisoha có văn phịng đặt Quận thành phố Hồ Chí Minh, vài văn phòng khác quận thành phố Trang web giới thiệu công ty: tisoha.com Sản phẩm công ty Sản phẩm công ty chủ yếu dự án outsource giáo dục, giải trí, thương mại Cơng ty ln mang đến cho khách hàng dịch vụ phát triển, gia công phần mềm hồn hảo từ hỗ trợ, tư vấn, bảo trì đến phát triển ứng dụng, phần mềm cách toàn diện Các sản phẩm giải pháp công ty triển khai đảm bảo mức độ an toàn cao, có khả mở rộng, mang lại hài lịng chất lượng thỏa mãn chi phí Tuy công ty start up chưa thu hút nhiều công ty lớn tham gia sản phẩm cơng ty có mặt số nước như: Canada, India, Australia, Mỹ, Malta… hiển nhiên có Việt Nam 7 Chương Nội dung thực tập Đợt thực tập với chủ đề “Lập trình web” 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 tạo ứng dụng 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 động, hăng hái, tích cực 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 anh Đỗ Công Bá 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ủ, cách sử dụng email công việc… Kết : Hiểu thêm cơng ty Tisoha, 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 Trong thời gian này, người phụ trách 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ố Slack – Phần mềm chat, report công việc hàng ngày công ty, Jira – Ứng dụng theo dõi quản lý quy trình phát triển phần mềm, Redmine – Cơng cụ quản lý theo dõi, kiểm soát vấn đề dự án, Visual Studio Code – Trình chỉnh sửa mã nguồn, GitLab – quản lý file thành viên nhóm cơng ty 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 nhau, giúp quản lý công việc file tốt 9 2.2 Tìm hiểu ngơn ngữ TypeScript Thời gian : ngày Nội dung : Được training ngôn ngữ Typesctript - TypeScript ngơn ngữ lập trình phát triển trì Microsoft Nó tập hợp siêu cú pháp nghiêm ngặt JavaScript thêm tính kiểu tĩnh tùy chọn vào ngơn ngữ - Kiểu liệu khai báo biến Typescript - Các toán tử Typescript - Các cấu trúc điều kiện vòng lặp Typescript - Hàm, Class Mơ-đun Typescript - Lập trình hướng đối tượng Typescript - Ngồi cịn có case-study nâng cao như: generic, union and intersection type, anonymous function … Thực : - Tham gia đầy đủ buổi training công ty - Nghiên cứu, kết hợp tài liệu mà cơng ty, anh chị nhóm cung cấp Kết : - Nâng cao kỹ lập trình với ngơn ngữ Typescripts 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 2.3 Lập trình front-end với Angular Thời gian : 12 ngày (2 tuần) Nội dung: Tìm hiểu framework Angular - Angular Angular tảng phát triển, xây dựng TypeScript Angular bao gồm:  Khung dựa thành phần để xây dựng ứng dụng web mở rộng  Các thư viện tích hợp tốt bao gồm nhiều tính khác nhau, bao gồm routing, quản lý form, giao tiếp client-server, v.v  Một công cụ dành cho nhà phát triển để giúp bạn phát triển, xây dựng, thử nghiệm cập nhật code - Component: 10 Là thành phần cấu tạo xây dựng nên ứng dụng Angular Nó bao gồm (1 HTML template, typescript class CSS selector Component trang trang web, thành phần trang web (Nó gần giống Widget flutter) - Template Ta hiểu đơn giản thiết kế UI Template viết HTML với cú pháp sẵn có đặc biệt Angular cung cấp Vì HTML template hiển thị chế độ xem giao diện người dùng trình duyệt giống HTML thơng thường, có nhiều chức - Directive Là lớp bổ sung hành vi cho thành phần ứng dụng Angular Sử dụng directive để: quản lý form, danh sách, style người dùng nhìn thấy Có loại directive: attribute directives structural directives - Dependency injection Phần triều tượng, nhờ có anh chị hướng dẫn nên em hiểu sơ sơ rằng, giúp cho Angular tạo phụ thuộc mà Components, Directives, Pipes, and Injectables cần, sau “injector” chúng đâu, tùy thuộc vào yêu cầu người code - Form Quản lý nội dung người dùng nhập liệu cách dễ dàng sử dụng form - Routing Một phần quan trọng Angular, giúp navigation gửi liệu trang (page) với nhua - Thư viện Rxjs Là thư viện quan trọng Angular Nó cung cấp chức giúp xử lý liệu bất động ( từ API, Form hay từ nguồn bất động khác) Nó áp dụng Obsever pattern 11 Thực : - Tham gia đầy đủ buổi trainning Làm tập thực hành tạo ứng dụng todo web đơn giản Tìm kiếm tài liệu mạng để tìm hiểu thêm Kết : - Hiểu khái niệm, nội dung angular Tạo ứng dụng Angular 2.4 Nghiên cứu thư viện Rxjs Thời gian: ngày (1 tuần) Nội dung : Các tính thư viện Rxjs - Các đối tượng rxjs Observable : Đại diện cho ý tưởng tập hợp giá trị kiện tương lai Khi giá trị kiện phát sinh tương lai, Observable điều phối đến Observer Observer tập hợp callbacks tương ứng cho việc lắng nghe giá trị (next, error, hay complete) gửi đến Observable Subscription kết có sau thực Observable, thường dùng cho việc hủy việc tiếp tục xử lý - Rxjs creation: Khởi tạo Observable Chúng ta có hàm (of, from, interval, ) - RxJS Filtering: Đúng với nghĩa từ filter, hàm giúp lọc giá trị emit từ Observable gốc (filter, first, last, take…) - RxJS Combination: Kết hợp nhiều Observable lại với để xứ lý số trường hợp như:  Muốn lúc trả API  Đợi API trả xong API thực 12  Đợi API trả emit - RxJS Error Handling: Bắt error có lỗi phát sinh - Một số khái niệm nâng cao khác RxJS Higher Order Observables, Rxjs Subject, Muticast, Thực : - Tham gia đầy đủ buổi training Tìm kiếm thêm tài liệu mạng Nâng cấp todo web có sử dụng Rxjs Kết quả: - Nâng cấp công todo web có sử dụng rxjs 2.5 Nghiên cứu thư viện Rxjs Thời gian: tháng Nội dung: Thực hành kiến thức học tìm hiểu để xây dụng component trang web (ISB) theo yêu cầu người hướng dẫn Kết quả: Hoàn thành yêu cầu đặt Thực project Sau tháng training thực hành, thực tập sinh nắm kiến thực TypeScript, Angular, thư viện Rxjs 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 chiến dự án cơng ty Chi tiết đồ án nói phần sau Lịch làm việc Tuần Công việc - Người hướng dẫn Tìm hiểu cơng ty, Anh Trần Nhật cách tổ chức An, Đỗ Công Bá, cơng ty bạn Lê Thành Mức độ hồn thành Nhận xét người hướng dẫn 13 - 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, slack, jira - Tìm hiểu ngơn ngữ lập trình typescript - Thực hành typescript - Tìm hiểu Angular - Tìm hiểu Angular - Xây dựng to web - Tìm hiểu Rxjs - Gắn rxjs vào todo web ISB platform, giai đoạn 1: - Đọc tài liệu, đọc mã nguồn dự án - Tham gia Meeting - Chạy thử dự án - Tạo component nhỏ ISB platform, giai đoạn 2: - Viết component property card ISB platform, giai đoạn 3: - Viết component agent card - Xây dựng single property page ISB platform, giai đoạn 4: - Hoàn thành single property page - Testing gửi email - Báo cáo cuối đợt thực tập Luân Bạn Võ Hoàng Đức Khoa Bạn Võ Hoàng Đức Khoa Bạn Võ Hoàng Đức Khoa Bạn Võ Hoàng Đức Khoa Bạn Võ Hoàng Đức Khoa Bạn Võ Hoàng Đức Khoa, Nguyễn Văn Đức Bạn Võ Hoàng Đức Khoa 14 Chương Chi tiết dự án Giới thiệu project ISB platform dự án thương mại điện tử dùng để giới thiệu quảng bá, bán nhà, biệt thự thông qua liên hệ phân quyền Giữa chủ sở hữu, nhà mô giới đại lý với ISB platform xây dựng công nghệ Angular NET Các công việc thực 2.1 Cài đặt, chạy thử dự án Nội dung: Clone source code chạy thử dự án Thực hiện: - Cài đặt phiên Node (12.16.3) - Đọc tài liệu dự án tài liệu hướng dẫn - Cài đặt angular, angular-cli Và cài đặt node-module (npm install) 2.2 Xây dựng agent card Nội dung: Xây dựng thẻ hiển thị thông tin đại lý Thực hiện: - Đọc tài liệu, tham khảo giao diện, style css ứng dụng - Tạo model, tạo component, viết query API - Đưa liệu vào thẻ HTML - Kiểm tra liệu có hiển thị khơng, debug có Kết quả: 15 2.3 Xây dựng property card Nội dung: Xây dựng thẻ hiển thị nội dung sản phẩm Thực hiện: - Đọc tài liệu, tham khảo giao diện, style css ứng dụng - Tạo model, tạo component, viết query API - Đưa liệu vào thẻ HTML - Kiểm tra liệu có hiển thị khơng, debug có Kết quả: 16 2.4 Xậy dựng single property page Nội dung: Xây dựng trang hiển thị nội dung chi tiết sản phẩm Thực hiện: - Đọc tài liệu, tham khảo giao diện, style css ứng dụng, tìm kiếm thêm mạng - Tạo model, tạo component con, truyền liệu từ component cha sang ngược lại, viết query API - Đưa liệu vào thẻ HTML - Kiểm tra liệu có hiển thị khơng, debug có Kết quả: 17 18 Chương TÀI LIỆU THAM KHẢO For Typescript https://www.w3schools.com/typescript/ https://www.typescripttutorial.net/ For Angular 100 day of Angular Angular docs For HTML, CSS https://developer.mozilla.org/en-US/docs/Web/HTML https://www.w3schools.com/html/ https://www.tutorialspoint.com/html/index.html 19 TỔNG KẾT Như vậy, sau tháng thực tập TISOHA, em học nhiều kinh nghiệm bổ ích lập trình front-end web với Angular typescript hoàn thành nhiệm vụ giao Nhờ đó, em hiểu quy trình phát triển dự án, đồng thời hiểu trải nghiệm làm dự án thực tế, tăng kĩ giao tiếp, xử lí tình Chân thành cảm ơn Cơng ty TNHH Giải pháp Phần mềm TISOHA tạo điều kiện cho em thực tập công ty Đặc biệt cảm ơn giúp đỡ anh Đỗ Công Bá bạn Võ Hoàng Đức Khoa giúp đỡ tận tình cho em thời gian thực tập cơng ty  ... dung thực tập Đợt thực tập với chủ đề ? ?Lập trình web” 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 tạo ứng dụng web, đồng thời rèn luyện kỹ mềm làm việc nhóm, thuyết trình, ... giảm Lập trình web thứ thiếu Bạn muốn quảng bá công ty để người đâu biết? Cách tiếp cận nhanh lập trình web Vì lý này, em định chọn vị trí front- end lập trình web làm định hướng cho việc học tập. .. TỔNG KẾT Như vậy, sau tháng thực tập TISOHA, em học nhiều kinh nghiệm bổ ích lập trình front- end web với Angular typescript hồn thành nhiệm vụ giao Nhờ đó, em hiểu quy trình phát triển dự án, đồng