Meteor: a better way to build apps by Roger Zurawicki

Key Takeaways

[Music] hi my name is Roger zeroi and I will be covering the cs50 meteor seminar meteor is a new framework um devoted to um the new kind of web not the PHP um making requests back and forth kind of web we saw in the PHP P set but the more Dynamic JavaScript parts of the web um thing me things metor can do includes live updating um and um immediately and immediately um communicating between um um users of the same website for this seminar um we have code hosted at my GitHub um you can go to this URL um and download it if you know how to use Git You can clone the repository um if you don't know how to use git or have not used GitHub that's completely fine um I will show you really quickly how we can go to GitHub and there's an option to download a zip right there once you download this directory um you can get started playing with our code um more information about meteor can be found at meteor.js just need to type meteor and um meteor will install um as you can see um we have to make sure we installed meteor so I'm just going to run it one more time to make sure that meteor is properly installed while I have meteor installing I can show you some live demos of meteor sites um going um live right now on the internet um I have a demo of um our um app um you can access it at the following URL this is um the to-do app that we have in our seminar directory the URL for this is ru- rabbit. meteor.js and now once you have an account you can add tasks for example um one of the tasks I might need to go um pick up my laundry and if you're on this site online you will actually see this task on your computer in real time I can show you a quick demo of this by opening um rosu rabbit in another tab with the same URL and we see that the same data comes up we can also run it in a different browser say I run it in Safari that way we're not logged in so we have the same meteor app and once it loads we'll see the same data we did in the first one as you can see um I'm not logged in here and when um the audience checks data it updates on all the browsers simultaneously this is one of the really cool features about meteor um with almost no work you have live a live updating app that changes on all of your devices at once if I check the checkbox here in my um to-do list we will have um in my other Chrome browser the um item checked off and this happens instantaneously all right so it looks like um meteor installation is ready now so now let's go back to the to-dos app and run this uh locally if you have a meteor project you can just run it with the command medeor here once you do this meteor will do some preparation to make sure all of your code is in check and then it'll tell you that the med that the project is ready to be served you might need to um allow your firewall if um if your computer blocks you so what um meteor is telling me right now is that at this website local to my computer I can see what this meteor project is note that right now my app is not accessible to the internet we'll cover how to bring your metor app to um a live site a bit later on so I'm just going to copy this URL now and go into Google Chrome and this is the um to-do list for the example you can see they implemented a few more features here um we have different tabs um we have the same account features and we can add new lists now one of the really cool feature about meteor is that not only can this work on your web browser but you can also create native iPhone and Android apps through a tool called phone Gap so some projects will come preconfigured for um running on iOS like the to-dos app so all I need to do to run it in iOS is type meteor run and then iOS and when I do that meteor will prepare the package again and then once it's ready it'll load the iOS simulator on my command note you can only run iOS apps in if you have a Mac computer um you can run an Android um you can run your apps on Android um on all platforms so now you can see that my um iPhone simulator came up on my screen and in just a moment it'll load with the app if we make it just a bit smaller to fit on the screen we see we have our iPhone app and um just so we don't get confused let's make sure we are um on the same website The Local Host 3000 so right here is an example of the meteor app I have the to-dos app running both on a phone and on a web browser and when I change stuff in the web browser it IM immediately goes to the phone and I can delete something on the phone and it changes in the web browser now normally to create a native phone app for iOS or Android you need to know either Java or objective c a techn the technology meteor uses to allow JavaScript to run as your app is called phone Gap what your app essentially is is a web browser and meteor handles all the tricks the tricky Parts involved for um bringing that web browser to uh your iPhone or your Android device you can see that the user interface is smooth and it looks and feels very much like a native app notice that if I go to the home screen now I also get an icon this isn't a website like you'd find in Safari this is its own app you can install and delete it if you'd like we we can briefly show you um what the code for this kind of to-dos app looks like if you look in the to-dos folder you will see there are many folders but um over the course of the seminar we'll try we'll understand what each folder is used for let's go into the terminal so we can see the files a bit better I'm going to press contrl C to stop the server and now I'm back in the to-dos app I have different folders here like the client folder the server folder and um these folders simply mean that everything everything in the client folder gets executed on your web browser everything in a server folder gets executed on a server what I want to point out is that what we had when we had our phone running and our web browser these were clients but what's running in a terminal that's the server we have other folders like lib which is Library code like your helper functions um which you can use um on both the client and the server and then you have a public uh folder and resources folder necessary for getting your images and other CSS loaded so if you have meteor installed we will continue with uh the tutorial for um meteor uh you can go to this URL um meteor.js show you some examples of how our C knowledge can be transferred to JavaScript I've created a few examples they are in the JS directory so if in the seminars folder you look there's a folder called JS and in here we have a few examples let's open up um the first example in C very quickly what we see is your standard um hello world command you notice in C that you have quite a few lines and as cs50 students know we have we need a main function and we have to include the standard IO library in order to call Print F let's look at how JavaScript Compares I'm going to open ex1 DJs commented out is what the C code would look like and the line below is all you need to run in node you don't need a main function you don't need to include any files and you don't need to return you just call console.log this is the equivalent of your print F and it takes the same arguments print FW and um in order to run it instead of running make ex1 you would just call node um ex1 JS you you write node and then the file and it gets run it does not get compiled it can JavaScript is a interpreted language so it it doesn't need to be compiled before it's run if I want to run um ex1 doc I have to make it first and then I can run the ex executable to get the same output let's quickly cover some other um JavaScript Concepts let's look at example two in ex2 DJs um NX 2.c uh we can see that we have um some code let me quickly go to a better text editor that will show these new lines a bit better all right here we have um example 2.c here we have different types that we're printing out and as we know print F takes different percent arguments to um access different pieces of data if we want to print a string we call percent s if we want to call a floating Point number we call percent F and um there's no easy way to call a Boolean by its true or false value but if you use percent D you can get a zero or one for false and true JavaScript is a bit nicer for us in JavaScript let's look at the few differences we have in this file first um you notice that in C we have to initialize um every every variable with a Type S is a charar it's a string and it cannot be any other type N is a float um B is a bu but in JavaScript there are Dynamic types that means that you don't need to tell JavaScript what types your variables will be you just say VAR for variable the name of the variable and then its value so a VAR can be anything really it can be a string it can be a floating Point number it can be a character it can be a bull and um console log Works a bit differently um if you want to print a number you call percent D but um most values can be printed as strings just fine let's run this in node to see what would happen I can call node x2. js and we get um print f with the values cs50 um n as the floating Point number and then b as the Boolean converted to a string true what what about if we made example 2. C well um we would we still have some more um annoyances with print F notice that the floating Point number has to be formatted correctly and that the Boolean can't simply be displayed as true or false all right now let's look at example three in example three we are um showing um how you would use a for Loop in fact it's very simple one of the nice things about JavaScript is that it is C based that means that a lot of your code will look very similar and feel very much the same in a for Loop the only thing that has really changed here is instead of in i we have VAR I we can still assign it to Value zero check that it's less than five and incremented by one with a Plus+ operator uh we call console.log on I and that will print us a um number with each a line let's run it really quickly to see what it outputs we got a new number on each line another thing I want you to notice with console.log is you didn't have to write back sln for the new line console log will print everything on its own line that's a nice feature that JavaScript gives us now let's open up example four in example 4 um first in the C we are calling a few functions um notice um that we have to declare the functions before we use them in main if we had main first and then add and then High uh make clang or GCC would give us an error saying that it doesn't know what high is it doesn't know what ad is so you in C you have to be picky about the order in which um you call your functions let's look at how you can do this in JavaScript we have different files because there are a few different ways to do this um one way is a pretty much a direct translation because functions in C return types and JavaScript doesn't really know or care about what type you return you don't write a type instead you just need to write function and everything is pretty much the same as before when you have a variable like in AD we just need to write X and Y we don't need to say x is an INT we don't need to say Y is an INT um we return with the same Syntax for High um we declare it with function instead of void notice that whether it's void or non-void it's still all the same function and um we simply um don't put anything in the parenthesis and it looks very much like the C code and Below we can call it below if we look at example 4B we notice that um I've changed a few things the only thing I've changed really though is the order we have the same functions but now they are declared after they're used in console. log and high on lines 1819 if you did this in C make would throw an error here this works just fine and I can show this to you by calling node um on the 4B example another way we can call functions is by Saving functions as variables like I said um a variable can have any type one of the types of variable can have as a function so if you look at example 4 C what I've changed here is um VAR ad instead of function ad and now add equals a function this function here is anonymous it has no name so it's just function and then the parenthesis um the syntax after that doesn't change but you do have to keep in mind that um you have a variable that you're storing the function into add and a variable that you're storing into high because add and high are now variables and not functions something uh changes this is a common bug I see in a lot of people's javascripts and something to keep in mind when I run this let's see what happens I get an error it's saying um undefined at this point so it's saying it doesn't know what ad is because now ad is not a function ad is a variable and you haven't actually given add a value yet when you used it that brings us to example 4D where if you want to use um variables as functions you just need to make sure they get the value before they're used let's move on to example five then um here we um talk about strs in C um in C strs have this fixed structure to them because you have to declare them before you use it and you say I have a student and every student has exactly one name one G one year one gender it has to have all of them it can't have any other values and they have to be specific types then um we can we can you know initialize a struct in this um nice syntax because it knows the order so it knows that Roger is a name it knows that 2016 is a year and M is a gender because we told it this um list is a struct student and then you can print accessing s.n name let's see how we would convert that to JavaScript um notice that um s is now a variable and there's no type it's just a VAR again because it doesn't matter if um the type of this variable is a pointer it's a struct or anything else we have a slightly different syntax um this syntax is the object syntax you might have seen it in Jason this is exactly Jason actually stands for the JavaScript object notation this is how you um Define objects in JavaScript we have a key which is the value like name and we give it values on the other side of the colon and um one thing to keep in mind is you don't need to have a name and a year and AG gender for an object an object can have no values it can have as many as you'd like we can use these objects in just the same way we would use a struct s.n name we can run it really quickly by doing node example 5.c um um we can't actually run a C file in node it doesn't know what c is it only knows JavaScript when we run the ex5 DJs we get um the value which we expected okay so let's move on to uh example six here I just want to talk a little bit more about JavaScript arrays because they're a bit different than what you're used to in C um arrays are notated not with the brackets like in see but with the curly braces but brackets you you can have an empty array like a r r in line four you can have arrays with um multiple values and you access them just the fine just the same way in C um up to line seven everything seems pretty straightforward one minor difference is here at line 10 the way you get a length of an array is just by calling do length an array can actually be treated like an object and this object has a length property that you call to get the length of it notice that this is different in C because in C you have to know the length of your ahead of time so another nice thing about arrays is that you can have different types if you have an array in C they're arrays of a specific value either a struct pointer or Floats or cares um here um you can have different values I first had a floating Point number then a Boolean then another integer and actually they can change types too look at line 16 array two is changing from being a number an integer to a string another nice thing about arrays is here at 19 um they have infinite size you can just say I want the 100th element to be um the string legit and um this doesn't seem to make sense because the array only has space for three elements so the end should be two but when you do this let's see what array three becomes we would run this quickly with node example 6. JS uh we get this really long array and what happens is we have the first few elements and then a bunch of blanks until we get our string JavaScript fills in the array as it's needed let's finally um go to our last example um here we have a list of different students I want to talk a little bit about some nice um aspects of of for Loops in JavaScript in C for Loops are kind of limited um they're um they have a fixed structure where you have a variable you have a condition and then you do something at the end of the loop and of course this works in JavaScript as we saw in the previous examples but we also have nicer ways of doing this in JavaScript um this is called a for each Loop sorry let's go back to example seven here we can also say um section is a list so give me every I or every index in that list then we can get the student by just calling section of I so all of the um code of setting I equal to zero and making sure I is less than the length and adding I one to I every time that's taking care of you for that's taking care of you rather nicely with this for for each Loop not only do for each loops work in lists or arrays they also work in objects which is also nice um you can get the name of every um property by just uh taking a dictionary or an object like student and then just saying give me every key a key would be um these properties name or house so what's going to happen here is that um we print out first the name and then the house of every student I can run this in node really quickly to um show you we get um um first the C style for Loop where we get every object being printed out and then we have the JavaScript um style where you can just print out every key and value individually all right now that we've covered nodejs I think we're ready to in um to get started with meteor like I said meteor did a great job of providing some readymade examples for you that you can explore um on through this tutorial or in the seminar folder but here I want to start um more from scratch let's create um a simple to-do application this is kind of the um base of um what the to-do application I showed you earlier um is um in this term um in this tutorial you will see that there's a command meteor create to create a new meteor project you need to call this in order to um run meteor projects because it will run um the commands to create the meteor files necessary for your project if you go into the terminal we can go into the folder called step one and step one um will correspond with uh the first step in the tutorial notice there are folders step one step two all the way to five and each one is um corresponding to a step in this tutorial I'm going to open it in my text editor here so we can see a bit of what uh was created we notice that there are four main um parts there's a meteor directory medeor and that you usually don't need to touch that meteor takes care of that folder and it just makes sure that your project um will work correctly we also have three um files a HTML file a Javascript file and a CSS file let's first start with the HTML file this looks um at first glance this looks like a normal HTML document but notice that there are a few differences one this isn't actually a complete HTML document we're missing the HTML tags this is normal in meteor you're not expected to um create these HTML tags that's done for you you want to begin um if you want to create a website you just need to start with the head tag Define that and then Define the body tag but if you notice in this uh um in this HTML file um we have an in a new tag we have the template tag this is not normal HTML this is a special version of HTML that meteor makes available to you it's called space bars you can Define templates as little modules kind of like helper functions in your C or JavaScript code um this template would have a name called task and you can see right here on line 13 that you can call these templates and what meteor will do is just fill in these tasks um for you another thing you might notice is a bit different is this each um function um each will take the the variable tasks and kind of go through it in that for each Loop we saw in example seven this um each can take an a dictionary or a list an object or a list and it'll just go through all of the values like a for each Loop would so if we have a bunch of tasks this will call the template on each task let's run uh the meteor project just to see um that this happens I run the meteor project with just meteor or meteor run and now meteor just will need to quickly prepare the project start the database as necessary and then um host the app locally we can go to our web browser now and we'll see that we have a very uh Simple app um so uh what we saw showed up was actually um the step one um the step one file um let's move on to uh step two only because I think it will serve the same purpose I'm just going to change to the step two directory and run meteor again so we can see the template we just worked with yes a question um if we're getting permission denied is that what's the concept of that umor if you're running meteor run and you have permission denied um some of your files might not have the right permission set so um it you have to check um where what where the permissions are off they could be off in your meteor project or they could be off in the meteor files themselves if I downloaded it just now from your GitHub then what what should I do access um if you want to make sure you you can access it um there's a command you can run let me quickly um write it out so other people can see I'm going to open a new tab here and go into my seminar folder um chamod is uh the command to change permissions and you can say R for do it recursively for every file and um a command uh permissions you can try 0755 to make sure you have full access and everyone else can read and if you just run this command it'll make sure the permissions are in are check uh in check for the whole directory running ls- L can show you the permissions and more detail this looks okay uh what's most important is that you have um all three rwx for all the files in the Seminary directory did that solve the problem it says missing oper uh um you have to make sure you have a DOT at the end of your command all right let us quickly um go back to the Local Host the app we um have and you'll see that we have a few tasks here um as expected we have a bunch of CSS which you don't need to worry about the medor tutorial just gives this to you to make um your to-do list look a bit nicer than the plain HTML and and um we have the Javascript file which I'll go into more detail a bit later but it just provides these tasks this is Task one this is Task two this is Task three so this is the data meteor is getting one of the cool things about meteor is that um changes can happen automatically um if I wanted to change uh the name of the first task so it would say this is not task one and I save it then when I go to the web browser you can uh refresh it and it automatically says this is not task one um you can do the same thing in any of these files make a change instead of to-do list I will have it my to-do list and one thing you just noticed that I didn't even have to refresh the idea of refreshing is kind of solved for you with medor um whenever it detects a file changes it will load the changes for you um this works on all files whether it's HTML CSS or JavaScript um to show you what um this app would look like without CSS I can remove it all and and um when it's reloaded you now have a not as nice looking to-do list let's put that content back and um surely enough it refreshes and R CSS is back great we can now um move on with the tutorial um we let's talk about um step two templates this is um what we just saw with um the different tasks meteor will explain to you what templates and how this logic works but let's just look at the code to see if we can make sense out of it um in very simple applications like uh what we have in the simple to-do step one step two step three step four step five we don't have any folders we don't have the server folder I mentioned we don't have the client folder um that was mentioned so meteor will run all the files it'll run it both on the client both on the server and if you want parts of your JavaScript code to run just on the client then you need to make sure um that you have an if statement kind of like what we have in our Javascript file here so meteor only if it's the client then I want to Define um a template but a template helper called tasks this um what this uh code really does is it says um there's a object called template that meteor provides and we're going to add a helper helpers are um these tasks these things like the tasks you'll see that if we go back to the HTML file um we called each on tasks tasks is not defined in the HTML it's defined in the JavaScript and our meteor needs to know what tasks is when we go into JavaScript here um tasks is this helper helper you can think of it is a template variable and what does tasks do well it returns this list of values because it's a list we can call each in it so that's why we call each on tasks and now we have task um what does task do well it has this Arrow here at the after the curly braces that means task is a template it's not a helper like what we just saw it's a template we've defined and where have we defined it we've defined it below right here all this template does is render a list item and it calls text now text seems to be a helper but I'll show you that this is actually still a data member of tasks when you call each it goes into the data structure a little bit like the for each Loop it now just looks at the first element in our object um we see that text is defined here in our object so meteor is smart to know that we're talking about this text not the helper called text it just gets the value of this um text here and displays it as HTML and that's how the data goes from the JavaScript to the HTML moving on though um in this example we hardcoded those values meteor does um two really nice things for us um besides the live refresh that we showed it also manages our database if you had to work with PHP you had to configure PHP my admin you had to make sure your tables were all in check you had to do a lot of work to make sure your data was formatted correctly and PHP could communicate with it now meteor um uses a new paradigm this is a more modern way of handling a database it's a technology called mongodb just like in JavaScript we saw that it didn't matter what types the data had everything was a VAR it wasn't a Char star it wasn't an INT it wasn't a struct it was just VAR this VAR that mongodb works kind of the same way you don't have to Define your tables you don't have to say a table has a name which is an INT it has I don't know a dollar which is a decimal um it's just these JavaScript objects all these vars essentially and this is um a really powerful way to prototype your app um and that that's why meteor takes advantage of this if we go to step three let's um see at what has changed if we look at um the to-dos HTML not much um CSS hasn't changed at all but the small change we see in HTML is we've changed how tasks is defined tasks is now a function that means that every time we want to get tasks we're going to run this function it does doesn't return the function as a value meteor is smart to actually run the function to see what we get out and it returns this thing called tasks we've defined tasks on line one and it's a collection is referring to the database meteor uses and um this new just means like let's make a new collection call it tasks in my SQL this would mean this would be equivalent to looking for the table called tasks has collections not tables so this just looks for um tasks now template um in our helper for in the template all we have to do to get all the tasks is this function find and this empty brace um this is more particular to syntax there is plenty of documentation online for how you can make efficient and really useful queries but um something like this is good enough for just finding all the data now one of the issues you might see is that um we never actually add data so what happens when we actually run um step three let's quickly go into step three and run meteor notice that I had another meteor project running somewhere else so meteor um can't is doesn't like that I'm just going to quickly close uh the other meteor with contrl C go into step three and run meteor again notice it's starting mongodb because mongodb is a part of every meteor project so it says my application has errors um that's a nice feature meteor has it makes sure your HTML is well validated Let's uh quickly look at why this might be um it seems I have um accidentally copied the wrong meteor code the wrong HTML code um if I save it now meteor automatically restarted the server and um now the app is running as expected notice to fix this um you can just run the same HTML file from step two copy it into step three we can go back to our local host and now we see we have our to-do list great but it's empty we don't actually have any tasks in our database so let's talk about a few ways um we can do that if we go back to the terminal um we can close it and run meteor this is um if you're familiar with how meteor works this actually gives you access to the full meteor um the full U the full DB for meteor um notice that you have to be running meteor first for this to work so if I run this in a new tab I can um make go back to the same directory and uh now meteor works just fine um this is a prompt um meteor um let me make it a bit bigger so we can see this looks a bit different than what you might be used to you don't really need to use the whole point of medor is so that you can use JavaScript but if you're curious the API doesn't use SQL the structured query language it uses its own language that looks a lot like JavaScript um very quickly we can find the table via db. tasks and um turns out um it's telling me um turns out uh if we run find kind of similar to what we had with meteor we can load all the elements the problem is we don't actually have any any tasks defined so it can't get them we can insert though so we can run uh insert with the command insert and um we just give it an object and um we just make sure the format is what we expect if we looked at um step two we saw that every task was an object with um a text as um the key and whatever your to-do item was as a variable so we can do something here um we can have insert a task called I come from and we press enter and it runs we can run find again and we see that there is an object here um mango it an ID which you don't really need to worry about um what's you need to what's important to you is the data you put in is the data you get out let's go back to our website and hey um are task loaded and you can see that because um medor is very smart um and always refreshes for you I didn't have to touch the page it automatically loaded Let's uh run some code in JavaScript though to do this um like we have note in the back end to execute our JavaScript we can also run JavaScript directly in our browsers you can do this by a feature called inspect element if I right click on a section of the page there's an option called inspect element if you're running um a browser like Safari you may need to enable your developer tools before you get this um uh this feature what we care about is the console so we will just go to the console at the bottom um now we can run any JavaScript here like the JavaScript files I showed in the Js example um but now let's look at um tasks uh we can run our Command um and hopefully I'll be able to make it a bit bigger so we can all see all right if we run tasks. find and you'll see that this is the exact same code that um the Javascript file um uses in step three this tasks. find we can run the same thing and now um we get some weird stuff how do we actually get the data well um we have to run this command called Fetch this is very useful for debugging um what you get here is a cursor and this is um a nice uh way meteor has optimized fetching data this cursor has all the features for live updating and refreshing the page when something is changed but it won't get us the data we can get the data via Fetch and you see we have an object and it's just like what we had in with an and the text we put in so how do we insert um an item in meteor well we um just have tasks and then um we can run the same insert command giving a dict a dictionary or a um object with um the same format text and then um I come from the console take a look above because when I do this um it shows up on the website on matically notice that you can um put um anything you want in these items it doesn't have to have a thick structure I can have a equal to the number three and b equal to false and it all works I can even choose uh not to include a text at all this is just not recommended though because then meteor will not know what to display but in each case we get an ID and that's the ID of the object you can use as we continue with step four and step five the tutorial will show you um ways that you can create UI elements using the HTML you know um to create um different tasks let's look at step four really quickly um we'll see that we added a section about events templates can have helpers which get us data but it can also call events and this is where stuff becomes useful because events are what happen when you click on different things on your website here um there um our code is telling us to add this event add it when um you've submitted something with the class new task um what you have here is um a CSS selector so this just looks for an HTML element that has the class new task and it looks for the event like submit other events include click hover double click similar to what you get in normal HTML what you give it here is now a function and um you can um have your code in that function this function is what ends up getting called when you submit this new task let's um look at the HTML just so we understand what this new task is we've added a form here with class new task and it has an input with um um that takes text and this is where we will add our new um tasks Let's uh run a step four in the website to see what it looks like we can quit first out of the mongod DB we had from our previous example with contr c and let's change into the step four directory we'll run meteor again to start the server and unfortunately I had a meteor running in another terminal so I'm just going to make sure this closed let's quit this and change um to part four step four okay now our meteor code is running and um you can see that it it updated without us even having to refresh the page um what has changed here is now that um we don't have any tasks um but we have um a form here this text box to add our new tasks and um we can type our task here I come from the HTML page and when I press enter it got submitted we can um see what happened as defined by the JavaScript code we what this function did was take the text um from the form and then just call tasks. insert like we did in the console um they also chose to add a created at date um this is how you specify the current time um after that it clears the form by making sure the value is the empty string and then calls return false to make sure nothing else happens when you return false from a form event that stops execution say a form has an action like submit to a PHP page if you had not returned false you'd return true it would end up making that request false intercepts it and stops it right there so that was a little demo about um how meteor works and we've been following the tutorial um for a while and you can please feel free to continue doing this um there are plenty of resources and the tutorial is actually just um very good about explaining what's going on I do want to show you now in the um few minutes we have left what are some of the cooler features of meteor and um what are some of the more useful packages one of the great things about meteor is that you have a package system you can easily incorporate code that many thousands of developers have written worldwide into your media your project um one example of this is what you might do in Step n of the tutorial where you are trying to um add accounts to the um your meteor project as um if we have a cs50 um PHP project we would have to rely on the framework or code our own um um code to make sure we securely handle passwords and usernames and stort in the database and all of that it turns out meteor has some packages to do that for you and uh to do it very easily um what we can do is add um a few packages so let's do that right now um in our console I'm going to quit the project and right now go into um simple to-dos now simple to-dos is the project that you will have after being done with um Step 11 or step 12 at the end of this tutorial and let's quickly look at it to see what are the different Fe features we have let's just make sure it's running right sometimes it takes a while to refresh but here it is we have um option to hide completed tasks and uh we can sign in and um this was done with a meteor package it's great we have now usern name and password signin but what if we wanted to add um another kind of login mechanism let's say I wanted to log in with my meteor account I'm going to run meteor ad and this is the syntax for adding packages I can say accounts and um accounts. meteor it's going to now find the package and um load it um you can see that I have not spelled the I have not found the right package name so how do you find out about packages well there's a great website made available by um the meteor people called atmosphere j.com atmosphere JS onew word.com um is a great repository for finding all of the um meteor packages in the Repository I can search accounts and then it'll show me all the relevant stuff all um accounts all um you know packages with the account's name while um that loads we can try adding some other packages maybe the meteor package isn't working right now but um I can add Facebook um I can add the account and then run the meteor project again once this starts let's see um what the what's changed on the website you can see um if I might have to refresh it here um I have a button to configure Facebook login and um here I have all the instructions meteors prepared for you for setting up a Facebook app and um you can um use that information to um um add your IDs once that's done you'll have Facebook login working in your app I'm just going to um get an app ID and a secret um just to show you how this might work you will need a Facebook account to use uh Facebook uh developer options um I can let me just quickly find um the meteor keys that are necessary I have another metor project that I'm going to use and I'm just going to take the um the keys from that file and um once I find it I'll just be able to copy these Keys into um my Facebook so here is a key and this is secret you should not be sharing this with people and then you give it your app secret and this is so Facebook knows you are you um and you save the configuration um I think in the process I have uh stopped my meteor app so I just want to make sure it's uh still there see okay let's make sure our meteor is running so the web page is running notice if we stop the meteor server um the page is still there it just won't update anymore the medor server is necessary for making sure the page is live okay I've submitted it and now I can sign in with Facebook now it's just a matter of having a Facebook popup and um putting in your account information and logging in once you do that Facebook might um now you for some more security so we'll just stop there the point is is that when you're done with that you'll have Facebook login meteor has a bunch of other packages as well um you can log in with Google+ you can log in with GitHub you can log in with Twitter or if you search you'll find plenty of other things like Meetup LinkedIn and uh meteor developer so meteor developer was the package I was looking for meteor ad meteor accounts meteor developer in the meantime I also want to recommend some other packages for your projects um it might prove a useful to include the jQuery package this allows you to use jQuery and your clients you could just do it with one line and meteor will make sure you are up toate on jQuery um I also recommend um Houston admin this is kind of like a PHP my admin kind of tool for your mongod DB this allows you to edit your data quite easily without having to go to the shell like I had done earlier in the seminar so now that that's running let's run meteor again and um see what we can do you noce that like adding some packages might um have them present some warnings you won't need to worry about that with Houston so we can now have the option to configure meteor um admin and they give you the directions if um you want to set that up we can also now go to slash admin with this is brought to you by the Houston package and um this is a meteor admin interface um you just create an admin account like so and um if you refresh the page um you you might have some collections uh uh showing up um it's a very useful tool and I strongly recommend it um you can see that because Houston was giving some errors we don't have any collections uh showing up right now the way you would use Houston is um making sure this function gets called in your simple to-dos so it Houston doesn't know what my tasks are we set up a collection called tasks let's um go into simple to-dos and just make sure that um in the JavaScript um we have added tasks to um our collections okay we've now saved and um it's building the application refreshing and let's see see now we have some tasks and we can add some new tasks um but if we want to add tasks let's do it with um the app itself now we can add some data hi this this is a task it seems kind of strange that um we're not seeing any tasks we might want to check if we got any errors here or maybe somewhere else if we go into admin um that seems strange if you um pull the repository after this um seminar I will make sure that simple todos works with Houston unfortunately it doesn't seem to be working at this very moment um are there any other questions me um Houston normally is a tool that works very well um Houston specifically is a bit buggier than the other ones but um I do recommend it when it works yeah what can you do with the Facebook package once user logged in with their Facebook uh once the user logged in you can make call to the Facebook API um that a lot of that lies more in how Facebook opens your API meteor makes sure you have the connection but everything after that is a matter of learning how to use the Facebook API all right um thank you very much for uh the cs50 seminar and meteor if you have any questions you can um email me at um my email address um listed below the seminar and I'll be happy to answer your questions I'll also be at the cs50 hackathon um should you need help with your meteor projects thank you for watching