{"id":48,"date":"2015-12-14T15:57:22","date_gmt":"2015-12-14T14:57:22","guid":{"rendered":"http:\/\/davikingcode.com\/blog\/?p=48"},"modified":"2015-12-15T11:00:16","modified_gmt":"2015-12-15T10:00:16","slug":"learn-more-and-in-a-fun-way-about-cancer-with-hygee","status":"publish","type":"post","link":"https:\/\/davikingcode.com\/blog\/learn-more-and-in-a-fun-way-about-cancer-with-hygee\/","title":{"rendered":"Learn more and in a fun way about cancer with &#8220;Hygee&#8221; !"},"content":{"rendered":"<p>In 2013,\u00a0the\u00a0regional center <strong><a href=\"http:\/\/wp.centre-hygee.eu\/\" target=\"_blank\">Hyg\u00e9e<\/a><\/strong> dedicated to the\u00a0information, prevention and education about\u00a0cancer, opened on the site of the hospital complex of\u00a0Saint Etienne (in the south-west of Lyon).<\/p>\n<p><a href=\"http:\/\/wp.centre-hygee.eu\/\"><img loading=\"lazy\" class=\"aligncenter\" src=\"http:\/\/wp.centre-hygee.eu\/wp-content\/uploads\/2015\/11\/logo_hygee2.png\" alt=\"Hyg\u00e9e Center logo\" width=\"482\" height=\"70\" \/><\/a><\/p>\n<p>So as to\u00a0raise awareness of the cancer disease\u00a0among the young\u00a0public, the Hyg\u00e9e center asked\u00a0<a href=\"http:\/\/www.dowino.com\/\" target=\"_blank\"><span style=\"display: inline-block; margin-bottom: -10px; text-decoration: none;\"><img loading=\"lazy\" class=\"alignnone\" src=\"http:\/\/cdn.societality.com\/organizations\/logos\/2607\/thumb\/logo_dowino.png?1415113181\" alt=\"\" width=\"40\" height=\"40\" \/><\/span> <strong>Dowino<\/strong><\/a>\u00a0to create a <strong>quiz game playable on tablets<\/strong>.\u00a0Further to successful projects with us (<a href=\"http:\/\/www.aymericlamboley.fr\/blog\/a-blind-legend\/\" target=\"_blank\">A blind legend<\/a> 3D audio game,\u00a0<a href=\"http:\/\/www.aymericlamboley.fr\/blog\/mission-eau-being-agile-with-flash-pro\/\" target=\"_blank\">Mission eau<\/a>\u00a0mobile game, Effia Synergies quiz, &#8230;), Dowino decided to call upon us one more time for the implementation part of the project. We have chosen to use\u00a0<strong><em>Adobe Integrated Runtime<\/em><\/strong> (AIR) to create the application.<\/p>\n<p>Your mission\u00a0should you choose to accept it, is to help Hyg\u00e9e, the daughter of\u00a0<a href=\"http:\/\/www.greekmythology.com\/Other_Gods\/Asclepius\/asclepius.html\" target=\"_blank\">Asclepios<\/a>,\u00a0to perfect her knowledge about medicine (about cancer in fact) and so truly graduate to the rank of Goddess !<\/p>\n<figure id=\"attachment_71\" aria-describedby=\"caption-attachment-71\" style=\"width: 412px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/davikingcode.com\/blog\/wp-content\/uploads\/2015\/12\/BG_05.png\" rel=\"attachment wp-att-71\"><img loading=\"lazy\" class=\"wp-image-71 \" src=\"http:\/\/davikingcode.com\/blog\/wp-content\/uploads\/2015\/12\/BG_05-300x188.png\" alt=\"Hyg\u00e9e\" width=\"412\" height=\"258\" srcset=\"https:\/\/davikingcode.com\/blog\/wp-content\/uploads\/2015\/12\/BG_05-300x188.png 300w, https:\/\/davikingcode.com\/blog\/wp-content\/uploads\/2015\/12\/BG_05-768x480.png 768w, https:\/\/davikingcode.com\/blog\/wp-content\/uploads\/2015\/12\/BG_05-1024x640.png 1024w, https:\/\/davikingcode.com\/blog\/wp-content\/uploads\/2015\/12\/BG_05.png 1280w\" sizes=\"(max-width: 412px) 100vw, 412px\" \/><\/a><figcaption id=\"caption-attachment-71\" class=\"wp-caption-text\">Hyg\u00e9e, medicine god&#8217;s daughter in the Greek mythology<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p><!--more--><\/p>\n<h1>The game<\/h1>\n<p>As I said before, this mobile application is a <strong>quiz game<\/strong> but with a &#8220;<strong>community aspect<\/strong>&#8220;. In fact, the game is intended to be <strong>played by multiple persons at the same time<\/strong>. Every good answer add points to a <strong>score shared by all the people<\/strong> <strong>playing in the same session<\/strong>. There is no more competition but mutual aid between players !<\/p>\n<p>A game session lasts about one hour inside the exposition space, divided in several subjects. To answer the questions, players can get information from\u00a0medias (signs, videos, &#8230;). Players must\u00a0pay close attention to these medias since good answers brings less points after several\u00a0mistakes.<\/p>\n<p>You can easily guess that <strong>questions are about cancer<\/strong> : history of the disease,\u00a0screening for cancer, research, &#8230; Living hygiene is a determining factor in cancer risk, so <a href=\"http:\/\/www.who.int\/features\/qa\/cancer-red-meat\/en\/\" target=\"_blank\">put aside red meat<\/a>, eat your vegetables, go run a marathon and come back to read the end of this article !<\/p>\n<p>&#8230;<\/p>\n<p>Are you done with your vegetables ? &#8230; Great !<\/p>\n<div id='gallery-1' class='gallery galleryid-48 gallery-columns-3 gallery-size-thumbnail'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/davikingcode.com\/blog\/learn-more-and-in-a-fun-way-about-cancer-with-hygee\/screenshot_2015-12-12-23-19-20\/'><img width=\"150\" height=\"150\" src=\"https:\/\/davikingcode.com\/blog\/wp-content\/uploads\/2015\/12\/Screenshot_2015-12-12-23-19-20-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/davikingcode.com\/blog\/learn-more-and-in-a-fun-way-about-cancer-with-hygee\/screenshot_2015-12-13-00-32-17\/'><img width=\"150\" height=\"150\" src=\"https:\/\/davikingcode.com\/blog\/wp-content\/uploads\/2015\/12\/Screenshot_2015-12-13-00-32-17-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/davikingcode.com\/blog\/learn-more-and-in-a-fun-way-about-cancer-with-hygee\/screenshot_2015-12-13-01-39-59\/'><img width=\"150\" height=\"150\" src=\"https:\/\/davikingcode.com\/blog\/wp-content\/uploads\/2015\/12\/Screenshot_2015-12-13-01-39-59-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/davikingcode.com\/blog\/learn-more-and-in-a-fun-way-about-cancer-with-hygee\/screenshot_2015-12-12-23-22-03\/'><img width=\"150\" height=\"150\" src=\"https:\/\/davikingcode.com\/blog\/wp-content\/uploads\/2015\/12\/Screenshot_2015-12-12-23-22-03-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/davikingcode.com\/blog\/learn-more-and-in-a-fun-way-about-cancer-with-hygee\/screenshot_2015-12-12-23-40-52\/'><img width=\"150\" height=\"150\" src=\"https:\/\/davikingcode.com\/blog\/wp-content\/uploads\/2015\/12\/Screenshot_2015-12-12-23-40-52-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/davikingcode.com\/blog\/learn-more-and-in-a-fun-way-about-cancer-with-hygee\/screenshot_2015-12-13-00-38-53\/'><img width=\"150\" height=\"150\" src=\"https:\/\/davikingcode.com\/blog\/wp-content\/uploads\/2015\/12\/Screenshot_2015-12-13-00-38-53-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\n<h1>Conventional web server vs real-time web server<\/h1>\n<p>To have the &#8220;community&#8221; dimension inside the application,\u00a0a <strong>web server<\/strong> is used. The tablets used by the players communicate with the server with a simple client-server communication. The web server hosts\u00a0a MySQL database which\u00a0gathers information about the questions and answers, current game session, progress of each player (in the form of a <a href=\"http:\/\/www.json.org\/\" target=\"_blank\">JSON<\/a>\u00a0text file <a href=\"#footnote1\">*<\/a>), &#8230;<\/p>\n<p>We encountered a big deal with this web server : should it be a conventional one or a real-time one ? The main difference between the two types is the following : a real-time web server is aware of the occurrence of events he was listening to. Thus, it doesn&#8217;t require to periodically check for modifications.<\/p>\n<p>With a real-time server, it&#8217;s easy to warn players that a session has started \/ has finished or to update the global score on each tablet. But, it requires much more work (and time) to build such server.\u00a0On the other hand, the architecture is cleaner and more maintainable and you don&#8217;t have to make useless requests every 2 seconds.<\/p>\n<p>Finally, we decided to keep a <strong>simple web server based on traditional technologies<\/strong> : Apache, PHP, MySQL, &#8230; and\u00a0<strong><a href=\"http:\/\/www.silexlabs.org\/amfphp\/\" target=\"_blank\">AmfPHP<\/a><\/strong>, a\u00a0free and open source software\u00a0which\u00a0provides a really simple way of <strong>connecting a client with a server<\/strong>, especially useful in <a href=\"http:\/\/www.silexlabs.org\/amfphp\/documentation\/your-first-project-using-amfphp\/\" target=\"_blank\">Flash to get data from the database<\/a>.<\/p>\n<p><span id=\"footnote1\">\u00a0<\/span><\/p>\n<p>* Why the hell a JSON file to store data and not make use of the database ? Well, I was not fond of this solution either, but since the client wasn&#8217;t sure about his needs about player&#8217;s progression tracking, we had to be flexible, and the JSON file was the fastest solution VS modifying the database.<\/p>\n<h1>BackOffice<\/h1>\n<p>Using the web-server to only let players indirectly communicate between us would have not been very intelligent. In fact, the major part of the <strong>information stored in the database can be exploited from a website<\/strong> accessible by\u00a0allowed users.<\/p>\n<p>This web interface let the monitor to <strong>start and stop a session<\/strong>, and <strong>administrators to get statistics about past sessions<\/strong> : individual and global score, number of tries per question, completed &#8220;stations&#8221; (set of questions about the same subject), &#8230; There is also the possibility to edit questions and to edit a lexicon, accessible by players at any time to get definition of complicated words they can encounter.<\/p>\n<div id='gallery-2' class='gallery galleryid-48 gallery-columns-4 gallery-size-thumbnail'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/davikingcode.com\/blog\/learn-more-and-in-a-fun-way-about-cancer-with-hygee\/hygee-screenshot-1\/'><img width=\"150\" height=\"150\" src=\"https:\/\/davikingcode.com\/blog\/wp-content\/uploads\/2015\/12\/Hygee-Screenshot-1-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/davikingcode.com\/blog\/learn-more-and-in-a-fun-way-about-cancer-with-hygee\/hygee-screenshot-2\/'><img width=\"150\" height=\"150\" src=\"https:\/\/davikingcode.com\/blog\/wp-content\/uploads\/2015\/12\/Hygee-Screenshot-2-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/davikingcode.com\/blog\/learn-more-and-in-a-fun-way-about-cancer-with-hygee\/hygee-screenshot-4\/'><img width=\"150\" height=\"150\" src=\"https:\/\/davikingcode.com\/blog\/wp-content\/uploads\/2015\/12\/Hygee-Screenshot-4-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/davikingcode.com\/blog\/learn-more-and-in-a-fun-way-about-cancer-with-hygee\/hygee-screenshot-3\/'><img width=\"150\" height=\"150\" src=\"https:\/\/davikingcode.com\/blog\/wp-content\/uploads\/2015\/12\/Hygee-Screenshot-3-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\n<p>To create the back office with a proper architecture and to avoid make it from scratch, I\u00a0used\u00a0<strong><a href=\"http:\/\/crud-admin-generator.com\/\" target=\"_blank\">CRUD Admin Generator<\/a><\/strong>, an open source tool to generate a complete backend from a MySql database, made by\u00a0<a href=\"http:\/\/jonsegador.com\/\" target=\"_blank\">Jon Segador<\/a>. The website generated thanks to this tool uses the\u00a0PHP micro-framework <a href=\"https:\/\/silex.sensiolabs.org\/index.html\" target=\"_blank\"><span style=\"display: inline-block; margin-bottom: -10px;\"><img class=\"alignnone\" style=\"height: 30px; text-decoration: none;\" src=\"https:\/\/sdz-upload.s3.amazonaws.com\/prod\/upload\/silex-logo.png\" alt=\"Silex\" \/><\/span><strong>SILEX<\/strong><\/a>.\u00a0It is built on the shoulders of <a href=\"https:\/\/symfony.com\/\">Symfony2<\/a> and Pimple and also inspired by sinatra.\u00a0 <a href=\"http:\/\/fabien.potencier.org\/\">Fabien Potencier<\/a>, the creator of the Symfony framework, and <a href=\"http:\/\/twitter.com\/igorwesome\">Igor Wiedler<\/a>\u00a0are behind this framework (<span style=\"color: #3366ff;\">Co<\/span><span style=\"color: #969696;\">co<\/span><span style=\"color: #ff0000;\">rico<\/span> !). For the nice aspect of the website <a href=\"http:\/\/getbootstrap.com\/\" target=\"_blank\"><span style=\"display: inline-block; margin-bottom: -10px;\"><img class=\"alignnone\" style=\"height: 30px; text-decoration: none;\" src=\"http:\/\/www.napspirit.com\/images\/technologie\/plateforme\/logo_bootstrap.png\" alt=\"Bootstrap\" \/><\/span> <strong>Twitter Bootstrap<\/strong><\/a> has been used and the iconic font <a href=\"https:\/\/fortawesome.github.io\/Font-Awesome\/\" target=\"_blank\">FontAwesome \u2665<\/a>.<\/p>\n<p>The framework is quite easy to use with the MVC design pattern (<a href=\"http:\/\/twig.sensiolabs.org\/\">Twig<\/a>\u00a0\u2665), but the CRUD Admin Generator terribly lacks of documentation and comments inside the code !\u00a0Hopefully, I had some memories about Symfony and I managed to fit the generated website to the client&#8217;s needs.<\/p>\n<p>One of the tools I used most is <a href=\"http:\/\/datatables.net\/\" target=\"_blank\"><span style=\"display: inline-block; margin-bottom: -10px; text-decoration: none;\"><img class=\"alignnone\" style=\"height: 30px; text-decoration: none;\" src=\"http:\/\/datatables.net\/media\/images\/nav-dt.png\" alt=\"Datatables\" \/><\/span> <strong>Datatables<\/strong><\/a>, a\u00a0plug-in for the <a href=\"http:\/\/jquery.com\/\">jQuery<\/a> Javascript library.\u00a0Free and open source, it adds advanced interaction controls to any HTML table : sort, pagination, search, &#8230; You can easily retrieve data from an Asynchronous JavaScript and XML (AJAX) request, filter and \/ or edit the data retrieved, add callbacks when a row \/ cell \/ header \/ footer is drawn, &#8230;<\/p>\n<h1>Deployment<\/h1>\n<p>A tricky part of the project was the deployment. The server which host the web-server <strong>must not have any access to the internet<\/strong>. To do that, the IP address of the server just has to be changed for a non-routed address.\u00a0After copying the files on their server, doing some configuration, I\u00a0had to help the\u00a0Information Technology Director to configure the last points.<\/p>\n<p>The IT director and I\u00a0struggled a problem with the connection to the database. The client&#8217;s server\u00a0was using\u00a0<a href=\"https:\/\/www.apachefriends.org\/index.html\" target=\"_blank\"><span style=\"display: inline-block; margin-bottom: -10px;\"><img class=\"alignnone\" style=\"height: 30px; text-decoration: none;\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/0\/03\/Xampp_logo.svg\/langfr-96px-Xampp_logo.svg.png\" alt=\"Xampp\" \/><\/span><\/a>\u00a0to &#8220;emulate&#8221; the server (the time was running !). We thought that XAMPP was trying to use the internet configuration when it has been installed (thus, the routed IP address) and, since the IP address had been changed, MySQL\u00a0was not able to access the database anymore.<\/p>\n<p>Finally, the problem was a simple line to change in the connection parameters :<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\n'db' =&gt; array(\r\n   'driver'   =&gt; 'pdo_mysql',\r\n   'dbname'   =&gt; '&lt;database_name&gt;',\r\n   'host'     =&gt; '&lt;ip_address&gt;', \/\/ replaced from 127.0.0.1 to local ip address on the network\r\n   'user'     =&gt; '&lt;user_name&gt;',\r\n   'password' =&gt; '&lt;password&gt;',\r\n   'charset'  =&gt; 'utf8',\r\n ), <\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In 2013,\u00a0the\u00a0regional center Hyg\u00e9e dedicated to the\u00a0information, prevention and education about\u00a0cancer, opened on the site of the hospital complex of\u00a0Saint Etienne (in the south-west of Lyon). So as to\u00a0raise awareness of the cancer disease\u00a0among the young\u00a0public, the Hyg\u00e9e center asked\u00a0 Dowino\u00a0to create a quiz game playable on tablets.\u00a0Further to successful projects with us (A blind &hellip; <a href=\"https:\/\/davikingcode.com\/blog\/learn-more-and-in-a-fun-way-about-cancer-with-hygee\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Learn more and in a fun way about cancer with &#8220;Hygee&#8221; !<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_discordance_state":"","_discordance_checked":true},"categories":[4],"tags":[8,13,10,7,9],"_links":{"self":[{"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/posts\/48"}],"collection":[{"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/comments?post=48"}],"version-history":[{"count":68,"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/posts\/48\/revisions"}],"predecessor-version":[{"id":129,"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/posts\/48\/revisions\/129"}],"wp:attachment":[{"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/media?parent=48"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/categories?post=48"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/tags?post=48"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}