Getting Started with Ionic Creator

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

11.41 AM, Home, Just finished my late morning snack. It was then I received an Email from The Ionic Team! It said

Screen Shot 2014-10-23 at 1.47.43 pm

And I was like Yay!!?? And wanted to quickly test drive it. So I clicked the link and navigated to creator.ionic.io. It was like

Screen Shot 2014-10-23 at 1.26.44 pm

My eyes began to widen and I quickly clicked on the Login link.

Screen Shot 2014-10-23 at 1.27.05 pm

After login, I skipped the optional page Screen Shot 2014-10-23 at 1.27.24 pmand jumped into creating my First App

Screen Shot 2014-10-23 at 1.27.46 pmAs soon I clicked on Create Project, I saw the Ionic Creator!

Screen Shot 2014-10-23 at 1.28.05 pmIt was like any other WYSIWYG editor but for building Mobile Apps with Ionic. I used Intel’s XDK before so I wanted to see the difference.

I quickly dragged in a Card from the left bottom Components pane and then dropped it on to the page. Next, Clicked on the Card, updated the text. Dragged a Header from the Components panel and dropped it inside the Card. Change the header size to 3. Finally clicked on the Page Name on the left top Pages Panel, updated it.

Bam!! This is how the page looked

Screen Shot 2014-10-23 at 1.30.33 pm

I was like Sweeeeettttt…. And clicked on the Test mode on the top right corner of the page, to see the app realtime.

At first nothing appeared but when I clicked the menu on the top right hand corner, and clicked on the Project name, a preview appeared.

Screen Shot 2014-10-23 at 1.32.08 pmI was like cool!! Now that my app is ready, I wanted to download it. Back to the Edit Mode (from the top edit/test toggle), I clicked on the second Icon from left – Export. Then I saw this

Screen Shot 2014-10-23 at 1.31.03 pmI can either download the raw html, or a zip version of the HTML or I can use the Ionic CLI to achieve this. Simple and cool!

An End to End ToDo App

Now, I was like, let’s see up to what extent can I build an App with the Creator.

I clicked on the menu on the right side, clicked on the + icon to add a new project. I wanted to create a Todo App with User based authentication.

Screen Shot 2014-10-23 at 2.20.32 pm

I wanted the initial page to be a Login page. I selected that option and clicked on Create.

The project was created with a new Login page.

Screen Shot 2014-10-23 at 2.24.20 pm

So far so good. I wanted to add a Signup page. So, clicked on the Add Page icon inside the Page component panel and selected Sign up

Screen Shot 2014-10-23 at 2.26.58 pmNext, clicked on the Create Account link on the login page and linked that to the Signup page like

Screen Shot 2014-10-23 at 2.28.02 pmPretty sweet! Now, I wanted to add the Todo Page.

Clicked on the Add Page and added a Blank Page. Named it Home, updated the routing URL to /home and designed it like

Screen Shot 2014-10-23 at 2.57.48 pm

To keep this app simple, I was not planning to add edit and delete to the Todo Items. And moreover, I was not able to drag and drop buttons inside the list items, which would be a nice to have feature, may be.

Another thing I could not find is adding a Button to the Header to add a new Todo. So, I have added the button on the top of the page, which looks good too.

Now, when I click on this button, a Modal pop up should open with a form to create a new Todo. So, I added a new Modal from the pages list and updated it as

Screen Shot 2014-10-23 at 3.02.04 pm

I guess that is it! My app was designed. The total activity took less than 15 mins, which was pretty impressive.

Now, I want to give life to this app by developing it completely and hooking it up to a server.

I went back to my dekstop, created a new folder named iCreatorTodoApp. And opened a new terminal/prompt inside it.

I made sure I was running the latest version of Ionic CLI and Cordova by executing

npm update -g ionic cordova

And then went back to the browser and clicked on the export link to get the details of my project.

Screen Shot 2014-10-23 at 3.11.09 pmOnce the Ionic CLI and Cordova are updated, I ran the below command in the terminal/prompt

ionic start myTodoApp creator:7c34bc7eebf9

It took a couple of minutes for the project to setup. Once it was done, I stepped into the myTodoApp folder and ran

