Getting Started in Mobile Development with HTML5

Use languages and frameworks you already know and love to develop HTML5 mobile apps on the Salesforce Platform. To customize your development experience, Mobile Services with HTML5 gives you a choice of open-source JavaScript libraries and methods for deploying your web application. Once you've selected your JavaScript library, select Force.com to deploy to the Force.com Platform using Visualforce, or choose elsewhere to deploy to general cloud platforms like Heroku.

Select Framework

Jumpstart your mobile web development with one of our Mobile Packs. Choose from jQuery Mobile, AngularJS, Backbone.js or Knockout.

You can also use any other web development framework of choice (like Twitter Bootstrap), and use the Force.com REST APIs to securely access Salesforce data from any HTML5 mobile app.

Select Deployment Method for your HTML5 app

Getting Started with jQuery Mobile and Visualforce

jQuery Mobile is a touch-optimized web framework that lets you develop mobile web applications using HTML5, JavaScript and CSS3 for a wide variety of smartphones and tablet computers. In this quick start tutorial, you will learn how to combine jQuery Mobile with the Salesforce web framework, Visualforce, natively on Force.com.

This quick start creates a contact management app that provides basic CRUD access to the Contact standard object. Using this app, users can view, update, add and delete Contact records from any mobile device with a modern browser. Here are screenshots of the completed application.

Prerequisites

  1. Sign up for a free Salesforce Platform Developer Edition (DE), if you don’t already have one. This will act as your own isolated development and test environment. You should not use this tutorial with a trial, sandbox, or production org.

Install the Mobile Pack for jQuery Mobile into your DE Org

  1. Log into your DE.
  2. Paste this install URL into the address bar (or click the link) to start installing the package: https://login.salesforce.com/packaging/installPackage.apexp?p0=04ti0000000JEkf
  3. Click ‘Continue’ on the Package Installation Detail page
  4. Click ‘Next’ for Step 1. Approve Package API Access
  5. Choose the access level you want end users to have and then click ‘Next’ for Step 2. Choose security level (‘Grant access to all’ is recommended for a personal DE test environment)
  6. Click ‘Install’ for Step 3. Install Package

What is included in this resource package?

MobileSample_jQueryMobile.page / jQuery Moble Tab : This Visualforce page forms the heart of the application and contains both the list view and the update/add/delete view shown above. You can navigate to your page by manually redirecting in the URL or by using the included jQuery Moble tab.

MobileSample_Resources_jQueryMobile (Static Resource zipfile): This package contains all the CSS files, images and JS libraries used in the quick start.

RemoteTK VF component, Apex class, test class: Unlike the other mobile packs, this mobile pack uses RemoteTK which provides an abstraction very similar to the REST API, implemented via @RemoteAction methods in the controller; however, it does not consume any API calls. Check out the Force.com JavaScript REST Toolkit README to learn more about the custom component works.

Test Your Application

Navigate to the MobileSample_jQueryMobile Visualforce page by appending the page name to the end of your instance url - https://login.salesforce.com/apex/MobileSample_jQueryMobile. You should see the application shown in the earlier screenshots. Ideally, you should test the page from a mobile device (after logging in with your Salesforce credentials). To modify the page or view the code, you can find it in the Setup tree under App Setup > Develop > Pages

Next Steps

  1. Check out the demos and docs for jQuery Mobile to learn more about what’s possible using this touch-optimized web framework.
  2. Want to take your app to the next level by adding native functionality to your web application like the ability to access the device camera, microphone and other hardware features? Create a Hybrid Android and/or Hybrid iOS application using the Salesforce Mobile SDK.
  3. Check out this great example of taking a similar contact management app and attaching a picture to the contact records with a Hybrid app developed using the Salesforce Mobile SDK.
  4. Check out this example of a scavenger hunt mobile web application built using Visualforce and jQuery Mobile. Instead of using the ForceTK library, that application uses an alternative data binding strategy using Visualforce JavaScript Remoting.
  5. Want to learn more about Visualforce? Check out the Visualforce Developer’s Guide for all of the documentation around how to develop with Visualforce. If you’d rather learn by watching, check out this beginner or advanced Visualforce webinar.

Getting Started with jQuery Mobile and Heroku

jQuery Mobile is a touch-optimized web framework that lets you develop mobile web applications using HTML5, JavaScript and CSS3 for a wide variety of smartphones and tablet computers. In this quick start tutorial, you will learn how to build a basic HTML5 mobile web application that gets it data from Salesforce using the REST API and displays the data using jQuery Mobile, and then deploy it to Heroku.

