báo cáo thực tập tại công ty Mgm technology partners Viet Nam

+84.0236 3842771 Website: itf.dut.udn.vn, E-mail: cntt@dut.udn.vn BÁO CÁO THỰC TẬP TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN Tên đề tài: Xây dựng website quản lý chi tiêu của một hoạt động

KHOA CÔNG NGHỆ THÔNG TIN

Tel (+84.0236) 3736949, Fax (+84.0236) 3842771

Website: itf.dut.udn.vn, E-mail: cntt@dut.udn.vn

BÁO CÁO THỰC TẬP TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN

Tên đề tài:

Xây dựng website quản lý chi tiêu của một hoạt động tập thể

sử dụng Framework Spring và React

CÔNG TY THỰC TẬP:

Mgm technology partners Viet Nam

LỜI CẢM ƠN

Trong thời gian 2 tháng thực tập ở công ty, em đã nhận được sự giúp

đỡ rất nhiều từ mọi người

Lời đầu tiên, em xin gửi lời cảm ơn đến Công ty TNHH MTV mgm Việt Nam đã tổ chức chương trình thực tập cho chúng em Nhờ đó, chúng em có

cơ hội được tiếp xúc môi trường làm việc thực tế, được tiếp xúc với các anh chị có nhiều kinh nghiệm và nhận được nhiều lời chia sẽ đầy ý nghĩa Bên cạnh đó, em cũng được thực hành làm việc trong môi trường Agile Với sự giúp đỡ nhiệt tình và tận tình của anh Phan Văn Bình trong suốt thời gian hai tháng thực tập, chúng em đã có thời gian làm việc nhóm, chia sẽ kiến thức và học được nhiều công nghệ mới có thể áp dụng sau này sau khi ra trường

Em cũng gửi lời cảm ơn đến lãnh đạo trường Đại học Bách Khoa, Đại Học Đà Nẵng, lãnh đạo khoa Công nghệ thông tin đã tổ chức học phần này

để sinh viên có cơ hội tìm kiếm công ty thực tập và trải nghiệm thực tế

Em xin chân thành cảm ơn

Sinh viên thực hiện Cao Thị Anh Đào

DANH SÁCH HÌNH 2

DANH SÁCH TỪ VIẾT TẮT 3

CHƯƠNG 1: GIỚI THIỆU CÔNG TY TNHH MTV MGM VN 4

1.1 TÊN CÔNG TY 4

1.2 LỊCH SỬ PHÁT TRIỂN VÀ HÌNH THÀNH 4

1.3 NHU CẦU NHÂN LỰC VÀ ĐỊNH HƯỚNG PHÁT TRIỂN 5

CHƯƠNG 2: QUÁ TRÌNH THỰC TẬP TẠI CÔNG TY 5

2.1 NHIỆM VỤ ĐƯỢC GIAO 5

2.2 CÁC CÔNG NGHỆ ĐÃ NGHIÊN CỨU 6

2.2.1 Công cụ quản lý mã nguồn Git 6

2.2.2 Tìm hiểu về ngôn ngữ lập trình JAVA 7

2.2.3 Tìm hiểu về Framework Spring 9

2.2.4 Tìm hiểu về TypeScript 13

2.2.5 Tìm hiểu về Framwork React 15

CHƯƠNG 3: KẾT QUẢ THỰC HIỆN SẢN PHẦM 19

3.1 GIỚI THIỆU ĐỀ TÀI 19

3.2 CÁC CHỨC NĂNG CHÍNH CỦA HỆ THỐNG 19

3.3 YÊU CẦU PHI CHỨC NĂNG 19

3.4 MÔI TRƯỜNG CÀI ĐẶT 20

3.5 KẾT QUẢ ĐẠT ĐƯỢC 21

TÀI LIỆU THAM KHẢO 27

Hình 1: Logo công ty mgm technology partners Vietnam 4

Hình 2: Quá trình hình thành và phát triển của công ty mgm 4

Hình 3: Các luồng xử lý của Git 6

Hình 4: Các tính chất cơ bản của lập trình hướng đối tượng 8

Hình 5: Mô hình các thành phần của Spring 11

Hình 6: Cách hoạt động của TypeScript 13

Hình 7:Lý do sử dụng TypeScript 14

Hình 8: Cấu trúc các component trong React 17

Hình 9: Luồng xử lý của React 18

Hình 10: Trang chủ ứng dụng 21