ionic serve

And Bam!! The app opened! – as designed. One thing which I quickly noticed was the 404 on the preview-frame.css, which I assumed was a Creator dependency and was not needed for the actual app. So, I removed the reference from www/index.html.

And I also noticed that www/index.html has all the pages I have created, saved as ng-template. I was like, If my app is going to have more than 10 pages, I should split them up and save it inside a partial folder and load them via the router. But for this app, I am good!

Building the server code

Now, I wanted to quickly whip out a REST API for Login, Register, Show and Create Todos.

At the root of iCreatorTodoApp folder, I created a new folder named server. I CD-ed into this folder and started a new Node.js project by running

npm init

Next, I installed the required dependencies by running

npm install --save express body-parser morgan diskdb

My Server is going to be written on top of Express.js and I will be using DiskDB for persistence.

I created a new file named server.js here and updated it like

On Line 18, I have pointed to the routes file.

Now, I created a new file named routes.js and at the root of server folder and updated it as below

I have added 4 routes.

  1. Signup
  2. Login
  3. Get All Todos for a User
  4. Add  a new Todo

Simple and easy REST API with Express.js & DiskDB. For DiskDB to work properly, I need to create a folder named mydata inside the server folder.

Bam! My REST API is done. Now I need to update the Ionic app.

I have cleaned up the www/index.html and moved the Angular app logic to www/js/app.js. The updated index.html looked like

And the updated www/js/app.js looked like

This has the app init logic, factory, controllers and modal logic.

I saved all the files and then I started the server

node server.js

and then the Ionic app

ionic serve 

And then I saw

Screen Shot 2014-10-23 at 7.02.27 pmI wanted to create a new account, so I clicked on create an account

Screen Shot 2014-10-23 at 7.02.55 pmAnd registered, and once I register, I was redirected to the Home page, where I saw a few todos which I added from the backend when I was testing the serviceScreen Shot 2014-10-23 at 7.03.24 pm And then I added one more

Screen Shot 2014-10-23 at 7.03.39 pm And Bam! The updated list

Screen Shot 2014-10-23 at 7.03.45 pmSweet and Simple Todo List in less than 1 hour, including a REST API.

You can find the code for this app here.

My wish list for the Ionic Creator

  1. Save code to GitHub or Bitbucket from the Creator
  2. Integrate app development with Cloud based IDE’s like Codio, so that everything can be done in a browser.
  3. Ability to import an existing Ionic project into the Creator
  4. An online workflow where a user can build the app, deploy and generate installers. It would be awesome if the app versioning and pushing to App markets can be managed too.
  5. It would be awesome if Ionic Creator can have a desktop app kind of like Intel’s XDK.

Well that was an hour in my day with the Ionic Creator!


Thanks for reading! Do comment.
@arvindr21

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page
  • Revolver

    I couldn’t agree more with your wishlist for Ionic

  • http://focusweb.ir Vahid Najafi

    Hi. I want to use ionic creator for building apk and ipa. Now it’s possible for creating new project and beside, I can download the project and edit that project in my own laptop computer.

    Is it possible to upload edited project again to the creator.ionic.io and build it for edited project?

  • Zheng Lin

    Thank you very much for this excellent tutorial!

  • Heinrich Aluvilu

    Thanks for things, I just started with the Ionic Framework and I came across this awesome tutorial you have shared. it helped me jump-start my project. Thanks again.

    Greetings from Namibia, Africa.

    • / Arvind Ravulavaru

      Thanks Heinrich! Glad I could be of help!

  • Vitor Costa

    The idea of creator is good but it’s very bugged yet.
    We cannot add buttons on header, there is no tabs navigation linking to a single tab and it’s hard to place the components on the screen. It’s just a few things I’ve noticed. But I believe it has great potential to become a outstanding tool in the future. For now, it has a lot to be fixed.

    • / Arvind Ravulavaru

      True that!

  • http://elitepowered.com ElitePowered .

    Great tutorial!

  • Bruno Seixas

    I havent got one invite :(
    But I am looking very anxious for this tool 😉

    Thanks for sharing!