[TriEmbed] Learning Curve

[Chip McClelland]

To all, 

I have been heads down for the last month finishing a project that I have put off for some time.  I have enjoyed building my trail sensors and using them to collect data in our Raleigh area parks.  What I had neglected we writing the software that could upload those datapoints to my laptop and perform the analysis.  I knew I was going to have to learn some new language(s) and, for some reason, a pure software project is just not as appealing as writing embedded code.  Well, I finally bit the bullet and wanted to share a few things I learned and ask for a little help as well.

First, here is what I wanted to accomplish:
	- Build a web-facing application that anyone who uses my sensors could access
	- Provide a clean, simple interface that would not require much hand-holding
	- Upload a text file with a specific format defined by the firmware on the sensor (5 line header and each row holding a date/time value)
	- Parse the file and find the last recoded data set
	- Preview the file so folks could see what was in it and allow for trimming to take out “noise” from placing and retrieving the sensor
	- Refine the results with the ability to add historical weather data (rain can cause false datapoints) and some basic filters for “noise”
	- Produce a report that the user could print or store 

After some false starts (Ruby on Rails - too painful) I decided to use the current favorite - JavaScript / HTML / CSS.  I used CodeAcademy <http://www.codecademy.com/learn> - an awesome free service - to learn these languages.  I learned that I also needed a framework to simplify making a professional page, the CodeAcademy courses use the Bootstrap <http://getbootstrap.com/>  framework (free thanks to Twitter) and an extension to JavaScript called Jquery <https://jquery.com/>.  There are a huge number of frameworks and JavaScript extensions out there and I looked at many of them but, I can recommend this as a solid combination.

If you have ever taken a CodeAcademy course, you will come to love their interactive interface.  I wanted to use something similar in my development work.  I wasted a fair bit of time looking at professional tools such as Eclipse, WebStorm, Sublime - all great for some folks but I wanted that integrated and real time experience and found JSBin. Here is a simple example  <http://jsbin.com/lozudo/3/edit?html,css,js,output>that you can play with showing how JavaScript, HTML and CSS work together to create an interactive site.  There are others such as JSFiddle but JSBin is the only one I found that includes a console (where error messages go) and I planned to make a lot of mistakes.  

There are a number of non-intuitive things about JavaScript and the CodeAcademy courses got me started but, more often than not, I would run into a problem and need a specific answer.  That is where StackOverflow <http://stackoverflow.com/> came to the rescue over and over again. Their process helps float credible and relevant answers to the top of the heap.  I owe the folks who volunteer their expertise to this site a huge debt and I hope to provide answers to questions there myself someday (once I am allowed to - you have to earn that right by building your reputation).  

Also, there are a ton of free and open APIs that make things like getting historical weather (WeatherUnderground <http://www.wunderground.com/weather/api/>) and tables and charts (Google charts visualization <https://developers.google.com/chart/interactive/docs/index>) as well as methods for file upload and parsing.  I took full advantage of these in this project.

JSBin has a method to “host” your site and I wanted to ask a favor.  If you have a few minutes, could you please try the following exercise?
	- Download a sample data set from here <http://triembed.org/blog/?attachment_id=1059>.
	- Using Chrome or Safari (not sure if Firefox will work), Go to this site <http://chipmc.jsbin.com/> where I am hosting the application
	- Find the file on your hard drive (select local time) and see if the flow from preview to refine to repot is intuitive.
All comments on usability, clarity, look and feel are welcome.   

I would also be interested in any advice or assistance in looking at my code.  I am sure I have done many things wrong in this first project you can see the code behind this project here <http://jsbin.com/qidela/1/edit?html,css,js,output>.  Also, if there are any JavaScript gurus or groups I can ask for help, please let me know.

If you made it this far in this long note, thank you.  If you can provide me with any feedback, I would very much appreciate it.  Now, with this project done, time to get back to something that requires soldering!

Thanks,  Chip

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.triembed.org/pipermail/triembed_triembed.org/attachments/20150425/d9419c3c/attachment.htm>