Ionic, Twilio and Node Scheduler – A Reminder App – Part I [Server]

Ionic, Twilio and Node Scheduler – A Reminder App – Part I [Server]

In this post, we will take a look at building a Reminder app. With this mobile hybrid app, a user can register, login and then create a reminder. While creating the reminder, the user has an option to schedule a Call or a SMS to remind him/her of the task at the scheduled time. Sweet right?

Our client will be built using Ionic Framework and our server side will be built on top of Node.js with Express.js as the framework. We will be leveraging a node module named node-schedule to schedule tasks. And we will be using the powerful cloud based communication API exposed by Twilio to make a call or send an SMS.

Below is a video recording of the app. There is no audio, but you can find the recorded phone call after that

Note : There is ~25 seconds gap between scheduling the call and the call arriving. The call start @ 01.06 mins into the video.

Screenshot_2014-09-29-23-51-47 Screenshot_2014-09-29-23-53-15 Screenshot_2014-09-29-23-54-00

You can find the completed code here.

This post is going to be the first half of the tutorial, where we would be working on the server side to build the REST API with which our Ionic app would consume to register, authenticate users and manage reminders.

For the Ionic app take a look : Ionic, Twilio and Node Scheduler – A Reminder App – Part II [Client]

So, Let us get started.

Ionic, Twilio and Node Scheduler – A Reminder App – Part II [Client]

Ionic, Twilio and Node Scheduler – A Reminder App – Part II [Client]

This is the second part of the two part post on how to build a reminder app using Node scheduler, Twilio cloud API and Ionic Framework. If you did not already check out the first part, you can do so here : Ionic, Twilio and Node Scheduler – A Reminder App – Part I [Server].

To give a quick overview, we have gone through the required technologies, understood the architecture and how each component plugs into another. Then we have gone ahead and built the REST API using Node.js.

In this post, we will continue our journey toward the app. Quick reminder, this is where we are headed to!

Note : There is ~25 seconds gap between scheduling the call and the call arriving. The call start @ 01.06 mins into the video.

 

You can find the completed code here.

So, let us continue development.

Architecting a Secure RESTful Node.js app

Architecting a Secure RESTful Node.js app

In this post, we will take a look at architecting a Node.js app that will act as a REST API server for all of our clients. We will be implementing a Token Based Authentication to authenticate and authorize the client to access the application data.

This application design is targeted at systems that would like to implement its own REST API with a custom authentication. To showcase how one can consume the REST API with authentication, we will be writing an Angular.js client.

This post is inspired by Authentication with AngularJS and a Node.js REST api.

You can find the completed code here.

So, let us get started.

Maintaining a Private NPM registry for your Organization with Sinopia

Maintaining a Private NPM registry with Sinopia

In this post, we will take a quick dig at setting up our own private Node Package Registry with Sinopia.

sinopia is a private/caching npm repository server

Maintaining a private NPM for your organization/team is very helpful when you would like to share the code only with them and not the entire universe. You can develop and maintain all your organization specific projects and their components as node packages that can be reused.

If there are multiple teams working, each of them can upload their own reusable node modules to the private NPM and other teams can use them. For example a File upload component or an organization specific HTML5 boilerplate and so on. This way, when you need something all you have to do is run [crayon-542c612412851067172674-i/] , which will download the boilerplate for you.

So, let us get started.

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.