Code Monkey home page Code Monkey logo

phonegap-app-developer's Introduction

PhoneGap Developer App Build Status

Available in an app store near you!

Overview

The PhoneGap Developer app is a testing utility for web developers and designers using the PhoneGap framework. After installing the PhoneGap Developer app you can connect to your PhoneGap desktop app to instantly view and test your project on the device.

For more information, see Developer App Reference Guide on the PhoneGap Docs.

Download

Documentation

Development

Setup

The repository includes everything required to compile the app. You can get setup by:

$ git clone https://github.com/phonegap/phonegap-app-developer.git
$ cd phonegap-app-developer/
$ npm install

Compile and Run

The app bundles the phonegap npm module as a dependency. This means that there is no need for a global installation of phonegap or cordova. By editing the package.json, you can specify the exact version of phonegap to compile the project.

Since a global install of the phonegap module is not required, we use npm run scripts to compile and run the application. This allows the app's platforms/ and plugins/ directories to be removed and rebuilt each time, ensuring a consistent build using the correct PhoneGap, Cordova, platform, and plugin versions.

The command structure is:

$ npm run phonegap -- <command> [args]

For example, you can check the version of phonegap:

$ npm run phonegap -- --version

You can compile and run iOS or Android:

$ npm run phonegap -- run ios
$ npm run phonegap -- run android

For developers wishing to use the platform SDKs (Xcode, Eclipse, Visual Studio), please build once with the CLI to correctly populate the platform assets:

$ npm run phonegap -- build <platform>

Due to a Windows npm bug, the -- does not work. Therefore we have created run script that will build Windows Phone 8, so it can run in Visual Studio.

$ npm run phonegap-wp8

Running the Tests

There are two types of test targets: the local app and served app.

Test the Local Application

The local application is the PhoneGap Developer App. To test the local functionality, we build the application with mobile-spec. This allows us to ensure that each plugin was correctly installed. Eventually, we would like to add functional tests for the app logic.

You can run the local tests with:

$ npm run phonegap -- run android --test
$ npm run phonegap -- run ios --test

Again for Windows Phone, we have a run script that will build the app so it can run in Visual Studio.

$ npm run phonegap-wp8-test

Test the Served Application

The served application is the app served by the CLI. To test the server functionality, we serve an instance of mobile-spec. We can then use the manual and automatic tests to ensure that the server provided the correct version of Cordova, the plugins, and the navigation logic.

You can run the served tests with:

$ cd tests/
$ phonegap serve
# now connect with the latest build of the PG App

Updating the Tests

It's as easy as a copy and paste.

  1. Copy all content of cordova-mobile-spec
  2. Paste the content into tests/www

On your first run of the tests, you may see some modified files. This is expected because the test runner invoked by --test modifies certain files to support our app's configuration.

Adding Custom Plugins

If you're a developer interested in creating your own custom build of the PhoneGap Developer App, then this section is for you!

Since the PhoneGap Developer app bundles phonegap as a npm dependency and treats the platforms/ and plugins/ as artifacts, you'll find that it is very easy to add your own plugins and alter other aspects of the app.

You may visit the PhoneGap docs for a more in-depth guide or follow the steps below.

First, Setup the project on your local system.

Second, edit the config.xml to add a custom plugin, change a preference, or configure the app's name. You should also change the app's id to your own unique app bundle id:

<?xml version='1.0' encoding='utf-8'?>
<widget id="org.mycompany.phonegap.app" version="1.6.2" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">

Third, follow the Compile and Run section to get the app onto your device.

If you run into any problems, feel free to submit an issue.

Releases

Releases are also generated using the npm scripts:

$ npm run release-android
$ npm run release-ios
$ npm run release-wp

In order to properly code-sign Android and iOS, you must setup the signing key. This is accomplished by cloning the signing key repository and sym-linking each platform directory with the PhoneGap Developer App repository:

# in your development directory
$ git clone https://github.com/phonegap/phonegap-app-developer-keys.git

