Hello! This will be a concise guide to go from creating an ionic application to publishing on Test Flight, the App Store and also Google Play. I recently created my first ionic application called “The Fam App” on behalf of my company (Ariche Technologies) and had a bit of trouble here and there, so I thought it would be worth documenting this process for others to follow. Let’s get to it.
OK, lets start getting our app on TestFlight.
Build resource files – These will be the icon/splash screens. Check here for specifications if you do not already have them created: https://ionicframework.com/docs/cli/commands/cordova-resources
Build for ios
ionic cordova build ios
Once this is done and successful, launch Xcode
Open Workspace file located in your ionic project: platforms/ios
In Xcode, in the General tab, bump version/build numbers, click automatically manage signing and select a Team
In .plst file add these make sure all the native systems that are used in your app are present and have a description. If not, in later steps you will get an error ( I will let you know what to do later if that happens). However, some common native systems are below, make sure they are in your .plst file if necessary.
- NSPhotoLibraryUsageDescription
- This app requires access to the photo library.
- NSMicrophoneUsageDescription
- This app does not require access to the microphone.
- NSCameraUsageDescription
- This app requires access to the camera.
In Product menu, select Archive
After it Archives, select Validate App. Click Next Through all prompts and finish with Validate.
When that completes, Click Distribute App. Click Next Through all prompts.
At this point, If you get emailed errors, google the errors, fix the issues and restart from Launch Xcode step. This is the type of error I mentioned in the .plst step. See image below for details on what the message would look like:
After you fix the issues you will get an email saying “The following build has completed processing”. At this point you need to Log into iTunes connect -> My Apps ->{App Name}->TestFlight.
Click the latest build
Click Add Testers to Build
Add Name/Emails(apple IDs); Don’t do sign in; Write a message; Then Submit for Review
Launch TestFlight on the phone of the apple ids used and install/Update the app you submitted.
Done. Next let’s look at how to add the build to the App Store.
Ok, now that we have a stable build version, we will use that to upload to the apple app store. The next steps are mainly just documentation and image resizing.
Login to App Store Connect, select your app, then click the App Store tab.
First, fill out the App Information page. This page is pretty self explanatory. For the Privacy Policy URL, I used my company website. You can do the same or if your app has a landing page, add your policy there. There also might be some online privacy policy URL generators you can leverage as well.
Second you will need to update the Pricing and Availability page. Again, pretty self explanatory.
Lastly, you will need to fill out the Prepare for Submission page. This page requires the most time. For App Previews and Screen shots you will need about 4 screen shots of your app usage. For this you can use your phone to take screen shots as you navigate through your app. Another option is to open your ionic app in the browser and take screen shots that way. You will need to upload screen shots for both the iPhone and the iPad. Each screen shot needs to be a certain size, or it will error (make sure to click the “?” to find out the updated dimension requirements).
Next, fill out all the general text requirements.
In the Build section, select the stable build you just submitted to TestFlight.
Click Save.
Then Submit for Review.
If any errors arise, you will see them in the Resolution Center. Fix the errors, then resubmit like we did above. Once everything is approved your app will be Ready for Sale in accessible via the App Store.
Next, I will show you how to submit to the Google Play Store
First off, this ionic documentation on this is perfect, so you can just follow this: https://ionicframework.com/docs/v1/guide/publishing.html However, I will still give a step by step guide.
First off you need to generate a release build which adds the settings in config.xml to your build
ionic cordova build –release android
Next, generate your private key (if you don’t already have one on your machine) Replace alias_name with what you want to call your key. This step provides steps. Just fill out each step and then create a password for your key. Don’t lose it.
keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
Now you will need to sign the build with the key you just generated. jarsigner comes with the JDK, so you should have it already installed.
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore {apk_name}-unsigned.apk alias_name
Next, you will need to optimize the APK you just signed by using zipalign. If you have Android Studio installed, your zip align folder should be in something like: /Users/user_name/Library/Android/sdk/build-tools/27.0.3/zipalign. Therefore the command you need to run would be:
/Users/user_name/Library/Android/sdk/build-tools/27.0.3/zipalign -v 4 {apk_name}-unsigned.apk {apk_name}.apk
Now you have the final signed apk file we will use to upload to Google Pay Store
Now you can login to your Google Play Store Developer Console.
From there you will click the Create Application button. Name the application then click Create.
Now you will notice in the left sidebar some headings that have a white check in a grey circle. All of these sections are required before submitting to the app store. Going from top to bottom fill out each section. The App Releases section should be done Last.
Most of this information is similar to the Apple App Store upload process, so just take your time and fill out all the information.
After all the check marks are green. Go to the App Release section and click Manage under Production. Then click Create Release.
Complete the final information in this page then click Review.
Now if you go back to the Google Play Console All Applications screen, your app will be in the Pending Review state. (It can take up to 7 days to be approved)
Once approved, the status will change to Published.
You can now find your app on the Google Play Store.
That’s it! Hope this helps you.
This has been a quick tutorial by Ariche Technologies LLC on how to go from ionic to the app stores.