Báo cáo thực tập lập trình front end bằng angular cho franksalt epic

1 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 BẰNG ANGULAR CHO FRANKSALT EPIC Công ty thực tập : Công ty TNHH Giải pháp Phần mềm TISOHA Người phụ trách : Võ Hoàng Đức Khoa Thực tập sinh : Nguyễn Tấn Tiến TP Hồ Chí Minh, tháng 12 năm 2022 Phạm Văn Lượng Phạm Xuân Bách LỜI MỞ ĐẦU Trong cách mạng công nghiệp 4.0, công nghệ thơng tin nói chung ngành Cơng nghệ phần mềm nói riêng ln nhân tố đóng vai trị quan trọng q trình phát triển xã hộ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 Do đó, trang web muốn nhiều người sử dụng phải đáp ứng yếu tố hình thức nội dung Làm để sản phẩm tạo đạt chất lượng cao hai yếu tố làm đội ngũ phát triển website cần phải suy nghĩ đau đầu Để thử thách thân ngành công nghiệp web, em lựa chọn thực tập với vị trí Front-End định hướng cho việc học tập nghiên cứu sâu quy trình sản xuất web Angular framework google tạo để xây dựng ứng dụng trang (SPA) javascript, html typescript, đời vào nằm 2009 với phiên AngularJS, qua tới Angular năm 2015 chuyển thành TypeScript, đời lâu nên angular có cộng đồng người dùng đơng đảo, có hỗ trợ đầy đủ tài liệu học tập nhiều, nhiều người nói học angular khơng dễ, framework mạnh mẽ, khơng mà em từ bỏ, với ham học hỏi, em mong nắm kiến thức nâng cáo angular, từ áp dụng vào đồ án thực tế 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 việc môi trường chuyên nghiệp, em có dự định thực tập kì Vì vậy, em định chọn cơng ty TISOHA nơi giúp em thực dự định Phạm Văn Lượng Phạm Xuân Bách Phạm Văn Lượng Phạm Xuân Bách LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty TNHH Giải pháp Phần mềm TISOHA 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 trainer, nhóm thực tập chúng em tiếp thu kiến thức quan trọng để thành thạo việc lập trình Web Front-End với Angular Đặc biệt cảm ơn anh Nguyễn Văn Dũng, training Angular, hướng dẫn, hỗ trợ em nhiều từ vấn đề kỹ thuật đến khó khăn cơng việc; cảm ơn anh Võ Hoàng Đức Khoa, giúp đỡ cho em tận tình khó khăn việc làm quen với môi trường Cảm ơn anh Đỗ Công Bá tạo văn hóa cơng ty lành mạnh, chun nghiệp, đầy động giúp em hoàn thành thực tập có thêm niềm đam mê, nhiệt huyết với lập trình Web 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 Phạm Xuân Bách TpHCM, ngày 17 tháng 12 năm 2022 Phạm Văn Lượng Phạm Xuân Bách NHẬN XÉT CỦA KHOA Phạm Văn Lượng Phạm Xuân Bách MỤC LỤC MỤC LỤC CHƯƠNG GIỚI THIỆU CÔNG TY THỰC TẬP GIỚI THIỆU CÔNG TY TNHH GIẢI PHÁP PHẦN MỀM TISOHA SẢN PHẨM CỦA CÔNG TY CHƯƠNG NỘI DUNG THỰC TẬP TÌM HIỂU CƠNG TY VÀ CÁC KỸ NĂNG CƠ BẢN TRONG CÔNG TY NGHIÊN CỨU KỸ THUẬT 2.1 Các công cụ làm việc 2.2 Tìm hiểu ngôn ngữ TypeScript, HTML, CSS 10 2.3 Nghiên cứu tài liệu kỹ thuật Angular 11 2.4 Nghiên cứu tài liệu kỹ thuật RXJS 12 2.5 Thực hành xây dựng máy chủ API cho dự án FrankSalt Epic Platform 14 THỰC HIỆN PROJECT 14 LỊCH LÀM VIỆC 14 CHƯƠNG CHI TIẾT VỀ PROJECT 16 GIỚI THIỆU VỀ PROJECT 16 CÁC CÔNG VIỆC ĐÃ LÀM 17 2.1 Cài đặt, chạy thử dự án 17 2.2 Tạo trang Property-orther-detail 18 2.3 Tạo trang Agreement-search Error! Bookmark not defined 2.4 Một số công việc khác 19 KẾT QUẢ 19 TÀI LIỆU THAM KHẢO 21 TỔNG KẾT 22 Phạm Văn Lượng Phạm Xuân Bách Chương Giới thiệu công ty thực tập Giới thiệu Công ty TNHH Giải pháp Phần mềm 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 tồn cao, khả mở rộng tiết kiệm chi phí cho khách hàng 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 Phạm Văn Lượng Phạm Xuân Bách Công ty 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 tồn cao, có khả mở rộng, mang lại hài lòng chất lượng thỏa mãn chi phí Phạm Văn Lượng Phạm Xuân Bách Chương Nội dung thực tập Đợt thực tập với chủ đề “Lập trình Web Front-End Angular cho FrankSalt Platform” nhằm mục đích giúp sinh viên thực tập đào tạo toàn diện lập trình Front-end, đồ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, cách ước tính thời gian hồn thành cơng việc, sử dụng phần mềm chuyên nghiệp cho công việc,… Kết quả: 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, phần mềm 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ố Phạm Văn Lượng Phạm Xuân Bách 10 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, Git – Hệ thống quản lý phiên mã nguồn phân tán, Gitlab – Phần mềm quản lý kho mã nguồn Git,… Thực hiện: Thực hành sử dụng phần mềm nêu Kết quả: Làm quen sử dụng phần mềm nêu 2.2 Tìm hiểu ngôn ngữ TypeScript, html css Thời gian: ngày (1 tuần) Nội dung: Được training TypeScript, HTML CSS - TypeScript phiên cao JavaScript, thiết kế để xây dựng ứng dụng lớn phức tạp Nó kế thừa nhiều khái niệm từ Java C#, TypeScript ngôn ngữ tĩnh (Static typed) có nghĩa nghiêm ngặt có trật tự trái ngược với free-type Nó cịn bổ sung thêm lớp hướng đối tượng mà điều Javascript - HTML CSS ngơn ngữ dùng nhiều lập trình web, với html khung sườn trang web, nơi ta dùng để “vẽ” kết cấu, layout trang web thẻ html, CSS lớp sơn, lớp tragn điểm để ta tuỳ chỉnh giao diện, màu sắc, hình ảnh class, áp dụng class vào thẻ HTML - 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 - Các thẻ cở html cách để áp dụng thuộc tính css vào html - Các thuộc tính css Phạm Văn Lượng Phạm Xuân Bách 11 - Ngồi cịn có case-study nâng cao để sinh viên thực tập tìm hiểu thêm Decorators, Error Handling, Generators, Testing,… Thực hiện: - Tham gia đầy đủ buổi training công ty - Nghiên cứu, kết hợp thực hành tài liệu mà công ty cung cấp Kết quả: - Nắm kiến thức TypeScript, HTML CSS 2.3 Nghiên cứu tài liệu kỹ thuật Angular Thời gian: ngày (2 tuần) Nội dung: Các kiến thức Angular framework - Data Biding, flow chạy project Angular Tìm hiểu luồng chạy project Angular, cách data binding project - Directive - Directive thành phần mở rộng cho thẻ html dùng bổ trợ thuộc tính nâng cao cho thẻ html - Form Form hay biểu mẫu thành phần quan trọng hệ thống/công ty Do ứng dụng có nhiều ứng dụng cần phải thiết lập chức Forms để thu thập thơng tin cần thiết người dùng Angular full-fledged framework, cung cấp sẵn hai giải pháp cho Forms Templatedriven Forms Reactive Forms hay gọi làm Model-driven Forms - Template-driven Forms: Cơ chế hoạt động dạng forms chủ yếu dựa vào directives template NgForm, NgModel, required, etc; để làm việc Phạm Văn Lượng Phạm Xuân Bách 12 Form dạng sử dụng Two-way binding để update data model template component - Reactive Forms: Chúng ta xây dựng form từ model, object có số chức đặc biệt để quản lý form input Nó sử dụng số (nhưng ít) directives - Router Trong Angular 2, Router module đặt @angular/router, cung cấp cho ứng dụng Angluar khả điều hướng hiển thị nội dung phù hợp với địa URL Với ứng dụng web thông thường, việc điều hướng theo URL thường phía server đảm nhiệm Thực hiện: - Tham gia đầy đủ buổi trainning - Làm tập thực hành từ hướng dẫn tài liệu - Tìm kiếm tài liệu mạng để tìm hiểu thêm Kết quả: - Hiểu khái niệm Directive, Template, Form, Router - Xây dựng trang web với Angular - Hiểu lập trình Web Front-end 2.4 Nghiên cứu tài liệu kỹ thuật RXJS Thời gian: ngày Nội dung: Các kiến thức RXJS - Observable Phạm Văn Lượng Phạm Xuân Bách 13 đạ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 - - Tương tự Promise, coi thứ steam - Có thể handle nhiều value asynchronous - Có thể biến đổi value thành dạng mong muốn cuối stream 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 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ý - Operator Operators pure functions cho phép lập trình functional với Observable Các loại operator như: - Creation Operator - Transformation Operator - Filtering Operator - Combination Operator - Error Handling Conditional operator - Higher Order Observable Ultility Operator Phạm Văn Lượng Phạm Xuân Bách 14 Thực hiện: - Tham gia đầy đủ buổi training - Thực hành lấy, sử lý quản lí liệu từ api - Áp dụng operator để tối ưu hoá việc lấy liệu Kết quả: - Nắm kiến thức RXJS - Biết cách xử lí việc lấy liệu từ api 2.5 Thực hành tạo page front-end cho dự án FrankSalt Platform 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 trang Web theo yêu cầu người hướng dẫn Kết quả: Xây dựng trang web đáp ứng 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 API, Python, FastAPI, Docker Trong tháng thứ hai, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để tham gia thực chiến dự án công ty Chi tiết thực dự án nói phần sau Lịch làm việc Tuần Phạm Văn Lượng Cơng việc Người hướng dẫn Mức độ hồn thành Nhận xét người hướng dẫn Phạm Xuân Bách 15 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, Slack, Jira - Tìm hiểu ngơn ngữ lập trình TypeScript, html, css nâng cao - Thực hành TypeScript, html, css - Làm ứng dụng demo - Tìm hiểu Angular - Tìm hiểu Angular - Làm ứng dụng demo với Angular - Tìm hiểu RXJS FrankSalt Epic Platform: - Đọc tài liệu, đọc mã nguồn dự án - Tham gia Meeting - Chạy thử dự án - Tạo trang propertyorther-detail FrankSalt Epic Platform: - Tạo page contract- Phạm Văn Lượng Anh Võ Hoàng Đức Khoa, Nguyễn Văn Dũng Anh Nguyễn Văn Dũng Anh Nguyễn Văn Dũng Anh Nguyễn Văn Dũng Anh Võ Hoàng Đức Khoa, Nguyễn Văn Dũng Anh Võ Hoàng Đức Khoa, Nguyễn Văn Dũng Phạm Xuân Bách 16 detail - Tạo page Agreement-search FrankSalt Epic Platform: - Thêm form vào page contract-detail - Tạo page properties-search FrankSalt Epic Platform: - Sửa lỗi page property-ortherdetail - Tạo page saleagreement - Báo cáo cuối đợt thực tập Anh Võ Hoàng Đức Khoa, Nguyễn Văn Dũng Anh Võ Hoàng Đức Khoa, Nguyễn Văn Dũng, Đỗ Công Bá Chương Chi tiết project Giới thiệu project FrankSalt Epic Platform tảng Quản lí bn bán bất động sản Phạm Văn Lượng Phạm Xuân Bách 17 Các công việc làm 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 vscode, Git đăng nhập Gitlab - Đọc tài liệu dự án tài liệu hướng dẫn - Cài đặt pre-commit Phạm Văn Lượng Phạm Xuân Bách 18 2.2 Tạo trang property-orther-detail Nội dung: tạo trang property-orther-detail Thực hiện: - Đọc tài liệu yêu cầu task - Tạo model, router, property-orther-detail page - Tạo mock data - Testing page Phạm Văn Lượng Phạm Xuân Bách 19 2.3 Tạo trang Agreement-search Nội dung: Tạo trang Agreement-search filter agreement-table Thực hiện: - Đọc tài liệu yêu cầu task - Tạo model, filter, filter header - Testing filter 2.4 Một số công việc khác - Sửa lỗi page - Phụ thêm form vào page Kết Xây dựng thành công trang web theo yêu cầu người hướng dẫn Phạm Văn Lượng Phạm Xuân Bách 20 Phạm Văn Lượng Phạm Xuân Bách 21 TÀI LIỆU THAM KHẢO - Anular Tutorial – 100-days-of-angular/README.md at master · angularvietnam/100-days-of-angular (github.com) [Lần truy cập cuối: 17/12/2022] - RXJS Guides – Angular - The RxJS library [Lần truy cập cuối: 17/12/2022] Phạm Văn Lượng Phạm Xuân Bách 22 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 hồ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 nhóm trainer TISOHA giúp đỡ tận tình cho em thời gian thực tập công ty Phạm Văn Lượng Phạm Xuân Bách ... Bách Chương Nội dung thực tập Đợt thực tập với chủ đề ? ?Lập trình Web Front-End Angular cho FrankSalt Platform” 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 Front-end, đồng thời... 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... đặt Thực project Sau tháng training thực hành, thực tập sinh nắm kiến thực API, Python, FastAPI, Docker Trong tháng thứ hai, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để tham gia thực