lec6 ecom fall16

e-Commerce Systems

Zainab KHALLOUF, Ph.D.

Lecture 6: Implementing Multi-tiered e-Commerce Systems using AngularJS and Java EE

7 (Introduction).

Lecture References

The Java EE 7 Tutorial.

http://docs.oracle.com/javaee/7/tutorial/doc/javaeetutorial7.pdf

How-to: HTML5 Front-End Applications with a Java EE Back End.

http://www.youtube.com/watch?v=qSbHiake3aE

Simple Example angularJS and JavaEE, by Lisa Spitzl.

http://www.youtube.com/watch?v=qSbHiake3aE

AngularJS in 60 Minutes, by Dan Wahlin.

http://fastandfluid.com/publicdownloads/AngularJSIn60MinutesIsh_DanWahlin_May2013.pdf

E-Commerce Systems 2

Outline

1 Introduction to AngularJS framework.

2 Representational State Transfer (RESTful) Web Services.

3 Using AngularJS to view data exposed by Java EE 7 RESTfulWeb Services.

E-Commerce Systems 3

Introduction to AngularJS

What is AngularJS?

AngularJS is an open-source MVC JavaScript framework,maintained by Google, for building Single Page Applications(SPA) that run in a browser.

E-Commerce Systems 5

What is AngularJS?

E-Commerce Systems 6

Single Page Application (SPA)

A single page application (SPA) is one in which we have a shellpage and we can load multiple views into this shell page.

AngularJS in 60 Minutes, by Dan Wahlin.

E-Commerce Systems 7

AngularJS Application Parts

E-Commerce Systems 8

AngularJS Application Parts (cont.)

E-Commerce Systems 9

AngularJS Application Parts (cont.)

AngularJS application contains:

Module.

A container for the different parts of your app : controllers,services, filters, directives, etc.

Routes.

In the SPA world we need a way to be able to track whatroute we’re on and what view that’s associated with andthen what controller goes with that view

Views/Partials.

Views also called partials in AngularJS, they are defined inplain HTML and extended with dynamics (JavaScript logic)using so-called directives.

E-Commerce Systems 10

AngularJS Application Parts (cont.)

Controllers.

Controllers contain only business logic.

Services.

You can use services to organize and share code (or data)across your app.

Filters.

A filter formats the value of an expression for display to theuser.

E-Commerce Systems 11

AngularJS Application: Views, Controllers and Scope

The glue between the View and the Controller is the Scope.$scope represents the scope object.

AngularJS in 60 Minutes, by Dan Wahlin.

E-Commerce Systems 12

Developing AngularJS Application in Netbeans

E-Commerce Systems 13

Developing AngularJS Application in Netbeans (cont.)

E-Commerce Systems 14

Developing AngularJS Application in Netbeans (cont.)

E-Commerce Systems 15

Developing AngularJS Application in Netbeans (cont.)

E-Commerce Systems 16

Developing AngularJS Application in Netbeans (cont.)

Use Bower to manage dependencies.

E-Commerce Systems 17

Developing AngularJS Application in Netbeans (cont.)

E-Commerce Systems 18

Developing AngularJS Application in Netbeans (cont.)

index.html

ng-app is a built-in directive to initialize the Angular app.

ng-model is also a is a built-in directive, it adds a propertyname into the scope. To write the value of the name propertywe add a data binding expression.

E-Commerce Systems 19

Developing AngularJS Application in Netbeans (cont.)

E-Commerce Systems 20

Developing AngularJS Application in Netbeans (cont.)

E-Commerce Systems 21

Representational State Transfer (RESTful) Web Services

What Are Web Services?

Web services are client and server applications thatcommunicate over HTTP using messages.

Web services provide a standard means of interoperatingbetween software applications running on a variety ofplatforms and frameworks.

E-Commerce Systems 23

Types of Web Services

Big Web Services: use XML messages that follow theSimple Object Access Protocol (SOAP) standard

RESTful Web Services: lightweight web servicessuitable for basic, adhoc integration scenarios. (The topicof this lecture)

E-Commerce Systems 24

RESTful Web Services

The REST architectural style is designed to use astateless communication protocol, typically HTTP.

Data and functionality are considered resources and areaccessed using Uniform Resource Identifiers (URIs).

