Xây dựng môi trường tích hợp trên web hỗ trợ cho đào tạo, nghiên cứu, và phát triển dự án trong công nghệ phần mềm

Sau hơn hai năm thực hiện đề tài, chúng tôi đã xây dựng được một hệ thống trên nền Web EduCo bao gồm các phân hệ trên với các tính năng như yêu cầu.. vii DANH MỤC CÁC KÝ HIỆU, CÁC CHỮ V

BÁO CÁO TỔNG KẾT

Tên đề tài: Xây dựng môi trường tích hợp trên Web hỗ trợ cho đào tạo,

nghiên cứu, và phát triển dự án trong công nghệ phần mềm

DANH MỤC TÀI LIỆU ĐÍNH KÈM

1 Báo cáo tóm tắt

2 Thuyết minh đề tài đã được phê duyệt

i

Với sự thay đổi nhanh chóng của kỹ thuật và công nghệ, việc đào tạo những kỹ sư công nghệ một cách hiệu quả nhằm theo kịp với sự thay đổi này càng trở nên cấp bách không chỉ ở Việt Nam mà trên cả thế giới Kỹ sư ra trường phải có kiến thức cơ bản, kỹ năng và kinh nghiệm thực tế để có khả năng nắm bắt, áp dụng công nghệ, phương pháp làm việc

và công cụ để giải quyết những vấn đề mới trong tương lai Đặc biệt, kỹ năng và kinh nghiệm tương tác nhóm trong những dự án phân tán với các thành viên ở những nới khác nhau sẽ quyết định sự thành công của kỹ sư công nghệ phần mềm

Vì vậy, nội dung chương trình đào tạo cũng như các công cụ hỗ trợ phải không ngừng được cập nhật và xây dựng mới Điều này bắt buộc các giảng viên đại học phải tìm ra và áp dụng các phương pháp tiếp cận hiện đại, và đặc biệt là tận dụng và phát huy vai trò của môi trường Web

Trong đề án này, chúng tôi nghiên cứu và phát triển môi trường tích hợp trên nền Web cho sinh viên học các môn công nghệ phần mềm phục vụ cho đào tạo, nghiên cứu, và phát triển dự án phần mềm Môi trường này có tên là EduCo Chúng tôi sẽ ứng dụng EduCo vào việc giảng dạy và thực hiện các đề án môn học Từ đó, chúng tôi sẽ nghiên cứu tính hiệu quả và đưa ra bài học kinh nghiệm cho việc giảng dạy và làm việc trên EduCo

Môi trường tích hợp EduCo sẽ có các phân hệ sau:

• Integrated Development Environment (IDEOL): là môi trường phát triển tích hợp gồm nhiều công cụ hỗ trợ

chính như soạn thảo, biên dịch, thực thi chương trình, và gỡ lỗi

• Repository & Version Control (xây dựng trên nền tảng framework Git): phân hệ quản lý tập tin, thư mục và

phiên bản Đây là phân hệ quản lý dữ liệu và phiên bản dữ liệu cho các phân hệ khác như IDEOL, TeamSpace, Wiki, và CoUML (Design)

• Project Management (TeamSpace): phân hệ quản lý nhóm và đề án môn học, gồm các chức năng chính như thành

lập nhóm, lên kế hoạch, đưa ra mục tiêu và thời khóa biểu, phân công công việc, và theo dõi tiến độ thực hiện công việc của đề án

• Wiki: phân hệ cho phép các nhóm đề án soạn thảo tài liệu, tương tác với khách hàng, và đặc biệt là thu thập yêu

cầu phần mềm

• Design (CoUML): phân hệ cho phép các nhóm đề án thiết kế phần mềm theo UML trên môi trường Web và nộp

bản thiết kế theo yêu cầu của giáo viên Phân hệ này còn hỗ trợ tương tác giữa những người thiết kế và những người liên quan đến đề án như khách hàng và giáo viên

Giai đoạn 1 của đề án (từ 1/3/2013 đến 1/3/2014) chúng tôi chủ yếu tập trung phát triển hệ thống phần mềm với các chức năng và tính năng cần thiết

Giai đoạn 2 của đề án (từ 1/3/2014 đến 1/3/2015, gia hạn đến 1/9/2015), chúng tôi đã tập trung tích hợp các phân hệ, đánh giá tính hiệu quả, khả năng hữu dụng, và vai trò của hệ thống đối với việc dạy và học các môn công nghệ thông tin

Sau hơn hai năm thực hiện đề tài, chúng tôi đã xây dựng được một hệ thống trên nền Web (EduCo) bao gồm các phân

hệ trên với các tính năng như yêu cầu Hệ thống đã được đăng ký quyền tác giả với Cục Sở Hữu Trí Tuệ Chúng tôi đã thử nghiệm hệ thống EduCo cho các môn học Kỹ thuật lập trình và Lập trình hướng đối tượng thuộc khoa CNTT, ĐH KHTN Kết quả của các thí nghiệm này bao gồm ba bài báo đã được công bố trên các hội nghị quốc tế uy tín (TALE

2013, FIE 2014, iiWAS 2014) và một bài báo công bố trên tạp chí ISI Computer Applications in Engineering Education Qua đề tài này, chúng tôi đã góp phần hướng dẫn 14 sinh viên đại học và 01 học viên cao thực hiện các đề tài liên quan,

06 học viên cao học trao đổi từ trường đại học ENSTA Bretagne, Pháp

Đối chiếu với đề cương của đề án, chúng tôi đã hoàn thành toàn bộ dự kiến kế hoạch đã đề ra, tuy trễ 1 năm so với kế hoạch ban đầu Nguyên nhân chính của việc chậm trễ này là do chúng tôi chờ xét duyệt bài báo trên tạp chí

Trong báo cáo này, chúng tôi tổng hợp và tóm tắt kết quả nhóm đề tài đã hoàn thành trong cả hai giai đoạn của dự án

ii

The demands for education and training of software engineers have become vital in both Vietnam and the global world

to serve rapid technology developments in the information age The graduating engineers are required to be equipped with essential background knowledge, skills and experience in the field to easily adapt and apply new tools, techniques

or approaches to solve upcoming problems Moreover, skills and experience in group activities under distributed contexts are now indispensable to the success of a software engineer

geographically-Under such an situation, curriculums and training programs, along with their supporting tools, are constantly updated

or newly-built University faculties therefore must acquire and utilize modern pedagogical approaches, especially in taking the advantages of the World Wide Web

