báo cáo thực tập BPMN workflow engine
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (702.85 KB, 24 trang )
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
BPMN Workflow Engine
Công ty thực tập : Công ty TNHH Hitachi Vantara Việt Nam
Người phụ trách : Phạm Duy Khanh
Thực tập sinh
: Huỳnh Nguyễn Quang Tín
TP. Hồ Chí Minh, tháng 2 năm 2020
[Số trang]
LỜI MỞ ĐẦU
Chúng ta đang sống trong thời kỳ của kỷ nguyên kĩ thuật số gắn liền với những đột phá
về cơng nghệ, trong đó cơng nghệ thơng tin (CNTT) đóng vai trị là cơng nghệ cốt lõi. CNTT
khơng chỉ là một nghành kinh tế mà còn là động lực quan trọng để giúp các nghành khác phát
triển. Trong tương lai, cách sống, làm việc sản xuất của con người sẽ được thay đổi mạnh mẽ.
Công nghệ mới sẽ sắp xếp lại thị trường lao động, nhiều việc làm truyền thống sẽ mất đi, nhiều
công việc mới, cơ hội mới sẽ xuất hiện thay thế.
Chính vì vậy, Việt Nam đã xuất hiện nhiều công ty liên quan đến lĩnh vực cơng nghệ
thơng tin nhằm mục đích phát triển nền cơng nghệ trong nước cũng như trên tồn thế giới. Tại
TP. Hồ Chí Mình, Cơng viên phần mềm Quang Trung (QTSC) được thiết kế theo định hướng
mơ hình đơ thị phần mềm (software city) . Hiện nay, QTSC đã thu hút được 165 doanh nghiệp
CNTT trong đó có 5 doanh nghiệp có quy mơ trên 1.000 người với 250 sản phản, giải pháp.
QTSC đã chính thức trở thành một “software city” phục vụ cho 21.831 người học tập và làm
việc thường xuyên. Hitachi Vantara là một trong những công ty tọa lạc tại QTSC.
Hơn 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 làm việc thực tế trong một mơi trường chun nghiệp, em có dự định là sẽ
thực tập trong khoản thời gian cuối học kì 1 và đầu học kì 2 (năm học 2019-2020) . Vì vậy, em
quyết định chọn Hitachi Vantara - 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.
2
[Số trang]
LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn Công ty THNN Hitachi Vantara Việt Nam đã tạo điều kiện cho
em có cơ hội được thực tập tại cơng ty.
Trong một thời gian hai tháng, nhờ sự chỉ dẫn nhiệt tình của các anh chị và CA (chị
Nguyễn Thị Hồng Nhung), em đã tiếp thu được những kiến thức quan trọng để có thể hiểu và
hồn thành dự án thực tập. Chân thành cảm ơn các anh chị trong công ty đã 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 mentor (anh Phạm Duy Khanh) đã training về kiến thức, kĩ thuật trong
lập trình Java, Angular, 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ũ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.
Huỳnh Nguyễn Quang Tín
TpHCM, ngày 28 tháng 02 năm 2020
3
[Số trang]
NHẬN XÉT CỦA KHOA
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
4
[Số trang]
Mục lục
MỤC LỤC................................................................................................5
CHƯƠNG 1: GIỚI THIÊU CÔNG TY THỰC TẬP.............................................6
1.Giới thiệu công ty TNHH Hitachi Vantara Việt Nam........................................................................................................ 6
CHƯƠNG 2: NỘI DUNG THỰC TẬP............................................................7
1.Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty.................................................................................................... 7
2.Nghiên cứu kỹ thuật..................................................................................................................................................... 7
a.Các cơng cụ làm việc....................................................................................................................................................... 7
b.Tìm hiểu tool kit bpmn.io................................................................................................................................................ 8
c.Lập trình Java Spring Boot............................................................................................................................................... 8
d.Lập trình Angular............................................................................................................................................................ 8
3.Thực hiện project.......................................................................................................................................................... 9
4.Lịch làm việc................................................................................................................................................................. 9
CHƯƠNG 3: CHI TIẾT VỀ DỰ ÁN.............................................................10
1.Giới thiệu về BPMN.................................................................................................................................................... 10
1.1 Các phần tử của BPMN được chia thành 5 loại cơ bản sau:........................................................................................11
1.2 Một số phần tử mơ hình hóa cơ bản của BPMN......................................................................................................... 11
2.Sử dụng Java Sping Boot Framework........................................................................................................................... 15
2.1 Tại sao chọn Java Spring Boot.................................................................................................................................... 15
2.2 Sử dụng thư viện từ Camunda:.................................................................................................................................. 16
2.3 Thực hành.................................................................................................................................................................. 16
3.Sử dụng Angular Famework........................................................................................................................................ 20
3.1 Tại sao là Angular Framework?................................................................................................................................... 20
3.2 Sử dụng thư viện Syncfution...................................................................................................................................... 20
3.3 Thực hành.................................................................................................................................................................. 20
5
[Số trang]
Chương 1: Giới thiêu công ty thực tập
1. Giới thiệu công ty TNHH Hitachi Vantara Việt Nam
Hitachi Vantara Việt Nam (trước đây là Global CyberSoft) là nhà cung cấp giải pháp
CNTT toàn cầu hàng đầu được thành lập tại Califonia vào tháng 7 năm 2000. Cơng
ty thuộc tập đồn Hitachi từ tháng 10 năm 2015 và đổi tên thành Hitachi Vantara
Việt Nam vào tháng 1 năm 2020. Công ty có nhiều năm kinh nghiệm cung cấp các
giải pháp CNTT và dịch vụ tích hợp hệ thống hàng đầu cho khách hàng trên toàn thế
giới trong các lĩnh vực chuyển đổi số, phát triển phần mềm, quản lý doanh nghiệp
ERP, hệ thống nhúng và dịch vụ quản trị.
Công ty mới Hitachi Vantara kết hợp các giải pháp tư vấn hàng đầu về công nghệ số
cùng chuyên môn về các lĩnh vực công nghiệp từ Hitachi Consulting với năng lực
chuyên sâu về công nghệ thông tin từ Hitachi Vantara. Công ty hợp nhất sẽ giúp
khách hàng phát triển các chiến lược và giải pháp số mang tính thực tiễn và có thể
mở rộng, giúp chuyển đổi các quy trình hoạt động, cải thiện trải nghiệm khác hàng
và tạo ra các mô hình kinh doanh mới, thúc đẩy sự đổi mới và tăng trưởng.
6
[Số trang]
Chương 2: Nội dung thực tập
Đợt thực tập với chủ đề “BPMN WorkFlow Engine” nhằm mục đích giúp sinh viên thực
tập được đào tạo kiến thức về BPMN, lập trình với Spring Boot Framework, Angular
Framework, đồng thời rèn luyện những kỹ năng mềm như làm việc nhóm, 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 chun nghiệp.
1. Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty
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 (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 .
- Ngồ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 Hitachi Vantara, q 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. Nghiên cứu kỹ thuật
a. Các công cụ làm việc
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 sau này. Một số phần mềm trong số đó như STS
(Spring Tool Suite) một công cụ phổ biến dành cho Spring Boot, Visual Studio
Code một chương trình soạn thảo văn bản rất hữu ích và phổ biến với các lập trình
viên, bpmn.io một cơng cụ rất hữu ích cho việc vẽ các quy trình nghiệp vụ.
Postman một cơng cụ phổ biến để test API.
Thực hiện :
7
[Số trang]
- 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..
b. Tìm hiểu tool kit bpmn.io
Nội dung :
- Tự học về các kỹ thuật sử dụng BPMN tool. Tìm hiểu, nghiên cứu tài liệu về BPMN
Thực hiện :
-
Tìm hiểu BPMN
Công cụ để thực hiện vẽ BPMN diagram và các thành phần
Kết quả :
-
Hiểu được BPMN là gì
Cách sử dụng tool kit bpmn.io
Các thành phần của một BPMN diagram và cấu trúc file để vẽ một BPMN
diagram
c. Lập trình Java Spring Boot
Nội dung:
Sử dụng thư viện camunda vào spring boot project
-
Nắm được khái niệm cơ bản về camunda.
-
Nắm được cách sử dụng thư viện camuda
Thực hiện :
-
Làm các bài tập thực hành như đọc data từ file cho trước, sử dụng RestFul API
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 và sử dụng camunda.
Đã xuất ra được data định dạng XML
d. Lập trình Angular
Nội dung :
8
[Số trang]
- Hiểu các khái niệm và ứng dụng của angular. Sử dụng BPMN trong angular.
+Định nghĩa về Angular:
-
Angular là một Frameworks Javascripts giúp chúng ta xây dựng ứng dụng Web
đầy đủ tính năng từ phía Client. Angular lần đầu được phát hành bởi Google vào
năm 2010 với phiên bản AngularJS, sau đó đã có chỗ đứng khá vững chắc trong
thời gian dài, phiên bản Angular 2 phát hành năm 2016 mang đến một bước
chuyển mình vượt bậc, một cơng cụ thực sự mạnh mẽ cho việc phát triển ứng
dụng web trên cả nền tảng Mobile và Desktop. Hiện nay chúng ta đang có phiên
bản Angular 9.
-
Tạo ứng dụng Angular:
Được các trainner hướng dẫn tạo ra một ứng dụng cơ bản, cấu hình cho ứng dụng,
cách sử dụng Angular CLI, chạy ứng dụng trên máy ảo trên localhost.
Thực hiện :
-
Tham gia đầy đủ các buổi training.
Tạo ra những ứng dụng cơ bản, áp dụng các khái niệm như: component, modules,
routing, service, pipe… vào trong ứng dụng
Kết quả:
-Đã có thể tạo ra những ứng dụng web cơ bản từ Angular, sau đó chạy trên localhost.
3. Thực hiện project
Sau hai 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ề BPMN, Spring Boot, RestFul API, Angular. Mentor đã hướng dẫn thực tập sinh
áp dụng những kiến thức đã học để thực hiện một demo kết hợp công nghệ Sping boot,
Angular,BPMN.
Chi tiết đồ án sẽ được nói ở phần sau.
4. Lịch làm việc
Tuần
1
Cơng việc
-
Tìm hiểu về công ty, cách
tổ chức của công ty.
Người hướng dẫn
Phạm Duy Khanh
9
Mức độ
Nhận xét của
hoàn
người hướng dẫn
thành
[Số trang]
-
2
3
4
5
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.
- Tìm hiểu BPMN
Phạm Duy Khanh
- Sử dụng tool kit bpmn.io
- Các thành phần của BPMN
- Tìm hiểu thư viện
Phạm Duy Khanh
camunda
- Tích hợp camundata vào
spring boot project
-
6
-
Tạo emty BPMN diagram
Vẽ các element
Dùng Spring Boot để đọc
và xuất data từ file có sẵn.
Tìm hiểu RestFul API
Viết API trả về định dạng
XML
Dùng postman để test API
Tìm hiểu Angular
Framework
Debug bằng Developer
Tool
Sử dụng Angular CLI tạo
project, component…
Phạm Duy Khanh
Phạm Duy Khanh
Phạm Duy Khanh
Phạm Duy Khanh
7
8
-
Demo Angular Project
Sử dụng thư viện để vẽ các
model BPMN
.
Vẽ model lên phía client.
Demo
Viết báo cáo.
Phạm Duy Khanh
Chương 3: Chi tiết về dự án
1. Giới thiệu về BPMN
10
[Số trang]
BPMN là một trong những công cụ quan trọng của BA (Business Analyst). Trong công việc
này phải tiếp cận, lắng nghe nhiều quy trình nghiệp vụ của khách hàng. Sau đó, nhiệm vụ
của BA là tài liệu hóa các quy trình đó. Mỗi khác hàng khác nhau, mỗi quy trình mỗi phức
tạp. Document phải đảm bảo gọn, dễ đọc và đầy đủ nội dung gốc ban đầu. BA cần phải
truyền đạt lại những hiện trạng và yêu cầu của khách hàng cho cả team cùng hiểu. Khi đó
BPMN là phương pháp tối ưu nhất để làm điều này.
1.1 Các phần tử của BPMN được chia thành 5 loại cơ bản sau:
-
Các đối tượng luồng (Flow Objects): là các phần tử đồ họa định nghĩa hành vi của
một Quy trình nghiệp vụ. Có ba đối tượng luồng gồm Sự kiện (Event), Hoạt động
(Activity); Cổng (GateWay)
-
Dữ liệu (Data): được biểu diễn với bốn phần tử là đối tượng dữ liệu (Data Object);
Đầu vào (Data Input); Đầu ra (Data OutPut); kho dữ liệu (Data Store).
-
Đối tượng kết nối (Connecting Object): có bốn cách kết nối các đối tượng luồng
với nhau hoặc với thông tin khác, cụ thể gồm: Luồng tuần tự (Sequence Flow);
Luồng thông điệp (Message Flow); Liên kết Association; Liên kết dữ liệu (Data
Association).
-
Swimlanes: có hai cach thức để nhóm các phần tử mơ hình hóa chính thơng qua
Swinlanes là Pool và Lane, trong đó, Pool là biểu diễn đồ họa của một thành phần
tham gia còn Lane là một phân vùng thuộc một Process (đôi khi thuộc một Pool).
-
Artifacts: được sử dụng để cung cấp thông tin bổ sung về quy trình. Có hai artifact
tiêu chuẩn nhưng nhwuxng nhà mơ hình hóa hay cơng cụ mơ hình hóa có thể tự
do them các Artifact khi cần thiết. Hiện tại, tập artifact gồm: Group và Text
Annotation.
1.2 Một số phần tử mô hình hóa cơ bản của BPMN
STT
Phần tử
Ký hiệu
Tag
1
Sự kiện (Event)
2
Hoạt động
(Activity)
11
[Số trang]
3
Cổng
(GateWay)
4
Luồng tuần tự
targetRef="id Element Target" />
(SequenceFlow
)
Bảng trên là một số thành phần cơ bản. Một BPMN bao gồm nhiều thành phần, mỗi
thành phần sẽ có nhiều loại. Và mỗi loại sẽ biểu diễn, thể hiện một chức năng cụ thể.
Dưới đây là danh sách các loại của một số thành phần.
Các loại Event:
-
Start Event
-
Intemediate Event
-
End Event
Các loại Activity:
-
Send Task
-
Receive Task
-
User Task
-
….
Các loại GateWay:
-
Parallel Gateway
-
Inclusive Gateway
-
Complex Gateway
-
Event based Gateway
Các loại Flow:
-
Sequence Flow
-
Message Flow
12
[Số trang]
-
Association
Hình dưới dây biểu diễn một BPMN Diagram cơ bản:
BPMN trên biễu diễn một quy trình thanh tốn. Bắt đầu bởi StartEvent và kết thúc bằng
EndEvent. Ở giữa là một Activity biểu diễn quá trình “payment”. Sau khi vẽ BPMN Diagram
trên tại bpmn.io (công cụ để vẽ BPMN). Ta có thể biết được diagram trên được vẽ bằng cách
nào bằng cách sử dụng tính năng download của bpmn.io.
Sau khi sử dụng tính năng download. Ta được một file diagram.bpmn được viết cấu trúc
XML như sau:
13
[Số trang]
Phân tích file:
Dịng 1: Cho biết đây là tài liệu được viết theo định dạng XML
Một tài liệu BPMN được bao bằng 1 cặp thẻ lớn <bpmn::definition/> trong thẻ bao gồm các
attribute và prefix cần thiết để có thể sử dụng các cặp thẻ con.
14
[Số trang]
Chú thích:
1 : Trong cặp thẻ <bpmn:process> là nơi để khai báo các element được sử dụng trong diagram.
Như: Event, Activity, Gateway,SequenceFlow,….. Atribute của thẻ này bao gồm id được đặt
theo cú pháp “Process_(random String)” và mặc định isExcutable = “false”.
2: <bpmndi:BPMNDiagram/> cùng cấp với Process. Trong cặp thẻ này là dung để viết cú pháp
vẽ các element được khai báo trên process
3: <bpmn:startEvent id="Event_0ebr2mc"> là thẻ con của process, khẳng định Diagram có sử
dụng 1 element là StartEvent, id là “Event_0ebr2mc”
4: <bpmn:outgoing>Flow_1x3a7tz</bpmn:outgoing>, cặp thẻ là con StartEvent, cặp thẻ này
thơng báo rằng có một flow được nối với StartEvent với hướng ra. Nếu là chiều vào thì sẽ là
“incoming”. Ở giữa cặp thẻ này là “Flow_1x3a7tz”, đây là Id của Flow được nối với cặp thẻ
cha.
5: Một BPMNDiagram sẽ có nhiều Lane, như ví dụ ở trên thì có 1 Lane, được định nghĩa với
cặp thẻ <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_0ain3qc"/>. Tương
tự như thành phần khác. bpmndi:BPMNPlane có id. Thẻ này có thêm một thuộc tính là
bpmnElement, ở đây cho biết Lane được khai báo thuộc process nào. Như ví dụ thì Lane có id
là “BPMNPlane_1” thuộc process có id là “Process_0ain3qc”
6, 8: bpmndi:BPMNShape id="Event_0ebr2mc_di" bpmnElement="Event_0ebr2mc">,
<bpmndi:BPMNEdge id="Flow_1x3a7tz_di" bpmnElement="Flow_1x3a7tz"> 2 cặp thẻ này
dung để vẽ. BPMNShape dung để vẽ các hình dạng như (Event, Activity, Gateway,..).
BPMNEdge dùng để vẽ các flow như (sequenceflow, association,…)
7, 9: Lần lượt là các thẻ con của BPMNShape và BPMNEdge. Các thẻ này cho biết vị trí, và
kích thước để vẽ các element và flow.
2.Sử dụng Java Sping Boot Framework
2.1 Tại sao chọn Java Spring Boot
Camunda là một thư viện mã nguồn mở, dựa trên framework Java. Các thành phần chính được
viết bằng Java và họ tập trung vào việc cung cấp cho các nhà phát triển Java các công cụ cần để thiết kế,
thực hiện và chạy các quy trình nghiệp vụ và quy trình công việc trên JVM. Tuy nhiên, họ cũng muốn
làm cho cơng nghệ cơng cụ xử lý có sẵn cho các nhà phát triển không phải Java.
- Trong dự án này, thực tập sinh chọn Java Spring Boot để thực hiện.
15
[Số trang]
2.2 Sử dụng thư viện từ Camunda:
Camunda cung cấp các interface và các hàm để có thể thao tác với các model trong
BPMN diagram. Trong đó cho phép tạo một diagram và xuất file với định dạng XML.
Ví dụ: Interface StarEvent sẽ có các hàm như setId(), setName(),.. để tạo tạo giá trị cho
thẻ:
<bpmn:startEvent>
2.3 Thực hành
Nội dung:
Viết một API có chức năng đọc data từ file cho trước với định dạng JSON và xuất ra
chuỗi với một tài liệu chuẩn BPMN với định dạng XML.
Các bước làm:
-Tạo 1 project Java Spring Boot, thêm các dependency cần thiết, trong đó có camundabpmn-model.
-Chuẩn bị 1 file với nội dung như sau:
- File trên cho biết rằng, element cần vẽ là “StartEvent”, id là “StartEvent_123cxvxv456”
và name là “start”
16
[Số trang]
- Để tạo một BPMNDiagram thì cần phải định nghĩa 2 hàm như trên.
- Viết 1 API với phương thức GET. API sẽ trả về một tài liệu BPMN Diagram với định
dạng XML
- Dưới dây là code để tạo ra một BPMN Diagram rỗng. Được đặt trong hàm viết API
17
[Số trang]
-Tạo một list lưu các file của Elemnt và thêm file đó vào list
-
Có nhiều cách để đọc và xử lý chuỗi trong file. Dưới đây là một cách:
- Các giá trị của StartEvemt khi đọc từ file sẽ được lưu vào các biến tương ứng.
- Để BPMN có thể vẽ được StartEvent cùng các giá trị đã được tạo ở trên thì cần phải có
thẻ <bpmndi:BPMNShape> để BPMN biết được StartEvent cần được vẽ ở ví trí nào và
kích thước bao nhiêu.
- Tạo một file dùng để lưu vị trí và kích thước. Ví dụ:
- Dữ liệu trên đường dùng cho element có id là “StartEvent_123cxvxv456” được vẽ ở tọa
độ (x,y) : (100.0,100.0) và có chiều rộng là 36.0 , chiều cao là 36.0.
- Dùng cách như trên để đọc file vào lưu giá trị vào các biến tương ứng.
- Để có thể sử dụng các giá trị vừa lưu. Ta tạo bpmnShape
18
[Số trang]
-
Cho biết shape vừa tạo sẽ vẽ element nào.
-
Tạo Bounds để xác định vị trí và kích thước của shape
-
Set các giá trị cho bounds vừa tạo
-
Cuối cùng lưu tài liệu BPMN vào 1 biến kiểu String.
Kết quả:
19
[Số trang]
3.Sử dụng Angular Famework
3.1 Tại sao là Angular Framework?
- Angular làm cho HTML của chúng ta trở nên linh hoạt hơn. Nó làm cho code HTM của chúng
ta trở nên mạnh mẽ hơn với những đặc trưng như điều kiện “if”, vòng lặp “for” và những biến
địa phương “local variables”.
- Angular có cơ chế binding dât mạnh mẽ, chúng ta có thể dễ dàng hiển thị các field từ dât model
của chúng ta, theo dõi những thay đổi cà cập nhật lại từ người dùng. Angular hoạt động theo
thiết kế module (mô đun).
- Ứng dụng của chúng ta sẽ được xây dựng từ những khối module độc lập, làm cho việc xây
dựng sẽ dễ dàng và có thể tái sử dụng nội dung.
- Hơn thế nữa, Angular hỗ trợ việc giao tiếp với những back0end service. Điều này sẽ dễ dàng
cho việc tích hợp những back-end service để việc giải quyết các bài tốn logic nhanh chóng.
- Cuối cùng, Angular là cực kỳ phổ biến với hàng triệu nhà phát triển đang sử dụng nó.
3.2 Sử dụng thư viện Syncfution
-Syncfution Angular UI component (Essential JS 2) là một collection của Angular Framework
dựa trên TypeScript. Nó hỗ trợ cho biên soạn Ahead Of Time (AOT) và Tree-Shaking. Tất cả
các component được phát triển từ nền tảng trở nên lightweight
, responsive, modular và
touch friendly.
3.3 Thực hành
Trước khi làm theo hướng dẫn dưới đây, máy tính phải được cài đặt npm và môi trường nodejs.
- Cài đặt Angular CLI: npm install -g @angular/cli
- Tạo project với Angular CLI: ng new my-app
- Cài đặt syncfution: npm i @syncfusion/ej2-angular-diagrams
20
[Số trang]
- Mở project với Visual Studio Code.
- Import các module cần thiết mà syncfusion/ej2-angular-diagrams cung cấp.
- Đặt selector cho component là “app-root”;
- Đường dẫn đến templateUrl là: “./app.component.html”
- Viết logic code cho class AppComponent
- Như đoạn code trên thể hiện việc vẽ ra một Gateway lọai Exclusive với kích thước 50*50;
- Tại file “app.component.html”:
Như một tài liệu HTML5, các thẻ như <ejs-diagram>, <e-nodes> là do syncfution cung cấp.
21
[Số trang]
-Tại “app.module.ts”:
-Thêm SCSS cho app tại style.scss:
- Cuối cùng dùng terminal hoặc cmd để chạy lệnh: ng serve
- Mở trình duyệt và nhập: http://localhost:4200/
22
[Số trang]
-Kết quả:
-Tham khảo source code tại: />
23
[Số trang]
TÀI LIỆU THAM KHẢO
For Java
/> />For Angular
/>
24
