Twilio, Ionic Framework and Node.js – A Message & Call App

Twilio, Ionic Framework and Node.js – A Message & Call App

In this post, we will take a look at integrating Twilio, Ionic Framework and Node.js to build a Mobile Hybrid app named “The Twilio App“.  This app can send SMS or trigger calls using the Twilio cloud based API’s. We will be using Ionic Framework as our Mobile Hybrid app framework and Node.js/Express.js as our REST Server to customize the responses. We will also use DiskDB to keep a track of our API calls.

The final app would look like Screenshot_2014-09-14-18-34-16

Screenshot_2014-09-14-18-37-33Screenshot_2014-09-14-18-38-21 Screenshot_2014-09-14-18-39-03

And the call you get would sound like

 

You can find the complete code here.

So let us get started.

Uploading files with Dropzone.js and Express.js

Dropzone.js and Express.js File upload

In this post, we will take a look at how to integrate Dropzone.js with Express.js and save files to the server in easy steps. We will configure our app to show a progress bar, load previously saved files and delete files (from the server).

The final product would look like

Screen Shot 2014-09-07 at 3.17.10 pmScreen Shot 2014-09-07 at 3.16.40 pm

You can find a demo here and complete code here.

So, let us get started.

Building a Web Based File Browser with jsTree, Angularjs and Expressjs

Building a Web Based File Browser with jsTree, Angularjs and Expressjs

In this post, we are going to build a web based File Browser with Angularjs, Expressjs and jsTree (a super awesome jquery tree plugin). We will be using a jsTree directive named jsTree-directive written by me to leverage jsTree (jQuery Plugin) inside an Angularjs application. (You can find the complete documentation of the directive here.)

The main purpose of the file browser app is to show a tree view of a certain directory on a web page. And when the user clicks on a file, we will show the contents of the file. A simple application to showcase the power of jstree directive and also jsTree and Expressjs integration.

The final product will look like

Screen Shot 2014-08-27 at 7.15.45 am Screen Shot 2014-08-27 at 7.16.25 am Screen Shot 2014-08-27 at 7.17.06 am

You can find a live demo here and the completed code here.

So, Let us get started.

Building a Todo App with DiskDB

DiskDB

Pol and couple of others reached out to me requesting a post on real time usage of DiskDB and here it goes.

I have written another article on how to build the same Todo App with M.E.A.N. stack : MEAN stack – A Hands on Tutorial

I would recommend checking out my MEAN Workshop too to get a better idea on the integration between different layers.

If you did not already know, DiskDB is a file system based database. The only reason I have create DiskDB is to avoid using the mighty MongoDB for managing small scale REST apps.

The Todo app we are going to build will look like

Screen Shot 2014-08-24 at 10.56.05 am Screen Shot 2014-08-24 at 10.56.15 am Screen Shot 2014-08-24 at 10.56.29 am

 

You can find a demo here. You can find the complete code here.

You can also check out Node Webkit powered Dashboard application and Creating a Sentiment Analysis Application Using Node.js, which use DiskDB.

MEAN stack – A Hands on Tutorial

MEAN stack – A Hands on Tutorial

Also checkout a lighter version of the Todo App using DiskDB instead of MongoDB : Building a Todo App with DiskDB

If you are new to MEAN, I would recommend checking out my MEAN Workshop.

If you have been working in the  Nodejs/Web development world, you must have heard about MEAN. If you did not, MEAN stands for

  • M – MongoDB
  • E – Expressjs
  • A – Angularjs
  • N – Nodejs

Sweet right! This IMO is the next gen technology stack to build scalable and efficient web applications that uses Javascript on both the server and the client.

In this post, we will be building a simple Todo App. We will be building the app from scratch, which will give you an idea as what component goes where and how to configure it. If you already have taken a stab at MEAN stack generators/frameworks, you must have noticed the complex file structures, and you are not sure which files gets wired to which other file.  We will be demystifying them but in simple a Todo app.

The final product we are going to build will look like

Screen Shot 2014-08-22 at 7.53.26 amScreen Shot 2014-08-22 at 7.53.45 amScreen Shot 2014-08-23 at 8.29.18 pm

You can find a demo here. You can find the complete code here.

So, let us get started.

Getting Started with Intel’s App Framework and XDK

Getting Started with Intel’s App Framework

First impression, “A Comprehensive Hybrid Mobile App development kit!“.

The guys at Intel have done an awesome job in packing everything we need to build a Hybrid Mobile app in most convenient workflow possible. In this post, we will take a look at the App framework, its components, theme’s and the invaluable XDK to build Hybrid mobile apps.

App Framework

App Framework is comprised of three parts

App Framework – a query selector library
UI – a UI/UX library for smartphone and tablets
Plugins – plugins built on top of App Framework

App Framework was built from the ground up to excel on mobile devices by being light and fast. It takes advantage of new browser features and supports valid W3C CSS selectors. User generated performance tests at jsperf.net have shown it to be faster than every other JavaScript* library available.

App Framework UI, also known as AFUI, is the only mobile framework that treats Android*, iOS*, Blackberry* and Win8* the same. In other words, AFUI does not degrade features or performance in order to resolve conflicts or bugs. For example, most frameworks consider Android* to be “broken” and ignore specific versions of that operating system or take shortcuts that perform poorly. App Framework solves these key issues to provide a clean and responsive HTML5 user interface.

Plugins are separate JavaScript libraries created to augment apps written using App Framework App Framework. Plugins provide useful features or functionality that may be outside the scope of basic applications. App Framework UI harnesses a few of the core plugins like af.scroller.js and af.css3animate.js.

node-webkit and Firebase – Simple and Social Authentication

node-webkit and Firebase – Simple and Social Authentication

In this post, we will take a look at the Integration between Firebase Simple Authentication and node-webkit. We are going to use slush generators to scaffold basic apps for us. Then we will create and configure a Firebase account to manage Simple Authentication i.e. Email and Password and Social Authentication using Twitter, Google and Facebook services.

The final product would look like

Screen Shot 2014-08-15 at 6.20.04 pm Screen Shot 2014-08-15 at 6.20.25 pm Screen Shot 2014-08-15 at 6.21.04 pm

We are going to implement the same using pure Javascript as well as Angularjs.  You can find the completed code here.

So, let us get started.

Node webkit and Angularjs – A MovieStub App

Node webkit and Angularjs – MovieStub App

In this post, we will take a look at building Node webkit based desktop app using Angular js. By the end of this post, we are going to build a Movie Booking desktop application, where a user can see a list of movies and book tickets as per availability.

The final product would look like

Screen Shot 2014-08-11 at 8.25.26 am Screen Shot 2014-08-11 at 8.25.48 am Screen Shot 2014-08-11 at 8.26.04 amYou can find a live demo of the web version here. You can find the complete code here.  So, let us get started

Building a Slush Generator

Building a Slush Generator

Generators are powerful tools that help in quickly scaffolding project structures. You can use them to start off a new project or add new components to an existing project. Generally these projects are collections of best practices that a developer can consume directly. In this post, we will see how to build a simple generator that will create a boilerplate for a building static pages with auto reloading feature.

You can find the completed code here.

So, let us get started.

What is Slush?

Slush is a tool to be able to use Gulp for project scaffolding.

Slush does not contain anything “out of the box”, except the ability to locate installed slush generators and to run them with liftoff.