In this research project, we study and develop a Web-based integrated ecosystem called EduCo that provide multi-level supports for software engineering education, training, development and research We make use of EduCo for education and training in project-based coursework, then study its effectiveness in such contexts and provide practical insights for lecturing and working on the ecosystem

EduCo is comprised of the following sub-systems:

• Integrated Development Environment (IDEOL): an environment supporting software source code development,

with multiple tools, including source-code editing, build automation, program execution, and debugger

• Repository & Version Control system (Git-based): a sub-system for managing data and data versions used by

other sub-systems

• Project Management system (TeamSpace): a sub-system for team and project coursework management, provides

assistance for team formation, goal identification and planning, task assignment and scheduling, and progress tracking

• Wiki: a sub-system that allows collaborative documentation creation, customer interaction, and especially

requirements elicitation

• Design tool (CoUML): a sub-system that aids teams on software design and submission online Design artifacts are

managed by the Repository & Version Control sub-system and can be embedded in Wiki pages The sub-system also supports collaboration among designers and stakeholders, e.g customers and lecturers UML is used as the main modeling language

Phase 1 of this research project (from March 01, 2013 to March 01, 2014) focuses on developing the sub-systems with the required functionalities

Phase 2 of this research project (from March 01, 2014 to March 01, 2015, extended to September 01, 2015) focuses on integrating the sub-systems, evaluating EduCo’s effectiveness and usefulness, and analyzing its roles in educating and learning software engineering courses

After over 2 years of research, we have developed a Web-based system (EduCo) with the aforementioned sub-systems, with one exception that the Design tool is being completed This system has been registered with the National Office of Intellectual Property We have conducted preliminary experiments of the IDEOL sub-system for the Art of Programming course and Object-oriented Programming course at the Faculty of Information Technology, University of Science Results of the experiments have been published in the proceedings of TALE 2013 conference, FIE 2014 conference, iiWAS 2014 conference and in the Journal of Computer Applications in Engineering Education

Via this project, we have supervised 14 bachelor students and 01 graduate student to complete their graduation theses on related topics and 06 masters’ student interns exchanged from ENSTA Bretagne, France We completed all objectives set forth in the proposal, with one exception that the project has been delayed for one year The main reason for the delay

is the prolong process of publishing our ISI-indexed journal paper

In this report, we summarize the results obtained during the whole project

iii

Chúng tôi trân trọng gửi lời cảm ơn đến Đại học Quốc gia Tp Hồ Chí Minh đã hỗ trợ kinh phí thực hiện

đề tài này, trường Đại học Khoa học tự nhiên và khoa Công nghệ thông tin đã tạo điều kiện cơ sở vật chất và hỗ trợ quản lý trong quá trình thực hiện đề tài Chúng tôi cũng xin cảm ơn các đồng nghiệp tại khoa Công nghệ thông tin đã đóng góp những ý kiến quý báu cho đề tài

Bên cạnh đó, chúng tôi xin ghi nhận sự hợp tác của các bạn sinh viên/học viên cao học Đinh Văn Hoàng, Nguyễn Đức Xuân, Đỗ Nguyên Kha, Nguyễn Đình Vĩnh An, Ngô Ngọc Trường Hân, Võ Anh Duy, Lê Huy Chương, Lê Nguyễn Thiện Ân, Dương Ngọc Duy, Phan Quang Hiếu, Lê Ngọc Thạch, Dương Văn Quang, Nguyễn Trang Đài, Nguyễn Trí Trung, Nguyễn Ngọc Trung Duy, Trịnh Minh Quang, Nguyễn Ngô Bình An, Châu Hớn Cường và Vũ Duy Quân đã tham gia xây dựng các phân hệ của đề tài

Chúng tôi đã nhận được rất nhiều sự giúp đỡ cũng như động viên tinh thần để thực hiện đề tài Chúng tôi rất trân trọng những sự đóng góp này và hy vọng sẽ tiếp tục sự hỗ trợ để có thể hoàn thành tốt đề tài

iv

BÁO CÁO TỔNG KẾT 1

DANH MỤC TÀI LIỆU ĐÍNH KÈM 1

TÓM TẮT I ABSTRACT II LỜI CẢM ƠN III MỤC LỤC IV DANH MỤC CÁC KÝ HIỆU, CÁC CHỮ VIẾT TẮT VII DANH MỤC BẢNG IX DANH MỤC HÌNH X CHƯƠNG 1 TỔNG QUAN ĐỀ TÀI 1

1.1 Kế hoạch và tiến độ thực hiện đề tài 1

1.2 Các yêu cầu chức năng và phi chức năng của hệ thống 5

1.2.1 Các yêu cầu chung của hệ thống nền tảng (EduCo Framework) 5

1.2.2 Các yêu cầu của phân hệ TeamSpace 6

1.2.3 Các yêu cầu của phân hệ CoUML 8

1.2.5 Các yêu cầu của phân hệ IDEOL 9

CHƯƠNG 2 HỆ THỐNG NỀN TẢNG 12

2.1 Phân tích yêu cầu 12

2.2 Thiết kế hệ thống 16

2.2.1 Kiến trúc tổng quan 17

v

2.2.2 Phân hệ quản lý tập tin và phiên bản 19

2.3 Kết quả cài đặt 23

CHƯƠNG 3 PHÂN HỆ WEB IDE 25

3.1 Tổng quan 25

3.2 Thiết kế phân hệ 30

3.3 Các kĩ thuật cộng tác đồng thời 33

3.4 Cài đặt 34

3.4.1 Cài đặt phân hệ máy chủ 34

3.4.2 Cài đặt phân hệ trình duyệt 35

3.4.3 Mô hình gỡ lỗi cộng tác máy chủ - trình duyệt 36

3.5 Kết quả đạt được 39

CHƯƠNG 4 PHÂN HỆ QUẢN LÝ ĐỀ ÁN TEAMSPACE 42

4.1 Phân tích yêu cầu 42

4.1.1 Mô hình Use-Case 43

4.2 Thiết kế hệ thống 46

4.2.1 Mô hình triển khai 46

4.2.2 Kiến trúc tổng quan 47

4.2.3 Các package chính trong hệ thống 49

4.2.4 Các lớp chính trong domain model 49

4.2.5 Quản lý nhóm và dự án 50

4.2.6 Quản lý work item và tương tác trong nhóm 51

4.2.7 Cơ chế bảo mật 53

4.3 Kết quả cài đặt 54

