Báo cáo thực tập lập trình ứng dụng WEB quản lý tổ chức sự kiện

Đặc biệt cảm ơn anh Dương Văn Nhất, đã training ReactJs, hướng dẫn, giúp đỡ cho em tận tình cả những khó khăn trong công việc, đến những khó khăn việc làm quen với môi trường mới; cảm ơ

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH 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 ỨNG DỤNG WEB QUẢN LÍ TỔ CHỨC SỰ KIỆN

Thực tập sinh : Trương Minh Sang

TP Hồ Chí Minh, tháng 11 năm 2020

LỜI MỞ ĐẦU

Ngày nay, với tốc độ phát triển vô cùng mạnh mẽ, ngành công nghiệp phần mềm, trong

đó có nền tảng web, đã và đang là nhân tố kích thích sự phát triển của công nghệ thông tin thế giới, cả về phần cứng và phần mềm

Cùng với xu thế phát triển của thế giới, Việt Nam cũng không phải ngoại lệ Ngành công nghiệp phần mềm 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 về phần mềm trên thế giới Trong đó, những công ty phần mềm trong nước (như KMS Technology) đã và đang góp phần rất lớn vào sự phát triển tích cực của ngành công nghiệp phần mềm Việt

Ngành công nghiệp phần mềm được sinh ra là do nhu cầu giải quyết các vấn đề thực tế bằng cách sử dụng các hệ thống phần mềm Và những kỹ sư phần mềm, trong đó phần lớn là người trẻ, sẽ đóng vai trò quan trọng trong công việc phát triển phần mềm Vì lý do này, em quyết định chọn lập trình phần mềm, cụ thể là ứng dụng web, làm định hướng cho việc học tập của mình

Sau ba năm học tập trên trường, do mong muốn có thêm kinh nghiệm thực tế, cũng như muốn được tham gia quy trình phát triển phần mềm trong một môi trường chuyên nghiệp, em quyết định thực tập trong học kì này Vì vậy, em quyết định chọn KMS Technology - một môi trường lý tưởng, hiện đại, chuyên nghiệp - là nơi sẽ giúp em thực hiện được dự định này

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty KMS Technology đã tạo điều kiện cho em có cơ hội được thực tập tại công ty

Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của anh mentor và đội ngũ phát triển, em đã tiếp thu được những kiến thức quan trọng để có thể tham gia một qui trình phát triển phần mềm chuyên nghiêpj Chân thành cảm ơn các anh chị trong đội ngũ phát triển đã

bỏ ra nhiều 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 Dương Văn Nhất, đã training ReactJs, hướng dẫn, giúp đỡ cho em

tận tình cả những khó khăn trong công việc, đến những khó khăn việc làm quen với môi trường

mới; cảm ơn anh Võ Ngọc Dũng đã chỉ dẫn em về cách tham gia vào qui trình phát triển và kiến

trúc của phần mềm, cách làm việc trong team

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

Trương Minh Sang Tp.HCM, ngày 2 tháng 11 năm 2020

NHẬN XÉT CỦA KHOA

Mục lục

Chương 1: Giới thiêu công ty thực tập 6

Giới thiệu công ty KMS Technology 6

Sản phẩm của công ty 6

Chương 2: Nội dung thực tập 7

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

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

Các công cụ làm việc 7

Tìm hiểu ngôn ngữ Typescript và thư viện ReactJs 7

Lập trình front end ứng dụng web với ReactJs 8

Thực hiện project 10

Lịch làm việc 10

Chương 3: Chi tiết về project 13

Giới thiệu về dự án và tính năng đã thực hiện 13

Các chức năng và domain chính 13

Chức năng đã thực hiện 16

Thực hiện 18

Kế hoạch 18

TÀI LIỆU THAM KHẢO 19

TỔNG KẾT 20

Chương 1: Giới thiêu công ty thực tập

Giới thiệu công ty KMS Technology

KMS Technology được thành lập năm 2009, là một công ty chuyền về cung cấp các dịch vụ phát triển sản phẩm phần mềm Sau 11 năm hoạt động, KMS đã xây dựng đội ngũ hơn 1000 nhân viên tại Mỹ và Việt Nam, và phát hành 3 sản phẩm phần mềm trên thị trường thế giới

