Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Creating a Ten-Minute App

To demonstrate the power of Ionic Creator, I’ll put together a functional app in less than ten minutes. In this lesson, we’ll create a complete app UI that can later be downloaded and completed with code.

Related Links

3.1 Creating a Ten-Minute App

Hello everyone, I am Reggie Dawson. Welcome back to the Get Started with Ionic Creator course for Tuts+. In this video, we are going to put together an app to see how quickly you can build an app with Ionic Creator. For a simple static app, we can do everything we need to do in Creator to build a complete app. If we want to incorporate dynamic data or external APIs, we will need to download the project to finish it. Even if there's more development needed after Creator, the project is a better starting point than building the app from scratch. Go ahead and create a new project. If you already have a project, you can delete it or use that one. Now before we create the project let's take a moment to talk about the project templates we have available to us. The Side Menu template creates an app with the side menu hidden off to the side. By clicking on the menu icon the menu will be displayed. The tab template displays tabs that correspond to the pages in your app. By clicking on these tabs, you will be able to navigate to those pages. Then the Side Menu+ Tabs just combines both of these templates. For our purposes, we will just use the Blank template. First, let's go to the Theming options. Here we will change the Header Background to Balanced. After that go to Typography. Change the Default Font for both platforms to Roboto. After that Save and go back to the project. We will be building an app for a fictional company called Green Zone. First we will change the name of the first page to reflect the company name. After that we will set the background image of the page. Since this is a green company, we're going to set the background image as a grassy field. The next thing we will add is a Spacer so that we can center our content on our page better. Then set the height of the Spacer to 120 pixels. Once we have that, we're going to add three buttons. Set these buttons to Full Width in the color Balanced. The first button will be labelled Green Zone TV and will link to a page that hosts the video. The second button will be labelled Message and will host a form that users can send a message with. Then the final button will read About and link to the about page. Then we will add another page. We will name this page Green Zone TV. Incidentally, if we don't want our pages to have a tittle in the header, we can just delete the title. We will still be able to link to the Routing URL. Once we do that we can add a Video. I have selected YouTube and then I will add the video ID. I just selected a video on YouTube about going green and then I got the video ID from the end of the URL. Then after that we will add a heading. And then a paragraph to introduce our video. Next up we will add another page. We will give this page the title of Message. First, we will add an input and give it a title of Name We will keep this as a text input, but we will set the label style to Stacked. Then we will add another input for email. We will give it a title and a type of email. We will also set this label style to Stacked. Now before we add our text area, let's go to the SCSS editor. Here we are going to add a class. The msg-txt class will set the height of our element to 200 pixels. In this case we're going to use it to set our text area to a bigger height so that users know that they can enter multi-line text. Make sure you Save. And then add a text area. Give this a title of Message, then we will apply the class that we just created to our text area. Then the last thing we will add to this page is a Send button. Now, this button really won't have any functionality right now. This is something that we will need to export our project to our local machine, or get a paid account to configure. In the meantime, we will just link this button to our first page. We will also set the Text to Send, and then we will set the Theme to Balanced, Then we will add one more page and give it the title of About. Now to keep things simple, we will add an Avatar List Item. First we're going to add our avatar image. Then we will add our content and our line two text. We will also turn on Word Wrap so that we can see all of the overflow text. After that, the last thing we need to do is add links to our first page buttons. Go ahead and link the buttons to their corresponding pages. Green Zone TV to Green Zone TV, Messages to Messages, and About to About. After that, let's preview our app. Then if we click on Green Zone TV, it should go to our video page. Then if we go to Messages, it should go to our message page. Again notice that we have the back button. But we also know that we can click on Send to go back to the first page. And then finally, if we go to the About page, We now have a working prototype of an app in about ten minutes. All we need to do to take this project further is export it as a zip file, and develop it on our local machine. Now the process of this is beyond the scope of this course. You can always check out my course, Mobile Apps with Ionic and Firebase here on Tuts that goes in depth on how to build an app with Ionic on your local machine. You now have an understanding on how to use Ionic Creator to quickly prototype apps. With this knowledge, you will have a solid foundation to build on as you find ways to make use of Ionic Creator.

Back to the top