CHƯƠNG 5 CÔNG CỤ THIẾT KẾ PHẦN MỀM 62

5.1 Phân tích yêu cầu 62

5.2 Thiết kế hệ thống 63

vi

5.3 Thiết kế hệ thống 67

5.3.1 Sơ đồ lớp 67

5.3.2 Thiết kế giao diện 70

5.4 Cài đặt phân hệ thiết kế 73

CHƯƠNG 6 THỬ NGHIỆM VÀ ĐÁNH GIÁ PHÂN HỆ IDEOL 77

6.1 Ứng dụng IDEOL trong dạy và học lập trình 77

6.2 Thí nghiệm Nhập môn Lập trình và Kỹ thuật Lập trình 77

6.2.1 Thí nghiệm Nhập môn Lập trình 78

6.2.2 Thí nghiệm Kỹ thuật lập trình 79

6.3 Thí nghiệm Phương pháp Lập trình Hướng đối tượng 79

6.3.1 Đặt giả thuyết 79

6.3.2 Thiết kế đồ án lập trình OOP 80

6.3.3 Thiết kế thí nghiệm 81

6.3.4 Độ đo 82

6.3.5 Kết quả 82

CHƯƠNG 7 KẾT LUẬN VÀ KIẾN NGHỊ 84

vii

DANH MỤC CÁC KÝ HIỆU, CÁC CHỮ VIẾT TẮT

1 Ajax Asynchronous

JavaScript and XML

Kỹ thuật cho phép trang web tải dữ liệu bằng JavaScript bất đồng bộ không cần tải lại toàn bộ trang

2

CSS Cascading Style

Sheets

Ngôn ngữ mô tả cách thức trình bày

và hiển thị của các tài liệu viết bằng các ngôn ngữ đánh dấu như HTML

Model

Mô hình biểu diễn và tương tác với các đối tượng trong các tài liệu HTML, XHTML, XML

4 HTML HyperText Markup

Language

Ngôn ngữ đánh dấu siêu văn bản – được dùng để tạo ra các thành phần cơ bản của một trang Web

Môi trường phát triển tích hợp – hệ thống tổng hợp nhiều công cụ hỗ trợ phát triển phần mềm

7 JSON JavaScript Object

13 Test Case

Mô tả một đầu vào, hành động hay sự kiện và một kết quả mong đợi nhằm xác định một chức năng của ứng dụng phần mềm có hoạt động đúng hay không

14 Thread Tiểu trình hoặc luồng thực thi trong

các ứng dụng đa luồng

15 XML eXtensible Markup

Language

Một ngôn ngữ đánh dấu định dạng dữ liệu văn bản có thể dễ dàng được mở rộng

ix

BẢNG 3.1 VAI TRÒ CỦA TRÌNH DUYỆT VÀ MÁY CHỦ 27

BẢNG 5.1 KẾT QUẢ CÀI ĐẶT PHÂN HỆ THIẾT KẾ 76

BẢNG 6.1 KẾT QUẢ CÁC CÁC GIẢ THUYẾT LIÊN QUAN ĐẾN ĐIỂM SỐ 83

BẢNG 6.2 KẾT QUẢ CÁC CÁC GIẢ THUYẾT LIÊN QUAN ĐẾN SỰ HÀI LÒNG 83

x

HÌNH 2.1 USE CASE DIAGRAM - CÁC CHỨC NĂNG CHÍNH CỦA HỆ THỐNG 14

HÌNH 2.2 USE CASES DIAGRAM - CÁC CHỨC NĂNG MẠNG XÃ HỘI CỦA HỆ THỐNG 15

HÌNH 2.3 USE CASE DIAGRAM - CÁC CHỨC NĂNG BÊN TRONG GITLAB 16

HÌNH 2.4 SƠ ĐỒ KIẾN TRÚC HỆ THỐNG NỀN EDUCO FRAMEWORK 18

HÌNH 2.5 KIẾN TRÚC HOẠT ĐỘNG CỦA SUBVERSION 20

HÌNH 2.6 KIẾN TRÚC HOẠT ĐỘNG CỦA GIT 21

HÌNH 2.7 SEQUENCE DIAGRAM MÔ TẢ QUÁ TRÌNH TƯƠNG TÁC VỚI GITLAB 22

HÌNH 2.8 DASHBOARD VỚI CÁC CHỨC NĂNG SOCIAL 24

HÌNH 3.1 TỔNG QUAN CÔNG CỤ 26

HÌNH 3.2 TỔNG QUAN KIẾN TRÚC HỆ THỐNG 29

HÌNH 3.1 EVENTEMITTER 29

HÌNH 3.4 CÁC THÀNH PHẦN CỦA PHÂN HỆ MÁY CHỦ 31

HÌNH 3.5 CÁC THÀNH PHẦN PHÍA TRÌNH DUYỆT 32

HÌNH 3.6 CÁC THÀNH PHẦN PHÂN HỆ MÁY CHỦ 34

HÌNH 3.7 CÁC THÀNH PHẦN PHÂN HỆ TRÌNH DUYỆT 35

HÌNH 3.8 MÔ HÌNH GỠ LỖI CỘNG TÁC 36

xi

HÌNH 3.8 CÁC LỚP TRONG MÔ HÌNH GỠ LỖI MÁY CHỦ 37

HÌNH 3.9 CÁC LỚP TRONG MÔ HÌNH GỠ LỖI PHÍA TRÌNH DUYỆT 38

HÌNH 3.10 GIAO DIỆN IDEOL 40

HÌNH 3.11 GIAO DIỆN LẬP TRÌNH GỠ LỖI CỘNG TÁC TRÊN IDEOL 41

HÌNH 4.1 MÔ HÌNH USE CASE TRONG NHÓM CHỨC NĂNG QUẢN LÝ TÀI KHOẢN 44

HÌNH 4.2 MÔ HÌNH USE CASE TRONG NHÓM CHỨC NĂNG QUẢN LÝ DỰ ÁN 45

HÌNH 4.3 MÔ HÌNH USE CASE TRONG NHÓM CHỨC NĂNG QUẢN LÝ HOẠT ĐỘNG TRONG DỰ ÁN 46

HÌNH 4.4 MÔ HÌNH TRIỂN KHAI 47

HÌNH 4.5 KIẾN TRÚC TỔNG QUAN 47

HÌNH 4.6 MÔ HÌNH MVC 48

HÌNH 4.7 DATA MAPPER PATTERN 48

