Submitting to the Google Play and Amazon Stores: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
 
(27 intermediate revisions by the same user not shown)
Line 1: Line 1:
''Note: Until these steps are performed, PhoneGap Build will return a debug build for Android.''
''Watch the video: [https://www.youtube.com/watch?v=s1UteFqekyY Get ready for the Android store!]''
''Watch the video: [https://www.youtube.com/watch?v=s1UteFqekyY Get ready for the Android store!]''


Line 7: Line 5:
''Watch the video: [https://www.youtube.com/watch?v=s1UteFqekyY Get ready for the Android store!]''
''Watch the video: [https://www.youtube.com/watch?v=s1UteFqekyY Get ready for the Android store!]''


In this TechNote, we'll cover what you need to do to submit your app to  Google Play and the Amazon Store. Submitting your app is fairly straightforward. The only hard part is signing your app: fortunately, PhoneGap Build makes this much easier.
In this TechNote, we'll cover what you need to do to submit your app to  Google Play and the Amazon Store. Submitting your app is fairly straightforward. The only hard part is signing your app: fortunately, VoltBuilder makes this much easier.


The method used will be to take an AppStudio app, use PhoneGap Build to produce a .apk file, then submit that to the stores.
The method used will be to take an AppStudio app, use VoltBuilder to produce a .apk file, then submit that to the stores.


You can use this procedure for any AppStudio project. It will also work if your project uses the [http://docs.phonegap.com/en/3.5.0/index.html PhoneGap CLI].  It will not work if you are using third party PhoneGap plugins which are not supported by PhoneGap Build: for those, you will need to use the PhoneGap CLI method.
You can use this procedure for any AppStudio project. It will also work if your project uses the [Cordova|Cordova CLI].  It will not work if you are using third party Cordova plugins which are not supported by VoltBuilder: for those, you will need to use the Cordova CLI method.


Start by testing your app as much as possible while it is still a web app. It will be much easier to make changes, fixes and improvements at this stage.
Start by testing your app as much as possible while it is still a web app. It will be much easier to make changes, fixes and improvements at this stage.


Until you have your own account and have entered your signing key, PhoneGap will build your app in debug mode. Once signed, it will build in release mode.
Until you have your own account and have entered your signing key, VoltBuilder will build your app in debug mode. Once signed, it will build in release mode.
 
= Create the Signing Key =
 
The signing key is a small file which identifies the creator. It will get built into the .apk file so the developer who built the app can be identified. Since the information in the signing key is all supplied by the developer, it really doesn't provide any security. It will make sure that updates to an app are generated by the same user.
 
=== Install the Java Development Kit ===
 
The signing key is created by a small program called keytool. It is included in the Java Development Kit. If you do not have this installed, get it from [http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html Oracle's Java Development Kit Download page]
 
=== Open a CMD or Terminal session ===
 
On Windows 7, open a cmd window and change directory to
<pre>cd c:\Program Files\Java\jdk1.7.0_25\bin</pre>
 
On Windows 8 and above, the directory could be
<pre>cd c:\Program Files (x86)\java\jre7\bin</pre>
 
=== Use KeyTool to create the keystore file ===
 
Enter this command, replacing 'KitchenSink' with the name of your app.
<pre>
keytool -genkey -v -keystore KitchenSink.keystore -alias KitchenSink -keyalg RSA -keysize 2048 -validity 10000
</pre>
A series of questions will then appear:
<pre>
c:\Program Files\Java\jdk1.7.0_25\bin>keytool -genkey -v -keystore KitchenSink.k
eystore -alias KitchenSink -keyalg RSA -keysize 2048 -validity 10000
Enter keystore password:
Re-enter new password:
What is your first and last name?
  [Unknown]:  Eric Cartman
What is the name of your organizational unit?
  [Unknown]:
What is the name of your organization?
  [Unknown]:  South Park
What is the name of your City or Locality?
  [Unknown]:  South Park
What is the name of your State or Province?
  [Unknown]:  Colorado
What is the two-letter country code for this unit?
  [Unknown]:  US
Is CN=Eric Cartman, OU=Unknown, O=South Park, L=South Park, ST=Colorado, C=US co
rrect?
  [no]:  yes
 
Generating 2,048 bit RSA key pair and self-signed certificate (SHA256withRSA) wi
th a validity of 10,000 days
        for: CN=Eric Cartman, OU=Unknown, O=South Park, L=South Park, ST=Colorad
o, C=US
Enter key password for <KitchenSink>
        (RETURN if same as keystore password):


(tracing appears as the file is generated)
= Create the Keystore =


[Storing KitchenSink.keystore]
The easiest way to do this is to use the VoltBuilder [https://volt.build/docs/certificates/ Certificate Wizard].
</pre>


The file KitchenSink.keystore has now been created in c:\Program Files\Java\jdk1.7.0_25\bin. If you would like it created elsewhere, replace KitchenSink.keystore with the complete path. i.e.
= VoltBuilder =
<pre>
keytool -genkey -v -keystore c:\files\KitchenSink.keystore -alias KitchenSink -keyalg RSA -keysize 2048 -validity 10000
</pre>


= PhoneGap Build =
[https://www.voltbuilder.com VoltBuilder] is a web service which takes your project and returns a file which can be uploaded to the App Store.


[https://build.phonegap.com PhoneGap Build] is a web service which takes your project and returns a file which can be uploaded to the App Store.
To use it, follow [[VoltBuilder|the instructions here]].
 
To use it, you will need to create your own account with them. They have both a free and a paid plan. For a single project, PhoneGap Build is free.
 
Once you have your PhoneGap account, get the [[PhoneGap AuthToken|PhoneGap Auth Token]] and enter it into [[Preferences]].
 
== Adding the Signing Key to PhoneGap Build ==
 
Sign onto your PhoneGap account. Click on the head icon at the top right and select "Edit Account", then choose the "Signing Keys" tab. In the Android section, click on "add a key...". Enter the name of your program into title and Alias, matching the values you used when you generated the keystore. Select the keystone file you generated. It will be where it was generated, in c:\Program Files\Java\jdk1.7.0_25\bin.
 
[[File:Keystore.png]]
 
The keystore is now associated with your PhoneGap Build account. You will not have to generate the keystore again.


== Build and Download ==
== Build and Download ==


Now we can upload our app to PhoneGap Build. Set the values in Config.xml correctly and choose 'Build Native App with PhoneGap' from the Run menu.
Now we can upload our app to VoltBuilderr. Set the values in Config.xml correctly and choose 'Build Native App with VoltBuilder' from the Run menu.


Each time you submit a new version to the Google Plan and Amazon stores, increment the value of versionCode in config.xml.
Each time you submit a new version to the Google Plan and Amazon stores, increment the value of versionCode in config.xml. If you build with AppStudio, this value is incremented automatically.


== Config.xml ==
== Config.xml ==


One of the project properties is named PhoneGap config.xml. This is used to create the config.xml file which is passed to PhoneGap Build. It contains much of the information that PhoneGap Build needs to create your app. The default configxml file will work, though you may wish to do some customization. It's worth consulting [https://build.phonegap.com/docs/config-xml PhoneGap's config.xml documentation] to see all the options.
One of the project properties is named config.xml. This is used to create the config.xml file which is passed to VoltBuilder. It contains much of the information that VoltBuilder needs to create your app. The default configxml file will work, though you may wish to do some customization. It's worth consulting [https://cordova.apache.org/docs/en/latest/config_ref/index.html Cordova's config.xml documentation] to see all the options.
 
See [[SplashScreens]] for information on setting up splash screens for your app.


Here is a sample config.xml:
Here is a sample config.xml:
Line 111: Line 40:
&lt;widget  
&lt;widget  
xmlns = "https://www.w3.org/ns/widgets"
xmlns = "https://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.nsbasic.{id}"
id = "com.nsbasic.{id}"
versionCode = "1"
versionCode = "{phoneGapBuildCounter}"
version = "{version}">
version = "{version}">


&lt;name>{title}&lt;/name>
&lt;name>{title}&lt;/name>
&lt;description>{description}&lt;/description>
&lt;description>{description}&lt;/description>
&lt;preference name="phonegap-version" value="{phoneGapVersion}" />
&ltengine name="android" spec="10.1.2" />


&lt;!-- Icons -->
&lt;icon src='{icon}' />
&lt;icon src='{icon}' />
&lt;platform name = 'android'>
    &lt;icon src='icons/android/ldpi.png' platform='android' qualifier='ldpi' />
    &lt;icon src='icons/android/mdpi.png' platform='android' qualifier='mdpi' />
    &lt;icon src='icons/android/hdpi.png' platform='android' qualifier='hdpi' />
    &lt;icon src='icons/android/xhdpi.png' platform='android' qualifier='xhdpi' />
    &lt;icon src='icons/android/xxhdpi.png' platform='android' qualifier='xxhdpi' />
&lt;/platform>
&lt;platform name = 'ios'>
    &lt;icon src='icons/ios/icon-40.png' platform='ios' width='40' height='40' />
    &lt;icon src='icons/ios/icon-40@2x.png' platform='ios' width='80' height='80' />
    &lt;icon src='icons/ios/icon-50.png' platform='ios' width='50' height='50' />
    &lt;icon src='icons/ios/icon-50@2x.png' platform='ios' width='100' height='100' />
    &lt;icon src='icons/ios/icon-60.png' platform='ios' width='60' height='60' />
    &lt;icon src='icons/ios/icon-60@2x.png' platform='ios' width='120' height='120' />
    &lt;icon src='icons/ios/icon-60@3x.png' platform='ios' width='180' height='180' />
    &lt;icon src='icons/ios/icon-72@.png' platform='ios' width='72' height='72' />
    &lt;icon src='icons/ios/icon-72@2x.png' platform='ios' width='144' height='144' />
    &lt;icon src='icons/ios/icon-72@3x.png' platform='ios' width='216' height='216' />
    &lt;icon src='icons/ios/icon-76.png' platform='ios' width='76' height='76' />
    &lt;icon src='icons/ios/icon-76@2x.png' platform='ios' width='152' height='152' />
    &lt;icon src='icons/ios/icon-small.png' platform='ios' width='29' height='29' />
    &lt;icon src='icons/ios/icon-small@2x.png' platform='ios' width='58' height='58' />
    &lt;icon src='icons/ios/icon.png' platform='ios' width='57' height='57' />
    &lt;icon src='icons/ios/icon@2x.png' platform='ios' width='114' height='114' />
&lt;/platform>
&lt;!-- Splash Screens -->
&lt;preference name='SplashScreenDelay' value='2000' />
&lt;preference name='SplashScreenDelay' value='2000' />
&lt;preference name='AutoHideSplashScreen' value='true' />
&lt;preference name='AutoHideSplashScreen' value='true' />
&lt;gap:splash src='{splashscreen}'/>
&lt;plugin name='cordova-plugin-splashscreen' source='npm' />
&lt;gap:plugin name='cordova-plugin-splashscreen' source='npm' />
 
&lt;platform name='android'>
    &lt;splash src='splash/android/res-long-land-hdpi/splash.png' qualifier='long-land-hdpi' />
    &lt;splash src='splash/android/res-long-land-ldpi/splash.png' qualifier='long-land-ldpi' />
    &lt;splash src='splash/android/res-long-land-mdpi/splash.png' qualifier='long-land-mdpi' />
    &lt;splash src='splash/android/res-long-land-xhdpi/splash.png' qualifier='long-land-xhdpi' />
    &lt;splash src='splash/android/res-long-land-xxhdpi/splash.png' qualifier='long-land-xxhdpi' />
    &lt;splash src='splash/android/res-long-land-xxxhdpi/splash.png' qualifier='long-land-xxxhdpi' />
    &lt;splash src='splash/android/res-long-port-hdpi/splash.png' qualifier='long-port-hdpi' />
    &lt;splash src='splash/android/res-long-port-ldpi/splash.png' qualifier='long-port-ldpi' />
    &lt;splash src='splash/android/res-long-port-mdpi/splash.png' qualifier='long-port-mdpi' />
    &lt;splash src='splash/android/res-long-port-xhdpi/splash.png' qualifier='long-port-xhdpi' />
    &lt;splash src='splash/android/res-long-port-xxhdpi/splash.png' qualifier='long-port-xxhdpi' />
    &lt;splash src='splash/android/res-long-port-xxxhdpi/splash.png' qualifier='long-port-xxxhdpi' />
    &lt;splash src='splash/android/res-notlong-land-hdpi/splash.png' qualifier='notlong-land-hdpi' />
    &lt;splash src='splash/android/res-notlong-land-ldpi/splash.png' qualifier='notlong-land-ldpi' />
    &lt;splash src='splash/android/res-notlong-land-mdpi/splash.png' qualifier='notlong-land-mdpi' />
    &lt;splash src='splash/android/res-notlong-land-xhdpi/splash.png' qualifier='notlong-land-xhdpi' />
    &lt;splash src='splash/android/res-notlong-land-xxhdpi/splash.png' qualifier='notlong-land-xxhdpi' />
    &lt;splash src='splash/android/res-notlong-land-xxxhdpi/splash.png' qualifier='notlong-land-xxxhdpi' />
    &lt;splash src='splash/android/res-notlong-port-hdpi/splash.png' qualifier='notlong-port-hdpi' />
    &lt;splash src='splash/android/res-notlong-port-ldpi/splash.png' qualifier='notlong-port-ldpi' />
    &lt;splash src='splash/android/res-notlong-port-mdpi/splash.png' qualifier='notlong-port-mdpi' />
    &lt;splash src='splash/android/res-notlong-port-xhdpi/splash.png' qualifier='notlong-port-xhdpi' />
    &lt;splash src='splash/android/res-notlong-port-xxhdpi/splash.png' qualifier='notlong-port-xxhdpi' />
    &lt;splash src='splash/android/res-notlong-port-xxxhdpi/splash.png' qualifier='notlong-port-xxxhdpi' />
&lt;/platform>
 
&lt;platform name = 'ios'>
  &lt;splash src='splash/ios/Default.png' width='320' height='480' />
  &lt;splash src='splash/ios/Default@2x.png' width='640' height='960' />
  &lt;splash src='splash/ios/Default-568h@2x.png' width='640' height='1136' />
  &lt;splash src='splash/ios/Default-667h@2x.png' width='750' height='1334' />
  &lt;splash src='splash/ios/Default-Portrait.png' width='768' height='1024' />
  &lt;splash src='splash/ios/Default-Landscape.png' width='1024' height='768' />
  &lt;splash src='splash/ios/Default-Portrait@2x.png' width='1536' height='2048' />
  &lt;splash src='splash/ios/Default-Landscape@2x.png' width='2048' height='1536' />
  &lt;splash src='splash/ios/Default-Portrait-736h@3x.png' width='1242' height='2208' />
  &lt;splash src='splash/ios/Default-Landscape-736h@3x.png' width='2208' height='1242' />
&lt;/platform>


&lt;preference name="permissions" value="none"/>
&lt;preference name="permissions" value="none"/>
Line 202: Line 59:
&lt;!-- &lt;preference name="fullscreen" value="true" /> -->
&lt;!-- &lt;preference name="fullscreen" value="true" /> -->


&lt;!-- Platforms: Customize as needed. -->
&lt;gap:platforms>
  &lt;gap:platform name="android" />
  &lt;gap:platform name="ios" />
  &lt;gap:platform name="winphone" />
&lt;/gap:platforms>
&lt;plugin name="cordova-plugin-camera" source="npm"  />
&lt;plugin name="cordova-plugin-device" source="npm" />
&lt;plugin name="cordova-plugin-contacts" source="npm" />
&lt;plugin name="phonegap-plugin-barcodescanner" source="npm" />
&lt;!-- AppStudio 6 required. -->
&lt;plugin name="cordova-plugin-statusbar" source="npm" />
&lt;plugin name="cordova-plugin-statusbar" source="npm" />
   &lt;preference name="StatusBarOverlaysWebView" value="{phoneGapStatusBarOverlay}" />
   &lt;preference name="StatusBarOverlaysWebView" value="{phoneGapStatusBarOverlay}" />
Line 220: Line 64:
   &lt;preference name="StatusBarStyle" value="{phoneGapStatusBarStyle}" />
   &lt;preference name="StatusBarStyle" value="{phoneGapStatusBarStyle}" />


&lt;plugin name="cordova-plugin-whitelist" source="npm" />
   &lt;allow-navigation href="*" />
   &lt;allow-navigation href="*" />
   &lt;access origin="*" />
   &lt;access origin="*" />
  &lt;allow-intent href="*" />
&lt;plugin name="cordova-plugin-wkwebview-engine" source="npm" />
&lt;platform name="ios">
  &lt;preference name="WKWebViewOnly" value="true" />
  &lt;feature name="CDVWKWebViewEngine">
    &lt;param name="ios-package" value="CDVWKWebViewEngine" />
  &lt;/feature>
  &lt;preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
&lt;/platform>
&lt;/widget>
&lt;/widget>
</pre>
</pre>


Field with are surrounded by brackets, like {version}, are automatically filled in by AppStudio from the other information in the project.
Fields which are surrounded by brackets, like {version}, are automatically filled in by AppStudio from the other information in the project.
 
== Select the key ==
 
Sign into [https://build.phonegap.com PhoneGap Build] and select your project. You can then select the key for your project. Use the same name that you gave your key:
 
[[File:selectkey.png]]
 
== Unlock the key ==
 
Unlock the key by clicking on the lock icon and entering your password.
 
[[File:unlockkey.png]]
 
== Rebuild and download ==
 
You now have one hour to build your app. Click on the Rebuild button to create the .apk file with the included keysign, then click on the blue "apk" button to download the app file.


= Set up store accounts =
= Set up store accounts =
Line 252: Line 90:
The Google Play Store costs $25.00 to join. You can get started here:  
The Google Play Store costs $25.00 to join. You can get started here:  
https://play.google.com/apps/publish
https://play.google.com/apps/publish
VoltBuilder will upload your app to the iTunes App Store as part of the build.
For this to work, you need to set the googlePlayKey and googlePlayTrack fields in Project Properties, in the '''VoltBuilder and Cordova''' section.
Follow [https://volt.build/docs/google_play/ these instructions] to get the values for these fields.


== Amazon Store ==
== Amazon Store ==
Line 260: Line 104:
To submit your apps to the Amazon Store, you need to add some lines to your configxml to tell it which devices you support.
To submit your apps to the Amazon Store, you need to add some lines to your configxml to tell it which devices you support.


At the top, add this:
Add this to your configxml:
<pre>
xmlns:android = "http://schemas.android.com/apk/res/android"
</pre>
and add this elsewhere in configxml:
<pre>
<pre>
&lt;config-file platform="android" parent="/manifest" mode="merge">
<edit-config file="AndroidManifest.xml" target="/manifest/supports-screens" mode="merge">
   &lt;supports-screens android:anyDensity="true" android:resizeable="true"  
   &lt;supports-screens android:anyDensity="true" android:resizeable="true"  
     android:smallScreens="true"  
     android:smallScreens="true"  
Line 272: Line 112:
     android:largeScreens="true"  
     android:largeScreens="true"  
     android:xlargeScreens="true" />
     android:xlargeScreens="true" />
&lt;/config-file>
&lt;/edit-config>
</pre>
</pre>


= Submit your App =
= Submit your App =


Finally, you're done. Both stores have an Upload APK button where you can upload the apk file that was downloaded from PhoneGap Build.
Finally, you're done. Both stores have an Upload APK button where you can upload the apk file that was downloaded from VoltBuilder.


Google apps go live automatically a few hours after being submitted. Amazon app go through a review process which is not as extensive as Apple's, which can take a couple of days.
Google apps go live automatically a few hours after being submitted. Amazon app go through a review process which is not as extensive as Apple's, which can take a couple of days.

Latest revision as of 20:26, 20 July 2022

Watch the video: Get ready for the Android store!

Prepare your App

Watch the video: Get ready for the Android store!

In this TechNote, we'll cover what you need to do to submit your app to Google Play and the Amazon Store. Submitting your app is fairly straightforward. The only hard part is signing your app: fortunately, VoltBuilder makes this much easier.

The method used will be to take an AppStudio app, use VoltBuilder to produce a .apk file, then submit that to the stores.

You can use this procedure for any AppStudio project. It will also work if your project uses the [Cordova|Cordova CLI]. It will not work if you are using third party Cordova plugins which are not supported by VoltBuilder: for those, you will need to use the Cordova CLI method.

Start by testing your app as much as possible while it is still a web app. It will be much easier to make changes, fixes and improvements at this stage.

Until you have your own account and have entered your signing key, VoltBuilder will build your app in debug mode. Once signed, it will build in release mode.

Create the Keystore

The easiest way to do this is to use the VoltBuilder Certificate Wizard.

VoltBuilder

VoltBuilder is a web service which takes your project and returns a file which can be uploaded to the App Store.

To use it, follow the instructions here.

Build and Download

Now we can upload our app to VoltBuilderr. Set the values in Config.xml correctly and choose 'Build Native App with VoltBuilder' from the Run menu.

Each time you submit a new version to the Google Plan and Amazon stores, increment the value of versionCode in config.xml. If you build with AppStudio, this value is incremented automatically.

Config.xml

One of the project properties is named config.xml. This is used to create the config.xml file which is passed to VoltBuilder. It contains much of the information that VoltBuilder needs to create your app. The default configxml file will work, though you may wish to do some customization. It's worth consulting Cordova's config.xml documentation to see all the options.

Here is a sample config.xml:

<?xml version="1.0" encoding="UTF-8"?>
<widget 
xmlns = "https://www.w3.org/ns/widgets"
id = "com.nsbasic.{id}"
versionCode = "{phoneGapBuildCounter}"
version = "{version}">

<name>{title}</name>
<description>{description}</description>
&ltengine name="android" spec="10.1.2" />

<icon src='{icon}' />
<preference name='SplashScreenDelay' value='2000' />
<preference name='AutoHideSplashScreen' value='true' />
<plugin name='cordova-plugin-splashscreen' source='npm' />

<preference name="permissions" value="none"/>
<!-- sample preference specifications -->
<!-- <preference name="autorotate" value="false" readonly="true"/> -->
<!-- <preference name="orientation" value="default" /> -->
<!-- <preference name="fullscreen" value="true" /> -->

<plugin name="cordova-plugin-statusbar" source="npm" />
  <preference name="StatusBarOverlaysWebView" value="{phoneGapStatusBarOverlay}" />
  <preference name="StatusBarBackgroundColor" value="{phoneGapStatusBarColor}" />
  <preference name="StatusBarStyle" value="{phoneGapStatusBarStyle}" />

  <allow-navigation href="*" />
  <access origin="*" />
  <allow-intent href="*" />

<plugin name="cordova-plugin-wkwebview-engine" source="npm" />
<platform name="ios">
  <preference name="WKWebViewOnly" value="true" />
  <feature name="CDVWKWebViewEngine">
    <param name="ios-package" value="CDVWKWebViewEngine" />
  </feature>
  <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
</platform>

</widget>

Fields which are surrounded by brackets, like {version}, are automatically filled in by AppStudio from the other information in the project.

Set up store accounts

Setting up your store account is straightforward, but involves many steps. Thankfully, they are clear and well documented, so we do not have to repeat them here.

Google Play

The Google Play Store costs $25.00 to join. You can get started here: https://play.google.com/apps/publish

VoltBuilder will upload your app to the iTunes App Store as part of the build.

For this to work, you need to set the googlePlayKey and googlePlayTrack fields in Project Properties, in the VoltBuilder and Cordova section.

Follow these instructions to get the values for these fields.

Amazon Store

The Amazon Store is free to join. You can get started here: https://developer.amazon.com/welcome.html

To submit your apps to the Amazon Store, you need to add some lines to your configxml to tell it which devices you support.

Add this to your configxml:

<edit-config file="AndroidManifest.xml" target="/manifest/supports-screens" mode="merge">
  <supports-screens android:anyDensity="true" android:resizeable="true" 
    android:smallScreens="true" 
    android:normalScreens="true" 
    android:largeScreens="true" 
    android:xlargeScreens="true" />
</edit-config>

Submit your App

Finally, you're done. Both stores have an Upload APK button where you can upload the apk file that was downloaded from VoltBuilder.

Google apps go live automatically a few hours after being submitted. Amazon app go through a review process which is not as extensive as Apple's, which can take a couple of days.