Jump to content

PhoneGap deploy to android device


Recommended Posts

Hello,
I have some projects in Phaser working on web. I wanted to try PhoneGap (need some of plugins).

I've started from converting some simple project to app (without any additional plugins yet) and I run into problems. APK is builded without any errors on PhoneGap Cloud Builder, but apk after install doesn't show any of Phaser content. I'm installing app from .apk file, not from Google Play/Market or whatever it is currently called - in short not from store.

I have PhoneGap HelloWorld example working. It consists of:

  • empty .cordova directory
  • empty hooks directory
  • empty platforms directory
  • empty plugins directory
  • www directory described later
  • config.xml

I didn't change anything in config.xml, but here it is : 

<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="pl.myapp.sample" version="1.0.0">
  <name>appSample</name>
  <description>Hello World sample application that responds to the deviceready event.</description>
  <author href="http://phonegap.com" email="support@phonegap.com">PhoneGap Team</author>
  <content src="index.html"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="android-minSdkVersion" value="14"/>
  <plugin name="cordova-plugin-battery-status" source="npm"/>
  <plugin name="cordova-plugin-camera" source="npm"/>
  <plugin name="cordova-plugin-media-capture" source="npm"/>
  <plugin name="cordova-plugin-console" source="npm"/>
  <plugin name="cordova-plugin-contacts" source="npm"/>
  <plugin name="cordova-plugin-device" source="npm"/>
  <plugin name="cordova-plugin-device-motion" source="npm"/>
  <plugin name="cordova-plugin-device-orientation" source="npm"/>
  <plugin name="cordova-plugin-dialogs" source="npm"/>
  <plugin name="cordova-plugin-file" source="npm"/>
  <plugin name="cordova-plugin-file-transfer" source="npm"/>
  <plugin name="cordova-plugin-geolocation" source="npm"/>
  <plugin name="cordova-plugin-globalization" source="npm"/>
  <plugin name="cordova-plugin-inappbrowser" source="npm"/>
  <plugin name="cordova-plugin-media" source="npm"/>
  <plugin name="cordova-plugin-network-information" source="npm"/>
  <plugin name="cordova-plugin-splashscreen" source="npm"/>
  <plugin name="cordova-plugin-statusbar" source="npm"/>
  <plugin name="cordova-plugin-vibration" source="npm"/>
  <plugin name="cordova-plugin-whitelist" source="npm"/>
  <icon src="icon.png"/>
  <platform name="android">
    <icon src="www/res/icon/android/drawable-ldpi-icon.png" density="ldpi"/>
    <icon src="www/res/icon/android/drawable-mdpi-icon.png" density="mdpi"/>
    <icon src="www/res/icon/android/drawable-hdpi-icon.png" density="hdpi"/>
    <icon src="www/res/icon/android/drawable-xhdpi-icon.png" density="xhdpi"/>
    <icon src="www/res/icon/android/drawable-xxhdpi-icon.png" density="xxhdpi"/>
    <icon src="www/res/icon/android/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
    <splash src="www/res/screen/android/drawable-land-ldpi-screen.png" density="land-ldpi"/>
    <splash src="www/res/screen/android/drawable-land-mdpi-screen.png" density="land-mdpi"/>
    <splash src="www/res/screen/android/drawable-land-hdpi-screen.png" density="land-hdpi"/>
    <splash src="www/res/screen/android/drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
    <splash src="www/res/screen/android/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
    <splash src="www/res/screen/android/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
    <splash src="www/res/screen/android/drawable-port-ldpi-screen.png" density="port-ldpi"/>
    <splash src="www/res/screen/android/drawable-port-mdpi-screen.png" density="port-mdpi"/>
    <splash src="www/res/screen/android/drawable-port-hdpi-screen.png" density="port-hdpi"/>
    <splash src="www/res/screen/android/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
    <splash src="www/res/screen/android/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
    <splash src="www/res/screen/android/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
  </platform>
  <platform name="ios">
    <icon src="www/res/icon/ios/icon.png" platform="ios" width="57" height="57"/>
    <icon src="www/res/icon/ios/icon@2x.png" platform="ios" width="114" height="114"/>
    <icon src="www/res/icon/ios/icon-40.png" platform="ios" width="40" height="40"/>
    <icon src="www/res/icon/ios/icon-40@2x.png" platform="ios" width="80" height="80"/>
    <icon src="www/res/icon/ios/icon-50.png" platform="ios" width="50" height="50"/>
    <icon src="www/res/icon/ios/icon-50@2x.png" platform="ios" width="100" height="100"/>
    <icon src="www/res/icon/ios/icon-60.png" platform="ios" width="60" height="60"/>
    <icon src="www/res/icon/ios/icon-60@2x.png" platform="ios" width="120" height="120"/>
    <icon src="www/res/icon/ios/icon-60@3x.png" platform="ios" width="180" height="180"/>
    <icon src="www/res/icon/ios/icon-72.png" platform="ios" width="72" height="72"/>
    <icon src="www/res/icon/ios/icon-72@2x.png" platform="ios" width="144" height="144"/>
    <icon src="www/res/icon/ios/icon-76.png" platform="ios" width="76" height="76"/>
    <icon src="www/res/icon/ios/icon-76@2x.png" platform="ios" width="152" height="152"/>
    <icon src="www/res/icon/ios/icon-small.png" platform="ios" width="29" height="29"/>
    <icon src="www/res/icon/ios/icon-small@2x.png" platform="ios" width="58" height="58"/>
    <icon src="www/res/icon/ios/icon-small@3x.png" platform="ios" width="87" height="87"/>
    <splash src="www/res/screen/ios/Default-568h@2x~iphone.png" platform="ios" width="640" height="1136"/>
    <splash src="www/res/screen/ios/Default-667h.png" platform="ios" width="750" height="1334"/>
    <splash src="www/res/screen/ios/Default-736h.png" platform="ios" width="1242" height="2208"/>
    <splash src="www/res/screen/ios/Default-Landscape-736h.png" platform="ios" width="2208" height="1242"/>
    <splash src="www/res/screen/ios/Default-Landscape@2x~ipad.png" platform="ios" width="2048" height="1536"/>
    <splash src="www/res/screen/ios/Default-Landscape~ipad.png" platform="ios" width="1024" height="768"/>
    <splash src="www/res/screen/ios/Default-Portrait@2x~ipad.png" platform="ios" width="1536" height="2048"/>
    <splash src="www/res/screen/ios/Default-Portrait~ipad.png" platform="ios" width="768" height="1024"/>
    <splash src="www/res/screen/ios/Default@2x~iphone.png" platform="ios" width="640" height="960"/>
    <splash src="www/res/screen/ios/Default~iphone.png" platform="ios" width="320" height="480"/>
  </platform>
  <platform name="wp8">
    <icon src="www/res/icon/wp8/ApplicationIcon.png" platform="wp8" width="99" height="99"/>
    <icon src="www/res/icon/wp8/Background.png" platform="wp8" width="159" height="159"/>
    <splash src="www/res/screen/wp8/screen-portrait.jpg" platform="wp8" width="768" height="1280"/>
  </platform>
  <platform name="windows">
    <icon src="www/res/icon/windows/Square150x150Logo.scale-100.png" platform="windows" width="150" height="150"/>
    <icon src="www/res/icon/windows/Square30x30Logo.scale-100.png" platform="windows" width="30" height="30"/>
    <icon src="www/res/icon/windows/StoreLogo.scale-100.png" platform="windows" width="50" height="50"/>
    <splash src="www/res/screen/windows/SplashScreen.scale-100.png" platform="windows" width="620" height="300"/>
    <icon src="www/res/icon/windows/StoreLogo.scale-240.png" platform="windows" width="120" height="120"/>
    <icon src="www/res/icon/windows/Square44x44Logo.scale-100.png" platform="windows" width="44" height="44"/>
    <icon src="www/res/icon/windows/Square44x44Logo.scale-240.png" platform="windows" width="106" height="106"/>
    <icon src="www/res/icon/windows/Square70x70Logo.scale-100.png" platform="windows" width="70" height="70"/>
    <icon src="www/res/icon/windows/Square71x71Logo.scale-100.png" platform="windows" width="71" height="71"/>
    <icon src="www/res/icon/windows/Square71x71Logo.scale-240.png" platform="windows" width="170" height="170"/>
    <icon src="www/res/icon/windows/Square150x150Logo.scale-240.png" platform="windows" width="360" height="360"/>
    <icon src="www/res/icon/windows/Square310x310Logo.scale-100.png" platform="windows" width="310" height="310"/>
    <icon src="www/res/icon/windows/Wide310x150Logo.scale-100.png" platform="windows" width="310" height="150"/>
    <icon src="www/res/icon/windows/Wide310x150Logo.scale-240.png" platform="windows" width="744" height="360"/>
    <splash src="www/res/screen/windows/SplashScreenPhone.scale-240.png" platform="windows" width="1152" height="1920"/>
  </platform>
  <access origin="*"/>
  <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>

 

