Realtime EarthQuake location and magnitude finder – Using Visualforce, Angular, Bootstrap, Google map and Geonames API

This blog post explains how to get information about earthquake locations on Google map with magnitude and date. If you want to learn how Angular works, how integration using REST API works, then this example will guide you in right direction.

Components :

  • City Search box – You can search any location on planet. Google API is used to locate this location in Map component. If more than one location found then internally it automatically displays first location.
  • Google Map – This component displays location in Map. Earthquake locations are displayed as bubble. Earthquake magnitude and time is displayed on tool-tip. You need to get your API key so that Google Map will work with your code. In this demo, you will find my API key however I would suggest not to use it as it may run under limit usage
  • Largest Earthquake in 12 months – This application uses geonames.org website. It hosts publicly consumable web services. One of the important part of API is that it needs four direction bounds and Google Maps API is one of right candidate which provides these values and can be used with geonames API. You can see how Google and geonames both works together in below example.
  • We are not using any Apex controller because Ajax library from AngularJs is used to call webservice and JSON is extracted and displayed on UI by using Angular.
  • Do not forget to add Google and geonames URL in remote site settings so that Salesforce should be able to communicate with these external websites.
  • I have used Bootstrap as well to make user interface more intuitive

Continue reading “Realtime EarthQuake location and magnitude finder – Using Visualforce, Angular, Bootstrap, Google map and Geonames API”

Getting started with React

Author posted by Jitendra on Posted on under category Categories Web Technology and tagged as Tags , , , with Leave a comment on Getting started with React

React is open source Javascript library used by Facebook and currently very popular amongst web developers to create user interface. React can be used as View part of MVC design pattern with powerful templating feature supported by “JavaScript syntax extension (JSX)“. React focuses on component based development where each components has its own life cycle. Once of exciting behavior of React is its unidirectional data flow from Parent to child components. React is different than AngularJs in such a way that React passes data in unidirectional however in angularJs data must be available to $scope variable (bidirectional binding). Reusable components in AngularJs should be created as Angular directive however in React every component can be reused.

React Javascript library by Facebook
React Javascript library by Facebook

In this article, I will show very simple Hello world program using React framework.

<html>
	<head>
		<script src="http://fb.me/react-0.13.1.min.js"></script>
		<script src="http://fb.me/JSXTransformer-0.13.1.js"></script>
	</head>
	<body>
		<div id="main"></div>
		<script type="text/jsx">
			var HelloWorld = React.createClass({
				render : function(){
					return (
						<h1> Hello World</h1>
						);
				}
			});

			React.render(<HelloWorld/> , document.getElementById('main'));
		</script>
	</body>
</html>

Output : Hello World in h1 tag. Continue reading “Getting started with React”

How to use PostgreSQL in Nodejs

Author posted by Jitendra on Posted on under category Categories Node.js, Web Technology and tagged as Tags , , , , , with 8 Comments on How to use PostgreSQL in Nodejs

I have written many articles on Node.js and AngularJs. In this article, I will demonstrate how to use PostgreSQL with Node.js and deploy on Heroku. I think you already smelled that this is one of starting article which will finally merged with Salesforce to create some cool application.

Assuming you already have some background knowledge on Node.js and Heroku, If not please visit previous articles of this blog or my Slideshare account. Using Angularjs is totally optional and you can use library like JQuery or plain JavaScript.

To connect PostgreSQL, we need “pg” module.

PostgreSQL in Node.js
PostgreSQL in Node.js

Continue reading “How to use PostgreSQL in Nodejs”

Creating Salesforce Query Builder in Node.js and AngularJs using Salesforce REST API and OAuth2 with Heroku Button

In this post, we will be creating a Salesforce Query (SOQL) Builder. It uses Google’s Angularjs MVC Javascript library and REST API provided by Salesforce. For Authentication, it uses OAuth2.

Node.js is used as a primary language and hosted on Heroku. If you want to directly deploy to your Heroku Account, You can use Heroku Button on this Git Repository.

We have many tools available online for Query builder, However none of them were satisfying me so though to create my own tool.

This Node.js application is used for building SOQL with following features :

  • Toggle between API name and Label Name
  • Search Objects or Fileds needs to build SOQL (In my case, it was primitive. I had more than 70 Objects and many of those objects has 300+ fields)
  • Checkboxes to select fields (No need to hold control button to select multiple fields)
  • Automatic Query Builder at Right side of page
  • Shows API count used by application
  • Search returned records
  • Sorting on Table Headers
  • Pagination

