Skip to content

example on how to convert a simple website to a mobile cordova app

Notifications You must be signed in to change notification settings

dennybiasiolli/cordova_sample

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

cordova_sample

example on how to convert a simple website to a mobile cordova app

Requirements (macOS version)

  • XCode (only on macOS for iOS compilation)

  • imagemagick, used in cordova-icon (brew install imagemagick)

Initializing

  • clone the repo and enter its folder

  • npm install

  • npx cordova platform add android ios browser

  • npx cordova prepare

  • npm run generate-cordova-icon

  • Configure build.json file starting from build.sample.json

    cp build.sample.json build.json

Local web app

Android development

  • You need to install JDK8

    brew cask install caskroom/versions/java8

  • You can install android-sdk, but I suggest to install android-studio

    brew cask install android-studio

    launch it and download android-sdk with its internal tool

  • Accept all SDK package licenses

    $ANDROID_HOME/tools/bin/sdkmanager --license

  • You need to install gradle

    brew install gradle

  • You should give gradle execution permissions

    sudo chmod -R 755 /Applications/Android\ Studio.app/Contents/gradle

  • Make sure to have android-sdk installed and configured, then create a keystore with Android Studio or use an existent keystore file and place it in ./certs/android/my-release-key.jks

  • Configure build.json file

    {
      // ...
      "android": {
        "release": {
          "keystore": "certs/android/my-release-key.jks",
          "storePassword": "", // android keystore store password
          "alias": "", // android keystore alias
          "password": "", // android keystore password
          "keystoreType": "JKS"
        }
      }
    }

Build

  • npm run build-android

Launch

  • npm run start-android

Release

  • npm run dist-android

  • Now you can find the Android's release apk in the following path

    platforms/android/build/outputs/apk/android-release.apk

iOS development

  • Make sure to have an updated version of Xcode

  • I suggest you to "Automatically manage signing" of Xcode. If you want to manage compilation programmatically you should install and configure certificates for iOS development, but ONLY if you want to manage compilation programmatically.

    • Create the required certificates on Apple Developer website, download and install them.

      • iPhone Developer
      • iPhone Distribution
      • Developer ID Application
    • Create the required provisioning profiles on Apple Developer website and download them.

      • Development
      • Distribution
    • Use security find-identity -v to show installed Apple identities

      $ security find-identity -v
        1) 0000000000000000000000000000000000000000 "iPhone Developer: Name Surname (ABC1234567)"
        2) 1111111111111111111111111111111111111111 "iPhone Distribution: Name Surname (DEF1234567)"
        3) 2222222222222222222222222222222222222222 "Developer ID Application: Name Surname (DEF1234567)"
           3 valid identities found
    • Open provisioning profile files to read provisioning profile ID

      <key>UUID</key>
      <string>11111111-2222-3333-4444-555555555555</string>
      <!--    ^ this code is the provisioning profile id -->
    • Configure build.json file, but ONLY if you want to manage compilation programmatically.

      {
        "ios": {
          "debug": {
            "codeSignIdentity": "0000000000000000000000000000000000000000", // iPhone Developer identity code
            "provisioningProfile": "11111111-2222-3333-4444-555555555555", // Development provisioning profile id
            "developmentTeam": "ABC1234567", // iPhone Developer team code
            "packageType": "development"
          },
          "release": {
            "codeSignIdentity": "1111111111111111111111111111111111111111", // iPhone Distribution identity
            "provisioningProfile": "e38c531c-4b77-4e4a-ae15-45727ae5e1aa", // Distribution provisioning profile id
            "developmentTeam": "DEF1234567", // iPhone Distribution team code
            "packageType": "app-store"
          }
        }
        // ...
      }

Build

  • npm run build-ios

Launch

  • npm run start-ios

Release

  • npm run dist-ios

  • To upload the iOS app, open Xcode with npm run open-xcode, then open Product > Archive in the main menu to compile and upload to the App Store

Tips

compile without killing the CPU

nice -n12 npm run dist

About

example on how to convert a simple website to a mobile cordova app

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages