Skip to content

Latest commit

 

History

History
186 lines (156 loc) · 7.63 KB

README.md

File metadata and controls

186 lines (156 loc) · 7.63 KB

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.