Hình 11: Trang tạo hoạt động mới 22

Hình 12: Trang quản lý người dùng 22

Hình 13: Thêm thành viên cho hoạt động 22

Hình 14: Trang thêm thông tin chi tiêu 23

Hình 15: Danh sách chi tiêu của một hoạt động 23

Hình 16: Trang quản lý thông tin chi tiếc tổng sổ tiền và trung bình mỗi người 24

Hình 17: Trang theo dõi tiền dư, tiền nợ của mỗi cá nhân 24

VCS Version Control System

URL Uniform Resource Locator

EJB Enterprise JavaBeans

DOM Document Object Model

MVC Model View Controller

HTML HyperText Markup Language

CHƯƠNG 1: GIỚI THIỆU CÔNG TY TNHH MTV MGM VN 1.1 TÊN CÔNG TY

Tên đầy đủ của công ty:

Công ty TNHH MTV mgm technology partners Viet Nam

Địa chỉ công ty

 Cơ sở 1: 07 Pastuer, Hải Châu, Đà Nẵng

 Cơ sở 2: 07 Phan Chu Trinh, Hải Châu, Đà Nẵng

Hình 1: Logo công ty mgm technology partners Vietnam

1.2 LỊCH SỬ PHÁT TRIỂN VÀ HÌNH THÀNH

Công ty được thành lập năm 1994 tại MunChen, Đức với số lượng nhân viên chỉ vài người Sau nhiều năm phát triển mạnh mẽ và nhanh chóng, hiện nay tổng số nhân lực của công ty đã lên 573 nhân viên tại 14 địa điểm trên khắp thế giới

Hình 2: Quá trình hình thành và phát triển của công ty mgm

Chi nhánh công ty tại Việt Nam được thành lập và phát triển từ cuối năm 2015, lấy trụ sở Đà Nẵng là làm chi nhánh công ty tại Việt Nam

Sau 3 năm, nhân lực công ty đã tăng lên nhanh chóng từ vài người trong những ngày đầu Hiện này, tổng số nhân viên của công ty đã lên đến hơn 100 người

Công ty chuyên về phát triển các ứng dụng web cho thương mại, bảo hiểm và chính phủ điển tử trong 2 thập kỷ nay Công ty có khả năng mở rộng cao, an toàn và mạnh mẽ

1.3 NHU CẦU NHÂN LỰC VÀ ĐỊNH HƯỚNG PHÁT TRIỂN

Công ty TNHH MTV mgm technology Viet Nam đang có nhu cầu nhân lực rất cao Hằng năm, công ty thường đăng tuyển hơn 20 bài đăng

Các vị trí công ty thường xuyên tuyển dụng bao gồm

+ Kỹ sư lập trình (Java, React JS, JavaScrip, TypeScript,…)

CHƯƠNG 2: QUÁ TRÌNH THỰC TẬP TẠI CÔNG TY

2.1 NHIỆM VỤ ĐƯỢC GIAO

 Tìm hiểu về quy trình phát triển phần mềm

 Tìm hiểu về cách làm việc nhóm theo mô hình Agile

 Tìm hiểu về công cụ quản lý mã nguồn Git

 Tìm hiểu về ngôn ngữ lập trình JAVA

 Tìm hiểu về Framework Spring

 Tìm hiểu về ngôn ngữ lập trình JavaScript, TypeScrip

 Tìm hiểu về Framework React JS

 Xây dựng ứng dụng tính tiền trong hoạt các hoạt động vui chơi tập thể sử dụng các công nghệ đã được tìm hiểu trước đó

2.2 CÁC CÔNG NGHỆ ĐÃ NGHIÊN CỨU

2.2.1 Công cụ quản lý mã nguồn Git

Hình 3: Các luồng xử lý của Git

Git là một hệ thống VCS (Version Control System) dùng để quản lý và kiểm tra các phiên bản mã nguồn khác nhau trong quá trình phát triển mã nguồn

Git ( /ɡɪt/) là phần mềm quản lý mã nguồn phân tán được phát triển bởi Linus Torvalds vào năm 2005, ban đầu dành cho việc phát triển nhân Linux Hiện nay, Git trở thành một trong các phần mềm quản lý mã nguồn phổ biến nhất Git là phần mềm

mã nguồn mở được phân phối theo giấy phép công cộng GPL2

Git có khả năng chạy trên nhiều hệ điều hành khác nhau như Linux, Windows, Mac OSX

 Thao tác với dữ liệu

