Báo cáo thực tập frontend developer

Hồ Chí Minh, tháng 6 năm 2023LỜI MỞ ĐẦU Trước tiên, em xin gửi lời cảm ơn đến quý thầy, cô Trường Đại học Công nghệ Thông tin – Đại học Quốc gia Thành phố Hồ Chí Minh đã tạo điều kiện tố

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

Frontend Developer

TP Hồ Chí Minh, tháng 6 năm 2023

LỜI MỞ ĐẦU

Trước tiên, em xin gửi lời cảm ơn đến quý thầy, cô Trường Đại học Công nghệ Thông tin – Đại học Quốc gia Thành phố Hồ Chí Minh đã tạo điều kiện tốt cho sinh viên chúng em được tiếp cận môi trường làm việc doanh nghiệp thông qua học phần Thực tập doanh nghiệp, giúp chúng em có sự chuẩn bị tốt trước khi chính thức tìm được công việc làm sau khi tốt nghiệp.

Em cũng xin chân thành cảm ơn quý thầy, cô khoa Công nghệ phần mềm

đã quan tâm và hỗ trợ trong quá trình tìm vị trí thực tập phù hợp với nguyện vọng và mong muốn của em.

Kế đến là sự trân trọng của em dành cho Công ty TNHH Quang Hải đã cho

em cơ hội được thực tập tại công ty, cũng như nỗ lực đào tạo kỹ năng và kiến thức cho em để phù hợp với môi trường làm việc chuyên nghiệp Và lời cảm ơn tới các anh chị và các bạn trong công ty đã giúp đỡ và hỗ trợ để giúp em đạt được kết quả tốt nhất trong công việc.

Cuối cùng, em xin cảm ơn thầy Nguyễn Tấn Toàn đã trực tiếp hỗ trợ và giúp đỡ em trong quá trình thực tập và cung cấp các thông tin cần thiết cùng các kinh nghiệm quý giá của cô cho em.

Trân trọng.

<Phạm Quang Việt>

<Tp.HCM, tháng 06 năm 2023>

NHẬN XÉT CỦA KHOA

MỤC LỤC LỜI MỞ ĐẦU 2

LỜI CẢM ƠN 3

NHẬN XÉT CỦA KHOA 4

MỤC LỤC 5

CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP 6

1.1 Giới thiệu […] 6

1.2 Sản phẩm công ty 6

1.3 Lịch làm việc khi thực tập tại công ty 6

CHƯƠNG 2: NỘI DUNG THỰC TẬP 7

2.1 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 7

2.2 Nghiên cứu kỹ thuật 7

2.2.1 Tuần 1 7

2.2.2 Tuần 2 7

2.3 Thực hiện dự án cá nhân 7

[Mô tả quá trình thực hiện, kết quả] 7

2.3.1 Công nghệ 7

2.3.2 Mô tả dự án 7

2.3.3 Kết quả 7

2.4 Tham gia dự án thực tế 7

CHƯƠNG 3: TỔNG KẾT 8

3.1 Điểm mạnh 8

3.2 Điểm yếu 8

3.3 Chuẩn đạt được 8

TÀI LIỆU THAM KHẢO 9

CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP

1.1 Giới thiệu Công ty TNHH Quang Hải

 Công ty TNHH Quang Hải, thành lập từ năm 2018, chuyên phát triển các giải pháp phần mềm, cung cấp các giải pháp chuyển đổi số cho các doanh nghiệp đa lĩnh vực

 Với nhiều dự án lớn và phức tạp đã được triển khai thành công, Công

ty TNHH Quang Hải tích lũy được nhiều kinh nghiệm quý báu trong việc phát triển giải pháp phần mềm đa lĩnh vực trên địa bàn TP Hồ Chí Minh

Lĩnh vực kinh doanh:

 Phát triển và đấu thầu phần mềm: Lập trình, vận hành vả bảo trì hệ thống nghiệp vụ,

lập trình Winform Application, lập trình Web Application

 Tích hợp hệ thống thông tin: Cung cấp thiết bị máy tính và máy in

 Lắp đặt hệ thống mạng máy tính, điện thoại, camera giám sát

1.2 Sản phẩm công ty

Tên Project Sơ lược Project trình + Tool + OS Ngôn ngữ lập hạn Kỳ

Hệ thống coi thi

trực tiếp

Hệ thống quản lý coi thi cho sinh viên thi trực tiếp tại phòng máy có các tính năng như quản lý bài thi, quản lý sinh viên, quản lý lượt thi, thống kê điểm thi

Ngôn ngữ lập trình:

C#

DB Server: MS SQL Công nghệ: Winform

4 tháng

Hệ thống coi thi

online

