Friday, December 19, 2014

Make realtime mobile and web application in minutes using Firebase


Real-time application are fascinating and comes with lot productivity, like if you see Google Drive real time integration or node base application, they are productive and offer wide range of implementations. I recently meat, Firebase team in Google Cloud Platform Live in San Francisco. I was surprise to see, how quickly you can make real-time application using Firebase, and recently learned that they are acquired by Google.

How easy is to make real-time application ? 
Making a real-time application is still tricky and require lot of coding, and powerful architecture to sync data back and forth, Firebase resolve this problem for us and offer three-way data binding to us.

What is Firebase ? 
Firebase is an API oriented service that store and sync data in database real time. With that it mean, you don't have to worry about your server, database, or real-time components. Firebase manage that all for you. With the API provided, you simple retrieve or push data to Firebase and it will take care of saving and syncing data to all connected devices and applications.

Future Prospects of Firebase ? 
Google recently acquired Firebase and more likely be offering Firebase features pretty soon . Google has a history of integrating the services it acquires for Cloud Platform rather quickly. I am expecting a tight integration with Google Cloud Platform which is will power instant real-time data integration and synchronization, it would be interesting to see, how this will take shape and Google Cloud Platform offer number of services already, so clearly this will be powerful and promising integration of technologies

Let us get started, create an account on Firebase and click to create a new application, like I created application name Oyecode, shown in the picture above. Once you create an application you can see that its fairly easily to define your data structure as the data stored as key values pair, pretty similar to Couchdb and Mongo.

Firebase store data as key-value pair, so once you populate the data, you can see your data in the wizard, as shown below

Building Real-time, Responsive Application only with HTML and JavaScript

In the video below, I am explaining how quickly you can build an application using simply HTML and deploy on Firebase platform, I have explained the code in the embedded video here. As we know that talk is cheap, and developers want to see code. Below is the code and live application, feel free to edit code live here on Codepen

To play with live hosted version : Go to Firebase Hosted Application
See the Pen raLpKb by Harshit Pandey (@oyecode) on CodePen.

Check the video below, explaining how to built this application 
Once you built an application, simple you can install Firebase Command Line Tool to deploy your application on Firebase cloud hosting services. Type in this command on your command line


Check out the application in action

 Check the video below,  where I demonstrated the real time behavior of the application

Further References :
Firebase Docs 
Firebase Samples 

Tuesday, November 25, 2014

How to make Salesforce1 Mobile Apps in Minutes


In this mobile first era of software development, making an mobile app powered by enterprise data is still not a smooth process. Salesforce offered variety of tools to make power packed enterprise applications, last year Salesforce released mobile packs, dedicated for most of the popular libraries, offering jump start to developers coming from varied platforms.

Web components on the other hands offer promising future, and have fundamentally changed the way developers think of application building. Google Polymer have done wonderful job of offering framework to built components. At salesforce, mobile sdk team took early lead and developed Mobile Pack for Polymer.

Who are working on web-components ?

Major of known companies, are working on building components driven frameworks,  Salesforce released Lightening Framework, which is based on Aura project offer components driven development pattern.  In Dreamforce' 15 +Samantha Ready at Salesforce had showcased, leading frame works in the picture below.

Mobile Pack for Polymer is offered with Polymer Designer tool, this tool host all components that mobile team have built, and can be easily assembled to make mobile apps in minutes, you can toggle from designer to see the code behind. In other words, you can easily build mobile application by dragging dropping components,  in a mobile designer fueled by Salesforce data, this experience was never so easy.

Recently, I spoke at Google workshop for Polymer called ItsHackademic in Mountain View, CA.  I presented our work at Salesforce. To our surprise, it turn out, that we at Salesforce, have done one of the best implementation of Web-components. As Google quoted us in talks,

"Salesforce have radically changed application building experience of mobile apps just by web components, like no other"  - Google 

I have written about this library previous post here, but today ,I recorded a video demonstrating, how easily you can built an application by components re-use them to add more values.

