My ionic continuing tutorial Part 1

Ionic and angular have a steep learning curve. I am working on a new cordova project that I decided to use the fore mentioned toolkit. This will be my running blog on ionic/angular gotcha’s and I hope it helps people..

Creating an ionic project.
It’s painful, but I am here to help
This is assuming you have nodejs installed of course.
(if your not root, make sure you type sudo in front of the command I.E. sudo npm -g install cordova)

npm -g install cordova
npm -g install ionic

I am going to create a program calledRandom chat, that will do literally that anyone in the app will be able to randomly chat with people. So yes, this is client/server

ionic start randomChat sidemenu

I LOVE the sidemenu, it gives you more working room and gets out of the way.

Stuff is going to download at this point. The you will be handed the prompt back.

The one thing I HATE about ionic is how it messes with your reverse domain.. It drives me crazy!

Lets fix it (assuming Mac or Linux here, Windows, you’re on your own <-- I think that's a Walken comma) walken

cd randomChat
nano config.xml

It will look like this

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ionicframework.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>HelloCordova</name>
    <description>
        An Ionic Framework and Cordova project.
    </description>
    <author email="hi@ionicframework" href="http://ionicframework.com/">
      Ionic Framework Team
    </author>
    <content src="index.html" />
    <access origin="*" />
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
 
    <preference name="BackupWebStorage" value="none" />
 
    <feature name="StatusBar">
      <param name="ios-package" value="CDVStatusBar" onload="true" />
    </feature>
</widget>

That’s not quite right!!

Change:

id="com.ionicframework.starter"

to

id="com.yourdomain.randomChat"

Change:

<name>HelloCordova</name>

to

<name>randomChat</name>

You will probably want to update description and author.

Here is my final config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.nuwex.randomChat" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>randomChat</name>
    <description>
        An Application that will let you chat randomly with people.
    </description>
    <author email="spamme@thebugshop.net" href="http://twoappguys.com/">
      Two App Guys
    </author>
    <content src="index.html" />
    <access origin="*" />
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
 
    <preference name="BackupWebStorage" value="none" />
 
    <feature name="StatusBar">
      <param name="ios-package" value="CDVStatusBar" onload="true" />
    </feature>
</widget>

Boo yah, good there now.
Now since I am on a mac I am going to add iOS, since the emulator is awesome (and not even an emulator at all)

ionic platform add ios

Now we build it.

ionic build ios

Oh looking good, hopefully you have Xcode and all that installed, if not install it, you need it.

You should get a prompt back

Install ios-sim (don’t forget about sudo)

npm -g install ios-sim

ok good to here. No errors right? Of course not!

you should be able to see your app in action.

ionic emulate ios

Did you get a phone to pop up? I did!

iOS Simulator Screen shot Jul 21, 2014, 6.39.25 PM

iOS Simulator Screen shot Jul 21, 2014, 6.39.31 PM

That’s it you have started your first Ionic project! Exciting huh? I decided to split this into parts since it seems daunting to look at a wall of text.

All for now.

Check out Part 2

John “Don’t Taze Me Bro” Hass

One thought on “My ionic continuing tutorial Part 1

Leave a Reply

Your email address will not be published. Required fields are marked *