In www directory I have:

  • index.html
  • spec.html (default from PhoneGap)
  • config.xml copied from previous directory
  • phaser.min.js and phaser.map
  • some assets from my project (.xml, .json, .jpg)
  • directories for: css, img, js, res, spec

index.html:

<!DOCTYPE html>
<!--
    Copyright (c) 2012-2016 Adobe Systems Incorporated. All rights reserved.

    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>

<head>
    <meta charset="utf-8" />
    <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" />
    <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
    <!-- Good default declaration:
    * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
    * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
    * Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
        * Enable inline JS: add 'unsafe-inline' to default-src
        * Enable eval(): add 'unsafe-eval' to default-src
    * Create your own at http://cspisawesome.com
    -->
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> -->

    <link rel="stylesheet" type="text/css" href="css/index.css" />
	<style type="text/css">
		body{
			background: #ffffff;
			padding:0px;
			margin:0px;
		}
	</style>
    <title>Hello World</title>
</head>

<body>
    <div class="app">
        <h1>Hello PhoneGap N00B</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
	<script src="phaser.min.js"></script>
	 <script src = "js/preload.js"></script>
	 <script src = "js/intro.js"></script>
    <script type="text/javascript">
        app.initialize();
		var game = new Phaser.Game(1920, 1080);
			game.state.add('Preload', MyGame.preload)
			game.state.add('Intro', MyGame.intro);
			game.state.start('Preload');
		</script>