The video below takes you to the journey of building a Salesforce powered mobile application and I'll explain here how to make Salesforce 1 mobile Apps in minutes. You can re-use this component to pull data and create more components on top of it, not just mobile but can be web.

Make web applications by reusing components 

I took data-component, shown in video, at added Javascript library called Amcharts, to populate charts with data. Check out my another library here demonstrating, how to built visually appealing and responsive (mobile ready charts) in minutes here on official Salesforce blog.

Google Polymer with Salesforce

Check out presentation slides below, for lightning talks covering only highlights not full presentation coverage

See the Pen NPrxbw by Harshit Pandey (@oyecode) on CodePen.

Sunday, November 9, 2014

Learn how to use Salesforce Communities Designer for Self Service Portal


I have worked with +Mohit Srivastav  while writing our last post on Angular Js with Salesforce, after Winter'15 Salesforce release, he decided write another blog post here and connected with me to coordinate resources and I would like to thank him for taking time out of his schedule and like to congratulate for winning 'Summer of Hacks in India', follow him on his blog 'CloudyWorlds'

Salesforce community portal have been in use for long time, but was limited in offering pleasant features and specially custom configuration. To introduce as new feature, lot of additional works needs to be done, both from development and design perspective, which include using HTML, CSS and Javascript on top of Visualforce. 

Clearly powerful user-experience and clean user interface adds high user engagement. In person, we have spend weeks to leverage an impactful customer experience with Salesforce Communities 

Salesforce introduced community designer and have fascinated me in person, I have been working on this platform for about three year, and I find this tool be very productive. I teamed up with +Harshit, and decided to write this blog post here explaining how to create google looking customized community portal with 'No-Code' by using Salesforce Community Designer Tool released in Winter'15.

To explain a functionality, I am choosing a business scenario, covering business activity in an financial institution, and covering mundane activities like resolving credit-card/loans issues. My objective is to explain this all with no-code, and just deal everything with 'Point and Click'. 


1) Let us set up a new developer org . spin up for an org from salesforce developers home

2) If you are not familiar with communities, we recommend reading this setup guide here .

3) Knowledge articles is the soul for this whole set up. Get some coffee and go to this setup video here

Having installed Prerequisites (Note : three of mentioned resources, are mandatory) , we will look up Salesforce Community Builder and Templates, to set up Self-Service Portal

Navigate to Set up>Communities>All Communities

Note : As shown in picture above, two new additional setting are introduced as  ‘Administration Settings’ and ‘Community Management’

Salesforce Community Templates 

Primarily, three important templates available to jump start, but I would like to share the amenities, each templates offer, and make choice easier for you.

1) Kokua - Uses data categories, case and Salesforce Knowledge.
2) Koa- Designed for Mobile, features include, articles search and case management.
3) Napili- Offer most features, with Q&A, Knowledge Articles and Case Support. Clearly, I’ll use this template moving forward

Pickup template of your choice, In here, I have created a community named ‘FunCommunity’ as you can see in drop-down,

Setup Navigational Topics 

Got to Community Setup shown as above and you will see salesforce settings screen similar to
one shown below

Bind Topics 

Go to (Setup -> Topics -> Topics for Objects) to bind topics to every knowledge article. Clearly, this make it easier to locate or navigate in the community

Screen shot below explains, how to add banner images for each topic. I have created three topics for here to demonstrate, Credit Card, Debit Card and Loan Processing

Assign Data Category

Locate arrow on top-right, to assign data-category for each topic, in the picture below

Featured Topics

Every featured topics, pop as thumbnail on homepage, add feature topics here

Video Summary 

With that said, community is configured and in shape, this has all done with  'no-code' involved. I have compiled these steps in a video below and discussed some more feature(s). Feel free to provide us feedback and share your knowledge with us.

Multiple ways to use REST API with Salesforce


REST API is much more popular architecture for connecting/integrating systems and communicating with the help of exposed methods . Salesforce had launched tons of API in last couple of years, so as opened opportunities for people to connect data in multiple ways.

