Get Started with Hybrid Development
After completing this unit, you'll be able to:
- Describe two types of hybrid apps
- Install Mobile SDK for hybrid development.
- Create a Mobile SDK hybrid app with Cordova.
- Run your hybrid app.
Hybrid apps fall into two categories:
You use the forcehybrid npm utility to create a hybrid project. You can then use the Cordova command line to add more plugins and an Android or iOS target. You can even reuse an existing Web app by simply copying that app’s source files into the new project.
Hybrid projects also include the Mobile SDK container for each target platform. The container is a native project that requires little or no configuration. It provides the runtime bridge between the web or Visualforce app and the device operating system.
Let’s get going! We’re assuming you’ve successfully completed the “Install Mobile SDK Developer Tools” project. If not, it’s time to take a quick detour to that project to make sure that your development environment is properly configured. Once you’re ready to move forward, you create and explore a basic hybrid local app. You then explore how one of the Mobile SDK sample apps uses the force.js library and learn about hybrid remote apps. You also learn about debugging hybrid apps using Safari and Chrome debugging tools.
What About Pure HTML5 Apps?
This trail doesn’t cover pure HTML5 development.
Comparison of Native and Multi-Platform Development Architectures
The following table shows how the various development scenarios stack up.
|Native, React Native||HTML5||Hybrid|
|Graphics||Native APIs||HTML, Canvas, SVG||HTML, Canvas, SVG|
|Look and feel||Native||Emulated||Emulated|
|Distribution||App stores||Web||App store|
|Offline storage||Secure file system||Not secure; shared SQL, Key-Value stores||Secure file system; shared SQL (through Cordova plug-ins)|
|Connectivity||Online, offline||Mostly online||Online, offline|
To connect to the Salesforce service, every mobile app requires a Salesforce connected app. A connected app authorizes your app to communicate with Salesforce and securely access Salesforce APIs.
- Copy the Callback URL and Consumer Key values. You use these values to set up authentication in your app.
- Mobile SDK apps do not use the consumer secret, so you can ignore this value.
- At a Terminal window or the Windows command prompt, type forcehybrid create.
- Enter the following values at the prompts:
- Platform: One of the following: ios, android, or ios,android
- Application type: hybrid_local
- Application name: MyTrailHybridLocal
- Package name: com.mytrail.hybrid
- Organization name: MyTrail, Inc.
- Output directory: TrailHybridApps
Congratulations—you’ve created a hybrid local app! The script prints the project directory name to the screen when it has finished creating the project. For example: "Your application project is ready in <project directory name>."
After you get a command-line message saying that your project is ready, update the new project to reflect your connected app settings.
- In your project directory, open the www/bootconfig.json file in
a UTF-8 compliant text editor and update the following properties:
- remoteAccessConsumerKey—This value is a default placeholder. In a real app, replace this value with the consumer key from your connected app.
- oauthRedirectURI—This value is a default placeholder. In a real app, replace this value with the callback URL from your connected app.
- At the command prompt, change to the application root folder and run cordova prepare.
The forcehybrid utility has done its part. If you entered “android” for the platform, you now have a Cordova project with a platforms/android/ subfolder that you can open in Android Studio. If you set “Platform” to “ios”, you have a platforms/ios/ subfolder that contains an Xcode workspace. If you set “Platform” to “ios,android”, you have both an iOS workspace and an Android project.
Don’t build the project yet! You’re not quite done.
- Return to the Terminal or Command Prompt window.
- cd to your app's project directory.
- (Optional—Mac only) To add a second platform “after the fact”:
- To add iOS support,
cordova platform add email@example.com
- To add Android support,
cordova platform add firstname.lastname@example.org
- To add iOS support, type:
About Cordova Plug-ins
To enhance basic functionality in hybrid apps, developers often include third-party Cordova plug-ins. In your own apps, you can include external plug-ins by calling cordova plugin add plug-in_name, followed by cordova prepare.
To add other plug-ins to a forcehybrid app that includes an Android project, remove and then readd the Salesforce plug-in afterwards. This step does not apply to iOS-only forcehybrid apps. Here’s an example:
cordova plugin add cordova-plugin-contacts cordova plugin add cordova-plugin-statusbar cordova plugin remove com.salesforce cordova plugin add https://github.com/forcedotcom/SalesforceMobileSDK-CordovaPlugin --force
Now that your app is fully configured, let’s run it in Xcode (for iOS apps) or in Android Studio (for Android apps).
Run the App on iOS
To run the app from Xcode:
- In Xcode, select .
- Navigate to the platforms/ios/ directory in your new app’s directory.
- Double-click the <app name>.xcodeworkspace file.
- Click the Run button in the upper left corner, or press COMMAND-R.
Run the App on Android
To run the app from Android Studio:
- From the welcome screen, select Import project (Eclipse ADT, Gradle, etc.). Or, if Android Studio is already running, select .
- Select <your_project_dir>/platforms/android and click OK. If you’re prompted to use the Gradle wrapper, accept the prompt.
- After the build finishes, select the android target and click Run ‘android’ from either the menu or the toolbar.
- Select a connected Android device or emulator.
After you log in to Salesforce, the app displays a list of users from your organization.