Skip to content

Building Mobile Editors for Release

Luca Damasco edited this page Jan 4, 2021 · 6 revisions

Building the Wick Editor Mobile Apps

Note: This page is in progress, stay tuned for updates.

Folder Structure

This guide assumes you have all required packages/repositories installed using the following directory structure.

WickEditorStuff

  • wick-editor
  • wick-editor-phonegap
  • Wicklets/cordova-icon

Requirements

To bundle our mobile apps, Wick Editor uses (Apache Cordova)[https://cordova.apache.org/] an awesome FOSS tool for packaging web apps into cross platform mobile applications.

We've created a separate repository that contains all of the necessary files, and build scripts, to package the apps at. https://github.com/Wicklets/wick-editor-phonegap. Download this repo.

You'll also need a few scripts to update things like app icons and splash screens.

  • cordova-icon This is an internal fork, please clone this repo.

  • cordova-splash This is the official branch, and can be installed using npm install -g cordova-splash

For ios builds, you'll need xcode, and xcode developer tools.

For releases, you'll need to ask @Luxapodular for the certificates!

Scripts

wick-editor | To get the latest version of wick-editor into your mobile app directory.

  1. open the wick-editorfolder in a terminal.
  2. run npm run phonegap-predeploy

This will build a new version of the Wick Editor and copy all files into the wick-editor-phonegap/www folder. It will also call needed build scripts.

wick-editor-phonegap

Building to Test.

cordova-android

Will build the app for the android platform (and run all needed pre-build scripts). Will launch the android build to an appropriate, plugged in, android device. (You must have Android File Transfer installed to do this.)

cordova-ios

Will build the app for the ios platform (and run all needed pre-build scripts). Will attempt to launch the built app on a connected ios device, however you may need to use the xcode workspace to launch to ios.

Preparing the app for deployment

prepare-dir

This script will prepare the wick-editor-phonedgap directory by deleting all uneeded files copied over by the phonegap-predeploy command.

prepare-icons

This script will look for files named icon.png (1024x1024px) and splash.png (2048x2048px) in the wick-editor-phonegap/ directory. It will then convert these files into all appropriate icon and splash screen sizes for android and ios.

prepare-app

This script alters the index.html files and prepares the mobile app to run some additional code taking care of things like the file system, font loading, and local cors requirements (among other things).

Releasing on iOS

XCode

Now that you've built and prepared the app, we need to head to XCode to complete the archiving process. Open XCode and the workspace WickEditor.xcodeproj. This should be located in wick-editor-phonegap/platforms/ios/

Testing On Device

From here you can test on device or in a virtual simulator by selecting the build option and playbutton in the top left.

Updating the Permissions Text

Next, ensure that all of the permissions are set. This will be in the "Info" section of the plist.

Privacy - Photo Library Usage : "This is used to allow us to upload images and videos to your animations."

Updating Build and Version Numbers

Next, Ensure the Build and version numbers are appropriate. You can find these in the "General" section of the plist.

Uploading to the app store

Next, select Product > Archive from the menu and then select Distribute App > App Store Connect > Upload from the pop up modals. Follow the steps, and you should be done!

Common Errors:

  1. "Conflicting Provisioning Profiles" (iOS) This error may occur if the build release settings are incorrect. Check that the platforms/ios/cordova/build-release.xconfig files has the following properties set:

CODE_SIGN_IDENTITY = iPhone Developer CODE_SIGN_IDENTITY[sdk=iphoneos*] = iPhone Developer

Note that this may be set to "Distribution" rather than "Developer".

Discussion Here :https://forum.ionicframework.com/t/ios-build-release-error-is-automatically-signed-for-development-but-a-conflicting-code-signing-identity-iphone-distribution-has-been-manually-specified/100633/7

Helpful Resources

Cordova iOS App from Setup to Deployment