Ionic Creator – From idea, to prototype, to real life app

Edit 02/26: access to the repo for this code here

The Ionic team has been hard at work trying to lower the barrier of entry in the mobile development world.

The Ionic Creator is a simple prototyping tool that helps developers, designers, and project managers to quickly build mobile apps and websites without having to code.

This allows for a quick feedback loop among a team which helps speed up the development process drastically. A project manager might prototype a design and generate real, clean Ionic code to give to a developer. Or, a developer might use Creator to quickly generate UI snippets and rapidly bootstrap new app projects.

Unfortunately, as of now, dynamic data prototyping is not directly supported in the tool and this tutorial aims at highlighting how this can be done.

What is Creator ?

As Matt Kremer puts it in the very first Ionic Creator tutorial video:
“Ionic Creator is a simple drag and drop prototyping tool to create real app with the touch of your mouse.”

Indeed, Ionic Creator is provides a full set of Ionic components that you can simply drag and drop into your project and rapidly prototype a fully working app.

ionic.creator.components

Who is Ionic Creator for?

  • Novice Developers trying to get their hand in hybrid mobile development
  • Designers tweaking around options for product development
  • Experienced Ionic developers looking to bootstrap their projects
  • Freelance developers gathering clients feedback via sharing features

Collaborate, Share and Export your App

Ionic Creator makes it simple to collaborate and share your app in many ways.

You can send a link to the app running in the browser via URL, Email or SMS so a user can run the app from a browser.

Using the Creator App (available on Android & iOS), you can share the app and have it run directly on the device in similar conditions as if it was a stand alone app.

Finally, you can package your app for iOS and/or Android directly through the Ionic Package service.

Introducing Axial Events!

The goal of v1 of the app is to show a list of events and allow the member to indicate which other attendees they want to meet up with so we can send reminders during the event.

We will need:

  • List of Events: title, content, image
  • Event Detail page: list of attendees with a way to indicate interest

Step 1: Project Creation

First we will pick a blank project as we do not need a side menu or a tab layout.

ionic.creator.project.creation

Step 2: Create the list of Events

Then, let’s rename the new page as Events, drag in some List Item w/ Thumbnail and give each of them some details.

ionic.creator.events.list

Step 3: Create Event details page

For each event, we will need to create a detail page which we will name according to the event and add a list of List Item w/ Thumbnail for the attendees:

ionic.creator.event.details

Step 4: link everything together!

Finally, for each item in our events list, let’s adjust the link to their respective
target page:

ionic.creator.linking

Step 5: let’s take it out in the wild!

At this point, we have an app that showcases how the flow will go from screen to screen.

Let’s take it live and plug it to our API. It’s time to export our app.

ionic.creator.export

Once you open the repository in your favorite text editor, everything has been wired up for you.

With a little bit of Angular knowledge, and a dash of CSS, the sky is the limit!

Let’s clean up the code a bit and plug in our API.

Step 6: Cleanup – Views – Events

First let’s clean up the Events List view and make use of repeating element:

<br /><img src="img/6YS77136Q5yo9V7yjI6g_Atlanta-Summit-hero-image.jpg" alt="" />
<h2>Atlanta Summit 2016</h2>
February 9th, 2016

<img src="img/oQ9mqXNQzeoPtXXwzXzZ_san-francisco-summit-hero-image.jpg" alt="" />
<h2>San Francisco Summit 2016</h2>
March 16, 2016

<img src="img/WTUsCmmCQjWl43vRjGOx_dallas-summit-homepage-image.jpg" alt="" />
<h2>Dallas Summit 2016</h2>
April 13, 2016

then becomes:

<br /><img alt="" />
<h2>{{::event.title}}</h2>
{{::event.date}}

Step 6: Cleanup – Views – Event Info

When duplicating the Event Details page, we created three identical page which should really be one template instead. Therefore, atlantaSummit2016.html, dallasSummit2016.html and sanFranciscoSummit2016.html are replaced by one event.html file which ressembles:

<div style="text-align:center;"><img alt="" width="100%" height="auto" /></div>
<h3>Attendees</h3>
<img alt="" />
<h2>{{::attendee.name}}</h2>
{{::attendee.title}}

Step 6: Cleanup – Routes

Since we have removed the duplicated views, we need to clean up the routes.js file a little from this:

$stateProvider
.state('events', {
url: '/events',
templateUrl: 'templates/events.html',
controller: 'eventsCtrl'
})
.state('atlantaSummit2016', {
url: '/events/atlanta',
templateUrl: 'templates/atlantaSummit2016.html',
controller: 'atlantaSummit2016Ctrl'
})
.state('sanFranciscoSummit2016', {
url: '/events/sanfrancisco',
templateUrl: 'templates/sanFranciscoSummit2016.html',
controller: 'sanFranciscoSummit2016Ctrl'
})
.state('dallasSummit2016', {
url: '/events/dallas',
templateUrl: 'templates/dallasSummit2016.html',
controller: 'dallasSummit2016Ctrl'
});

to this:

$stateProvider
.state('events', {
url: '/events',
templateUrl: 'templates/events.html',
controller: 'eventsCtrl'
})
.state('event', {
url: '/events/:id',
templateUrl: 'templates/event.html',
controller: 'eventCtrl'
});

Step 6: Adjust Controllers

Instead of one controller per event, we will need one eventCtrl controller:

angular
.module('app.controllers', [])
.controller('eventsCtrl', function($scope) {
})
.controller('atlantaSummit2016Ctrl', function($scope) {
})
.controller('sanFranciscoSummit2016Ctrl', function($scope) {
})
.controller('dallasSummit2016Ctrl', function($scope) {
})

