Pages

▼

Friday, August 19, 2016

Creating Single Apps using Easy JavaScript Simulation Modeling Tool

Creating Single Apps written by paco , felix and lookang

Steps to create an App from an EjsS prepackaged model

This short guide explains how to create an Android App from your prepackaged model (i.e. from the ZIP file you obtained with the Prepackage for App option of EjsS menu.)



You need to install a software platform called IONIC in your computer that allows you to do so. IONIC provides tools to create JavaScript+HTML programs that run on mobile devices as if they were native apps. EjsS just helps you prepare the contents of such a program to boost your IONIC process.



  1. Basic Program needed: Android Studio, just follow the link and agree to install it. This is simple but requires a lot of time to download and install all the necessary files SDK versions, extra features etc. If ever the error is encountered, the trick is to download all the SDKs and update the packages for the process to be completed.
  2. sometimes need http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html to run sat
    1. $  ionic cordova run android --device
  3. If you intend to produce iOS apps you need a Mac and X-code. no Mac, no screenshot.
  4. Install Node.js version 6 or later in your computer system because of it's package ecosystem, npm, is the largest ecosystem of open source libraries in the world.
  6. Open up the Node.js command line and use the follow command without the $ sign, where $ character indicates the operating system prompt. If you are using a Mac, please add sudo (If you are on a Mac computer, you may want to follow these instructions.) in front of the npm..... the instructions here are for Windows OS.
    • $ npm install -g cordova
  7. you should see an output from installing cordova using the npm command implying it is successfully installed
  8. next Install IONIC in your computer (if you haven’t done so before) using the following command, use the ionic 2 beta if you want the latest version. 
    • $ npm install -g ionic
    • $ npm install -g ionic@beta

  9. when installation may be slow and when is completed, the screen should look like this. The tasks in this step need to be done only once, no matter how many IONIC Apps you create.(Note: You need Internet connection for this.)
  10. 20190621 problem encountered sometimes, ionic may ask you to upgrade the ionic Command Line, if you have gone up to Ionic CLI : 5.0.3 (/usr/local/lib/node_modules/ionic), 
  11. downgrade back to the latest 4 which was working for resources generation
  12. use the command line 
    • sudo npm install -g ionic@4.12.0 
  13. the output should be ok now 
  14. instead of the error generated by ionic 5.0.3 which ask for cordova-res not found and leading you to install yarn and other stuff which also did not fix 
  15. The next two commands install specific packages that we will use in our particular projects, which didnt seem to run correctly.
    • $ sudo npm install angular-ui-router 
    • $ sudo npm install angular-sanitize
  16. Organisation of project folder: make a folder to hold all the ionic app projects let's call it MyAppsFolder
  17. Goto or change directory the folder just created as the folder for all apps, for my case, cd "google drive"
  18. If you want to check with drive you have $ ls /Volumes
  19. If you are using a external drive $  cd /volumes/"Seagate Expansion Drive"
  20. followed by cd myappsfolder

    • $ cd MyAppsFolder
    • or if you have something here
    • $ cd /Users/lookang/Public/myappsfolder
  21. Creating Apps using Ionic: We now exemplify the creation of an IONIC project called, say MyModelApp. In what follows, replace the word MyModelApp by the name you chose for your new app. Create using any of the templates IONIC project:
    • Ionic 4
    • $ ionic start MyModelApp blank 
    • if using Ionic 2 template generation
    • UPDATED to ionic 2 template 05July2017 $ ionic start MyModelApp blank --v2
    • if using Ionic 1 template generation
    • $ ionic start MyModelApp blank
    • $ ionic start MyModelApp complex-list
    • $ ionic start MyModelApp maps
    • $ ionic start MyModelApp salesforce
    • $ ionic start MyModelApp sidemenu
    • $ ionic start MyModelApp tabs
  22. Let's say to create a new blank IONIC project:
    $ ionic start MyModelApp blank
    $ ionic start MyModelApp blank --v2   This takes a few seconds… and creates a new directory (called MyModelApp) in your hard disk. (When asked: Create an ionic.io account to send Push Notifications and use the Ionic View app?, you can answer no: n)
  23. Change directory to the newly create directory (again, replace MyModelApp with the name you used in the step before):
    • $ cd MyModelApp
  24. Add target platforms Android (works on both Windows and Mac), it should work because Android Studio was installed before hand. UPDATE 03 Aug2017 seems ionic force change the command.
    • $ cordova platform add android@6.4.0 // UPDATED 13Sept 2018 to add explicitly to platform version  
    • $ ionic cordova platform add android
    • $ ionic platform add android
    • $ ionic cordova platform rm android
    • $ ionic platform rm android // maybe useful to debug plugin not working, just add / remove
  25. Add target platforms iOS (only works if you have xcode installed on a Mac)
    1. $ ionic cordova platform add ios
    2. $ ionic platform add ios
    3. $ ionic cordova platform rm ios
    4. $ ionic platform rm ios //UPDATED 05july2017 useful to remove and add again, by default something is not added correctly
  26. Ionic 4 generates a standard widget id and name, you definitely need to change them to suit your needs 
    • <widget id="com.ionicframework.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>My Starter App</name>
  27. You are likely using the newer plugin cordova-plugin-ionic-keyboard which uses this.keyboard.hideFormAccessoryBar(true) instead of cordova-plugin-keyboard's hideKeyboardAccessoryBar and .hide() as opposed to .close() https://ionicframework.com/docs/native/keyboard/ 
    1. https://stackoverflow.com/questions/53539250/typescript-error-property-hidekeyboardaccessorybar-does-not-exist-on-type-key  solution is to comment out the 2 lines or // // 
  28. Add particular plug-ins that we use in our projects: // seems to be needed for URL from app to browser to work
  29. Ionic 4 ignore npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself. 
    • Ionic 4 just need 
    • when ionic serve, there could be an error, suppose it can be resolved after  ionic cordova build android

    • cordova plugin add cordova-plugin-screen-orientation 
      • $ ionic plugin add cordova-plugin-screen-orientation
    • $ npm install --save @ionic-native/screen-orientation
    • Ionic 2 
    • $ionic cordova plugin rm cordova-plugin-ionic-keyboard // may need for keyboard conflict?
    • $ ionic cordova plugin add ionic-plugin-keyboard
    • $ ionic plugin add ionic-plugin-keyboard
    • Ionic 4 
    • $ npm install --save @ionic-native/keyboard
    • $ ionic cordova plugin add cordova-plugin-screen-orientation
    • cordova plugin add cordova-plugin-screen-orientation
      • $ ionic plugin add cordova-plugin-screen-orientation
    • $ npm install --save @ionic-native/screen-orientation

    • Add Android permission  to Add microphone
    • ionic cordova plugin add cordova-plugin-android-permissions
    • npm install --save @ionic-native/android-permissions
  30. If you need camera permission used this, else ignore
    • - Open your config.xml at myAppName/config.xml and add xmlns:android="http://schemas.android.com/apk/res/android" to your widget tag and add the permissions request.
    • add the code to the android platform 
      • <platform name="android"> <custom-config-file parent="/manifest" target="AndroidManifest.xml"> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> </custom-config-file> </platform>
    • Now, you need to inspect your AndroidManifest.xml file at myAppName/platforms/android/app/src/main/AndroidManifest.xml and look for these permissions. If they are not there, add them: 
      • <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" />
    • $ ionic cordova plugin add cordova-plugin-media-capture
    • $ npm install --save @ionic-native/media-capture
    • Add camera
    • $ ionic cordova plugin add cordova-plugin-camera
    • $ npm install --save @ionic-native/camera
    • Add Diagnostic
    • ionic cordova plugin add cordova.plugins.diagnostic
    • npm install --save @ionic-native/diagnostic
    • for light sensor https://ionicframework.com/docs/native/sensors need to add
    • $ ionic cordova plugin add https://github.com/fabiorogeriosj/cordova-plugin-sensors.git
    • $ npm install @ionic-native/sensors
    • Ionic 1
    • $ cordova plugin add cordova-plugin-screen-orientation 
    • $ cordova plugin add cordova-plugin-inappbrowser 
    • $ cordova plugin add cordova-plugin-tts // for text to speech 
    • $ ionic cordova plugin rm cordova-plugin-ionic-webview // for solving a bug in the fullscreen 
    • $ ionic plugin remove cordova-plugin-wkwebview-engine
    • UPDATED 17 May 2017 $ cordova plugin add cordova-plugin-wkwebview-engine // bug do not used in co-current with parent.cordova   From Felix The bug is visible when you use the variable "parent", e.g. "parent.cordova" or "parent.device", and generates the error message "blocked a frame with origin null from accessing a frame with origin null"    //(This last one is optional. Might improve speed on speed-savvy simulations.)
    • $ cordova plugin add https://github.com/kumbe/Phonegap-ZoomControl.git // http://www.plugreg.com/plugin/kumbe/Phonegap-ZoomControl experimenting with zoom
  31. Copy files from your prepackage to the IONIC project. Now, we will extract the prepackaged files created with EjsS and work to modify the www folder of your project: UNZIP the file you created with EjsS (typically called ejss_app_XXX.zip)
  32. Ionic 4 only has no radio button to choose from in EJS5.3_20190415
  33. Ionic 2 select the options for Ionic v2
          continue to generate the ejss_app_XXXwee.zip, unzip the contents and merge (because need other files original there after app generation) the files into the correct folders of scr and www
  34. Ionic 1 select the options for Ionic v1
                 continue to generate the ejss_app_XXXwee.zip, unzip the contents and merge the files into the correct folders of www 
  35. Ionic 1 From the extracted folder copy all files and subfolders into your project’s www folder, even if this means replacing existing files and folders. (Actually, only the project’s libfolder will remain unchanged.)
  36. Best practices details. Change the icon and splash images in resources (for IONIC to create platform specific images.) Make sure you use images of the same size of those you replace. 
    • UPDATED 17Aug2017 
    • $ ionic cordova resources
    • $ ionic cordova resources --force
    • $ ionic resources 
  37. Optional details. You may want to edit using NotePad++ recommended the following entries in IONIC files of your project:bower.json: Change the name property.
    config.xml: Change the name, description and author entries.
    package.json: Change the name and description entries.
  38. NEW! 12 April 2017, change in config.xml to <preference name="android-minSdkVersion" value="19"/> instead of the older 16 as the ionic template seems to work on Android 4.4 but not lower. 
  39. NEW! 2018 October 15, if need to lock orientation, add  this line to the config.xml in your projects root folder.
    1. <preference name="Orientation" value="landscape" /> 
    2. <preference name="Orientation" value="portrait" />
  40. NEW!  27 April 2017  to lock orientation in App mode,  add the line you need for example go to edit www/js/app.js - search ".run(function($ionicPlatform) "
    1. window.screen.orientation.lock('portrait');
    2. window.screen.orientation.lock('landscape');
    3. window.screen.unlock();
  41. NEW! 13 April 2017, EJSS automatically set iOS comboBox Accessory to false

    , go to edit www/js/app.js - search ".run(function($ionicPlatform) "- change
    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); to cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false); 
  42. Test App. To test the app, but the best test is still package a debug apk and serve it to a phone. The Firefox browser seems to be able to detect the exact error code better than Chrome. Or if you still want to try the line is below.
    1. $ ionic serve
  43. Exit the test server by entering q.
  44. Deploying the debug app. This process can produce a number of errors. Mainly because you need to install the Android SDK tools required for compilation of Androids apps for the target version indicated by the Ionic project. For this, you may need to run the Android SDK Manager and install a number of packages. When successful, the last message will tell you where is the android-debug.apk file that was generated. Send this file to your Android device and install it. It should work.
  45. to overcome this problem, Could not find an installed version of Gradle either in Android Studio, or on your system to install the gradle wrapper. Please include gradle in your path, or install Android Studio [ERROR] An error occurred while running subprocess cordova. type in in terminal 
    46.  manually downloaded from https://gradle.org/releases/ and copy it to the location say /Users/lookang/Public/


    • export PATH=$PATH:/Users/lookang/Public/gradle-6.3/bin

    • export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:/Applications/Android\ Studio.app/Contents/plugins/gradle/lib/

    • export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:/Applications/Android\ Studio.app/Contents/gradle/gradle-5.6.2/bin 
    • export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:/Applications/Android\ Studio.app/Contents/gradle/gradle-5.1.1/bin 
    • export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:/Applications/Android\ Studio.app/Contents/gradle/gradle-4.10.1/bin
     clue to path is Application

    - Android Studio.app, right click and show package contents
    - /Applications/Android Studio.app/Contents/gradle/gradle-5.1.1

    • Ionic 4, just need 
    • $ ionic cordova build android
    • Ionic 2 Before building App in any platform or ionic serve:
    • $ npm run build
    • 01 October 2018, sometimes, an error might occur  typescript: src/app/app.component.ts, line: 35 Property 'hideKeyboardAccessoryBar' does not exist on type 'Keyboard'.
    • find the file app.component.ts in your app folder, located at for me at MyAppsFolder/waverepresent/src/app/app.component.ts and edit it
    • comment out the 2 lines causing the error 
    • //   keyboard.hideKeyboardAccessoryBar(false);
    • //   keyboard.disableScroll(true);
    • Found a bug 2018018 The comments in the Ejss information page must not contain "" 
    • which will result in an error message
    • and try 
    • $ npm run build
    • UPDATED 17Aug2017 $  ionic cordova build android
    • UPDATED 17Aug2017 $  ionic cordova build ios
    • $  ionic cordova emulate android
    • $  ionic cordova run android
    • $ ionic build android
    • $ ionic build ios 
    • Ionic 1
    • $ ionic build android
    • $ ionic build ios 
  46. Prepare for keytool, jarsigner and zipalign.
  47. on MacOSX, the path need to be added typing something like this in Terminal:
    • $ export PATH=$PATH:/Users/lookang/Library/Android/sdk/build-tools/24.0.1
    • $ export PATH=$PATH:/Users/lookang/Library/Android/sdk/build-tools/25.0.2
    • Ionic 4
    • $ export PATH=$PATH:/Users/lookang/Library/Android/sdk/build-tools/28.0.3
    • $ export PATH=$PATH:/Users/lookang/Library/Android/sdk/build-tools/30.0.2
  48. type in env and select the Environment Variables to allow the command line to be valid
  49.  select Environment Variables - System variables Edit 
  50. select new and key in the respective file location in to the PATH for the command lines to work properly
  51. It will appear as User Variables and you need properly these, the jdk for keytool and jarsigner, the android/sdk for zipalign 
    • C:\Program Files\Java\jdk1.8.0_92\bin
    • C:\Users\guest01\AppData\Local\Android\sdk\build-tools\24.0.1
  52. Deploy the release app. To generate a release build for Android, we can use the following cordova cli command:
    • UPDATED 17 Aug2017 $ ionic cordova build android --release
    • $ cordova build --release android
    • $ ionic build android --release
  53. navigate to the
    folder C:\Users\guest01\MyAppsFolder\shm161App\platforms\android\build\outputs\apk and copy the file android-release-unsigned.apk into the Appfolder say C:\Users\guest01\MyAppsFolder\shm161App 
  54. Let’s generate our private key using the keytool command that comes with the JDK. If this tool isn’t found, refer to the installation guide:
    • $ keytool -genkey -v -keystore my-release-key.keystore -alias lookang -keyalg RSA -keysize 2048 -validity 10000
  55. You’ll first be prompted to create a password for the keystore. Then, answer the rest of the nice tools’s questions and when it’s all done, you should have a file called my-release-key.keystore created in the current directory.
  56. Note: Make sure to save this file somewhere safe, if you lose it you won’t be able to submit updates to your app!
  57. update 20201030 new way to sign, i am not sure yet if it works



  58. choose Opt in to app signing by Google Play and copy the file pepk.jar from Google Playstore signing page to your app folder
  59. run the command as advised by Google Playstore signing page 
    • $ java -jar pepk.jar --keystore=my-release-key.keystore --alias=lookang --output=encrypted_private_key_path --encryptionkey=eb10fe8f7c7c9df715022017b00c6471f8ba8170b13049a11e6c09ffe3056a104a3bbe4ac5a955f4ba4fe93fc8cef27558a3eb9d2a529a2092761fb833b656cd48b9de6a
  60. To sign the unsigned APK, run the jarsigner tool which is also included in the JDK:
    • $ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore android-release-unsigned.apk lookang 
    • $ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore app-release-unsigned.apk lookang  // for new ionic 17 sept 2018
  61. This signs the apk in place. Finally, we need to run the zip align tool to optimize the APK. The zipalign tool can be found in C:\Users\guest01\AppData\Local\Android\sdk\build-toils\24.0.1
    • $ zipalign -v 4 android-release-unsigned.apk ejss_model_shm161.apk
    • $ zipalign -v 4 app-release-unsigned.apk ejss_model_1.apk // for new ionic 17 sept 2018
  62. send this apk to https://play.google.com/apps/publish/ and start publishing your own apps!
    • 20190622 Android play store now set the target Android to Android 28, to change that go to /Users/lookang/Public/myappsfolder/symmetryletterv4/platforms/android/app/src/main/AndroidManifest.xml 
    • edit the file AndroidManifest.xml and change to targetSdkVersion="28" instead of 27

  63. Updating your App
  64. As you develop your app, you’ll want to update it periodically. In order for the Google Play Store to accept updated APKs, you’ll need to edit the config.xml file to increment the version value, then rebuild the app for release.
  65. Debugging Environment
  66. Sometimes when changing computer from Windows and MacOSX, this error could happen. How to fix this Error: spawn EACCES. To solve this use the command
    • chmod +x hooks/after_prepare/010_add_platform_class.js
  67. Sometimes when changing computer from Windows and MacOSX, this error could happen.
    • just launch xcode and type in your account password to give xcode the permission to write to hard drive
  68. Sometimes when changing computer from Windows and MacOSX, this error could happen.** BUILD FAILED ** The following build commands failed: CompileAssetCatalog /Users/lookang/dropbox/public/myappsfolder/vernierapp/platforms/ios/build/emulator/vernierApp.app vernierApp/Images.xcassets. to solve this problem type this to build the ios resources pictures icons and splash 
    • $ ionic resources
  69. Sometimes when changing computer from Windows and MacOSX, this error could happen. There is an error in your gulpfile: Error: Missing binding/Users/lookang/Dropbox/Public/MyAppsFolder/dcmotorApp/node_modules/node-sass/vendor/darwin-x64-48/binding.node Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 6.x Found bindings for the following environments:- Windows 32-bit with Node.js 6.x This usually happens because your environment has changed since running `npm install`. Run `npm rebuild node-sass` to build the binding for your current environment.
    • $ npm rebuild node-sass
  70. Another error could be Missing dependency target “CordovaLib (from CordovaLib.xcodeproj)”. to solve it use https://forum.ionicframework.com/t/cordova-cdvviewcontroller-h-file-not-found-in-xcode-7-1-beta/32232/6
    • "$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include"
  71. strangely i has an error
    Uh oh! Looks like you're missing a module in your gulpfile:
    Cannot find module 'supports-color'
    Do you need to run `npm install`? 
  72. to solve this, http://stackoverflow.com/questions/9023672/how-do-i-resolve-cannot-find-module-error-using-node-js rename the folder to something else and type in npm install 
  73. UPDATE: 1 june 2017 sometimes, the platform android cannot be added anymore for whatever reason. edit the file package.json and remove the line on "cordova-android":"0.0.8" and rebuilding the app will automatically add the correct latest new line "cordova-android": "^6.2.3",
  74. Update 4 Jan 2018 sometimes, now apple ask for 1024x1024px App Store Icon. Create a png icon of resolution 1024x1024. https://stackoverflow.com/questions/46987694/missing-app-store-icon-ios-apps-must-include-a-1024x1024px-app-store-icon-in
  75. Update 13 September 2018 error  (node:851) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Could not find an installed version of Gradle either in Android Studio, or on your system to install the gradle wrapper. Please include gradle in your path, or install Android Studio https://github.com/ionic-team/ionic/issues/11591 file:///Users/lookang/.bash_profile
  76. to fix this copy line into a text editor like BlueGriffon  
    • file:///Users/lookang/.bash_profile 
  77. go to source tab and clean up all the redundant formatting at the top and bottom
  78. add text only and save the file on file:///Users/lookang/.bash_profile 
    • # added by lookang 
    • export JAVA_HOME=/Applications/Android\ Studio.app/Contents/jre/jdk/Contents/Home 
    • export ANDROID_HOME=/Users/lookang/Library/Android/sdk 
    • export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:/Applications/Android Studio.app/Contents/gradle/gradle-4.4/bin
      • export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:/Applications/Android\ Studio.app/Contents/gradle/gradle-4.10.1/bin

  79. if the bash to not working, need to key in everytime 
    1. export PATH=$PATH:/Applications/Android\ Studio.app/Contents/gradle/gradle-4.10.1/bin
  80. run in cmd line to check if the file is correctly PATHing. if wrong, the error is identified and fixed, the correct result should be a NIL result.
    • source ~/.bash_profile
  81. to see all the hidden file in MacOSX, press on the keyboard COMMAND, SHIFT and .
  82. proceed to type and a new error will appear (node:2588) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: spawn EACCES
    1. ionic cordova build android
  83. now type in cmd line and supply the password to your Mac account 
    1. sudo chmod a+x "/Applications/Android Studio.app/Contents/gradle/gradle-4.4/bin/gradle"
    2. sudo chmod a+x "/Applications/Android Studio.app/Contents/gradle/gradle-5.1.1/bin/gradle"
  84.  there should a successful build! enjoy!
  85. Update 20190412 sometimes Java may be confuse which version on Mac, go to /Library/Java/JavaVirtualMachines and delete the unnecessary version, Ionic is only supported by Java 8 which is currently jdk1.8.0_202.jdk 




at

1 comment:

  1. Aaipl GroupFriday, February 19, 2021 at 5:15:00 PM GMT+8

    Thank you for your post for Creating Single Apps written by paco , felix and lookang. This is invaluable information, it is amazing and wonderful to visit your site.

    Visit:- Hire iOS App Developer in Singapore

    ReplyDelete