The resources are represented by an XML document, or animage file, or an HTML page, and are acted upon byHTTP operations: GET, PUT, POST and DELETE.

A client might retrieve a particular representation, modifythe resource by updating its data, or delete the resourceentirely.

E-Commerce Systems 25

RESTful Web Services (cont.)

In Java EE 7, the Java API for RESTful Web Services(JAX-RS) provides the functionality for REST webservices.

The JAX-RS API uses annotations to simplify thedevelopment of RESTful web services.

Developers decorate Java programming language class fileswith JAX-RS annotations to define resources and theactions that can be performed on those resources.

Jersey is its official reference implementation of JAX-RSand the one that is most widely used in development andproduction.

The JAX-RS runtime will return a Web ApplicationDefinition Language (WADL) document describing theresource; see http://www.w3.org/Submission/wadl/ formore information.

E-Commerce Systems 26

Web Application Definition Language (WADL) :Example

E-Commerce Systems 27

Creating a RESTful Root Resource Class

Root resource classes are ”plain old Java objects” (POJOs)that are annotated with @Path. The methods in the classcan be annotated with @Path or a request methoddesignator, such as @GET, @PUT, @POST, or @DELETE.

E-Commerce Systems 28

First RESTful Web Service

The following example demonstrates how to create a RESTfulweb service that simply displays an HTML.

E-Commerce Systems 29

Summary of JAX-RS Annotations

@Path The @Path annotation’s value is a relative URI pathindicating where the Java class will be hosted: forexample, /hellors. You can also embed variables inthe URIs to make a URI path template (i.e. URIpath templates are URIs with variables embeddedwithin the URI syntax.). For example, you could askfor the name of a user and pass it to the applicationas a variable in the URI: /hellors/{username}.

@GET The Java method annotated with this requestmethod designator will process HTTP GET requests.

@POST The Java method annotated with this requestmethod designator will process HTTP POST re-quests.

E-Commerce Systems 30

Summary of JAX-RS Annotations (cont.)

@PUT The Java method annotated with this requestmethod designator will process HTTP PUT requests.

@DELETE The Java method annotated with this requestmethod designator will process HTTP DELETE re-quests.

@HEAD The Java method annotated with this requestmethod designator will process HTTP HEAD re-quests.

@Consumes The @Consumes annotation is used to specify theMultipurpose Internet Mail Extensions (MIME) me-dia types of representations a resource can consumethat were sent by the client.

@Produces The @Produces annotation is used to specify theMIME media types of representations a resource canproduce and send back to the client: for example,”text/plain”.

E-Commerce Systems 31

Summary of JAX-RS Annotations (cont.)

@PathParam

The @PathParam annotation is a typeof parameter that you can extract fromthe request URI for use in your resourceclass.

The parameter names correspond to theURI path template variable namesspecified in the @Path class-level (ormethod-level) annotation.

E-Commerce Systems 32

Summary of JAX-RS Annotations (cont.)

@PathParam(cont.) For example, in the following @Path

annotation:@Path(”/users/{user}”), if theuser types the user name ”Bob,” the webservice responds to the following URL:http://example.com/users/Bob, To obtain thevalue of the user name, the @PathParamannotation may be used on the methodparameter of a request method, as shown inthe following code example:

E-Commerce Systems 33

Summary of JAX-RS Annotations (cont.)

@QueryParam The @QueryParam annotation is a typeof parameter that you can extract for usein your resource class. Query parame-ters are extracted from the request URIquery parameters. (e.g. GET /employ-ees?maxyear=2009&minyear=1999)

E-Commerce Systems 34

Developing a RESTful Web Service in Netbeans

Create a new project by choosing New → Project from the Filemenu to open the New Project Wizard dialog. In the dialog,choose Web from the category list on the left and choose WebApplication from the Project list on the right. Click the Nextbutton to continue.

E-Commerce Systems 35

Developing a RESTful Web Service in Netbeans (cont.)

E-Commerce Systems 36

Developing a RESTful Web Service in Netbeans (cont.)

E-Commerce Systems 37

Developing a RESTful Web Service in Netbeans (cont.)

E-Commerce Systems 38

Developing a RESTful Web Service in Netbeans (cont.)

E-Commerce Systems 39

Developing a RESTful Web Service in Netbeans (cont.)

E-Commerce Systems 40

Developing a RESTful Web Service in Netbeans (cont.)

