Updated document.txt

rhgraysonii authored
revision 5806bdc4182b5cbf07428bb6cccc2dce912ee1dc
document
#A Fun Introduction to Meteor

#About Me, This, and Whatever:
My name is Bobby. I'm a hacker-type who recently attended the [Epicodus](http://www.epicodus.com) programming bootcamp, and have been programming in one way or another for the last 9 years. I'm a Rubyist by trade, but a generalist by hobby. I have found myself having far too much fun Meteor, but felt there was a lack in material on the "free content" level to get someone who intermediate programming skills from "beginner" to "understanding how to produce a real application" between what is available free online and the book [Discover Meteor](http://www.discovermeteor.com) (which might I say, is an amazing resource and worth every penny). You should also check the authors [Sasha](https://twitter.com/tmeasday) and [Matt's](https://twitter.com/tmeasday) respective Twitters. I am not affiliated with them in any way, but they made a truly great product and if this tutorial is of interest and you enjoy it, it would be a great step to take next.

The free tutorials found online now mostly go through semi-boring, obvious, or trivial applications of Meteor to show its base features. Chatrooms, live updating simple data, etc. are all the norm. I thought a virtual speed reading library of content one can save on their own is not a huge or crazy concept, but at least one that contains some interesting problems to approach and would be serviced well by a framework that can allow a very rapid prototype that is deployable, which Meteor is perfect for in this case.

*Shameless Plug: I'm currently looking for work as a developer anywhere in the US after finishing Epicodus, and working freelance with some great people in a small studio. If you would like to chat about anything (even just your strange fetish for Lisp), feel free to shoot me an email (bobbygrayson@gmail.com) or reach me on [Twitter](http://www.twitter.com/graysonrhii).*

#What is Meteor?
Meteor is a new(er) web framework. If one must put it simply, Meteor offers live data, all the time. Without digging into pull-and-diff, database theory, and other jargon, we can easily discern this: Meteor makes making live-data web applications simple. A chatroom can be implemented in fifteen minutes with a total of 3 files that are all very readable being used. For some ideas of examples, check out [Meteor's official examples](http://www.meteor.com/examples). At the time of writing Meteor is at 0.7.1 and I will update this to be compatible with all future releases, making a separate branch for each in case someone needs documentation referencing the project from an older state and has not upgraded.



#Why Meteor?
Meteor is a quick to pick up, simple to operate framework to rapidly build a simple prototype. It allows you to experiment, and is production capable! If you are interested in seeing this, check out these:

[Telescope](www.telesc.pe)

[PeerLibrary](http://peerlibrary.org/)

[MadEye](https://madeye.io/)

And even more at [Made With Meteor](http://madewith2.meteor.com/)


#What are we doing?
We are going to build a simple web application. It is nontrivial, but it shouldn't take more than an hour or so after some basic introduction if you know your JS. As mentioned before, we will be building our very own Speed Reader that allows us to copy and paste in content and save it as "books" to read at whatever speed we please. We will build it to be completely mobile and tablet compatible, that way we can even use it on the go, or in real life! A tutorial application with application in day to day life!? JIMMINY CRICKETS BATMAN THIS IS GREAT!

#Getting Started

###Launching the base application

If you have not installed Meteor yet, begin by going to the [Meteor Quick Start Guide](http://docs.meteor.com/#quickstart). If you run windows, I'm sorry. But, thankfully folks nicer than me have put together a getting started guide for you [here](http://www.addthelink.com). For reference, we will NOT be using meteorite for this outside of styling with bootstrap (which can be worked around easily without using the smart-package), so you can still do the rest of this tutorial though many others may not work if you need Meteorite integration.

Start with:

meteor create yourAppName

if you are on Windows. However, from this point onward know that when you see use of "mrt" you should instead use "meteor". We are using Meteorite on the OSX/Linux side of things just to simplify adding bootstrap and going over package management and integration later. These will be asides you can ignore, due to the fact it will be later addressed.

If you are a user of an OS more pure, you should instead put in:
npm install meteorite
mrt create yourAppName

Now that we have a directory, lets navigate to it and take a look at what we've gotten ourselves:

cd yourAppName
ls
>yourAppName.html yourAppName.css yourAppName.js smart.json

Did you get the appropriate output? WOO, we've got hello world. Navigate the browser to localhost:3000 and you will be able to check it out. See Hello World and a button? Great! Now, any sane developer will get some git going up in here, so let us do that.

*A note to Windows users: you will not have smart.json listed as referenced above. There will be no further differences until otherwise mentioned from this point onwards; so long as you remember our agreement about the use of meteor over mrt prior.*

git init
git add . -A
git commit -m "first commit"

#Making A Plan

As said prior, we are going to be implementing a simple speed reader, similar to what is offered by [Spreeder](http://www.spreeder.com/). What do we need to do this? Well, let us consider the situation from an object-oriented perspective:

If we are going to display text rapidly, we probably don't want to just use a giant string. If we ever want to tie it to a user, and allow them to save the passages they have pasted in to read, we would then default to some kind of object. This object would also have to be able to iterate through all of its words, and somehow split them apart after the user gives their input. I have my own implementation I did with this, but the general idea is that I wanted to create a "Book" that could be saved, and a User can obviously then save as many books as they please. With Meteor, since we are using MongoDB, a NoSQL setup, we will not to worry about any relationships to be explicitly defined, such as "A user has many books, and a book belongs to a user".

#Getting to the Code
Here is the code I used for the reader. At this point it is placed in "yourAppName.js". However, later, we will add some structure to this file system as we add complexity and modify this a bit.

var Book = {
setBodyOfText: function(text) {
this.bodyOfText = text;
},
createWordChunks: function(numWords) {
var ourWords = this.bodyOfText.split(' ');
this.wordChunks = [];
for(var i = 0; i < ourWords.length; i+=numWords) {
this.wordChunks.push(ourWords.slice(i, i+numWords).join(' '));
}
},
setInterval: function(wordsPerMinute) {
this.interval = Math.round((60/wordsPerMinute) * 5 * 1000)
},
nextChunk: function() {
var nextChunk = this.wordChunks.shift();
this.wordChunks.push(nextChunk);
return nextChunk;
}
}


Now, without going into a vast explanation, this combined with the function we are about to define below would allow one to implement this with user-inputted text on any static-page website using only jQuery. You can see an example of this [here](http://roberthgraysonii.site44.com/projects/newspeedread/index.html). Also, please note that though I wrote the code for that myself, the stop button does not work, and the words will display infinitely fast if you do not put in an initial input. These are problems that will obviously be solved in this setup. It is still useable, and even has a book statically loaded (*The Curse of Lono*, by the late and great Dr. Hunter S. Thompson). Anywho, please do not judge me, I would much prefer a [pull request](http://www.github.com/rhgraysonii/speedreaderjs) for this long forgotten project that I've not the time to work on right now. Here is the next function, however leave it commented out for the time being inside your *yourAppName.js* file:

//function stepThroughWords(reader) {
//window.setInterval(function() {
// $("div#text-display p").empty().append(reader.nextChunk());
//if (stop) {
// window.clearInterval();
//}
//}, reader.interval);
//}


This isn't the best practice, but I felt it to be most understandable from a code-readability standpoint introducing the models and functions here. Now, replace the default .html file with this:


Speed Reader





Lets commit the changes:

git add . -A
git commit -m "added reader and word-stepping javascript, set up formatting for the html document to display text in these ways"

Now lets take a dive into getting a way to save all that text!

#Meteor Collections