 People who are using Windows laptop please use this question account at nitrous.io Have you all done that? After that take Node.js, select any region, then green box Are you able to see the screen? It's pretty rare It's only for you who are using Windows ok Now type in the command in the console, parts, parts install media After that you can follow the same thing Media create, lower Are you able to do this? Then open number console and type in media model Before that you need to start media, so just type in media command But here Node should be ready to set the code time Yeah What do you need to do in nitrous.io? The website nitrous.io, what do you need to do? So if you don't have an open to open, media is not supported in Windows right now So if you are having a Windows laptop, you have to code using nitrous So it's like an online ID What do you say is that? Yeah So let's get started I think Windows users will have some friction We can't do anything about it because media is not really supported in Windows right now So if someone is using Mac, we can work with it Or open too So we will be developing a full-face app So you can just visit the demo, it's team-sync.media.com So we will be creating a collaboration tool You can join the team because it's under request So it's a small tool where you can update your status, add missions Then chat with your teammates So basically this is what we are going to build on the social What's this game? Hasn't it? Just type in hasn't it So enter button doesn't work, you have to click send Okay Do you accept? Come to Dashboard and see if you see this So I hope everyone is having the media or Mongo running Okay So in this workshop we will be starting with Mongo queries So we will be getting familiar with how to work with simple insert, create, update, delete commands Then we will be moving on by creating a small template Actually we will be cloning a repository which will just have static HTML After that we will be adding back in data to it We will be wiring it up and finally replying our app So little more in detail what we will be doing So we will be working with collections Collections are nothing but tables in my school Routing like how to route pages to pages Then publishing relevant data out Then sessions, accounts, then permissions etc So I won't be going through theoretical aspects of it You will be learning it while you are building it Yeah that's what we are going to do So introduction to media We have seen apps When you create apps before media it was like you need to write the schema Which is a little difficult part Then after that we have to write APIs for that You write server-side APIs Then we need to take care of security also And finally we will be connecting that wires to the front end And this was a huge amount of effort And many platforms tried to solve it up Many famous came work and tried to solve this problem But they took two or three part of it like client-side Or some took server-side That's where media came in and they said that We are going to handle everything And you will have only one language, JavaScript So it's JavaScript both in the front end and in the back end So this is how media works It's built on top of Node.js It sits between database and your client So what it does is that It checks if there is any changes in the database And if there are any changes in the database It pushes it to the client It pushes it to the interface So that's how it works People might ask If media is pulling the database in a very frequent basis Is it scalable? That's the question many of them ask So what happens is that in MongoDB You have something known as operation logs So with that what happens is that Database itself tells the media that This is what is changed So the media doesn't have to pull every time In the database So meteor comes up with packages So if you see meteor list If you type in meteor list you can see all the packages Which you have added So meteor has two kinds of packages Core packages and atmospheric packages Core packages is something which comes up with media itself Which you can strip down to your requirements And atmosphere packages is like packages Which is contributed like users like me and you So even you can create packages Go to atmosphere.js.com You can see all the packages Which meteor supports So we will start up with Writing queries on Mongo Hope everyone is having this career So this is basically insert command So we don't define our collections and all We directly insert it So we don't specify schemas and all So what it does is it basically adds name The string learn web development In the collection known as machines To check if it's added you can type in the command db.missions.find So we will add another collection as tasks So we are inserting this Task into collections Task collection So if you type in db.tas.find It will give you the list of Now to update this Collection So you can see that So I added a field known as completed Of all But what it did was that it updated only one Of one of the collection So to update all the collections You can just add one more field Multi Update You can see that We used to have a query So everything is updated Now to Find only 11 fields If you want specific fields to be Shown For example if you want only name fields Of sorry I will give it out So now only name is Probably name fields are Of the completed fields Now to remove a collection So it's new You don't have any questions I will show you Initial version What is it Initial search query Or just running it Was it wrong? Yeah We were just playing with Moog We were not modifying anything in the app So meter comes with This version of Moog for your app So we are actually modifying You are not modifying anything in the team sync app But in your local host you are modifying It is not affecting the app Any more questions? Any more questions? No No You had to Put in multi-colon Another tab Another tab Another tab Another tab Another tab Another tab Another tab Coming back to detail In local host column 3000 So by default We go to the folder You will see three files CSS, HTML and JS So in meter So in meter you can create Folder sixes like this Client server public library collections So meter has two kind of APIs You can go to docs.meter.com to see all the APIs which meter has Client APIs Which works only on client So you can put all your client side APIs inside the client folder So you can write a JS file Inside the client folder And put your APIs inside that Same case with server also If you want to work with server You can create a server folder And put all the APIs inside it Public folder is where you add all your images All that kind of stuff Libraries is where you can add Client and server It's like you can add both server and client side APIs in that We will see how we are doing that Collections basically is just to add New collections and all So we will see how it works So if you come back to our app You have three folders helloworld.css, helloworld.html and helloworld.js So we will just open helloworld.html So here we have a layout file This is really specific It's okay if you just specify it once So all the Media pages you make Will have the same layout And this is basically a template So what you are doing is that Making a template on a state We have pressed the button And we are actually calling it over here That's how we call a template So you can just modify it For example if you want to create A navigation bar First what you will do is that We will add bootstrap library to it So in order to add bootstrap library You need to close the current Work in media You can press ctrl c and you can Close the server dbs dbs db You can add to add libraries What you can do is that Media add bootstrap This will add bootstrap to your App So you don't have to write that script You don't have to locally download The script and you don't have to Write the code This will automatically add bootstrap to your app After adding bootstrap against our media So we are creating another template On our now world We will paste the bootstrap navigation Past the code here So bootstrap is added And we created a template So you guys have any doubts Till this time Any questions So this is the html file We are creating a template on our Now world Inside that we are creating the Bootstrap navigation process And we are calling it Inside this We can Write templates in different files So media doesn't really care about the File structure So you can put it anywhere In any files You just have to write the template name So you can write the files Can you move on Or is there anything else you would like to know So I copied from So currently media adds Bootstrap 2.3 version So you just copy that and paste So there is a Inbuilt media package comes with bootstrap 2.3 But there is package bootstrap where you can add it So that was the basic app we created Now What you have to do is that you have to clone my report So just come out of that And just clone this Repository You will be seeing something like this Are you getting this thing After cloning the repository Type in media and start running And you will see this Are you getting the Have you downloaded the repository And are you able to see It's downloading media tool You can go inside the folder Yeah, clone the repository Go inside the folder type in media Are you getting it Downloading media tool By default media comes With bootstrap By default media doesn't come with bootstrap You have to add bootstrap So in the last example When you added the library You added the bootstrap css line No, I just added media add bootstrap So it will automatically add Or add that to your app You don't have to manually specify the css line So if you want to remove bootstrap You can type media remove bootstrap You don't have to manually Undergo the pain of writing So when I go to the browser I want its tables And the structure It's there And I go to the browser And it's good to have You can go ahead and come on in, but I'm trying to hold it in the top of my head. I think the server was having some issues, now people are starting getting it. I'm just finished as well, but what is the next video? I'll start explaining what's in the repository. We have client files, client folder, collection folder, library folder, public and server. What you have done is that I have made views folder. Basically you can add anything inside client. All the front end part of the code you'll be writing inside the client folder itself. There's no structure and now you can write however you want. I've just created a css folder and there's a file known as styles.css. You can write whatever styles you want inside it. Which is the new folder? Yeah, I'll come to that. This is styles folder, you can write whatever styles you want. You don't have to link styles or not. You can create any files and you can write right on top of that. Layout.html is the index file. It has specified the title of the page, head, body and the other stuff. You have to specify this only in one file. Any file you can mention it and meter will automatically add it to every file. So the file name itself doesn't matter. The video will look for something which has a head and a body. Inside that I have called navigation bar. Navigation bar is right here. So it's basically a navigation bar with static HTML inside. And a dashboard file and a dashboard template which is again another template. So you can just go through it. There's no meta-services scripts and client-series base. There's pretty basic HTML and static data. And they are called to display. So if you have any doubts on that, please ask me. So just go through the opposite tree in total. So basically different files are just for structuring purpose. If you want you can just put everything into a file. Yeah, absolutely. So you can actually do that. So once you install Meteor, when you install Meteor create hello world. You will see that right? There's only three files. So just to structure I have created it. But you can put however you want. So what all does Meteor end up adding by the time it serves the index HTML? How big is the payload? So Meteor has its own packages like live data package, DTP package which comes up with Meteor. So I think recently they had an update which happened like one hour back. That's why it was taken like that. Please navigate through the opposite tree. You can navigate through dashboard.html, layout.html and devol.html. If you find anything, if you don't understand anything, please ask. Yeah. If you source on the page. Yeah. There is nothing. It's just that house. Yeah. It's like that. Yeah. It's all right. Completely tentative on the point. Is someone still struggling to get this running? Yeah. So this is how it works. We have template HTML files which you just went through. Then we have client-side files which handles the HTML files. For example, you want to add handlebars and all basically adding it to the client-side files. Then we will have some server-side files which for security reasons, we'll be writing most of the code in our server-side. So what happens is that client-side makes a call to the server-side files and then based on the result, it will be updating the templates. So that's how a basic Meteor app works. So we will need, we are making a collaboration tool. So we need these four collections. Teams collections, machines collections, status collection and message collection. So you can add it by, there's a folder-nose collections. Just add a file inside that. There's a folder-nose collections. Yeah. Yeah. Okay. I think it developed as a folder was blank so we didn't upload it. So just make folder-nose collection and add this file into that. So this is how you define a collection. We don't use the variable at all. We have the direct-lite-missions is equal to the Meteor app collection. So a collection is defined for that. So we can do that for all the collections. What is that structure inside collections? What is that structure, messages, mission, state, mission? So it's like the tables in SQL databases. So we have here, in Mongo we have collections. So that's what it looks like. It should be in the title case. Yeah. Meteor and, you know, it shouldn't be in the title case. We can put it on here. So we have defined four collections now. So we can go to the console mission. So just like we added the Mongo insert, you can insert into collections. So it's like Meteor.insert. Name is equal to... Same as we did earlier. So this is the ID of the inserted document. One of the collections. So it's the same thing. Are you all done with collections? Any collections? So right now, what we have here is a static template. So this is one team. As we go through this one team. So let's see how we can connect the static template with the original election. So what we can do is that first we go to console and put in a new team on a steam stock insert. And we'll give the name ASCII. So if you see ID means that it's inserted. Now we'll come back to dashboard.html. So this is the place where we want to be added. So we'll go to... There's a file called helpers.js inside js folder which is inside client folder. So just go to the folder. So this is inside a template known as dashboard. The ASCII pushup is inside a template known as dashboard. So what we'll be doing is we're creating template.dashboard.helpers is equal to function. We're creating a variable teams. Inside that we are returning all the teams which are finding... So we have created a handlebar on a steam. So we'll see how we can link it into the dashboard input. So what we're going to do is that this teambox should be repeated for each team. So what we'll do is we'll add hash each. So here we'll add the key name which we gave which is basically name. And if we come back each teams so we'll specify the variable address thing also. So we can see... So what we're doing is for each teams we are showing that this is the key which must be added. We're adding it each. So if you come back to the console teams.insert. We can see that. So are you able to get it or do you have some doubts? Sir, for this app I have to defend that it should run only on localhost but it is running through. I didn't get it. Are you asking me if it's running on client or in the server? I am saying that I am running the both thing in my dev box which is available. Now in the dev box it is saying I am running at localhost for 3000 but I am not able to view it on the browser. So it's something... problem-free. This is dashboard. You can see right here this is there. Same thing that we do. You can see that on the dev box. That says the same thing. It is running on client. It is running on client. I don't know why it's not running on client. So how do I do that? I think it says 127 is my... it's not my... So you have to go to the dev box. Yeah, it is running in my dev box. Same thing. How do I change this to... How do I change this to... How do I do that? How do I do the operating... In production we are actually bundled and... I can just type in media... 49... Equal to 18... It's just... It's just... It's just... It's just... It's just... It's just... It's just... It's just... It's just... it's... So anyone who is having any doubts on till this part, where he is fine, right? Do you usually have where he is sharp? So you are using a nose? This is fine. Where is the things for fine? So you mean where does the collision is? The colors and things. I will get to that. Any other questions? Okay. The team center would be only restricted to be attached to the network? Yes. So now we have created the last board. We will next go to the teams wall. So right now we are not working on routing. So we will just change it in the layout file. So just replace dashboard with team wall. So you will be seeing something here. You can do that. So you will be seeing something like this. Are you getting this? So you have to go to the layout.estimal. Inside the body there is a line on the dashboard. Just replace that with team wall. What good? We changed it to team wall, right? Yes. So that is what is going on. Okay. So team wall is a template which is inside team wall.estimal. So this is basically static HTML template which I created. There is no data in it. All is like local static HTML. Get it? So now we will wire collections into this. We will start with status. So status is inside a template known as status container. Okay. So can someone tell me the code to write? So the template name container.status is equal to function. Return. You do not have to wait for me. You can add it for all the other collections. It is the same code. In the same code we wrote 14s. Each status. We put status here. We will put fully here. So if you have run that, you can just insert a new status. Status.insert. So we will get new status. The profile picture is right now static. We will change the data. This is changing on the client side. But when you are changing it, there are new dates on the more dv sites from other client. Okay. How those are pushed will help. Yeah, I will get to that. So right now we are not just working on the client side. We are working on the server side also. We will get to that. We will get to that in detail. So are you able to do this? Are you able to achieve this stuff? Yeah. So we are now going to do the same thing with missions also. So template name is mission container. Date we made static. So we can do the same thing with tasks also. Here comes. Okay. So if you see this as blank, we will insert into the status collection. So right now it's not even fetching from local static estimate. It's fetching from server side collection. So we need to insert it. Otherwise you will get it as blank. So if you insert it, you can just go to the console and insert it. So it's as simple as this. So now we get the status thing in the team box. How can we connect that to the actual? So you want... This is the dashboard page. This is right now in the team box page. Go to the layout file. There's someone who has dashboard. Okay. How strange is that? Yeah. Okay, good to know. It starts as a separate collection or a separate collection It's a separate collection. We do need to create another one of the collections. We have to create... Guys, we need to create a collection of tasks. Okay, good to know. Are you all fine till this point? Do you have any doubts or something there? Just don't wait for me. Just phone... It's the same code you will be writing for machine tasks and messages also. So we can play the same code. So we'll do it for messages. So it's inside the template known as chat container. So chat container of messages is equal to function. Let's just stop here. I may have moved this up a bit. We're asking for Starship messages. So we can see the book. Are you guys done till here? Okay, good to know. Okay, good to know. Are you guys done till this point? Do you have some doubts? Yeah. So we have... So here we don't have a schema at all. We're asking this how are we getting... Yeah, we can write like that. Is the insert operation certain like that? Okay, so it's... If you go to the... Over here. I'm writing this. So we are inserting from the console. Now we can add... We can use these buttons itself to create the teams and messages and all these things. So we have created a model for this creating. There's a fine one even.js. How do you associate... How do you find tasks of that particular mission? So I will be getting there. So if you see the navigation bar, this is inside a template known as now bar. So any events related to this, we can identify them by adding template.nowbar.events. And the event you want to add. So click as creating calling machine. So here we have a... In the team one template, we only have update status and mission. And those are the create insert options we have. So we need to write that event here. So update status is the ID name. And the model name is update status model. So if you do that, which event it is? And we will add function to this update status. So all we can do is that, we have to see which template is the event in. So if you go to team one and search for update status, it's inside a template team one. So we can add that template.team1.events. So we are getting this value of the status box. And we want the time in which it is updated. So we will add time. So this is a function to get the unix time right now. And then we will make an insert status.insert and pass the value which is status and time is added. So we will log it just to know if it worked. So we are getting an ID which means it's added. And it's updated. It's updated over here. So it's getting updated. So we will go back to the code so we can look around it. Are you guys able to get this? We need it out. So you have any issues? Can we show the previews? No problem. No problem? Yeah. So it's basically the same jQuery code you write. Are you getting it? If you don't have to wait for me, you can just move on and you know it's the same code you can write all over the place. For updating, adding missions, adding tasks. Are you able to do it? Thank you. How many of you have fallen behind and are unable to catch it? Can you just reach here? So where exactly are you stuck? So you just go back again and repeat what I have done. So we had a static estimate template called status. So what you are doing is we created a helper for it. So the helper for each template must match the template name. So for example, if you're creating a helper for this template, a status container template, you need to go to TeamWall, find the status. So this is the template name, status container. So in helper, we have to define that variable leap, which is state 2. And we are putting it in a set of... It's a function and we are returning that all the status are fine. Just return the cursor to the variable. So coming back to the TeamWall, for each status, we are putting it in the name and we are putting in the status at least. So this is the key name which you have given. So if it's the variable, it will be different. What are the events? Once again. So there's one more GitHub repo known as TeamSync. So we don't know how to clone it, but if you fall behind, just go through the code over there. If you fall behind or something like that, you can go and click on the complete code. So we have added update status. We'll move on to adding missions. That is GitHub.com. Or GitHub.com. slash jamms aamms slash TeamSync. Even if you fall behind again, follow this code, this is basically the same code. So what I'm doing is that I'm adding another event. So if we click on Admission, show the Admission model. So you'll see something like this. So we have shown the model. Now we'll make this form work. So we need to find again where is the Admission ID is present. So we'll go to TeamWall. We'll search for Admission. So it's inside a template. TeamWall template. So we'll come back. We have another event here. So the ID name of the pattern is BTN Admission. So we're getting the value of day, month, and year. This is a function to convert. This to Unix time. So we are converting day, month, and year from string to Unix time. And we are inserting it inside machines. So the ID of the text box is machine text box. And after that, we are just hiding the... We'll try adding the machine. In the somewhere there. We'll just log it. There's some error. So to debug, we can use a command as debug. We're using a hash in the button Admission. Click. Now we'll work on adding tasks. How will you display the date? Unix time somewhere we stored. Yeah, so we need to display the date. So for that, what we can do is that... We'll choose... So there's a library known as... I mean, you might be familiar with moment.js. So we can search for moment.js. So this is how we search for packages in video. So we can add that. Meet tier, add. Marty, call in moment.js. So if we don't even load the name of this... So that's why we can go to atmosphere.js.com. So here you can get all the packages and things like that. So... Play some time drive. Yeah, it's added. And we'll again run Meet tier. So if we go to pack to team.doll. We need to create a helper to convert Unix time to date. Full life. We'll do that. So we'll go to helpers. Template. Again, which template is running? It's EnvisionContainer. So EnvisionContainer.doll. So what we're doing is that... We're creating helper known as date. So this dot time which is actually referring to... The time inside missions. So inside missions we have... While we inserted, we inserted it as the K-value name time. So... This helper is using it. Is there any way to pass an argument? Yeah, you can also pass an argument. You can actually pass like... Value man. Let's call the test value. This one is perfect. It's EnvisionContainer. You can pass actually any time value that's showing in a... Forgetting this or... Confusion. So you can add the moment.js. Stop the working motion of Meet tier. And then add Meet tier add. MRT call in moment.js. MRT. What is that number? So MRT... So if you go to atmosphere.js.com So we have packages in Meet tier. This is like third party packages. So you can here, you can search for any package amount. So each package has a unique name. So moment... For moment.js, it's MRT add. Forget this. After you add it, you can run it back. So you still have some confusion, confusions in this. There's other, are you calling back or something like that? Yeah, that's impossible. So you might be getting NAM because... That's because you didn't add time cut out. So... Wait, wait. Yeah, it's fine. So you can clear all the missions by moving to Meet tier moment and typing. And then add it. So it's complete. Now we will try to add tasks to this mission. So we need to make this button work. So we'll just go there and go to un.js again. So this is under... This is inside the template team mode. So again inside team mode, you'll be creating another click command. So... Actually this is not inside the task bar. It's inside the mission container. If you see... So... It's inside the template called as mission container. So what you have to do is that you have to go to events.js. You have to create another event handler like mplay.missions.container.events as I have typed this column function. Now we'll just take the name of the model and task model. It's showing the model. But we need to tell that when you click on this task this particular mission... It's added to this particular mission. So... Can you even tell how can we do that? So we have our value over here. In one second. So what we can basically do is... This is inside each mission. So we can add attribute known as underscore id. So each... Each collection when you insert to each collection there's automatically an id variable which has been added by the MongoDB itself. It's a random agent already which has been added. Okay. That's a unique identifier for that particular document. So with using this... Now we need to create another... So right now we have created an event for this. Or this button. Now we have to create an event for this button. So this is inside a template known as... Teamwater. That's basically... This is this one. AddTaskModel. So the id of the button is... We can add tasks. So we need to add that function. So we'll go to help.json. The event.json. And we'll add that... We need the textbox name for that. The textbox name is TaskListBox. We need the id of the machine which we clicked in. So what we can do is that... We can put in event. So id is basically the value of that particular target. So we can call it by our mission id equal to event.currentTarget.value. So if task not equal to... We can add task.insert mission id calling mission id comma task and we can hide the task model. Okay. So we haven't... Changed the status name over here. We'll do that. So we'll go to... We'll go to that particular task model. Same thing. Each task has each. So we need to define help of others. Template.tools Oh, sorry. Task. We can match something. Oh, sorry. So we can see the task which is decided before. Before adding other stuff, if you... go to media. Are you guys dead until here or are you guys in here? So right now can you tell where we get stuck or something like that so that we can continue with it? Mission id is getting inserted as a point for each task. Okay. So we'll take a short break and then we'll be back. So if you have... We are still struggling with it. Please come to me. So you have 15 minutes break. We have some coffee upstairs. We'll get a break and then we'll be back in 12 minutes. Thank you. So I will finish off this part then add it to the git repo so that you can pull it and you can kind of resume working so that if you have foreign back in catch up. So the problem here was when you click on this... this button, on this button, yeah, this button and when you click on add task, actually the... if you see, if you inspect the element, it's the values getting added here and when you click on that, this part is getting ordered but when you click on add task, that particular variable is not found. So what we can do here is we can add something on sessions. So session variables helps us to add something like, you know, showing a model... or adding a model... Some functions like this we use it. We can also use it for adding a particular task. So for example, add a particular task in a mission. What happens is that when you click on this particular task, the variable is set to current mission variable is set to this particular mission's ID. And then what you're doing is that when you're inserting it, we'll call that session.get current mission ID. So we'll see how it works. So first we need to make this element work, so which is inside emails.js. Yeah. We'll just check if it's the same element. Okay. So you see the ID. So what we can try and do is we can make a session variable. Session.set current mission ID comma event.current.target.value and then when you insert it, session.get Okay. So this should do the job. We can see that thing. That's it. So here, we are returning the task. So what we can do is that we can return a task of particular mission ID. We can put var mission ID is called session.get. Oh, sorry, mission ID. There's some mystery going on. Mission ID is going to be set after we add it. That's what you click on. So current mission ID is set when you click on this particular one. Okay. So the problem is we'll just go remove the the task was not added because the variable was only for me. So now we come back and we return the task and we add it. So it's coming. So we have added, we have linked the helper only for the model. And we need to do the same for the mission container. So how we can do is that. So we'll go back to table and we'll find out where is the mission container which is so here the problem is we have missions and we have tasks inside. So what we need to do is that we need to pass ID of the mission to this task helper so that we can match that this task belongs to this particular mission and we can have it. So what we can do is that we can just pass the variable ID and we have to create a helper known as we haven't created a helper so we've created a helper known as template.tas task is equal to function and we pass the ID over here return task.tas mission ID call mission ID. Now here we push the problem. Okay, sorry. Yeah. So that part is done. Now we can see how we can edit the task like completed or not completed. So what we can do that is we have to create another event in inside mission container which is input which is input even for the text box. So whenever there's a no not input even if the check box is checked or not. So it's a so we'll check that how we can do that. Find out where the check box is actually present. Inside the mission container template. So we'll go to mission container events hash function event task.update So here we need to give a value so we need to find out which ID must be updated. So what we can do is that we can put the value as ID. So it's a set operation. Can you even say how to edit the value of the check box? Not check box. Even for current target our check will be ok. I hope this works. Is it completed? Else works. So that's how we change it. Can you show me each table? So I will complete this and I'll push to the repository and then you can download it. Then I'll again explain it so that you guys can understand what was going on. Now we need to change this progress bar as the task is updated. So what we can do is that it's again another function we can create and another helper we can create. So this is the static estimate which we have done. So what we can do is that we go to helpers mission container we'll add another thing on a scroll list. So we need to find the total task. Task. So we need to find before that we need to find the ID of the mission. So right here what is happening is that since it's inside this missions helper what happens is that if you type this bar mission id if you have to this dot square id it should work. Since we are calling the progress inside this helper. So we'll be writing a progress helper here so and we are inside this in each mission so this dot id will give the mission id. And we need to find so we'll take a count of that and we'll make a count of completed task. Yeah, I will come up completed. So now we need to create return completed tasks by total tasks. So we'll make sure we just alert it so okay where is the double brackets in this model there is no mission. We haven't referenced the where you asked for this so we'll just okay now what we'll do is we'll return it and then our next task will be to update this I think you could have already completed it so we'll add another event so which is send message we'll go to event.js and this is inside our chat container so template dot chat container of the image click as send message for the function our message is equal to xbox xbox I believe is xbox so we'll give name as our code value and message the numbers the problem is a greater full name so now if you put it of course close so now we'll push to the repository and place pull it so that we are synced together to continue I'll again explain how it works yeah you can pull it and now I'm again going to explain how the system works again so far we have created three collections one first one is the teams collection so in meteor we we have to define the head layout of the html only once so that's what we did in html if you see here we have to only define it once and you can write your templates anywhere inside any folders anywhere you want meteor will actually fetch it so it's a good practice to have a good folder structure which is something like this so where in the client we can have all the views all html and client-side JavaScript functions in the server folder you can have all the server side functions in the collections folder where you want to use both server side and client-side APIs you can use something like collections or public or something like that so here what we are doing is that we are making a template called as now bar and now bar is referenced over here so that's why you see the navigation bar on the top and in the dashboard if you see so the dashboard is in the in the file on the dashboard at html so you can give name as you want it's not necessary that you have to keep dashboard or html working whatever you want meteor is good enough to find the template wherever you are so in the dashboard we see that there is a there is a handle bar on each teams so what is this is that if you go to the helper and if you see dashboard.teams so what it does is that if this function returns up okay so that's why we wrote something like this if you see another function which is like one second before you call the.teams that template.tams template.tams what is that so template.tams means that dashboard is different as template okay this is what you are referring to so template is different as template so what you are doing is that we are creating a helper for this dashboard so meteor basically will create the template variable and the dashboard variable for you exactly okay and then so whenever you are returning a cursor we will be doing something like this okay so whenever you want something like weighted for progress and all we have to define in this example so so when you are doing a cursor cursor like functions we have to parse it as each teams so it will iterate through each teams and so then a name is the key inside the teams collection so that particular documentation and it is the same thing for it is the same thing for all these things where in which you are just adding the helper function for status it is status you can see that in little star gs and we are returning status.fm and we are linking that over here each status and we are linking the full name and the status update so this full name and status update must match the collection key names so right now you can go and clone back my repository have you ever clone it? clone it up so that you can continue in your helper status yeah there is two types of syntax that you will use sometimes you will just create the template name so this is the syntax you will use it for returning a cursor so this is actually returning a cursor and when you are returning a value particularly so you see here it is returning a value so there is a syntax for that you can't return a cursor but I am not sure about that because I just actually get it using that syntax that simple word so in the media documents it is shown in this way so how can you come down inside the helper function that your messages, messages, teams and all are coming from the common side for other things so it is defined as collections so we don't have to write separate files for messages, missions and status and tasks, you can write all in one file but there is some other reason I am doing that I will get back to that so this is defined as collections, so it is coming from the collections itself so before the client server file gets executed these things will be yeah I am going to explain that so if you have cloned the repository now we can try something like this so just write this command media remove photo operation and again we are running media also in collections every collection is a global I think I am coming to that so if you run the app again everything is gone so can someone caught an idea what happened just now there are no elements in the so what happened to us till now we were working on collections and they were accessible both in the server side and the client side so what happened was actually in the server side everything which server had it published it to collections in the client side so what actually happens is that media has server side collections and client side collections till now we were in development mode so we had that package known as auto publish so what auto publish did was that it was pushing all the server side whatever there was there in the server side database to the client side now I am removing the auto publish and that is not a good practice you can't push all the entire database of the server side to the client side we need to only publish which is relevant so we have removed the auto publish feature auto publish package now we need to we will come across something known as so the post publishing it keeps us in the web socket you know connection I am coming to that so before we go to the the publications and subscriptions in media we have something known as publications and subscriptions so what we do is that in publications we define it what kind of data we want to publish and then subscribe the client actually put the parameters like this is the parameters which I want and what publications does is that it takes the client's parameters it checks if the client has enough authentication for the data to be passed then the publisher publishes so we will go to that before that what we will do is that we will create routes for our pages so right now we are working by changing the template name so we can add actually localhost calling 3000 slash dashboard localhost calling 3000 slash team so what it does is that it will rewrite it to a particular pages so how we can do is that we can create a so this is the API for router function so you can go meter has a default router but we will be using something else iron router so in order to add iron router what you have to do is that go to the console and type in stop the localhost and type in meteor add mrt column meteor add iron column router so I will write that function now meteor add so here this is the template name password this is the path you should be providing so we can have more attributes so if you go to the iron router getup document actually there are like more parameters like wait on something on before on after so it's basically like before routing after routing wait until the function is done so we can have all those things inside iron router okay so before I move on I mean I want to make sure that you are kind of sure of the things which we did right now like templates, handlebars collections are you all fine with that so first this is the template name this is the root okay but why does it take I will get back to that so I am just showing our sample syntax are you guys sure of what you are doing right now or should I continue or you want me to explain any other topic with the collections we are just going messages so messages is like global so messages is not a variable actually it's a collection but it's globally available so it is available both in the server side and the client side you get that right can't I name space those collections so that it's not a problem so something like you are asking for a secure reason when you console when you can add to the console by console like teams.insert no more about just flashing of like the global scope so like if I have 20-25 collections, 20-25 global variable three times scope if I can just name space them something space variables I think we will talk about the roughness so anything else which you would like to know are you kind of sure of what you are doing fine so we will start adding the router function so what you can do is that what is that so there is a finalness library inside that there is a finalness router.js so we will add the index page so we have the index template somewhere in we have home template so we so if you see the first page it is actually blank so we will router to the index page so we we will just keep it as it is so we have a home template or another scroll what is the this how much again yeah so the problem was this dot route so it is nothing but media dot route so it is an api call it is a client side api so if it is a client side api we need to put it inside if media dot is kind if you want to add some service at api you can put it as if media dot is first layer so we have added what about the js files that we added the helpers and others we do not have to add a check saying is this client side the service side yeah that is the point that is what I said right so if you put it inside the client it is automatically client so why are we not putting router inside client so libraries I think there are two routers one is the other side yeah so there is like you can actually put it inside the client side but then it is you know you can use it both for server and client so we have just put it we can add some more things like rascope slash rascope it is just add the media package back so we have we can see that if this is running so where would it go template so the same route is home on dashboard yeah it loads after the navigation after if you see the here is after the after now after the first template it is automatically added so if I have template would it add it after the second one so I am going to do this this is the end of the body or is it after the first element it is fine it is the first element because navigation was in the top right so if I have a footer how do I tell it that it is between the header and the footer so you can actually one thing you can do is that you can add something like this footer and you can define a template so now how does it know that the routing goes between the map bar and the footer are the concepts that video goes about are those key words no no no that does not work the footer does not work like that so what you have to do is that you can actually create separate templates and you can so in the media there is a media templating engineering knowledge blaze so in that blaze we can actually pass that function so if you look at the database templating engineering blaze yeah it is not handled by no media has a template known as templating is known as blaze which uses hand cross which uses hand cross yeah so the mouse man you can define it in blaze the navigation the navigation so blaze is actually for your entry yes yes I get that part so coming back to the question so if you have like most applications like nav and footer yeah like you might have different parts yeah so what you can do is that one more thing what you can do is that inside the template itself we can call the footer after the template is done what do you think it will do yeah I think this is a better way of that by using blaze template yeah so the map function it is a server side function so what you can do is so it actually automatically detects if it is server side or client side so you don't have to put a medium of blaze so right now what it is doing is taking the home it is routing the main index template to home it is routing the rasco template to rasco path to rasco and it is routing team one template to team now we will remove the auto publish feature so now everything must go now we can define like what you want to publish from the server side to the client side so we can do that by so this is these are almost everything is server side so we don't want to give client the ability to push and things like that so what we are doing is that we are putting our all the server side APS inside the server folder so if you open the server folder this is a file on us publication.js okay so let's see how this works so this is the server side API for it media.publish teams data so this is a new you can you are giving a name for your publications okay and this is teams.fine so collections.fine and the client side you are subscribing so the best you know the best way the best place to subscribe it is in the rotor itself so for example if you are going to teams page you can subscribe the particular teams and tasks and all if you are going to dashboard page you can subscribe to teams which user belongs to okay so you get this right right are you having any doubts in this so this we are getting in the server side with this we can write in the rotor itself so auto publish by default just exposes the entire database here now we can pick and choose what part of that collection exactly so auto publish is basically for developing more so when you run in production mode you have to use something like this and before you push it to production is there one which is here you have because I understand if you have auto publish on your users collection also basically if you are for example if you are in a production state if your auto publish is on your site doesn't load because of the data you are getting in well if you are starting out you won't have that amount of space okay so I think what you can do I mean you have to I think when you bundle it up it actually gives you warning most probably it will give you warning and notice that so otherwise what you can do is that when you before you publish you can put in vta list so what it does is that it gives you all the packages so we can choose from it I think it gives you a warning I think I have noticed that so it gives you a warning so hope you are clear with this or you want any of this any of the topics to be re-explained and the client pass a parameter actually I was waiting for the question so if you pass in this or subscribe teamsdata.com and some variable and we can actually get that an argument over here and we can actually any of the questions so what you will be doing is that let me care about publish teamsdata operation so so we have published right now and it will go to what does it mean when you publish present so so I mean I understand that since traditional developers traditional web developing something is the public something strange for you guys so it's like it's not actually a restaurant point I think we should more like a stream that is available that if you need to you can yeah if you want there is data available more like a socket end yeah it works on something else ddb so it doesn't use the string ddb no so ddb is something else distributed so it's a function of that any other questions it's not just for ddb yeah I will come to write I actually wrote many stuffs team.update.inside everything was writing yeah yeah but using publish you can write publish is actually used to keep the data from the server side to the client side there is no write at all there is a server side database which is having all the for example say teams database until this point after we remove autofublish the client has no idea which team the user belongs to at all right so we are right now publishing it and we will see how it works we have published it right now and we can go to the router and we can add one more normal disk comma wait on I think this is right so just stop subscribe teams now let's pass an argument and see how it works comma I just want one value so we will go back to publications we will call this as limit comma limit comma limit now we can go back so we get that right what is the first argument what is the second argument so we want an argument there is no two arguments teams are right yeah so teams are right so in the router.js you are subscribing to teams data teams data is the publication name so publication must be defined at all here right so this particular publication the router is subscribing and this is how much you want you don't want the entire team because you want a particular limit so we will set it to say for example 5 now what you have to do is that we have teams we need to create a link between we have to create unique links for all the teams so right now we have one team and we are pushing everything into one team so let's see how that works so if you go to the dashboard.html so there is a button go and we have a value going what you can do is that we can add id again and we will go back to events so template.taspo we need to you want to say we didn't define any events so we will go back template.taspo .events click as etn go is the function convention router.go slash teams apps plus event top current target top value so if you do this and you come back you come this it's going to a particular limit but if you see the router.js this is not what you want you want to pass that you want to pass that particular id so what you can do is that you can put in call an id and with router.slash we will be slashing slash call an id we will be slashing we will wait on the function we will just log it one we will put s and s yeah so it's slashing so this is our parent.id so right now we have got if you come back to dashboard we have published the relevant data which dashboard needs and in the teams we need to publish what all messages are this particular team this particular team id has so we can do that why we can make another session variable session dot set team id comma this dot I am stopped id so that we can reference it whenever we need inside the helpers etc question so these session variables are they also available on the server side no so you will have to pass that yeah I will just add it to the github so that if you are calling back to the unit we have started I mean your phone is hot so you don't need to shut down yeah so you don't have to so whenever you save the files it's automatically refreshing the files so now what you have to do is that you have I have pushed that up you can pull it and you can go from there we will come back to the team work we will see what all functions so we will start with status so we will give all the status which this particular team id belongs to but when we inserted the status we did not add the team id so we have to add it so what variable team id is equal to sessionplot and we can add the team id so we will just check if this works so we won't see that because we haven't published it yet but you will see an id over here we can do something like delete our status and yeah we will see the team id so that's it so we will do the same thing for everything actually missions also the same for the tasks also and even for the messages so now so when we insert everything is inserted over to the team id so I will just push it again so that if you are following back please follow it so now we have added team id for each which of the collection like messages chat and everything so we will see how to publish so again very simple go to publications and that media.publish we will start with status data status.find and we can actually have a team id over here as an argument and we can team id for each team and in the router our jigs we start subscribe status data so in that case we start and I am started from so when we come back so as we can add on status publications so we can do some some more things like we need to get the last last status update so what we can do is that we can actually start column so oh shit oh shit yeah it's coming it goes up so you guys have any doubts until this point so if you don't so as a subscribe is a client set function so you can subscribe it anywhere anywhere in the client set anywhere in the client folder any js file so router is one of the good because really that particular any other questions which I can ask so router has router so router has server side and client side so when we access server side we can also use it as a restful services for posts and tables yeah but that is not preferred in okay so restful services are not because it's an inefficient way of doing it we have to use something like publications until you are getting a huge amount of data like images and videos and all that makes sense for getting but for data like this with data it's very efficient to use publications is it possible it's possible it's completely possible so I'm thinking of some areas where you want to expose it like yeah so I get that so for example if you are making an android app you want this thing but what here we have is known as distributed data protocols so we can actually use this basically it works on sockets so what you can do is that if you are making an android app there is something known as socket IO library so you can use that and you can use that and you can subscribe to the function and you will be subscribed so whenever there is some changes the socket condition also get updated the protocol that is used for communication is the socket not the streaming it has a sttp it's a socket yeah it's completely it's a socket any other questions when we inserted the status where did the server send you out now I'll get back there anything else then just really you can just plan accordingly it's 150 anything else you would like to know so we can do the same for initial status messages status and tasks so in tasks we don't have time so we can know that in messages we have time and in visions we have some of the deadlines so I'll just so we have to subscribe for this in the good question we'll add them soon so you guys have any doubts at this point find something difficult for some of you I'll just add it to the code so we have added publications we have added status according to the team ID so every team will now have a unique unique ID and every team page will show different data so we can go to dashboard and give up so this dashboard doesn't have the data so you guys get it right so before we go for the launch we will complete the login part of it so in Meteor the best part is that Meteor has already APIs for all the logins not just username password login but also for the logins like Twitter, Facebook and all so it makes it much easier so to use a login functionality what you can do is that go to docs.meteor.com and there's something like Meteor login so this is the you need to make this like an API call which I will come back to that later so this is how you normally add logins so after you add login you get a variable known as meteor.user I will again come back to that so right now what we are doing is that we will be creating a Twitter login to our app so how we can do is that go to developer.twitter.com or david.twitter.com and then we need to add few packages so you are adding Meteor add accounts package so this is the core package by Meteor we will start that Meteor add I think it is accounts UI Meteor add accounts Twitter so we need to specify which package you are adding so accounts is not a package, accounts password is a package I hope accounts Twitter is a package so we have to check in in this package so add two packages, Meteor add accounts UI and Meteor add accounts Twitter okay so if I will again push it so now let's see how to add the like this go to so manager apps it is in the bottom and we create and add so please give it on 27 comment you will come back and update the column so we update it now if you come back so we can add a login button over here over this part so we added accounts UI package so what we can do is that we can just go to the layout file and then add login buttons so template which comes along with accounts UI and after that we just edit the callback URL allow it to sign so this works on a speech so that's it that's it so in your case I think you might get another you might be the Meteor might be asking you to update your API keys so but you can do that you can go to the API keys and you can update this you can add this to that particular overpage so we know your login but how can we get the details of the user so what you can do is that Meteor exposes a function Meteor exposes a function on us Meteor.users is nothing but the details so this is both server-side and client-side so the benefit of this using the server-side is that if you use Meteor.users in the server-side we can know if it's a valid user or not if the user is logged in so because client-side we can change the ID and send it back to you but still server-side we can verify so that's the use of Meteor.users you guys are getting it the user is not logged in it won't return it's a manual so what we can do is that we can remove the mess up in the navigation bar so we don't want create team join team everywhere we just want it in the main page main dashboard page we don't want to show these things if the user is not logged in so what we can do is that we can create a helper so this will explain it in more detail employee. navigation.apples and ease logged in column functions if Meteor.users return true and return false and this can be used in the navigation bar it's very simple like we use each hash if ease logged in and ease logged in so we can do it for lunch so if you have any doubts you can ask me if you are calling back I will just add it up and really again we can add the report to all of them one second so there is a problem here is youtube.com that so catch up with me if you have any troubles in understanding any of the concept