E-Commerce Systems 41

Developing a RESTful Web Service in Netbeans (cont.)

E-Commerce Systems 42

Developing a RESTful Web Service in Netbeans (cont.)

E-Commerce Systems 43

Developing a RESTful Web Service in Netbeans (cont.)

E-Commerce Systems 44

Developing a RESTful Web Service in Netbeans (cont.)

E-Commerce Systems 45

Generating RESTful Web Services from Entity Classes

E-Commerce Systems 46

Generating RESTful Web Services from Entity Classes(cont.)

E-Commerce Systems 47

Generating RESTful Web Services from Entity Classes(cont.)

E-Commerce Systems 48

Generating RESTful Web Services from Entity Classes(cont.)

E-Commerce Systems 49

Generating RESTful Web Services from Entity Classes(cont.)

E-Commerce Systems 50

Generating RESTful Web Services from Entity Classes(cont.)

E-Commerce Systems 51

AccountFacadeREST.java

package service;

import entities.Account;

import java.util.List;

import javax.ejb.Stateless;

import javax.persistence.EntityManager;

import javax.persistence.PersistenceContext;

import javax.ws.rs.Consumes;

import javax.ws.rs.DELETE;

import javax.ws.rs.GET;

import javax.ws.rs.POST;

import javax.ws.rs.PUT;

import javax.ws.rs.Path;

import javax.ws.rs.PathParam;

import javax.ws.rs.Produces;

@Stateless

@Path("accounts")

public class AccountFacadeREST extends AbstractFacade<Account> {

@PersistenceContext(unitName = "AccountJSFExamplePU")

private EntityManager em;

public AccountFacadeREST() {

super(Account.class);

}

@POST

@Override

@Consumes({"application/xml", "application/json"})

public void create(Account entity) {

super.create(entity);

}

E-Commerce Systems 52

AccountFacadeREST.java (cont.)

@PUT

@Path("{id}")

@Consumes({"application/xml", "application/json"})

public void edit(@PathParam("id") Long id, Account entity) {

super.edit(entity);

}

@POST

@Path("{id}")

@Consumes({"application/xml", "application/json"})

public void editPost(@PathParam("id") Long id, Account entity) {

super.edit(entity);

}

@DELETE

@Path("{id}")

public void remove(@PathParam("id") Long id) {

super.remove(super.find(id));

}

@GET

@Path("{id}")

@Produces({"application/xml", "application/json"})

public Account find(@PathParam("id") Long id) {

return super.find(id);

}

E-Commerce Systems 53

AccountFacadeREST.java (cont.)

@GET

@Override

@Produces({"application/xml", "application/json"})

public List<Account> findAll() {

return super.findAll();

}

@GET

@Path("{from}/{to}")

@Produces({"application/xml", "application/json"})

public List<Account> findRange(@PathParam("from") Integer from, @PathParam("to") Integer to) {

return super.findRange(new int[]{from, to});

}

@GET

@Path("count")

@Produces("text/plain")

public String countREST() {

return String.valueOf(super.count());

}

@Override

protected EntityManager getEntityManager() {

return em;

}

E-Commerce Systems 54

Generating RESTful Web Services from Entity Classes(cont.)

Cross-origin resource sharing

E-Commerce Systems 55

Generating RESTful Web Services from Entity Classes(cont.)

E-Commerce Systems 56

Generating RESTful Web Services from Entity Classes(cont.)

E-Commerce Systems 57

Generating RESTful Web Services from Entity Classes(cont.)

E-Commerce Systems 58

Generating RESTful Web Services from Entity Classes(cont.)

E-Commerce Systems 59

Creating AngularJS Application with RESTful WebServices Backend

Acknowledgment:

Simple Example angularJS and JavaEE, by Lisa Spitzl.

http://www.youtube.com/watch?v=qSbHiake3aE

E-Commerce Systems 60

services.js

Create a factory object: Accounts, then define the methodfindAll to returns all the accounts.

E-Commerce Systems 61

controllers.js

E-Commerce Systems 62

partial1.html

E-Commerce Systems 63

Result

E-Commerce Systems 64

The Affable Bean application with HTML5 front-end

The Affable Bean application with HTML5 front-end.

https://bitbucket.org/dkonecny/affable-bean

The Affable Bean application with HTML5 front-end

E-Commerce Systems 66

Questions?