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

This post is part 2 of 2 in the series Ionic, Twilio and Node Scheduler – A Reminder App
Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

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.

Prerequisites

To build a mobile hybrid app using Phonegap, I would recommend going through this. To get a basic idea on building an Ionic + Phonegap refer this. To get a feel of an end to end hybrid app take a look at this.

Architecture

Quick peek at the architecture we have discussed earlier.

arch_remide_me_appWe will be building the hybrid app piece in this post.

Our client will have 3 main controllers.

  • LoginCtrl – Take care of login process
  • RegisterCtrl – Take care of registration process
  • HomeCtrl – Take care of displaying and managing the reminders

Apart from the above, we will also have 3 factories

  • AuthFactory – To take care of user authentication
  • SessionFactory – To manage the session on the client side
  • ReminderFactory – To interact with reminders on server

Our application initial view would be a tabbed login/register screen. Once the user register/login we will show him a list of his reminders. And also provide an option to create a new reminder.

Setting up the Client

We know where we are headed at. So, let us get started. We will start off by creating a new folder named client inside the remindMe folder we created in part I. Open a new terminal/prompt here.

We will first download the latest version of cordova and ionic

npm install -g cordova ionic

Then we will scaffold a blank ionic project.

ionic start remindMe blank

First, we will update the client/remindMe/config.xml. Open config.xml in your favorite editor and updated it as below

Next, move this file inside the www folder. This is more of a Phonegap build requirement.

We will install a couple of dependencies. Open client/remindMe/bower.json and update it as below

Now run

bower install 

This will download a bunch of dependencies along with the datetime picker. We will refer them in our index.html.

Open www/index.html and update it as below

We have included a copy of datetimepicker and moment.js. This will be used to show the calendar.

Line 29/35 – Have an expression  authktd . This will be evaluated to true when the user is logged in.

Next, we will set up the Angular modules. Open app.js and update it as below

Things to notice

Line 1 : We include all the required modules

Line 14 : We initially set the  authktd variable to false.

Line 16/26/30 : Helper methods to show and hide the overlay. This will be used while processing a request.

Line 37 : The logout()  definition.

Line 42 : A listener for  locationChangeStart. Whenever a route changes, we check a few things and act on it. This hook is for maintaining the session on the client side.

Line 55 – 95 : Routes and states for our app.

Next, we would update the services.js as below

Things to notice

Line 1 : The base URL of your server. For our app, we will be using the ngrok URL we have hosted our Node.js app on.

Line 5 : AuthFactory to manage authentication end points

Line 21: SessionFactory to manage user session on the client side

Line 50 : ReminderFactory to interact with the reminders data on the server. Do not that for this app, we are not consuming all the endpoints that we have developed in Part I.

Line 55 : Do notice the datetime stamp appended to the GET URL. For some reason, the Ionic app is caching this request quite heavily. So we are cache busting it with a time stamp.

Now, we will work on the controllers. Open controllers.js and update it as below

Things to notice

Line 3 : Login controller.

Line 11 : Authenticate the user and redirect the user to the home page on successful login. Else show the error.

 Line 28 : Registration controller.

Line 37 : Register the user and redirect the user to the home page on successful registration. Else show the appropriate error.

Line 57 : HomeCtrl.

Line 62 : We broadcast a  'load-reminders' event, which will refresh the reminders.

Line 66 : Logic for pull down refresh.

Line 82'load-reminders' event logic.

Line 94 : Logic for deleting a reminder.

Line 111 : NewReminderCtrl.

Line 151 : Logic to show the datetimepicker.

Line 123 : Logic to format the selected date for display.

Line 127createReminder() .

We will work on the required partials now. Create a new folder named templates inside the www folder. Inside the templates folder, create a file named auth.html. This will be the base template for the tabs. Update it as below

Next, create a file named auth-login.html and update it as

Next, the registration screen. auth-register.html :

Now the app’s home page. home.html :

Finally the new reminder creation popup. newReminder.html :

Update css/style.css as below

Run the App

Make sure your server is running and ngrok too. Then take the generated ngrok URL and update line 1 of services.js. Now run

ionic serve

And you should see the app launch in your default browser. You can login/register and create reminders and test it out.

Deploy the App

You can either run

ionic platform add android  or  ionic platform add ios

to add platforms. And the run

ionic build android  or  ionic build ios

If you are facing any issues, refer PhoneGap 3 CLI Setup on Mac & Windows. Now you can run

ionic run

once you have the mobile device connected to your desktop/laptop. This will install the app and launch it. You can check out your new shiny app on your device.

To generate a Phonegap installer, refer : PhoneGap Quick Start and Ionic Framework, Angularjs & PhoneGap Build- The Awesome Threesome!.

Hope this 2 part post gave you a decent idea as how to build an end to end mobile hybrid app. And also a fair understanding of REST API and their integration.


Thanks for reading! Do comment.
@arvindr21

Series Navigation<< Ionic, Twilio and Node Scheduler – A Reminder App – Part I [Server]
Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page
  • javad

    Hi @arvind thanks for this tutorial, but i cant make myApp.apk for android beacuse the client and server side is in two folder and run these with tow cmd and diffrent port EX : ionic run in port 8100 and express server is run on port 3000, how can i make .apk that run ionic and run server that server listen to my http request and response that to client side

  • http://devendraverma.com/ Devendra Verma

    Hi @arvind thanks for this tutorial, I am trying to add calendar part from this tutorial, however I am getting this error message

    TypeError: Cannot set property ‘formattedDate’ of undefined

    Can you please correct me if I am doing anything wrong.

    thanks

    • / Arvind Ravulavaru

      Thanks Devendra. Is it while setting up or when a date is selected?

      • http://devendraverma.com/ Devendra Verma

        thanks for replying arvind,

        it was while setting up
        $scope.$watch(‘reminder.formattedDate’, function(unformattedDate) {
        $scope.reminder.formattedDate = $filter(‘date’)(unformattedDate, ‘dd/MM/yyyy HH:mm’);
        });

        but when commented this to check, then after clicking to open the calendar, I am getting error on this line

        $scope.tmp.newDate = $scope.reminder.formattedDate;

        • / Arvind Ravulavaru

          Hmm.. looks like reminder object is undefined when the $watch is setup. Can you console log the reminder object before the watch statement and see what it has.

          Note: reminder object should be attached to the $scope variable.

          Thanks.

          • http://devendraverma.com/ Devendra Verma

            @arvindravulavaru:disqus console.log($scope.reminder) prints “undefined”

          • / Arvind Ravulavaru

            There you go! Thats the root cause.

            If you see the source code, you will find a line like

            That should be declared before the watch.

            Thanks.

          • http://devendraverma.com/ Devendra Verma

            @arvindravulavaru:disqus sloppy work from my side. thanks for your help, it fixed the problem.

            thanks

          • / Arvind Ravulavaru

            Great!