Application Programming Interface(API)

APIs allow others to fetch data

Like Google map API, Twitter API, Facebook API, Reddit API, etc.

Interface for the code to talk to each other.

It can be a db api, a hard drive api to connect, or any other.

Web API is a subset of APIs.

Huge list of API collections which updates when you update one https://ifttt.com/ & https://www.programmableweb.com/category/all/apis

Serving Data:

Data can be served in the form of JSON, XML, URL encoded string or text format.

Package to use for Node APIs:

https://github.com/request/request

Advertisements

Higher Order Function

A function which takes another function as parameter or returns another function is called a higher order function.

Like

setInterval which takes a function definition and interval
this returns a reference to itself

App Design

Let’s understand the most important aspects of app design.

Keep design in mind at all steps of development. Design has an affect on user emotions for your app similar to the functionality.

Things to remember

1. Color Theory
2. Typography

Design everywhere

Frequencies of light waves
Frequencies of information design

http://colorhunt.co/
https://flatuicolors.com/ for IOS
https://www.materialpalette.com/ for Android

Colorzilla browser extension

header vs content text should be serif vs sans-serif

whatfont extension

https://www.fontsquirrel.com/

UI Design

App has a journey
So it should be delightful

ExtJS grid store filter

using a combobox to filter a grid in extjs

window.onload = function() {

var accModel = Ext.create('Ext.data.Model', {
fields: ['accCode', 'name', 'type', 'amount']
});

var store = Ext.create('Ext.data.Store', {
alias: 'store.accStore',
model: accModel,
proxy: {
type: 'ajax',
url: '/accounts.json',
reader: {
type: 'json'
}
},
autoLoad: true
});

var accGrid = Ext.create('Ext.grid.Panel', {
header: {
hidden: true
},
store: store,
layout: 'fit',
columns: [{
text: "Account Code",
dataIndex: 'accCode'
},
{
text: "Name",
dataIndex: 'name'
},
{
text: "Type",
sortable: false,
dataIndex: 'type'
},
{
text: "Amount",
align: 'right',
sortable: false,
dataIndex: 'amount'
}
],
columnLines: true,
width: 600,
height: 300
});

var accCodesStore = Ext.create('Ext.data.Store', {
fields: ['accCode', 'abbr'],
proxy: {
type: 'ajax',
url: '/accCodes.json',
reader: {
type: 'json'
}
},
autoLoad: true
});

var cBox = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose Account',
store: accCodesStore,
queryMode: 'local',
displayField: 'accCode',
valueField: 'abbr',
forceSelection: true,
listeners: {
change: function (field, newValue, oldValue) {
//console.log(newValue);
accGrid.getStore().clearFilter();
accGrid.getStore().filter('accCode', newValue);
},
scope: this
}
});

Ext.onReady(function() {

Ext.create('Ext.panel.Panel', {
title: 'Account details',
width: 600,
height: 450,
items: [cBox, accGrid],
renderTo: Ext.getBody()
});

});
}


//accounts.json
[
  {
    "accCode": "003",
    "name": "satya",
    "type": "savings",
    "amount": 10000
  },
  {
    "accCode": "003",
    "name": "Abhinaw",
    "type": "current",
    "amount": 100000
  },
  {
    "accCode": "003",
    "name": "Vishal",
    "type": "current",
    "amount": 100000
  },
  {
    "accCode": "004",
    "name": "Malvika",
    "type": "current",
    "amount": 100000
  },
  {
    "accCode": "004",
    "name": "Sakshi",
    "type": "current",
    "amount": 100000
  },
  {
    "accCode": "004",
    "name": "Kshitij",
    "type": "current",
    "amount": 100000
  },
  {
    "accCode": "005",
    "name": "Palash",
    "type": "current",
    "amount": 100000
  },
  {
    "accCode": "005",
    "name": "Supal",
    "type": "current",
    "amount": 100000
  },
  {
    "accCode": "005",
    "name": "Ramesh",
    "type": "current",
    "amount": 100000
  }
]


//accCodes.json
[
  {
    "accCode": "003",
    "abbr": "003"
  },
  {
    "accCode": "004",
    "abbr": "004"
  },
  {
    "accCode": "005",
    "abbr": "005"
  }
]

ExtJS 5.0.1

Creating a simple server locally

If you are using ajax calls in javascript, it won’t work locally as browsers restrict xmlhttp calls.

Work around for this is to install node js locally and create a simple http server in any particular folder.

Once node is being installed, open node command prompt.

Locate to the folder and

Type
`npm install -g http-server`

This will create the server in your local folder

Then to start the server type
`http-server`

You can terminate it any time by ctrl+c

Starting ExtJs sample

This is my first ExtJs sample. in this I am going to explain about how to start a sample in ExtJs.

first download the ExtJs library files

https://extjs.cachefly.net/ext/gpl/5.1.0/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug.css

https://extjs.cachefly.net/ext/gpl/5.1.0/packages/sencha-charts/build/crisp/resources/sencha-charts-all-debug.css

https://extjs.cachefly.net/ext/gpl/5.1.0/build/ext-all-debug.js

https://extjs.cachefly.net/ext/gpl/5.1.0/packages/ext-theme-crisp/build/ext-theme-crisp.js

https://extjs.cachefly.net/ext/gpl/5.1.0/packages/sencha-charts/build/sencha-charts-debug.js

Include them into the html file.

create a script block in html like below

 


      lessThan script type="text/javascript" greaterThan //<![CDATA[
         window.onload=function(){ }  //]] greaterThan 
         
      lessThan /script greaterThan

Now let’s create a simple grid with some JSON data inside window.onload function,

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [ 'name', 'email', 'phone' ]
});

This is going to be our model. In ExtJs a model is the JSON structure not the actual data. The model is a part of Ext.data Object. And it has fields which is an Array. Each field can be a simple name or you can define the type as well for the field like below

fields: [  { name: ‘id’, type: ‘int’ }  ]

Now time to create the actual JSON data. ExtJs holds the actual data in Store Object. Store takes at least two parameters model and data.

var userStore = Ext.create('Ext.data.Store', {
    model: 'User',
    data: [
        { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
        { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
        { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
        { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
    ]
});

Let’s render the data into a grid container.

Ext.create('Ext.grid.Panel', {
    renderTo: document.body,
    store: userStore,
    width: 400,
    height: 200,
    title: 'Application Users',
    columns: [
        {
            text: 'Name',
            width: 100,
            sortable: false,
            hideable: false,
            dataIndex: 'name'
        },
        {
            text: 'Email Address',
            width: 150,
            dataIndex: 'email',
            hidden: true
        },
        {
            text: 'Phone Number',
            flex: 1,
            dataIndex: 'phone'
        }
    ]
});

What is permanent in this world?

The only permanent thing in this world is change. Except this nothing else is permanent.

Change starts from day one in one’s life. It is with you for ever.

Some changes are good. Some are bad.
But it depends on your hard work and approach towards the change.

As per horoscope, the planetary motions affect our change in life. But what I saw is one can change the bad time into the better one by hard work and commitment. If something is bothering you a lot do put more effort into it during the difficult situations. By that you can definitely achieve some good result even in the adverse time periods.

Believe in one thing, hard work always pays off even in bad situations.