Return to site

Cordova For Mac Os

broken image


This guide shows you how to create a JS/HTML Cordova application and deploy them tovarious native mobile platforms using the cordova command-lineinterface (CLI). For detailed reference on Cordova command-line, review the CLI reference

Framework7 is a free and open source mobile HTML framework for developing hybrid mobile apps or web apps with iOS & Android native look and feel. Evothings Studio Evothings Studio provides Cordova developers with a rapid development workflow, tutorials and example apps for the Internet of Things. Cordova-plugin-battery-status cordova-plugin-camera cordova-plugin-console cordova-plugin-contacts cordova-plugin-device cordova-plugin-device-motion cordova-plugin-device-orientation cordova-plugin-dialogs cordova-plugin-file cordova-plugin-file-transfer cordova-plugin-geolocation cordova-plugin-globalization cordova-plugin-inappbrowser cordova-plugin-legacy-whitelist cordova-plugin-media. Cordova -v REM or the long version cordova -version. Till the date , the latest version is Cordova 6.4.0. Updating cordova. To update cordova is as easy to execute the following command: npm update -g cordova. And you're ready to work with the latest version of Cordova and its latest tools. Hire a Mac OS Developer Browse Mac OS Jobs Post a Mac OS Project Learn more about Mac OS Windows Desktop. Cordova Developer for Windows / MacOS app. Budget $750-1500 USD. Ionic Framework. Cordova-plugin-battery-status cordova-plugin-camera cordova-plugin-device cordova-plugin-dialogs cordova-plugin-file cordova-plugin-geolocation cordova-plugin-inappbrowser cordova-plugin-media cordova-plugin-media-capture cordova-plugin-network-information cordova-plugin-splashscreen cordova-plugin-statusbar cordova-plugin-vibration cordova-plugin-whitelist.

Installing the Cordova CLI

The Cordova command-line tool is distributed as an npm package.

To install the cordova command-line tool, follow these steps:

  1. Download and install Node.js. Oninstallation you should be able to invoke node and npm on yourcommand line.

  2. (Optional) Download and install a git client, if you don'talready have one. Following installation, you should be able to invoke giton your command line. The CLI uses it to download assets when they are referenced using a url to a git repo.

  3. Install the cordova module using npm utility of Node.js. The cordovamodule will automatically be downloaded by the npm utility.

  • on OS X and Linux: Free adobe acrobat download for macbook pro.

    On OS X and Linux, prefixing the npm command with sudo may be necessary to install this development utility in otherwise restricted directories such as /usr/local/share. If you are using the optional nvm/nave tool or have write access to the install directory, you may be able to omit the sudo prefix. There are more tips available on using npm without sudo, if you desire to do that.

  • on Windows:

The -g flag above tells npm to install cordova globally. Otherwise it will be installed in the node_modules subdirectory of the current working directory.

Following installation, you should be able to run cordova on the command line with no arguments and it should print help text.

Create the App

Go to the directory where you maintain your source code, and create a cordova project:

This creates the required directory structure for your cordova app. By default, the cordova create script generates a skeletal web-based application whose home page is the project's www/index.html file.

See Also

Add Platforms

All subsequent commands need to be run within the project's directory,or any subdirectories:

Add the platforms that you want to target your app. We will add the 'ios' and 'android' platform and ensure they get saved to config.xml and package.json:

To check your current set of platforms:

Running commands to add or remove platforms affects the contents ofthe project's platforms directory, where each specified platformappears as a subdirectory.

Note: When using the CLI to build your application, you shouldnot edit any files in the /platforms/ directory. Download endnote x7 for mac. The filesin this directory are routinely overwritten when preparingapplications for building, or when plugins are re-installed.

Cordova For Mac Os 10.10

See Also

Mac

Install pre-requisites for building

To build and run apps, you need to install SDKs for each platform you wish to target. Alternatively, if you are using browser for development you can use browser platform which does not require any platform SDKs.

To check if you satisfy requirements for building the platform:

See Also

Build the App

By default, cordova create script generates a skeletal web-based application whose start page is the project's www/index.html file. Anyinitialization should be specified as part of the deviceready event handler defined in www/js/index.js.

Run the following command to build the project for all platforms:

You can optionally limit the scope of each build to specific platforms - 'ios' in this case:

See Also

Test the App

SDKs for mobile platforms often come bundled with emulators thatexecute a device image, so that you can launch the app from the homescreen and see how it interacts with many platform features. Run acommand such as the following to rebuild the app and view it within aspecific platform's emulator:

Following up with the cordova emulate command refreshes the emulatorimage to display the latest application, which is now available forlaunch from the home screen:

Alternately, you can plug the handset into your computer and test theapp directly:

Before running this command, you need to set up the device fortesting, following procedures that vary for each platform.

See Also

Cordova Mac Os X

Add Plugins

You can modify the default generated app to take advantage of standard web technologies,but for the app to access device-level features, you need to add plugins.

A plugin exposes a Javascript API for native SDK functionality. Plugins are typically hosted onnpm and you can search for them on the plugin search page. Some key APIs are provided by the Apache Cordova open source project and these are referred to as Core Plugin APIs. You can also use the CLI to launch the search page:

To add and save the camera plugin to package.json, we will specify the npm package name for the camera plugin:

Plugins can also be added using a directory or a git repo.

NOTE: The CLI adds plugin code as appropriate for each platform.If you want to develop with lower-level shell tools or platform SDKsas discussed in the Overview, you need to run the Plugman utility toadd plugins separately for each platform. (For more information, seeUsing Plugman to Manage Plugins.)

Use plugin ls (or plugin list, or plugin by itself) to viewcurrently installed plugins. Each displays by its identifier:

See Also

Using merges to Customize Each Platform

While Cordova allows you to easily deploy an app for many differentplatforms, sometimes you need to add customizations. In that case,you don't want to modify the source files in various www directorieswithin the top-level platforms directory, because they're regularlyreplaced with the top-level www directory's cross-platform source.

Instead, the top-level merges directory offers a place to specifyassets to deploy on specific platforms. Each platform-specificsubdirectory within merges mirrors the directory structure of thewww source tree, allowing you to override or add files as needed.For example, here is how you might use merges to boost the defaultfont size for Android devices:

  • Edit the www/index.html file, adding a link to an additional CSSfile, overrides.css in this case:

  • Optionally create an empty www/css/overrides.css file, which wouldapply for all non-Android builds, preventing a missing-file error.

  • Create a css subdirectory within merges/android, then add acorresponding overrides.css file. Specify CSS that overrides the12-point default font size specified within www/css/index.css, forexample:

When you rebuild the project, the Android version features the customfont size, while others remain unchanged.

You can also use merges to add files not present in the originalwww directory. For example, an app can incorporate a back buttongraphic into the iOS interface, stored inmerges/ios/img/back_button.png, while the Android version caninstead capture backbutton events from the corresponding hardwarebutton.

Updating Cordova and Your Project

After installing the cordova utility, you can always update it tothe latest version by running the following command:

Use this syntax to install a specific version:

Run cordova -v to see which version is currently running. To find the latest released cordova version, you can run:

Cordova mac os build

Install pre-requisites for building

To build and run apps, you need to install SDKs for each platform you wish to target. Alternatively, if you are using browser for development you can use browser platform which does not require any platform SDKs.

To check if you satisfy requirements for building the platform:

See Also

Build the App

By default, cordova create script generates a skeletal web-based application whose start page is the project's www/index.html file. Anyinitialization should be specified as part of the deviceready event handler defined in www/js/index.js.

Run the following command to build the project for all platforms:

You can optionally limit the scope of each build to specific platforms - 'ios' in this case:

See Also

Test the App

SDKs for mobile platforms often come bundled with emulators thatexecute a device image, so that you can launch the app from the homescreen and see how it interacts with many platform features. Run acommand such as the following to rebuild the app and view it within aspecific platform's emulator:

Following up with the cordova emulate command refreshes the emulatorimage to display the latest application, which is now available forlaunch from the home screen:

Alternately, you can plug the handset into your computer and test theapp directly:

Before running this command, you need to set up the device fortesting, following procedures that vary for each platform.

See Also

Cordova Mac Os X

Add Plugins

You can modify the default generated app to take advantage of standard web technologies,but for the app to access device-level features, you need to add plugins.

A plugin exposes a Javascript API for native SDK functionality. Plugins are typically hosted onnpm and you can search for them on the plugin search page. Some key APIs are provided by the Apache Cordova open source project and these are referred to as Core Plugin APIs. You can also use the CLI to launch the search page:

To add and save the camera plugin to package.json, we will specify the npm package name for the camera plugin:

Plugins can also be added using a directory or a git repo.

NOTE: The CLI adds plugin code as appropriate for each platform.If you want to develop with lower-level shell tools or platform SDKsas discussed in the Overview, you need to run the Plugman utility toadd plugins separately for each platform. (For more information, seeUsing Plugman to Manage Plugins.)

Use plugin ls (or plugin list, or plugin by itself) to viewcurrently installed plugins. Each displays by its identifier:

See Also

Using merges to Customize Each Platform

While Cordova allows you to easily deploy an app for many differentplatforms, sometimes you need to add customizations. In that case,you don't want to modify the source files in various www directorieswithin the top-level platforms directory, because they're regularlyreplaced with the top-level www directory's cross-platform source.

Instead, the top-level merges directory offers a place to specifyassets to deploy on specific platforms. Each platform-specificsubdirectory within merges mirrors the directory structure of thewww source tree, allowing you to override or add files as needed.For example, here is how you might use merges to boost the defaultfont size for Android devices:

  • Edit the www/index.html file, adding a link to an additional CSSfile, overrides.css in this case:

  • Optionally create an empty www/css/overrides.css file, which wouldapply for all non-Android builds, preventing a missing-file error.

  • Create a css subdirectory within merges/android, then add acorresponding overrides.css file. Specify CSS that overrides the12-point default font size specified within www/css/index.css, forexample:

When you rebuild the project, the Android version features the customfont size, while others remain unchanged.

You can also use merges to add files not present in the originalwww directory. For example, an app can incorporate a back buttongraphic into the iOS interface, stored inmerges/ios/img/back_button.png, while the Android version caninstead capture backbutton events from the corresponding hardwarebutton.

