7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 Application Demo

Before we get started building this application, let's take a look at the final application so you have a good idea of where we'll be heading. I'll load up our application in the browser and then I can go ahead and sign in. Now currently there is no content in this Wiki. So I'll start by adding a new page. I'll type in the page title, hit enter, and we've created a new page. Notice that not only is the page displayed in the list of pages on the left hand side, but we also are moved directly to that page and you can see that on the right. Now I can click the add section button to add a new section. And I can start typing some markdown text, right inside this text box. When I'm finished, I just have to click outside the text box. And you can see that where rendering are marked down as HTML. I can go ahead and add another section if I like to as well. In this one let me actually use a markdown link. You can see that if I click that link, I'm taken to the links location. Now one of the important features that we wanna build in this application is collaboration. So I'm gonna open a second window here. And I'm going to go ahead and view our Dogs page. And when I do that, you can see that all the content is displaying exactly as it was. If I go back to the other browser window where I'm logged in, and then make some changes to our markdown, then when I go back to our second window you can see that those changes are automatically reflected. So our application does live updating. In my second browser window here, I can sign up for a new user account. And now you can see I have the ability to edit this wiki page myself, since I'm signed in. I can click one of our sections, and it converts back to the markdown text in a text box so that I can actually make some changes. Noticed that the other user has that section grayed out now. They can't make changes to the same section that I'm editing. When I click outside that section, it updates in the other browser window as well. So you can see that not only does this update live, but it also prevents two people from updating the same section at the same time. The first user here now can make some changes. We'll change the word great to awesome in bold, and you can see that pretty much instantaneously, the other users see the updates. I can go ahead and create a new page as well of course. And then let's go back to our dogs page. And I can actually link to our cats page by using double square brackets. Now when I click the cats link there I'm taken directly to the cats page through our applications routing system. We don't actually do a whole page refresh. So these are the features that we're going to be building in this application. When you're ready to get started let's begin in the next lesson.

Back to the top