$ cd path/to/phonegap-app-developer/
$ ln -s /path/to/phonegap-app-developer-keys/keys/ios resources/signing/ios
$ ln -s /path/to/phonegap-app-developer-keys/keys/android resources/signing/android

Contributing, Commits, and Tags

See the CONTRIBUTING.md file for details.

phonegap-app-developer's People

Contributors

devgeeks avatar don avatar eddyverbruggen avatar erisu avatar filmaj avatar jahoni avatar macdonst avatar mwbrooks avatar purplecabbage avatar qkdreyer avatar shazron avatar surajpindoria avatar timkim avatar yoheishimomae avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

phonegap-app-developer's Issues

Add all supported plugins

Add all official PhoneGap plugins to the PhoneGap app.

This will allow the app to always build with the native chunks of each plugin.

Ping timeout is too short

On my home network, hitting a new port for the first time can sometimes take a moment. I'm finding that the timeout period is too short.

Add WP8 Platform

Successfully build the WP8 platform.

Version control the platforms/wp8 directory. Add the build artifacts to .gitignore.

App has a tendency to throw a JavaScript error about not being to find the LocalFileSystem variable

I can't quite find the steps to reproduce this problem, but sometimes when I'm browsing my test www/ I find that in this error gets thrown in the remote web inspector:

ReferenceError: Can't find variable: LocalFileSystem

Referencing this from the homepage.js

    function readFile(filepath, callback) {
        window.requestFileSystem(
            LocalFileSystem.PERSISTENT,
    ...

Once this error gets thrown, the JavaScript stops execution and I'm unable to use the three finger tap to go back to the homepage.

The best way I found to reproduce is to navigate to a page, minimise the app, maximise the app, and then navigate to another page. More often than not, the new page will throw the error but not every time.

Disable Web View Scroll

The app is designed to fit the device's screen.

For a better experience, we can disable the webview bounce and scroll on iOS.

Add iOS Platform

Successfully build the iOS platform.

Version control the platforms/ios directory. Add the build artifacts to .gitignore.

Create a message for server component to know which platform app is on.

In order to serve an app properly, the server component will need to send the correct platform cordova.js. However, since user agent sniffing on the server side can be messy, annoying, and brittle, we'll need to have a way for the app to send a signal telling the server what platform its deployed on.

Update Loading State Visor Color

Currently, the visor color is red during the loading state. This is actually used as the alert state for error messages.

While the application is initializing, we should use a more positive state color such as blue (default visor color) or green (implying a success state).

I think blue best represents the loading state, because it is neither a success or error.

Prevent Screen Shutoff

During development, especially when AutoReload is enabled, it is frustrating to have the screen lock.

We can add a small plugin to prevent the screen from turning off. However, without a valid reason, Apple has been known to reject app submissions.

Smart address parsing

The app should gracefully handle address formatting:

  • 10.0.0.1:3000 => http://10.0.0.1:3000
  • http://10.0.0.1:3000 => http://10.0.0.1:3000
  • https://10.0.0.1:3000 => https://10.0.0.1:3000
  • example.com:3000 => http://example.com:3000

Create refresh and back plugin

The plugin should use native code to:

  • on volume down, navigate back to the homepage
  • on volume up, refresh the connected app

Ultimately, we will need to use a separate CordovaWebView to run the connected app. This will create a sandbox so that the development app cannot interfere with the PhoneGap app's source code. However, talking with Jesse and Joe, the CordovaWebView will not be trivial. So, let's start with something easier to get our feet wet and create something usable.

Cannot connect outside of 127.0.0.1

At the moment, the config.xml is locked to 127.0.0.1*.

Now that we've deployed the app to a device, we need to open this to any address and any port.

Display Remote App

After entering the IP address, the user should press a submit button.

The application view should then change to the remote app (web page).

Flicker on Splash Screen Transition

On my iPhone 5, I see a flicker when hiding the splash screen and showing the app. It only happens once-in-a-while. I imagine on slower devices, it will be more noticeable.

Create View to Accept IP Address

When the application opens, it should allow the user to enter an IP address. If you think a port should be customizable, then provide that input as well.

Tag milestone 0.0.1

We should get in the habit of versioning the PhoneGap App.

I'll tag this milestone as 0.0.1. Let's use the www/config.xml version element to track it.

Support Local Development

Opening Application

Should prompt the user for an IP address and port. The port should default to 3000.

Submitting IP Adress

Should simply change the windows location: window.location = location;

It's crude, simple, and nearly useless but it's the beginning of something much better.

Add Usage Analytics

@davejohnson you mentioned wanting to add some usage analytics to the app. The submission process is looking slower than expected, so we may have time to add this.

What are you thinking exactly?

Refactor source code

The JavaScript is largely untouched since @yoheishimomae initial design. At the very least, we should wrap everything up into a closure. Ideally, we'd like to showcase best practices with browserify et al.

Add Android Platform

Successfully build the Android platform.

Version control the platforms/android directory. Add the build artifacts to .gitignore.

Input box selection is out of focus

When selecting the address input field, the selection cursor is not correctly position and the user cannot type. To solve it, the user must select the input field again.

This might be a CSS animation bug.

Error Adding InAppBrowser Plugin

Using the PhoneGap CLI, the following error is throw:

Cannot read property 'currentVersion' of null

Perhaps the latest cordova-cli is compatible?

Add Back to Home and Reload functionality

Issue #21 deals with how to invoke the reload and back to home functionality.

This issue deals with the implementation of both the reload and back to home.

Back to home is tricky. Our homepage app is bundled at www/index.html. However, we connect to a streaming app at an arbitrary IP address. Essentially, these are two different web sites hosted on different domains.

We need a way to go back to the bundled index.html.

Options:

  1. Use the history.back(history.length); approach.

    • The downside is that it displays the cached page. This introduces rendering quirks that we would need to work around
  2. Use the FileWriter to write a bundled-app.json that stores settings such as:

    {
        'documentURI': 'file://whatever/long/url/this/is/www/index.html',
        'address': '127.0.0.1:3000'
    }
    

Scenario: First Application

Scenario: First Application

  1. Install the PhoneGap command-line tool from npm:

    $ sudo npm install -g phonegap
    
  2. Create a PhoneGap project:

    $ phonegap create my-first-app
    $ cd my-first-app/
    
  3. Connect to the PhoneGap App:

    $ phonegap app
    [phonegap] Open the PhoneGap app on your device
    [phonegap] Select “Local Development”
    [phonegap] Address: 192.168.0.10
    [phonegap] Port: 8080
    
  4. Open the PhoneGap app.

  5. Select Local Development and enter address and port.

  6. This displays the application served from your local computer.

  7. As files change locally, the PhoneGap App can be refreshed.

Create workflow docs for app submission

So after talking to the legal guy yesterday, he made a really good suggestion about making some really easy to follow guides on how to install the desktop component of the phonegap-app and how to pair to the device. The reasoning for this is so that the app reviewer can review these docs and understand how the whole experience is supposed to work and thus make the review process easier.

This is something we will probably end up doing anyways for app.phonegap.com. If the site is ready before submission, we could probably just send that as that the tutorial.

Refactor Configuration Storage to FileSystem

We store a few configuration settings:

  • server address
    • it's a pain in the ass typing an IP over-and-over
    • often developers are connecting to the same server
  • application's bundled index.html URL
    • needed to go to the home page from the streamed app
    • cannot used window.history.back(window.history.length);
      • going back in history will display the cached page state
      • we can reset this state, but it's opening new issues
      • a remote reliable approach is to navigate forward to the www/index.html

Once we have connected to the streamed app, we are essentially viewing a different domain and different web site. We cannot access localStorage or sessionStorage. The only common place of storage is the file system.

New skin, different fields

We want to switch from the currently implemented design (showing Login and Password fields) to a single field for IP address.

Display URL Keyboard

Display the URL-specific keyboard instead of the generic keyboard.

Also ensure that autocorrect and autocapitalization are disabled.

UI Direction

Let's use the awesome UI skin that Yohizzle created (in the res/design folder).

Replace with what is being used right now (the PG getting started skin).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.