Compiling web, android and ios apps for skadate mobile 2.0

dhtmldhtml Posts: 1,002
edited April 7 in Hybrid

This is a very interesting situation here for those that understand how skadate technology works.

I am using a MAC OSX Mojave 10.14.6

3.20.0

tony:application dhtml$ ionic -v

? Looks like a fresh checkout! No ./node_modules directory found. Would you like to install project dependencies? No

? The Ionic CLI has an update available (3.20.0 => 5.4.16)! Would you like to install it? No

Not automatically updating your CLI.

3.20.0


tony:application dhtml$ ionic info

cli packages: (/Users/tony/.nvm/versions/node/v7.0.0/lib/node_modules)

  @ionic/cli-utils : 1.19.2

  ionic (Ionic CLI) : 3.20.0

global packages:

  cordova (Cordova CLI) : 8.1.2 ([email protected]

local packages:

  @ionic/app-scripts : 3.2.0

  Cordova Platforms : browser 5.1.0-dev ios 4.5.5

  Ionic Framework  : ionic-angular 3.9.5

System:

  Android SDK Tools : 26.1.1

  Node       : v7.0.0

  npm        : 3.10.8 

  OS        : macOS

  Xcode       : Xcode 11.3.1 Build version 11C504 

Environment Variables:

  ANDROID_HOME : /Users/tony/Library/Android/sdk/

Misc:

  backend : pro


tony:application dhtml$ npm -v

3.10.8

tony:application dhtml$ node -v

v7.0.0

tony:application dhtml$ pod --version

1.4.0

tony:application dhtml$ xcode-select -v

xcode-select version 2354.

XCODE:

Version 11.3.1 (11C504)

Android Studio:

Version 3.6.1


Comments

  • dhtmldhtml Posts: 1,002

    So here we go, the pwa has been extracted into the glive folder.

    $ pwd

    /Users/tony/dev/pwa/glive/skmobileapp/application

    tony:application dhtml$ ls

    application.tmpl.config.json prepare.js

    config resources

    config.tmpl.xml scripts

    configure.js src

    cordova-hcp.json test-config

    e2e tsconfig.json

    hooks tslint.json

    ionic.config.json ul_web_hooks

    package-lock.json updateManifest.js

    package.tmpl.json www

    A very important step here:

    ensure that the following files are valid:

    application.tmpl.config.json

    config.tmpl.xml

    and that they are properly configured.

    https://jsonlint.com/ and https://www.xmlvalidation.com/ can do that.

  • dhtmldhtml Posts: 1,002
    edited April 7

    I create my config files

    tony:application dhtml$ cp application.tmpl.config.json application.config.json

    tony:application dhtml$ cp package.tmpl.json package.json

    tony:application dhtml$ pwd

    /Users/tony/dev/pwa/glive/skmobileapp/application

    tony:application dhtml$ 

    $ sudo npm run setup

    when running this command, you need to wait for 5-10 minutes or even more. If you have a video game. . . .well

    txt
    txt
    npm_run_setup.txt
    164K
  • dhtmldhtml Posts: 1,002

    The next step is:

    $ sudo npm run prepare_ci

    This one takes about 30-40 minutes, depending. The output is attached here also.

    txt
    txt
    sudo npm run prepare_ci.txt
    79K
  • dhtmldhtml Posts: 1,002
    edited April 7

    At this stage, allow your application folder and subs to have full read and write access

    [Running in browser]

    $ npm run browser


    tony:application dhtml$ npm run browser


    > [email protected] browser /Users/tony/dev/pwa/glive/skmobileapp/application

    > ionic-app-scripts serve --sourceMap source-map --iscordovaserve --wwwDir platforms/browser/www/ --buildDir platforms/browser/www/build


    [07:17:45] ionic-app-scripts 3.2.0 

    [07:17:45] watch started ... 

    [07:17:45] build dev started ... 

    [07:17:46] Proxy added:/skmobileapp => http://0.0.0.0:3004/skmobileapp 

    [07:17:46] clean started ... 

    [07:17:46] clean finished in 49 ms 

    [07:17:46] copy started ... 

    [07:17:46] deeplinks started ... 

    [07:17:47] deeplinks finished in 974 ms 

    [07:17:47] transpile started ... 

    [07:18:02] transpile finished in 14.73 s 

    [07:18:02] preprocess started ... 

    [07:18:02] preprocess finished in less than 1 ms 

    [07:18:02] webpack started ... 

    [07:18:02] copy finished in 16.30 s 

    [07:18:15] webpack finished in 13.04 s 

    [07:18:15] sass started ... 

    [07:18:19] sass finished in 4.33 s 

    [07:18:19] postprocess started ... 

    [07:18:19] postprocess finished in 71 ms 

    [07:18:19] lint started ... 

    [07:18:19] build dev finished in 33.69 s 

    [07:18:20] watch ready in 34.07 s 

    [07:18:20] dev server running: http://localhost:8100/ 

    Your application should work well in browser without issues at this point

    Screenshot 2020-04-07 at 7.20.01 AM.png
    588 x 752 - 122K
  • dhtmldhtml Posts: 1,002
    edited April 7

    Let us now compile for IOS:

    Notice we have not moved out of the application folder from the start:

    $ cordova platform add [email protected]


    tony:application dhtml$ cordova platform add [email protected]

    tony:application dhtml$ cordova platform add [email protected]

    Using cordova-fetch for [email protected]

    Adding ios project...

    Creating Cordova project for the iOS platform:

    Path: platforms/ios

    Package: com.gizee

    Name: Gizee

    iOS project created with [email protected]

    Installing "cordova-admob-sdk" for ios

    Installing "cordova-google-api-version" for ios

    Installing "cordova-hot-code-push-plugin" for ios

    Installing "cordova-plugin-admob-free" for ios

    Plugin dependency "[email protected]" already fetched, using that version.

    Installing "cordova-promise-polyfill" for ios

    Plugin dependency "[email protected]" already fetched, using that version.

    Dependent plugin "cordova-admob-sdk" already installed on ios.

    Installing "cordova-plugin-compat" for ios

    Installing "cordova-plugin-device" for ios

    Installing "cordova-plugin-facebook4" for ios

    Installing "cordova-plugin-geolocation" for ios

    Installing "cordova-plugin-inapppurchase" for ios

    Installing "cordova-plugin-ionic-webview" for ios

    Installing "cordova-plugin-iosrtc" for ios


    cordova-plugin-iosrtc enables use of the JavaScript WebRTC APIs (as defined by the W3C) in iOS devices.

    Learn more at https://github.com/BasqueVoIPMafia/cordova-plugin-iosrtc

    Installing "cordova-plugin-splashscreen" for ios

    Installing "cordova-plugin-statusbar" for ios

    Installing "cordova-plugin-whitelist" for ios

    Dependent plugin "cordova-promise-polyfill" already installed on ios.

    Installing "es6-promise-plugin" for ios

    Installing "ionic-plugin-keyboard" for ios

    Installing "phonegap-plugin-media-stream" for ios

    Plugin dependency "[email protected]4.2.2" already fetched, using that version.

    Dependent plugin "es6-promise-plugin" already installed on ios.

    Plugin dependency "[email protected]" already fetched, using that version.

    Dependent plugin "cordova-plugin-compat" already installed on ios.

    Installing "phonegap-plugin-push" for ios

    "framework" tag with type "podspec" is deprecated and will be removed. Please use the "podspec" tag.

    Running command: pod install --verbose

    nil versions are discouraged and will be deprecated in Rubygems 4


    Overwriting existing resource file at platforms/ios/Gizee/Resources/resources/sounds/match.wav

    CHCP plugin after prepare hook:

      config-file set to https://gizee.com/ow_static/plugins/skmobileapp/src/chcp.json

    --save flag or autosave detected

    Saving [email protected]~5.0.0 into config.xml file ...

    iosrtc-swift-support.js [INFO] ".pbxproj" project file found: /Users/tony/dev/pwa/glive/skmobileapp/application/platforms/ios/Gizee.xcodeproj/project.pbxproj

    iosrtc-swift-support.js [INFO] ".xcconfig" project file found: /Users/tony/dev/pwa/glive/skmobileapp/application/platforms/ios/cordova/build.xcconfig

    iosrtc-swift-support.js [INFO] fixing issues in the generated project files:

    iosrtc-swift-support.js [INFO] - "iOS Deployment Target" and "Deployment Target" to: "9.0"

    iosrtc-swift-support.js [INFO] - "Runpath Search Paths" to: "@executable_path/Frameworks"

    iosrtc-swift-support.js [INFO] - "Objective-C Bridging Header" to: "Gizee/Plugins/cordova-plugin-iosrtc/cordova-plugin-iosrtc-Bridging-Header.h"

    iosrtc-swift-support.js [INFO] - "ENABLE_BITCODE" set to: "NO"

    iosrtc-swift-support.js [INFO] - "SWIFT_VERSION" set to: "5.0"

    iosrtc-swift-support.js [INFO] file correctly fixed: /Users/tony/dev/pwa/glive/skmobileapp/application/platforms/ios/cordova/build.xcconfig

    (node:85614) DeprecationWarning: Calling an asynchronous function without callback is deprecated.

    iosrtc-swift-support.js [INFO] file correctly fixed: /Users/tony/dev/pwa/glive/skmobileapp/application/platforms/ios/Gizee.xcodeproj/project.pbxproj

  • dhtmldhtml Posts: 1,002
    edited April 7

    In case you get the error on the previous post, just forget about it and move on to the next step.

    $ ionic cordova resources --force

    Once you have added the ios platform. The next step is to:

    open the applications/platforms/ios

    And launch the workspace (not the project). Configure the provisioning profile and you can run your application.

    In case you run into provisioning profile issues, please take a look at this link below:

    https://africoders.com/discussion/1280/app-has-conflicting-provisioning-setting-bug/p1?new=1

  • dhtmldhtml Posts: 1,002
    edited April 7

    In order to update the application, your safest bet is:


    $ ionic cordova platform remove ios

    $ cordova platform add [email protected]

    $ ionic cordova resources --force

    Then reopen with xcode. But if your resources cannot compile, well, we will look at that next.

  • Lord JerryLord Jerry Posts: 76

    i would love to try this out one of these days.

  • dhtmldhtml Posts: 1,002
    edited April 7

    If you are using IOS 5.0.0, there is no need to change to legacy build system at all. Just compile with the new system and move on.

  • dhtmldhtml Posts: 1,002

    I needed to update the IOS version, all I need do is:

    update the config.xml, change the IOS version, and made other changes like adding a permission, then

    $ ionic cordova build ios

    tony:application dhtml$ ionic cordova build ios

    > npm run ionic:build -- --platform ios


    > [email protected] ionic:build /Users/tony/dev/pwa/glive/skmobileapp/application

    > node --max-old-space-size=8192 --stack-size=1968 ./node_modules/@ionic/app-scripts/bin/ionic-app-scripts.js build && node ./configure.js "--platform" "ios"


    [11:48:45] ionic-app-scripts 3.2.0 

    [11:48:45] build dev started ... 

    [11:48:45] clean started ... 

    [11:48:46] clean finished in 703 ms 

    [11:48:46] copy started ... 

    [11:48:47] deeplinks started ... 

    [11:48:48] deeplinks finished in 1.35 s 

    [11:48:48] transpile started ... 

    [11:49:03] transpile finished in 15.41 s 

    [11:49:03] preprocess started ... 

    [11:49:03] preprocess finished in 1 ms 

    [11:49:03] webpack started ... 

    [11:49:04] copy finished in 17.41 s 

    [11:49:18] webpack finished in 15.01 s 

    [11:49:18] sass started ... 

    [11:49:22] sass finished in 3.58 s 

    [11:49:22] postprocess started ... 

    [11:49:22] postprocess finished in 54 ms 

    [11:49:22] lint started ... 

    [11:49:22] build dev finished in 36.62 s 

    [11:49:34] tslint: src/services/gizee/index.ts, line: 64 

    [11:49:34] tslint: src/pages/payments/view/mobile/index.ts, line: 47 

    [11:49:34] tslint: src/pages/payments/view/inapp/index.ts, line: 44 

          'url' is declared but its value is never read. 


       L64:   let url: string = base_url + uri;


          Property 'gizee' is declared but its value is never read. 


       L46: private ref: ChangeDetectorRef,

       L47: private gizee: GizeeService,

       L48: private payments: PaymentsService) {


          Property 'gizee' is declared but its value is never read. 


       L43: private ref: ChangeDetectorRef,

       L44: private gizee: GizeeService,

       L45: private payments: PaymentsService)


    [11:49:34] lint finished in 12.03 s 

    > cordova-hcp build

    Running build

    Config { update: 'start',

     content_url: 'https://gizee.com/ow_static/plugins/skmobileapp/src',

     release: '2020.04.07-11.49.35' }

    Build 2020.04.07-11.49.35 created in /Users/tony/dev/pwa/glive/skmobileapp/application/www

    > cp /Users/tony/dev/pwa/glive/skmobileapp/application/platforms/browser/config.xml /Users/tony/dev/pwa/glive/skmobileapp/application/www/

    > cp -R /Users/tony/dev/pwa/glive/skmobileapp/application/platforms/browser/platform_www/cordova-js-src /Users/tony/dev/pwa/glive/skmobileapp/application/www/

    > cp -R /Users/tony/dev/pwa/glive/skmobileapp/application/platforms/browser/platform_www/plugins /Users/tony/dev/pwa/glive/skmobileapp/application/www/

    > cp /Users/tony/dev/pwa/glive/skmobileapp/application/platforms/browser/platform_www/cordova_plugins.js /Users/tony/dev/pwa/glive/skmobileapp/application/www/

    > cp /Users/tony/dev/pwa/glive/skmobileapp/application/platforms/browser/platform_www/cordova.js /Users/tony/dev/pwa/glive/skmobileapp/application/www/

    > find /Users/tony/dev/pwa/glive/skmobileapp/application/www/ -type f ( -name "*.html" -o -name "*.xml" -o -name "*.js" -o -name "*.css" -o -name "*.svg" -o -name "*.map" ) -exec sh -c "gzip < {} > {}.gzip" ;

    > rm -rf /Users/tony/dev/pwa/ow_static/plugins/skmobileapp

    > npm run ionic:build:after


    > [email protected] ionic:build:after /Users/tony/dev/pwa/glive/skmobileapp/application

    > node ./configure.js


    > cordova-hcp build

    Running build

    Config { update: 'start',

     content_url: 'https://gizee.com/ow_static/plugins/skmobileapp/src',

     release: '2020.04.07-11.49.38' }

    Build 2020.04.07-11.49.38 created in /Users/tony/dev/pwa/glive/skmobileapp/application/www

    > cp /Users/tony/dev/pwa/glive/skmobileapp/application/platforms/browser/config.xml /Users/tony/dev/pwa/glive/skmobileapp/application/www/

    > cp -R /Users/tony/dev/pwa/glive/skmobileapp/application/platforms/browser/platform_www/cordova-js-src /Users/tony/dev/pwa/glive/skmobileapp/application/www/

    > cp -R /Users/tony/dev/pwa/glive/skmobileapp/application/platforms/browser/platform_www/plugins /Users/tony/dev/pwa/glive/skmobileapp/application/www/

    > cp /Users/tony/dev/pwa/glive/skmobileapp/application/platforms/browser/platform_www/cordova_plugins.js /Users/tony/dev/pwa/glive/skmobileapp/application/www/

    > cp /Users/tony/dev/pwa/glive/skmobileapp/application/platforms/browser/platform_www/cordova.js /Users/tony/dev/pwa/glive/skmobileapp/application/www/

    > find /Users/tony/dev/pwa/glive/skmobileapp/application/www/ -type f ( -name "*.html" -o -name "*.xml" -o -name "*.js" -o -name "*.css" -o -name "*.svg" -o -name "*.map" ) -exec sh -c "gzip < {} > {}.gzip" ;

    > rm -rf /Users/tony/dev/pwa/ow_static/plugins/skmobileapp

    > cordova build ios

    Overwriting existing resource file at platforms/ios/Gizee/Resources/resources/sounds/match.wav

    doc.find is not a function

    [ERROR] An error occurred while running subprocess cordova.

         

        cordova build ios exited with exit code 1.

         

        Re-running this command with the --verbose flag may provide more information.


    Even at that, the code is already compiled, do the rest within xcode by launching the application and continue with whatever you wish to do.


    Next, we shall be looking at how to compile an Android application out of this same source code.

  • dhtmldhtml Posts: 1,002
    edited April 7

    [Compiling PWA For Web]

    Still inside your application folder:

    $ sudo nano compile.sh

    Add the following:

    sudo npm run ionic:build --prod

    sudo cordova build browser

    cd ../..

    sudo zip -r skmobileapp_plugin.zip skmobileapp/ --exclude=skmobileapp/application* --exclude=*.DS_Store* --exclude=skmobileapp/.git/*

    open .

    Save it properly.
    $  sudo chmod u+x compile.sh
    To use it henceforth
    $ sudo compile.sh
    This will generate your skmobileapp zip and launch the folder
  • dhtmldhtml Posts: 1,002
    edited April 7
    To compile an android application:
    $ ionic cordova platform rm android
    $ ionic cordova platform add [email protected]

    tony:application dhtml$ ionic cordova platform add [email protected]

    > cordova platform add [email protected] --save

    Using cordova-fetch for [email protected]

    Adding android project...

    Creating Cordova project for the Android platform:

    Path: platforms/android

    Package: com.gizee

    Name: Gizee

    Activity: MainActivity

    Android target: android-26

    Subproject Path: CordovaLib

    Android project created with [email protected]

    Installing "cordova-admob-sdk" for android

    Subproject Path: CordovaLib

    Installing "cordova-google-api-version" for android

    Subproject Path: CordovaLib

    Installing "cordova-hot-code-push-plugin" for android

    Subproject Path: CordovaLib

    Installing "cordova-plugin-admob-free" for android

    Plugin dependency "[email protected]" already fetched, using that version.

    Installing "cordova-promise-polyfill" for android

    Plugin dependency "[email protected]" already fetched, using that version.

    Dependent plugin "cordova-admob-sdk" already installed on android.

    Installing "cordova-plugin-compat" for android

    Plugin doesn't support this project's cordova-android version. cordova-android: 6.3.0, failed version requirement: 

          <6.3.0

    Skipping 'cordova-plugin-compat' for android

    Installing "cordova-plugin-device" for android

    Installing "cordova-plugin-facebook4" for android

    Subproject Path: CordovaLib

    Installing "cordova-plugin-geolocation" for android

    Installing "cordova-plugin-inapppurchase" for android

    Installing "cordova-plugin-ionic-webview" for android

    Plugin doesn't support this project's cordova-android version. cordova-android: 6.3.0, failed version requirement: >=6.4.0

    Skipping 'cordova-plugin-ionic-webview' for android

    Installing "cordova-plugin-iosrtc" for android


    cordova-plugin-iosrtc enables use of the JavaScript WebRTC APIs (as defined by the W3C) in iOS devices.

    Learn more at https://github.com/BasqueVoIPMafia/cordova-plugin-iosrtc

    Installing "cordova-plugin-splashscreen" for android

    Installing "cordova-plugin-statusbar" for android

    Installing "cordova-plugin-whitelist" for android


                   This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.

              

    Dependent plugin "cordova-promise-polyfill" already installed on android.

    Installing "es6-promise-plugin" for android

    Installing "ionic-plugin-keyboard" for android

    Installing "phonegap-plugin-media-stream" for android

    Plugin dependency "[email protected]" already fetched, using that version.

    Dependent plugin "es6-promise-plugin" already installed on android.

    Plugin dependency "[email protected]" already fetched, using that version.

    Installing "cordova-plugin-compat" for android

    Plugin doesn't support this project's cordova-android version. cordova-android: 6.3.0, failed version requirement: 

          <6.3.0

    Skipping 'cordova-plugin-compat' for android

    Installing "phonegap-plugin-push" for android

    Subproject Path: CordovaLib

    CHCP plugin after prepare hook:

        config-file set to https://gizee.com/ow_static/plugins/skmobileapp/src/chcp.json

    --save flag or autosave detected

    Saving [email protected]~6.3.0 into config.xml file ...

    cordova-google-api-version  GOOGLE_API_VERSION:  11.6.2

    open /skmobileapp/application/platforms/android/ folder. Place your google_services.json file there 
    tony:application dhtml$ sudo ionic cordova build --release android
    This should give you a successful build. Open android studio from here to import project, compile
  • dhtmldhtml Posts: 1,002

    Next step is to compile your resources

    $ ionic cordova resources --force

    For Android app: open /skmobileapp/application/platforms/android/ folder. Place your google_services.json file there ( you've originally saved google_service.json file into /myapps/ folder at step 4). After placing .json file, open /skmobileapp/application/platforms/android/ 

    Now open the application in android studio, and try to build it.

  • dhtmldhtml Posts: 1,002
    edited April 7

    To launch in android studio, import the project into android studio the first time, dont open directly.

    BUILD SUCCESSFUL

    Total time: 42 mins 19.655 secs

    Built the following apk(s): 

    /Users/tony/dev/pwa/glive/skmobileapp/application/platforms/android/build/outputs/apk/android-release-unsigned.apk

  • dhtmldhtml Posts: 1,002

    In case you face this error:

    Build file '/Users/tony/dev/pwa/glive/skmobileapp/application/platforms/android/build.gradle' line: 50

    A problem occurred evaluating root project 'android'.

    > Cannot add task 'wrapper' as a task with that name already exists.

  • dhtmldhtml Posts: 1,002

    Before you build, replace these 3 files:

    build,gradle

    build.gradle (cordovaLib)

    cordova.gradle

    With the one attached here and recompile

    zip
    zip
    gradle.zip
    8K
  • dhtmldhtml Posts: 1,002

    Another technique that is even better is this:

    $ ionic cordova platform rm android

    $ ionic cordova platform add [email protected]

    $ cordova prepare android

    $ cordova build android

    You should get a build successful. Open in android studio and take it from there. No need to change anything.

  • dhtmldhtml Posts: 1,002

    In order to update the application:

    [Android]

    $ cordova prepare android

    $ cordova build android

    Open with android studio

Sign In or Register to comment.