Creating a HelloWorld app via Ionic Creator
Another way to start your app codebase is to use Ionic Creator. This is a great interface builder to accelerate your app development with the drag and drop style. You can quickly take the existing components and position them to visualize how it should look in the app via a web-based interface. Most common components, such as buttons, images, and checkboxes, are available.
Ionic Creator allows the user to export everything as a project with all .html, .css, and .js files. You should be able edit content in the /app folder to build on top of the interface.
Getting ready
Ionic Creator requires registration for a free account at https://creator.ionic.io/ to get started.
How to do it…
- Create a new project called myApp:
- Validate to ensure that you see the following screen:
The center area is your app interface. The left side gives you a list of Pages. Each page is a single route. You also have access to a number of UI components that you would normally have to code by hand in an html file. The panel on the right shows the properties of any selected component.
You're free to do whatever you need to do here by dropping components to the center screen. If you need to create a new page, you have to click on the plus sign in the Pages panel. Each page is represented as a link, which is basically a route in Angular UI Router's definition. To navigate to another page (for example, after clicking a button), you can just change the link property and point to that page.
There is an edit button on top where you can toggle back and forth between the edit mode and preview mode. It's very useful to see how your app will look and behave.
- Once completed, click the export button on the top in the navigation bar. You have the following four options:
- Use the Ionic CLI tool to get the code
- Download the project as a ZIP file
- Export it to native code (similar to PhoneGap Build), as shown:
- Export it to the preview mode using the Creator app, as follows:
The best way to learn Ionic Creator is to play with it. You can add a new page and pick out any of the existing templates. The following example shows a Login page template:
Here is how it should look out of the box (after export or download):
There's More…
To switch to the preview mode, where you can see the UI in a device simulator, click on the switch button in the top right to enable Test, as illustrated:
In this mode, you should be able to interact with the components in the web browser as if they're actually deployed on the device.
If you break something, it's very simple to start a new project. It's a great tool to use for prototyping and to get the initial template or project scaffolding. You should continue coding in your regular IDE for the rest of the app. Ionic Creator doesn't do everything for you, yet. For example, if you want to access specific Cordova plugin features, you have to write that code separately.
Also, if you want to tweak the interface outside of what is allowed within Ionic Creator, it will also require specific modifications to the .html and .css files.