Updating Cordova and Your Project

After installing the cordova utility, you can always update it tothe latest version by running the following command:

Use this syntax to install a specific version:

Run cordova -v to see which version is currently running. To find the latest released cordova version, you can run:

To update platform that you're targeting:

-->

This article shows how you can build hybrid apps using Apache Cordova in Visual Studio and deploy them to iOS using Parallels. By using Parallels, you can develop Cordova apps using only a Mac. To accomplish this, you'll need the following:

  • Parallels on OS X or a similar virtual machine solution
  • Visual Studio 2015 with Visual Studio Tools for Apache Cordova installed

Cordova Mac Os Build

Any Mac that can run Mavericks or Yosemite should work with Parallels and Visual Studio, such as a 2013 MacBook Pro.

Configure Parallels

To install Parallels and Windows 8 on your Mac, follow the instructions that come with Parallels. Once you've installed Parallels and Windows 8, consider whether you should give your VM extra RAM and storage space, because the default values might not provide optimal performance. The following illustration shows some example settings in Parallels.

In the environment we tested, we gave the VM 2 CPUS and 3 GB RAM with 8 GB RAM on the Mac. This seemed to provide good performance for Windows while still leaving plenty of memory for OS X as well.

Important: Cordova is not designed to run off of network shares and Windows will not allow you to install a Windows app from a fileshare. For this reason, you either need to uncheck the Shared Profileoption in your VM configuration (which causes your Documents folder tooriginate from a share) or choose a location for your app that is ondisk that is local to your VM.

Set up Node.js with remotebuild

Once you've got Parallels up and running, you're ready to set up your Mac. First you need to install Node.js on OS X. Follow the directions at the NodeJS web site to install it.

Once Node.js is installed, get the remotebuild agent. The remotebuild agent allows Visual Studio to communicate with OS X and use your Mac as a build service. You can install the remotebuild agent by opening the Terminal App on your Mac and typing the following command:

The preceding command installs the remotebuild agent for all users of Node.js on your Mac, as well as the taco-remote module for building Cordova projects. If you don't want to allow others to use the remotebuild agent, you can drop the –g flag from the command to install the agent for the current user.

Important: If Node.js displays error messages, you may need to start Xcode first and accept one or more license agreements. Once youdo that, re-run the preceding command.

Make sure you have Parallels running. With remotebuild installed, start the agent by typing the following command in the Terminal App.

Note

By default, your iOS builds will show up in ~/.taco_home/remote-builds/taco-remote/builds.

When you run remotebuild for the first time, the agent asks for permission to install some additional third party packages using the Homebrew package manager.

Next, the agent creates some security certificates and you will see the following information.

You'll need to use the PIN when you configure the agent in Visual Studio. The remotebuild agent is now up and running. Leave the Terminal App open.

Get the IP address on your Mac

With Parallels running, the most reliable way to connect from Parallels to the Mac side is to use one of the VNIC IP addresses because it generally won't change between restarts. You can get these IP addresses by going to Terminal App and typing the following command:

The results should look similar to the following:

Either of the VNIC IP addresses will work. With remotebuild running and a VNIC IP address ready to use, you can open Visual Studio in Parallels and start building on the Mac.

Configure Visual Studio to use remotebuild

Cordova Android Mac Os

With Visual Studio open in Parallels, choose Tools, then Options. Open Tools for Apache Cordova, and then choose Remote Agent Configuration. Make the following changes to the remote agent settings.

  • Set Enable remote iOS processing to True.
  • Set Host to one of the vnic IP addresses your obtained previously.
  • Use the default Port setting of 3000.
  • Set Secure Mode to True.
  • Set Security PIN to the PIN displayed when you first ran remotebuild.

Note

If you don't see Tools for Apache Cordova in the Options dialog box, then you may need to install the tools. In Programs and Features, find Visual Studio 2015 and select Change, then Modify, then make sure that cross-platform tools for HTML/JavaScript (Apache Cordova) is selected. (If the tools are already installed, try selecting Show all settings if it is present at the bottom of the Options dialog box.)

If time expires on your security PIN (10 minutes by default), you may need to regenerate your certificates again.

Build your project for iOS

Next, make sure that your project is set to build for iOS. If you don't see the Solutions Platforms list on your debug toolbar, you can show it by choosing the dropdown arrow at the right of the debug toolbar as shown in the following illustration.

Cordova For Mac Os High Sierra

Select iOS in Solution Platforms list. Then select the device you want to build for in the Debug Target list, such as Simulator – iPhone 5.

After you select the device you want, choose the start debugging button (green right arrow). Visual Studio builds your project, handing off iOS build tasks to remotebuild. Once the build completes, remotebuild starts the simulator and loads your app.

Now you have a working hybrid mobile app development environment for iOS using Visual Studio and Parallels. You can develop your Cordova app and easily test it in iOS.

In later development sessions following a shutdown, you will need to restart remotebuild. As described previously, just open the Terminal App in OS X and type the following on the command line:

With that, good luck, and happy travels developing your next mobile app!





broken image