KMS Technology có văn phòng đặt tại Mỹ và Việt Nam, phân phối phần mềm

và giải pháp outsourcing cho nhiều công ty khác nhau

Sản phẩm của công ty

Ngoải giải pháp outsourcing, công ty còn có 3 sản phẩm phầm mềm chính đã và đang được phát triển: QASymphony – Giải pháp automation test dựa trên AI cho nền tảng đám mây và devops, Katalon – Nền tảng automation testing, Kobiton – Nền tảng testing dựa trên AI và sử dụng thiết bị thật

Chương 2: Nội dung thực tập

Đợt thực tập với dự án “Ứng dụng Web quản lí tổ chức sự kiện” nhằm mục đích giúp sinh viên thực tập được đào tạo về lập trình ứng dụng nền tảng web, đồ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

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

Nội dung : Giới thiệu về công ty, cách tổ chức của công ty

Được nghe đội ngũ HR giới thiệu về công ty, quá trình thành lập và 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ủ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 sử dụng email trong công việc…

Kết quả : Hiểu thêm về công ty KMS Technology, 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

Nghiên cứu kỹ thuật

Các công cụ làm việc

Thời gian : 3 ngày

Nội dung : Tìm hiểu về các công cụ sẽ được sử dụng trong quá trình làm việc

Trong thời gian này, mentor đã hướng dẫn thực tập sinh tìm hiểu về các công cụ

sẽ giúp ích cho trong công việc phát triển Một số phần mềm trong số đó như Git và Gitlab - sử dụng trong làm việc quản lí cấu hình của dự án, VSCode – trình soạn thảo văn bản rất phổ biến với nhiều môi trường phát triển tiện dụng cho lập trình viên

Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên

Kết quả : Lập trình sử dụng các công cụ miễn phí, giúp dễ dàng kết hợp các công cụ

với nhau

Tìm hiểu ngôn ngữ Typescript và thư viện ReactJs

Thời gian : 7 ngày

Nội dung : Được training về ngôn ngữ Typescript và thư viện ReactJs, những kiến

thức quan trọng cho việc phát triển front end ứng dụng web

- Lập trình hướng đối tượng

Các kiến thức cơ bản về lập trình hướng đối tượng như khái niêm, các đặc tính như tính kế thừa, tính đóng gói, tính ảo hóa, tính đa hình Ngoài ra, thực tập sinh còn được hướng dẫn về cách thiết kế lớp cho các model sử dụng trong hệ thống

- Các thành phần website (HTML/CSS/JS):

Cách trình duyệt chạy một ứng dụng web trên phía front-end như thế nào Các khái niệm cơ bản về HTML/CSS/JS và cách chúng hoạt động trên trình duyệt

- Thư viện ReactJs

Thực tập sinh sẽ được hướng dẫn về cách sử dụng thư viện ReactJs để lập trình các thành phần của website về phía front-end Được hướng dẫn về cách ReactJs hiện thực hóa việc lập trình các thành phần cơ bản nêu trên

- Typescript:

Được hướng dẫn về ngôn ngữ Typescript như các cú pháp cơ bản như điều khiển luồng, vòng lặp, ; những tính chất cơ bản của Typescript như interface, kiểu union, ép kiểu, ; và khác biệt với Javascript như thế nào để ứng dụng với qui mô đội ngũ phát triển lớn

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ữ Typescript và thư viện ReactJs

- Có được những kiến thức quan trọng cho việc lập trình front-end 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

Lập trình front end ứng dụng web với ReactJs

Thời gian : 10 ngày

Nội dung: Các kiến thức cơ bản về ReactJs để có thể tham gia xây dựng phía front

end cho ứng dụng web sử dụng trong công ty

- Khái niệm cơ bản về ReactJs

Năm được các khái niệm cơ bản về ReactJs, là một thư viện Javascript dùng cho việc xây dựng các thành phần giao diện có thể tái sử dụng