HÌNH 4.8 CÁC LỚP CHÍNH LIÊN QUAN TỚI VIỆC QUẢN LÝ NHÓM VÀ DỰ ÁN 51

HÌNH 4.9 CÁC LỚP CHÍNH LIÊN QUAN TỚI QUẢN LÝ WORK ITEM VÀ TƯƠNG TÁC 53

HÌNH 4.10 MÔ HÌNH VAI TRÒ CỦA NGƯỜI DÙNG TRONG DỰ ÁN 54

HÌNH 4.11 CẤU TRÚC CHUNG CỦA GIAO DIỆN 55

HÌNH 4.12 GIAO DIỆN ADMIN 56

HÌNH 4.13 GIAO DIỆN PROJECT 57

xii

HÌNH 4.14 GIAO DIỆN NHÀ NGƯỜI DÙNG 58

HÌNH 4.15 MÀN HÌNH LỊCH CÁ NHÂN 59

HÌNH 4.16 MÀN HÌNH LỊCH DỰ ÁN 60

HÌNH 4.17 MÀN HÌNH HIỂN THỊ WORK ITEM 61

HÌNH 5.1 SƠ ĐỒ USE-CASE 63

HÌNH 5.2 KIẾN TRÚC TỔNG QUAN CỦA PHÂN HỆ THIẾT KẾ 64

HÌNH 5.1 LƯỢC ĐỒ LỚP MÔ TẢ CÁC THÀNH PHẦN Ở SERVER 67

HÌNH 5.2 LƯỢC ĐỒ LỚP MÔ TẢ CÁC THÀNH PHẦN ĐẢM NHIỆM VAI TRÒ ĐỒ HỌA 68

HÌNH 5.3 LƯỢC ĐỒ LỚP MÔ TẢ CÁC THÀNH PHẦN ĐẢM NHIỆM VAI TRÒ QUẢN LÝ 69 HÌNH 5.4 THIẾT KẾ GIAO DIỆN CHÍNH CỦA HỆ THỐNG 70

HÌNH 5.5 THIẾT KẾ GIAO DIỆN CHỨC NĂNG VẼ CÁC LƯỢC ĐỒ 71

HÌNH 5.6 THIẾT KẾ GIAO DIỆN CHỨC NĂNG GHI CHÚ 72

HÌNH 5.7 THIẾT KẾ GIAO DIỆN CHỨC NĂNG CHAT (1) 72

HÌNH 5.8 THIẾT KẾ GIAO DIỆN CHỨC NĂNG CHAT (2) 73

HÌNH 5.8 MÀN HÌNH CỦA CHỨC NĂNG THIẾT KẾ LƯỢC ĐỒ LỚP 74

HÌNH 5.9 MÀN HÌNH CỦA CHỨC NĂNG THIẾT KẾ LƯỢC ĐỒ USE CASE 75

HÌNH 6.1 TRẮC ĐỒ LÀM VIỆC CỦA SINH VIÊN 83

1

CHƯƠNG 1 TỔNG QUAN ĐỀ TÀI

Trong chương này chúng tôi tóm tắt kế hoạch và tiến độ của đề tài, tóm tắt các tính năng của từng phân

hệ trong hệ thống, và trình bày kiến trúc hệ thống mà chúng tôi đã xây dựng

Bên dưới là bảng mô tả các mục tiêu, công việc, thời gian thực hiện và tiến độ thực hiện của mỗi mục tiêu Như thể hiện qua cột Thời gian, nhiều mục tiêu và công việc được thực hiện song song do chúng tôi tổ chức nhóm thực hiện đề tài thành nhiều nhóm nhỏ để thực hiện

thống

3/2013-5/2013 Đã hoàn thành

1.1 lập kế hoạch chi tiết

1.2 phân tích, thu thập và soạn thảo

phát triển tích hợp trên nền Web

(IDEOL)

3/2013-12/2013 Đã hoàn thành

2.1 lập kế hoạch chi tiết phát triển phân

hệ

2.2 kiểm thử và sửa lỗi hệ thống Web

IDE hiện tại

2.3 phân tích, thu thập và soạn thảo

