This tutorial is focused on the development of a CRUD & RESTful  web application with MSSQL and ANGULAR-JS. 
Part 1 - The user interface

Node.js is a very cool platform to seriously consider our enterprise projects.
I have tried a lot of libraries to find an optimal setup to develop an enterprise application. This tutorial will guide you in the implementation of a strong and easily reusable platform.

[ Part 1[ Part 2Part 3 ] Part 4 ]


Choosing a DB
The first requirement that I have considered is the use of a relational database. A large part of enterprise data are normally stored in a relational database, I think that it's better to interact with it directly. I have choosen Microsoft Sql Server that is one of the most used DB (see also Gartner Quadrant). I appreciate a lot Mongo Db and I prefer it for a classic web site but, for an enterprise application, I prefer MSSQL. The next release of MSSQL-2016 will contain a native JSON implementation. This will simplify the usage with NodeJs, maintaining the advantages of stored procedures, powerful views, scheduler, SSIS and all the other tools and facilities available.

Choosing a UI platform
There are a lot of libraries that help the development of UI. One of the platform most used is AngularJs. It aims to simplify the development and the testing by providing a framework for client side MVM (Model View Control) and MVVM (Model-View-ViewModel) architecture. With angular we can develop a SPA (single page application) in a few minutes.

Choosing a Software Architecture Style
A lot of software engineering now use a CRUD & RESTful approach when they implements a new NodeJs application. This approach has a lot of advantages also if it is not so "instinctive" for traditional developers. This tutorial will guide you to write an application with a complete isolation between the web service and the data layer. I prefer to separate these two distinct layers because so  I can choose different components for the http server and also to enforce security. It's possible to assign these layer to a two different and specialized hosts; they may reside also in different geographical sites with a lot of vantages in deployment flexibility and security assurance.

User Interface: start from a good template

I've googled a lot the web to find a single tutorial with these requirements, but is not easy to find it. So I have selected two separate examples as the base of this tutorial.

The better AngularJs template that I have found is Movie App. It implements the MVM/MVVM components in a clear code and everything is described in a detailed tutorial (thanks to Sandeep for his job). We start from downloading it here:
create a folder MyApp in your work space
download the MovieApp from github, decompress it  and put the folder MovieApp inside MyApp
rename "MovieApp" as "public"

Now we need a web-server to play it in our local host. Express can help us to write a web server with five rows of code:
with the console, go inside MyApp and install express typing : 
node install express
with a text editor  edit:
  • var express = require('express')  , app = express();
  • app.use('/', express.static(_dirname + '/public'));
  • app.listen(8080, function(){
  •   console.log('web server listening on port 8080');
  • });
save it as WebServer.js inside the folder MyApp
Our web server let the content of public folder to be available as static content.  It's time to play it:
launch our web server with the prompt command: 
node WebServer.js
. If you like to see a debug window of the web server, you can launch the webserver with:  
set DEBUG=express:* & node WebServer.js
 (using windows) or 
DEBUG=express:* node WebServer.js
 (using linux).
open Chrome and go the page:
We can see that the page is displayed, but no films are shown. In chrome select Tools > Developer Tools. We can see that an error is occurred. Why? It's simple: the CRUD application consumes a data service, but the address is wrong. No problem. Edit the file services.js (it's in the js folder) and change the address of rest service:
change fifth row with:
  •     return $resource('http://movieapp-sitepointdemos.rhcloud.com/api/movies/:id',{id:'@_id'},{
The code is changed in:

Evidently the demo address is changed! Now try again and you can see that the app is ok.

Read the tutorial  "Creating a CRUD App in Minutes with Angular’s $resource" to enhance your skill in: Angular Js, rest app, spa, $resource; it's the best tutorial that i've found on the web.

We have installed a good example of a CRUD, RESTful and SPA application in our host and we have adapted it to consume a data service from an external demo site on the Internet. In the next post we will see how to provide the data layer with a local and isolated service.

Part 1 ] Part 2 ] Part 3 ] Part 4 ]

No comments:

Post a Comment