This quick start demonstrates a contact management app that provides basic CRUD access to the Contact standard object. Using this app, users can view, update, add and delete Contact records from any mobile device with a modern browser. Here are screenshots of the completed application.

Prerequisites

  1. Sign up for a free Heroku account, if you don’t already have one.
  2. Sign up for a free Salesforce Platform Developer Edition (DE), if you don’t already have one. This will act as your own personal test environment. You should not use this tutorial with a trial, sandbox, or production org.
  3. Download and install the Heroku Toolbelt. This toolbelt contains the Heroku client, a command-line tool for creating and managing your Heroku apps.

Download the application from GitHub

  1. Open your command line tool of choice and create a folder to clone the original GitHub repository locally:
    git clone https://github.com/developerforce/MobilePack-jQueryMobile.git
  2. Run the following on the command line
    cd MobilePack-jQueryMobile/Samples/jQueryMobileHerokuPHP

Initialize a new git repository

To deploy the sample application to Heroku, you’ll want a local repository that is specific to the sample. Now that you are in the jQueryMobileHerokuPHP sample directory, enter the following commands:

git init
git add -A
git commit -m 'first commit'

 

Create a new Heroku app

Using the Heroku toolkit, it is easy to deploy a new application in the cloud. You are now in the main directory of the application you want to deploy, so you just need to login and create the application instance on Heroku. Run the following commands in the same directory where you initialized a new git repo.

  1. Log in to your Heroku account - heroku login
  2. Create a new Heroku application - heroku apps:create

Note: This will create your app name as a haiku like cryptic-atoll-9625. This will be your unique application name. You can find your application in the output of the create command:

Creating cryptic-atoll-9625... done, stack
http://cryptic-atoll-9625.herokuapp.com/ | git@heroku.com:cryptic-atoll-9625.git

If you would like to create an application with a specific name, add the name to the end of the heroku apps:create command, i.e. heroku apps:create yourapplicationname.

Create a connection to Salesforce

  1. Log into your DE.
  2. Open the Setup menu by clicking [Your Name] > Setup.
  3. Create a new Connected App by going to App Setup > Create > Apps.
  4. Click the ‘New’ button in the Connected Apps list.
  5. Fill out all required fields and click ‘Save’:
    1. Connected App:jQueryMobileApp
    2. Developer Name:jQueryMobileApp
    3. Contact Email: Your email
    4. Callback URL: https://(yourapplicationname).herokuapp.com/index.php
      1. NOTE: This must have an https:// secure URL.
    5. Selected all available OAuth scopes
  6. From the detail page of the Connected App you just created, copy the Consumer Key.

