Backstory:

A couple weeks ago I decided to tinker around with building a cross-platform (Android and iOS) app. The best option for me seemed to be Cordova (or in some incarnations, PhoneGap), which allows developers to create apps in HTML5/JavaScript and deploy them as “native” apps by wrapping them in a native container. The most powerful way to start working with Cordova, of course, is to set up a development environment on your own machine. But despite having a clean Ubuntu install on a spare laptop, I couldn’t get the installation to work. Further, I couldn’t develop iOS apps anyway because I don’t have a Mac. Cordova requires the developer to have the platform software development kits installed to actually build the apps, and the iOS SDK is only available on the Mac. And if you’re not familiar with Node.js and SDK’s and PATH variables and the command line, getting started with Cordova on your own machine could seem overwhelming with all the steps, different pages, and downloads the Cordova docs send you to.

So I ended up looking for an easier way. There are a few options out there for people who want to build apps the “easy way”. Some look quite simplistic. Others are very powerful but proprietary. I ended up choosing to use Monaca because it offers a cloud-based IDE, creates standard Cordova apps, has an on-device debugger that grabs the app code from the cloud, and is free for up to three apps at a time. It also integrates well with the same company’s Onsen UI framework, which is an AngularJS-based app development framework. It was easy to get started, and with the live debugger and cloud build features there was no need to install an SDK or muck around with the command line. (Though I do love the command line. My first computer was an old hand-me-down running DOS 2, I believe.) Even better since I was travelling a bit at the time, I didn’t have to lug around an extra laptop with Linux installed or bog down my system trying to run a virtual machine. I could just log in from my laptop or any computer.

It worked great for a few weeks. I learned AngularJS and hacked together a working prototype with half of the planned functionality. But then I ran into a problem. I needed to use a Cordova plugin that wasn’t available on Monaca’s cloud platform. To import an external plugin I would have to upgrade to a $500/year developer account.

While Monaca offers a lot of flexibility and allows you to use any web app framework you want, this effectively meant I couldn’t use it any more. (I would still consider it for apps that would only use Cordova plugins that Monaca has available.) It was back to the Linux install, I thought. But first I decided to check out other cloud IDE’s. I came across Cloud9, which offers basically a complete Ubuntu system (with Bash shell), and a cloud-based, code-highlighting IDE. I also decided to switch to the Ionic framework since it seems to be more powerful and better supported than Onsen UI. After fiddling around a bit, I realized that setting up the Cloud9 environment for Ionic development is super easy. Once I set it up, I became able to work on my project from any computer, push new versions to BitBucket to maintain a project history, and I didn’t need to install an IDE, and SDK, or any other platform tools on my computer.

After setting it up (instructions below), you can use Git for version control and to push to your GitHub or BitBucket repositories. An advantage of this is you can then use PhoneGap Build to package your app for Android or iOS by having PhoneGap Build pull from your GitHub repository. (You’ll have to create a config.xml file for PhoneGap Build, but there is a tool to help with that.) Alternatively, I think you can install the necessary packages for building Android apps right in your Cloud9 instance, but I’ll just as soon use PG Build since all those packages take up space and the free account is limited to 1.5Gb.

Setting up an Ionic Cordova project on Cloud9

1. Sign up for a free Cloud9 account at c9.io.
   
2. In the dashboard, click the new project button, and then create a new workspace:
3. Enter a workspace name (no spaces) and select “Custom”, then click “Create”:
   
4. Wait for the workspace to be created. Once it is, select it in the left sidebar and then click “Start Editing”.
   
5. The IDE will load and you’ll see the blank workspace. At the left is a folder tree, but it is only a partial tree showing workspace files. The entire Ubuntu file system is available through terminal windows, one of which is already open at the bottom of the screen. (Terminals have a blue background color.) In the upper-right is the tabbed file editing window.
   
6. In the terminal window, type the command

   npm install -g cordova ionic

   
   
   and press enter. This uses Node.js’s Node Package Manager to download and install the Cordova and Ionic packages that will allow you to create the project.

7. When that finishes, run the command

   ionic start firstproject

   to create a basic Ionic project in a new folder called “firstproject”. The command you ran will set up all the Cordova files and set up an Ionic framework project in the firstproject/www folder. That folder is where most of your development work will happen.
   

8. Once that is complete, move to the firstproject folder in the terminal:

   cd firstproject

   
   
   If you want to set up Git, this would be a good time to initialize a repository and add the existing files to it.

9. Now you’re ready to preview the project. Feel free to explore the folder structure in the workspace navigator on the left. Much like on a website, the index.html file is the first file loaded when the app is started. More details about how the project is organized and how to take advantage of the Ionic (and AngularJS) features are available in the Ionic Framework getting started docs.
   
10. Ionic offers a nifty feature to build a version of your app that will live-reload the files in the www folder as you make changes, but since we haven’t installed an SDK, that won’t work. Plus we’re working on a remote server so the default Ionic live-reload setup for devices won’t work. So if you use plugins or need to test hardware features that plugins use, you’ll have to build the app first and then test. (I have a few ideas to get around this limitation that I’ll be trying out when I get to that point.) But in the meantime, testing the app in the browser is sufficient. Run this command in the terminal when you are in the firstproject folder:

    ionic serve -p $PORT

    This will start the Ionic server. You must include the “-p $PORT” option to make the server work on Cloud9. This tells the server to use the environment variable $PORT to determine what port to serve the app on.

    You will be asked which address to serve the app on. Enter 1 for the numbered IP address (don’t choose localhost).

11. The server is running! Click the link in the Cloud9 Help pop-up to load the app in a browser window inside the IDE. Click the button on the end of the address bar to load the app in a browser window where you can use the full browser developer tool to debug your Javascript. (And to change the view size to match mobile devices more realistically.) You can also use the PhoneGap app on Android, iOS, or Windows Phone to get a better view of how your app will look on an actual device. The live-reload feature doesn’t work through the Cloud9 server, so just refresh the browser window whenever you want to test changes.
    

I hope this helps you get started. Using Cloud9 is a compromise that has advantages and disadvantages, so it’s not for everyone. But if you’re looking to tinker around with Ionic, this is a pretty easy way to get started. Because the terminal is available, there is a lot of power at your fingertips, and you can ease into learning how to use the more advanced features of Ionic, Cordova, Git, and the other tools.