Ngoài ra, mentor còn cung cấp cho thực tập sinh những khái niệm cơ bản trong môi trường web như DOM, HTML, CSS, HTTPS,

- Mô hình server-client:

Cách mô hình server-client đang được sử dụng phổ biến trong lập trình ứng dụng web hiện nay Trong mô hình này, React đóng vai trò quan trọng trong xây dựng ứng dụng front end phía client Ngoài ra việc lập trình front end sẽ phải có việc giao tiếp, thảo luận với thành viên lập trình back end phía server để có thể thực hiện giao tiếp giữa 2 phía bằng giao thức Https

- API Calls

Là các thao tác app phía front end giao tiếp với RESTful APIs ở phía server thông qua giao thức HTTPS nhằm thực hiện các hành động để lưu xuống cơ sở dữ liệu

- State management

Các nguyên lí về quản lí state (trạng thái) của một ứng dụng front end Quản lí app state để lưu các dữ liệu liên quan đến trạng thái của một app khi người dùng

sử dụng Thực hiện bằng các thư viện như Redux, Mobx,

- Routing

Việc quản lí đường dẫn của app để đưa người dùng đến các tài nguyên phù hợp và đưa đến trang lỗi nếu có xảy ra Sử dụng React Router

- Forms

Các vấn đề liên quan đến form để lấy input của người dùng Là một trong những thành phần quan trọng trong ứng dụng web để nhận input và tương tác từ người dùng Việc quản lí form với state của form, validation và submit

Thực hiện :

- Tham gia đầy đủ các buổi trainning

- Làm các bài tập thực hành để làm quen với các khái niệm, …

- Tìm kiếm tài liệu trên mạng để tìm hiểu thêm

Kết quả :

- Hiểu được những khái niệm cơ bản trong lập trình front end ứng dụng web

- HIểu được cách làm việc của lập trình viên front end với back end như thế nào

Thực hiện project

Sau một 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ề ReactJs, Typescript và lập trình front end web Trong hai tháng tiếp theo, mentor đã hướng dẫn thực tập sinh áp dụng những kiến thức đã học để tham gia đội ngũ phát triển một dự án ứng dụng web

Chi tiết dự án sẽ được nói ở phần sau

Lịch làm việc

Tuần Công việc Người hướng 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

- Làm quen với các công cụ làm việc trong công ty

- Học cách trao đổi, làm việc qua email

Chị Ánh Trần

2

- Tìm hiểu ngôn ngữ lập trình Typescript

Typescript cơ bản

- Làm quen ReactJs

Anh Nhất Dương

3

- Tìm hiểu ReactJs nâng cao

- Thực hành ReactJs

cơ bản và nâng cao

Anh Nhất Dương

và anh Dũng Võ

4

- Ứng dụng ReactJs vào một kiến trúc ứng dụng web

- Phát triển các khái niệm cơ bản trong một ứng dụng front end cơ bản

Anh Nhất Dương

và anh Dũng Võ

5 Bắt đầu Sprint:

- Lên kế hoạch Sprint

Anh Dũng Võ và toàn bộ đội ngũ

Planning

- Làm quen với source code của dự

án đang phát triển

- Làm quen với các APIs back end để sử dụng

- Tìm hiểu sitemap của ứng dụng

6

Giai đoạn trong Sprint:

- Viết một phần của trang landing page của một sự kiện trong công ty

- Kết hợp phần đã viết vào trang landing page để nhân viên công ty có thể đăng

kí tham gia sự kiện

Anh Nhất Dương

7

Giai đoạn trong Sprint:

- Viết một field của một forms để in ra kết quả JSON của cài đặt của người dùng trong phía admin

- Fix một số bug UI

Anh Nhất Dương

8

Giao đoạn cuối sprint

- Fix các bug được

QC báo cáo

- Sprint Review và Sprint Retrospective

Anh Nhất Dương

và đội ngũ phát triển

9

Bắt đầu sprint tiếp theo:

- Lên kế hoạch Sprint Planning

- Nghiên cứu về cách thực hiện dynamic forms