Hệ thống quản lý coi thi sinh viên thi trực tiếp tại phòng máy có các tính năng như quản lý bài thi, quản lý sinh viên, quản lý lượt thi, thống kê điểm thi

Ngôn ngữ lập trình:

HTML CSS Javascript

DB Server: MongoDB

Công nghệ: Reactjs Bootstrap 4,

Loopback4

4 tháng

Hệ thống quản lý

sinh viên

Hệ thống quản lý sinh viên trong ký túc xá Trung tâm Quốc phòng gồm các tính năng như quét mã thuê quân trang, điểm danh trong giờ học,…

Ngôn ngữ lập trình:

Typescript

DB server: Mongo DB

Công nghệ: React Native

Hệ thống quản lý

lương, thuế, thu

nhập

Hệ thống quản lý lương, thuế, thu nhập cán bộ trong Khoa Y gồm các tính năng như quản lý hệ số lương, quản lý lịch sử làm việc, quản lý nghỉ phép…

Ngôn ngữ lập trình:C#

DB server: MS SQL Công nghệ: Winform

My Taxi Phần mềm My taxi hỗ trợ đặt xe

Ngôn ngữ lập trình:

Typscript Công nghệ: React Native

1.3 Lịch làm việc khi thực tập tại công ty

 Em tham gia làm việc tại công ty bắt đầu từ ngày 27/02 tới 17/06, các ngày làm việc trong tuần là từ thứ 2 đến thứ 6 Công việc hằng ngày bắt đầu từ lúc 8h30 đến 16h00 Thời gian nghỉ trưa khoảng 1.5 tiếng Hằng ngày em làm việc với các bạn trong team và anh leader, thời gian chủ yếu trong ngày làm việc em nghiên cứu và làm các task được giao trong tuần Mỗi thứ 6 cuối tuần sẽ viết báo cáo tiến

độ hoàn thành tasks và trao đổi thêm với các bạn thực tập sinh khác

CHƯƠNG 2: NỘI DUNG THỰC TẬP

2.1 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty

Thời gian: 3 ngày

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, các phòng ban

về IT, HR, … Ngoài ra, thực tập sinh còn được giới thiệu về văn hóa làm việc trong công ty như thời gian đi làm, các quy định, cách sử dụng email trong công việc, …

Kết quả: hiểu thêm về văn hóa công ty, 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, làm việc có

kế hoạch, có kỷ luật, có trách nhiệm hơn

2.2 Nghiên cứu kỹ thuật

2.2.1 Tuần 1

Nội dung: Tìm hiểu các công cụ làm việc

Kết quả: Cài đặt và làm quen các phần mềm Postman, Visual Studio Code, GitLab

2.2.2 Tuần 2

Nội dung: Tìm hiểu về frontend và backend, cơ chế client – server trong web application

Kết quả: Hiểu cơ chế client-server trong hệ thống

2.2.4 Tuần 3,4

Nội dung: Tìm hiểu về html, css, javascript

Kết quả: Hiểu được thành phần cơ bản của website, làm quen với html, css, javascript, json

2.2.6 Tuần 5,6,7

