Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds


Free Preview: Easy Mobile Apps With Ionic Creator

Easy Mobile Apps With Ionic Creator

  • Overview
  • Transcript

Ionic Creator lets you build mobile apps with an easy drag-and-drop interface. Whether you're building a simple app or prototyping a more complex project, Ionic Creator makes it simple to get started.

In this course, you'll learn how to use Ionic Creator to build cross-platform mobile apps for the popular Ionic framework. First, you'll get a look at all the UI components you can use with Ionic Creator. After that, you'll see how to theme your app with Sass. Finally, you'll get a look at building a complete app user interface that can later be downloaded and customized.

We've built comprehensive guides to help you learn JavaScript and Angular, whether you're just getting started as a web developer or you want to explore more advanced topics:

You may also be interested in Get Started With NativeScript and Mobile Angular 2 and Get Started With Ionic 2.

1. Introduction

1.1 Easy Mobile Apps With Ionic Creator

Ionic has been one of the most popular frameworks on GitHub for some time now. This Mobile App platform that uses Angular is very versatile. As a developer who has used most of the hybrid Mobile App platforms, I have to admit Ionic is probably my favorite. Not only is Ionic easy to use, especially if you are familiar with Angular, but the infrastructure around it is very mature. They offer messaging, software updates, cloud project compilation and much more. One of these additional services that Ionic offers is Creator. This web based application allows developers to build apps through drag and drop. Far from just the demo app, Creator can provide fully functioning apps. If you are involved in any type of mobile development, you should definitely check out Ionic Creator. It could be the tool that you have been looking for to help you rapidly prototype and build mobile apps.

2. Using Ionic Creator

2.1 The Interface

Hello everyone, I am Reggie Dawson. Welcome back to the Get Started with Ionic Creator course for Tuts+. In this video we will begin to get familiar with the interface of Ionic Creator. The first thing we need to do is go to ionic.io/products/creator. Creator is free for one public project with limited basic exporting. With the paid option, we have the choice of unlimited projects, as well as more advanced exporting modes. In addition, the paid plans also offer in-tool code editing. In this course we will use the free plan, and as you will see it offers enough features to set up a basic app. The same results can be achieved, provided you are willing to do some coding outside of Creator. Once you sign up, create a New Project. For now we will start with the Blank project, but later on in the course we will talk about these different project types. Now once we create our new project, it will create a card for it on our dashboard. We have the option to change the App Icon and Splash Screen from here. Ionic has provided the dimensions and file types acceptable for these purposes, and adding them is as simple as choosing the file and uploading it. Now bear in mind, this does not export with our project and will only apply as long as we develop our app on Ionic Creator. The other icons in the bottom of our project card gives us some other options that we can use. Export Projects allows us to export the project so we can continue working on it in our local machine, or compile it for use on our mobile device. Share Project will allow you to share your project with the URL, email, text, or the Creator mobile app. The Creator mobile app is only available on paid plans. Duplicate Project will copy our project, but of course on the free developer plan we only have access to one project. Then finally, Delete Project will of course delete the project for us. If we click on the project it will bring us to the dashboard for this particular project. At the top, we have the Build and Preview icons that let you toggle between the two states. We are currently in the Build tab, which is where we will develop our app. The Preview tab allows us to see the app as it will display on our devices. To the right, we have a Theming and SESS link, in addition to the Export and Share links like the one we have on our project card. Then to the left we have a menu that will allow you to add, delete, and duplicate pages in the app. In the developer version, we can add a blank login and sign up page. In the paid plan you also have access to an HTML page. We can also set the default page of the app from this menu by clicking on the pin next to the page. The default page is the first page that will be displayed when we launch the app. Then the center section is where we can use Device to simulate various different devices that our app can run on. This is especially useful for developing with iOS when you do not have access to a Mac. This way you can simulate an iPhone, iPad, Android Phone, and Android Tablet. We can also enable and disable the Status Bar and the Device Skin. Then on the right, we have the properties pane that will display the currently selected item's properties. Since the page is currently selected, the page properties are displayed. The page has a title, routing URL, and state sref at the top. These properties will mainly be used to navigate around our app. Then we have our route parameters, which are only accessible in the paid plan. If you have ever used Ionic or Angular, then you will know that we can use route parameters to pass data between controllers. After that, we have Background, which lets us change the background of the page. We can change the Background Color or upload an image for the background. Then we have controls that will allow us to add left and right header buttons. Once we enable the buttons, we have a lot of different options on how they appear. First we can choose an Icon for the button Ionic Creator includes a lot of different icons that you can use, and you are sure to find an appropriate one. Then Text is the text that is displayed on our button, and style as a button will make it look like a standard Ionic button. Also when we style as a button, we can use the different Theme buttons that Ionic offers. After that, we have Directives which is a paid feature, followed by the Miscellaneous section. These are other general settings of the page that weren't addressed in other menus. The most notable one to me is Classes, which allows us to add CSS classes to the page. Now that you are familiar with the interface of Creator, in the next video we will start to work with the various components that we can use in our app.