1<!DOCTYPE html> 2<html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 9 <title>Mendix Diff Tool</title> 10 <meta name="description" content="SCH Hanoi description"> 11 12 <link rel="canonical" href="http://schhanoi.com/mxmfdiff/"> 13 <link rel="alternate" type="application/rss+xml" title="SCH Hanoi" href="http://schhanoi.com/feed.xml" /> 14 15 <!-- Material Design Lite css Library --> 16 <link rel="stylesheet" type="text/css" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css"> 17 18 <!-- Material Design Fonts --> 19 <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 20 21 <!-- Custom theme css --> 22 <link rel="stylesheet" href="/css/main.css"> 23</head> 24 25 26 <body> 27 28 <!-- Start Layout --> 29 30 <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> 31 <!-- search layout --> 32<div class="super-search" id="js-search"> 33 <ul class="super-search__results" id="js-search__results"></ul> 34 <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored super-search__close-btn" onclick="superSearch.toggle()"> 35 <i class="material-icons">close</i> 36 </button> 37</div> 38<!-- /end search --> 39 <header class="mdl-layout__header"> 40 41 <div class="mdl-layout__header-row"> 42 <!-- Title --> 43 <a href="/"> 44 <span class="mdl-layout-title" style="display: inline-block; color: blue">S</span> 45 <span class="mdl-layout-title" style="display: inline-block; color: orange">C</span> 46 <span class="mdl-layout-title" style="display: inline-block; color: red">H</span> 47 </a> 48 <!-- Add spacer, to align navigation to the right --> 49 <div class="mdl-layout-spacer"></div> 50 51 52 <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable is-upgraded"> 53 <label class="mdl-button mdl-js-button mdl-button--icon" for="js-search__input"> 54 <i class="material-icons">search</i> 55 </label> 56 57 <div class="mdl-textfield__expandable-holder" > 58 <input class="mdl-textfield__input super-search__input" type="text" id="js-search__input" /> 59 </div> 60 </div> 61 62 </div> 63 </header> 64 65 <div class="mdl-layout__drawer"> 66 <span class="mdl-layout-title">Menu</span> 67 <nav class="mdl-navigation"> 68 69 70 <a class="mdl-navigation__link" href="/about/">About</a> 71 72 73 74 <a class="mdl-navigation__link" href="/customer/">Customer</a> 75 76 77 78 79 80 <a class="mdl-navigation__link" href="/howwework/">How do we work</a> 81 82 83 84 85 86 87 88 <a class="mdl-navigation__link" href="/mxmfdiff/">Mendix Diff Tool</a> 89 90 91 92 93 </nav> 94 95 </div> 96 97 98 99 100 <div class="post-ribbon"></div> 101<main class="post-main mdl-layout__content"> 102 <div class="post-container mdl-grid"> 103 <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div> 104 <div class="post-section mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col"> 105 <div class="mdl-color-text--grey-500"> 106 107 </div> 108 <h3>Mendix Diff Tool</h3> 109 <article class="post-content"> 110 <p><p>tl;dr: you can download the tool at: http://mftool.schhanoi.com/</p> 111 112<h3 id="1-how-do-you-find-a-committed-bug">1. How do you find a committed bug?</h3> 113<p>I am javascript developer, developing widgets for Mendix applications. 114As a routine, I often check my code one time before commit, review and merge code from colleages. 115For that kind of work, one indispensable tool is âgit diffâ.</p> 116 117<p>Quite often, I also work with Mendix modeller on server side. 118It is a great tool for business engineers thanks to intuitive way to design business logic.</p> 119 120<p>In term of code review, what mendix can do:</p> 121<ul> 122 <li>Show list of changes between 2 revisions</li> 123 <li>Show overview history of microflow</li> 124</ul> 125 126<p>Most of the time, after knowing that a microflow is changed between 2 specific revisions, I am interested in more detailed changes. 127For example, I would like to know what exactly changes of:</p> 128<ul> 129 <li>Xpath</li> 130 <li>Attribute values</li> 131 <li>Sorting criteria</li> 132</ul> 133 134<p>Those information provides more insight for the commit than just revisionâs de
134scription which is quite short and sometimes quite misleading. Normally, I have to ask authors of the commit to understand the reason. That process take a lot of time. 135In some cases, if the commit is older than 2 weeks, recalling all the bits and bytes is impossible.</p> 136 137<p>Thatâs why for a long time, we were thinking about making a <em><strong>diff tool</strong></em> for Mendix.</p> 138 139<p>It was impossible to implement that kind of tool if you cannot read Mendix code. 140Luckily, last year, Mendix have just had their SDK, making it possible to developers to read all mendix apps info: Microflow, forms, domain models, web services. Just then, we decided to implement <strong>diff tool</strong></p> 141 142<p>For some of the first versions of the tool, I want to mainly focus on analyzing Microflow, and also get feedback of users on the tool.</p> 143 144<h3 id="2-chosen-technology">2. Chosen technology</h3> 145<ul> 146 <li>React: for its ability to build application by assemble different components.</li> 147 <li>Mobx: for its easiness to learn and apply quickly.</li> 148 <li>Electron: for its ability to build standalone app. For the future, itâs also easy to be converted to an online version.</li> 149</ul> 150 151<h3 id="3-pre-requisite">3. Pre-requisite</h3> 152<ul> 153 <li>You need your APIKey. Following these steps to generate one: 154https://docs.mendix.com/apidocs-mxsdk/apidocs/authentication</li> 155</ul> 156 157<p>Note: You should save this APIKey since you can see it only one.</p> 158 159<h3 id="4-feature">4. Feature</h3> 160<p>As you enter your username and ApiKey, the tool will use it to connect to Team Server to get the list of your applications and to create an OnlineWorkingCopy. 161(What is an OnlineWorkingCopy? Link). And here is the list of features:</p> 162 163<ul> 164 <li>Show overview of new/edited/deleted microflows.</li> 165</ul> 166 167<p><img src="https://raw.githubusercontent.com/vietduc1441/vietduc1441.github.io/master/img/sttoverview.png" alt="statusoverview" /></p> 168 169<ul> 170 <li>Visualize microflow as it is on Mendix Modeller.</li> 171</ul> 172 173<p><img src="https://raw.githubusercontent.com/vietduc1441/vietduc1441.github.io/master/img/mf.png" alt="over_view" /></p> 174 175<ul> 176 <li>Properties of Microflow action is displayed as it is on Mendix Modeller.</li> 177</ul> 178 179<p><img src="https://raw.githubusercontent.com/vietduc1441/vietduc1441.github.io/master/img/prop.png" alt="properties" /></p> 180 181<ul> 182 <li>Highlight associated microflow activities and their comparison.</li> 183</ul> 184 185<iframe width="640" height="360" src="https://www.youtube.com/embed/Bnskh7YNqTs?rel=0" frameborder="0"></iframe> 186 187<h3 id="5-roadmap">5. Roadmap</h3> 188<p>We have many ideas in mind for the next version. Here are some of them:</p> 189 190<ul> 191 <li>Store username & apiKey so user doesnât have to reenter.</li> 192 <li>Compare microflows between different branches</li> 193 <li>Upload a microflow from local to compare</li> 194 <li>Compare microflows between different projects</li> 195 <li>Export microflow directly from the tool</li> 196</ul> 197</p> 198 </article> 199 200 </div> 201 </div> 202</main> 203 204 <footer class="mdl-mega-footer"> 205 <div class="mdl-mega-footer--middle-section"> 206 207 <div class="mdl-mega-footer--drop-down-section"> 208 <input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked> 209 <h1 class="mdl-mega-footer--heading">INFO</h1> 210 <ul class="mdl-mega-footer--link-list"> 211 <li><a href="mailto:[email protected]">[email protected]</a></li> 212 <li><a href="/feed.xml">subscribe via RSS</a></li> 213 </ul> 214 </div> 215 216 <div class="mdl-mega-footer--drop-down-section"> 217 <input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked> 218 <h1 class="mdl-mega-footer--heading">SOCIAL</h1> 219 <ul class="mdl-mega-footer--link-list"> 220 221 <li> 222 <a href="https://github.com/vietduc1441"> 223 <span class="icon icon--github"> 224 <svg viewBox="0 0 16 16"> 225 <path fill="#828282" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/> 226 </svg> 227 </span> 228
229 <span class="username">vietduc1441</span> 230 </a> 231 </li> 232 233 234 235 236 237 238 </ul> 239 </div> 240 241 <div class="mdl-mega-footer--drop-down-section"> 242 <input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked> 243 <h1 class="mdl-mega-footer--heading">ABOUT</h1> 244 <ul class="mdl-mega-footer--link-list"> 245 <li>SCH Hanoi description</li> 246 </ul> 247 </div> 248 249 250 </div> 251 252 <div class="mdl-mega-footer--bottom-section"> 253 <div class="mdl-logo">SCH Hanoi</div> 254 <ul class="mdl-mega-footer--link-list"> 255 <li><a href="#">Help</a></li> 256 <li><a href="#">Privacy & Terms</a></li> 257 </ul> 258 </div> 259 260</footer> 261 262 263 </div> 264 <!-- /End Layout --> 265 266 <!-- Material Design Lite js Library --> 267
267<script type="text/javascript" src="https://code.getmdl.io/1.2.1/material.min.js"></script>
267 268 269
269<script rel="javascript" type="text/javascript" src="/js/search.js"></script>
269 270
270<script rel="javascript" type="text/javascript"> 271 superSearch({ 272 searchFile: '/feed.xml', 273 searchSelector: '#js-search', // CSS Selector for search container element. 274 inputSelector: '#js-search__input', // CSS selector for <input> 275 resultsSelector: '#js-search__results' // CSS selector for results container 276 }); 277 </script>
277 278
278<script>
vendor: 345 bytes, lines 278-284
278 279 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 280 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 281 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 282 })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); 283 284 ga('create', '
284UA-41519815-3
vendor: 39 bytes, lines 284-286
284', 'auto'); 285 ga('send', 'pageview'); 286
287</script>
287 288 </body> 289 290</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.