Báo cáo thực tập lập trình WEB với ANGULAR

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 WEB VỚI ANGULAR Công ty thực tập : Công ty TNHH MTV Tháng Chín Người phụ trách : Thực tập sinh : Lê Minh Phúc– MSSV: 17520902 TP Hồ Chí Minh, tháng năm 2022 LỜI MỞ ĐẦU Trong thời đại nay, công nghệ Internet trở nên phổ biến không ngừng phát triển lĩnh vực Chính thế, phát triển Web trở thành yếu tố thiếu chiến lược truyền thông doanh nghiệp giới Cùng với xu phát triển giới, Việt Nam ngoại lệ Ngành công nghiệp phát triển ứng dụng web Việt Nam phát triển mạnh mẽ lĩnh vực thương mại, quảng cáo, giáo dục, Ngành lập trình Web sinh nhu cầu truy cập, tìm kiếm thơng tin nhu cầu khác.Vì lý này, em định chọn lập trình web làm định hướng cho việc học tập 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 làm lập trình web mơi trường chun nghiệp, em có dự định thực tập Vì vậy, em định chọn Tháng Chín - mơi trường lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định Lê Minh Phúc LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty TNHH MTV Tháng Chín 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 team mà em tiếp thu kiến thức quan trọng để làm ứng dụng web Chân thành cảm ơn anh chị team bỏ nhiều thời gian,công sức để hướng dẫn em hoàn thành đợt thực tập Đặc biệt cảm ơn anh Trần Ngọc Huy Tưởng, giám đốc công ty, cho em hội thực tập công ty hội học hỏi phát triển Xin cảm ơn anh Trần Hoài Hưng, team leader, giúp em làm quen với môi trường phân công hướng dẫn em công việc giao Xin cảm ơn anh Phan Hoàng Minh, trực tiếp training kiến thức lập trình giao diện website với Angular, 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 Bên cạnh đó, em khơng qn gửi lời cảm ơn đến toàn anh chị cơng ty, ln tận tình quan tâm giúp đỡ em 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 Lê Minh Phúc TP HCM, ngày 16 tháng 06 năm 2022 Lê Minh Phúc NHẬN XÉT CỦA KHOA ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… … …………………………………………………………………………………… ……… ……………………………………………………………………………… …………… ………………………………………………………………………… ……………… ……………………………………………………………………… …………………… ………………………………………………………………… ……………………… ……………………………………………………………… … …………………………………………………………………………………… … …………………………………………………………………………………… ……… ……………………………………………………………………………… …………… ………………………………………………………………………… ……………… ……………………………………………………………………… …………………… ………………………………………………………………… ……………………… ……………………………………………………………… …………………………… ………………………………………………………… ……………………………… ……………………………………………………… Lê Minh Phúc MỤC LỤC LỜI MỞ ĐẦU Chương 1: Giới thiêu công ty thực tập Giới thiệu cơng ty Tháng chín 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.2 Tìm hiểu Angular 2.3 Tìm hiểu project team quy trình làm việc 12 Thực project 13 Lịch làm việc 14 Chương 3: Chi tiết tham gia dự án 16 Giới thiệu Web PinLearn 16 Chi tiết công việc kế hoạch thực 16 2.1 Tạo trang User Profile 16 2.2 Tạo trang My Lesson List My Lesson Detail 17 2.3 Tạo trang Course create 19 2.4 Tạo trang course detail 23 TÀI LIỆU THAM KHẢO 26 TỔNG KẾT 27 Lê Minh Phúc Chương 1: Giới thiêu công ty thực tập Giới thiệu cơng ty Tháng chín Cơng ty TNHH MTV Tháng chín thành lập vào 09/2016 đế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ỹ, Châu Âu, Ú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 Tháng Chín đ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 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 tiết kiệm chi phí Lê Minh Phúc Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Lập trình web với Angular” 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 ứng dụng web với framework Angular, đồ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 game 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 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 Tháng Chín, 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 Lê Minh Phúc Trong thời gian này, team leader 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ố Trello - sử dụng quản lý công việc làm việc nhóm, Freshdesk – Phần mềm giao tiếp với khách hang, BitBucket sourcetree – quản lý source code 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, so với việc dung IDE 2.2 Tìm hiểu Angular Thời gian: ngày (1 tuần) Nội dung: Được training framework angular, kỹ thuật sử dụng angular - Tìm hiểu Angular: Angular xem open source (mã nguồn mở) hay frameworks miễn phí chun dụng cho cơng việc thiết kế web Angular phát triển từ năm 2009 trì Google Frameworks xem frameworks front end mạnh mẽ chuyên dụng lập trình viên cắt HTML cao cấp Angular ứng dụng rộng rãi với mục đích xây dựng project Single Page Application (SPA) Hiện tại, Version stable Angular Angular (released on February 7, 2020) với TypeScript 3.6 3.7 Lợi ích sử dụng Angular: • Angular giúp nâng cao suất lập trình viên • Cấu trúc phát triển rõ rang Lê Minh Phúc • Extension Binding • Hỗ trợ đầy đủ tính điều hướng (routing) • Angular giúp giảm tối đa kích thước tăng tối đa hiệu suất ứng dụng • - Document cộng đồng (community) Ngơn ngữ Typescript: Tìm hiểu kiến thức lập trình vói Typescript kiểu liệu, khái báo biến, vòng lặp, huớng đối tượng, bất đồng bộ… - Component Angular: Component lớp thường hiểu controller tương tác giao diện người dùng Một component thường có thành phần code TypeScript, template HTML CSS • Selector: Định nghĩa CSS selector mà Component chèn nội dung vào HTML Nếu đặt tên trên, chèn nội dung Component gặp thẻ , muốn định lớp CSS đặt tên ví dụ your-selector Lê Minh Phúc 10 tìm đến phần tử để chèn nội dung Component • templateUrl: Chỉ file HTML làm template cho Component, nội dung File HTML view Component, chứa phần tử HTML để thị, nhập xuất liệu • styleUrls: Chỉ file css cho template component - Data binding: Angular hỗ trợ kiểu data binding: • One way binding liệu truyền chiều Có thể từ view sang component ngược lại từ component sang view • Two way binding có nghĩa thay đổi liệu từ component qua view ngược lại từ view thay đổi liệu - Xử lí kiện • Xử lí thao tác người dùng • Xử lí kiện binding chiều - Sử dụng NgModel: ngModel Directive dùng để liên kết liệu với client, nghĩa thường dùng người dùng nhập liệu nên ta hay sử dụng form html Nhiệm vụ ngModel: Liên kết View model số directives khác input, textarea select; cung cấp thao thác validate liệu kiểm tra kiểu liệu có phải số, email, ;Kiểm sốt thơng tin từ client nhập vào có hợp lệ hay không xuất thông báo lỗi - NgModule: Module khái niệm rộng Angular Một module bao gồm chứa components, directives, pipes, v.v Các thuộc tính module định nghĩa sau: • imports: Định nghĩa phụ thuộc (Dependency) module này, module phụ thuộc load trước module load Lê Minh Phúc 13 Mỗi sprint kéo dài tuần, sprint team leader phân công task cho thành viên team, sau ước lượng thời gian, ngày có buổi họp 30 phút để báo cáo làm được, có vấn đề làm Thực : - Tham gia đầy đủ buổi training - Tạo ứng dụng bản, lập trình OpenGL ES Windows nhúng vào Android Kết quả: - Hiểu cách bố trí project cho dự án lớn Trình tự thực công việc sprint - Nâng cao kiến thức sử dụng Git để quản lý mã nguồn Thực project Sau tuần training thực hành, thực tập sinh nắm kiến thực Angular, project cần tham gia quy trình làm việc Trong thời gian cịn lại, thực tập sinh tham gia dự án tìm hiểu với tư cách lập trình viên frontend Chi tiết đồ án nói phần sau Lê Minh Phúc 14 Lịch làm việc Mức Người hướng Cơng việc Tuần dẫn độ Nhận xét hồn người hướng dẫn thành - Tìm hiểu cơng Anh Trần Hồi ty, cách tổ chức Hưng 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 lập Anh Trần Hồi trình Angular - Hưng Tìm hiểu dự án tham gia quy trình làm việc Tham gia dự án với Anh Phan task cơng việc: Tạo Hồng Minh trang user Profile Tham gia dự án với Anh Phan 4, task cơng việc: tạo Hồng Minh trang My Lesson Lisst My Lesson Lê Minh Phúc 15 Detail Tham gia dự án với Anh Phan task công việc: Tạo Hoàng Minh trang Course create Tham gia dự án với Anh Phan 7, task công việc: Tạo Hoàng Minh trang course Detail Lê Minh Phúc 16 Chương 3: Chi tiết tham gia dự án Giới thiệu Web PinLearn Pinlearn website cho phép dạy học online với loại người dùng Giáo viên Học sinh, gồm chức chính: - Tạo hội thảo (webinar) - Đăng ký tham gia hội thảo - Tạo lớp học gia sư ( on class) - Đăng ký lớp học gia sư - Tạo khóa học (course) - Mua khóa học - Quản lý lớp học, khóa học, giao dịch,… Chi tiết công việc kế hoạch thực 2.1 Tạo trang User Profile - Nội dung công việc: Sau người dùng tạo tài khoản thành công, thông tin người dùng hiển thị trang Profile Người dùng chỉnh sửa thơng tin cá nhận - Thực hiện: - Thiết kế giao diện theo yêu cầu - Show thông tin cá nhân user Lê Minh Phúc 17 - Cập nhật thông tin - Kiểm thử lại - Push code báo cáo hoàn thành - Kết quả: Tạo trang thành công, thay đổi cập nhật thơng tin thành cơng Hình Trang user profile 2.2 Tạo trang My Lesson List My Lesson Detail • Nội dung công việc: Sau học sinh đăng ký lớp học, học sinh danh sách lớp học đăng ký trang My Lesson list xem chi tiết trang My Lesson Detail - My Lesson List: Các nội dung hiển thị bao gồm: Tên Giáo viên (Tutor name), Tên lớp học (Subject / Group class), Kiểu đăng ký (Enroll Type), Kiểu lớp học(Lesson Type), Đã toán (Paid), Thời gian bắt đầu (Start Time), Thời gian kết thúc (To Time), Ngày đăng ký (Created At), Trạng thái lớp học (Status) Ngoài học sinh cịn tìm kiếm theo Lê Minh Phúc 18 tên giáo viên, tên lớp học sort thuộc tính show danh sách bảng - My Lesson Detail: Các nội dung hiển thị bao gồm: Tên Giáo viên (Tutor name), Tên lớp học (Subject / Group class), Kiểu đăng ký (Enroll Type), Kiểu lớp học(Lesson Type), Đã toán (Paayment), Thời gian bắt đầu (Start Time), Thời gian kết thúc (To Time), Giá (Price), Trạng thái lớp học (Status) • Thực - Thiết kế giao diện theo yêu cầu - Show thông tin theo yêu cầu - Thực phân trang - Tìm kiếm - Kiểm thử lại - Push code báo cáo hồn thành • Kết quả: Tạo trang thành cơng Lê Minh Phúc 19 Hình Trang My Lessons List Hình Trang My Lesson Detail 2.3 Tạo trang Course create • Nội dung cơng việc: Giáo viên tạo khóa học trang tạo khóa học (Course create) Một khóa học bao gồm Thơng tin (Basic Info), Mục tiêu khóa học (Course Goals), Nội dung khóa học (Course Lecture) Khuyến (Coupon) Lê Minh Phúc 20 • Thực - Thiết kế giao diện theo yêu cầu - Tạo tab Thông tin bản: Bao gồm thông tin tên, giá tiền, thể loại, lớp, video giới thiệu, ảnh đại diện, mô tả,… - Tạo tab Mục tiêu khóa học - Tạo tab Nội dung khóa học: Bao gồm session, session bao gồm nhiều lecture, giáo viên đăng tải video, file mp3 file pdf lên lecture - Tạo tab coupon: Cho phép giáo viên tạo mã khuyến cho khóa học - Kiểm thử lại - Push code báo cáo hồn thành • Kết quả: Tạo trang thành công Lê Minh Phúc 21 Hình Tạo thơng tin cho khóa học Hình Tạo mục tiêu khóa học Lê Minh Phúc 22 Hình Tạo nội dung khóa học Hình Tạo mã khuyến cho khóa học Lê Minh Phúc 23 2.4 Tạo trang course detail • Nội dung cơng việc: Hiển thị thơng tin khóa học quản trị viên phê duyệt, bao gồm Thông tin bản, Nội dung khóa học, Mục tiêu khóa học, Khuyến có Cho phép người dùng mua khóa học, tặng khóa học sử dụng mã khuyến có • Thực - Thiết kế giao diện theo yêu cầu - Hiển thị thông tin theo yêu cầu - Hiển thị thơng tin nội dung khóa học: Chỉ học sinh mua khóa học xem nội dung học khóa học - Mua/Tặng khóa học - Sử dụng mã khuyến - Kiểm thử lại - Push code báo cáo hoàn thành • Kết quả: Tạo trang thành cơng, book thành cơng Lê Minh Phúc 24 Hình Trang course detail Hình Trang course detail Lê Minh Phúc 25 Hình 10 Trang course detail Lê Minh Phúc 26 TÀI LIỆU THAM KHẢO [1] Angular, “Angular https://anguhttps://angular.io/docs [2] TypeScript, “TypeScript document” document” [Online] Available: [Online] Available: https://www.typescriptlang.org/docs/ Lê Minh Phúc 27 TỔNG KẾT Chỉ vòng tháng thực tập ngắn ngủi công ty, em học hỏi trau dồi thêm nhiều kiến thức chun mơn, ngồi cịn trải nghiệm mơi trường làm việc thực tế chuyên nghiệp Đây kinh nghiệm bổ ích cho em để tiếp tục học tập phát triển Chân thành cảm ơn giúp đỡ anh chị trainer, nỗ lực thành viên team giúp em hoàn thành tập lần Em xin cảm ơn thầy cô khoa Công nghệ phần mềm cho em kiến thức tảng đồng thời tạo điều kiện để em hoàn thành báo cáo thực tập Lê Minh Phúc ... Chương 2: Nội dung thực tập Đợt thực tập với chủ đề ? ?Lập trình web với Angular? ?? 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 ứng dụng web với framework Angular, đồng thời... mại, quảng cáo, giáo dục, Ngành lập trình Web sinh nhu cầu truy cập, tìm kiếm thơng tin nhu cầu khác.Vì lý này, em định chọn lập trình web làm định hướng cho việc học tập Sau ba năm học tập trường,... Thực : - Tham gia đầy đủ buổi training công ty Lê Minh Phúc 12 Làm thực hành, kiểm tra kiến thức học - Kết : - Nâng cao kỹ lập trình với Angular - Có kiến thức quan trọng cho việc lập trình web