I am trying to sum up some guidelines and tutorial (not everything) but many things, this is the collection of methods/process that you developers can use to play with REST API's specially focusing development. The idea behind this post, to collect rest resources together at one place for developers to chose from. 

For the most of the method I am discussing here, I am using OAuth2 protocol to connecting systems. Let's jump start by logging in to your Salesforce org, create a connected application, you can keep the callback url as provided (default by salesforce) it varies based on implementation, explained here and summarized in my previous post(s)

How to Access Salesforce REST Api using Curl

Curl is client URL request library, the allows you make REST calls through developer console in Window/Mac. Now to understand how to access any salesforce API with curl, check out this post here

Salesforce REST API using Chrome Developer Console

Once you login to Salesforce, here is the another post sharing, how to access Salesforce REST API using Jquery through Developer Console 

Salesforce REST API with Google Chrome

Salesforce REST API using Node.Js

+Christophe Coenraets  has written 30 lines of code post using Node.js to make REST Console Editor for self, check it out and then I added my bit on top it to make SOQL query basic editor using REST API, don't forget to check +Jitendra Zaa post on building Node.js SOQL query builder here

Salesforce REST API using Node.js

Using the Toolkit in an HTML page outside the platform via Forcetk Library

+Pat Patterson wrote simple implementation using RemoteTK on a visualforce page, check out his git repository here 

Salesforce REST API using JSForce Library :

JSForce is one of the most organized library I came across written by my friend +Shinichi Tomita and former salesforce employee who founded MashMatrix, here how to integrate here 

Using JSForce with Salesforce | Oyecode

NGForce : Library on Javascript

Powerful javascript library written by +Kevin O'Hara , check out this amazing video here

Built your own API using nothing but Apex

There are few use-cases and scenarios, when you need to expose you salesforce method to post and return back data, which can be exposed out to world as REST Endpoints, can using Salesforce standard REST architecture and OAuth (1&2) patterns, you can communicate with enterprise data. 
Learn how to built your own REST api using Apex here

RESTForce Gem for Ruby on Rails 

Simply neat and powerful that I have used and very lightweight alternative to databasedotcom gem for Ruby Guy and use Rails. Easy to access data, here are few snippets, to get started read amazing tutorial written by Bruno Fagundez  on RestForce here 

How to built ForceServer?

Well, don't forget the checkout my favorite evangelist amazing post here at Salesforce +Christophe Coenraets on building local server to streamline oAuth and REST Services with Salesforce

Using REST API to connect Google Docs with Salesforce

Learn to built Google Script, and connect Salesforce Platform, pull and push data by writing Salesforce from Google Script Connecter I wrote,  learn to built script that connects with Salesforce using REST API and push/pull data on a Google Drive Spreadsheet here

Saturday, November 1, 2014

Using Yeoman Generator for Google Polymer


Building polymer components is quick and easy,  but managing components still require standardization and alignment. To provide a scaffold to application/component, team at Google built scaffold tool called 'Yeoman' and dedicated CLI tool for multiple technologies including Polymer. Yeoman is powerful scaffolding tool that not only streamline components development process,  but also provide a structure to development process, which enforces best practices.

What does it do ?
With a set of commands, Yeoman compile required resources for you and you can skip lots of manual setup . Yeoman is designed to handle configuration and accumulate components for development and  clearly minifies the pain of maintaining minor configurations and making it easy for developer to focus more on application logic

What does it have ? 
Primarily its a combination of 'Yo' which is scaffolding tool,  'Grunt' task manager and 'Bower' a powerful package manager. So clearly with few set of commands, you can built scaffold, download files and test/build/serve it easily

Getting Started with Yeomen 

To get started with Yeoman Generator for Polymer, I would like to share the video shared by +Rob Dodson where he have explained the steps to configure Yeoman and create your polymer components.

Read more about Yeoman here and go here for instructions to install on your machine and here for finding list of Yeoman generator for other technologies that may interest you

Tuesday, October 21, 2014

Trailhead | A learning path for Platform

Trailhead : A new learning path for platform