Nội dung: React concept(component, props, routing, hooks (useState, useEffect, UseRef, UseContext)

Kết quả: Hiểu được concept cơ bản của React, tạo và export component, quản lý State và routing

2.2.3 Tuần 8,9

Nội dung: Tìm hiểu framework frontend Ionic

Kết quả: Tạo ứng dụng mẫu helloworld bằng Ionic Framework, build codebase từ javascript sang mobile application (java)

2.2.5 Tuần 10

Nội dung: Tìm hiểu về http request/ response, HTTP methods(get,post,put,delete)

Kết quả: Hiểu được thành phần của http request/response, HTTP methods

2.2.5 Tuần 11,12

Nội dung: Làm việc với API, truy xuất data từ HTTP response bằng Axios

Kết quả: Sử dụng Axios để gửi yêu cầu request đến server và xử lý phản hồi từ Api response

2.3 Thực hiện dự án cá nhân

2.3.1 Công nghệ

 Frontend: Ionic framework

 Backend: loopback framwork

 DB server: Mongo DB

 Programming language: Typescript

2.3.2 Mô tả dự án

 Tìm hiểu thư viện Ionic, xây dựng Manage Employee page, xây dựng Manage

Deparment page

 Tạo project CRUD bằng Ionic Framework

o Xem xóa sửa thông tin Nhân viên

o Xem xóa sửa thông tin Phòng/Khoa

2.3.3 Kết quả

Figure 1 Màn hình quản lý nhân viên

2.4 Tham gia dự án thực tế

Mô tả quá trình thực hiện, kết quả, những thuận lợi, khó khăn

 Hệ thống quản lý lương, thuế, thu nhập cho Cán bộ

o Tổng quan:

 Cho phép người dùng đăng nhập

 Load dữ liệu

 Cho phép import dữ liệu mới từ file excel

 Quản lý thông tin từng cán bộ

 Thông tin cá nhân

 Lịch sử làm việc

 Bằng cấp

 Hệ số lương

 Quản lý ngày nghỉ phép, bảo hiểm của tổ chức

o Nhiệm vụ được giao

 Xây dựng màn hình import data từ file excel

 Gửi file qua API, load dữ liệu nhận về từ API

 Hiển thị dữ liệu lên màn hình

 Người dùng checklist cán bộ muốn thêm

 Gửi API submit

 Xây dựng màn hình quản lý tất cả cán bộ/nhân viên

 Gửi request tất cả các bộ, load dữ liệu nhận về từ API lên màn hình

 Có thể xem thông tin cá nhân / thông tin chứng chỉ / chỉnh sửa / xóa nhân viên đó

 Xây dựng màn hình quản lý các phòng ban của tổ chức

 Gửi request tất cả các phòng/ ban , load dữ liệu nhận về từ API lên màn hình

 Có thể xem nhân viên trong phòng ban đó / chỉnh sửa / xóa phòng ban đó

 Xây dựng màn hình quản lý bằng cấp của cán bộ

 Hiển thị form nhập thông tin bằng cấp và gửi API về cho server

Figure 2 Cách tổ chức structure project

Figure 3 Cách tổ chức Component

Figure 4 Màn hình Import nhân viên

Figure 5 Màn hình quản lý nhân viên

Figure 6 Màn hình quản lý phòng ban

Figure 7 Màn hình thêm Chứng chỉ / bằng cấp

Figure 8 Màn hình chỉnh sửa nhân viên

CHƯƠNG 3: TỔNG KẾT

Quãng thời gian thực tập tại Công ty TNHH Quang Hải đã giúp em cải thiện bản thân rất nhiều trong quy trình làm việc thực tế, tác phong của người kỹ sư phần mềm Được làm việc tại đây, em đã học thêm được kỹ năng mềm sử dụng mail, quản lý ticket, làm việc nhóm, giao tiếp với cấp trên, …

Chỉ trong thời gian hạn chế, em đã hoàn thành dự án cá nhân trong quá trình training với các tính năng, yêu cầu đặt ra ban đầu

Khi tham gia vào dự án thực tế, em cũng hoàn thành tốt các tác vụ đúng hạn và đạt chất lượng tốt

3.1 Điểm mạnh

 Khả năng giao tiếp tốt giúp việc làm việc giữa các bạn thực tập sinh khác hiệu quả, quá trình trao đổi thông tin được đẩy nhanh, năng suất làm việc nhóm tốt

 Khả năng nghiên cứu, tìm hiểu các nguồn tham khảo trên intenet tốt, tận dụng trí tuệ nhân tạo trong công việc tốt, rút ngắn thời gian

và tăng năng suất làm việc

3.2 Điểm yếu

 Phương pháp lập trình chưa được sạch sẽ(clean), sau mỗi lần review đều phải sửa các chuẩn viết code

 Các phương pháp thiết kế giao diện vẫn còn nhiều hạn chế, hiện tại vẫn chưa học kỹ

về các phương pháp đặt/ sắp xếp component trên một màn hình

3.3 Chuẩn đạt được

 Thao tác lập trình, tư duy, ý tưởng xử lý luồng dữ liệu hiệu quả hơn

 Củng cố kiến thức, nâng cao kỹ năng lập trình Web Front-end sử dụng Ionic

 Nâng cao khả năng research, thuyết trình, trình bày slide

TÀI LIỆU THAM KHẢO

1 W3School What is Client-Server Architecture [Online] Available:

https://www.w3schools.in/what-is-client-server-architecture

2 W3School HTTP Methods [Online] Available:

https://www.w3schools.com/tags/ref_httpmethods.asp

3 Dayana Jabif (2018) Ionic Tutorial: Building a complete mobile app with Ionic

Framework [Online] Available:

https://medium.com/learn-ionic-framework/build-a-complete-mobile-app-with-ionic-3-b69a8bfb0d88

4 AltexSoft Inc (2019) The Good and the Bad of Ionic Mobile Development [Online] Available: https://altexsoft.medium.com/the-good-and-the-bad-of-ionic-mobile-development-865d297eec39

4 Ionic Framework (2019) Android Development [Online] Available:

https://ionicframework.com/docs/developing/android

4 Ionic Framework (2019) UI Components [Online] Available:

https://ionicframework.com/docs/components