Skip to content

6degrees/ios_ionic_app_creation_steps

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 

Repository files navigation

iOS App Creation Steps through ionicFramework

INTRODUCTION

This repository serves as personal notes on the steps required to create iOS apps through ionic Framework.
The steps are grouped as follows:

  • Development Steps
  • Provisioning Steps
  • Packageing Steps

REQUIREMENTS

You will need the following to complete the task:

  • OpenSSL (to create CSRs and keys)
  • Development environment:
    • Ionic Creator Account (if you want to develop through the cloud) or
    • Simply install the following and start developing from your machine:
      • Node.JS
      • Ionic
      • Cordova (for native functions implementation)
      npm install -g ionic cordova
      
  • Apple Developer Account ($99/yr) obviously to upload and test your application
  • Google Console account ($25/yr)
  • For push notifications, checkout the following:
  • Setup a Firebase (google) account for tracking crashes and making push requests
    • take note of the Sender ID
    • install firebase on your ionic
    ionic cordova plugin add cordova-plugin-firebase
    npm install --save @ionic-native/firebase
    
    • Install other cordova plugins
    ionic cordova plugin add cordova-clipboard
    npm install --save @ionic-native/clipboard
    ionic cordova plugin add cordova-plugin-x-socialsharing
    npm install --save @ionic-native/social-sharing
    npm install @ionic/cloud-angular --save
    cordova plugin add ionic-plugin-deploy --save
    ionic cordova plugin add cordova-plugin-actionsheet
    npm install --save @ionic-native/action-sheet
    
    
  • Good text editor
    • Atom
    • Brackets
    • Notepad++
    • MS Visual Code
  • Mac Machine (or Mac Virtual Machine ;)), to load your IPA into developer account and test on iOS Simulator
  • Android Stuff for Android deployement and testing
  • Splash Screen and Icons

Take note of

for IOS

  • Your apple developer account id and Password
  • App Identifier Name
  • App Prefix (not sure if it is important)
  • App Name

for android

  • Install JDK
  • create keystore
    • keytool -genkey -v -keystore f6sny.keystore -alias f6sny_app -keyalg RSA -keysize 2048 -validity 10000
    • memorize the Password
  • Not much else, I just used the keystore while compiling the app. Nothing in google playstore.
  • Just filled a profile for the app in google console and that was it.

App Development Stage

Here are the steps to start developing your app

  • For Typescript backend ionic start yourprojectname tabs
  • For JavaScript backend ionic start yourprojectname tabs –type ionic1 (for JS support, ionic 2 is strictly Typescript and most of us hate that)

App Provisioning Stage

These steps are the minimum requirements for provisioning (for usage or testing) your app.

  • Generate a private RSA Key openssl genrsa -out f6sny.key 2048
  • Create a CSR openssl req -new -key f6sny.key -out f6sny.certSigningRequest
    • Do not Enter Email Address
  • Download your certificate from apple developer website
  • Convert the Certificate to a P12 File
openssl x509 -inform DER -outform PEM -in ios_distribution.cer -out ios_distribution.cer.pem
openssl pkcs12 -export -inkey f6sny.key -in ios_distribution.cer.pem -out Certificates.p12
* Choose and remember password for the p12 certificate (will be used in creator.ionic page)
  • Create provisioning profile
  • Download your ipa from ionic
    • To automatically create your IPA or APK from CLI, use ionic cordova build --release android (replace android with ios for iphone)
  • Create app in itunesconnect
  • open xCode
  • open application loader and upload your file
  • head to itunes connect and finish the write-ups
  • submit for review
  • Develop your artwork using iOS 10 App Icon Template PSD/Sketch
    • Or, simply create your splash.png and icon.png, place them in the resources folder and run ionic cordova resources
  • Prepare screenshots for iPad and iPhone
  • Prepare promotional text
  • Prepare description
  • Prepare search keywords
  • Prepare notes for apple review
  • Wait 3 days for review
  • Utilize Ionic Delpoy to save some time Get Started With Ionic Services: Deploy

Reference: Ionic Publishing Guide

Build your app

Through ionic cloud

  • Create a security profile in your cloud account Security Profiles
  • Request the build
    • iOS ionic package build ios --profile PROFILE_TAG --prod --release (ensure profile tag is all lowercase)
    • Android ionic package build android --profile PROFILE_TAG --prod --release
  • Check build status ionic package list
  • Download your build ionic package download BUILD_ID (will download to your app directory)

Through CLI

  • For Android It is a normal process, just check the docs
  • For iOS You would need a mac machine, maybe through a virtual box?

Tips and Tricks

App Development

These are some tips that you might or might not need while developing your application

  • In development environment, while developing your API:
    • Use HTTPS for iOS as HTTP is not accepted.
    • add the following code to your PHP files to enable cross-origin requests:
    header("Access-Control-Allow-Origin: *");
    • to start (test) your app ionic serve
    • to rtl support, start by setting the html lang and dir attributes of the html element

App Provisioning

  • Test your app on emulator ionic cordova build android and ionic cordova run android
  • If any problem encountered during emulation or build, try re-build
        ionic cordova platform rm android
        ionic cordova platform add android
    
    • Remove development plugins ionic cordova plugin rm cordova-plugin-console
  • Make sure to configure config.xml correctly, refer to: cordova apache for details.
    • name attribute would be tha apk name and ipa name, and might be used for store title

References

ionic Framework Docs * ionic deployment manual AngularJS Basics AngularJS Docs Ionic Publishing Guide Ionic Framework: A definitive 10,000 word guide Creating a Sliding Introduction Component in Ionic 2 & 3

MAINTAINERS

Current Maintainers:

Sponsored by:

COPYRIGHTS

No copyrights at all, I just collected all of this from all over the internet (which is a public place) and published it here for my own use and for your use.

About

iOS App Creation Steps through IonicFramework

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages