Building Force.com SOQL Query Tool with Node.Js - Part II

If you have read my last post on ' Getting started with Node.Js ' then its the time to move on to next post on building cool application on Node.js by integrating to Force.com platform. My application is inspired and supported by code-base shared by +Christophe Coenraets (Developer Evangelist here at +Salesforce )where he posted a neat article on building API explorer on Node.

I forked the idea, revamped my logic and complied to create a SOQL Tool on Node.js which turn out to be couple of hours hacking

Lets +Keep Calm and Carry On Hacking.

Download my repo at - Force.com with Node.js to get started 



Create a connected application by going to setup->app -> new connected app. Name you application and keep call back url as http://localhost:3000/oauthcallback.html

Since we will be hosting the application on localhost:3000, on success we return to oauthcallback.html page which stays in the directory provided in the github repository.

Once you create the application - you receive the client ID auto generated which you need to copy on the app.js file as shown here


After successfully creating the application, you see the client_Id add the client Id to app.js file here

Follow the instruction shown the video to run the application successfully on your machine.

Node.Js with Salesforce | Getting Started with Node.js - Part 1

Node.Js with Salesforce | Integrating Node.js with Force.com Platform 


This post is divided in two parts, this part is all about learning and getting acquainted with Node.js and next post, ill talk about connecting force.com with Node.js and making an real time application Node.js

Quite a few people asked me this question, do I need to learn Node.js as Salesforce developer and my answer to them is yes and no. This is actually purely relative question and clearly depends on type of implementation you do with your application . I had spend quite some good time meeting with +Sandeep Bhanot  at Salesforce HQ discussing these topic.

What are the Prospects ? 


With an understanding of Node.js, you will be able to develop real-time, fast, scalable, data-driven web applications, and you will have the requisite knowledge to quickly adapt to any of the emerging, cutting-edge JavaScript frameworks such as Derby.js and Meteor.js.



It is worth noting that unlike just a couple of years ago when you needed to know a true server-side language (such as PHP, Rails, Java, Python, or Perl) to develop scalable, dynamic, database-driven web applications, today you can do as much and more with JavaScript alone.

Lets see in more details , what is Node.Js and how I am goona use it. You may find, lots of resources for learning Node.js but I got my most answers resolved over here  at CodeSchool

I always prefer video over text to get started and once in, documentation reading and understanding is smoother, if you are same type then check out these two cool videos to jump in

What is Node. Js by CodeSchool hosted at my account

     

Node Tutorial Series by Pedro

My Node.Js - First Application 


I made a sample Node.js application that you can download on your machine. I made a demo video, see the video and follow the instruction to run this application. This video explain, how to install require packages and run the application.

Also, later half of this post will be more focused on connecting the application force.com with Node.js and querying Salesforce. So stay tuned for second part of the post, which is in process

Meantime, try this application, this application let you type your favorite color in the text box and changes the background color the background as you type.



Apex Messages in Salesforce | Show Messages in an easy fashion

Apex Messages in Salesforce are used in displaying messages in standard visualforce pages, unless you are not using the cool frameworks like BootStrap or FlatUI, where you show error messages in a neat fashion.

Before we move on, I would like you go through Apex:Severity messages to see what type of severity can be shown on pages and how are they displayed on pages.


I designed a simple code snippet that handles all sort of apex messages on visualforce pages at one place for you, you can re-use this code at any point in any custom class and show messages in convenient way.

Ideally this is how you show error messages using Apex 

Now I designed a PageHelper class that handles many things but include method that shows the message in modular way, so all you care is calling method with name and pass on message to display on page.

You can call these method by simply calling
PageUtlity.showError('No Record Found');
PageUtlity.showWarning('No Record Found');
PageUtlity.showSuccess('Record Found');
PageUtlity.showInfo('You know how to search');
Lets say, you have a page, which is plugged in to custom controller, the page has search box to search for account,if user find a matching record, we will show success and if not then we show error message, clearly this is how you add the messages login in your controller


Below  is a sample message on success, you add this util class to your project and make your life easy when-ever you want to show error messages moving forward


Search Youtube in Real Time with your Voice




I was working on something interesting since last two weeks and have developed an application that search youtube in real time (meaning search as you type). It was fun, understanding how the different it feel watching youtube through new way and search data real fast. All fun started with a hack, I was doing with jquery to tweak a salesforce application, which triggered idea of real time search with video server and youtube is one single place to look for. 


After developing first prototype, I added voice search to it. It was relatively easy to add voice search to search box using webkit (only supported in latest browser). After finishing the whole application, it turns out to be real fun, specially understanding the UX this application leverages.

End of the day, it feel like as an end-user, you just say to youtube and youtube plays the video for you. The application is not completed yet and is in beta phase. I understand that my designing sense is not the best, but have a working application ready in a night hack was more than awesome feel

The code is not shared here as the application is early design phase, but I have made a quick video randomly last night, demonstrating the application 



                   


Gapminder - Integrate animated Graph and new User Experience in Visualforce

I am always a big time fan of data visionary Mr.Hans Rosling, a great statistician who have been presenting for years in TED Conferences. I came across and meet him last time in TED Conference in Austin, TX. After watching this video in the conference, I was deeply fascinated on how data can be presented in story telling way. 

His demonstration of GAPMINDER, the stats software, that he designed, had triggered a thought in me, to somehow plug this  application with Salesforce.com and then present the business data on top of it. I always wanted to see the experience this application can leverage to business as story. My only issue was, that the, GAPMINDER was paid software and wasn't easily available through API

Google solved my problem, they bought GAPMINDER and google made this frame available through their Google Visualization API, which was my piece of cake I was looking for.

I today plugged and played with API and nailed in no time. Check out this demo video of Google Visualization Motion Chart that I designed with Salesforce. In the graph below, I have plugged in data from the backend using Visualforce remoting and pulled Opportunity and Probability and populated the graph for couple of records. This video demonstrate how the probability on Account changes with time as a storytelling, though, I am not a good storyteller but when you populate this graph  with a good and healthy data, then you will realize that,  the graph just sings.

*Note - I am now using Visualforce Objects and Removed controller after publication of this post and have edited this post. Now we no more need Apex controller for all this magic to happen.

So here is the Google Animated Charts purely with Visualforce Objects and works with Spring 14 release (require no object remoting and apex code )

Notice two code snippets, one shown in the video, I used javascript remoting and while after recording I improved the code and make it work in Visualforce Remote Objects 

If my voice doesn't sound clear or may go wacky, then my apologies, my mic is little jacked up as well :-)



After recording this video, I modified code and pushed it to github, you can pull both the code from repository, one with Visualforce Remote Objects and other Javascript Remoting, if you are not aware of the Visual Remote Objects then check here

Fork Github Repo at here

Google Motion Chart - with Visualforce Remote Objects (No Apex required, just copy paste to run)

Google Motion Chart - Page with JavaScript Remoting (as shown in video above)