- Lên ý tưởng thiết kế cấu trúc của dynamic forms

Anh Nhất Dương

và toàn bộ đội ngũ

10 Giai đoạn trong Sprint: Anh Nhất Dương

- Viết các thành phần giao diện mockup cho màn hình dynamic form bên phía admin

- Nghiên cứu các APIs cần thiết và làm việc với back end

và anh Dũng Võ

11

Giai đoạn trong Sprint:

- Viết chức năng của dynamic forms

- Chức năng có thể tạo form động cho các loại form trong

sự kiện

Anh Nhất Dương

12

Giai đoạn cuối sprint và giai đoạn kết thúc, báo cáo :

- Hoàn thành chức năng dynamic forms

- Fix bug

- Sprint Review và Sprint Retrospective

- Báo cáo cuối đợt thực tập

Anh Nhất Dương

và toàn bộ đội ngũ

Chương 3: Chi tiết về project

Giới thiệu về dự án và tính năng đã thực hiện

Eventify là một dự án ứng dụng web được xây dựng bằng Java và Typescript (ReactJs) nhằm để quản lí tốt hơn các sự kiện đã, đang và sẽ được tổ chức trong công ty Ứng dụng có 2 domain chính là client – dùng cho người dùng chung là các nhân viên trong công ty để đăng kí tham gia sự kiện – và admin – là nhân viên thuộc bộ phận Admin của công ty sử dụng để quản lí các thông tin sự kiện

Các chức năng và domain chính

Client:

Ứng dụng được sử dụng ở phía client để hỗ trợ nhân viên trong công ty KMS tìm kiếm thông tin về các sự kiện đang diễn ra trong công ty Khi đó có thể đăng kí tham gia sự kiện đó

Các sự kiện được viết thành các landing page riêng và được hiện dynamic với từng đường dẫn khác nhau Do đó mỗi event vẫn mang tính đặc trưng riêng

Admin:

Ứng dụng được sử dụng ở phía admin để hỗ trợ bộ phận Admin trong công ty KMS quản lí thông tin về các sự kiện đang diễn ra trong công ty Các admin có thể thêm, xóa, sửa các event công ty, sửa các form đăng kí và lấy thông tin đăng kí của các nhân

viên,

Các thông tin đăng kí khi đó được sử dụng cho các process về sự kiện trong công ty

Chức năng đã thực hiện

Một phần landing page sự kiện Flashatch:

Mô tả:

Flashatch là một sự kiện của KMS vào khoảng tháng 10 nhằm vận động các nhân viên

sử dụng sáng tạo của mình trong lập trình bằng một trò chơi lập trình AI được diễn ra trên web

Kết quả thực hiện:

Cài đặt được banner, các thông tin sự kiện và nút đăng kí sự kiện

Chức năng Dynamic Forms:

Mô tả

Chức năng Dynamic Forms giúp admin có thể tạo ra các form một cách flexible trong

sự kiện đang được chọn (như Google Forms) Admin có thể thêm các trường, các validation của trường đó, preview form và thêm các thông tin phụ (như Group sử dụng form),

Kết quả thực hiện:

Cài đặt được màn hình chính Có các control để người dùng nhập các meta data của form đang được tạo Có nút preview, save và discard Có thể thay đổi tên form, loại form, thông tin phụ,

Thực hiện

- Trương Minh Sang

Và sự giúp đỡ tận tình của đội ngũ phát triển CoE thuộc KMS Technology

Kế hoạch

Giai đoạn Sprint đầu:

- Hoàn thành các thành phần giao diện cơ bản cho Flashatch

- Lấy thông tin động từ server như thời gian, các topic, các trường đăng kí

- Thanh nav bar

- Nút đăng kí

Kết quả :

- Thực hiện toàn bộ các chức năng được

Giai đoạn Sprint tiếp theo:

- Hoàn thành UI cho chức năng

- Hoàn thành các state cho input người dùng để gửi về server

- Validate các input của người dùng trước gửi về server

- Tên, loại và các thông tin thêm của form

- Nút preview form

Kết quả : Đã hoàn thành toàn bộ những tính năng trên