August 24, 2016
  • All
  • Creator

Creator Adds Custom Code Support

Matt Kremer

creator-custom-code

Some of you may have noticed that Creator has changed a lot in the past three weeks. We’ve rolled out some of the biggest updates ever to the product, and the response has been incredible. Our goal has always been to get you “from zero to App Store” as quickly and easily as possible, and I’m happy to say we’ve finally made that dream come true.

Introducing Custom Code Support ?

Now, Custom Code Support isn’t just one feature, it’s actually a collection of features that, when brought together, allow you to build a fully dynamic app without ever leaving Creator.

If you want to check it out in action, watch this 30-minute tutorial, in which we make a “Master Detail Pattern” style ToDo list backed by Firebase.

One-Click Addons for your Project ?

Apps today use a lot of external services to store data, track information, and reduce the amount of code you need to write. With One-Click Addons, we wanted to make sure that you can integrate with these services easily.

Screenshot 2016-08-22 14.30.29

Right out of the gate, we’re supporting Firebase, Kinvey, and MixPanel, but we’re going to be releasing more and more all the time! Be sure to let us know which technologies you’d like to see by commenting on this post.

Controllers, Services, & Directives, oh my! ?

One of the most important things we’ve included is the ability to edit the JavaScript controllers from your pages right in Creator. You can inject dependencies and services and start adding real data and code to the pages that power your app.

Screenshot 2016-08-22 11.18.32

You can also include your own separate JavaScript files, including Services, Directives, and anything else you can think of. This allows you to share data between multiple pages and even use pre-made services you find online.

Built-In URL Route Parameters ?

One of the pieces of functionality we wanted to support the most was Route Parameters. For example, if you have one “Profile” page, you can actually set up a parameter for that page that accepts a person (like go to /profile/sarah).

url-parameters-animation

When you use any link-able element, like a button, you can then specify a static parameter (“sarah”) or use a template tag (“{{person.name}}”) to bring data in from your controller.

This allows you to build a page like a Friends list dynamically that then links to all your Friends profiles!

Include Directives & Template Tags Anywhere ❤️

With a flexible system, we’ve allowed you to include any Angular or Custom Directive on our built-in Components. You can also use {{templateTags}} anywhere that text can be typed in our Component Properties.

Screenshot 2016-08-22 11.50.05

We even give you complete control of where the Directive gets added to your exported DOM code with an easy “click to place” system.

If you want to take 100% control over the component, you can also Convert to HTML, and we’ll let you take it from there!

Test with Creator Mobile or Export with Package ?

Want to preview your app right on your phone? Creator Mobile already has support for our Code features. This means you can get live data from your server (or a database-as-a-service) and interactions when testing your app right on your phone.

Pasted image at 2015_11_10 10_29 AM

You can even include Cordova Plugins right in your Ionic Package exported Android or iOS file. For instance, code your Camera support right in Creator, then export using Package, and you can test the Camera right on your device.

Start Building *without* a Development Environment ?

With the new Custom Code Support, you no longer need to export your app locally to make something that works; we’ve given you the power to develop online, without even needing to set up a local development environment.

So what are you waiting for? Get coding with the new Ionic Creator!

try-creator-button


Matt Kremer