Đặc biệt cảm ơn anh Lê Phước Hưng, đã trực tiếp chỉ dẫn về những kiến thức cần thiết cho em trong quá trình làm việc, giúp đỡ em những lúc em gặp khó khăn trong công việc; cảm ơn chị Hu
Trang 1TRƯỜ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
XÂY DỰNG WEB QUẢN LÝ NHÂN SỰ
ANGULAR
TP Hồ Chí Minh, tháng 12 năm 2021
Trang 2LỜI MỞ ĐẦU
Trong thời đại 4.0 ngày nay, mạng internet như một phần không thể thiếu trong công việc và sinh hoạt hằng ngày của mỗi người Cùng với sự phát triển mạnh mẽ đó, nhiều nhu cầu mới đối với các trang web dần được hình thành
Nắm bắt xu thế trên, ngành công nghiệp phát triển ứng dụng web dần được hình thành và
ở Việt Nam cũng không ngoại lệ Ngành công nghiệp thiết kế và ứng dụng web non trẻ Việt Nam đã và đang phát triển mạnh mẽ, để hòa nhập với những công ty hàng đầu trên thế giới Trong đó, công ty AziWorld – công ty trẻ của Việt Nam – cũng đã góp phần vào công cuộc hòa nhập đó
Với nguồn gốc xuất phát từ sự phát triển về mạng internet thì việc tìm hiểu, khám phá, phát triển, sáng tạo,… là điều cần thiết cho một người làm lập trình web Vì lý do trên, nên em
đã cho mình một định hướng, một lối đi trên con đường phát triển sự nghiệp của mình
Và sau ba năm học tập, với mong muốn có thêm kinh nghiệm, trải nghiệm thực tế, cũng như muốn được tham gia vào một môi trường chuyên nghiệp, em có dự định là sẽ thực tập trong
hè Vì vậy, em quyết định chọn AziWorld là nơi sẽ giúp em thực hiện được dự định này
Trang 3LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn Công ty TNHH AziWorld đã tạo điều kiện cho em có cơ hội được thực tập tại công ty
Dù gắn bó với công ty chưa lâu, nhưng nhờ những sự chỉ dẫn của những anh chị trainer,
em đã tiếp thu được những kiến thức quan trọng để có thể xây dựng được những giao diện web đầu tiên Chân thành cảm ơn các anh chị trong nhóm trainer đã bỏ ra thời gian,công sức để hướng dẫn em hoàn thành đợt thực tập này
Đặc biệt cảm ơn anh Lê Phước Hưng, đã trực tiếp chỉ dẫn về những kiến thức cần thiết
cho em trong quá trình làm việc, giúp đỡ em những lúc em gặp khó khăn trong công việc; cảm
ơn chị Huỳnh Thu Thảo đã giúp đỡ em làm quen với môi trường mới, làm quen với nhiều người hơn trong công ty; cảm ơn anh Đặng Trung Hiếu, người đã chỉ dẫn và giải đáp thắc mắc của em
về việc sử dụng những API của công ty
Cũng xin cảm ơn thầy cô trong khoa Công nghệ phần mềm đã nhiệt tình hỗ trợ, tạo điều kiện em làm bài báo cáo này
<Nguyễn Trung Nghĩa>
<TpHCM, ngày 19 tháng 12 năm 2021>
Trang 4NHẬN XÉT CỦA KHOA
Trang 5
MỤC LỤC
MỤC LỤC 1
Chương 1: Giới thiệu công ty thực tập 2
1 Giới thiệu về công ty TNHH AziWorld 2
2 Sản phẩm của công ty 2
Chương 2: Nội dung thực tập 3
1 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 3
2 Nghiên cứu kỹ thuật 3
3 Thực hiện project 7
4 Lịch làm việc 7
Chương 3: Chi tiết về project 9
1 Giới thiệu về sản phẩm 9
2 Thực hiện 11
3 Kế hoạch 11
TÀI LIỆU THAM KHẢO 13
TỔNG KẾT 14
Trang 6Chương 1: Giới thiêu công ty thực tập
1 Giới thiệu công ty TNHH AziWorld
AziWorld là một công ty chuyên cung cấp dịch vụ tư vấn và phát triển phần mềm cho doanh nghiệp Với nhiệm vụ cải tiến các quy trình kinh doanh để tăng hiệu quả hoạt động cho các doanh nghiệp trên cả nước và trong nhiều lĩnh vực bao gồm thương mại, tài chính, giáo dục,…
AziWorld có ba văn phòng chính đặt tại ba trọng điểm của thành phố Hồ Chí Minh, và văn phòng dành cho sinh viên thực tập đặt tại địa chỉ: 13, Lê Đại Hành, Phường 15, Quận 11
2 Sản phẩm của công ty
AziWorld chuyên phát triển và vận hành những phần mềm dành cho web và di động Công ty đã xây dựng thành công 2 sản phẩm AziCart và AziDev
Công ty đã phục vụ hơn 350 khách hàng trong nhiều lĩnh vực khác nhau là những
có sở doanh nghiệp trên khắp cả nước Các sản phẩm hỗ trợ quản lý doanh nghiệp, giám sát, theo dõi và ra quyết định hiệu quả
Trang 7Chương 2: Nội dung thực tập
Đợt thực tập với chủ đề “Lập trình web Frond-end” nhằm mục đích giúp sinh viên thực tập được đào tạo bài bản về ngôn ngữ lập trình, công cụ sử dụng và tư duy logic.Đồng thời rèn luyện những kỹ năng mềm như làm việc nhóm, thuyết trình, giao tiếp Tại công ty, sinh viên có
cơ hội được học tập, khám phá và làm việc trong một môi trường phát triển phần mềm chuyên nghiệp
1 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty
Thời gian : 1 ngày
Hình thức: Online trên Google Meet
Nội dung : Giới thiệu về công ty, cách tổ chức của công ty
Được nghe người phụ trách giới thiệu về công ty, quá trình thành lập và phát triển, quy trình làm việc từ cao xuống thấp, cách thức tổ chức của công ty
Ngoài ra, thực tập sinh còn được giới thiệu về cách thức làm việc trong công ty như thời gian đi làm, các quy định cần phải tuân thủ, cách tính công giờ làm…
Kết quả : Hiểu thêm về công ty AziWorld, quá trình thành lập và phát triển Có thêm các
kỹ năng về việc sử dụng email trong công việc, có kỷ luật, có trách nhiệm hơn
2 Nội dung thực tập
2.1 Tìm hiểu Angular
Thời gian:1tuần
Nội dung:Tìm hiểu về ngôn ngữ lập trình Angular
Tìm hiều về những kiến thức cơ bản cần có của framework Angular trước khi bước vào dự án của công ty:
− Module: Mỗi ứng dụng Angular được gọi là một module Để khai báo một module trong Angular ta dùng từ khóa @NgModule và bên trong module sẽ có các tham số: declaration, exports, imports, providers, bootstrap
− Component: có thể nói đơn giản trong Angular mọi thứ đều là component bao gồm label, input, button,… Cho tới những component lớn được ghép từ nhiều component nhỏ mà thành như class
− Metadata: những thông tin truyền vào giúp Angular xử lý các hàm, các lớp Dưới cấp lớp có thể hiểu nó như là các parameter
− Data binding: Lấy dữ liệu từ model, controller để đổ vào view và ngược lại Có 2 loại binding data: binding 1 chiều (chuyển từ model sang view hoặc ngược lại); binding 2 chiều (chuyển đổi qua lại liên tục giữa model và view mỗi khi có sự thay đổi)
− Directive: có hai loại directive:
Trang 8+ Structure directive: có chức năng gán dữ liệu theo một quy tắc nào đó + Attribute directive: có chức năng hiển thị dữ liệu một các trực tiếp
− Service: Là lớp có khả năng thực hiện một số chức năng thường dùng Có thể xem đây như một thư viện với các hộ trợ cho việc gọi api và trả về dữ liệu hoặc put những dữ liệu đó
Thực hiện: Thực hành sử dụng ngôn ngữ Angular thông qua việc xây dựng các demo
sản phẩm nhỏ
Kết quả: Có được những kiến thức cơ bản trong việc sử dụng Angular, HTML và
CSS Sử dụng, thao tác thành thạo với API
2.2 HTML/CSS và sản phẩm demo
Thời gian:2 tuần
Nội dung:Tìm hiểu về HTML/CSS và demo một sản phẩm
Trong thời gian này, liên hệ và làm việc trực tiếp với mentor về những kiến thức
cơ bản cần có về Angular trước khi bước vào dự án của công ty:
- Tìm hiểu về HTML, CSS để hỗ trợ xây dựng giao diện cho sản phẩm: lập trình web thì không thể không có html/css Với những ai chưa có kiến thức về mảng này, công ty cũng sẽ hỗ trợ để giúp các bạn phát triển về mảng này
- Áp dụng kiến thức tìm hiểu được để xây dựng ra một ứng dụng minh họa: Sau khi
đã có được những kiến thức lý thuyết cơ bản thì đây là lúc áp dụng những kiến thức đó thông qua những bài demo nhỏ được giao về
- Tìm hiểu và áp dụng kiến thức về API, http: thực tập sinh được hướng dẫn kết nối tới server thông qua những danh sách API được viết sẵn trên swagger Từ đó hỗ trợ thực tập sinh có thể tập trung hoàn toàn vào việc giải quyết các vấn đề ở front-end
Thực hiện: Thực hành sử dụng ngôn ngữ Angular thông qua việc xây dựng các demo
sản phẩm nhỏ
Kết quả: Có được những kiến thức cơ bản trong việc sử dụng Angular, HTML và
CSS Sử dụng, thao tác thành thạo với API
2.3 Tìm hiểu kiến thức về git và làm việc nhóm
Thời gian : 1 tháng
Nội dung : Xây dựng những demo lớn hơn với sự tham gia cùng với các thành viên
trong nhóm front-end
- Git: Tìm hiểu về git và cách làm việc với các nhánh trên git với các câu lệnh cmd Hạn chế mất thời gian tìm hiểu về những công cụ hỗ trợ, dễ dàng quản lý các file
dữ liệu hơn Thực tập sinh sẽ được hỗ trợ giải quyết những vấn đề phát sinh như
Trang 9conflict từ đó có thể tự tin hơn trong việc sử dụng git và quản lý source code của mình
- Token:Tìm hiểu kiến thức về token và viết demo nhằm để hiểu cách hoạt động của token và cả refresh token Học được cách sử dụng token cho các api với sự hỗ trợ của interceptor
- RxJS:Thư viện hỗ trợ người dùng quản lý bất đồng bộ khi làm việc với Angular Cung cấp nhiều thuật ngữ mới như Observable, Promise, Subject,… Cung cấp cho người dùng một số lượng lớn công cụ cùng với nhiều phương thức quản lý bất đồng bộ của các lời gọi api, http request Đơn giản hóa số dòng code và gia tăng tính trang trí cho dữ liệu đầu ra của mình
- Xây dựng demo và kết nối với thành viên trong nhóm thành sản phẩm: sau khi tìm hiểu về những công nghệ trên thì các thành viên trong nhóm mỗi người sẽ viết một demo cho những gì mình đã tìm hiểu và sau đó mọi người sẽ học cách ghép code lại với nhau để tạo ra một sản phẩm chung
Thực hiện :
- Tham gia đầy đủ các buổi training của công ty
- Làm các bài thực hành, kiểm tra về kiến thức đã học
Kết quả:
- Nâng cao kỹ năng lập trình với ngôn ngữ C++
- Có được những kiến thức quan trọng cho việc lập trình game mobile sau này Ngoài ra còn được biết thêm một số quy tắc trong việc viết code sao cho đúng chuẩn, dễ đọc, dễ hiểu
2.4 Đi vào dự án
Thời gian : 2 tháng
Nội dung : Xây dựng dự án của công ty
- Trong thời gian này, các bạn thực tập sinh sẽ được thử sức với những phần cơ bản trong dự án Để rồi từ đó dần phát triển rộng ra hơn
- Các thông tin dữ liệu như giao diện, server, api sẽ được cung cấp sẵn nhằm hỗ trợ cho các bạn thực tập sinh có thể phát huy tốt nhất khả năng của mình
- Việc làm nhóm vẫn sẽ được duy trì xuyên suốt quá trình thực tập sinh thực hiện
dự án
Thực hiện :
− Áp dụng những gì đã nhần được từ 2 tháng qua để phát triển khả năng
Kết quả:
- Hiểu được quy trình xây dựng hệ thống web với front-end
Trang 10- Có được những kiến thức quan trọng cho việc lập trình game mobile sau này Ngoài ra còn được biết thêm một số quy tắc trong việc viết code sao cho đúng chuẩn, dễ đọc, dễ hiểu
3 Thực hiện project
Sau gần 2 tháng được training và thực hành, thực tập sinh đã nắm được những kiến thực
cơ bản về Angular, HTML/CSS, git,… Trong những tháng sau đó, trainer đã hướng dẫn thực tập sinh áp dụng những kiến thức đã học để thực hiện dự ánweb
Chi tiết đồ án sẽ được nói ở phần sau
4 Lịch làm việc
dẫn
Mức
độ hoàn thành
Nhận xét của người hướng dẫn
1
- Tìm hiểu về công ty, cách tổ chức của công ty
và kiến thức cơ bản về Angular
Anh Lê Phước Hưng
10 Chăm chỉ, tiến bộ
nhanh, Tốt
Phước Hưng
9 Chăm chỉ, tiến bộ
nhanh, Tốt
3
- Áp dụng kiến thức về Angular và HTML/CSS viết demo sản phẩm
Anh Lê Phước Hưng
9 Chăm chỉ, tiến bộ
nhanh, Tốt
4
- Nghe giới thiệu về API của công ty trên swagger
và học cách sử dụng các api
AnhLê Phước Hưng
10 Chăm chỉ, tiến bộ
nhanh, Tốt
5
- Tìm hiểu về git Cùng với xem cách sắp xếp các thư mục để format cho demo sắp tới
Anh Lê Phước Hưng
10 Chăm chỉ, tiến bộ
nhanh, Tốt
6 - Tìm hiểu về token và xây
dựng demo với token
Anh Lê Phước Hưng
10 Chăm chỉ, tiến bộ
nhanh, Tốt
7
- Tìm hiểu về RxJS một thư viện hỗ trợ sự đồng
bộ của người dùng
Phước Hưng
9 Chăm chỉ, tiến bộ
nhanh, Tốt
8 - Kết nối code giữa các
thành viên với nhau
Anh Lê Phước Hưng
10 Chăm chỉ, tiến bộ
nhanh, Tốt
Trang 12Chương 3: Chi tiết về project
1 Giới thiệu về project
Là một hệt thống chấm công, giờ làm cho nhân viên trong doanh nghiệp Với mong muốn là thay thế đi những việc quản lý chấm công theo những hệ thống xưa củ Ứng dụng mong muốn mang đến cho người dùng phương thức chấm công cũng như quản lý giờ công dễ dàng và minh bạch
1.1 Quản lý đăng nhập
Hệ thống hỗ trợ người dùng giao diện cơ bản cho việc đăng nhập, đăng ký và quên mật khẩu Ngoài ra, ứng dụng còn hỗ trợ cho người dùng đăng nhập thông qua facebook, google, apple id, linkedin
Để gia tăng tinh xác thực và bảo mật cho người dùng mỗi khi đăng nhập và đăng
ký Ứng dụng có sử dụng hệ thống xác thực tự động thông qua email và số điện thoại Điều này sẽ giúp cho người dùng yên tâm hơn về độ bảo mật thông tin khi đăng ký sử dụng tài khoản trên hệ thống
Trang 131.2 Quản lý thông tin người dùng
Việc quản lý thông tin của mỗi người dùng trong hệ thống rõ ràng và đầy đủ Điều này có thể giúp các doanh nghiệp có một lượng thông tin cá nhân vừa đủ cần thiết của các nhân viên từ đó giúp cho việc quản lý trở nên dễ dàng hơn và việc liên hệ cũng trở nên đơn giản hơn
Với giao diện đơn giản, nhưng bố cục sắp xếp hợp lý, rõ ràng, người dùng chắc chắn sẽ
dễ dàng trong việc tìm kiếm thông tin liên hệ Ngoài ra việc cập nhật dữ liệu cũng được
Trang 14ưu ái cho người dùng để giúp họ có thể chủ động thay đổi thông tin cho phù hợp với những thông tin hiện tại của bản thân
Trong ứng dụng, những kỹ năng mềm cũng có thể hiện cập nhật và hiển thị đầy
đủ đủ chứng minh rằng, khi vào một doanh nghiệp việc xây dựng và phát huy những kỹ năng mềm cho các cá nhân trong công ty cũng là điều cần thiết quan tâm
2 Thực hiện
Các thành viên của team internship:
- Lê Phương Nam
- Nguyễn Trung Nghĩa
- Nguyễn Đức Khiêm
Và những sự giúp đỡ tận tình của các những bạn HR, của anh Hiếu (mentor bộ phận back-end)
3 Kế hoạch
Giai đoạn Quản lý đăng nhập:
- Đăng nhập, đăng ký, quên mật khẩu
- Đăng nhập với các bên thứ 3 như: facebook, google,
- Xây dựng, format source code cho dự án
- Sử dụng HTML/CSS để xây dựng giao diện
- Tìm hiểu các thư viện UI để đưa vào phát triển giao diện
Trang 15- Làm các chức năng: đăng ký nơi làm, xác thực opt, câu hỏi bảo mật,…
Kết quả :
- Hầu hết các tính năng trên đã được thực hiện
Giai đoạn Beta:
- Xây dựng UI
- Gọi API để load dữ liệu lên giao diện
- Thực hiện các chức năng cập nhật, thêm, xóa sửa
- Bổ sung token vào các api khi được gọi
- Xây dựng các chức năng phức tạp với interceptor
- Cập nhật UI
Kết quả : Đã hoàn thành toàn bộ những tính năng trên
Trang 16TÀI LIỆU THAM KHẢO
Angular
https://angular.io/
https://github.com/angular-vietnam/100-days-of-angular
RxJS
https://rxjs.dev/guide/overview
HTML/CSS
https://www.freecodecamp.org/
Trang 17TỔNG KẾT
Như vậy, sau bốn tháng làm việc, nhóm đã kịp hoàn thành một số tính năng nhất định cho dự án Do thời gian có hạn nên tính năng của dự án không quá nhiều Giao diện vẫn còn vài chỗ chưa được như ý Nhưng nhóm vẫn rất vui với những gì mà mình đã nhận được
Chân thành cảm ơn sự giúp đỡ của các anh chị mentor Cảm ơn các thành viên của nhóm
đã cùng nhau làm việc thật hiệu quả để đạt được kết quả như trên