{"id":198,"date":"2017-08-23T12:06:42","date_gmt":"2017-08-23T00:06:42","guid":{"rendered":"https:\/\/max-drake.cc\/?p=198"},"modified":"2018-12-21T14:02:13","modified_gmt":"2018-12-21T14:02:13","slug":"creating-room-survey-app-site-survey-part-2","status":"publish","type":"post","link":"https:\/\/max-drake.cc\/?p=198","title":{"rendered":"A HOW TO for creating a mobile Room Site Survey App- Part 2"},"content":{"rendered":"<p>Where we left off at end of Part 1.<\/p>\n<figure id=\"attachment_199\" aria-describedby=\"caption-attachment-199\" style=\"width: 2989px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"size-full wp-image-199 lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2017\/08\/CRUD1.jpg\" alt=\"\" width=\"2989\" height=\"1024\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2017\/08\/CRUD1.jpg 2989w, https:\/\/max-drake.cc\/wp-content\/uploads\/2017\/08\/CRUD1-300x103.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2017\/08\/CRUD1-768x263.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2017\/08\/CRUD1-1024x351.jpg 1024w\" data-sizes=\"(max-width: 2989px) 100vw, 2989px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2989px; --smush-placeholder-aspect-ratio: 2989\/1024;\" \/><figcaption id=\"caption-attachment-199\" class=\"wp-caption-text\">At end of Part 1. Read database, display data on screen &amp; edit and delete items from database, but NO Search facility<\/figcaption><\/figure>\n<p><strong>Part 2. How to get the search tool working.<\/strong><\/p>\n<p>I tried to code myself, adding to what I had already achieved, but spent a day going around in circles.<\/p>\n<p>Then I came across this :<\/p>\n<p class=\"post-title entry-title\">Weblesson <a href=\"http:\/\/www.webslesson.info\/2016\/10\/datatables-jquery-plugin-with-php-mysql-and-bootstrap.html\">Datatables Jquery Plugin with Php MySql and Bootstrap.<\/a><\/p>\n<p class=\"post-title entry-title\">This was a one file search using JQuery &amp; Datatables.\u00a0 Its search engine works fine, but it needs to pull up all the records (6285 rows) before it formats itself to only show 10 records and has the Search text box. So a little slow. Unfortunately, in the tutorial there are no edit or delete buttons, so records can be searched but not edited.<\/p>\n<figure id=\"attachment_201\" aria-describedby=\"caption-attachment-201\" style=\"width: 1757px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"size-full wp-image-201 lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2017\/08\/CRUD2-1.jpg\" alt=\"\" width=\"1757\" height=\"1124\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2017\/08\/CRUD2-1.jpg 1757w, https:\/\/max-drake.cc\/wp-content\/uploads\/2017\/08\/CRUD2-1-300x192.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2017\/08\/CRUD2-1-768x491.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2017\/08\/CRUD2-1-1024x655.jpg 1024w\" data-sizes=\"(max-width: 1757px) 100vw, 1757px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1757px; --smush-placeholder-aspect-ratio: 1757\/1124;\" \/><figcaption id=\"caption-attachment-201\" class=\"wp-caption-text\">So, Search &amp; Pagination but no Add, Edit or Delete<\/figcaption><\/figure>\n<p>So, I have either Add, Edit and Delete or Search, one or the other.<\/p>\n<p style=\"text-align: left;\" align=\"center\">I ended up going back to one of my earlier tutorials that I had worked on, based on a book database and re-edited it for my Database, in the end it did not take too long, but I do recall it looked quite daunting 3 days ago when I first got that particular tutorial operating. So now we have all of the aspects operating, and it filters, using the search text box, down to a specific room for editing<\/p>\n<p style=\"text-align: left;\" align=\"center\">Weblesson <a href=\"http:\/\/www.webslesson.info\/2016\/12\/codeigniter-ajax-crud-using-datatables-insert-add-data.html\">Datatables Jquery Plugin with Php MySql and Bootstrap<\/a>.<\/p>\n<p style=\"text-align: left;\" align=\"center\">\u00a0This one got me to where I wanted to go, it still takes about 30 econds to load, so anty editing, adding or deleting refreshes the whole system. So not necessarily what you would need for a survey tool where Wifi\/signal could be weak.<\/p>\n<figure id=\"attachment_202\" aria-describedby=\"caption-attachment-202\" style=\"width: 1799px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"size-full wp-image-202 lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2017\/08\/CRUD3.jpg\" alt=\"\" width=\"1799\" height=\"947\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2017\/08\/CRUD3.jpg 1799w, https:\/\/max-drake.cc\/wp-content\/uploads\/2017\/08\/CRUD3-300x158.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2017\/08\/CRUD3-768x404.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2017\/08\/CRUD3-1024x539.jpg 1024w\" data-sizes=\"(max-width: 1799px) 100vw, 1799px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1799px; --smush-placeholder-aspect-ratio: 1799\/947;\" \/><figcaption id=\"caption-attachment-202\" class=\"wp-caption-text\">Searches, adds, edits and deletes and refines to single room<\/figcaption><\/figure>\n<p style=\"text-align: left;\" align=\"center\">So, yes, the process reads from the database, allows you to filter by room and then lets you edit, delete or add data.<\/p>\n<p style=\"text-align: left;\" align=\"center\">The database needs to be developed to add condition information, as we can already get quantities from the BIM model. But the Proof of Concept is working so far.<\/p>\n<p style=\"text-align: left;\" align=\"center\">The next part is to link this to a mobile app, the App Inventor tool I am exploring.<\/p>\n<p style=\"text-align: left;\" align=\"center\">After that, speeding the process up and extending the tool.<\/p>\n<h3 style=\"text-align: left;\" align=\"center\"><strong>Operational CodeIgniter Database tool CRUD ( Create,Read, Update &amp; Delete)<br \/>\n<\/strong><\/h3>\n<p>The Tool can be viewed and explored <a href=\"http:\/\/astra0.com\/CI\/ci_crud\/index.php\/Book\">HERE<\/a><\/p>\n<ol>\n<li style=\"text-align: left;\">It is SLOW !!!!!<\/li>\n<li style=\"text-align: left;\">It is reading all the records in the database. So the bigger the dataset, the slower it is going to be.<\/li>\n<li style=\"text-align: left;\">One method of speeding it up is to break the dataset up into groups of buildings, each reading a smaller dataset.<\/li>\n<li style=\"text-align: left;\">Another method may be to only partially upload part of dataset to say an XML or JSON file and work offline with that dataset, then update the original dataset later. This was the\u00a0 reason I explored the 2nd version below, but alas not what I expected.<\/li>\n<\/ol>\n<h3 style=\"text-align: left;\" align=\"center\">SitePoint Example with only 5 files<\/h3>\n<p style=\"text-align: left;\" align=\"center\">So I looked\u00a0 at other examples and found a reference to SCRUD\u00a0 (Search, Create,Read, Update &amp; Delete).<\/p>\n<p style=\"text-align: left;\" align=\"center\">I found this tutorial online from<strong> SitePoint Pty Ltd<\/strong>, based on article <a href=\"https:\/\/www.sitepoint.com\/creating-a-scrud-system-using-jquery-json-and-datatables\/\">HERE.<\/a><\/p>\n<figure id=\"attachment_209\" aria-describedby=\"caption-attachment-209\" style=\"width: 2780px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"size-full wp-image-209 lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2017\/08\/scrud.jpg\" alt=\"\" width=\"2780\" height=\"1680\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2017\/08\/scrud.jpg 2780w, https:\/\/max-drake.cc\/wp-content\/uploads\/2017\/08\/scrud-300x181.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2017\/08\/scrud-768x464.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2017\/08\/scrud-1024x619.jpg 1024w\" data-sizes=\"(max-width: 2780px) 100vw, 2780px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2780px; --smush-placeholder-aspect-ratio: 2780\/1680;\" \/><figcaption id=\"caption-attachment-209\" class=\"wp-caption-text\">SCRUD version from the SitePoint tutorial<\/figcaption><\/figure>\n<p>The other aspect I like is that the row settings (5,10,25 etc) are set at the beginning unlike the codeigniter(CI) example, so all the features are on display at the beginning, (rather than loading all the lines in CI and then showing the search button)<\/p>\n<p>The Search function is\u00a0 fast on both methods, you can just use&#8221; -01&#8243; and it looks for all the data based on that criteria and sorts them pretty fast.<\/p>\n<p>I used a small dataset for testing and it did very well with it, but when I came to hook it in to the 6800 lines of code it still took 30 seconds to load and each Add\/Edit\/Delete command would require a refresh of the dataset, so , another 30 seconds each time. This is because it pulls up the complete dataset.<\/p>\n<p>This pulls the data from the MySQL database via a JSON file. I had thoughts of being able to use the loaded JSON dataset, in a file on the device, so updates could be made to the JSON file without refresh,( <em>maybe this can be done, but not by me at this time with my current skill level<\/em>).<\/p>\n<h3 style=\"text-align: left;\" align=\"center\">Database Retrieval Access &amp; Speed<\/h3>\n<p>So, after getting 2 methods of accessing database information and displaying on a device working, there are a number of paths I can explore, the 2 simplest as follows:<\/p>\n<ol>\n<li>At current state, <strong>copy database to say 20 rooms<\/strong>, so that it pulls up complete dataset, but as it is small, speed is adequate.<\/li>\n<li><strong>Modify the code so that it only calls to the database in the first instance to upload only the room number required.<\/strong>This would be the logical method\u00a0 and also fits in with the idea of the app, that scans room number and goes and asks for that info.<\/li>\n<\/ol>\n<p>So for<strong> 1<\/strong> above, at the moment I can get the app to operate by copying MySQL database, writing a query to trim the data down to a manageable size and then point the programme to that database. I would then need to look at how to merge the updated data into the original database (or an updated copy of it). I suppose there is a merge or update function that could be used. I may need to explore that process.<\/p>\n<p>For <strong>2<\/strong> above, there are a few challenges.<\/p>\n<ol>\n<li>I need the App Inventor App to pass the Room Code across to The SCRUD programme<\/li>\n<li>Write a function in the SCRUD programme that will receive this Room Code and query the database and retrieve the information.<\/li>\n<li>The SCRUD programme to GET <strong>only<\/strong> the data from that room only and when adding\/Editing or updating, only Refresh that Room Code information only.<\/li>\n<\/ol>\n<p>In both methods, the question is, do you use the SCRUD programme to edit the data or try and develop the editing tools in the App inventor App? The App inventor also does the coordinates and the Photos too.<\/p>\n<p>At this point, in the proof of concept, I would go with the SCRUD programme doing the data input and the App doing the photos and coordinates.<\/p>\n<h3>Validation &amp; Pick Boxes<\/h3>\n<p>Currently, I have been dumbing down the current validation in both the SCRUD programmes, just to get the fundamentals working. In fact, these need to be quite robust.<\/p>\n<p>A method that Simon De Favero of <a href=\"https:\/\/www.rtvtools.com\/\">RTV Tools<\/a>\u00a0 when developing the Revit Parameter Extraction Tool RTV Reporter Pro for Wellington City Council was to have a DB Table with acceptable naming conventions for inputs ()eg Type CEILING FINISHES (OK) but CEILING FINISH (singular, not acceptable) . He then allowed for pull down boxes to ensure that only acceptable naming conventions were used for inputs, speeding up the data collection process.<\/p>\n<h2>Paused state of App development-part 2<\/h2>\n<ol>\n<li>App Inventer on hold during the SCRUD<\/li>\n<li>SCUD programmes explored and operational as a programme, but not versatile enough as it takes too long to load and edit RELEVANT DATA!<\/li>\n<li>Next interim step is to update App Inventor App to put a button on Start Screen to call SCUD programmes. I am choosing this direction as I am sick of looking at the SCRUD code files at the moment. A time of reflection and distance.<\/li>\n<li>Then figure out how I can get the Room Code to be passed from App Inventor App to SCUD programme<\/li>\n<li>Revisit App Inventor App to explore GIS and Camera issues I have. GIS slow &amp; Camera files to have room codes in file name.<\/li>\n<\/ol>\n<p>Overall not that successful but it gives me an understanding of the issues.<\/p>\n<p>Some key takeaways:<\/p>\n<p>1\/ Being able to use the app to capture data off-line. Means that you have to have a database (storage)\u00a0 on the mobile to store this information in the interim.<\/p>\n<p>2\/ Upload part of the information (if doing a re-survey of an existing building) into database (storage) on the mobile prior to doing site visit.<\/p>\n<p>3\/ If can work off-line then faster. You only have to download when back in office and update main asset database (once data validated).<\/p>\n<p>I didn&#8217;t take this any further. I explored pre-built free alternatives that can be tailored to your data capture requirements like:<\/p>\n<p><a href=\"https:\/\/max-drake.cc\/2018\/06\/16\/asset-tiger-free-online-asset-management-service-with-free-mobile-app\/\" target=\"_blank\" rel=\"noopener\"><strong>Asset Tiger 1. free Online Asset Management Service with Free mobile app\u00a0<\/strong><\/a><\/p>\n<p><a title=\"Free Mobile &amp; Web Survey Application for easy data collection using Epicollect5\" href=\"https:\/\/max-drake.cc\/2018\/04\/21\/free-mobile-web-application-for-easy-data-collection-using-epicollect5\/\" rel=\"bookmark\"><strong>Free Mobile &amp; Web Survey Application for easy data collection using Epicollect5\u00a0<\/strong><\/a><\/p>\n<p><a title=\"Free Mobile &amp; Web Survey Application for easy data collection using Open Data Kit (ODK)\" href=\"https:\/\/max-drake.cc\/2018\/04\/25\/free-mobile-web-survey-application-for-easy-data-collection-using-open-data-kit-odk\/\" rel=\"bookmark\"><strong>Free Mobile &amp; Web Survey Application for easy data collection using Open Data Kit (ODK)<\/strong><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Where we left off at end of Part 1. Part 2. How to get the search tool working. I tried to code myself, adding to what I had already achieved, but spent a day going around in circles. Then I came across this : Weblesson Datatables Jquery Plugin with Php MySql and Bootstrap. This was [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":210,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,29],"tags":[111,53,54,110],"class_list":["post-198","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surveying","category-web","tag-building-condition-survey","tag-facility-management","tag-facility-operations","tag-room-survey"],"featured_image_src":"https:\/\/max-drake.cc\/wp-content\/uploads\/2017\/08\/scrud1.jpg","featured_image_src_square":"https:\/\/max-drake.cc\/wp-content\/uploads\/2017\/08\/scrud1.jpg","author_info":{"display_name":"Max Drake","author_link":"https:\/\/max-drake.cc\/?author=1"},"_links":{"self":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/198","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=198"}],"version-history":[{"count":0,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/198\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/media\/210"}],"wp:attachment":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=198"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=198"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}