File management system in AWS Cloud – Part 1 – Loopback & AngularJS App

  1. Short introduction about LoopBack and what we want to do

 

LoopBack is very powerful tool for quick prototyping new API from scratch. It can take you minutes or only hours from vision to ready to use API. You don’t need to waste your time to create new mechanism allowing you to enable any existing database. LoopBack gives you access to nearly all well known databases like: MySql, MSSql, PostgreSQL, MongoDB, ElasticSearch. What is worth to say LoopBack allows you to define your own datasources to connect to anything.

 

In this article we will use LoopBack to create API that allows us to connect to Amazon storages like S3 Simple Bucket. We will create application in AngularJS and Bootstrap using LoopBack API to connecto to AWS storages. Below I present architecture of the whole application:

  1. AngularJS app to manage files

In the first step we will build simple angularjs application that allows us to manage our own files using AWS Cloud. We can say that it will be simplified version of Dropbox plaftorm.

In order to create AngularJS application we use Yeoman generator.

Let’s start from installation the Yeoamn package (you need to have installed in your operating system NodeJS with NPM):

 

npm install -g yo grunt-cli bower

 

Now we need to install AngularJs generator, type this command from your CLI:

 

npm install -g generator-angular

 

We are ready to create the sceleton of our application but before this I listed for you all main commands available with angular generator:

 

Command name Description
angular:app
angular:controller
angular:directive
angular:filter
angular:route
angular:service
angular:view

 

The most interesting option for us is the first one. Using this we will create our application.

Let’s start from creating project directory, type:

 

mkdir filemanagement_webapp

 

yo angular:app FilesManagementApp

 

This will generate the whole needed structure of folders and files that we need to run simple application like below:

 

// zrobić zrzut ekranowy

 

Now we add three pages with complete set of controllers, views and correct routing paths, type in you CLI all commands:

 

yo angular:route index

yo angular:route login

yo angular:route register

 

After all this operations we should see folder structures like below

[ tree /f /a > tree.doc ]

+—app

|   |   404.html

|   |   favicon.ico

|   |   index.html

|   |   robots.txt

|   |

|   +—images

|   |       yeoman.png

|   |

|   +—scripts

|   |   |   app.js

|   |   |

|   |   \—controllers

|   |           about.js

|   |           index.js

|   |           login.js

|   |           main.js

|   |           register.js

|   |

|   +—styles

|   |       main.css

|   |

|   \—views

|           about.html

|           index.html

|           login.html

|           main.html

|           register.html

 

So we have main file index.html where are linked all needed javascript packages from bower, controller files and main app.js file with Angularjs configuration.

 

What we need to do is to remove files:

about.js

main.js

about.html

Main.html

 

We also need to remove lines from app.js

 

And remove linked controllers:

 

Now we are ready to run our project from CLI typing a command:

grunt serve

Before we go to the next step let’s add to the main.css files some css style that will format our logiin.html and register.html views:

 

/* Login and Register */

.form-signin

{

max-width: 330px;

padding: 15px;

margin: 0 auto;

}

.form-signin .form-signin-heading, .form-signin .checkbox

{

margin-bottom: 10px;

}

.form-signin .checkbox

{

font-weight: normal;

padding-left: 20px;

}

 

.form-signin .form-control

{

position: relative;

font-size: 16px;

height: auto;

padding: 10px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.form-signin .form-control:focus

{

z-index: 2;

}

.form-signin input[type=”text”]

{

margin-bottom: -1px;

border-bottom-left-radius: 0;

border-bottom-right-radius: 0;

}

.form-signin input[type=”password”]

{

margin-bottom: 10px;

border-top-left-radius: 0;

border-top-right-radius: 0;

}

.account-wall

{

margin-top: 20px;

padding: 40px 0px 20px 0px;

background-color: #f7f7f7;

-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);

-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);

box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);

}

.login-title

{

color: #555;

font-size: 18px;

font-weight: 400;

display: block;

}

.profile-img

{

width: 96px;

height: 96px;

margin: 0 auto 10px;

display: block;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

}

.need-help

{

margin-top: 10px;

}

.new-account

{

display: block;

margin-top: 10px;

}

 

/* End Login and Register */

 

Now add to the file login.html the code:

 

<div class=”row”>

<div class=”col-sm-6 col-md-6 col-md-offset-2″>

<h1 class=”text-center login-title”>Sign in</h1>

<div class=”account-wall”>

<img class=”profile-img” src=”https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120″

alt=””>

<form class=”form-signin”>

<input type=”text” class=”form-control” placeholder=”Email” required autofocus>

<input type=”password” class=”form-control” placeholder=”Password” required>

<button class=”btn btn-lg btn-primary btn-block” type=”submit”>

Sign in

</button>

<label class=”checkbox pull-left”>

<input type=”checkbox” value=”remember-me”>

Remember me

</label>

<a href=”#” class=”pull-right need-help”>Need help? </a><span class=”clearfix”></span>

</form>

</div>

<a ng-href=”#/register” class=”text-center new-account”>Create an account </a>

</div>

</div>

 

We also modify the file register.html adding the code:

 

<div class=”row”>

<div class=”col-sm-6 col-md-6 col-md-offset-2″>

<h1 class=”text-center login-title”>Sign up</h1>

<div class=”account-wall”>

<img class=”profile-img” src=”https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120″

alt=””>

<form class=”form-signin”>

<input type=”text” class=”form-control” placeholder=”Email” required autofocus>

<input type=”text” class=”form-control” placeholder=”First Name” required autofocus>

<input type=”text” class=”form-control” placeholder=”Last Name” required>

<input type=”password” class=”form-control” placeholder=”Password” required>

<button class=”btn btn-lg btn-primary btn-block” type=”submit”>

Create an account

</button>

<label class=”checkbox pull-left”>

<input type=”checkbox” value=”remember-me”>

Remember me

</label>

<a href=”#” class=”pull-right need-help”>Need help? </a><span class=”clearfix”></span>

</form>

</div>

<a ng-href=”#/register” class=”text-center new-account”>Sign in </a>

</div>

</div>

 

And that’s it. You can ran again an application typing a command:

Grunt serve

 

And the result is as below:

 

We finish playing with main index.html view and logging and registering process when we create AWS storage and configure LoopBack API.

Leave a Reply