Umbraco + Firebase

That doesn't sound like you've had any coffee. Good morning. Good morning. Are you guys having fun? No, that doesn't sound right. Are you guys having fun? Yes. Awesome, awesome. Alright, I actually like what Doug did yesterday at the main room before we started the conference. You know, make this conference a bit touchy-feely. You guys up for it? Okay, here's what we're going to do, right? We're going to all get up, alright? And you probably are sitting next to someone you already know by this time. So, you're going to get up and turn to your neighbor, look them in the eye, and say hello. Greet them from the bottom of your heart, right? And try and push the limits of the touchy-feelyness of this conference. And say something nice about the person you're seeing. Can we do that? Yeah? Well, we're all developers, I know. But let's get out of our comfort zone and try this for once. Can we all get up? Yes? Alright, let's do this. Alright, alright. Once you stop talking, you don't stop. Thank you, thank you. Once you stop, you don't stop. So, but that was very nice. Do you feel good about yourself? Yeah? That was the idea. Alright, I'm going to be talking about Firebase and Umbraco as a service. How many of you have heard of Firebase? How many have used Firebase? Only a few. How many of you have used Umbraco as a service? Okay, also a few. Okay, so I'm going to try and blow your mind with what Firebase and Umbraco as a service can do. It's kind of a lofty promise. I'm hoping at least I can achieve a fraction of that. Right? Alright. Last month I was at Google I.O. and Firebase featured in a big way at the conference. They've released a whole bunch of new products and features and integrations with the Google platform. We won't have time to go through all of the features that Firebase has, but I'm going to try and give you a taste of Firebase so you can see if you can start using for your projects. But before we dig into that, I just wanted to share my excitement, you know, share my excitement of being in the technology field. Like you and me, we need to be excited. Why? Because of this, exponential technology. How many of you have heard of this terminology? Only a few. Okay. Imagine a guy in rural parts of South Africa, you know, that's where I'm from, rural parts of South Africa, answering his smartphone. His smartphone is a device that's a thousand times more powerful and a million times cheaper than the supercomputers of the 1970s. And that's the power of exponential technology. It's any technology that kind of doubles its power over time. And this technology over a period of ten years kind of grows thousandfold. In a period of 20 years, it's kind of millionfold improvement to that technology. Right? So you're seeing that in things like networks and sensors. And think about machine learning and AI. How did AI look like ten years ago in 2006, a year before Apple released its iPhone? There weren't any tangible products that you could say, oh, this was a really good AI product. But now, look at your smartphones. Every single smartphone has an AI power tool. Every home is kind of powered by an AI-powered device. And newer products are coming up. And I can only imagine what the world would look like. A million times more powerful AI technology in ten years to come since 2006. So why is that relevant to my talk? Because the building blocks of exponential technology is computing. And more recently, cloud computing. And cloud computing in itself is on an exponential growth curve. And Firebase and Ambroq as a service, are two of the cloud solutions which lets you do more with less. Which gives you more time to do the things that matter. So that's the topic of my talk today. So we're going to talk about Firebase first. And then I'm going to talk about Ambroq as a service. And then I'm going to do a demo. And hoping the demo gods are looking down on me and saying, you go, you go. Let's try. Okay. Firebase is a suite of products that helps you develop apps, grow your user base, and earn money. I'm not going to be focusing on the two bubbles, the growing user base and the earn money part. But I encourage you to go to Firebase.com and try it out and see what Firebase can do for you. So I'm going to focus on the developing apps part of it. Here's an infographic that talks about Firebase. And I'm going to talk about the different things that Firebase offers. So there's the real-time database, authentication, cloud messaging, storage, and so on and so forth. Again, I won't be able to go through every single things, every single feature that Firebase offers. But what we're going to focus on are three things. Real-time database, the offline support that Firebase offers, and authentication. So what is Firebase database? Firebase is a NoSQL JSON database that's hosted in the cloud for you. So when you talk about JSON, obviously you think about a hierarchical data structure. So you have a tree. And Firebase allows you to attach listeners to nodes in the tree or the subtrees. And whenever things change, Firebase lets you know. And you can react in your application. Not only that, you can access any data at a given tree level using a URL. So you can pretty much a REST API comes out of the box. So that's pretty cool. So database that talks REST. And most of the web applications these days and the native applications are using JSON data. So database is JSON. You just request JSON. JSON is there for you. And you can start rendering whatever you need to render. And the killer feature of Firebase is this real-time data synchronization. What does that mean? So let's say there are 100 devices connected to Firebase. One of the devices sends data to Firebase. And Firebase updates itself. And then it knows that there are 99 other connected devices. So it's going to send that data that's updated to Firebase to those 99 different connected devices. So is that cool or is that not cool? Have you tried building something like this? So it's, you know, I mean, there is a lot of code that you have to write. So it uses WebSockets to keep track of all of the devices that are connected to Firebase. And it is backed up by the Google Cloud platform and the infrastructure that Google has. And I think it's hard to beat what Firebase offers. Then the second thing is offline support. So when your device goes offline, probably in Denmark it's probably not a big deal. But in Africa, it is. Your device can go offline. And your application can continue to work, continue to be responsive. What it actually does, it saves that data locally in the device. And when connectivity comes back up, then it knows the connection has come back up, syncs to Firebase. And then that whole cycle follows again. And then lastly, Firebase Auth. So authentication is provided out of the box with Firebase. You can do email and password authentication. Auth authentication with Google, Twitter, Facebook, GitHub, and Analyze Auth authentication with three lines of code I'm going to show you. And finally, Firebase is cross-platform. So it's got SDKs, native SDKs for iOS. Native SDK for Android. As well as JavaScript SDK for your web application. So what that allows you to do as well is let you connect to the database directly. Imagine building an app. You think about your users, the data that they create, the data that you need to store. And you probably come up with a database model and then create an application layer that exposes the data. And then you start building the UI. But all of that little stuff is gone. So you don't need any server. If you have an idea, you can start coding and you have an application up and running and hosted in the cloud without ever instantiating a server. But if you do want to have a server that talks to Firebase, you can do that as well. Because it's a REST API. Any language that can talk REST can talk to Firebase. And you can have your application layer talk to Firebase that way. All right. Now we come to Umbraco as a service. Umbraco as a service is a product designed to help you think less about maintenance. Help you deploy painlessly. And collaborate effectively. Those are the three icons. I tried to memorize that but I couldn't. So I have to look at my notes here. Let me repeat that. Umbraco as a service is a product designed to help you think less about maintenance. What does maintenance mean here? So it means that Umbraco as a service is always running the latest and greatest patch version of Umbraco. So it's the most secure version running. But if you really want to upgrade to the minor version of Umbraco, all you need to do is click a button. So no pain there. And then it helps you deploy painlessly. All of the content, all of the code is version controlled. So again, click of a button, your code is deployed. Click of a button, your content is deployed. I'll show you in the demo. And then collaborate effectively. You can invite your clients. You can invite your colleagues to work with you for content editors and code creators. They can all collaborate with each other using the really nifty Umbraco as a service. Member management. All right. So now let's combine the two. Umbraco as a service and Firebase demo. All right. My laptop has a problem duplicating the display. So I'm just going to do something here. Okay. So I'm going to do this. All right. No, I don't want that. I want this. Okay. All right. So when you log into Umbraco as a service, this is what it looks like. So you can create a project and choose your plan. And your server is up and running. All right. So I have a couple of projects here. So I have FireGarden 16 for this demo. So I'm going to go into that project. And so you can see there's a dev environment and then there's a live environment. Currently there are no pending comments. So if there are any pending comments, remember I told you the code and content are version controlled. So the blue button will light up and click a button and the dev environment gets pushed to the live environment. And you can view the page. And that's your site. We'll come to that in a minute. And then you can go to your back office. And there's your back office. All right. And the cool thing is you can basically clone this environment using a Git project. So you go clone project. And you get a Git URL. And you can use your preferred Git management tool, which mine is SourceTree. And you can just clone. And then you have a local environment running exactly like the dev environment. So currently I have everything up to date. There are no pending comments. So what I see here on the dev environment is what I have locally. So locally you can use Visual Studio, Gulp, or Web Matrix to manage your local Umbraco site. So I'm just using Web Matrix for the ease of it. And when you run, you have the exact same application. So this application is running on dev. You can see the URL. And this application is running on local host. Okay. So that's a quick demo of what Umbraco as a service looks like. So I'm going to just switch gears. And show you what this application that I built using Firebase and hosted on Umbraco looks like. First thing, I'm going to go first thing authentication. Then real time and offline support. So let's look at one thing at a time. So I have implemented OAuth authentication using Facebook. So click on Facebook. I've logged in. I've already given my permission for this app to use my Facebook credentials. I've logged in. So it's got my picture. And it lights up a button, posts a question. What this application is, ask me anything. So the idea is you guys log into this site and you ask me questions. We don't really have to use that just for the sake of it. Now, real time database. Okay. So here are two different tabs running. One locally and one on the dev. I've logged in on the dev. I haven't logged in on the local environment. So I'm going to post a question. Okay. Brand new question 101. Post. Okay. Here's the question. Can you all see? Yeah. What do you think is going to happen on the other tab? Anybody? Anybody? Anybody? What? It should be synced, right? So let's see if it's synced. There you have it. So the real time data synchronization works. So I'm going to just go in and star this question and see if that also syncs. Star. Okay. There you have it. You've got one star. So that's real time. So you don't have to refresh your site. So Firebase took care of synchronization. So even if you have 100 tabs open or if you all log in when I add new questions, all of you will get the data without having to refresh your app. Now let's look at offline. So I'm going to make go offline. Disconnect. So no connectivity whatsoever. All right. So I'm going to post an offline question. Okay. Well, just so you know, there's nothing here. I'm not doing this. I'm not a magician. I'm just a developer. So I'm going to add a new offline question. Offline question. Okay. So what's going to happen on the other tab now? What? Nothing. Nothing should happen there. So nothing. Nothing's happening. All right. So I'm going to come back online. Actually, let's open this tab up. I'm going to come back online here. Connect. And wait for it. Wait for it. Wait for it. All right. We've got an offline question. Yay. Yay. Yay. The demo worked. Awesome. All right. So you want to see how we create this application? Yeah? Okay. Let's do it. So first things, I'm going to go into the... I'm going to close this dev. I'm going to go into Umbraco back office. All right. So what I have is just a page. That is hosting the AMA, Ask Me Anything application. I want to create another application. Just for simplicity, I'm going to call it a group chat application, where all of you can log in using your Facebook authentication, and you can chat. And then everybody can have a nice time chatting on my little website that's going to be a five-star app. So the first thing I need to do... I mean, with Umbraco, you know, there's like 100 different ways to do it, but this is how I'm doing it. So I have a generic page style. I'm going to create a new one called group chat. Group chat. As you can see, I've tried this before. And I'm going to let it be available as one of the root pages. What Umbraco does is it creates a template for the document type. And I'm going to make this inherit from the master page. Okay? And currently there's nothing there. So let me just reload also. Reload, reload, reload, reload. Why is it not reloading? Okay, reload. So I'm also going to say hello world. Just check it out. So what I've done here is... I have a few partial views to show the navigation bar. So I'm just going to use the same one. The navigation bar is already on the other page. So I'm just going to show you soon. In terms of the JavaScript libraries, JavaScript code, I have an apps folder where the AMA stuff, AMA related stuff that you just saw is all in that folder. I'm going to create another one called gc... gc... gcapp.js. And call it js. Okay. All right, so I have an app.js. So I can do whatever I want for that particular application in this app.js file. Now I don't have anything here. So let's first see if the page actually shows up. So here's the group chat application. So I'm going to create a group chat application. Here's some metadata. Code garden, group chat, app.js. App name. Massively multi-user group chat. Touchy-feely app. And then I'm going to call it group chat. Save and publish. So what I've done in my little Umbraco template is that whenever new pages are added, I'm adding it to a dropdown of applications. So if I go in here... So I should see here, then there's a new one. So that's taken care of by Umbraco. So as and when I add new pages, I just create the dropdown list. Obviously, I mean, there are many ways. I mean, a lot of designers here are probably frowning upon me, but I'm just showing off the idea here. So if I go there, all I have there is Hello World. So what I have is a little snippet of HTML that just is nothing complicated. It's got a navigation bar here. And then I have the login button and the logout button. And here are the key things, in terms of the Firebase SDK. So this is the Firebase SDK. So if you include that in your web application, you have all the features that I've been talking about in your web application. All right, and my app.js, which is empty right now. So I'm including these. So let's copy this and put it in the template. Go to Settings. Go to Templates. Uh...Group Chat. Okay. Are you guys happy with this so far? Okay. All right, let's see what we get. Okay, so there's a text box where you can type your message. There's a button that does login with Facebook. And there's also a little logout button here if you click on it. So it does nothing. If you see F12, if you click on Login, nothing really works, because there's no code. So let's start writing the code, right? Um... So I'm going to use Sublime to write this code, because I have some snippets. So the first thing to do with Firebase is to initialize it, just like anything else. So, init. Is this big enough, or do I need to increase the fonts? It's big enough? Okay. All right. So the configuration has the API key. So once you sign up with Facebook, and sign up with Firebase, you get an API key and a URL. And that URL points to the root of your database. Remember I told you it's a JSON database? So the root of the database is that URL called database URL, and auth domain for authentication. And then you initialize that with that configuration. Then there are two handles that you need to get. One for the database, and one for authentication. Since I'm only focusing on database and authentication, this is what I'm doing. But if you want to use other features, then you have other handlers that you need to initialize. So currently I'm just using the database and doing authentication using OAuth. So how do we do OAuth authentication with Facebook? This is how. That's it. So you have three lines of code. You have a provider. So you call it Facebook provider for Facebook, Twitter provider for Twitter, and so on and so forth. And then you say sign in with pop-up, and give that provider. And that's it. And even return false is my thing. But if you're using Angular or whatever, then even return false is. So two lines of code, and you have Facebook authentication for your application. And log out is even simpler. Sign out. Right? So since you have that, session management out of the box with very few lines of code, and that's Firebase. But the one extra thing that you have to do with Firebase is that every time a user state changes, whether the user's logged in or logged out, there's a callback method that gets called. And you need to implement that, because that's how you react in your application. What to show when the user's logged in. What not to show when the user's not logged in. So this is how you do it. So this is how it goes. Again, demo code. But this is the idea. So you have the callback function of state changed. All right? And in that function, you know whether, depending on the result is null or not, you know whether the user's logged in or not. And then you react in your application the way you want. All right? So let's see. That's it. So let's see. But I need to copy this over to Umbraco. So I'm going to go in here. Go to my scripts, applications, and then app. And then paste. Save. Is it saved? Saved? No. Saved. Okay, saved. Let's refresh. Okay, so as you can see, the text box is gone, because nobody's logged in. Now, if I click on this, ideally, you should see a pop-up. And if you have never logged in, then it should ask for permission. Facebook should ask for permission whether this application is allowed to use your credentials from Facebook. I probably have used it, already given my credentials permission. So let's see. Okay, so I've logged in with two lines of code to log into Facebook. And I've got the photo URL. I've got the display name. And whatnot. So the next thing to implement is the messaging. So I want to store those messages in Firebase. And let's go back here. And let's start storing data in Firebase. Okay. All right. So I get the message from the text box. And then, this is how you store data in Firebase. So again, remember, it's a hierarchical database. And you have trees and nodes and whatnot. So ref is pointing to the root. And I'm saying child. The child of the root is messages. And that's my sub-tree. And within that sub-tree, I want to add all of my messages. And that's all it does. Not only that, I also want to update my UI based on when the messages are coming. So this... I'm going to attach a listener to that sub-tree, which is messages. And whenever things get added, I want a callback. And then I update my UI. So this is how you attach listeners. So on the child of messages, whenever a child added event is called, then call that function. And that function gets the data. That particular child that gets added is sent to your callback. And then you can do, again, whatever you want to do with your UI. And then the update UI function is very simple. HTML manipulation. So let's go back here in Morocco. And then save. Save. OK, saved. All right. So I've logged in. So let me start chatting with myself. OK. Code garden is awesome. OK. Two and four, six, eight. All right, so it's actually storing the data. You want to see the data? OK, so firebase.google.com. Console. So this is how you create applications on Firebase. Just click on Create New Project. And then you give your project a name. And then what region you're from. And then it creates your application. I've created one, Firebase demo. And as I was saying, there are all these features here. Remember, we are talking about database and authentication. So let's look at those two tabs. Database. So here is the JSON database. All of the messages that I was sending, all of these messages, are stored in the database. And in terms of authentication, you have, so I've logged in. So it knows that I've logged in. So it keeps track of all your users that are authenticated using whatever method that you're employing for your application. And then you can enable Google, Facebook, email, Twitter, GitHub, and so on and so forth. OK. So now, it's no fun chatting with myself because it's hosted a local host. So let's use Umbraco as a service to host it on the dev. All right? So let's see how we do that. First things first. So I want to see what changes I have made. So this is my Git repository. So I see this. I've added a group chat. And Umbraco has gone ahead for me and created the courier files for these files. And I have an app.js. All right? So I'm going to stage the files and then just commit. New group chat. Group chat app for CG16. Comments are important. All right. Committed and push. OK. So now, as soon as I click push, let me switch over to Umbraco as a service here. All right. So let's see. So as soon as push finishes, then you will see on Umbraco as a service, it has figured out that there's some code changes. So it's going to go ahead and start deploying those changes to your dev environment. And you'll also see that little blue button light up and say, do you want to deploy these to live? So we'll wait for hopefully not too long, a few seconds. OK. Done. All right. So there you have it. So new group chat app for CG16. That's my stuff. And you click on it and it will show you all of the different changes you've done. And as you can see, they deployed one commit to live is also . So do you think if I now open the page, I'll see the new application I created? You think? No? Why not? Oh, OK. All right. I guess if I refresh, hopefully. Now do you think my group chat application will be up and running? Who thinks yes? OK. Who thinks no? What? OK. So I see the old application, but I created a new application. So my local host has this, right? So if I go here, I can switch back and forth to my two applications. That's my original application. And this is my group chat application. But on DevGarden, I mean, DevGarden, I've deployed it. And many of you said you should be able to see. So let's see. Nothing. What happened? What went wrong? Yes. Who said that? Give him a prize, please. I don't have any. Sorry. All right. So what you need to do with Umbraco, so there's code deployment, and then there's content deployment. So in terms of content deployment, you go to content. And then say, oh, look, I have a new page. So I'm going to go in here and say queue for transfer. Queue. And once I've queued for transfer, then I go to my deployments, reload queue, and there you have it. So all of your content is deployed separately to your code. And then you say deploy queue. And fingers crossed, it's going to deploy my code. So I'm going to deploy my content over to dev. Deploy everything. Yes. So it's as simple as a click of a button, as I was saying earlier. Deployment complete. Now if I go to my dev fire garden and refresh, there I have it. So I have code deployed. I have content deployed. Everything is working on Hidori. Now if I go in there, I have my application up and running. Now I should be able to see all of the messages that I have actually sent. Now all of you should be able to also log into this and have fun doing group chat. The URL isn't working. Oh, wait. Wait. Good one. Good one. When it's on dev, it's not open for everybody. I need to put it on live for everyone to access. Yeah. So that's one of the policies of Ambraqo as a service. So if you want your stuff to be available for everybody, you need to deploy to live. So you do the same thing. Deploy live. Deploy live. Deploy. And then again, you do the same thing. You go into the back office and then you do content deploy. Same thing like what you did from local to dev. Now if it knows Ambraqo as a service is quite clever. It knows that you are on dev. So when you're actually deploying, it knows that you need to deploy to live. So queue for transfer. Queue. And then if I go deployment, reload queue. Deploy queue. So you can see the text there. We'll compare the following components. Wait. Where does it say live? I guess say ready to deploy to live. So on the local, it said ready to deploy to dev. And now ready to deploy to live. Okay. And now the live site will also work. So now if I just take the dev off. Okay. So now I have the live site. Are you able to access the live site? Let's hope so. All right. So. I think we're good for time. Let me see. Extend. Oh, gosh. What? Unauthorized. I need to talk to the UAS guys. Any UAS guys here? Nobody? Okay. So live site should be available for everyone to use. Dev site should be authorized access only. So I'm not sure. Maybe there's a setting in UAS that I need to turn on to say live site, make it accessible publicly. Sorry? Oh, okay. Sorry. It's bound to the dev. Yeah, you're right. So I think if you've done Facebook development, so when you create new apps on Facebook, then you get your.