 All right, welcome everyone to building 18.05 mobile apps with MongoDB. So my name is Max, I'm from Tixie, and I run the world of relations for Tixie. Now, anyone heard Tixie before? Awesome, very good, well, that's why I'm here. So Tixie is a cloud-based mobile app platform, right? It has four main components. So it got a cloud-based mobile app, right? Basically, ID, Unicloud. The app you get at the end is a jQuery Mobile HTML5 app, right? JavaScript channel. You can also do native apps, hybrid apps, with the part you could go over the phone app, right? So that's what the UI works. On the back end, you can consume any red service out there. Anything's available to the rest, sorry, computer, to anything. As exposed to rest, you can use that. And then this part is the MongoDB. So if you're building it out, you can consume all these services, but you also want to be able to save data, your app data into database, right? So that's where MongoDB comes in, is that you put a really nice console, top of the MongoDB, got a really nice API out there, top of the MongoDB. It makes it super easy to build HTML5 objects in mobile apps, right? And of course, in the middle, there's an app, so four key buttons, five key buttons, whatever you want to have. So that's actually all for slides that I have. And now, I'm just going to switch to the platform, I'm going to build that for you, which you'll be able to actually try as I build it, right? I've got one more slide, some information at the end, a little bit later. Right, so this is the site, right? It's tacy.com, this is the start page. And we're going to do an internet app, so we'll just go, right, and click create. So again, this is my new browser, which means nothing to install, nothing to download, which makes it incredibly easy to start, right? In a few seconds here, there's going to be a load. You're also going to see, it's going to say, connect into the collaboration server. So that means, basically, that you Google Docs like model, where you can have developers working on the app at the same time, or different times, right? So it's depending on the way five speeds, it will, but now, the first thing I'm going to do is just give you an idea of how it works. No, there's no going to be right away, I'm going to use Twitter's search API, right? So this is an example of connecting to any app there. So this is the builder, and this is your phone, you can also do a pallet. This is your pallet, and these are jQuery mobile components. So the first step is to build the UI. Build the UI, basically, what you do is just drag and drop the components, all right? You can make a search, and so search, because I'm going to be using Twitter's search API. We can make a split folder, and we can change this to app, cool, app, here we go. All right, now keep in mind, you're building your starting with HTML5 mobile app, jQuery mobile app, now, you're going to be running a browser. Now, if you're running a browser, you want to test it in a browser. And we can easily do it, there's a big test button, which will open the app in a browser. So this is the real thing, now the frame is, of course, for us, kind of, right? But this is the real thing, and it doesn't do anything yet, but it will. Now, I mentioned you guys can try the app, as they build it, well, this URL is private, very default. So I'm going to make it public, public. Now, obviously, I want to practice URL. So what I'm going to do is, I'm going to set here, right? So this is how it looks without the frame. What I'm going to do is, I'm going to open a tiny URL, and I'm going to create a shortcut, so it's easier for you guys to enter it. So let's call this no SQL, I don't know, we'll try it. I'll take it just one, just so we don't have to redo it. I guess someone only has nine, 1149 is the time. Oh, fine, all right. So this is the URL, you guys can open it on your phone, your tablet, or your laptop as well. So it's tiny URL, no SQL, 1149, sorry, or anything else that's taken. All right, it's okay, no SQL, 1149. Another option is, there's a QR code, actually. You guys, sometimes depending on the distance and the device, you can scan the QR code if you have an app on your phone. So you can also do this. Or tiny URL account, no SQL, 1149. All right, so let me know when someone gets it, and we'll continue, right? Awesome, so this is the actual app. So let me continue. So this is for the input portion, let's get the output working to explain the result. So we're going to get a grid component, has two columns, by default, before for layout, you can do more columns, more rows. In the first one, I'm going to put an image component, and this is the Twitter image. Now, I don't have time, decide that Twitter is going to send me 48 and 48, so I'm going to resize it, I'm going to resize it right here. And now that it's a column, I'm going to put two labels. So label one, label two, this is the Twitter username, and the Twitter actual text. Now, we also got a bunch of themes, jQuery mobile themes. This is just a short list, but we can make it like this. And if you click test, if you guys are fresh, you'll see something like this, right? Not a whole lot of change, but, all right? And so this is for DUI, right? Hopefully you get the idea, if you build DUI, you can test it because it's only on the device. And of course, if you create multiple screens, you can navigate between the screens, you can run JavaScript, and so it's basically up to this level, if I set this all to half. Basically, you can build the UI portion, yeah, right? But, of course, I'm going to be able to get data, and that's what I'm going to do next. So you go to project, and I'm going to create a new service, right? Rest service, click OK, and this is the service effort. This is the key right here, right? So this is connecting to Twitter, but again, as I said, you can imagine, any rest of the guy goes, anything, right? That's all going to require some indication, doesn't matter. Now, Twitter would be a change in JSONP. Now, every service will have inputs and outputs. That's why we switch to request parameters, and in the first case, it's Q, so it's a test for query. It has optimal parameters, but we're not going to worry about that. What's really also nice is that we can test the service, OK? So before using it on our page, we can make sure it works. So there's a test connection. We're going to click, and try to, you know, five for example, we can really anything else we can serve. Click test, and this is, there's a little gap. It's the JSON that we have, right? And this is not really for us to kind of read the results, but to make sure the service works. If you get an error message, then maybe the primer doesn't correct themselves. It's a very useful, but there's another reason we want to do this, is because we can automatically create the service's response based on this JSON, right? We get all our stuff back from Twitter, so we don't want to do it by hand. So clicking this button will automatically define the response for us, right? So this is everything I gave back from Twitter. Now, I could do this by hand, but it would take me a little longer, right? So we got output, we got input, we got the service. So let's save, close. All right? All right, thoroughly. Now I'm going to add the service to the page, so I can drag and drop the service, and this is going to take the services on the page, all right? Next one, you're going to need to bind the service to my page, to my line, okay? And for that, there's a data mapping tab, and I'm just going to cloud it. So this is your service, and this is the page, right? This is the input, so this is the input component, right? And of course, give it a different name, so, and I just map it like this, all right? And it goes to the right JavaScript, so you can do something with the value before it's being sent. So this is for input, this is for the response side. This is the result, this is the collection of all the tweets. So I'm going to map it to the grid component. Why is the grid component? It's going to give me a looping function on it, right, because it gets multiple tweets. So I'm having a JSON array to a grid component where you can do a list. And I'm going to need to find the stuff I wanted to display. So text, this is the actual tweet text. It's going to go to the second label and second column, profiling the URL for the picture. So this is going to go to the image, and the last thing you need to find is from user, from user, it's here, from user, it goes here, right? So you can write down the screen, it's in global storage. Again, the app is running in the browser. So anything, you do the JavaScript, anything, the browser will allow you to do what you can do. All right, so save, go back here. The last thing we need to do is we need to invoke the service, right? So we put the service in the page with the binding. When I click this button, that's when I would like to go to the service. For that I go to events, and I get all the browser events for this button. I click event, and there's some actions you can run. So you can run custom JavaScript, so really up to you. But this particular one, I'm using invoke service. All right, test. Okay, this is a real app, let's just, hello world. This is a real mobile app that's, that's talking to a Twitter search engine. All right, you guys, if you try to refresh, you'll be able to get the same, all right, anyone got it? All right, so I'm going to talk about MongoDB, but really quickly I mentioned phone gap, so if you're wondering where is phone gap, so far what we've built is just a jQuery mobile app, okay? There's an export feature, and you can export to Android, iOS, and then Windows phone. So for example, right here, this is really awesome because this really is binary for Android. You're humans before publishing into the framework, and then stay out of five minutes later and so on. And iOS obviously is literally one, we'll take more time. All right, but there's a build service that you can invoke and you can build a file for you. Or even if you don't need a phone gap app, you can just export the web portion, right? Now also phone gap provides, more than just a wrapper, it also provides APIs to talk to the device, like working the camera and so on, so you can do it as well. And in fact, we've got some components which are based on phone gap API. Now you'll only see four things here, of course phone gap provides much, much more to how to use that, but we'll just use the API directly. So anywhere you can write JavaScript, you can say invoke this feature and we'll be able to get it. All right, so this is where phone gap comes into it. All right, any questions? Well, I'm here. It's not here, for example, if you have features which are not on the list side over there, so you say you can just write JavaScript and get access to them. Yeah, so you can use any JavaScript. I mean, you can mode the file, you can write it yourself, it doesn't matter, so yeah. So if you're using, so it's only gonna appear in the palette. So it's only gonna appear automatically in the palette and there is, it won't support the map yet. It's something we're planning to do where you can actually import other widgets or libraries, but you can add it, you have to do it sort of by hand. Well, let's say you want GPS on the phone, right? And the GPS on the phone is not visible on there, right? So GPS, geolocation. Oh, you got that? Yeah, yeah. That's something that you don't have, but it is on the phone, how do you add that? So anything in phone gap provides you can use. So anything device-specific is done in phone gap. So we're gonna change phone gap in any way, whatever you support, you'll be able to use. JQuery. It's busy, yeah, because JQuery mobile requires. Yeah, so there's JQuery, there's JQuery mobile and phone gap. What's the benefit of JQuery mobile? I'm sorry, any of the? The benefit? The benefit? The benefit. I'm not sure I'm familiar with that, but, sorry. Maybe if you want to show me the app for it. Oh, yeah. But this is my app. Ha ha ha. Ha ha ha. Ha ha ha. But no, I don't think I've heard of it, so if you can show me the URL. All right, so let's go to MongoDB. So we've got some, it's right here. So IonTX.com, these are all for kind of backend services, I say backend services. So database is the first sort of feature in the backend services. So this is a list of databases, but I just created the one. So no SQL, DB, then I created the one. So this is the console that we built on top of MongoDB, right? So you've got a dashboard collection, there's user management, there's files, some settings, even the reportings that tells you, I mean, yeah, it holds you made from the storage you used, and so on. So it's pretty cool. Well, let's go to the collection browser and I'll spare you the collection. The goal is to do, just kind of building it to view app. All right, click add. This is the collection and these are the default fields or columns and we can add a new, let's add a column, we'll do this name, create a column, all right? Now we can just enter simple data. So, row, we can say, what should we do? Get lines, right? And we can do one more. So you can see, you can put simple data. There's also ACL, so there's security, access control, you can also specify it, right? Now, what, everything in here is instantly exposed to rest and once it's exposed to rest, you can instantly use it in the app. And we actually even have a rest hints. We've got crawl commands available to show you what the command will be for get, for find, and for create, all right? So if we get, for example, this is the, this is the crawl command. So first thing I'm gonna get a URL. It's just gonna go like this and I go back here. Go back here and I'm gonna credit me service. So this is to do get, click OK, right? Put the URL. Now we need to delete this part. So I'm gonna put to do, right? I say this is the collection name. Now going back here to identify that this is actually my collection name to specify data is AD. And I switch request parameters to the AD, right? And then I'm gonna copy this key, right? And make this a header. Okay, so remember, now I can test the service to make sure it works, which is really nice. I go to test connection, click test, and I instantly get the results, right? Now again, I will need to define the response by hand. I have to do it. I can use this button, but I have to define the response. Service to response, click the button, close. This is what I get, right? So super, super fast. Right, so we got the service, right? It's working. Next step is we need to build the page. Okay, so let's build the page and display the values. I'm gonna credit the page, screen, and we call this to do, well, J to the client. And let's switch to palette. I'm gonna see the other components. Let's use a list component now. So we've got a J query list component. Now I have three items, these are for static items, because I'm gonna be actually looping over the list. I don't need, I just need one item. Okay, and we can make this from corners, and I think it looks sort of better. Okay, so we've got DUI, and that's the 500, or anything I was saying, we can list with one item. So now we've got a service to the page, correct? So we've got DUI, we've got the service and the page. Next we have to find the service to the page. Go to data mapping, and this is the input, right? So the input is set, right? That's the key that I'm sending. We go to response mapping, and let's open this. This is the collection of all the two new things, and we're gonna map it to the list, and this is the name, and we're gonna map it to the text. Right, make sense? Now, lastly we need to do is to invoke the service, because just finding something to be invoked, right? So before I'm going to sort of some button click, this I can invoke the page load or page show. So go to events, and I select to do load. Okay, load event, and invoke service, all right? And oh, testing, so we need to set this to be the first page, because if we test, I'm gonna get a Twitter page. So I go to there's project settings, and I can set this first page right here. I actually, there is a, just wondering in this extra information, there's Android binary APK settings, and also IOS binary settings if you need to, right? So let's close, and let's test, right? So you guys can try the same thing, you should get this list, all right? So, again, and I don't know if you can be done in any task, but again, there's MongoDB, and we'll put the rest later, which again, very, very elegant and very, very simple. And of course, the console will do so, right? Which makes it easy to create collections, that's collection, you know, get the hands and so on. But let's move a bit, 10 minutes left, and let's add a feature where we can actually add new items, right? So let's go back here and create, right? So if this shows me getting the curl, command four, and let me copy this, go to service, I'm gonna call this to create, okay, putting the URL, collections to do. Now, we're gonna change the method to post, right? Because we're creating them, and going back here, we have to specify two things, first the database ID, and we also need to specify the name property, right? Actual to do thing, did we do that one? We can actually test the connection here again, say you do something, right, click test, and this indicates that I almost created, right? We get that ID, and I get the time I was created. I can close, I can go back here, I can click to do, and now I get three items, right? So this again, indicates the service works. Let's quickly build the UI, and we'll be done. So this is the UI, I'm gonna get an input component up here, I'm gonna get a button component up here, right? And the last thing we need to do, we need to add the service onto the page, so I can drop, right? So we've got the UI, we've got the service on the page, next we need to bind the services before, so we go to mapping, and it says the service two and three, four, so you get the name, so it's a little bit easier. So this is the request, this is the key, and the only thing I need to do is I need to get the input, right, that's in my item. Now, I didn't define the response, I'm just finding the front required, we're just not gonna do anything with the response, we still didn't get the response, but we're just not really gonna do anything with it, right, and let's go back here. The last thing we need to do is we need to invoke the service on the button click, so we go click, invoke service, service three, right? The only thing we need to do is we need to refresh the list, right? So we could modify the list in a browser, basically, but we're not gonna do that, we're just gonna make another request and reload the list, right? And the only thing is we want to reload the list only if they post successfully finished, okay? And so for that, we're gonna go, we're gonna use a success event, you can do complete, for example, success probably, right? This is just, these are jQuery events. And we go to invoke service and service two, right? So once I add, service finished successfully, I'm gonna do the load again, save, test. Oh, well, it didn't do the same placeholder, so will this work? And then you guys have to do the same thing now. So we spawn, I can hit refresh and see where you guys are going to type, it was not even safe. So when you add a service to the page, is there anything added on the application which is specific to thingsy or when it's for the application, it's not gonna have any thingsy? Yeah, there's nothing, I mean, all the code is, I mean, just writing in the browser, so I'm talking to the database, all right? So, yeah, cc, so it's kind of okay. It's the narrow service right now. So I'm gonna name the browser on the back end. Um, you know, it's a good question. I'm not sure what we're gonna, what would they use to put this layer on the top of, but I mean, you definitely find out. But I just use it, it works, right? But anyhow, that's pretty much all I have to show you. Well, the last thing I hope you guys have minutes left is, so I was creating all these services by hand, right? Which, you know, it's not difficult, it's obviously. So what you can do is actually, you can create services by just browsing your database, right? Okay, so you select right here, and you select, these are all the data you have, right? So which one did I just create, this one? And it shows you all the collections you have. So you select the collection, and then you can select all the methods or all the actions you want to do, right? Now this is here for user management, so if you wanna support user management where user logs in, so this is for that, right? Okay, so you can see to do, and I select, I wanna generate all these services automatically. So I click import, and I got all the services automatically. So I didn't have to create it by hand, right? So what is this, this is a list service, this is a get, and you can see it has a database ID, and the database ID is saved into a property file. That's what you see here, and of course it has the response defined, but, right? So that's it, that's simple. All right, but that's pretty much what I wanted to show you. Now from a smaller slide, we have information, so my email and the site, right? Now, I don't know if anyone has any questions, is it free or not, anyone has any questions? Is it free or not? So it is a cloud service, so it's similar to Salesforce. So there's a free plan, and then there's a paid plan. So what I'm gonna do, can you guys say now, right? In free planning, you can basically build one app. You get all the features, so we know it's mostly on resources versus features. But sign up, shoot me an email, I'll give you two months. The most, the biggest plan, two months, right? So you shoot me an email, if you love it so much after two months and you still want it, send me another email, we'll figure out something. All right, I did not get that. He's reading the pass out reader as well. If we are. He's reading the pass out reader. No, no, but I guess we're competing instead. But this is still better. No, no, we're not. They do something similar, but so they do also cloud services. They acquired a company back in last year or so. But their tooling is a cliff-based. Can you use their services? Services, yes, yeah, we can connect. Anything that's explosive-ressed, anything. Doesn't matter, it's either Twitter, Facebook, or your name, if you can use, yes. No, it's really an idea of some of the capabilities. So if you go to Play, you can sort it for like fixing and then because you project the ID, then you will leave the name. We are launching an actual page on our site. It's not complicated. So you can, you'll be able to shoot apps. So most apps, most, and I have about a percentage, people are building HTML5 apps. This is simpler, and then they export the apps and then they can host it within their organization or some custom domain. Second is Android, and iOS, because again, it just takes more for the building, getting the certificates and so on, so it's more similar. So we see through HTML5 and Android and iOS. Why'd you shoot Manga? I'm just like, it's awesome. No, it was very easy to set up, very easy to install, very easy to add this API there, this console and all of it. I think the API is extremely simple and it's just extremely elegant. Where are the Manga data that's supposed to be? Amazon. They are there. All the social schemes. I mean, I'll be here, ask questions, if not, just lunchtime.