</body>

</html>

In js directory I have:

  • index.js (default from PhoneGap example)
  • intro.js (my project state)
  • preload.js (my project state)

 

index.js:

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        //console.log('Received Event: ' + id);
    }
};



What I get after installing my app is just HelloWorld, no states are loading. When I emulate that project using PhoneGap launcher App it looks the same, but when I connect on same ip (generated through PhoneGap Desktop app) using web then states are loaded properly. I've uploaded my files in a .zip to PhoneGap Cloud in order to build. Everything from www directory was added to .zip file and sent - there were no compiling errors (I didn't attach any key, but I don't want to upload it to store yet, just custom install from .apk). Any help appreciated.

EDIT:
differencies that I see in web and emulation on android device :
-web is displaying my states correctly, but on PhoneGap part, where it is trying to connect to the device it is stuck (all the time there is displayed "Connecting to device")
-while on mobile emulation it is correctly connecting to device, but nothing from my project is displayed

If you know about some working tutorials that I can follow to export Phaser app with states to PhoneGap - they are welcome.

Link to post
Share on other sites

Not very familiar with the PhoneGap Cloud workflow, but I've used Cordova quite a bit.

In looking at your code, my initial suggestion would be to move the Phaser code into the onDeviceReady method (in index.js).  The 'deviceready' event is fired when Cordova and its plugins are initialized.  So in general, you'll want to wait to execute your own code until this event is fired.

I learned to develop for Cordova with Phaser using Intel XDK, which is a Cordova IDE and cloud-build service (probably a lot like PhoneGap).  Intel XDK includes a Phaser template and does have some tutorials in their documentation - most of which should apply to Cordova in general.  Intel XDK also includes the Ripple Emulator, which runs Cordova apps in a simulated device on your PC/Mac.  Although it doesn't work with all the Cordova plugins, I found it invaluable when learning because of how quickly you can test your code.  Take a look - I'm sure you can probably use Ripple with PhoneGap as well.

Link to post
Share on other sites
14 hours ago, jim716 said:

Not very familiar with the PhoneGap Cloud workflow, but I've used Cordova quite a bit.

In looking at your code, my initial suggestion would be to move the Phaser code into the onDeviceReady method (in index.js).  The 'deviceready' event is fired when Cordova and its plugins are initialized.  So in general, you'll want to wait to execute your own code until this event is fired.

I learned to develop for Cordova with Phaser using Intel XDK, which is a Cordova IDE and cloud-build service (probably a lot like PhoneGap).  Intel XDK includes a Phaser template and does have some tutorials in their documentation - most of which should apply to Cordova in general.  Intel XDK also includes the Ripple Emulator, which runs Cordova apps in a simulated device on your PC/Mac.  Although it doesn't work with all the Cordova plugins, I found it invaluable when learning because of how quickly you can test your code.  Take a look - I'm sure you can probably use Ripple with PhoneGap as well.

Thanks for reply, I tried to switch to Intel XDK but also encountered some troubles - can you please have a look on my other topic? 

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...