- Toàn bộ thông tin dữ liệu đều được lưu trữ trên máy tính của user

- User có thể làm việc mọi lúc mọi nơi kể cả trong môi trường không có internet

- Các thao tác được thực hiện cục bộ

 Tính toàn vẹn

- User có thể thử nghiệm thoải mái mà không lo sợ việc làm ảnh hưởng hoặc thay đổi công việc của mình do các thay đổi đều được thêm vào CSDL của GIT

- Thay đổi được tham chiếu bằng mã băm sử dụng mã hóa SHA-1

 Chúng ta nên dùng git vì những lý do sau:

- Tiết kiệm thời gian

- Khôi phục khi gặp lỗi

- Làm việc offline

- Tạo ra những hoàn tác hữu ích

- Yên tâm

- Làm việc theo cách riêng của bản thân

- Không trộn lẫn các công việc

- Cộng đồng người dùng lớn

2.2.2 Tìm hiểu về ngôn ngữ lập trình JAVA

Ngôn ngữ lập trình Java ban đầu được phát triển bởi Sun Microsystems do James Gosling khởi xướng và phát hành vào năm 1995 (Java 1.0 [J2SE]) Tính đến thời điểm này (tháng 2/2015) phiên bản mới nhất của Java Standard Edition (JSE) là

8 Với ưu thế về đa nền tảng (multi platform) Java càng lúc càng được ứng dụng rộng rãi trên nhiều thiết bị từ máy tính đến mobile và nhiều thiết bị phần cứng khác

Java là ngôn ngữ lập trình hướng đối tượng nên nó cũng có 4 đặc điểm chung củacác ngôn ngữ hướng đối tượng

Hình 4: Các tính chất cơ bản của lập trình hướng đối tượng

 Tính trừu tượng (Abstraction): là tiến trình xác định và nhóm các thuộc tính, các hành động liên quan đến một thực thể đặc thù, xét trong mối tương quan với ứng dụng đang phát triển

 Tính đa hình (Polymorphism): cho phép một phương thức có các tác động khác nhau trên nhiều loại đối tượng khác nhau Với tính đa hình, nếu cùng một phương thức ứng dụng cho các đối tượng thuộc các lớp khác nhau thì nó đưa đến những kết quả khác nhau Bản chất của sự việc chính là phương thức này bao gồm cùng một số lượng các tham số

 Tính kế thừa (Inheritance): Điều này cho phép các đối tượng chia sẻ hay

mở rộng các đặc tính sẵn có mà không phải tiến hành định nghĩa lại

 Tính đóng gói (Encapsulation): là tiến trình che giấu việc thực thi những chi tiết của một đối tượng đối với người sử dụng đối tượng ấy

 Đơn giản: học Java thật sự dễ hơn nhiều so với C/C++, nếu bạn đã quen với các ngôn ngữ lập trình hướng đối tượng thì việc học Java sẽ dễ dàng hơn Java trở nên đơn giản hơn so với C/C++ do đã loại bỏ tính đa kế thừa và phép toán con trỏ từ C/C++

 Bảo mật: Java hỗ trợ bảo mật rất tốt bởi các thuật toán mã hóa như mã hóa một chiều (one way hashing) hoặc mã hóa công cộng (public key)

 Đa luồng: Với tính năng đa luồng Java có thể viết chương trình có thể thực thi nhiều task cùng một lúc Tính năng này thường được xử dụng rất nhiều trong lập trình game

 Linh hoạt: Java được xem là linh hoạt hơn C/C ++ vì nó được thiết kế để thích ứng với nhiều môi trường phát triển

2.2.3 Tìm hiểu về Framework Spring

a) EJB và Spring

Có thể nói rằng Spring Framework ra đời là nhờ sự thành công của EJB EJB (Enterprise JavaBeans) là một kiến trúc phát triển dành cho các ứng dụng doanh nghiệp đòi hỏi tính mạnh mẽ và khả năng mở rộng cao EJB là một thành phần quan trọng của nền tảng Java EE EJB được tạo ra bởi hai gã khổng lồ công nghệ là IBM

và Sun vào những năm cuối thập niên 90 Dưới sự phát triển của hai tập đoàn này, EJB đã trở nên nặng nề hơn Tiêu chuẩn EJB cũng nhanh chóng được thông qua Sau

