I build apps with jQuery Mobile and PhoneGap Build. I code primarily with HTML, CSS and jQuery/Javascript and I’m planning on learning Angular.
I think the bar to entry is too high with Ionic. The tutorials don’t start with the basics, the install process is over complex when you don’t need to use command line tools if you’re using PhoneGap Build (PGB). The documentation is very spotty to people like me - the learn ionic stuff and the tutorials aren’t easily found from the main page.
But most importantly - the main docs don’t explain how to build a simple app with a header and footer and scrollable content just by using the beta download without the command line. The CSS guide is really nice and you can implement all the elements with just the beta download, but they don’t really work together because the Content explanation isn’t clear at all.
I think we need a really really basic explanation, a hand holding tutorial, for building apps. I’m still struggling to get much working, although I’ve been able to implement the Todo app (to some degree) on Android and iOS with PhoneGap Build.
Ionic + PhoneGap Build is potentially a match made in heaven. You can build iOS apps from a Windows machine or a Mac, something you can’t do with the regular install and implementation (as described on the main Ionic Guide). PGB is now using Cordova 3.5.0 and has many plugins for it. It used to run a few version behind vanilla PG. Not true anymore.
What I love is I can code on my PC, push to Github, and continue working on my Mac laptop on the same app. Yes, I need the Mac and iPhone to test the app but you’re not tied to a Mac in the same way as you are with the command line.
If I can get my head around building a basic app I’ll happily write a tutorial, PGB, PGB plugins, PGB signing keys for Android and iOS, the works. I just need some help with the basics.
I would mention that don’t forget that ionic is built on top of Angular and phonegap is just a wrapper. Why don’t you first look at learning Angular so that you get the basics for the framework and use phonegap like the wrapper that it is the same way you have been using it for your other apps.
I’m not an expert at Ionic but after going through the sample todo app like 3 times i really started to pay attention to the names of some of the markup and there is a lot of Angular referencing. so spending time learning it should be like step 1, then would say step 2 would be learning Ionic for the UI. That’s my 2 cents. But more tutorials wouldn’t hurt
I’ve just spun through the free angular course on codeschool.com. great intro.
the ionic stuff looks well documented - but having not used cordova or phonegap before I’m a bit confused where they come in, especially from a build & deploy point of view? Seems like Ionic isn’t keen on phonegap itself.
Cordova or phone gap create the wrapper that will encapsulate the html app that you will build so that it works on different smart phone devices like ios and android. with Phonegap you will be able to take the app that you build and then package it to make it installable on these platforms and use their resources.
When i first go started with phonegap i thought there was really a lot to it that i had to know but within a few hours of playing with the console i had packaged my first html app. go through the tutorial that are on phonegap on their site and you should have at least 30% covered.
I would say you need node,js, phonegap, android sdk, a good text editor (loving brackets), ionic and (i think ant on windows) and you pretty much have the tools to start building apps the rest are the skills that you collect on Angular and Ionic Interfacing.
when you use the console for the ionic starter templates you pretty much have a phonegap and ionic + angular app backbone template
This is just it - you have entirely missed my point.
You do not need node.js, PhoneGap or any sdk (android or iOS).
You need a text editor (I use Sublime Text) and the Ionic files.
That is it.
With that you can create apps locally and build them for different platforms on PhoneGap Build. You don’t need to use the command line, you don’t need to install anything on your computer actually (you could use notepad as your text editor!).
Why do I care? Because for people who want to create apps this makes things so much easier. Plus there are lots of people building with PhoneGap Build who, like me, are using less than optimal HTML5 frameworks like JQuery Mobile. People are trying to use Cocoonjs and things like that, which aren’t ideal either.
Ionic is what these people are looking for. Let’s make it easy for them because it is easy and it should be easy.
The second part of my idea is having a demo site like the jQuery Mobile demo site and tutorials. Ionic has demos but not a lot of explanation. I had to go onto Stackoverflow to find out that you can use the CSS or JavaScript described methods for the headers and footers. I had to ask to find out that in the content div you can specify “has header” to create the space so the content doesn’t sit under the header.
If we had these you can bet people would come over to Ionic. I’ll happily be an Ionic evangelist for this, spreading the information.
I would say it depends on how you want to build, the command line for me as a startup and build process makes things easier, way way easier. talking from my point of view that is.
You can go plain out and start building things, but with 2 lines of code and having a proper start up sure beats having to site for like 30 mins to get a template up.
You can easily add the platforms from the command line as well, i would say take a look at the command line and how easy it makes life.
the tools i mentioned are what made life easier for me, might not if you want to go another route
I work at a College in Canada where part of my job is creating mobile apps. We decided to go with Ionic as our framework of choice and use Phonegap Build as our packaging tool since we already have deals with them.
You are correct that you don’t need the node.js setup and etc. I personally use Notepad++, and my coworker uses sublime text. You can completely get away with just using a text editor and uploading zip files to the PGB service.
However, we decided that to save time (and boy does it add up) by using Grunt as our build tool. We don’t use some of the other stuff, such as the ionic CL tool.
Running a command from Grunt for us does a few things.
Increments a “build” number
Injects platform specific stylesheets that allows us to automatically deploy native-looking skins for each platform (Blackberry, iOS, and Android)
Injects platform specific config values
More automated build steps
Zips all of our files into a uniquely named .zip file in a builds folder which includes the build number in the name
Takes the zip file and uploads it to the PGB service, unlocks the keys, initiates a packaging, and then downloads the packaged file (.ipa or APK) and then saves it into a “packed app” folder.
Could we do this all manually? Absolutely. But it is so much nicer to be able to type “Grunt build:ios:beta --package” and it do ALL of these steps, including everything involved with PGB, and get a device-ready file in 15 seconds or less.
We don’t have to remember any of the little details of copying and pasting, changing values in a bunch of files, remembering what files to zip and which ones to not, etc. It is all automated.
So, again, yes you can do it WITHOUT node.js etc as dependencies, but it will make your life as a developer MUCH easier.
PS: I may write a blog post on our process with more technical details if anyone would be interested.
Now that does sound interesting. I’d love to see a tutorial on that. I’ve never used Grunt.
The point of my post isn’t to say that command line tools and app installs are bad, but they represent a barrier to entry. I can’t run the test project because I get an error I can’t fix. This could have stopped me from trying Ionic altogether, but I haven’t because I’ve got a work around.
Running it my way also gives a level of transparency. You only need the CLI tools because it automates things, not because you need to know Node, for example.
Grunt is a great tool. It allows you to use tasks (plugins) made by others, create your own tasks, or a mixture of the two.
Can’t say you are wrong. Every dependency in any project adds an additional setup step, and often there are issues that are often environment specific that are difficult to debug or find solutions to. This isn’t unique to Ionic or command line tools.
Correct, you don’t NEED the tools.
As for the level of transparency, I can see where you are coming from. The nice thing about using something like grunt is that you can see EXACTLY what each task does, especially if you are the one that creates them.
This was very informative, thanks. This should be part of the Ionic tutorials imho.
If I needed to do that perhaps I would.
I use Github to deploy to PGB though, and as I work with other people (distantly) on projects that are all on GitHub for collaborative working I find it really easy to push and build straight to our phones and Macs (for deployment to iOS test devices).
I concur. It’ll be great if there is a fundamentals tutorial which introduces ionic to people who aren’t familiar with with web technologies. My gf is only 21 and she’s learning web development. She can benefit from some of this.
I’m currently working on a post that talks through Ionic’s starter side menu project, breaking it down piece by piece to understand how it all fits together. I would say some of my other stuff (specifically Structure of an Ionic App and my tutorial on views) would be prerequisites to what I am writing.
I’m very behind on my blogging at the moment cause of so much going on. I’ll get to this as soon as I find time. Feel free to nag me on twitter if I don’t get to it within the next week.