Deploy the application

  1. Back in the command line where you created your Heroku application, create an environment variable for the application URL (for example, https://(yourapplicationname).herokuapp.com) and client ID (the consumer key) using fields from the connected app you just created:
    1. Application URL: heroku config:add app_url=[APP URL]
    2. Client ID: heroku config:add client_id=[CONSUMER KEY]
  2. Deploy the application to Heroku by running the following command: git push heroku master

Test your application

To test your app using the desktop browser, use the command heroku open. To test your app on a mobile device, navigate to the app with the application URL: https://(yourapplicationname).herokuapp.com.

I'm getting a "Client ID Invalid" error

When a Connected App is first defined in Salesforce, it might take a few minutes before the client ID is publicly available. It shouldn't take more than 10 or 15 minutes, and usually takes less than 5. If you see this error on the first try, take a quick breather and try again in a few minutes.
If the error persists, you can check the client_id value against the Connected Apps screen by entering heroku config in the command line. If they don't match (i.e. characters that got left off when copied) - you can re-enter the heroku config:add command to change the environment variable.

Next Steps

  1. Check out the demos and docs for jQuery Mobile to learn more about what’s possible using this touch-optimized web framework.
  2. Check out the Heroku Dev Center to learn more about how to manage and deploy applications using this cloud platform.
  3. Check out the developerforce website as your primary resource for all questions related to development with your Salesforce data. There are useful blogs and wiki articles you can reference here, as well as discussion boards, webinars, and other relevant content to help you hit the ground running with the apps you build.

Getting Started with Angular and Visualforce

Angular.js is a JavaScript framework which dramatically improves the web app authoring experience. This sample app uses Angular.js to create a cross platform web app to access your Salesforce data using the REST API. It also uses Twitter Bootstrap responsive design all while running inside a Visualforce page. Here are screenshots of the completed application.

Prerequisites

  1. Sign up for a free Salesforce Platform Developer Edition (DE), if you don’t already have one. This will act as your own isolated development and test environment. You should not use this tutorial with a trial, sandbox, or production org.

Install the Mobile Pack for AngularJS into your DE Org

  1. Log into your DE
  2. Paste this install URL into the address bar (or click the link) to start installing the package: https://login.salesforce.com/packaging/installPackage.apexp?p0=04ti0000000Xwmy
  3. Click ‘Continue’ on the Package Installation Detail page
  4. Click ‘Next’ for Step 1. Approve Package API Access
  5. Choose the access level you want end users to have and then click ‘Next’ for Step 2. Choose security level (Grant access to all is recommended for a personal DE test environment)
  6. Click ‘Install’ for Step 3. Install Package

What is included in this resource package?

MobileSample_ngIndex.page: This Visualforce page is the starting point for the sample app. The sample app has a total of 6 Visualforce pages with functionality pertaining to viewing the list of contacts, adding a contact, and viewing/editing/deleting an individual contact.

MobileSample_Resources_Angular (Static Resource zipfile): This package contains all the CSS files, images and JS libraries used in the quick start. The application uses angular-force.js to serve dynamic content through two-way data-binding that allows for the automatic synchronization of models and views.

Test Your Application

Navigate to the MobileSample_ngIndex Visualforce page by appending the page name to the end of your instance url - https://login.salesforce.com/apex/MobileSample_ngIndex. You should see the application shown in the earlier screenshots. Ideally, you should test the page from a mobile device (after logging in with your Salesforce credentials). To modify the page, you can find it in the Setup tree under App Setup > Develop > Pages

Next Steps

  1. Check out the AngularJS homepage to find tutorials, examples, and read about documentation on how to implement this unique MVC (Model View Collections) framework.
  2. Learn more about Twitter Bootstrap and responsive design.
  3. Want to take your app to the next level by adding native functionality to your web application like the ability to access the device camera, microphone and other hardware features? Create a Hybrid Android and/or Hybrid iOS application using the Salesforce Mobile SDK.
  4. Want to learn more about Visualforce? Check out the Visualforce Developer’s Guide for all of the documentation around how to develop with Visualforce. If you’d rather learn by watching, check out this beginner or advanced Visualforce webinar.

Getting Started with Angular and Heroku

Angular.js is a JavaScript framework which dramatically improves the web app authoring experience. This sample app uses Angular.js to create a cross platform web app to access your Salesforce data using the REST API. It also uses Twitter Bootstrap responsive design as well as a PHP and Node.js based proxy to help the Javascript communicate with the Salesforce platform without violating your browser’s same origin policy. In this quick start, you will learn how to take this mobile web app and deploy it to Heroku.

This quick start creates a contact management app that provides basic CRUD access to the Contact standard object. Using this app, users can view, update, add and delete Contact records from any mobile device with a modern browser. Here are screenshots of the completed application.

Prerequisites

  1. Sign up for a free Heroku account, if you don’t already have one.
  2. Sign up for a free Salesforce Platform Developer Edition (DE), if you don’t already have one. This will act as your own personal test environment. You should not use this tutorial with a trial, sandbox, or production org.
  3. Download and install the Heroku Toolbelt. This toolbelt contains the Heroku client a command-line tool for creating and managing your Heroku apps.
  4. For a Node.js app, install Node.js from http://nodejs.org/.

Installing the Node.js or PHP Sample Application

If you want to test out the Node.js or PHP sample, it is very easy to download and deploy the application using GitHub and Heroku.

  1. Open your command line tool of choice and create a folder to clone the original repository to locally:
git clone https://github.com/developerforce/MobilePack-AngularJS.git
  1. Run the following on the command line
cd MobilePack-AngularJS/samples
  1. For the Node.js sample,
cd AngularHerokuBootstrapNode
  1. For the PHP sample,
cd AngularHerokuBootstrapPHP

Initialize a new git repository

To deploy the specific sample application to Heroku, you’ll want a local repository that is specific to the sample. Now that you are in the sample directory of your choice (php or node), enter the following commands:

git init
git add -A
git commit -m 'first commit'

Create a new Heroku app

Using the Heroku toolkit, it is easy to deploy a new application in the cloud. You are now in the main directory of the application you want to deploy, so you just need to login and create the application instance on Heroku. Run the following commands in the same directory where you initialized a new git repo.

  1. Log in to your Heroku account - heroku login
  2. Create a new Heroku application - heroku apps:create

Note: This will create your app name as a haiku like cryptic-atoll-9625. This will be your unique application name. You can find your application in the output of the create command:

  Creating cryptic-atoll-9625... done, stack
  http://cryptic-atoll-9625.herokuapp.com/ | git@heroku.com:cryptic-atoll-9625.git

If you would like to create an application with a specific name, add the name to the end of the heroku apps:create command, i.e. heroku apps:create yourapplicationname.

Create a connection to Salesforce

  1. Log into your DE.
  2. Open the Setup menu by clicking [Your Name] > Setup.
  3. Create a new Connected App by going to App Setup > Create > Apps.
  4. Click the ‘New’ button in the Connected Apps list.
  5. Fill out all required fields and click ‘Save’:
    1. Connected App:
      1. PHP: AngularPHPMobile
      2. Node.js: AngularNodeMobile
    2. Developer Name:
      1. PHP: AngularPHPMobile
      2. Node.js: AngularNodeMobile
    3. Contact Email: Your email
    4. Callback URL:
      1. PHP: https://(yourapplicationname).herokuapp.com/#/callback
      2. Node.js: https://(yourapplicationname).herokuapp.com/#/callback
      3. Note: This must have an https:// secure URL && must end with /#/callback

         

    5. Selected all available OAuth scopes
  6. From the detail page of the Connected App you just created, copy the Consumer Key.

Deploy the application

  1. Back in the command line where you created your Heroku application, create an environment variable for the application URL (for example, https://(yourapplicationname).herokuapp.com) and client ID (the consumer key) using fields from the connected app you just created:
    1. Application URL: heroku config:add app_url=[APP URL]
    2. Client ID: heroku config:add client_id=[CONSUMER KEY]
    For example
    heroku config:add app_url="https://mysterious-beach-6478.herokuapp.com"
    heroku config:add client_id="3MVG9A2kN3Bn17huxQ_nFw2X9Ur2FK9lemhq7IntIqIla7wP93"
  2. Deploy the application to Heroku by running the following command: git push heroku master

Test your application

To test your app using the desktop browser, use the command heroku open. To test your app on a mobile device, navigate to the app with the application URL: https://(yourapplicationname).herokuapp.com.

I'm getting a "Client ID Invalid" error

When a Connected App is first defined in Salesforce, it might take a few minutes before the client ID is publicly available. It shouldn't take more than 10 or 15 minutes, and usually takes less than 5. If you see this error on the first try, take a quick breather and try again in a few minutes.
If the error persists, you can check the client_id value against the Connected Apps screen by entering heroku config in the command line. If they don't match (i.e. characters that got left off when copied) - you can re-enter the heroku config:add command to change the environment variable.

Next Steps

  1. Check out the AngularJS homepage to find tutorials, videos, a reference guide, and more for rapid web development using this expressive framework.
  2. Want to learn more about Twitter Bootstrap? Check out what this powerful front-end can do for your rapid web development.
  3. Check out the Heroku Dev Center to learn more about how to manage and deploy applications using this cloud platform.
  4. Check out the developerforce website as your primary resource for all questions related to development with your Salesforce data. There are useful blogs and wiki articles you can reference here, as well as discussion boards, webinars, and other relevant content to help you hit the ground running with the apps you build.

Getting Started with Backbone and Visualforce

Backbone.js provides a structure for JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, and views with declarative event handling, while connecting it all to your existing application over a RESTful JSON interface. In this quick start tutorial, you will learn how to combine Backbone.js with the Salesforce web framework, Visualforce, natively on Force.com.

This quick start creates a contact management app that provides basic CRUD access to the Contact standard object. Using this app, users can view, update, add and delete Contact records from any mobile device with a modern browser. Here are screenshots of the completed application.

Prerequisites

  1. Sign up for a free Salesforce Platform Developer Edition (DE), if you don’t already have one. This will act as your own isolated development and test environment. You should not use this tutorial with a trial, sandbox, or production org.

Install the Mobile Pack for Backbone into your DE Org

  1. Log into your DE
  2. Paste this install URL into the address bar (or click the link) to start installing the package: https://login.salesforce.com/packaging/installPackage.apexp?p0=04ti0000000W78j
  3. Click ‘Continue’ on the Package Installation Detail page
  4. Click ‘Next’ for Step 1. Approve Package API Access
  5. Choose the access level you want end users to have and then click ‘Next’ for Step 2.
    Choose security level (Grant access to all is recommended for a personal DE test environment)
  6. Click ‘Install’ for Step 3. Install Package

What is included in this resource package?

MobileSample_Backbone.page: This Visualforce page forms the heart of the application and contains both the list view and the update/add/delete view shown above.

MobileSample_Resources_Backbone (Static Resource zipfile): This package contains all the CSS files, images and JS libraries used in the quick start. The application uses backbone.js for the MVC logic, and forcetk.js (a JavaScript wrapper for the Force.com REST API) to grab the data from Salesforce. It also uses uses jQuery Mobile 1.3.0 and jQuery 1.9.1 for the front-end UI.

Test Your Application

Navigate to the MobileSample_Backbone Visualforce page by appending the page name to the end of your instance url - https://login.salesforce.com/apex/MobileSample_Backbone. You should see the application shown in the earlier screenshots. Ideally, you should test the page from a mobile device (after logging in with your Salesforce credentials). To modify the page, you can find it in the Setup tree under App Setup > Develop > Pages

Next Steps

  1. Check out the Backbone.js homepage to find tutorials, examples, and read about documentation on how to implement this unique MVC (Model View Collections) framework.
  2. Check out the demos and docs for jQuery Mobile to learn more about what’s possible using this touch-optimized web framework.
  3. Want to take your app to the next level by adding native functionality to your web application like the ability to access the device camera, microphone and other hardware features? Create a Hybrid Android and/or Hybrid iOS application using the Salesforce Mobile SDK.
  4. Check out this great example of taking a similar contact management app and attaching a picture to the contact records with a Hybrid app developed using the Salesforce Mobile SDK.
  5. Want to learn more about Visualforce? Check out the Visualforce Developer’s Guide for all of the documentation around how to develop with Visualforce. If you’d rather learn by watching, check out this beginner or advanced Visualforce webinar.

Getting Started with Backbone and Heroku

Backbone.js provides a structure for JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, and views with declarative event handling, while connecting it all to your existing application over a RESTful JSON interface. This quick start tutorial demonstrates both a PHP or Node.js mobile web application structured using Backbone.js that pulls data from Salesforce using the REST API. In this quick start you will learn how to take this mobile web app and deploy it to Heroku.

This quick start creates a contact management app that provides basic CRUD access to the Contact standard object. Using this app, users can view, update, add and delete Contact records from any mobile device with a modern browser. Here are screenshots of the completed application.

Prerequisites

  1. Sign up for a free Heroku account, if you don’t already have one.
  2. Sign up for a free Salesforce Platform Developer Edition (DE), if you don’t already have one. This will act as your own personal test environment. You should not use this tutorial with a trial, sandbox, or production org.
  3. Download and install the Heroku Toolbelt. This toolbelt contains the Heroku client a command-line tool for creating and managing your Heroku apps.
  4. For a Node.js app, install Node.js from http://nodejs.org/.

Installing the Node.js or PHP Sample Application

If you want to test out the Node.js or PHP sample, it is very easy to download and deploy the application using GitHub and Heroku.

  1. Open your command line tool of choice and create a folder to clone the original GitHub repository locally:
  git clone https://github.com/developerforce/MobilePack-BackboneJS.git
                
  1. Run the following on the command line
  cd MobilePack-BackboneJS/Samples/BackboneWebJQueryMobile
  1. For the node.js sample,
cd nodejs
  1. For the php sample,
cd php

Initialize a new git repository

To deploy the specific sample application to Heroku, you’ll want a local repository that is specific to the sample. Now that you are in the sample directory of your choice (php or node), enter the following commands:

  git init
  git add -A
  git commit -m 'first commit'

Create a new Heroku app

Using the Heroku toolkit, it is easy to deploy a new application in the cloud. You are now in the main directory of the application you want to deploy, so you just need to login and create the application instance on Heroku. Run the following commands in the same directory where you initialized a new git repo.

  1. Log in to your Heroku account - heroku login
  2. Create a new Heroku application - heroku apps:create

Note: This will create your app name as a haiku like cryptic-atoll-9625. This will be your unique application name. You can find your application in the output of the create command:

  Creating cryptic-atoll-9625... done, stack
  http://cryptic-atoll-9625.herokuapp.com/ | git@heroku.com:cryptic-atoll-9625.git

If you would like to create an application with a specific name, add the name to the end of the heroku apps:create command, i.e. heroku apps:create yourapplicationname.

Create a connection to Salesforce

  1. Log into your DE.
  2. Open the Setup menu by clicking [Your Name] > Setup.
  3. Create a new Connected App by going to App Setup > Create > Apps.
  4. Click the ‘New’ button in the Connected Apps list.
  5. Fill out all required fields and click ‘Save’:
    1. Connected App:
      1. PHP: BackbonePHPMobile
      2. Node.js: BackboneNodeMobile
    2. Developer Name:
      1. PHP: BackbonePHPMobile
      2. Node.js: BackboneNodeMobile
    3. Contact Email: Your email
    4. Callback URL:
      1. PHP: https://(yourapplicationname).herokuapp.com/index.php
      2. Node.js: https://(yourapplicationname).herokuapp.com/index.html
      3. NOTE: This must have an https:// secure URL.
    5. Selected all available OAuth scopes
  6. From the detail page of the Connected App you just created, copy the Consumer Key.

Deploy the application

  1. Back in the command line where you created your Heroku application, create an environment variable for the application URL (for example, https://(yourapplicationname).herokuapp.com) and client ID (the consumer key) using fields from the connected app you just created:
    1. Application URL: heroku config:add app_url=[APP URL]
    2. Client ID: heroku config:add client_id=[CONSUMER KEY]
  2. Deploy the application to Heroku by running the following command: git push heroku master

Test your application

To test your app using the desktop browser, use the command heroku open. To test your app on a mobile device, navigate to the app with the application URL: https://(yourapplicationname).herokuapp.com.

I'm getting a "Client ID Invalid" error

When a Connected App is first defined in Salesforce, it might take a few minutes before the client ID is publicly available. It shouldn't take more than 10 or 15 minutes, and usually takes less than 5. If you see this error on the first try, take a quick breather and try again in a few minutes.
If the error persists, you can check the client_id value against the Connected Apps screen by entering heroku config in the command line. If they don't match (i.e. characters that got left off when copied) - you can re-enter the heroku config:add command to change the environment variable.

Next Steps

  1. Check out the Backbone.js homepage to find tutorials, examples, and read about documentation on how to implement this unique MVC (Model View Collections) framework.
  2. Check out the Heroku Dev Center to learn more about how to manage and deploy applications using this cloud platform.
  3. Check out the developerforce website as your primary resource for all questions related to development with your Salesforce data. There are useful blogs and wiki articles you can reference here, as well as discussion boards, webinars, and other relevant content to help you hit the ground running with the apps you build.

Getting Started with Knockout and Visualforce

Knockout is a JavaScript framework which dramatically improves the web app authoring experience. This quick start creates a contact management app that provides basic CRUD access to the Contact standard object. Using this app, users can view, update, add and delete Contact records from any mobile device with a modern browser. This sample app uses Knockout and Twitter Bootstrap responsive design. Here are screenshots of the completed application.

Prerequisites

  1. Sign up for a free Salesforce Platform Developer Edition (DE), if you don’t already have one. This will act as your own isolated development and test environment. You should not use this tutorial with a trial, sandbox, or production org.

Install the Mobile Pack for Knockout into your DE Org

  1. Log into your DE.
  2. Paste this install URL into the address bar (or click the link) to start installing the package: https://login.salesforce.com/packaging/installPackage.apexp?p0=04ti0000000Vrcj
  3. Click ‘Continue’ on the Package Installation Detail page
  4. Click ‘Next’ for Step 1. Approve Package API Access
  5. Choose the access level you want end users to have and then click ‘Next’ for Step 2. Choose security level (‘Grant access to all’ is recommended for a personal DE test environment)
  6. Click ‘Install’ for Step 3. Install Package

What is included in this resource package?

MobileSample_koIndex.page: This Visualforce page is the starting point for the sample app. The app has a total of 6 Visualforce pages with functionality pertaining to viewing the list of contacts, adding a contact, and viewing/editing/deleting an individual contact.

MobileSample_Resources_Knockout (Static Resource zipfile): This package contains all the CSS files, images and JS libraries used in the quick start. The application uses knockout-force.js to serve dynamic content through two-way data-binding that allows for the automatic synchronization of models and views. It also uses uses jQuery Mobile 1.3.0 and jQuery 1.9.1 for the front-end UI.

Test Your Application

Navigate to the MobileSample_koIndex Visualforce page by appending the page name to the end of your instance url - https://login.salesforce.com/apex/MobileSample_koIndex. You should see the application shown in the earlier screenshots. Ideally, you should test the page from a mobile device (after logging in with your Salesforce credentials). To modify the page or view the code, you can find it in the Setup tree under App Setup > Develop > Pages

Next Steps

  1. Check out the Knockout homepage to find tutorials, examples, and read about documentation on how to implement this unique MVC (Model View Collections) framework.
  2. Learn more about Twitter Bootstrap and responsive design.
  3. Want to take your app to the next level by adding native functionality to your web application like the ability to access the device camera, microphone and other hardware features? Create a Hybrid Android and/or Hybrid iOS application using the Salesforce Mobile SDK.
  4. Want to learn more about Visualforce? Check out the Visualforce Developer’s Guide for all of the documentation around how to develop with Visualforce. If you’d rather learn by watching, check out this beginner or advanced Visualforce webinar.

Getting Started with Knockout and Heroku

Knockout is a JavaScript framework which dramatically improves the web app authoring experience. This quick start tutorial demonstrates a Node.js mobile web application structured using Knockout that pulls data from Salesforce using the REST API. In this quick start you will learn how to take this mobile web app and deploy it to Heroku.

This quick start creates a contact management app that provides basic CRUD access to the Contact standard object. Using this app, users can view, update, add and delete Contact records from any mobile device with a modern browser. Here are screenshots of the completed application.

Prerequisites

  1. Sign up for a free Heroku account, if you don’t already have one.
  2. Sign up for a free Salesforce Platform Developer Edition (DE), if you don’t already have one. This will act as your own personal test environment. You should not use this tutorial with a trial, sandbox, or production org.
  3. Download and install the Heroku Toolbelt. This toolbelt contains the Heroku client a command-line tool for creating and managing your Heroku apps.
  4. Install Node.js from http://nodejs.org/.

Installing the Node.js Sample Application

If you want to test out the Node.js sample, it is very easy to download and deploy the application using GitHub and Heroku.

  1. Open your command line tool of choice and create a folder to clone the original GitHub repository locally:
  git clone https://github.com/developerforce/MobilePack-KnockoutJS.git
                
  1. Run the following on the command line
  cd MobilePack-KnockoutJS/samples/KnockoutBootstrapHerokuNode

Initialize a new git repository

To deploy the specific sample application to Heroku, you’ll want a local repository that is specific to the sample. Now that you are in the sample app directory, enter the following commands:

  git init
  git add -A
  git commit -m 'first commit'

Create a new Heroku app

Using the Heroku toolkit, it is easy to deploy a new application in the cloud. You are now in the main directory of the application you want to deploy, so you just need to login and create the application instance on Heroku. Run the following commands in the same directory where you initialized a new git repo.

  1. Log in to your Heroku account - heroku login
  2. Create a new Heroku application - heroku apps:create

Note: This will create your app name as a haiku like cryptic-atoll-9625. This will be your unique application name. You can find your application in the output of the create command:

  Creating cryptic-atoll-9625... done, stack
  http://cryptic-atoll-9625.herokuapp.com/ | git@heroku.com:cryptic-atoll-9625.git

If you would like to create an application with a specific name, add the name to the end of the heroku apps:create command, i.e. heroku apps:create yourapplicationname.

Create a connection to Salesforce

  1. Log into your DE.
  2. Open the Setup menu by clicking [Your Name] > Setup.
  3. Create a new Connected App by going to App Setup > Create > Apps.
  4. Click the ‘New’ button in the Connected Apps list.
  5. Fill out all required fields and click ‘Save’:
    1. Connected App:
      1. Node.js: KnockoutNodeMobile
    2. Developer Name:
      1. Node.js: KnockoutNodeMobile
    3. Contact Email: Your email
    4. Callback URL:
      1. Node.js: https://(yourapplicationname).herokuapp.com/#/callback
      2. NOTE: This must have an https:// secure URL and it must end with /#/callback
    5. Selected all available OAuth scopes
  6. From the detail page of the Connected App you just created, copy the Consumer Key.

Deploy the application

  1. Back in the command line where you created your Heroku application, create an environment variable for the application URL (for example, https://(yourapplicationname).herokuapp.com) and client ID (the consumer key) using fields from the connected app you just created:
    1. Application URL: heroku config:add app_url=[APP URL]
    2. Client ID: heroku config:add client_id=[CONSUMER KEY]
  2. Deploy the application to Heroku by running the following command: git push heroku master

Test your application

To test your app using the desktop browser, use the command heroku open. To test your app on a mobile device, navigate to the app with the application URL: https://(yourapplicationname).herokuapp.com.

I'm getting a "Client ID Invalid" error

When a Connected App is first defined in Salesforce, it might take a few minutes before the client ID is publicly available. It shouldn't take more than 10 or 15 minutes, and usually takes less than 5. If you see this error on the first try, take a quick breather and try again in a few minutes.
If the error persists, you can check the client_id value against the Connected Apps screen by entering heroku config in the command line. If they don't match (i.e. characters that got left off when copied) - you can re-enter the heroku config:add command to change the environment variable.

Next Steps

  1. Check out the Knockout homepage to find tutorials, examples, and read about documentation on how to implement this unique MVC (Model View Collections) framework.
  2. Learn more about Twitter Bootstrap and responsive design.
  3. Check out the Heroku Dev Center to learn more about how to manage and deploy applications using this cloud platform.
  4. Check out the developerforce website as your primary resource for all questions related to development with your Salesforce data. There are useful blogs and wiki articles you can reference here, as well as discussion boards, webinars, and other relevant content to help you hit the ground running with the apps you build.

Getting Started with Appery.io and Salesforce

Appery.io is a mobile platform that offers a cloud-based rapid development environment, integrated back-end services, and an extensive catalog of API plug-ins to simplify integrations with enterprise systems and other cloud based apps. It combines the simplicity of visual development with the power of JavaScript to create cross platform enterprise apps rapidly. This quick start tutorial demonstrates an app built using point and click tools as well as a series of plugins on appery.io platform. The Salesforce Contacts API Sample App plugin pulls data from Salesforce using the REST API.

This quick start creates a contact management app that provides basic CRUD access to the Contact standard object. Using this app, users can view, update, add and delete Contact records from any mobile device with a modern browser. Here are screenshots of the completed application.

Prerequisites

  1. Sign up for a an Appery.io Starter plan (free), if you don’t already have one.
  2. Sign up for a free Salesforce Platform Developer Edition (DE), if you don’t already have one. This will act as your own personal test environment. You should not use this tutorial with a trial, sandbox, or production org.
  3. If you are new to Appery.io, check out some of their step-by-step manuals

Getting Started with the Salesforce API on Appery.io

If you want to test out the Appery.io sample, it is very easy to build your first app on Appery.io and integrate with Salesforce. To begin you will need to login to your Appery.io starter account and create a new project.

  1. Once Signed in, from the Apps page, enter the app name: SalesforceMobileApp and click the Create button.

  1. When the builder loads, you will see the following Start page:

  1. Open the start page by clicking Pages > startScreen to load the UI designer:

Import the Salesforce Plug-in

You will need the Salesforce Contacts API Sample App plug-in for your mobile app. This plug-in includes the oAuth 2.0 capabilities plus a contact management sample application.

  1. In Appery.io builder, select Create New > From Plug-in
  1. Check the Salesforce Contacts API Sample App

  1. Click the Import selected plug-ins button
  1. When prompted to set the start page, check the check box and set the start page to SF_Start. Click the Apply settings button.

  1. When the plug-in is imported you will see all of the necessary files for the sample in the folder tree on the left. These include the imported pages, services, and one JavaScript file.

Configure the App Security

  1. The app setting file should be open. If not, open Services > SF_Settings service. There are two values we need to set
    1. client_id
    2. redirect_url
  1. To get these values, you need to create a Connected App in your DE org. Log into your org and navigate to the administrative setup. On the left-hand side menu, go to App Setup > Create > App:

  1. In the Connected Apps related list, click New.

  1. Fill in the fields as shown below (you can name the app whatever you like, and use your own email). Check the Enable OAuth Settings checkbox to reveal the selectable OAuth scopes.

  1. Before you can create the connected app, you need to input a callback URL. Go back to Appery.io and open the Test window. Uncheck the Show in mobile frame option and then copy the URL shown.

  1. Go back to your connected app and paste the URL into the Callback URL field. You need to make two changes to the URL before submitting:
    1. Update http:// to https://
    2. We pasted the start page but the actual callback page is called SF_Callback.html. Change SF_Start.html to SF_Callback.html

  1. Click Save to create the app. The app will be created and you should see the following section in the detail form:

  1. Take two fields off of this detail screen and put them into your SF_Settings tab for the OAuth configuration.
    1. Copy the Consumer Key from the connected app and paste it into the client_id value in SF_Settings on Appery.io
    2. Copy the Callback URL from the connected app and paste it into the redirect_url value in SF_Settings on Appery.io

  1. Click Save (on Appery.io)
  1. Navigate to Project > App Settings > General and check 'Render all pages in one HTML file (jQuery Mobile multi-page template)'

Test your application

Click Test button to launch the app in the browser.

I'm getting a "Client ID Invalid" error

When a Connected App is first defined in Salesforce, it might take a few minutes before the client ID is publicly available. It shouldn't take more than 10 or 15 minutes, and usually takes less than 5. If you see this error on the first try, take a quick breather and try again in a few minutes.

You should see the OAuth screen requesting permission to access your org data. Click Allow to view the contacts sample app.

Next Steps

  1. Check out this article on the Appery.io plug-in for building apps with Salesforce. It goes through setting the app above and then continues with an in depth walk through of how to modify the app for a different data model.
  2. Check out the developerforce website as your primary resource for all questions related to development with your Salesforce data. There are useful blogs and wiki articles you can reference here, as well as discussion boards, webinars, and other relevant content to help you hit the ground running with the apps you build.