tất cả, EJB được ca ngợi là giải pháp tốt nhất để xây dựng các ứng dụng phân tán dành cho doanh nghiệp

Nhưng rồi những chỉ trích về chi tiết kỹ thuật của EJB đã tăng nhanh còn hơn

sự nổi tiếng của nó EJB là một framework lớn với độ phức tạp cao Các nhà phát triền khi làm việc với EJB đã nhận ra rằng nó không hoạt động như những gì nó đã

đề ra EJB chỉ tuyệt vời trên bàn giấy, nhưng ra thực tế đó lại là một chuyện khác EJB vẫn được tiếp tục phát triển, dễ sử dụng hơn nhiều so với buổi ban đầu Nhưng những chỉ trích vẫn còn đó, nỗi thất vọng trong cộng đồng Java ngày càng tăng lên, đòi hỏi cần có một giải pháp thay thế

b) Sự ra đời của Spring

Vào năm 2002, Spring Framework phát hành phiên bản đầu tiên bởi Rod Johnson Việc xây dựng các ứng dụng doanh nghiệp trở nên đơn giản và dễ dàng hơn Rod Johnson đã cho xuất bản một cuốn sách được phổ biến rộng rãi có nhan đề "J2EE Development without EJB" Điều này đã cho Spring Framework rất nhiều động lực

để thay thế EJB

Theo đà phát triển đó, Spring đã trở thành framework mã nguồn mở phổ biến nhất để xây dựng các ứng dụng doanh nghiệp Cách tiếp cận thực tế ban đầu của Rod Johnson tiếp tục được phát triển và hướng tới một bộ công cụ hoàn chỉnh dành cho xây dựng các ứng dụng doanh nghiệp Theo một số nguồn, trên 50% các ứng dụng web Java hiện nay đang sử dụng Spring

 Để ngăn chặn sự phức tạp trong phát triển các ứng dụng, Spring Framework thường dựa trên các quan điểm như sau:

 Đơn giản hóa công việc phát triển thông qua việc sử dụng các POJO (Plain Old Java Object)

 Nới lỏng ràng buộc giữa các thành phần thông qua việc sử dụng Dependency Injection

 Giảm thiểu các mã boilerplate thông qua việc sử dụng template và aspect

c) Spring Core

Spring Core là thành phần cốt lõi của Spring Framework Đây chính là nền tảng

để xây dựng nên các thành phần khác trong hệ sinh thái của Spring Framework

Lược đồ dưới đây mô tả mối quan hệ giữa Spring Core với các thành phần khác trong Spring Framework:

Hình 5: Mô hình các thành phần của Spring

d) Dependency Injection (DI)

Dependency Injection (có thể dịch tiêm các thành phần phụ thuộc) là một sức mạnh nổi bật của Spring Framework Trong các phiên bản gốc của EJB người ta không thấy sự xuất hiện của Dependency Injection, nhưng có lẽ do nhận thấy sự thành công từ Spring khi sử dụng Dependency Injection, các phiên bản EJB 3.x đã cung cấp các annotation để thực hiện inject các dependency Dependency Injection là một mẫu thiết kế phần mềm mà các đối tượng phụ thuộc sẽ được inject vào một lớp nào

đó Dependency Injection là một implementation cụ thể của khái niệm Inversion of Control (đảo ngược điều khiển)

Ta sẽ có một ví dụ đơn giản về Dependency Injection như sau: Bạn có một web controller có nhiệm vụ lưu thông tin gửi từ form của người dùng Theo nguyên lý Đơn trách nhiệm nói trên, bạn không muốn lớp controller tương tác với cơ sở dữ liệu Thay vào đó, bạn sẽ sử dụng một lớp service để làm công việc này Như vậy, controller của bạn sẽ chỉ phải xử lý dữ liệu của form (get form data, validate data, ) rồi gọi một phưong thức của lớp service được inject để lưu dữ liệu Controller không cần phải quan tâm hay lo lắng về kết nối cơ sở dữ liệu, pooling hay bảng nào sẽ được update Cũng như service không cần phải biết request có những thông tin gì

e) Các dự án trong Spring Framework

Trên thực tế Spring Framework là một tập hợp của nhiều dự án con Spring Core như chúng ta đã tìm hiểu là nền tảng của các dự án trong Spring Framework Một một

dự án sẽ đảm nhận một chức năng riêng trong việc xây dựng các ứng dụng doanh nghiệp Chúng ta sẽ cùng điểm qua các dự án lớn trong Spring

 Spring MVC