then becomes:

angular
.module('app.controllers', [])
.controller('eventsCtrl', function($scope, EventsService) {
$scope.events = [];
EventsService.getEvents().then(function(res) {
$scope.events = res;
});
})
.controller('eventCtrl', function($scope, $stateParams, EventsService) {
$scope.event = [];
EventsService.getEventDetails($stateParams.id).then(function(res) {
$scope.event = res;
EventsService.getEventAttendees($stateParams.id).then(function(res) {
$scope.event.attendees = res;
});
});
})

Step 6: Implement Services

First of all, we need to put together a quick API which will provide data manipulation layer for our app.

For the purpose of this demo, I put together a quick Express API running with nodeJS available here.

Given the API is now running at http://localhost:3412/, we have the following endpoints:

  • GET /events
  • GET /events/:id
  • GET /events/:id/attendees

Let’s plug all those in our EventsService:

angular.module('app.services', [])

.service('EventsService', ['$http',
function($http) {
return {
getEvents: function() {
var promise = $http.get('http://localhost:3412/events').then(function (response) {
return response.data;
}, function (response) {
console.log(response);
});
return promise;
},
getEventDetails: function(id) {
var promise = $http.get('http://localhost:3412/events/'+id).then(function (response) {
return response.data;
}, function (response) {
console.log(response);
});
return promise;
},
getEventAttendees: function(id) {
var promise = $http.get('http://localhost:3412/events/'+id+'/attendees').then(function (response) {
return response.data;
}, function (response) {
console.log(response);
});
return promise;
}
}
}
]);

Step 7: Serve!

At this point, we have our app connected to a working API and we are ready to publish!

Display the app in a browser with android and iOS version side by side

$ ionic serve --lab

Build and run the app in iOS simulator

$ ionic build ios && ionic run ios

Build and run the app in android simulator

$ ionic build android && ionic run android

Package your app for store publication via Ionic package

$ ionic package build ios --profile dev

Resources

Ionic Framework – http://ionicframework.com/
Ionic Services – http://ionic.io/
Ionic Creator – http://usecreator.com
Ionic Creator Tutorial Videos on Youtube
Ionic Package – http://blog.ionic.io/build-apps-in-minutes-with-ionic-package/
Find help on Slack – http://ionicworldwide.herokuapp.com/

Anatomy of a Mobile App development project

Screen Shot 2015-09-23 at 5.14.22 PM“Being the first to respond to a deal on Axial gives you a 19% greater chance to closing it.” – Peter Lehrman – Bloomberg Business 2015-09-11

It is based on this insight that, for the past 6 months, Axial has assembled a team dedicated to putting together a solution that gives the investors the power to control and direct deal flow within the palm of their hands. Introducing Axial Mobile for iOS!

Native vs Hybrid

Over the past few years, a recurring topic has been whether to develop mobile apps using native languages (Swift/Objective-C for iOS or Android SDK) or hybrid frameworks relying on platforms’ browsers (UIWebView for iOS or WebView in Android).

While the native approach allows for a closer integration with each platform’s abilities and greater hardware responsiveness, the decision to go with the hybrid approach was motivated by several factors:

  • one unique codebase:
    • ease of maintenance,
    • multi platform deployment simplified,
    • simplified testing
  • ability to use a familiar framework:
    • smaller learning curve
    • supporting resources immediately available
    • ease of development scaling if required
  • maturity of the Ionic framework:

The choice of Ionic Framework

Over the last two years, Ionic has grown to become the reference framework in the hybrid community, providing custom industry standard components built on the Angular framework

Relying on Apache Cordova to enable developers to access native device function such as the camera or accelerometer directly from JavaScript, Ionic has created a free and open source library of mobile-optimized HTML, CSS and JS components, gestures and tools for building interactive apps from JavaScripts.

Moreover, the Ionic.io platform comes with a complete hybrid-focused suite of mobile backend services to integrate powerful features such as push notifications and rapid deployment.

Since we have adopted Angular as our reference front-end framework, it is only natural for Axial to leverage many of Ionic components and services in order to deliver the most embedded experience to its members.filter

Push notification integration

Using Ionic.io’s push service, we have the ability to notify members of deals they receive instantly. Our members also have the ability to adjust their notification preferences:settings

We can also very efficiently trigger updates in the background so that it ensures a smooth user experiences by preloading updated data using silent notifications.

Rapid deployment process

The Apple App Store release process takes approximately a week. However, in order to fix critical issues or release changes rapidly, 7 days can seem like an eternity.

For this reason, Ionic.io’s deploy service allows us to release any non binary affecting changes on the go. As a result, having this flexibility allows us to ship code more frequently, enhancing our members experience without forcing them to go through painful, often delayed (or forgotten) updates via the App Store.

Contributions to Ionic

Despite numerous features and wildly embraced standard components, Ionic may have some gaps. As we have discovered during the implementation of Axial Mobile, while the right-to-left swipe gesture on a collection repeat item was available, the opposite left-to-right gesture was not.

Thankfully, building a wildly adopted Angular framework, it was simple enough to implement our own left-to-right swipe gesture and submit a pull request on Github in order to contribute to the framework and give back to the open source project.swipes

Future Developments

Having shipped our Axial Mobile version 1.0 on September 21st, we are now awaiting feedback from users.

Our members now have the ability, in the palm of their hand, accessible from anywhere, to pursue or decline deals and create conversation around the ones that catch their interests.
Soon, we will be integrating HelloSign services to provide a way for our members to sign NDAs and other documentation directly on their smartphones screen, allowing them to engage one step further in the deal making process.