In Dreamforce'14, our team of (developer relations) launched Trailhead. Trailhead is designed to align the salesforce resources, which will streamline the learning process and at the same time provide a defined learning path for developers start learning platform.

Salesforce have offered resources through youtube, blogs, workshops, elevate conferences, meetup and many more ways. But alignment of resources was still needed to be done. In the project Trailhead, Salesforce have developed the power packed content that comes with challenges and these challenges can be taken in your personal 'development org' or dev edition. Trailhead check the work done by you, by querying against your organization and clearly offer a brand new experience of learning and doing work at the same time.

Trailhead also offer a  profile page, which is your Trailhead profile, that beautifully presents the work done by you and showcase your the badges you earned or awarded to you. Your Trailhead profile could be public or private depending on the choices of your preferences. Trailhead profile showcase the medals/badges earned and certainly add lot of authenticity your 'Salesforce profile' besides your Salesforce Forum Profile

Trailhead offers  multiple Trails where each Trails is defined learning guided path, each Trail further goes deep down in the Modules and then to Units. A units may or may not have a challenge, some units require reading the text, while most of them have a challenge to take.

Primarily, Trails have two broad categories, Salesforce Administration and Developer with platform, later likely more Trails would offered as it grows. My team have done amazing job of offering guided path for all developers around the globe who are excited about the technologies and wrote a brand way of learning through a gaming experience and the profile building at the same time, without hopping for distributed resources. 

I strongly recommend existing users, new comers and MVP's to try out Trailhead and spread the the words to help people all over the globe. Don't forget to share your work with your Trailhead Profile

PS : Image Credit Inc

Monday, October 13, 2014

Building Bootstrap Table using Google Polymer with Visualforce


Component driven development is the hottest trend in the market and many company are approaching towards it to take an early lead. Lightening is launched today at Dreamforce , while Google have Polymer,  Twitter opened up Flight Framework, Facebook with React and Firefox with Brick. So clearly web-components are the future.

To understand how the framework better, I wrote couple of blog post about playing with Polymer framework by creating video component while other on using Salesforce Polymer Pack.

After writing post, I worked +Akhilesh Gupta  +Lauren Grau +Martin Meyer  in our team on an internal project for developing analytical charts. Developing charts, involves understanding charts libraries writing code to process data and therefore, I wrote a official post about using Google Polymer with Salesforce to built fascinating charts

+Avinava Maiti author of amazing bootstrap driven visualforce component library called VisualStrap have teamed up and we wrote another components while playing with components. We decided to use Bootstrap with Google Polymer in Visualforce and wrote another table component that let you change the attributes easily and plugin salesforce data with it.

Using Google Polymer with Salesforce to generate Bootstrap Table Component

In order to generate bootstrap tables, just link this table components to a custom/standard object to pull data. In the code below, I am trying to pull fourteen (14) contact record and listing selected fields and marking them as success (which turn the table green in bootstrap).

You only need a line of code to do all this magic

Implementation :
To implement table components on page, refer the PolyForce library for instructions. After install the package listed on library, add the datable components on any to show up on the page

Source Code :  Source code for this component can be downloaded from here

Saturday, August 23, 2014

Start building your own REST API in Salesforce using Apex


What is the need ? 

Salesforce platform is amazing and its lets your create your own lightweight  REST API using Apex. You can use this REST API to access data, by authenticating the caller/consumer of API using standard oAuth and return data format support JSON/XML, purely depends how you want return back the data

I personally call this concept as custom REST web services to make it sound simpler, but how different is the REST API than a web service ? Well, the edge of using building REST API over web services is that, API enjoys pleasant features of REST architecture which is object mapping which mean that REST reads the data-tables (data model) for you and supports object mapping, that is actually the (process of transforming data in one form and transforming into other), so you once properly authenticated, you can access data through URL.

REST in apex supports basic CRUD (create, read, update and delete) operations, to create rest API of your own you need to define the set of operation that is supported over http. After writing REST API we can enjoy the full support of REST behavior.

To declare the rest API, first step is define the endpoints, you can define a class as endpoint, which in other words mean this class is exposed as a web service and can be accessed through a url for the authenticated call.

Lets create a connected application on the first step to make an authentication for requester. Go to Setup and create a new connected application, as shown in picture, for now lets give full access to requester

Connected App

Apex Endpoints :

Lets define the Apex endpoint, basically the address which we call from the url, for demo the Apex Endpoint here is Oyecode, so lets create a class with the name OyeCodeController and that perform two operations

1. Create a contacts
2. Pull back the contact, if provided with Id

Here is the Apex Endpoint

Lets create special class that handle response you receive from API called ResponseHandler, this allow use to drive the information which we want to return back once API is requested.

I am defining ResponseClass with five attributes

Now clearly our response class will look like this

Once we have structure ready for API response, lets start carving class that use response.

In this example, I am performing the two basic operation with API  '@HttpPost and @HttpGet' so I am creating two separate methods for handling operation here

Below is the @HttpPost Method to create new contact

Here is @HttpGet method to retrieve contact by Id

So clearly, I wrote custom methods on top of this retrieve contact using SOQL and inserting a new records, here is full blown view of our freshly built API

Accessing API

Lets start using the API we just built, there are multiple way you can access API but easier way is using curl (which some folks may not like it) but I have written a template code here that can be reused to access Salesforce API

Testing  : @HttpGet

Curl Command to generate access token through connected app using command line tool, to generate your curl command check this post 

On sending the request using curl or hurl you see this response on matching id on other favorite rest client

This is how simply you can create a custom API in Salesforce and I recommend reading these post as well for more details

1. Apex Rest on by Peter Knolle
2. Building Rest API by Jeff Douglas

Saturday, July 26, 2014

Google Polymer | Create your first custom html tag in minutes

I have been writing about polymer since two weeks by now, I gradually started developing my own components and decided to share my experience working with polymer. I would like to share how to make a simple but working custom polymer element and consume it. Before moving further, if you want to see what Salesforce had built on already on Polymer than read my post here and here 

Why Custom Elements ? 

Custom elements lets the author of code design their own custom tags like for example if you want to embed youtube or any other side video on a page you can simply do
<video-frame url=''></video-frame>
and one line code will result in this

How to build this ? 

To get started lets built a simple application that use custom tag we will built here, but to run this you need bunch of dependencies like polymer.html and polymer.js files. To download this, we will use bower package manager.

I prefer mac for most of my development, these commands are supported on apple.

Install bower as package manager that pull and saves all the related dependencies for you in one place.

Create  new directory/folder on your machine and through command line/ shell navigate to directory. Type in the following commands (like I am doing after navigating inside Oyecode_Polymer) directory
$ bower install  
$ bower install -save polymer 
You can install polymer in one line using bower with just two commands above. Having run this command, now create a new html  file called myelement.html. Copy paste this content in your new html file.

This is how my directory look like 

Lets create our first custom defined html tag or polymer element in other words.

<!-- Define element -->
<polymer-element name="video-frame" attributes="url" noscript>
  <iframe width="560" height="315" src={{url}} frameborder="0" allowfullscreen></iframe>

Remember this element uses javascript, if you do not want your element to start a script you can added NoScript tag like this

<polymer-element name="my-element" attributes="counter" noscript>

Let us use this custom tag by adding to html page. On render, this tag will result in html button which on click will increase the counter by +1 based on what attribute value you provided to the element. Remember, this example is officially demonstrated by Google.

<!-- Use element : Adding four videos-->
<!DOCTYPE html>
<script src="bower_components/platform/platform.js"></script>
<link rel="import"  href="bower_components/polymer/polymer.html">
<link rel="import"  href="bower_components/video-component/videoframe.html></head>
<video-frame url="//"></video-frame>
<video-frame url="//"></video-frame>
<video-frame url="//"></video-frame>
<video-frame url="//"></video-frame>

How to run the project
  • using cd command to go your directory like  $ cd ~/Desktop/Oyecode_polymer 
  • type in python -m SimpleHTTPServer to start server

Python 2.x:
python -m SimpleHTTPServer 
Python 3.x:
python -m http.server 
Test out the web server by loading the finished version of the project. For example:
Here is the output 

Press increment button to increment the counter, and you see once you have element ready, just in one line of code, you create a button, with counter displaying number and changing on click. I wrote couple of more element and have been explaining more in upcoming post about developing elements and event handling to achieve more awesomeness

Fork my repo here on harshit branch and jump start  here

Sunday, July 13, 2014

Try any Salesforce API quickly with Curl command templates

Working with tons of application here at Salesforce, I got a chance work with wide gamut of internal and externally exposed API's. Over the period of time, I developed a curl template, that I used in command prompt or Mac terminal to consume api in no time. I treat this template as my key resource to connect to Salesforce api's in matter of minutes and then move on writing code in more proper fashion for designing the client.

Create a connected Application in Salesforce 

To understand the templates better, go your salesforce org, login and create a connected application in 
   'Setup -> Apps -> Connected Apps' 
Grab the Consumer Key and Consumer Secret after creating application, save them, before we move on. Now we can use these credentials to authenticate the api-user and get API Token, once we have API token the last step would be to access the API to pull data we want.

Download curl here for (windows and mac)

(1) Curl API Authentication Template - for Salesforce API Authentication 

Copy this code snippet shown below in sublime or your favorite text editor and replace with your login credentials (consumer key, consumer secret, username, password) and then paste the template on command prompt in mac terminal to receive the API token in the response from REST API. I used Iterm mac terminal in my machine. Once your post the request, then see if, the response you get after posting, matches with the one shown in this snippet here.

I'll use this authentication and data-access curl template for two of the popular salesforce application programming interfaces, Salesforce Analytics API and Salesforce Tooling API

How to get started with Salesforce Analytics API ?

Awesome, so we have the access to API now, lets us kickstart with Salesforce Analytics API and pull a report details, salesforce analytics api can be used to bring all analytics of transaction you made on top of salesforce, lets say you want to represent data by pulling from a Salesforce report in form of Chart/Dashboard based on javascript, you can use Analytics API to pull data.

Jump in here on documents for Salesforce Analytics API (using REST) and  have a look how you can pull the report metadata  by providing the report Id. I created a matrix report on Opportunity and I'll use the report ID to pull metadata of this report. Remember the response would be in the JSON format.

Reading docs, it clearly says you can pull data for this matrix report by requesting Salesforce analytics
Api in the url format shown here

This GET request, /services/data/v29.0/analytics/reports/00OD0000001ZbP7MAK/describe, to the Describe resource returns metadata for a matrix report. This includes a bucket field, groupings, summaries, and a custom summary formula.

(2) Curl Data Access Template - for accessing data from Analytics API

Replace API Token with your token and run this command prompt again like I did here in the picture.

Bingo - you get the JSON body response, you are ready to rock now

Copy paste and go to JSON beautifier to beautify the response from this junk this format to beautiful looking JSON response like here

Brilliant, we did it !! Now let us create new connected application to pull data from Salesforce Tooling API. Now, I am going to pull the 'list of all sobjects' but with tooling api.

How to get started with Salesforce Tooling API ?

Tooling API can be used to retrieve meta data information about salesforce elements, like finding the code coverage of the class, list of objects and all meta-data of salesforce structures. You can use this api to modify existing salesforce tools : Read more about Tooling API here 

Lest get the list of SObjects in my current Salesforce org. Now, to get the list of sobjects in your org, you need to pass this params in the url
Lists the available Tooling API objects and their metadata.

Brilliant, using the 'Template (1)' as shown above, I replaced my credentials again I replaced both consumer key and client secret' by creating a brand new connected application from scratch

Lets Authenticate using Login Template

Now once you get API token, lets query Tooling API by through this url
Result is exciting

Sooner, I'll share the sample application I built on top of Salesforce that uses salesforce and remote objects to pull data plugging into API you needed. I hope this template will helpful for you in playing and spreading Salesforce API love all over world and among the community.

Sharing is Caring