Spring MVC được thiết kế dành cho việc xây dựng các ứng dụng nền tảng web Đây là một dự án chúng ta không thể bỏ qua khi xây dựng các ứng dụng Java web

 Spring Data

Cung cấp một cách tiếp cận đúng đắn để truy cập dữ liệu từ cơ sở dữ liệu quan

hệ, phi quan hệ, map-reduce và thậm chí còn hơn thế nữa

2.2.4 Tìm hiểu về TypeScript

Typescript là một dự án mã nguồn mở được Microsoft phát triển, được xem là một phiên bản nâng cao của Javascript

Hình 6: Cách hoạt động của TypeScript

TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript

Vì sao lại được xem là phiên bản nâng cao của Javascript? Vì nó được bổ sung những tùy chọn kiểu tĩnh và các lớp hướng đối tượng, nó bao hàm luôn ES6(ECMAScript 6 2015) - phiên bản mới nhất của Javascript

TypeScript thêm các namespace, class và module tùy chọn vào JavaScript TypeScript hỗ trợ các công cụ cho các ứng dụng JavaScript quy mô lớn cho bất kỳ trình duyệt nào, cho bất kỳ máy chủ nào, trên bất kỳ hệ điều hành nào

Với những lập trình viên đã quen với Javascript thì chắc hẳn các bạn cũng hiểu được những khó khăn khi lập trình với nó

Tính mở trong việc sử dụng biến gây khó khăn trong việc kiểm soát sự thay đổi, cập nhật

Các ứng dụng phức tạp đòi hỏi sử dụng rất nhiều file source, tách thành nhiều thư mục riêng thì việc đảm bảo tính thống nhất sẽ mất rất nhiều công sức vì phải thao tác bằng tay khá nhiều

Về cơ bản thì Javascript có hổ trợ OOP nhưng khi áp dụng thì lại rất khó khăn bởi cách triển khai code không hề đơn giản so với những ngôn ngữ bậc cao khác như Java, C#, Ruby

Hình 7:Lý do sử dụng TypeScript

Ưu điểm của Typescript:

 Dễ dàng hơn trong phát triển các dự án lớn, được hỗ trợ bởi các Javascript Framwork lớn

 Hỗ trợ OOP mạnh: Hầu hết các cú pháp hướng đối tượng đều được hỗ trợ bởi Typescript như kế thừa, đóng gói, constructor, abstract, interface, implement, override v.v

 Cách tổ chức code rõ ràng hơn bởi được hỗ trợ các kỹ thuật mới nhất và

hỗ trợ lập trình hướng đối tượng: Hỗ trợ cơ chế giúp kiến trúc hệ thống code hướng module, hỗ trợ namespace, giúp xây dựng các hệ thống lớn nơi mà nhiều dev có thể làm việc cùng nhau một cách dễ dàng hơn

 Hỗ trợ các tính năng mới nhất của Javascript

 Một lợi thế của Typescript nữa là mã nguồn mở vì vậy nó miễn phí và có cộng đồng hỗ trợ rất lớn

Typescript đang được sử dụng ở các Framwork Front-end phổ biến như Angular 2, Ionic, React cũng như Nền tảng cho back-end như Node-js bởi những

ưu điểm của mình

2.2.5 Tìm hiểu về Framwork React

2.2.5.1 React là gì ?

Giới thiệu qua là React được Jordan Walke viết ra lần đầu tiên Sau đó được

sử dụng trên trang Newsfeed của Facebook (năm 2011) và Instagram (2012) Đến 05/2013 thì trở thành Open-source và được bảo hộ, phát triển bởi Facebook và Instagram

Ngay trên trang chủ của React (https://facebook.github.io/react/) đã nói rõ React là một thư viện Javascript dùng để xây dựng giao diện người dùng

Có 3 đặc điểm chính để nói về React đó là:

 Just the UI: Chỉ sử dụng React để xây dựng giao diện người dùng, hiểu đơn giản thì trong mô hình MVC, React được coi như là phần V Vì vậy nếu bạn muốn xây dựng một trang web hoàn chỉnh thì không thể dùng mỗi React được, mà nó cần thêm phần M và C nữa

 Virtual DOM: công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng

 Data Flow: React sử dụng luồng dữ liệu 1 chiều giúp kiểm soát dữ liệu

dễ dàng hơn