Note : You will need to create “Connected App” in Salesforce to allow OAuth as explained in this post.

Live Demo of application

Continue reading “Creating Salesforce Query Builder in Node.js and AngularJs using Salesforce REST API and OAuth2 with Heroku Button”

Ajax based AutoComplete / TypeAhead Directive in AngularJS

Previously we already discussed below Auto Complete components:

  1. Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net
  2. AutoComplete Component in Visualforce using JQueryUI

In this article, we will be creating TypeAhead Directive (Auto Complete) again in Salesforce However this time we will use AngularJs. Why we are using AngularJS ? We discussed already in one of article.

Getting Remote Data in JSON format using AJAX from:

To get data from remote source, we are using same code “Visualforce Account_JSON” and “Controller AccountJSONCreator ” explained in this article. Only thing I have added in wrapper class is ID field.

Other than AngularJs, we are also using Bootstrap in this article to make slick UI.

TypeAhead Demo using AngularJs
TypeAhead Demo using AngularJs

Angular Directive :

Directive is great way of declaring your own component and re-use throughout page. write once and re-use every where. Our directive will look like : Continue reading “Ajax based AutoComplete / TypeAhead Directive in AngularJS”

Pagination, Searching and Sorting of Data Table using AngularJS

We have already discussed “Basics of AngularJS” and “Simple Searching and Sorting“. In this article, we will add Pagination feature also to our previous example. What makes difficult is Sorting result when values are returned from Search and pagination is enabled. Unlike previous post we cannot use standard “OrderBy” filter provided by AngularJs framework, this time we have to create Javascript function inside Controller for Sorting purpose.

Prerequisite Libraries :

  1. UnderscoreJs
  2. Bootstrap CSS
  3. AngularJs

This post used “Custom Service”, so please read this article to understand Dependency Injection in AngularJs.

Searching Sorting and Pagination in Table using AngularJS
Searching Sorting and Pagination in Table using AngularJS

Continue reading “Pagination, Searching and Sorting of Data Table using AngularJS”

Dependency Injection in AngularJs

In this series, we have gone through many articles on AngularJs. This time I will discuss about Dependency Injection in AngularJs .

Dependency injection is a software design pattern that allows the removal of hard-coded dependencies and makes it possible to change them, whether at run-time or compile-time.

Before going to DI first we have to know about Service.

What is Service , factory or Provider in AngularJs?

They all are same, with different way of writing. This (Singleton design pattern) defines dependency between your controller and View through application.
We can Inject a service in Controller, which will watch over changes automatically and change its View as per required.

We have many inbuilt standard service available like $scope, $filter. All inbuilt services in AngularJS starts with this sign $. In same way we can create our own custom service and then inject in Controller. Continue reading “Dependency Injection in AngularJs”

Table with Sorting and Searching using AngularJS

I hope, from last article you got basic information about AngularJS. This time, I will demonstrate how to add basic Searching and Sorting capability to data table using AngularJs.

Output will look something like this :

Searching and Sorting in Table using AngularJS
Searching and Sorting in Table using AngularJS

Prerequisite Libraries :

  1. UnderscoreJs
  2. Bootstrap CSS
  3. AngularJs

Continue reading “Table with Sorting and Searching using AngularJS”

Getting Started with AngularJs

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags , , , , , with 2 Comments on Getting Started with AngularJs
AngularJS by Google
AngularJS by Google

AngularJs is most accepted MVC framework in Javascript developed by Google. In my point of view, If its developed by Google then there must be something new and unique about this library. It can be used to provide MVC architect to your web application. It has great developers community, so if you are stucked somewhere while using this library, you will have tons of supporters.

So what is so special about this framework, other than its developed by Google ?

  • Unlike Backbone and Ember, You don’t have to spend time on Event Handling (Bind, UnBind Events etc).
  • It Works on principal of Dirty Checking.
  • Automatically fires event if something gets changed.

What ? Dirty checking ? wouldn’t it be performance impact on my web application?

You are correct. But Google team has answer for this.

  • AngularJS performance mainly linked to your computer (Client’s Computer) performance.
  • Ergonomical point of view, an HTML page should not have more than 200 fields. More fields will just distract users.

In this article, I will demonstrate how to use AngularJs framework to create simple application. Continue reading “Getting Started with AngularJs”