Archives

A tiny ToDo-app PART 2: Let’s go real time with AngularFire

· Tech · , , ,

In one of my previous posts I created a tiny ToDo-app with AngularJS and Parse. I recently got into Firebase and was totally blown away how real time it is. I figured out that the perfect way to really try it out was to actually refactor my existing tiny ToDo-app. See the video below for the result = D

GitHub repo

Google API + AngularJS: The first step – Authenticate and display data!

· Tech · , ,

In one of my previous posts I created a tiny ToDo-app with AngularJS and Parse. In this post I’ll be using the same concept however this time I’ll be using AngularJS with the Google Task API. In this particular example I’ll be demonstrating how easy it is to authenticate and display your tasks. The prerequisite for this example is that you already have a GMail account. This example is divided in two parts,

1) Set up the Google Task API for your application

2) Wire up the Google Task API with your ToDo-app.

 

Part 1: Set up Google Task API for your application

1. Go to Google Developers Console – this is where you’ll administrate, among other, Google API access and credentials

https://console.developers.google.com/project

2. Create a new Project.
3. Go to the newly Project and enable Google Task API.
4. Before we can start accessing the API, we need to first generate an ID. Go to Credentials:

a) Create Client ID
Under AUTHORIZED JAVASCRIPT ORIGINS put the URL of the webserver you’re working with;

– ex if you’re developing locally: http://localhost:5050

Under AUTHORIZED REDIRECT URI, put the URL for the callback;

ex: http://localhost:5050/callback.html

6. Once the credentials are ready, the next step is to form the URL you’ll be call to Google. This URL contains information such as what data your application is requesting from Google, what the redirect URL is, and what is your client id. An example of the URL might look something like this:

https://accounts.google.com/o/oauth2/auth?

scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ftasks+

https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ftasks.readonly+profile&

redirect_uri=http://localhost:57657/Index.html&

response_type=token&

client_id=< YOUR CLIENT ID HERE – see step 4.a >

 

7. Your application is now ready to access the API. Go to the URL you just formed – you should see something like this:

google task auth

You can administrate your 3rd party application list here: https://security.google.com/settings/security/permissions

 

Now, let’s wire it up with AngularJS!

 

Part 2: Wire up the Google Task API with your ToDo-app

1. For this ToDo-app we’ll be using the same architecture as in my previous post.

2. Let’s first define app.js:

'use strict';

// Declare app level module which depends on filters, and services
var todoApp = angular.module('todoApp', []);

//URLs
todoApp.constant("GOOGLE_VALIDATE_TOKEN_URL", "https://www.googleapis.com/oauth2/v1/tokeninfo?access_token=");
todoApp.constant("GOOGLE_TASK_API_URL", "https://www.googleapis.com/tasks/v1/lists/%40default/tasks?access_token=");
todoApp.constant('GOOGLE_AUTH_URL', 'https://accounts.google.com/o/oauth2/auth?scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ftasks+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ftasks.readonly+profile&amp;redirect_uri=http://localhost:57657/Index.html&amp;response_type=token&amp;client_id=759474991499-j0tip3nsv9q0ee6tvv02jber6afsrqrk.apps.googleusercontent.com');

2. Once we have the core building block of the app ready, let’s start of with the Service. The Service has two core features:

1. For every page load the Service validates the token (if there are any) and also checks if you’re coming from a callback URL from Google – the token will then be displayed in the URL as a access_token parameter.

2. A getTasks method that calls the Google Task API and recieves the tasks.

todoApp.service("IgService", function ($http, $q, $location, GOOGLE_VALIDATE_TOKEN_URL, GOOGLE_TASK_API_URL) {

var d = $q.defer();
var token = localStorage.token;
var URL = $location.path();
var validated = false;

//Check for callback URL
if(URL.indexOf("access_token") != -1){
localStorage.token = URL.substring(URL.indexOf("=") + 1, URL.indexOf("&amp;"));
token = localStorage.token;
}

//Validate and parse token
$http.get(GOOGLE_VALIDATE_TOKEN_URL + token)
.success(function (result) {
validated = true;
}).error(function (error) {
validated = false;
});

//Get Google Tasks
this.getTasks = function () {
if (validated) {
$http.get(GOOGLE_TASK_API_URL + token)
.success(function (result) {
d.resolve(result);
}).error(function (error) {
console.log(error);
});
return d.promise;
}
}
});

This is how the token is generated and received from Google:

tokenflow

3. The next step is to put the Controller together; call the Service to retrieve the Google Tasks and then expose the data and Google Authentication URL to the view.

todoApp.controller("IgCtrl", function ($scope, IgService, GOOGLE_AUTH_URL) {
//Get tasks
$scope.tasks = function () {
IgService.getTasks().then(function (result) {
$scope.models = result.items;
});
};

//Auth URL
$scope.GoogleAuth = GOOGLE_AUTH_URL;
});

 

4. The last step is to then put the data to the view in the HTML.

&lt;!doctype html&gt;
&lt;html lang="en" ng-app="todoApp"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;ToDo&lt;/title&gt;
&lt;link rel="stylesheet" href="css/bootstrap.min.css" /&gt;
&lt;link rel="stylesheet" href="css/app.css" /&gt;
&lt;/head&gt;

&lt;body ng-controller="IgCtrl"&gt;

&lt;div class="container" align="center" style="width:500px"&gt;
&lt;div class="row"&gt;
&lt;div class="col-md-6"&gt;
&lt;a href="{{GoogleAuth}}"&gt;
&lt;h4&gt;Google Auth&lt;/h4&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class="col-md-6"&gt;
&lt;a href="" ng-click="tasks()"&gt;
&lt;h4&gt;Get Google Tasks&lt;/h4&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/br&gt;&lt;/br&gt;

&lt;table class="table table-striped"&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Title&lt;/th&gt;
&lt;th&gt;Done&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr ng-repeat="model in models | orderBy: 'updated'"&gt;
&lt;td&gt;{{model.title}}&lt;/td&gt;
&lt;td&gt;
&lt;input type="checkbox" ng-model="model.status" ng-checked="model.status == 'completed'"/&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/div&gt;

&lt;!--SCRIPTS--&gt;
&lt;script src="lib/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="lib/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;script src="lib/angular/angular.min.js"&gt;&lt;/script&gt;
&lt;script src="js/app.js"&gt;&lt;/script&gt;
&lt;script src="js/controllers/IgCtrl.js"&gt;&lt;/script&gt;
&lt;script src="js/services/IgService.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

And that’s all! Your view should look something like this:

todo google API

GitHub: get the repo here!

A tiny ToDo-app built with AngularJS and Parse

· Tech · , , , ,

Are you new to AngularJS and the cloud service Parse? I’ve put together a small example demonstrating the beautiful simplicity yet powerful parts of AngularJS and Parse.

Here’s how my ToDo app is built up (click on the image below):

Arkitektur

 

Get the code here: https://github.com/mesic/ToDo-app_AngularJS-ParseJS_SDK

As a next step, maybe need to host your AngularJS project somewhere? Check this post out:)