yêu cầu chức năng (cho phân hệ cải

và phiên bản (Repository and

Version Control)

3/2013-12/2013 Đã hoàn thành Phân hệ này

được xây dựng dựa trên nền tảng Git Chi tiết về phân hệ này được mô tả trong Chương 2

3.1 lập kế hoạch chi tiết phát triển phân

hệ

2

3.2 phân tích, thu thập và soạn thảo

yêu cầu chức năng

Chi tiết về phân hệ này được

mô tả trong Chương 3

4.1 lập kế hoạch chi tiết phát triển phân

hệ

4.2 phân tích, thu thập và soạn thảo

yêu cầu chức năng

4.6 thử nghiệm, đánh giá Đang tiến hành

về phân hệ này được mô tả trong Chương 2

5.1 lập kế hoạch chi tiết phát triển phân

hệ

Đã hoàn thành Một phần của

phân hệ này được thực hiện dưới dạng tiểu luận tốt nghiệp đại học thực hiện bởi hai sinh viên Ngô Ngọc Trường Hân và

Võ Anh Duy trong đề tài

“Framework cho môi trường cộng tác hỗ trợ các đề án môn học trên nền Web” tháng 6/2013

5.2 phân tích, thu thập và soạn thảo

yêu cầu chức năng

3

mềm (CoUML)

3/2013-3/2015 Đã hoàn thành Chi tiết về phân

hệ này được mô tả trong Chương 4

6.1 lập kế hoạch chi tiết phát triển phân

hệ

Đã hoàn thành Một phần của

phân hệ này được thực hiện dưới dạng tiểu luận tốt nghiệp đại học thực hiện bởi hai sinh viên Lê Huy Chương và Lê Nguyễn Thiện Ân hoàn thành

đề tài “Xây dựng và phát triển ứng dụng hỗ trợ thiết kế phần mềm trên môi trường web” tháng 6/2013

6.2 phân tích, thu thập và soạn thảo

yêu cầu chức năng

7.1 Phát triển chức năng cơ bản cho

môi trường: đăng nhập, đăng xuất,

trang chủ, v.v…

7.2 cài đặt các phân hệ trên một môi

7.3 kiểm thử và báo cáo

Chúng tôi đã thực hiện 3 thí nghiệm trên phân hệ Web IDE (IDEOL) với sự tham gia của

255 sinh viên của hai lớp Kỹ thuật lập trình và lớp Lập trình hướng đối tượng thuộc khoa CNTT, ĐH Khoa học tự nhiên 8.1 viết tài liệu hướng dẫn sử dụng hệ

8.5 phân tích dữ liệu, đánh giá và viết

báo cáo khoa học

nghị quốc tế và 01 bài báo trên tạp chí ISI

Đã công bố một bài báo khoa học trên hội nghị 2013 IEEE International Conference on Teaching, Assessment and Learning for Engineering (TALE 2013)

Đã công bố một bài báo khoa học trên hội nghị 2014 IEEE Frontiers in Education Conference (FIE 2014)

Đã công bố một bài báo khoa học trên hội nghị 2014 ACM International Conference on Information Integration and Web-based Applications & Services (iiWAS 2014)

Đã công bố một bài báo khoa học trên tạp chí ISI Computer Applications In Engineering Education

5

1.2.1 Các yêu cầu chung của hệ thống nền tảng (EduCo Framework)

Độ ưu tiên

một hệ quản lý phiên bản (software configuration management)

Hệ thống cho phép người dùng lưu trữ tập

tin (upload và download)

Người dùng có thể upload và download tập tin từ hệ thống

Cao

Hệ thống cho phép check in và check out

tập tin từ các phân hệ khác như TeamSpace,

Hệ thống cho phép người dùng truy cập vào

tập tin và làm việc trên tập tin đồng thời

Cao

Hệ thống cho phép người dùng tạo nhánh

và liên kết nhánh (branching và merging)

Cao

Wiki

Hệ thống cho phép tạo một trang HTML

theo dạng trang wiki

Mỗi trang wiki có nội dung chính, tên người tạo mới, cập nhật, ngày tháng thay đổi

Cao

Hệ thống cho phép tổ chức các trang wiki Cao

Hệ thống cho phép người dùng comment

trên trang wiki

Cao

Hệ thống cho phép xóa, sửa một trang wiki

đã tạo bởi bất cứ thành viên nào trong nhóm

Cao

Các chức năng của mạng xã hội

Hệ thống cho phép người dùng tạo cập

nhận, chỉnh sửa, và xoa cập nhật của mình

Cao

Hệ thống hiển thị cập nhật của người dùng

và của các thành viên trong nhóm

Cao

1.2.2 Các yêu cầu của phân hệ TeamSpace

Độ ưu tiên Các chức năng quản lý tài khoản người

dùng

Hệ thống cho phép admin thêm mới, chỉnh

sửa, và xóa tài khoản người dùng

Admin có quyền thêm, xóa, sửa tài khoản (user account)

Cao

Hệ thống cho phép admin chỉnh sửa quyền

của tài khoản người dùng

Tài khoản có quyền mặc định ban đầu, admin có thể chỉnh sửa quyền cho các tài khoản

Hệ thống cho phép người dùng tạo mới,

xem, xóa, sửa một sự kiện (event) trong lịch

cá nhân của mình

Các event được hiển thị trên lịch cá nhân cũng như lịch của cả nhóm

Trung bình

7

Hệ thống cho phép hiển thị danh sách các

đề án mà một thành viên đang tham gia

Thành viên đang đăng nhập

có thể xem danh sách các đề

án mình đang tham gia

Cao

Hệ thống cho phép người dùng xem các

công việc được phân công

Các công việc chưa hoàn thành

Cao

Quản lý đề án

Hệ thống cho phép thêm mới, xem, chỉnh

sửa, và xóa đề án (project)

Thông tin chung của đề án bao gồm tên, mô tả, lớp học liên quan, ngày bắt đầu, ngày kết thúc

Cao

Hệ thống cho phép thêm và xóa một thành

viên (tài khoản) đã tồn tại vào đề án

Hệ thống cho phép admin thêm mới, xóa,

sử lớp học Mỗi lớp có nhiều đề án, mỗi đề án có nhiều sinh viên

Hệ thống cho phép thêm mới, xóa, sửa, và

xem chi tiết một tác vụ

Các thành viên trong nhóm đều có quyền xem tất cả các tác vụ mà đề án đang có

Một tác vụ được phân công vào một iteration trong đề án

Hệ thống cho phép attach hoặc xóa một

hoặc nhiều tập tin vào/khỏi một tác vụ

Trung bình

Hệ thống cho phép download tập tin đã

được attach vào tác vụ

Trung bình

Hệ thống cho phép đăng ký (subscribe) để

theo dõi tác vụ Khi người dùng được subscribe thì bất cứ những

thay đổi trên tác vụ thì người dùng đều nhận được thông báo

Trung bình

Hệ thống có giao diện người dùng chạy trên

FireFox và Chrome

Cao

1.2.3 Các yêu cầu của phân hệ CoUML

Độ ưu tiên Quản lý mô hình

Hệ thống cho phép người dùng tạo class

diagram theo ngôn ngữ UML Người dùng có thể tạo mới, xem, xóa, chỉnh sửa các đối

tượng trong diagram bao gồm các ký hiệu (notation), quan hệ (relationship), các quy tắc, ràng buộc, v.v của class diagram

Cao

Hệ thống cho phép người dùng tạo use-case

diagram

Cao

Hệ thống cho phép nhiều người dùng cùng

xem một diagram trong cùng một thời điểm Nhiều người xem cùng lúc nhưng chỉ có một người có

quy chỉnh sửa (edit)

Cao

Hệ thống cho phép tổ chức các diagram

trong các thư mục Thư mục được tổ chức theo cấu trúc cây: một thư mục có

thể có nhiều thư mục con và nhiều diagram

Cao

Hệ thống cho phép comment trên các đối

tượng (diagram, notation, v.v )

Cao

Hệ thống hiển thị các comment trên các đối

tượng

Cao

Hệ thống cho phép người dùng mở/truy

xuất các mô hình đang có của đề án

Cao

Hệ thống cho phép in các diagram ra dạng

PDF hay hình ảnh

Cao

Hệ thông lưu trữ các mô hình trên

Repository chung của đề án Các phiên bản phải được quản lý trên Repository

Cao

1.2.5 Các yêu cầu của phân hệ IDEOL

Độ ưu tiên

Hệ thống quản lý tập tin mã nguồn Cho tạo tập hợp các tập tin

dự án Hỗ trợ kết nối với hệ thống phiên bản (trong hệ thống nền tảng)

Cao

10

Soạn thảo mã nguồn

Trình xem mã nguồn có hỗ trợ trang trí mã

nguồn của nhiều ngôn ngữ

Cao

Soạn thảo mã nguồn đồng bộ Nhiều người dùng có thể

cùng làm việc trên một đối tượng tập tin mã

Cấu hình biên dịch và sử dụng thư viện

Trình gỡ lỗi tương tác có giao diện đồ họa Cao

11

Liên kết người dùng trong trình thảo luận Cao

Liên kết đến các tập tin từ các bộ phận khác Cao

Hệ thống đồng bộ và thông báo

Đồng bộ các phiên làm việc trực tuyến Đồng bộ các thay đổi giữa

nhiều người dùng làm việc song song trực tuyến Kiểm soát các tranh chấp về quyền thao tác đồng thời trên các tài nguyên

Cao

Theo dõi lịch sử làm việc Theo dõi và thông báo các

hoạt động của các người dùng làm việc song song trực tuyến

Trung bình

Thông báo các thay đổi Thông báo các thay đổi về

các thao tác trên dự án, về thảo luận Tổng hợp và gửi đến những người dùng liên quan

Cao

Liệt kê tình trạng tổng quát Liệt kê thông tin tổng quát

trên trang danh mục dự án

Trung bình

liên kết các tài nguyên giữa các thành viên và nhóm Kết nối với hệ thống nền tảng

Trung bình

Hệ thống hỗ trợ cấu hình

Cấu hình giao diện môi trường phát triển Thấp

Phân hệ nền tảng có thể truy cập tại địa chỉ http://dev.ideol.net/

Hệ thống nền tảng EduCo Framework là một hệ thống cung cấp các dịch vụ cơ bản cho các phân hệ của EduCo trong toàn bộ hệ thống Hệ thống này bao gồm các dịch vụ căn bản sau:

• Tổ chức và quản lý dữ liệu

• Lưu trữ và quản lý tập tin và phiên bản (Repository and Version Control) Bản thân các dịch

vụ này là một phân hệ trong đề tài

• Soạn thảo, cập nhật, chia sẻ, và tổ chức văn bản, tài liệu Các dịch vụ này thuộc phân hệ Wiki

• Các dịch vụ phổ biến của một mạng xã hội (chia sẻ trạng thái, phản hồi, thảo luận, v.v…)

Hệ thống cuối cùng sẽ là một chỉnh thể bao gồm nhiều thành phần tích hợp lại với nhau, đảm bảo toàn

bộ chức năng của một môi trường phát triển cộng tác Đồng thời sẽ đẩy mạnh tối đa sự tương tác giữa các thành viên trong một nhóm dự án nói chung, đặc biệt là sự tương tác giữa giảng viên và sinh viên

Để đạt được điều này cần trải qua ba giai đoạn chính:

• Phát triển cơ sở hạ tầng, cung cấp các giải pháp tổng thể; cơ chế đăng nhập, đăng xuất và chứng thực; các services cơ bản

• Phát triển các ứng dụng trên nền Web, thực hiện các chức năng riêng biệt Hiện nay đã có vài ứng dụng được phát triển qua các luận văn trước đây như: IDEOL cung cấp môi trường lập trình; TeamSpace cung cấp các thành phần cho việc quản trị dự án; CoUML cung cấp công cụ để mô hình hóa và thiết kế

• Tích hợp các ứng dụng đã được phát triển với framework hạ tầng

Cụ thể, các chức năng và tính năng chính của EduCo Framework bao gồm:

• Môi trường hoạt động trên nền Web Người dùng truy cập vào hệ thống qua giao diện Web

13

• Cung cấp một cơ sở dữ liệu chung

• Cung cấp hệ thống quản lý phiên bản

• Cung cấp cơ chế chứng thực cho các ứng dụng sau này

• Cung cấp các services dùng cho việc thao tác với công cụ quản lý phiên bản

• Cung cấp các services để thao tác với các widgets

• Cung cấp một dashboard, là nơi tổng hợp các định tuyến đến các hệ thống sẽ được tích hợp sau này

• Cung cấp các kênh liên lạc cơ bản như comment, chat thời gian thực

• Các kênh liên lạc ở dạng ứng dụng đơn (widget) và có thể được sử dụng bởi các hệ thống sau này

• Cung cấp dashboard cho người quản trị

• Liên kết thử nghiệm với các ứng dụng đã được phát triển bởi các nhóm khác, cung cấp chức năng của một công cụ thiết kế và mô hình hóa

14

Hình 2.1 Use Case Diagram - Các chức năng chính của hệ thống

Hình trên là sơ đồ Use case thể hiện các chức năng mà người dùng có thể sử dụng bên trong hệ thống EduCo Framework Hệ thống bao gồm 2 actors là User và Admin Trong đó, User được chia làm 2 nhóm chính là giáo viên và sinh viên Sự khác biệt chính giữa Giáo viên và Sinh viên là việc tương tác với Khóa học (Course) khi tích hợp với hệ thống Moodle và hệ thống phân tích dữ liệu (activities log) của sinh viên

Các chức năng được chia làm các cụm chính:

• Chức năng thông thường: Xem About, Điều khoản sử dụng …

• Chức năng chứng thực người dùng: Đăng nhập, Đăng xuất …

• Chức năng tương tác với Dashboard, các chức năng của một mạng xã hội: Post status, comment, like, chat, video call, notification, friends and activities … (Hình 2.2)

• Điều hướng sang ứng dụng IDEOL

• Điều hướng sang ứng dụng CoUML

• Điều hướng sang ứng dụng Gitlab

16

Hình 2.3 Use Case Diagram - Các chức năng bên trong Gitlab

Để hoàn thành framework với những chức năng kể trên, chúng tôi gặp phải những thách thức lớn:

• EduCo Framework sau khi hoàn tất sẽ được tiến hành tích hợp với các ứng dụng trên nền Web khác Các ứng dụng có thể sử dụng database riêng hoặc sử dụng database của Framework với các api được public ra bên ngoài Vì vậy cần phải có một database có thiết

17

• Tính độc lập nền tảng giữa các ứng dụng được tích hợp Các ứng dụng được phát triển trước

đó trên nhiều ngôn ngữ khác nhau và môi trường lập trình khác nhau

2.2.1 Kiến trúc tổng quan

Để giúp người đọc có cái nhìn sớm nhất về toàn hệ thống, chúng tôi sẽ trình bày sơ lược về kiến trúc tổng quan và các thành phần của hệ thống trước khi đi vào phân tích các modules cụ thể, sự tương tác giữa các modules với nhau

Với đầu vào là những tính năng được liệt kê, kết quả sau hơn 2 tháng tìm hiểu và thảo luận giữa các thành viên trong nhóm, chúng tôi đã quyết định áp dụng kiến trúc và công nghệ sau:

Toàn bộ hệ thống được xây dựng theo kiến trúc Client – Server Trong đó phần Server – Framework được viết chủ yếu bằng ngôn ngữ JavaScript, framework web Express theo kiến trúc Model – View – Controller (MVC)

Phần Client (front end) được phát triển bằng Jade Template và LessCSS, khi biên dịch, các file template và less này sẽ được dịch qua HTML, CSS và hoạt động nhưng một ứng dụng Web thông thường Client được chia làm 2 phần:

slim-• Dashboard: là trung tâm dữ liệu trên nền Web cung cấp các tính năng của một mạng xã hội, các tính năng này được trích ra thành các widget, có thể tái sử dụng ở các hệ thống khác Dashboard là nơi tổng hợp các thông tin liên quan đến cá nhân người sử dụng hoặc các thông tin tổng hợp về dự án Dashboard còn cung cấp khả năng điều hướng sang các ứng dụng đã được xây dựng trước và được tích hợp với EduCo Framework Ở đây, chúng tôi chỉ xây dựng một vài đường dẫn điều hướng đến các ứng dụng, và một vài ví dụ sử dụng các widget, tương tác thời gian thực …

• Client của các ứng dụng đã được xây dựng trước đó và được tích hợp vào hệ thống EduCo: IDEOL, CoUML, TeamSpace …

Việc giao tiếp giữa 2 nhóm client trên và Server đều thông qua RESTful Web Service

18

Hình 2.4 Sơ Đồ Kiến Trúc Hệ Thống Nền EduCo Framework

Hệ thống bao gồm các thành phần chính như sau:

EduCo Core nằm ở vị trí trung tâm, đóng vai trò chính trong việc tương tác với các ứng dụng EduCo

Core cung cấp các service như Git Service, Widget service và cơ chế Single Sign On với chuẩn OAuth 2.0 Thành phần này còn cung cấp trung tâm quản lý dữ liệu , một dashboard với các tính năng thời gian thực của một mạng xã hội EduCo Core được phát triển chủ yếu bằng ngôn ngữ JavaScript trên framework Express

Gitlab đóng vai trò là một hệ thống quản lý phiên bản, đã được phát triển bởi một nhóm khác, mã nguồn

mở, tương tác với EduCo Core qua RESTful service Gitlab sử dụng cơ sở dữ liệu riêng của mình Cơ

sở dữ liệu này được tích hợp trực tiếp với cơ sở dự liệu của EduCo Core thành một database chung cho toàn hệ thống

EduCo Framework

19

Node.js là một nền tảng được xây dựng trên thư viện Chrome’s javascript runtime, cung cấp khả năng

xử lý real-time cho các ứng dụng trên các thiết bị khác nhau Ở đây, node.js được sử dụng với thư viện javascript socket.io nhằm tạo khả năng tương tác thời gian thực với các client

Redis-server là thành phần trung gian nhằm tạo một kênh kết nối, tương tác giữa ứng dụng Rails –

EduCo Core và Node.js server mỗi khi EduCo Core nhận được sự tương tác của client và phản hồi thời gian thực ngược lại cho server

IDEOL là ứng dụng Web cung cấp môi trường lập trình cho các thành viên trong dự án IDEOL được

phát triển bởi nhóm tác giả: Trần Thành Hải, Đặng Hoàng Hải và Đỗ Nguyên Kha IDEOL hiện đang

hỗ trợ ngôn ngữ C++/C#/Java, có hỗ trợ tính năng gỡ lỗi cộng tác thời gian thực, khả năng nhắc code

và đang nhắm tới các bạn sinh viên năm nhất, những bạn mới làm quen với ngôn ngữ lập trình Công

cụ IDEOL được chỉ định để tích hợp với EduCo Framework

TeamSpace là ứng dụng Web cung cấp công cụ quản lý dự án và công cụ quản lý lỗi TeamSpace được

phát triển dựa trên công cụ Redmine nhưng cung cấp các tính năng nổi bật hơn như: cung cấp các mẫu (template) để áp dụng các loại quy trình khác nhau Công cụ TeamSpace được chỉ định để tích hợp với EduCo Framework

CoUML là ứng dụng Web được phát triển bởi nhóm tác giả Lê Huy Chương và Lê Nguyễn Thiện Ân,

là hai thành viên của lớp Cử Nhân Tài Năng khóa 2009 CoUML cung cấp khả năng thiết kế và mô

hình hóa các loại sơ đồ cần thiết cho một dự án phần mềm

2.2.2 Phân hệ quản lý tập tin và phiên bản

So sánh các hệ thống quản lý phiên bản sẵn có, cụ thể là Subversion và git, với xu hướng công nghệ và những lợi ích do git mang lại, chúng tôi quyết định lựa chọn Gitlab là ứng dụng đầu tiên sẽ được tích hợp vào hệ thống lõi Gitlab là một ứng dụng web mã nguồn mở được viết bằng ngôn ngữ Ruby, framework Ruby on Rails và được phát triển bởi GitlabHQ nhằm cung cấp một hệ thống quản lý phiên bản dựa trên git cho các tổ chức hoặc doanh nghiệp theo bản quyền MIT (MIT-license)

Do đây chỉ là một ứng dụng tích hợp vào hệ thống, không phải thành phần chính nên chúng ta chỉ trình bày những kiến thức cơ bản và một vài điểm khác biệt nhất Nói đến git ta có thể hình dung đó là bước tiến lớn của hệ thống quản lý phiên bản với tính năng phân tán làm chủ đạo

20

Theo kiến trúc của các hệ thống quản lý phiên bản thông thường, các client sẽ làm việc trực tiếp với một máy chủ trung tâm, máy chủ này có trách nhiệm lưu trữ toàn bộ lịch sử check-in, check-out, source code của các máy client Điều này dẫn đến tình trạng khi máy chủ gặp sự cố, toàn bộ quá trình làm việc, lịch sử làm việc của các máy con sẽ bị mất theo cùng với mã nguồn

Hình 2.5 Kiến trúc hoạt động của Subversion

Git đã giải quyết vấn đề này bằng cách đơn giản, tổ chức lưu trữ phân tán Lúc này mỗi máy con sẽ sinh

ra một hệ thống quản lý phiên bản riêng, nhỏ gọn trên nội bộ máy này

21

Hình 2.6 Kiến trúc hoạt động của Git

Các thao tác với git gần như là tương tự với Subversion Mỗi thao tác commit và checkout sẽ có hiệu lực ở cục bộ Sau khi hoàn thành một tính năng hoặc một lúc nào đó mà lập trình viên cảm thấy phù hợp thì sẽ sử dụng cặp lệnh “pull” và “push” dữ liệu từ server tập trung Với tổ chức như vậy, mỗi khi

có sự cố xảy ra đối với server trung tâm, mọi lịch sử về quá trình lập trình của các thành viên trong dự

án vẫn được đảm bảo

Ngoài ra, git còn cung cấp nhiều tính năng đặc trưng, khác biệt với các hệ thống quản lý phiên bản khác Các bạn có thể tham khảo thêm tại trang chủ của Git để nắm rõ hơn về git cũng như cách sử dụng

22

Hình 2.7 Sequence Diagram mô tả quá trình tương tác với Gitlab

Quá trình tương tác giữa các ứng dụng thứ ba hoặc EduCo đối với Gitlab diễn ra như sau:

• Công cụ CoUML gửi request tới REST API của EduCo yêu cầu Commit 1 diagram vừa được người dùng chỉnh sửa

• Hệ thống EduCo thực hiện thao tác chứng thực và chứng nhận request từ công cụ CoUML xem người dùng đã đăng nhập và có đủ quyền hay không

• Khi request đã hợp lệ, EduCo ghi nhận thay đổi trên bảng Diagram bên trong cơ sở dữ liệu của EduCo

• EduCo gửi request đến Gitlab qua Gitlab API thực hiện việc commit files

• Gitlab thực hiện việc commit files, ghi nhận trên database của Gitlab và trả kết quả về cho EduCo

• Hệ thống EduCo trả kết quả về cho CoUML

• Cung cấp Admin Panel cho người quản trị, người quản trị có thể thao tác và quản lý cơ sở dữ liệu dưới dạng bảng biểu

• Cung cấp chức năng đăng kí, đăng nhập và đăng xuất cho người dùng

• Cung cấp các RESTful services cho việc đăng nhập và đăng xuất người dùng

• Cung cấp khả năng đăng tin tức mới ở dạng plain text (New Post)

• Cung cấp khả năng bình luận trên các đối tượng trong hệ thống (Comment)

• Các thành viên trong dự án hoặc bạn bè có thể chat với nhau (Chat)

• Thông báo đến những người dùng có liên quan khi có tin tức mới (Notification)

• Cung cấp hệ thống quản lý phiên bản trên nền git, tương tác qua RESTful services

• Cung cấp khả năng xử lý thời gian thực

• Tích hợp với công cụ CoUML các thành phần: header, comment, video call

24

Hình 2.8 Dashboard với các chức năng social

Sử dụng nền tảng EduCo Framework, các ứng dụng được tích hợp sẽ có sự liên kết và đồng bộ với nhau

về cơ sở dữ liệu Các ứng dụng sẽ dùng chung các widget chung như chat, header, comment Nhờ đó, người dùng có thể tương tác, trao đổi thảo luận với nhau trong suốt quá trình làm đồ án của mình

25

CHƯƠNG 3 PHÂN HỆ WEB IDE

Phân hệ Web IDE kế thừa và phát triển các tiểu luận tốt nghiệp đại học hướng dẫn bởi PGS.TS Trần Đan Thư tại Khoa CNTT, ĐH Khoa học tự nhiên: “Xây dựng và phát triển ứng dụng hỗ trợ soạn thảo, biên dịch và thực thi chương trình trên môi trường Web” (Đặng Hoàng Hải, Trần Thanh Hải, tháng 06/2011), “Xây dựng công cụ trên web hỗ trợ tìm lỗi ứng dụng C/C++” (Nguyễn Đình Vĩnh An, Đỗ Nguyên Kha, tháng 06/2012) và “Cây cú pháp trừu tượng và Ứng dụng trong Web IDE” (Dương Ngọc Duy, Phan Quang Hiếu, tháng 06/2013)

Một phần báo cáo trong chương này được rút trích từ nội dung báo cáo của các tiểu luận trên

Phân hệ nền tảng có thể truy cập tại địa chỉ https://ideol.net

Môi trường phát triển tích hợp trên Web có thể mang lại các lợi ích:

• Nhanh chóng, mọi lúc mọi nơi và không phụ thuộc thiết bị: không phải cài đặt phần mềm, chỉ cần một thiết bị kết nối Internet để tiếp cận với dịch vụ, yêu cầu tài nguyên xử lý cục bộ thấp;

• Giảm chi phí và độ tin cậy cao: tất cả các tài nguyên lưu trữ và xử lý được quản lý tập trung, giúp cho quá trình vận hành, bảo trì và bảo mật dễ dàng hơn, các phần mềm hỗ trợ có thể được bổ sung, cập nhật gần như tức thời để mở rộng tính năng hệ thống;

• Chia sẻ, phân phối và cộng tác: lưu trữ, xử lý tập trung giúp dễ dàng đồng bộ và trao đổi, thảo luận được thực hiện thông qua các kênh thông tin trực tuyến thời gian thực;

• Kết hợp và phát triển các ứng dụng: dễ dàng tích hợp với các ứng dụng khác để mở rộng tính năng

Chúng tôi đã phát triển một IDE trên Web tên là IDEOL (https://ideol.net) để tận dụng các thế mạnh này, tích hợp với các chức năng mạng xã hội Môi trươừng giúp các lập trình viên thực hiện các công việc truyền thống nhưng trên một trình duyệt Web, đồng thời cung cấp nhiều chức năng làm việc nhóm như soạn thảo cộng tác, kiểm duyệt mã nguồn, thảo luận chi tiết các giải pháp cài đặt phần mềm

Variables Console

http://ideol/alan/hello

hello() at foo.c:10 Thread 1 (stopped) Target

main () at main.c:20 Thread 2 (stopped)

Breakpoints Debug File

print_str() at bar.c:15 t_create() in t.so

bar.c main.c foo.c

#include <stdio.h>

int foo() { int n, m;

Source code files

Debugger User’s program

Command line user interface

Debug command and result

exec, inspect, breakpoint…

Debug event

running, stop, exception

Control

Debug model (client)

Target, Thread, Stackframe

User information, Project metadata

Mobile web browser

Safari (iOS) Browser (Android)

Embed browser application

Webkit Qt Chrominium Embed

Debug user program via web concept

Debug model (server)

Target, Thread, Stackframe