Nghiên cứu cải tiến kỹ thuật sinh mã nguồn trong phát triển ứng dụng web hướng mô hình theo kỹ thuật uwe

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI - Nguyễn Thanh Giang NGHIÊN CỨU CẢI TIẾN KỸ THUẬT SINH MÃ NGUỒN TRONG PHÁT TRIỂN ỨNG DỤNG WEB HƯỚNG MƠ HÌNH THEO KỸ THUẬT UWE Chun ngành: Kỹ thuật phần mềm LUẬN VĂN THẠC SĨ KỸ THUẬT NGƯỜI HƯỚNG DẪN KHOA HỌC: PGS.TS Huỳnh Quyết Thắng HÀ NỘI – 2018 LỜI CAM ĐOAN Tôi – Nguyễn Thanh Giang – cam kết luận văn cơng trình nghiên cứu thân hướng dẫn PGS.TS Huỳnh Quyết Thắng Các kết nêu luận văn trung thực, chép tồn văn cơng trình khác Hà Nội, ngày tháng 10 năm 2018 Học viên Nguyễn Thanh Giang LỜI CAM ĐOAN DANH MỤC CÁC TỪ VIẾT TẮT VÀ THUẬT NGỮ DANH MỤC HÌNH .7 DANH MỤC BẢNG MỞ ĐẦU 11 Mục đích nghiên cứu luận văn 11 Nội dung luận văn 11 Các đóng góp khoa học luận văn 12 Chương 1: Tổng quan kiến trúc hướng mơ hình kỹ thuật Web hướng mơ hình UWE .13 1.1 Kiến trúc hướng mơ hình 13 1.2 Các kỹ thuật Web hướng mơ hình 13 1.3 Kỹ thuật UWE 16 1.3.1 Mơ hình u cầu 18 1.3.2 Mơ hình nội dung 19 1.3.3 Mơ hình điều hướng 19 1.3.4 Mơ hình xử lý 20 1.3.5 Mơ hình trình bày 20 1.4 Tổng hợp nghiên cứu kỹ thuật sinh mã nguồn phát triển ứng dụng Web hướng mơ hình 22 1.4.1 Các phương pháp sinh mã hướng mơ hình 22 1.4.2 OptimalJ 24 1.4.3 UWE4JSF 24 1.5 Tiểu kết chương 25 Chương 2: Phát triển giải thuật sinh mã nguồn .27 2.1 Đặt vấn đề 27 2.2 Quy trình chuyển đổi MDA cho kỹ thuật UWE 28 2.2.1 Lựa chọn tảng công nghệ 28 2.2.2 Lựa chọn mơ hình Web 29 2.2.3 Lựa chọn phương pháp sinh mã 30 2.2.4 Quy trình chuyển đổi MDA cho kỹ thuật UWE 31 2.3 Xây dựng giải thuật CM2M sinh mã thành phần Model từ mô hình nội dung (Content Model to Model Code Genenation) 32 2.4 Xây dụng giải thuật PRES2V sinh mã thành phần View từ mơ hình trình bày (Presenation Model to View Code Generation) 38 2.5 Xây dụng giải thuật NPROM2C sinh mã thành phần Controller từ mơ hình điều hướng xử lý (Navigation and Processing Model to Controller Code Generation)43 2.5.1 Xây dựng giải thuật NM2C 43 2.5.2 Xây dựng giải thuật PROM2C 48 2.6 Tiểu kết chương 52 Chương 3: Cài đặt cơng cụ CODEGER-UWE tích hợp giải thuật áp dụng, đánh giá 53 3.1 Xây dựng công cụ CODEGER-UWE 53 3.2 Áp dụng công cụ CODEGER-UWE vào toán cụ thể .55 3.3 Đánh giá 61 3.4 Tiểu kết chương 62 KẾT LUẬN 63 DANH MỤC THAM KHẢO .65 PHỤ LỤC .67 DANH MỤC CÁC TỪ VIẾT TẮT VÀ THUẬT NGỮ Từ viết tắt, thuật ngữ Từ viết đầy đủ ATL Atlas Transformation Language CIM Computation Independent Model CSS Cascading Style Sheets CWM Common Warehouse Metamodel DTD Document Type Definition EMF Eclipse Modeling Framework HTML Hypertext Markup Language ISM Implementation Specific Model J2EE Java Platform, Enterprise Edition JET Java Emitter Templates JSF Java Server Faces JSP Java Server Pages JSTL JSP Standard Tag Library MDA Model Driven Architecture MDD Model Driven Development MDE Model Driven Engineering MDSD Model Driven Software Development MDWE Model Driven Web Engineering MOF Meta Object Facility MVC Model View Controller OCL Object Constraints Language OMG Object Management Group OOHDM OOHDMDA Object Oriented Hypermedia Design Method Object Oriented Hypermedia Design Method Driven Approach PIM Platform Independent Model PSM Platform Specific Model QVT Query Views Transformation UML Unified Modeling Language UWE W2000 (HDM) WebSA Uml-based Web Engineering Hypertext Design Model Web Software Architecture WTP Web Tools Platform XMI XML Metadata Interchange XML eXtensible Markup Language XSLT eXtensible Stylesheet Language Transformation DANH MỤC HÌNH Hình 1.1 Cấu trúc MDA cho kỹ thuật Web [6] 14 Hình 1.2 UWE metamodel [15] 16 Hình 1.3 UWE profile cho mơ hình u cầu [15] .18 Hình 1.4 UWE profile cho mơ hình nội dung [15] .19 Hình 1.5 UWE profile cho mơ hình điều hướng [15] 20 Hình 1.6 UWE profile cho mơ hình xử lý [15] 21 Hình 1.7 UWE profile cho mơ hình trình bày [15] .22 Hình 1.8 Phương pháp sinh mã dựa khuôn mẫu lọc [8] 22 Hình 1.9 Phương pháp sinh mã dựa khuôn mẫu metamodel [8] 23 Hình 1.10 Phương pháp sinh mã dựa API [8] 23 Hình 1.11 Phương pháp sinh mã dựa khuôn mẫu [3] 24 Hình 1.12 Quy trình sinh mã UWE4JSF [4] .25 Hình 2.1 Cấu trúc MDA cho ứng dụng web theo kỹ thuật UWE .27 Hình 2.2 Mơ hình MVC Web [17] 29 Hình 2.3 Java metamodel 30 Hình 2.4 JSP metamodel .31 Hình 2.5 Chuyển đổi mơ hình PIM sang PSM, mã nguồn theo mơ hình MVC 31 Hình 2.6 Các thành phần mơ hình nội dung 32 Hình 2.7 Các quy tắc cấu thành giải thuật CM2M 33 Hình 2.8 Quy trình chuyển đổi sinh mã nguồn từ mơ hình nội dung 36 Hình 2.9 Các thành phần mơ hình trình bày 38 Hình 2.10 Các quy tắc cấu thành giải thuật PRES2V 38 Hình 2.11 Quy trình chuyển đổi sinh mã JSP từ mơ hình trình bày 42 Hình 2.12 Các thành phần mơ hình điều hướng 44 Hình 2.13 Các quy tắc cấu thành giải thuật NM2C 44 Hình 2.14 Quy trình chuyển đổi sinh mã nguồn từ mơ hình điều hướng 47 Hình 2.15 Các thành phần mơ hình xử lý 49 Hình 2.16 Các quy tắc cấu thành giải thuật PROM2C .49 Hình 2.17 Quy trình chuyển đổi sinh mã nguồn từ mơ hình xử lý .51 Hình 3.1 Kiến trúc MagicDraw CODEGER-UWE .54 Hình 3.2 Cài đặt CODEGER-UWE 54 Hình 3.3 Giao diện cơng cụ CODEGER-UWE 55 Hình 3.4 Bốn mơ hình AddressBook 57 Hình 3.5 Mã nguồn sinh từ bốn mơ hình UWE 58 Hình 3.6 Khung ứng dụng Web 59 Hình 3.7 Giao diện trang web .59 Hình 3.8 Hiện thị kết tìm kiếm Contact 60 Hình 3.9 Giao diện tạo Contact 60 Hình 3.10 Giao diện cập nhật Contact có .60 Hình 3.11 Hiện thị lại danh sách sau xóa Contact 61 DANH MỤC BẢNG Bảng So sánh kỹ thuật Web hướng mơ hình [6] 16 Bảng Các thành phần khuôn mẫu UWE [15] 17 Bảng Bảng đánh giá mã nguồn 61 LỜI CẢM ƠN Để hồn thành luận văn tốt nghiệp này, em xin chân thành cảm ơn thầy hướng dẫn luận văn tốt nghiệp, PGS.TS Huỳnh Quyết Thắng, môn Công nghệ phần mềm, trường đại học Bách Khoa Hà Nội Thầy nhiệt tình hướng dẫn, truyền đạt kiến thức cần thiết định hướng cho em trình thực đề tài Em xin chân thành cảm ơn giúp đỡ quý báu anh Trần Đình Diễn, nghiên cứu sinh môn Công nghệ phần mềm, trường đại học Bách Khoa Hà Nội Em xin chân thành cảm ơn thầy cô giáo môn Công nghệ phần mềm, trường Đại học Bách Khoa Hà Nội Dù cố gắng luận văn chắn không tránh khỏi thiếu sót, em mong nhận ý kiến đóng góp thầy cô Em xin chân thành cảm ơn! 10 cOutEl.children←valAttr if owner.name =" tr" then tdEl←new JSPElement(name←"td") tdEl.children←cOutEl owner.children←tdEl else owner.children←cOutEl 4: 5: else if c.getstereotype = image then imgEl←new JSPElement(name←"img") srcAttr←new JSPAttribute(name←"src", value←"#") altAttr ←new JSPAttribute(name←" alt ", value←"") imgEl.children←{srcAttr, altAttr} if owner.name =" tr" then tdEl←new JSPElement(name←"td") tdEl.children← imgEl owner.children←tdEl else owner.children← imgEl 6: 7: else if c.getstereotype = button then inputEl←new JSPElement(name←"input") typeAttr←new JSPAttribute(name←"type", value←"submit") valueAttr←new JSPAttribute(name←"value", value←c.getname) onclickAttr←new JSPAttribute(name←"click") onclickAttr.value←"location.href='${pageContext.request.contextPath}/" +e.getname+"'" {khởi tạo đường dẫn cho nút bấm} inputEl.children←{typeAttr, valueAttr, onclickAttr} if owner.name =" tr" then tdEl←new JSPElement(name←"td") tdEl.children← inputEl 70 owner.children←tdEl else owner.children← inputEl 8: else if c.getstereotype = anchor then 9: ancEl←new JSPElement(name←"a") hrefAttr←new JSPAttribute(name←"href", value←"#") linkText←new JSPTextNode(value←c.getname) {Hiển thị tên liên kết neo} ancEl.children← {hrefAttr, linkText} if owner.name =" tr" then tdEl←new JSPElement(name←"td") tdEl.children← ancEl owner.children←tdEl else owner.children← ancEl 10: 11: else if c.getstereotype = textinput then inputText←new JSPTextNode(value←c.getname + ":") inputEl←new JSPElement(name←"input") typeAttr←new JSPAttribute(name←"type", value←"text") nameAttr ←new JSPAttribute(name←"name", value←c.getname) valueAttr←new JSPAttribute(name←"value", value←"") inputEl.children←{typeAttr, nameAttr, valueAttr} if owner.name =" tr" then td1El←new JSPElement(name←"td") td1El.children← inputText td2El←new JSPElement(name←"td") td2El.children← inputEl owner.children←{td1El, td2El} else 71 owner.children←{inputText, inputEl} 12: else if c.getstereotype = fileupload then 13: uploadEl←new JSPElement(name←"form") actAttr←new JSPAttribute(name←"action", value←"upload") mthAttr←new JSPAttribute(name←"method", value←"post") enctypeAttr←new JSPAttribute(name←"enctype", value←"multipart/form-data") fileInputEl←new JSPElement(name←"input") fileTypeAttr←new JSPAttribute(name←"type", value←"file") nameAttr←new JSPAttribute(name←"name", value←"file") inputEl←new JSPElement(name←"input") typeAttr←new JSPAttribute(name←"type", value←"file") nameAttr←new JSPAttribute(name←"name", value←"file") inputEl.children←{typeAttr, valueAttr} fileInputEl.children←{ fileTypeAttr, nameAttr} uploadEl.children←{ actAttr, mthAttr, anctypeAttr, fileInputEl, inputEl} if owner.name =" tr" then tdEl←new JSPElement(name←"td") tdEl.children← uploadEl owner.children←tdEl else owner.children← uploadEl 14: 15: return owner End Quy tắc A.5 PreClass2JSP Chuyển đổi thành phần lớp sang JSP element 72 Đầu vào: owner, c { JSPElement , UWE Class} Đầu ra: owner 1: {JSPElement} Begin 2: if c.getstereotype = presentationGroup then 3: bodyEl←new JSPElement(name←"div") 4: {điều kiện bổ sung từ mơ hình if c.relativetoindex = true then điều hướng} 5: tableEl←new JSPElement(name←"table") foreachEl←new JSPElement(name←"c:forEach") itemAttr←new JSPAttribute(name←"items", value←"${list"+c.getname+"}") nameAttr←new JSPAttribute(name←"var", value←c.getname) foreachEl.children← {itemAttr, varAttr} cifEl←new JSPElement(name←"c:if") testAttr←new JSPAttribute(name←"test", value←"${not empty"+c.getname+"}") cifEl.children←testAttr trEl←new JSPElement(name←"tr") listElement←c.getOwnedElement {Lấy danh sách phần tử có lớp} for e in listElement trEl←PreClass2JSP(trEl, e) theo quy tắc 2.4.2 {gọi đệ quy} cifEl.children←trEl foreachEl.children←cifEl tableEl.children←foreachEl bodyEl.children← tableEl 6: else 7: listElement←c.getOwnedElement {Lấy danh sách phần tử có lớp} 73 for e in listElement bodyEl←PreClass2JSP(bodyEl, e) theo quy tắc 2.4.2 {gọi đệ quy} 8: owner.children←bodyEl 9: else if c.getstereotype = presentationAlternatives then 10: bodyEl←new JSPElement(name←"c:choose") listElement←c.getOwnedElement {Lấy danh sách phần tử có lớp} for e in listElement cwhenEl←new JSPElement(name←"c:when") testEl←new JSPAttribute(name←"test", value←"${" + e.getname + "=='" + e.getname + "'}") cwhenEl.children←testEl cwhenEl←PreClass2JSP(cwhenEl, e) theo quy tắc 2.4.2 {gọi đệ quy} bodyEl.children←cwhenEl 11: 12: owner.children←bodyEl else if c.getstereotype = inputForm then 13: bodyEl←new JSPElement(name←"div") inputformEl←new JSPElement(name←"form") actAttr←new JSPAttribute(name←"action", value←c.getname) mthAttr←new JSPAttribute(name←"method", value←"set") inputformEl.children←{actAttr, mthAttr} tbEl←new JSPElement(name←"table") listElement←c.getOwnedElement {Lấy danh sách phần tử có lớp} for e in listElement trEl←new JSPElement(name←"tr") trEl ←PreClass2JSP(trEl, e) theo quy tắc 2.4.2 {gọi đệ quy} tbEl.children←trEl 14: owner.children←bodyEl 74 15: else owner← PreElement2JSP (owner, e) theo quy tắc 2.4.1 16: 17: return owner 18: End Chuyển đổi mơ hình điều hướng, xử lý sang JavaModel Quy tắc A.6 Navi2JavaClass Tạo lớp Controller từ mơ hình điều hướng Đầu vào: c {UWE Class} Đầu ra: jc 1: 2: {JavaClass} Begin jc←new JavaClass {Khởi tạo java class} jc.name←c.getname + "Controller" {Lấy tên class} jc.annotation←"@Controller" {Gán annotation cho java class} jc.isAbtract←false jc.isPublic←true jc.isInterface←false 3: jm←new JavaMethod {Khởi tạo java method} jm.isPublic←true jm.isStatic←false jm.annotation←"@RequestMapping("/")" {Gán annotation cho java method} jm.name←"home" jm.type←"String" jm.body←"return \"" + c.getname + "\";" 4: jc.members←jm 5: return jc 6: End 75 Quy tắc A.7 NaviNode2JavaMethod NaviNode chuyển đổi thành phương thức dạng phương thức mặc định Đầu vào: c, node {UWE Class, NaviNode} Đầu ra: jm {JavaMethod} 1: 2: Begin jm ←new javamethod jm.isStatic←false jm.isPublic←true jm.annotation←"@RequestMapping("\" + node.linknode + "\")" jm.name←node.e.getname jm.body←"return \" + c.getname + "\";" jm.parameters←new javaparameter(type="ModelMap", name="model") 3: owner.members←jm 4: return jm 5: End Quy tắc A.8 UWEClass2JavaClass Mỗi lớp mơ hình xử lý chuyển đổi thành lớp Java Đầu vào: c {UWE Class} Đầu ra: jc 1: 2: {JavaClass} Begin jc←new JavaClass jc.name←c.getname {Lấy tên class} jc.superClasses←c.getsuperclass {Lấy danh sách lớp kế thừa} jc.isAbstract←c.isAbstract jc.isPublic←false jc.isInterface←false 3: return jc 76 4: End 77 Phụ lục B: Triển khai mã nguồn từ JavaModel 1: JavaElement func: toCode return name 2: JavaPackage extends JavaElement func: toCode if name is not empty then return "package "+name+";\n\n" return "" 3: JavaClassMember extends JavaElement func: visibility if isPublic = true then return "public " return "private " func: scope if isStatic = true then return "static " return "" 4: JavaField extends JavaClassMember func: toCode content←"" content ←content+"\t"+visibility+scope+type.fullName+" "+name if initialize is not empty then content ←content+" = "+initialize content ←content+";\n " return content 5: JavaType extends JavaElement 78 func: fullName return name 6: JavaMethodParameter extends JavaElement func: toCode return type.fullName+" "+name 7: JavaMethod extends JavaClassMember func: toCode content←"" if annotation is not empty then content←content+"\t"+annotation+"\n" content←content+"\t"+visibility+scope phương thức} if type is empty then {xác định phạm vi truy cập {xác định kiểu trả phương thức} content←content+"void " else content←content+type.fullName content←content+" "+name+"(" {xác định tham số phương thức} if parameters is not empty then tmp←"" for param in parameters if tmp is not empty then tmp←tmp+"," tmp←param.toCode content←content+tmp content←content+")" {xác định ngoại lệ phương thức} if exceptions is not empty then tmp←"" for excep in exceptions if tmp is not empty then 79 tmp←tmp+"," tmp← excep.fullName content← content+" throws"+tmp content← content+"{\n\t\t"+body+"\n\t}\n" return content 8: JavaClass extends JavaType func: visibility if isPublic = true then return "public " return "" func: modifierAbstract if isAbstract = true then return "abstract " return "" func: fullName content←"" if javaPackage is not null then content←content+javaPackage.name+"." content← content+name if actualTypeParameters is not empty then content←content+"" return content 80 func: toCode content←annotation+"\n" content← content +visibility+modifierAbstract {xác định phạm vi lớp} if isInterface = true then content← content +"interface " else content← content +"class " content← content +name {xác định lớp kế thừa} if superclass is not empty then tmp←"" for sc in superClasses if sc.isInterface = false or isInterface = true then if tmp is empty then tmp←" extends " else tmp←tmp+"," tmp←tmp+sc.fullName content← content + tmp tmp←"" for sc in superClasses if sc.isInterface = true and isInterface = false then if tmp is empty then tmp←" implements " else tmp←tmp+"," tmp←tmp+sc.fullName content← content + tmp content← content + "{\n" {ghi code từ trường, phương for classMember in members 81 thức,… thành viên } content← content+classMember.toCode content← content+"\n}\n" return content 82 Phụ lục C: Triển khai mã nguồn từ JSPModel 1: JSPNode func: toCode return "" 2: JSPAttribute extends JSPNode func: toCode return name+"=\" "+value+"\"" 3: JSPTextNode extends JSPNode func: toCode return value+"\n" 4: JSPElement extends JSPNode func: getAttribute listAttr←new List JSPAttribute for node in children if node instanceof JSPAttribute then listAttr.push(node) return listAttr func: getChildren listNode←new List JSPNode for node in children if node not instanceof JSPAttribute then listNode.push(node) return listNode func: toCode content←"\n" for node in getChildren content←content+ " "+node.toCode content←content+"\n" return content 84 ... trúc hướng mơ hình kỹ thuật Web hướng mơ hình UWE Chương giới thiệu kiến trúc hướng mơ hình, kỹ thuật Web hướng mơ 11 hình, tổng hợp nghiên cứu kỹ thuật sinh mã nguồn phát triển ứng dụng hướng. .. phương pháp hướng đối tượng dựa ngơn ngữ mơ hình hóa UML, kỹ thuật phát triển theo kỹ thuật hướng mơ hình sử dụng nhiều kỹ thuật Web hướng mơ hình [6, 14] UWE kỹ thuật phát triển ứng dụng Web hoàn... mơ hình theo kỹ thuật UWE, khơng cịn tiếp tục phát triển, vận hành với phiên Eclipse UWE profile Luận văn hướng đến nghiên cứu cải tiến kỹ thuật sinh mã nguồn cho ứng dụng Web hướng mơ hình UWE,