Ionic Phone App - IOS and Android emulators for testing


#1

Hi

I’m building an Ionic 2 app on a Cloud9 workspace.

Has anyone got any ideas how to:

  1. connect a real device to the workspace so I can see what it looks like and test it.

  2. run it on an IOS or Android emulator so I can test the InAppBrowser component of the app.

Any help much appreciated.

Tom


Getting Started with Ionic
#2

Any luck with this Tom?


#3

Not really, still trying.

So far, the closest I’ve got is to use either 1) Ionic View, which allows you to install a shell app in your device, which is then linked to your app that you get into the Ionic Platform by using Ionic Upload 2) using Ionic Package to get an APK of the Android app, then sending that to an online emulator like appetize.io.

The problem I’ve got is that I need to use the Cordova InApp browser plugin, which is not supported on Ionic view and I can’t get it working on appetize.io either.

That’s where I am.


#4

As far as I know, the only way to do this is to download your files and then run them on your local machine (or on your local device from there). I don’t know if there’s a way to connect your device to a workspace. I know there have been discussions about other ways of doing this but I don’t know if there has been any conclusion.


#6

Hi Brady,

Thanks for responding.

There is something called the PhoneGap Developer app, that can make a call to a URL, compile the files and start the app for testing on a device.

I tried using it with Cloud9, giving it the URL and port number that comes up when Ionic Serve starts on my Cloud9 workspace.

I have not had any luck getting this to work yet, at least partly because I have an Ionic app, not a Cordova one. I’m looking into what the key differences are.

Once I have done this, how can I make sure that I can give the PhoneGap Developer app access to the root or project folder via a URL? Is that even possible on Cloud9?

Tom


#7

Yes, I actually think I did this once with Cocoonjs so this should be possible. If I remember correctly, you just need to open your share workspace dialog from the top right of your workspace then grab your workspace files URL (after you check the box to make it public).

If you don’t make it public, the app will be asked to sign in with its Cloud9 account and I’m guessing the app doesn’t have a Cloud9 account :smiley:

Looking forward to hearing if this works for you!


#8

Hi Brady

Can you please take a look at this Youtube video and, if you understand, explain to me how he is doing it? Or maybe ask someone who knows?

He is serving a Phonegap app to the Phonegap Developer App and he appears to be using a network address that’s remote.

Can I just say that this is absolutely crucial for anyone attempting to develop Ionic apps on Cloud9. Without the ability to test the app in a device context, there’s no point in doing it.

This guy is the only person I’ve found who’s done it.

Cheers

Tom


Android app emulation
#9

Ah, glad you found that out. @jerteach can you offer any further insight on this?


#10

Hi Tom

Follow me on Twitter @rocksetta and we can Direct Message about Cordova/ionic

It works great with Cloud9. Not sure about Ionic.


#11

Hi Jeremy

Thanks, I’m following you through my Pathfinder twitter account.

Look forward to hearing from you.

Tom


#12

Jeremy,

I’m new to Twitter so bear with me.

@getpathfinder is my twitter thing.

Tom


#13

I don’t see why it wouldn’t work with ionic since it’s just a framework using angular directives to render mobile optimised elements… I follow you on twitter, but still unable to DM you since you don’t follow me back… :-/ The key point here for me is : how did you make it work although phonegap developper app documentation says : “Double check to ensure you’re running your device and computer on the same network before continuing.” ?


#14

Make sure your ionic/phonegap server is listening for http(s) on IP 0.0.0.0 (process.env.IP) and port 8080 (process.env.PORT).
Maybe this post has some pictures that may help you.


#15

I try not to read API’s :wink: With the ~40 languages I have used I would still be reading Fortran API’s. I also make lots of mistakes, which seems to help find things that work

What is your twitter, I could not find @jcap-pro.


#16

BTW, I was able to get my app working with a combo of Cordova running locally on my laptop, then having it load my web app running on c9.io.

Here’s my Cordova index.html file:

	<!DOCTYPE html>
	<html>
	    <head>
			<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com *; style-src *  'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'  'unsafe-eval' *; connect-src *; media-src *">
	        <meta name="format-detection" content="telephone=no">
	        <meta name="msapplication-tap-highlight" content="no">
	        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
			<style>
				body, html {
					top: 20px;
				}
			</style>
	        <title>Winetracker.co</title>
	    </head>
	    <body>
	        <div class="app">
	            <h1>Testing 1, 2, 3</h1>
	            <div id="deviceready" class="blink">
	                Loading...
	            </div>
	        </div>
	        <script type="text/javascript" src="cordova.js"></script>
	        <script type="text/javascript" src="js/index.js"></script>
			<script>
			  function onDeviceReady() {
			    if (navigator.connection.type == Connection.NONE) {
			      navigator.notification.alert('An internet connection is required to continue');
			    } else {
			      window.location="https://myproject.c9.io";
				  StatusBar.hide();
			    }
	 		  }
	 		  document.addEventListener("deviceready", onDeviceReady, false);
			</script>
	    </body>
	</html>

And here’s my Cordova config.xml file:

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.c9.myproject" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Test 1, 2, 3</name>
    <description>
        Testing Cordova to work with C9.io
    </description>
    <author email="tony@winetracker.co" href="http://winetracker.co">
        Winetracker.co
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
	<allow-navigation href="*://*.winetracker.co/*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

This was using purely Cordova (without PhoneGap or Ionic).

I’m pretty happy with it. I now have working apps on iOS and Android that I can code against live via my dev environment on c9.io.


#17

Yes, I can see that’s a nice solution. Sadly I cannot have either Cordova or Ionic on my local machine, thus Cloud9.