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