\n How this book is organized\n
- \n First part - Grails 3 Essentials\n
- \n Second part - Practical example with Grails 3\n
\n
\n Introduction to Grails 3\n
- \n Some history\n
  - \n Java history\n
  - \n Java EE history\n
  - \n Spring history\n
  - \n Groovy history\n
  - \n Grails history\n
  \n
- \n Grails application architecture\n
  - \n A classical layered architecture\n
  \n
- \n New technologies inside Grails 3\n
  - \n Spring Boot\n
  - \n Gradle\n
  - \n Gorm\n
  - \n LogBack\n
  \n
- \n Modularity aspects of Grails\n
  - \n Plugins\n
  - \n Profiles\n
  \n
\n
\n The Mobile Application - Rest API Profile\n
- \n About this chapter content\n
- \n Introduction to Ionic 2 and Hybrid Mobile Applications\n
  - \n Install Ionic 2\n
  - \n Generate client app\n
  - \n Angular 2\n
  - \n Cordova\n
  - \n Ionic Native\n
  \n
- \n Rest API\n
  - \n From verbs to nouns\n
  - \n Swagger specification\n
  - \n REST Security on the server side\n
  - \n REST Security on the client side\n
  \n
- \n To the app store\n
  - \n Google Play Store\n
  - \n Apple App Store\n
  - \n Windows App Store\n
  \n
- \n To do list\n
\n

How this book is organized

\n\n

We try to describe here how a complete greenfield application can be implemented with Grails 3 in a fast way using profiles and plugins - and we do this in the sample application that accompanies this book. You can find news about this book on its presentation site located here: www.grailsthreebook.com. This book is not a replacement of the Grails 3 Reference Documentation which is a complete description of Grails 3, made by the creators of the framework.

\n\n

The source code used in this book is part of this sample application which is a free project hosted on GitHub on this location: https://github.com/colaru/mvp-application. If a source code fragment is included in this book, then it is taken from this project. We use BDD or other specification by example techniques for describing the sample application specification - the leaving documentation for the project can be found here: http://serenity.itjobsboard.eu. The application code is tested in a TDD style using automated unit, integration and functional tests.

\n\n

The sample application is based on a multi project Gradle build so the application can be automatically built using Gradle - the build tool used by Grails 3. The web application is available here: https://www.itjobsboard.eu. The admin application is available online here: https://admin.itjobsboard.eu - users admin, operator or customer with password Password123!. The deployment is done automatically to AWS cloud in a Continuous Deployment style using Jenkins.

\n\n

We use links to various external resources in this book (you will see them in the page’s footers), because this book is intended to be in electronic format from the beginning. The reader can use these links for consulting external references in an easy way.

\n\n

The book has two parts.

\n\n

First part - Grails 3 Essentials\n

\n\n

An introduction to application development with Grails 3; we describe the main application that will be implemented in the second part of the book

\n\n

Chapter 1 is an introduction to the framework. You will find here some history of the framework and a lot of links to the Grails resources; it is presenting the classical three layered architecture for a web application provided by Grails 3

\n\n

Chapter 2 describes how to start your work with Grails 3 framework and how to install all the tools for a free working environment - free as much as possible because you have to pay some money for the best tools on the market

\n\n

Chapter 3 presents the project we want to implement as an example; it is presenting also the way we choose to work on implementing the sample application, based on BDD, TDD, CI and CD; it shows how the main application is split into multiple parts based on Grails 3 profiles

\n\n

Second part - Practical example with Grails 3\n

\n\n

A practical implementation of a greenfield application with Grails 3; the application is composed of multiple parts corresponding to various Grails 3 profiles

\n\n

Chapter 4 describes the implementation of the application admin portal that will be used in Intranet by the site administrators, based on a classical Grails 3 Web profile

\n\n

Chapter 5 describes the implementation of the application site exposed to the Internet to the customers, that is based on Grails 3 Angular profile

\n\n

Chapter 6 describes a REST web API exposed with Grails 3 Rest profile and consumed by a mobile hybrid application created with Ionic 2 (published in Google Play Store, Apple App Store, and Windows Store)

\n\n

Chapter 7 describes a Microservice developed with Grails 3 Rest API profile;

\n\n\n

Introduction to Grails 3

\n\n

Grails is a full stack Web framework, covering all the aspects of a modern web application development. Its plugins system is unique in the Java world - you can divide your application into complete functional modules, containing presentation and business logic. Because it runs in JVM, it has access to the entire Java ecosystem. Because is written in Groovy, it has access to all Groovy libraries and tools.

\n\n

The main site for Grails 3 is grails.org. Here is the definition of Grails on the official site:

\n\n

\n
Grails is a powerful web framework for the Java platform, aimed at multiplying developers’ productivity, thanks to Convention-over-Configuration, sensible defaults, and opinionated APIs. It integrates smoothly with the JVM, allowing you to be immediately productive, whilst providing powerful features, including integrated ORM, Domain-Specific Languages, runtime and compile-time meta-programming, and Asynchronous programming.
\n

\n\n

If you have developed multiple applications over time, you have recognized a set of principles and good practices that can be reused. You don’t want to start from scratch each time you build your new application. Grails has good technical principles that make it a good starter for your new applications. With Grails, you have an established architecture from the beginning, and you can implement new features in an easy way, using scaffolding and the plugins ecosystem. And this is more valuable when you have to get to the market first, before your competitors.

\n\n

Some history

\n\n

Grails 3 is based on a stack of other technologies Java, Spring, Groovy, Hibernate, Sitemesh. We try here to show the history of these technologies and how they are used in Grails 3.

\n\n\n

Java history

\n\n

First it was Java, and was created by Sun Microsystems and its father was James Gosling. Java came with the idea of JVM - Java Virtual Machine that lets you Write once, Run everywhere. Everywhere means on any operating system. You write the code in a source file which is compiled to a byte code runnable by the JVM. Any operating system has an implementation for the Java Virtual Machine specification.

\n\n

Because Sun was bought by Oracle, now Java is in Oracle’s portfolio. Java is used by millions of developers (Oracle claims 10 million) and is the number one TIOBE index of most used languages in the world.

\n\n

Why was Java such a strong language from the beginning? Some clues:

\n\n

It was totally object-oriented from the beginning and let people think everything is an object (this is the name of a chapter from one of the best Java books Thinking in Java - TIJ) written by Bruce Eckel.
It eliminates the pointers and memory deallocation, letting this be handled by the JVM and the garbage collector; the GC is constantly improved by the Oracle team. G1 GC is the most advanced GC these days.
It has multithreading inside from the beginning.
It has exceptions handling inside.
It has modularity inside, represented by packages and the possibility of packaging libraries in .jar files that can be reused between projects; there are a lot of libraries on the market, and as proof, you can search a Maven global repo\n

\n\n

Java EE history

\n\n

After this was the Java EE (known in the past as J2EE or JEE) – an attempt to make it easy to create enterprise applications (compared to other 2 profiles Java SE for desktop applications and Java ME for mobile applications). The language and Java EE is specified by a committee named JCP Java Community Process, which is responsible for creating JSRs, specifications implemented by various vendors. Any JSR has a reference implementation which is a proof that the specification can be implemented.

\n\n

For example, the last specification for the Java Servlet is JSR 315: JavaTM Servlet 3.0 Specification and the reference implementation for this standard is Oracle GlassFish 3.x (RI). Grails embeds by default inside, in DEV mode, a Tomcat server and you can see what version of Java Servlet is implemented on each Tomcat version.

\n\n

Here are the Java EE Full Platform Compatible Implementations on different Java EE versions. The current version is Java EE 7, and here is the official tutorial

\n\n

Spring history

\n\n

But the Java EE standards were too de jure for the Java community, compared to a lot of frameworks that emerged in the Java open source space, considered more the facto standards like: Struts for Web, Hibernate for persistence, etc. And then Spring Framework was born as a response to this committee style and specification centric style of driving the Java future - Rod Johnson and others put the foundation, and Juergen Hoeller is now responsible for the framework as part of the Pivotal portfolio. The framework introduced Dependency Injection and reaffirmed the power of POJOs (Plain Old Java Objects) - in contrast to EJBs (Enterprise Java Beans) which were at version 2 when Spring emerged - things have improved in EJB 3.

\n\n

In time, these two technologies are evolving in parallel. For example, Java EE adopted the DI in its CDI, some implementations of JPA wrap Hibernate. Spring embraces annotations for configurations, instead of XMLs, as in Java EE. And Spring Framework has integration with some JSRs and is based on some technologies provided by Java EE.

\n\n

The main documentation for Spring Framework is the reference documentation.

\n\n

Groovy history

\n\n

Java is an imperative style programming language and, compared with functional programming languages, it suffers from accidental complexity as Venkat Subramaniam says.

\n\n

Groovy is a functional programing language that is bringing functional style to Java programming. It introduces the notion of closure which is the idea of function as a main citizen of your code. It is also a scripting language because it has the characteristic of incorporating a lot of semantics in a short syntax.

\n\n

It was started by James Strachan, back in 2003, as a dynamic language for the JVM, inspired by Ruby, but closer to Java. Guillaume Laforge become the project lead after James leaves the project, and he is still the lead today. Here is a history of the most important moments of the language and the main contributors to the project.

\n\n

The official Groovy site is groovy-lang.org. Here is the definition of Groovy on the official site:

\n\n

\n
Apache Groovy is a powerful, optionally typed and dynamic language, with static-typing and static compilation capabilities, for the Java platform aimed at improving developer productivity thanks to a concise, familiar and easy to learn syntax. It integrates smoothly with any Java program, and immediately delivers powerful features to your application, including scripting capabilities, Domain-Specific Language authoring, runtime and compile-time meta-programming and functional programming.
\n

\n\n

Some characteristics of Groovy:

\n\n

it was a way to get functional programming into JVM; it introduced closure to the Java world long before the Lambda Expressions in Java 8
it is compiled to Java bytecode that is running in JVM (there is a groovyc compiler that is compiling Groovy code to Java bytecode in the same way the javac compiler is doing with Java code)
Groovy scriptlet can be embedded in Java code and the resulted mixture is still working after compilation
is enriching the Java classes with other convenient methods resulting in a new API named GDK\n

\n\n\n\n

Grails history

\n\n

This is a timeline created by Matt Raible where he tries to describe the history of Web Frameworks.

\n\n\n

\n\n\n

As you can see in this diagram the Grails framework was born in 2008 with its first GA release. Grails 2 was released in 2011. And Grails 3 was first released in 2015.

\n\n

Here is a top of Java Web frameworks published by RebelLabs in 2017. Grails is placed on the 5th position immediately after SpringBoot (and Grails 3 has SpringBoot inside). Grails 3 is not a simple Web framework like the majority of the frameworks presented in this top but a full stack framework like Play which is the 7th position. JHipster which can be an alternative to the Grails 3 Angular(2) profile is the 10th position on the list.

\n\n\n

What makes Grails a good choice from the multitude of frameworks for building Web applications:

\n\n

Grails is a full stack web framework in the sense that you can create an entire Web application using it. It covers the web presentation, business domain and database persistence aspects of your application. Not alone, but integrating the right technologies for this: Java, Spring, Hibernate. And all of these are linked by Groovy language with is used for configuring your application - the DSL for configurations are Groovy based (now in Grails 3 you will have the option to use YAML also)
conventions over configurations \n
- for creating a service, it is enough to place a groovy file containing a class without state in /service folder without annotating it with @Service or mark it in a configuration file like in Spring or annotate with @Stateless for a EJB 3 stateless session bean
- for creating an entity, it is enough to place a POJO class in a /domain folder and no @Entity annotation like in JPA or Hibernate or declaring it in configuration files
\n
scaffolding for generating a seed application or a variety of elements starting from domain objects; it can be static (generating the corresponding files in filesystem) or dynamic (generating just proxies in memory)
environments inside from the beginning like TEST, DEV, PROD (or a custom one) letting you take different actions in runtime based on the given environment
testing inside the framework (unit - in isolation using mocking, integration, functional) using JUnit, Spock and Geb\n
static resources served in an optimized way (asset pipeline plugin replacing resources plugin)\t
asynchronous features based on plugins in first versions and directly inside in version 3 using Reactor\n
dynamic reload of classes and resources in runtime based on spring-loaded technology and on the fly reloading in Tomcat (dev mode); no server restarts are needed in development mode or products like JRebel
and many more…

\n\n

Also, the history of the companies that stay before the framework is interesting. First it was supported by G2One Inc a company founded by the Groovy and Grails project leads, Guillaume Laforge and Graeme Rocher. It was acquired by SpringSource (first Interface 21) which was on background of Spring Framework. SpringSource was acquired by VMWare and transferred to the Pivotal portfolio. In 2015, the end of support from Pivotal for Grails and Groovy was announced and Grails is now supported by OCI and Groovy was adopted by Apache Foundation.

\n\n

G2One Inc -> SpringSource -> VMware -> Pivotal -> OCI

\n\n

We present here a list of the main contributors to the Grails framework and the plugins ecosystem, Groovy or other related tools:

\n\n

\nGraeme Roche - the father of framework with more than 10 years of development
\nJeff Scott Brown - Cofounder, implementer of Rest API and Grails books writer
\nGuillaume Laforge - Groovy project lead
\nBurt Beckwith - Security guy (Spring security and other security plugins)
\nCraig Burke - Asset Pipeline suite of plugins
\nAlvaro Sanchez - Rest security plugin
\nMarco Vermeulen - SdkMan

\n\n

Here is the contributors list for Grails core Git repository\nHere is the reference documentation

\n\n

Grails application architecture

\n\n

A classical layered architecture

\n\n

If we are talking about the architecture of a Grails 3 application, we should express this in architectural design patterns. And the right place to find architectural design patterns is this book Patterns Of Enterprise Application Architecture written by Martin Fowler. His catalog of design patterns is available online. We will use a set of patterns from this book but other patterns are used inside the Grails integrated frameworks.

\n\n

First of all, a Grails application is a classical three layered architecture composed from presentation, domain and data source layers.

\n\n\n

In a Grails application, the layers are represented by:

\n\n

Presentation Layer - is a classical Model View Controller - MVC represented by Spring MVC framework. The Spring MVC framework is wrapped by Grails which has some specific elements. In Grails, the C are the Grails controllers, the V are the Grails GSP views (rendered from layouts, templates and tag libraries), and the M are the domain entities (the entities are part of the domain layer but are reused in this layer). Also, the Spring MVC framework is based on Servlet API, JSPs, tag libraries and is responsible for interaction with the user via HTTP 1 (or 2)
Domain Layer - Is split between a Services Layer which are Spring singletons beans and a Domain Model of entities which are the mappers to the database
Data Source Layer - represented by GORM framework and domain entities which are classical Active Record. Gorm offers access to Sql databases and is based on Hibernate which is based also on Java JDBC API and uses SQL for queries.

\n\n\n

Because it is a technology stack, we have to deal with a lot of knowledge and abstraction:

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n

Layer	Presentation Layer	Domain Layer	Data Source Layer
Patterns	MVC	Service Layer & Domain Model	Active Record
Frameworks and libraries	Spring MVC	Spring Beans, DI, Transactions	GORM (Hibernate and NoSql)
Java technologies	Servlets, JSP, tag libraries	POJO	JDBC
Basic technologies	HTML and HTTP	-	SQL

\n\n

Some observations:

\n\n

The domain/persistence entities are used in the entire Grails application from presentation to the persistence with different roles; they are primary persistence objects having state and persistence methods (CRUD operations but also finders generated dynamically by the Grails framework) but you can choose to enrich them with other functionality because they are part of the domain layer
\nDependency injection (which is coming from Spring) is used for injecting services in other services and in controllers
The services layer acts as a façade or as an API to the layer in front of it; typically, on this layer we will offer the ACID transactional support
Controllers from the MVC are responsible just for managing the user interaction flow and will not contain any logic; the place for logic is in the services (and eventually in the domain entities)

\n\n

New technologies inside Grails 3

\n\n

Grails 3 is a rewrite of Grails 2 and now is based on Spring Boot and not just on Spring framework. The old build system (Gant scripts) are replaced with Gradle with is already used by Spring Boot. This migration has a downside - all the plugins have to be migrated to the new Grails version. The good thing is that the most important plugins were already been migrated by the Grails community. And a set of plugins are not needed anymore because they can be replaced with Gradle plugins and Spring starters.

\n\n

Spring Boot

\n\n

You can access the reference documentation for SpringBoot.

\n\n

Some advantages from having Spring Boot as your Grails 3 heart:

\n\n

All Spring Boot starters (starter is the SpringBoot plugin system) are available for your application
In SpringBoot you can have both Java and Groovy source files
Some new technologies like websockets and reactive (Reactor project) are available now to your Grails application via Spring Boot

\n\n

Gradle

\n\n

In Grails 3, the old Gant scripts were replaced with Gradle build tool. You can access the Gradle main site. The Gradle user guide is also available. Gradle is the third generation build tool for Java after Ant and Maven and has inside all the accumulated experience from its predecessors.

\n\n

We present here a diagram from a report published by ZeroTurnaround’s RebelLabs which provided a timeline of build tools for Java ecosystem from 1977 through 2013

\n\n\n

\"A — A evolution of build tool timeline

\n\n\n

As an example of its importance, Gradle was chosen by Google as the de facto build tool for Android projects. We try to enumerate here just a part of the advantages that come with Gradle:

\n\n

All Gradle plugins are now available for you and can now be used in a variety of aspects of building
The main scripting language in Grails is (still) Groovy, the same scripting language used in Grails. In this way, it will be simple for you to improve your build system whenever you like.
Gradle is now offering the possibility to create multi projects builds for Grails 3

\n\n

Gorm

\n\n

Starting with Grails 3 the database persistence part of the framework named Gorm was extracted completely outside the framework by the Grails team and was redesigned to be a wrapper over both Sql and NoSql databases. Also, starting with Gorm 4, this persistence framework can be used outside of Grails applications (in other Spring Boot applications for example).

\n\n

In the new Gorm with Hibernate integration (which was the default persistence mechanism in Grails 1 and 2), you can still have support to the main SQL databases on market: MySql, Oracle, Postgresql, MsSql Server, etc. Also the framework is now offering support for other persistence technologies like the NoSql databases: MongoDB, Neo4j, Cassandra, Redis. And the trend of Gorm is to use non-blocking drivers and to offer as reactive an approach as possible.

\n\n

LogBack

\n\n

LogBack is the most modern logging framework (the successor of Log4J) and it comes to Grails 3 because was chosen as the logging framework for Spring Boot. You can access the LogBack main site.

\n\n

Modularity aspects of Grails

\n\n

Plugins

\n\n

Plugins were a main feature of Grails from the beginning of the framework. Here is the list of Grails 3 plugins. Even the framework itself in his core is a bunch of essential internal plugins. In fact, Grails is an aggregator for its plugins. If you look in a web profile of a Grails application you can see the default Grails plugins that are declared for this profile (will be different plugins for different profiles)

\n\n

 1 dependencies {\n 2     ....\n 3     compile \"org.grails:grails-core\"\n 4     compile \"org.grails:grails-dependencies\"\n 5     compile \"org.grails:grails-web-boot\"\n 6     compile \"org.grails.plugins:cache\"\n 7     compile \"org.grails.plugins:scaffolding\"\n 8     compile \"org.grails.plugins:hibernate5\"\n 9     console \"org.grails:grails-console\"\n10     profile \"org.grails.profiles:web\"\n11     runtime \"com.bertramlabs.plugins:asset-pipeline-grails:2.11.6\"\n12     testCompile \"org.grails:grails-plugin-testing\"\n13     testCompile \"org.grails.plugins:geb\"\n14     ....\n15 }\n

\n\n\n\n

Here we try to enumerate some plugins and let you understand how many technologies can be accessible in such a simple way:

\n\n

internal plugins\n
- \nHibernate plugin is the plugin with the GORM implementation for Hibernate 5 persistence framework\n
- \nAsset Pipeline it is responsible for rendering in an optimal way (unification in one file, compression, minification, and cache-digests) for static resource in Web pages; it is a replacement for the old Resources plugin from Grails <2.x and there are other plugins responsible for other aspects of serving resources: compile of CSS from LESS and SASS, trans-piling of Javascript from CoffeeScript
\n
external plugins\n
- \nSpring Security Core Plugin is the plugin responsible for the security of the Grails applications; it is based on Spring Security library and it has a lot of companion plugins for other aspects of security - for example Spring Security REST Plugin for REST API security
- \nQuartz plugin for Grails is the plugin responsible with scheduling jobs based on a well known Java library Quartz; you can use it with another plugin Quartz Monitor Grails Plugin responsible for monitoring the list of jobs
- \nMail plugin is the plugin that can be used to send emails via a configurable SMTP server
- \nElastic Search plugin will let you implement search for your site; your data is indexed using Elastic Search library
- \nAudit Logging plugin can be used for auditing your application activity
\n

\n\n

About plugin’s benefits:

\n\n

should be declared in configuration files and are resolved as dependencies in a Maven, Ivy, Gradle style
expose Grails constructs like services, controllers, views, entities, et cetera
come with configurations that must be added to main app configuration file
easy to integrate Java, Groovy and even client side JavaScript libraries into Grails applications

\n\n

Profiles

\n\n

Profiles were introduced in Grails 3 and now we can create different types of applications, not just the main type that was available till now, based on a server side HTML rendered interface using technologies like Gsp (based on a MVC framework on the server side). Now we can create a Grails 3 application that is just exposing a web service API without a classical server side rendered Web interface. Also, we can create a rich client directly from the server side - using scaffolding in the same way we have done till now for the classical type.

\n\n

This is in accord with the global trend of IT industry these days which is trying to break the monolith application into small pieces, introducing the concept of Miroservices. In these days, Java EE is creating a new Microprofile for microservices in addition to their Full Profile and Web Profile.

\n\n

You can see very clear the evolution of software architecture in the last decades in a tweet from Benoit Hediard:

\n\n\n

Another reason for this profiles movement is the need to expose just Web services and not a HTML based Web interface. And this is more valuable in the context of the mobile application and the mobile first approach in developing applications. That’s why a new set of server side rendering technologies were introduced in Grails 3 like Grails Views that are rendering JSON and XML from domain objects.

\n\n

Here you have the complete list of Grails 3 profiles. Here is the Git official repository for Grails 3 profiles.

\n\n

These are the profiles introduced in Grails 3:

\n\n

angular - A profile for creating applications using AngularJS
rest-api - Profile for REST API applications
base - The base profile extended by other profiles
angular2 - A profile for creating Grails applications with Angular 2
plugin - Profile for plugins designed to work across all profiles
profile - A profile for creating new Grails profiles
react - A profile for creating Grails applications with a React frontend
rest-api-plugin - Profile for REST API plugins
web - Profile for Web applications
web-plugin - Profile for Plugins designed for Web applications
webpack - A profile for creating applications with node-based frontends using webpack

\n\n

Some details about the most important profiles that will be used in the application built in this book:

\n\n

web - is a profile for creating classical Grails applications with a server side MVC framework in the same way it was in Grails 1 and 2; the presentation web interface is rendered on the server side
rest-api - is a profile for creating applications that are exposing REST APIs; don’t have a Web presentation and no MVC is needed
angular(2) - is a profile for creating applications with a rich client based on AngularJS(1 or 2 versions) Javascript framework where MVC is located on client side (JavaScript) and the communication with the server side is via REST

\n\n\n

The Mobile Application - Rest API Profile

\n\n

About this chapter content

\n\n

First, we will install Ionic 2 and all the development tools for Android, iOs and Windows Phone. We will generate our client app using Ionic CLI, and we will describe the anatomy of an Ionic 2 application. We will improve and document our exposed REST API, and we will add security using JWS tokens. We will deploy our app to all the tree known mobile app stores.

\n\n

Here are the primary resources for this application:

\n\n

the source code for the Ionic 2 client is stored in GitHub: https://github.com/colaru/mvp-application/tree/master/app-web/ionic-client\n
the REST API documentation: https://app.swaggerhub.com/api/colaru/ItJobsBoard/1.0.0\n
mobile app in GooglePlay Store: https://play.google.com/store\n
mobile app in Apple AppStore: http://www.apple.com/itunes\n
mobile app in Microsoft Store: https://www.microsoft.com/en-us/store/top-free/apps/mobile\n

\n\n

Introduction to Ionic 2 and Hybrid Mobile Applications

\n\n

There are a big number of smartphones and tablets on the market, each having a given operating system and is produced by a given manufacturer. We live in the years when the number of mobile phones overcomes the number of desktop and laptop computers, and the difference is still growing (Google is reporting that there are more searches from mobile now than from desktops).

\n\n

There are some stores today where you can publish your mobile application based on its operating system. There are some signs that in a number of devices Android is the winner in the market (~70%), followed by iOS (~20%). Windows Phone has just a few percents but they choose to invest in mobile in the last time and your application can be also available to other Windows 10 devices like PC, tablet, Xbox due to UWP (Windows 10 is around 25% from desktop OS market). Here is the list of major mobile operating systems on the market:

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n

Devices	OS	Store	Language
Android phones and tablets	Google Android	PlayStore	Android(Java)
iPhone and iPad	Apple iOs	AppStore	Objective-C or Swift
Microsoft phones and tablets	Windows Phone	WindowsStore	C#, Visual Basic

\n\n

Google is the owner of Android OS and the devices are manufactured by many others like Samsung, Motorola, etc. There is a reference device Google Pixel series manufactured by Google. Till now it was Nexus, but the manufacturer was not Google. The programming language is Java (Android is derived from Java), and the development tool is Android Studio (based on IntelliJ Idea now, in the past was Eclipse) which can run on Linux, Windows or Mac operation systems.

\n\n

Apple is the owner of the iOs operating system and is also the manufacturer of the iPhones and iPads. The programming language in Objective C with the addition of a more scripting language named Swift. The development tool is named XCode, and you need a Mac OS system to develop your application.

\n\n

Microsoft is the owner of Windows Phone operating system and is manufacturing itself some physical devices - based on acquired Nokia company. Starting with version 10, the Windows and Windows Phone are sharing the same store and is possible to publish a mobile app and will be available on mobile and desktop at the same time due to Universal Windows Platform - UWP. You can program in C# or other .Net language. The development tool is Microsoft Visio Studio available on Windows OS.

\n\n

It is hard to develop applications for all the stores because you have to know a multitude of languages Android(Java) for Java, Objective-C or Swift for iOs, C# or Visual Basic for Windows. A solution for this (write once publish everywhere) is to create hybrid applications using tools like Ionic.

\n\n

Ionic is a tool for creating hybrid mobile applications combining some other tools: Apache Cordova and AngularJS 2. An Ionic application is a web HTML5 AngularJS application (composed from HTML, JS, CSS) that is running in a browser on the device WebView. It has access to the native platform via JavaScript calls offered by Cordova framework. Ionic 2 is a rewrite of Ionic 1 with AngularJS 2 inside (AngularJS 2 is also using TypeScript instead of JavaScript). We will use this second version of the Ionic framework in this book.

\n\n

Install Ionic 2

\n\n

First, we will install Ionic 2 on our machine, and for this, we need NodeJS. Download (LTS - Long Term Support version) and install it on your machine. After installation you can verify:

\n\n

1 npm version\n

\n\n\n\n

You will get something similar with this:

\n\n

 1 { npm: '3.10.10',\n 2   ares: '1.10.1-DEV',\n 3   http_parser: '2.7.0',\n 4   icu: '57.1',\n 5   modules: '48',\n 6   node: '6.9.5',\n 7   openssl: '1.0.2k',\n 8   uv: '1.9.1',\n 9   v8: '5.1.281.89',\n10   zlib: '1.2.8' }\n

\n\n\n\n

We have NodeJS 6.9.5 and NPM 3.10.10. We need NPM for managing JavaScript libraries (similar with yum or apt package managers in Linux). Next, we install ionic and cordova using NPM:

\n\n

1 npm install -g ionic cordova\n

\n\n\n\n

You can

\n\n

1 ionic -version\n2 cordova --version\n

\n\n\n\n

I get 2.0.0 for Ionic and 6.5.0 for Cordova.

\n\n

You have to install Android platform and iOS platform on your machine (we hope you have a Mac OS to be able to install both). This because you have to publish your application in store, you need the binary for each platform .apk for Android .ipa for iOS.

\n\n

For Android, you can follow this Cordova Android Platform Guide. If you already have Java JDK installed you have to install Android Studio (you will be familiar with it if you are already using IntelliJ Idea) which is coming with:

\n\n

SDK Manager - will let you install the Android SDK (at a given level)
ADV Manager - will let you configure the Android emulators
Android Device Monitor- will let you see your devices logs

\n\n

For iOS, you can follow this Cordova iOS Platform Guide. You have to install the XCode first which is coming with the SDK, iOs and iPad emulators and all you need to deploy your app in production.

\n\n

For Windows 10 follow this Cordova Windows Platform Guide. You have to install at least Visual Studio Community Edition 2015/2017 which is free. You will get the Windows phone SDK, the emulator and all you need to deploy your application in production.

\n\n

You can use a virtualization solution (VirtualBox for example) if you are on Mac or Linux for running the Windows OS - you can get images available for free for one month. If you want a Linux box you have OsBoxes.

\n\n

Generate client app

\n\n

Now you are prepared to start your first application using Ionic 2 and its Command-Line-Interface - CLI. We will generate a sidemenu starter application - we will have a side menu. There are two other alternatives blank and tabs. We will locate our client in app-web module near our static HTML client we made.

\n\n

1 cd ~/MVPS/mvp-application/app-web\n2 ionic start --v2 ionic-client sidemenu\n

\n\n\n\n

We used the –v2 flag to create a Ionic 2 project (otherwise, the old Ionic 1 project is generated). The confirmation:

\n\n

 1 Creating Ionic app in folder ~/MVPS/mvp-application/app-web/ionic-client based on sidemenu \\\n 2 project\n 3 Downloading: https://github.com/driftyco/ionic2-app-base/archive/master.zip\n 4 [=============================]  100%  0.0s\n 5 Downloading: https://github.com/driftyco/ionic2-starter-sidemenu/archive/master.zip\n 6 [=============================]  100%  0.0s\n 7 Installing npm packages...\n 8 \n 9 Adding initial native plugins\n10 [=============================]  100%  0.0s\n11 \n12 Adding in iOS application by default\n13 \n14 Saving your Ionic app state of platforms and plugins\n15 Saved platform\n16 Saved plugins\n17 Saved package.json\n18 \n19 ♬ ♫ ♬ ♫  Your Ionic app is ready to go! ♬ ♫ ♬ ♫\n20 .......\n

\n\n\n\n

Now build it and run it:

\n\n

1 ionic build\n2 ionic serve --lab\n

\n\n\n\n

We will see the app as it looks on all three platforms:

\n\n\n

\n\n\n

Now, if we look at the structure of generated app:

\n\n

1 tree ionic-client -L 2 | pbcopy\n

\n\n\n\n

We will see this folders structure:

\n\n

 1 ionic-client\n 2 ├── config.xml\n 3 ├── hooks\n 4 │   └── README.md\n 5 ├── ionic.config.json\n 6 ├── node_modules\n 7 │   ├── @angular\n 8 │   ├── @ionic\n 9 │   ├── @types\n10 ├── package.json\n11 ├── platforms\n12 │   ├── ios\n13 │   └── platforms.json\n14 ├── plugins\n15 │   ├── cordova-plugin-console\n16 │   ├── cordova-plugin-device\n17 │   ├── cordova-plugin-splashscreen\n18 │   ├── cordova-plugin-statusbar\n19 │   ├── cordova-plugin-whitelist\n20 │   ├── fetch.json\n21 │   ├── ionic-plugin-keyboard\n22 │   └── ios.json\n23 ├── resources\n24 │   ├── android\n25 │   ├── icon.png\n26 │   ├── ios\n27 │   └── splash.png\n28 ├── src\n29 │   ├── app\n30 │   ├── assets\n31 │   ├── declarations.d.ts\n32 │   ├── index.html\n33 │   ├── manifest.json\n34 │   ├── pages\n35 │   ├── service-worker.js\n36 │   └── theme\n37 ├── tsconfig.json\n38 ├── tslint.json\n39 └── www\n40     ├── assets\n41     ├── build\n42     ├── index.html\n43     ├── manifest.json\n44     └── service-worker.js\n

\n\n\n\n

This is a classical Ionic 2 application folders structure. We describe here the main folders and files:

\n\n

config.xml - is the main configuration file for an Ionic application; you describe your app metadata, required device access rights, preferences and used Cordova plugins.
/plugins - is the place where all Cordova plugins are located
/www - here are the application place after build
/src - is where the Angular 2 application is located

\n\n

Angular 2

\n\n

We will investigate the generated Ionic application from the Angular 2 point of view. And we will make some changes - we will prepare the app for our needs. A significant change from previews version of Angular is the use of TypeScript in replacement for JavaScript - you can see the .ts extensions for script files. There are other changes from an Ionic 1, but the main concepts are the same - a migration guide is available.

\n\n

Let see the structure of the app:

\n\n

1 tree ~/MVPS/mvp-application/app-web/ionic-client/src\n

\n\n\n\n

We will see:

\n\n

 1 ├── app\n 2 │   ├── app.component.ts\n 3 │   ├── app.html\n 4 │   ├── app.module.ts\n 5 │   ├── app.scss\n 6 │   └── main.ts\n 7 ├── assets\n 8 │   └── icon\n 9 │       └── favicon.ico\n10 ├── declarations.d.ts\n11 ├── index.html\n12 ├── manifest.json\n13 ├── pages\n14 │   ├── page1\n15 │   │   ├── page1.html\n16 │   │   ├── page1.scss\n17 │   │   └── page1.ts\n18 │   └── page2\n19 │       ├── page2.html\n20 │       ├── page2.scss\n21 │       └── page2.ts\n22 ├── service-worker.js\n23 └── theme\n24     └── variables.scss\n

\n\n\n\n

We see that we have 2 pages. For each page, we have an entry in the pages folder. Let’s create other pages using Ionic CLI.

\n\n

First, let’s create a new index page:

\n\n

1 ionic g page index\n

\n\n\n\n

Then a page for showing the jobs:

\n\n

1 ionic g page jobs\n

\n\n\n\n

And we will delete the default created pages (Page1 and Page2):

\n\n

1 tree ~/MVPS/mvp-application/app-web/ionic-client/src/pages\n

\n\n\n\n

We will see:

\n\n

1 ├── index\n2 │   ├── index.html\n3 │   ├── index.scss\n4 │   └── index.ts\n5 └── jobs\n6     ├── jobs.html\n7     ├── jobs.scss\n8     └── jobs.ts\n

\n\n\n\n

Let’s create a service for communicating with the server:

\n\n

1 ionic g provider jobsData\n

\n\n\n\n

The service will be created on providers folder and will be named jobs-data.ts:

\n\n

1 nano ~/MVPS/mvp-application/app-web/ionic-client/src/providers/jobs-data.ts\n

\n\n\n\n

We will add the code for listing the jobs from REST API:

\n\n

 1 import {Injectable} from '@angular/core';\n 2 import {Http} from '@angular/http';\n 3 import 'rxjs/add/operator/map';\n 4 import { GlobalVariable } from '../app/global';\n 5 \n 6 @Injectable()\n 7 export class JobsData {\n 8 \n 9   data;\n10 \n11   constructor(public http: Http) {\n12     console.log('Enter JobsData Provider');\n13   }\n14 \n15   listJobs() {\n16     return this.http.get(GlobalVariable.BASE_API_URL + \"/job\").map((res) => res.json())\n17   }\n18 }\n

\n\n\n\n

We will inject this service in our page component and we will call the listJobs method:

\n\n

1  sublime ~/MVPS/mvp-application/app-web/ionic-client/src/pages/jobs/jobs.ts\n

\n\n\n\n

The code:

\n\n

 1 import { Component } from '@angular/core';\n 2 import { NavController, NavParams } from 'ionic-angular';\n 3 import { JobsData } from \"../../providers/jobs-data\";\n 4 import { GlobalVariable } from '../../app/global';\n 5 \n 6 @Component({\n 7   selector: 'page-jobs',\n 8   templateUrl: 'jobs.html'\n 9 })\n10 export class JobsPage {\n11 \n12   selectedItem: any;\n13   icons: string[];\n14   items: any;\n15   contextPath: string;\n16 \n17   constructor(public navCtrl: NavController, public navParams: NavParams, public jobsData: \\\n18 JobsData) {\n19     // If we navigated to this page, we will have an item available as a nav param\n20     this.selectedItem = navParams.get('item');\n21     this.contextPath = GlobalVariable.BASE_API_URL\n22 \n23     jobsData.listJobs().subscribe(data => {\n24       this.items = data;\n25       console.log(\"Data: \" + JSON.stringify(this.items, null, 2))\n26     });\n27   }\n28 \n29   itemTapped(event, item) {\n30     this.navCtrl.push(JobsPage, {\n31       item: item\n32     });\n33   }\n34 }\n

\n\n\n\n

And we will adapt the page template to show the jobs as cards:

\n\n

1 nano ~/MVPS/mvp-application/app-web/ionic-client/src/pages/jobs/jobs.html\n

\n\n\n\n

And here is the code:

\n\n

 1 <ion-header>\n 2   <ion-navbar>\n 3     <button ion-button menuToggle>\n 4       <ion-icon name=\"menu\"></ion-icon>\n 5     </button>\n 6     <ion-title>Jobs List</ion-title>\n 7   </ion-navbar>\n 8 </ion-header>\n 9 \n10 <ion-content padding class=\"cards-bg social-cards\">\n11   <ion-card *ngFor=\"let item of items\" (click)=\"itemTapped($event, item)\">\n12 \n13     <button ion-item >\n14       <ion-avatar item-left>\n15         <img style=\"width: 50px; length: 50px\" src=\"{{contextPath}}/renderLogo?id={{item.pu\\\n16 blisher.id}}\"\n17              alt=\"{{item.publisher.name}}\"\n18              class=\"img-responsive\">\n19       </ion-avatar>\n20       <h2>{{item.title}}</h2>\n21       <p>{{item.dateCreated}}</p>\n22     </button>\n23 \n24     <ion-card-content>\n25       <p>{{item.description}}</p>\n26     </ion-card-content>\n27   </ion-card>\n28 \n29   <div *ngIf=\"selectedItem\" padding>\n30     You navigated here from <b>{{selectedItem.title}}</b>\n31   </div>\n32 </ion-content>\n

\n\n\n\n

The result is here:

\n\n

1 ionic serve\n

\n\n\n\n

The jobs page on our web page:

\n\n\n

\n\n\n

The result is here:

\n\n

1 ionic run android\n

\n\n\n\n

The jobs page on our device:

\n\n\n

Cordova

\n\n

Apache Cordova is a part of Ionic Framework and is a JavaScript framework that can be used to make a native call from a browser to the native platform, independent of its type: Android, iOs or Windows Phone. It is exposing a unified API that can be used on all three platforms (or other supported platforms). First, it was named PhoneGap and it was acquired by Adobe, and became Apache project under the name Apache Cordova. Here is a discussion about the distinctions between the two.

\n\n

First of all, the main configurations for the mobile application are in config.xml file. Lets change the name of the application and other metadata:

\n\n

 1 <?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>\n 2 <widget id=\"eu.itjobsboard.mobile\" version=\"0.0.1\" \n 3 xmlns=\"http://www.w3.org/ns/widgets\" \n 4 xmlns:cdv=\"http://cordova.apache.org/ns/1.0\">\n 5   <name>ItJobsBoard</name>\n 6   <description>It jobs board application</description>\n 7   <author email=\"admin@itjobsboard.eu\" \n 8   href=\"http://itjobsboard.eu\">It Jobs Board Team\n 9   </author>\n10 .....\n11 </widget>\n

\n\n\n\n

We will discuss two aspects of Cordova: plugins and platforms.

\n\n

Cordova, it is a plugin-able system, and there is a list of plugins available on the market (mostly free). You can see the list of plugins already installed on your application:

\n\n

1 ionic plugin list\n

\n\n\n\n

You will see:

\n\n

1 cordova-plugin-console 1.0.5 \"Console\"\n2 cordova-plugin-device 1.1.4 \"Device\"\n3 cordova-plugin-splashscreen 4.0.1 \"Splashscreen\"\n4 cordova-plugin-statusbar 2.2.1 \"StatusBar\"\n5 cordova-plugin-whitelist 1.3.1 \"Whitelist\"\n6 ionic-plugin-keyboard 2.2.1 \"Keyboard\"\n

\n\n\n\n

They are located on plugins folder:

\n\n

1 tree ~/MVPS/mvp-application/app-web/ionic-client/plugins -L 1\n

\n\n\n\n

You will see:

\n\n

 1 plugins\n 2 ├── android.json\n 3 ├── cordova-plugin-console\n 4 ├── cordova-plugin-device\n 5 ├── cordova-plugin-splashscreen\n 6 ├── cordova-plugin-statusbar\n 7 ├── cordova-plugin-whitelist\n 8 ├── fetch.json\n 9 ├── ionic-plugin-keyboard\n10 └── ios.json\n

\n\n\n\n

And are declared on config.xml file:

\n\n

1 cat ~/MVPS/mvp-application/app-web/ionic-client/config.xml\n

\n\n\n\n

You will find the list of declared plugins:

\n\n

1 <plugin name=\"ionic-plugin-keyboard\" spec=\"~2.2.1\"/>\n2 <plugin name=\"cordova-plugin-whitelist\" spec=\"1.3.1\"/>\n3 <plugin name=\"cordova-plugin-console\" spec=\"1.0.5\"/>\n4 <plugin name=\"cordova-plugin-statusbar\" spec=\"2.2.1\"/>\n5 <plugin name=\"cordova-plugin-device\" spec=\"1.1.4\"/>\n6 <plugin name=\"cordova-plugin-splashscreen\" spec=\"~4.0.1\"/>\n

\n\n\n\n

Each time you want a plugin you have to declare it here in config.xml.

\n\n

Cordova let you install platforms - various operating systems where you can publish your application. The ios platform was added the first time I generated the application. We can add Android in this way:

\n\n

1 ionic platform app android\n

\n\n\n\n

If you want to see a list of platforms, use this command:

\n\n

1 ionic platforms list\n

\n\n\n\n

And the response:

\n\n

 1 Installed platforms:\n 2   android 6.1.2\n 3   ios 4.1.1\n 4 Available platforms: \n 5   amazon-fireos ~3.6.3 (deprecated)\n 6   blackberry10 ~3.8.0\n 7   browser ~4.1.0\n 8   firefoxos ~3.6.3\n 9   osx ~4.0.1\n10   webos ~3.7.0\n

\n\n\n\n

The platform content is stored in platforms folder:

\n\n

1 tree ~/MVPS/mvp-application/app-web/ionic-client/platforms -L 1\n

\n\n\n\n

You will see the installed platforms:

\n\n

1 platforms\n2 ├── android\n3 ├── ios\n4 └── platforms.json\n

\n\n\n\n

Now we can start to work on a given platform. We can use the iOs emulator to play our application:

\n\n

1 ionic emulate ios\n

\n\n\n\n\n

\"The — The application running on iOS emulator

\n\n\n

Or we can run our application on an Android device connected by USB to our computer (it has to be set in developer mode):

\n\n

1 ionic run android\n

\n\n\n\n\n

\"The — The application running on an Android device

\n\n\n

If you want to see the list of available commands, run:

\n\n

1 ionic --list\n

\n\n\n\n

Ionic Native

\n\n

Ionic Native is a collection of the best free Cordova plugins already integrated into Ionic 2 - you still have to declare and install the plugin, but you have the API exposed in Angular 2 style. The Ionic Native script is already installed in any new generated Ionic 2 application. It is a replacement for ngCordova from Ionic 1. We will enumerate just a few plugins (part of Ionic Native) that can be used in your commercial application just for illustrating the possible native features that can be accessed via plugins:

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n

Plugin name	Description
AdMob	Plugin for Google Ads, including AdMob / DFP (double-click for publisher) and mediations to other Ad networks.
App Rate	The AppRate plugin makes it easy to prompt the user to rate your app, either now, later, or never.
File	This plugin implements a File API allowing read/write access to files residing on the device.
Geolocation	This plugin provides information about the device’s location, such as latitude and longitude.
Google Analitycs	This plugin connects to Google’s native Universal Analytics SDK
InApp Purchase	A lightweight Cordova plugin for in app purchases on iOS/Android.
InAppBrowser	Launches in app Browser
Splashscreen	This plugin displays and hides a splash screen during application launch.
SMS	Send SMS from your application

\n\n

You can use all the Cordova plugins even if they are not part of Ionic Native. You can also use commercial plugins - Ionic is offering a marketplace on Ionic Market for this.

\n\n

We will investigate 2 plugins here. First, we will change the default splash-screen (and the application icon) showing the Splashscreen plugin already used in the generated app. And we will introduce InAppBrowser plugin for displaying our external links in our application (not into a different window in the system browser).

\n\n

So, the Splashscreen plugin is declared in config.xml file and is used in app.component.ts where the splash-screen is hidden after the application is started:

\n\n

 1 import { StatusBar, Splashscreen } from 'ionic-native';\n 2 .....\n 3 initializeApp() {\n 4     this.platform.ready().then(() => {\n 5       // Okay, so the platform is ready and our plugins are available.\n 6       // Here you can do any higher level native things you might need.\n 7       StatusBar.styleDefault();\n 8       Splashscreen.hide();\n 9     });\n10 }\n

\n\n\n\n

All that we will do is to replace the default splash-screen image and icon generated by Ionic. These images are stored in resources folder:

\n\n

1 tree ~/MVPS/mvp-application/app-web/ionic-client/resources -L 2\n

\n\n\n\n

The files:

\n\n

1 ├── android\n2 │   ├── icon\n3 │   └── splash\n4 ├── icon.png\n5 ├── ios\n6 │   ├── icon\n7 │   └── splash\n8 └── splash.png\n

\n\n\n\n

The icon is icon.png and the splash-screen is splash.png. From these 2 files we can generate all the resources files for our platforms (various devices with different screens resolutions) using the resources command (after we modified the images using a tool like Gimp or Photoshop):

\n\n

1 ionic resources\n

\n\n\n\n

With the result (also the config.xml will be changed to reflect the newly generated files):

\n\n

1 Ionic icon and splash screen resources generator\n2  uploading icon.png...\n3  uploading splash.png...\n4 icon.png (1024x1024) upload complete\n5 splash.png (2208x2208) upload complete\n6 .......\n

\n\n\n\n

Next we will add the InAppBrowser plugin entering a new line in config.xml:

\n\n

1 sublime ~/MVPS/mvp-application/app-web/ionic-client/config.xml\n

\n\n\n\n

Add the plugin declaration in the config file (we installed it and declare it at the same time - see the –save option):

\n\n

1 ionic plugin add cordova-plugin-inappbrowser --save\n

\n\n\n\n

The confirmation:

\n\n

1 Fetching plugin \"cordova-plugin-inappbrowser@1.6.1\" via npm\n2 Installing \"cordova-plugin-inappbrowser\" for android\n3 Installing \"cordova-plugin-inappbrowser\" for ios\n4 Saved plugin info for \"cordova-plugin-inappbrowser\" to config.xml\n

\n\n\n\n

We will change the method called when a job posted is tapped in jobs.ts:

\n\n

1 itemTapped(event, item) {\n2     // we use _self instead of _system\n3     let browser = new InAppBrowser(item.jobUrl, '_self');\n4 }\n

\n\n\n\n

See this call from jobs.html where the method is called:

\n\n

1 <ion-card *ngFor=\"let item of items\" (click)=\"itemTapped($event, item)\">\n

\n\n\n\n

Rest API

\n\n

In this subchapter, we will improve our REST API. We will first try to clarify what is a RET API; we will document our API using Swagger, we will add token based security for our REST API

\n\n

From verbs to nouns

\n\n

The way the applications can communicate in a distributed way is an old subject. First was the idea of RPC - Remote procedure calls - remote calls between programs running on different machines which are exposing procedures/methods using binary data for messages transportation.

\n\n

Cordoba was such an initiative for communicating between different languages. Java RMI it was an initiative for communicating between JVMs running on different physical machines.

\n\n

The next evolution step were Web Services using HTTP protocol for communication and XML or JSON (text and not binary data) for messages. SOAP was a first success in the Web Services market was but is still have to be used - is based on XML messages and still has a procedural style of exposing an API. That’s way other types of Web Services emerged like REST.

\n\n

REST - Representational State Transfer principles were enunciated first time by https://twitter.com/fielding in his 2000 Ph.D. dissertation Architectural Styles and the Design of Network-based Software Architectures

\n\n

REST is built around HTTP standard:\n* you expose resources to the world (nouns)\n* we don’t have other methods to operate on the resources than the HTTP commands (GET, POST, PUT, DELETE, …) (verbs)\n* the HTTP error codes are used for errors (2XX, 3XX, 4XX, …)\n* you have a unique intelligible URI to operate with a resource\n* texts are used for messages (JSON is preferred when we can process it from JavaScript on client side)

\n\n

Swagger specification

\n\n

One of the interesting parts of SOAP is the WSDL - Web Services Description Language specification. WSDL specification is a contract describing the exposed API that can be used in many ways. Can be used to generate the client or the server. It can also be itself generated by the server side. It is the central point of a SOAP API.

\n\n

In the case of REST there were some tries to define such an interface (WADL, RAML) but finally, we have a winner on the market. It is Open API that is a try to standardize a well-known schema model globally from Swagger. Will let you define your API in JSON or YAML. Swagger let you not just to specify your API but also to use this specification for documenting your API - you can easily generate a documentation of your API for your users, and they can test it in real-time.

\n\n

Let’s document our REST API. There are some Grails 2 plugins for generating the Swager spec via annotations and show the spec in Swagger-UI, but none of them is working in Grails 3. Swaggydoc plugin has an update for Grails 3 but is not working - the project is no longer maintained.

\n\n

The solution, in this case, is to use the tools that Swagger site is offering. They are offering an online Swagger editor for editing our Swagger specs in JSON or YMAL. We have the chance to generate clients or servers in a multitude of programming languages from Swagger specifications using Swagger Codegen. We also have an option to store a Swagger specification online and to view it on Swagger-UI on Swagger Hub. We created a hosted Swagger specification for the version 1.0.0 of our project:

\n\n

1 open https://app.swaggerhub.com/api/colaru/ItJobsBoard/1.0.0\n

\n\n\n\n

Swagger YAML content:

\n\n

  1 swagger: '2.0'\n  2 info:\n  3   description: It Jobs Board Europe API\n  4   version: \"1.0.0\"\n  5   title: itjobsboard.eu exposed API\n  6   contact:\n  7     email: admin@itjobsboard.eu\n  8   license:\n  9     name: Apache 2.0\n 10     url: http://www.apache.org/licenses/LICENSE-2.0.html\n 11 \n 12 tags:\n 13 - name: admins\n 14   description: Secured Admin-only calls\n 15 - name: customers\n 16   description: Operations available to regular developers\n 17 schemes:\n 18 - https\n 19 paths:\n 20   /jobs:\n 21     get:\n 22       tags:\n 23       - customers\n 24       summary: list jobs\n 25       operationId: list\n 26       description: |\n 27         List all available jobs in the system.\n 28       produces:\n 29       - application/json\n 30       parameters:\n 31       - in: query\n 32         name: limit\n 33         description: maximum number of records to return\n 34         type: integer\n 35         format: int32\n 36         minimum: 0\n 37         maximum: 50\n 38       responses:\n 39         200:\n 40           description: search results matching criteria\n 41           schema:\n 42             type: array\n 43             items:\n 44               $ref: '#/definitions/Job'\n 45         400:\n 46           description: bad input parameter\n 47 definitions:\n 48   Job:\n 49     type: object\n 50     required:\n 51     - id\n 52     - active\n 53     - applyInstructions\n 54     - contactEmail\n 55     - description\n 56     - jobUrl\n 57     - title\n 58     properties:\n 59       id:\n 60         type: number\n 61         example: 1\n 62       active:\n 63         type: boolean\n 64         example: true\n 65       applyInstructions:\n 66         type: string\n 67         example: admin@stackoverflow.com\n 68       contactEmail:\n 69         type: string\n 70         example: admin@stackoverflow.com\n 71       dateCreated:\n 72         type: string\n 73         format: int32\n 74         example: 2017-01-31T20:16:26Z\n 75       description:\n 76         type: string\n 77         example: Build a stock position monitoring system to support our existing trading e\\\n 78 ngines. This will consist of a server and also client APIs in C and Java.\n 79       expirationDate:\n 80         type: string\n 81         format: int32\n 82         example: 2017-01-31T20:16:26Z\n 83       jobUrl:\n 84         type: string\n 85         example: https://stackoverflow.com/jobs/132418/software-developer-silver-fern-inves\\\n 86 tments\n 87       lastUpdated:\n 88         type: string\n 89         format: int32\n 90         example: 2017-01-31T20:16:26Z\n 91       publisher:\n 92         $ref: \"#/definitions/Publisher\"\n 93       remote:\n 94         type: boolean\n 95         example: true\n 96       salaryEstimate:\n 97         type: string\n 98         example: 1000000 per year\n 99       tags:\n100         type: array\n101         items:\n102           $ref: \"#/definitions/Type\"\n103       title:\n104         type: string\n105         example: Software Developer\n106       type:\n107         $ref: \"#/definitions/Type\"\n108   Publisher:\n109     type: object\n110     required:\n111     - id\n112     properties:\n113       id:\n114         type: number\n115         example: 1\n116   Type:\n117     type: object\n118     required:\n119     - id\n120     properties:\n121       id:\n122         type: number\n123         example: 1\n124   Tag:\n125     type: object\n126     required:\n127     - id\n128     properties:\n129       id:\n130         type: number\n131         example: 1\n132       \n133 host: itjobsboard.eu\n134 basePath: /api/v1.0/\n

\n\n\n\n

REST Security on the server side

\n\n

We will introduce security for our Ionic application based on Spring Security for Grails plugin. In this case, we use JWT cryptographic tokens - JSON Web Tokens instead of classical Java Web session based security used in the admin application. This is a full stateless style of offering security to application specific to B2C applications - the clients are not able to store a secret, and in this case, the token is often expired and it is transported via HTTPS.

\n\n

The creator of the Rest Security plugin created a workshop to accommodate with REST security Creating applications with Grails, Angular, and Spring Security.

\n\n

The simple way to implement REST security in our application is to create at the beginning your Angular(2) profile Web application with rest security enabled - –features security. This will generate your client and server already configured for security. In our case, the web-app is already generated without security. We have to do this by hand.

\n\n

Now it is a good time for versioning our REST API - a good practice because the clients will become dependent of our API and we have to migrate to new versions of API without breaking the clients. For guidelines about how to version an API see the Semantic Versioning specification. We will create a first version 1.0.0 for our API, and we will specify two new URLs for our REST API:

\n\n

1 nano ~/MVPS/mvp-application/app-web/grails-app/controllers/app/web/UrlMappings.groovy\n

\n\n\n\n

We will expose two resources - jobs and featured jobs. We want the list of featured jobs to be seen by everybody, but we want the entire list of jobs to be visible just for authenticated users (it is not a really security case here but is enough to illustrate the security concepts):

\n\n

1 \"/api/v1.0/jobs\"(controller: \"job\", action: \"listAll\")\n2 \"/api/v1.0/featuredJobs\"(controller: \"job\", action: \"listFeatured\")\n

\n\n\n\n

We create two new controllers in JobController:

\n\n

1 nano ~/MVPS/mvp-application/app-web/grails-app/controllers/app/admin/jobsboard/JobControlle\\\n2 r.groovy\n

\n\n\n\n

And the controllers:

\n\n

 1 @Secured([\"ROLE_CUSTOMER\"])\n 2 def listAll(Integer max) {\n 3     params.max = Math.min(max ?: 10, 100)\n 4     respond Job.list(params), model:[jobCount: Job.count()]\n 5 }\n 6 \n 7 @Secured([\"permitAll\"])\n 8 def listFeatured(Integer max) {\n 9     params.max = 1\n10     params.order = \"desc\"\n11     params.sort = \"title\"\n12     respond Job.list(params), model:[jobCount: Job.count()]\n13 }\n

\n\n\n\n

Now we will protect these resources accordingly using JWT tokens security. For this, first we have to change the security core plugin with rest security plugin (all the core features are still part of this REST plugin):

\n\n

1 sublime ~/MVPS/mvp-application/app-web/build.gradle\n

\n\n\n\n

We will change to:

\n\n

1 //    compile 'org.grails.plugins:spring-security-core:3.1.1'\n2 compile \"org.grails.plugins:spring-security-rest:2.0.0.M2\"\n

\n\n\n\n

If we restart the app we will have the confirmation of the installation for this REST plugin (and the core plugin is still there):

\n\n

1 Configuring Spring Security Core ...\n2 ... finished configuring Spring Security Core\n3 \n4 \n5 Configuring Spring Security REST 2.0.0.M2...\n6 ... finished configuring Spring Security REST\n

\n\n\n\n

Now we have to configure the security filters for the newly added plugin. We have to add the stateless filters for our API path /api/** (we keep state-full filters for this path /*). Also because we will have *permitAll access to some of our API resources we will enable enableAnonymousAccess = true for our version 1.0 of our API and set stateless filters to it:

\n\n

1 sublime ~/MVPS/mvp-application/app-web/grails-app/conf/application.groovy\n

\n\n\n\n

Now the security settings for filters chains will look like this:

\n\n

 1 grails {\n 2 \tplugin {\n 3 \t\tspringsecurity {\n 4 \t\t\tfilterChain {\n 5 \t\t\t\tchainMap = [\n 6 \t\t\t\t\t\t//Stateless chain\n 7 \t\t\t\t\t\t[pattern: '/api/v1.0/**',    filters: 'anonymousAuthenticationFilter,restTokenValidat\\\n 8 ionFilter,restExceptionTranslationFilter,filterInvocationInterceptor'],\n 9 \t\t\t\t\t\t[pattern: '/api/**',         filters: 'JOINED_FILTERS,-anonymousAuthenticationFilter,\\\n10 -exceptionTranslationFilter,-authenticationProcessingFilter,-securityContextPersistenceFilt\\\n11 er,-rememberMeAuthenticationFilter'],\n12 \n13 \t\t\t\t\t\t[pattern: '/assets/**',      filters: 'none'],\n14 \t\t\t\t\t\t[pattern: '/**/js/**',       filters: 'none'],\n15 \t\t\t\t\t\t[pattern: '/**/css/**',      filters: 'none'],\n16 \t\t\t\t\t\t[pattern: '/**/images/**',   filters: 'none'],\n17 \t\t\t\t\t\t[pattern: '/**/fonts/**',    filters: 'none'],\n18 \t\t\t\t\t\t[pattern: '/**/favicon.ico', filters: 'none'],\n19 \n20 \t\t\t\t\t\t//Stateful chain\n21 \t\t\t\t\t\t[pattern: '/**',             filters: 'JOINED_FILTERS,-restTokenValidationFilter,-res\\\n22 tExceptionTranslationFilter']\t\t\t\t]\n23 \t\t\t}\n24 \n25 \t\t\t//Other Spring Security settings\n26 \t\t\t//...\n27 \n28 \t\t\trest {\n29 \t\t\t\ttoken {\n30 \t\t\t\t\tvalidation {\n31 \t\t\t\t\t\tenableAnonymousAccess = true\n32 \t\t\t\t\t}\n33 \t\t\t\t}\n34 \t\t\t}\n35 \t\t}\n36 \t}\n37 }\n

\n\n\n\n

Now when we make a call to /api/login with a valid user and password, we will get a response containing a valid JWT token. We can use this token to access resources under /api/v1.0/jobs path just if we are in the ROLE_CUSTOMER. And /api/v1.0/featuredJobs even if we don’t have an access token.

\n\n

REST Security on the client side

\n\n

On the client’s side, we have to introduce a new library named angular2-jwt responsible for JWT token management. First, we have to install it with NPM:

\n\n

1 cd ~/MVPS/mvp-application/app-web/ionic-client\n2 npm install angular2-jwt\n

\n\n\n\n

We have to change our index page page and added two forms, one for login and another for signup, each submitting the user credentials to the server (ngSubmit)=”login(loginCreds.value)” and (ngSubmit)=”signup(signupCreds.value)”. We show a div containing this two forms in case the user is not authenticated !auth.authenticated() and a div containing welcome info and a logout button in case of authenticated user auth.authenticated():

\n\n

1 nano ~/MVPS/mvp-application/app-web/ionic-client/src/pages/index/index.html\n

\n\n\n\n

The new content:

\n\n

  1 <ion-header>\n  2   <ion-navbar>\n  3     <button ion-button menuToggle>\n  4       <ion-icon name=\"menu\"></ion-icon>\n  5     </button>\n  6     <ion-title>Welcome</ion-title>\n  7   </ion-navbar>\n  8 </ion-header>\n  9 \n 10 <ion-content padding class=\"login auth-page\">\n 11 \n 12   <!-- Logo -->\n 13   <div text-center padding>\n 14     <h1 color=\"light\" >\n 15       <i class=\"ion-social-angular\"></i>\n 16       <ion-icon name=\"logo-angular\"></ion-icon>\n 17     </h1>\n 18     <h2 color=\"light\" >Welcome to It Jobs Board Europe</h2>\n 19     <h5 color=\"light\" >You can find online jobs our <a href=\"http://itjobsboard.eu\">web sit\\\n 20 e</a>.</h5>\n 21   </div>\n 22 \n 23   <div *ngIf=\"!auth.authenticated()\">\n 24     <div padding>\n 25       <ion-segment [(ngModel)]=\"authType\">\n 26         <ion-segment-button value=\"login\">\n 27           <b color=\"light\">Login</b>\n 28         </ion-segment-button>\n 29         <ion-segment-button value=\"signup\">\n 30           <b color=\"light\">Signup</b>\n 31         </ion-segment-button>\n 32       </ion-segment>\n 33     </div>\n 34 \n 35     <div [ngSwitch]=\"authType\">\n 36 \n 37       <!-- Login form -->\n 38       <form *ngSwitchCase=\"'login'\" #loginCreds=\"ngForm\" (ngSubmit)=\"login(loginCreds.value\\\n 39 )\">\n 40 \n 41         <ion-item>\n 42           <ion-icon item-left name=\"ios-mail-outline\"></ion-icon>\n 43           <ion-input type=\"text\" name=\"username\" placeholder=\"Email\" ngModel></ion-input>\n 44         </ion-item>\n 45 \n 46         <ion-item>\n 47           <ion-icon item-left name=\"ios-lock-outline\"></ion-icon>\n 48           <ion-input type=\"password\" name=\"password\" placeholder=\"Password\" ngModel></ion-i\\\n 49 nput>\n 50         </ion-item>\n 51 \n 52         <div padding>\n 53           <button block type=\"submit\" ion-button secondary>Login</button>\n 54         </div>\n 55 \n 56         <!-- Social login -->\n 57         <div padding text-center>\n 58           <span color=\"light\" >Or login with:</span>\n 59           <p>\n 60             <a padding class=\"facebook-color\">\n 61               <ion-icon name=\"logo-facebook\"></ion-icon>\n 62             </a>\n 63             <a padding class=\"twitter-color\">\n 64               <ion-icon name=\"logo-twitter\"></ion-icon>\n 65             </a>\n 66             <a padding class=\"googleplus-color\">\n 67               <ion-icon name=\"logo-googleplus\"></ion-icon>\n 68             </a>\n 69           </p>\n 70         </div>\n 71       </form>\n 72 \n 73 \n 74       <form *ngSwitchCase=\"'signup'\" #signupCreds=\"ngForm\" (ngSubmit)=\"signup(signupCreds.v\\\n 75 alue)\">\n 76         <ion-item>\n 77           <ion-icon item-left name=\"ios-mail-outline\"></ion-icon>\n 78           <ion-input type=\"text\" name=\"username\" placeholder=\"Email\" ngModel></ion-input>\n 79         </ion-item>\n 80 \n 81         <ion-item>\n 82           <ion-icon item-left name=\"ios-lock-outline\"></ion-icon>\n 83           <ion-input type=\"password\" name=\"password\" placeholder=\"Password\" ngModel></ion-i\\\n 84 nput>\n 85         </ion-item>\n 86 \n 87         <div padding>\n 88           <button block type=\"submit\" ion-button secondary>Signup</button>\n 89         </div>\n 90       </form>\n 91     </div>\n 92 \n 93     <div padding style=\"text-align: center\">\n 94       <p *ngIf=\"error\" class=\"error\"><ion-badge color=\"danger\" item-right>{{ error }}</ion-\\\n 95 badge></p>\n 96     </div>\n 97   </div>\n 98 \n 99   <div *ngIf=\"auth.authenticated()\">\n100     <div padding>\n101       <h1>Hello {{ user }}</h1>\n102       <button ion-button secondary block (click)=\"logout()\">Logout</button>\n103     </div>\n104   </div>\n105 </ion-content>\n

\n\n\n\n

Now the index page with some LAF improuvements will look like this:

\n\n\n

\n\n\n

And in the controller part we will implement the calls for user login (based on the introduced angular2-jwt plugin):

\n\n

1 nano ~/MVPS/mvp-application/app-web/ionic-client/src/pages/index/index.ts\n

\n\n\n\n

New content:

\n\n

 1 import { Component } from '@angular/core';\n 2 import { NavController, NavParams } from 'ionic-angular';\n 3 import {AuthService} from \"../../providers/auth\";\n 4 import {Headers, Http} from \"@angular/http\";\n 5 import {JwtHelper} from \"angular2-jwt\";\n 6 import {GlobalVariable} from \"../../app/global\";\n 7 \n 8 @Component({\n 9   selector: 'page-index',\n10   templateUrl: 'index.html'\n11 })\n12 export class IndexPage {\n13 \n14   LOGIN_URL: string = GlobalVariable.BASE_API_URL + \"/api/login\";\n15   SIGNUP_URL: string = GlobalVariable.BASE_API_URL + \"/api/signup\";\n16 \n17   auth: AuthService;\n18   // When the page loads, we want the Login segment to be selected\n19   authType: string = \"login\";\n20   // We need to set the content type for the server\n21   contentHeader: Headers = new Headers({\"Content-Type\": \"application/json\"});\n22   error: string;\n23   jwtHelper: JwtHelper = new JwtHelper();\n24   user: string;\n25   loginCreds: any = {}\n26 \n27   constructor(public navCtrl: NavController, public navParams: NavParams, private http: Htt\\\n28 p) {\n29     this.auth = AuthService;\n30     let token = localStorage.getItem('id_token');\n31     if(token) {\n32       this.user = this.jwtHelper.decodeToken(token).sub;\n33     }\n34   }\n35 \n36   login(credentials) {\n37     // alert(JSON.stringify(credentials))\n38     // credentials = {username:\"admin\", password: \"Password123!\"}\n39     if(credentials.username == \"\" || credentials.password == \"\") {\n40       this.error = \"User name and password should be provided!\"\n41     } else {\n42       this.http.post(this.LOGIN_URL, JSON.stringify(credentials), { headers: this.contentHe\\\n43 ader })\n44         .map(res => res.json())\n45         .subscribe(\n46           data => this.authSuccess(data.access_token),\n47           err => {\n48             console.log(err)\n49             if(err.status == 401) {\n50               this.error = \"Invalid password and/or username.\";\n51             }\n52             if(err.status == 400) {\n53               this.error = \"Invalid call to the server.\";\n54             }\n55           }\n56       );\n57     }\n58   }\n59 \n60   signup(credentials) {\n61     this.http.post(this.SIGNUP_URL, JSON.stringify(credentials), { headers: this.contentHea\\\n62 der })\n63       .map(res => res.json())\n64       .subscribe(\n65         data => this.authSuccess(data.access_token),\n66         err => {\n67           console.log(err)\n68           if(err.status == 401) {\n69             this.error = \"Invalid password and/or username.\";\n70           }\n71           if(err.status == 400) {\n72             this.error = \"Invalid call to the server.\";\n73           }\n74         }\n75       );\n76   }\n77 \n78   logout() {\n79     localStorage.removeItem('id_token');\n80     this.user = null;\n81   }\n82 \n83   authSuccess(token) {\n84     this.error = null;\n85     localStorage.setItem('id_token', token);\n86     var tokenData = this.jwtHelper.decodeToken(token);\n87     // alert(JSON.stringify(tokenData))\n88     this.user = tokenData.sub\n89   }\n90 \n91   ionViewDidLoad() {\n92     console.log('ionViewDidLoad IndexPage');\n93   }\n94 }\n

\n\n\n\n

The LOGIN_URL is the endpoint provided by the Grails Security plugin for exchanging the user and password into a valid token. We define a method named login based on http service which is sending the user and password and parse the response with a authSuccess method to get the token and store it in the browser local storage. In the case of an error, an error message is shown in view page via the error variable. A logout method can be used - it removes the token from local storage.

\n\n

The class JwtHelper is used to parse the token and get the username. Here is the content of a JWT token:

\n\n

 1 {  \n 2    \"principal\":\"H4sIAAAAAAAAAJVSP0/bQBR/ThNRgVSgEkgdYAE25Eh0zMTfqpUbUNMsIIEu9sM9ON+ZuzMkS5W\\\n 3 JDhlS0SJV7Vfgm7RLPwBqh67MXfvOEBxYUG+y3/38+/d8cQUVo+F5rBkXxk9FFnPpm1RzGRsMM81tx88M6ghtjniRA5\\\n 4 s0gevjlcALoMQjC0+DA3bMqoLJuLrZOsDQ1toalpSObxj3NUvwROlD/5Y7VBrvCBTU3tcSjGzDJAtDlUlbV3K9nXKN0\\\n 5 TZMFLNAhYduNBXSDUrLmTDD0BGUrCUwCmCMZfadIlWOxsL4tdnMclFtoK0F8DhlxpC7e0ka1ll3986mpARH8B7K7dSj\\\n 6 Q90tOKjvePxVJQSl5kqa+aZMVMT3uRMn/u7M2c/+t26zBECdLD78TTF/tgLd77t/Z/OivdDC9JD1AlZrp+RmsmB+q9E\\\n 7 pX37Z+nR+9WHnESk7xMb/72N++aa5zqpKUqaZVUM7ItqTsnsm8pWHyQdb6PgNnqQC6Y+SFqNbiYKY4pa1EoO+LYy+2Q\\\n 8 zW95bXXr+su9cKixIuSfVJHtptyw8U7ar35+OP/twvYngFlWMmMqTOJwpQPUtaqE8vzmfGPv/u5QkGf/M/CjCs3REDA\\\n 9 AA=\",\n10    \"sub\":\"customer\",\n11    \"roles\":[  \n12       \"ROLE_CUSTOMER\"\n13    ],\n14    \"exp\":1487790029,\n15    \"iat\":1487786429\n16 }\n

\n\n\n\n

After a successful login a response is received containing a valid token and also a refresh token that can be used for accessing pages secured with role ROLE_ADMIN (we shorted the tokens for space reasons):

\n\n

 1 {  \n 2    \"username\":\"customer\",\n 3    \"roles\":[  \n 4       \"ROLE_CUSTOMER\"\n 5    ],\n 6    \"token_type\":\"Bearer\",\n 7    \"access_token\":\"...Wok20_KnDmb5C6K3gzjM-0q2zgotwd26Hhbl3_-q-yw\",\n 8    \"expires_in\":3600,\n 9    \"refresh_token\":\"...GZi-6FOtgsZeXA5GPYs5BG_zkSzduTO8WbnmStQulLg\"\n10 }\n

\n\n\n\n

Now we can use two methods in our Jobs page for retrieving the jobs that will be shown. First is listJobs() if the user is authenticated and the second is listFeaturedJobs() if the user is not authenticated - AuthService.authenticated() the call is used for checking this.

\n\n

 1 import { Component } from '@angular/core';\n 2 import { NavController, NavParams } from 'ionic-angular';\n 3 import { JobsData } from \"../../providers/jobs-data\";\n 4 import { GlobalVariable } from '../../app/global';\n 5 \n 6 import { InAppBrowser } from 'ionic-native';\n 7 import {AuthService} from \"../../providers/auth\";\n 8 \n 9 @Component({\n10   selector: 'page-jobs',\n11   templateUrl: 'jobs.html'\n12 })\n13 export class JobsPage {\n14 \n15   selectedItem: any;\n16   icons: string[];\n17   items: any;\n18   contextPath: string;\n19 \n20   constructor(public navCtrl: NavController, public navParams: NavParams, public jobsData: \\\n21 JobsData) {\n22     // If we navigated to this page, we will have an item available as a nav param\n23     this.selectedItem = navParams.get('item');\n24     this.contextPath = GlobalVariable.BASE_API_URL\n25 \n26     if(AuthService.authenticated()) {\n27       this.listJobs()\n28     } else {\n29       this.listFeaturedJobs()\n30     }\n31   }\n32 \n33   listJobs() {\n34     this.jobsData.listJobs().subscribe(data => {\n35       this.items = data;\n36       console.log(\"Jobs: \" + JSON.stringify(this.items, null, 2))\n37     });\n38   }\n39 \n40   listFeaturedJobs() {\n41     this.jobsData.listFeaturedJobs().subscribe(data => {\n42         this.items = data;\n43         console.log(\"Featured jobs: \" + JSON.stringify(this.items, null, 2))\n44       },\n45       err => {\n46         console.log(err)\n47       });\n48   }\n49 \n50   itemTapped(event, item) {\n51     // we use _self instead of _system\n52     new InAppBrowser(item.jobUrl, '_self');\n53   }\n54 }\n

\n\n\n\n

Finally, the JobData provider has two different methods. One named listJobs that is using the authHttp provided by angular2-jwt (see the imports) - this call is injecting automatically the header Authorization:Bearer token… for the call taking the token from local storage. The second method listFeaturedJobs() is using the usual http service from Angular.

\n\n

 1 import {Injectable} from '@angular/core';\n 2 import {Http} from '@angular/http';\n 3 import 'rxjs/add/operator/map';\n 4 import { GlobalVariable } from '../app/global';\n 5 import {AuthHttp} from 'angular2-jwt';\n 6 \n 7 @Injectable()\n 8 export class JobsData {\n 9 \n10   constructor(public http: Http, public authHttp: AuthHttp) {\n11     console.log('Enter JobsData Provider');\n12   }\n13 \n14   listJobs() {\n15     return this.authHttp.get(GlobalVariable.SECURED_API_URL + \"/jobs\").map((res) => res.jso\\\n16 n())\n17   }\n18 \n19   listFeaturedJobs() {\n20       return this.http.get(GlobalVariable.SECURED_API_URL + \"/featuredJobs\").map((res) => r\\\n21 es.json())\n22   }\n23 }\n

\n\n\n\n

We can test that the /avi/v1.0/jobs is not accessible without a valid token:

\n\n

1 open http://localhost:8080/api/v1.0/featuredJobs\n

\n\n\n\n

We will get:

\n\n

1 {\"message\":\"401 UNAUTHORIZED. The request has not been applied because it lacks valid authe\\\n2 ntication credentials for the target resource.\",\"error\":401}\n

\n\n\n\n

To the app store

\n\n

Publishing to the app store is simple in the case of Google Play store because there are no so many reviews. But will be mode difficult with the Apple AppStore and Windows Store. You have to improve you application usability to be accepted in the store. You can use a professional template from Ionic Market an official Ionic market for starters, plugins, and themes. Now we will describe the steps that should de follow to publish the app in all three stores.

\n\n

Google Play Store

\n\n

The Android store is Google Play - your application is easily accepted (in hours) on this store. There are many free applications in this store, and their users are in general not paying for apps. Will cost you $25 per life for publishing in this store and Google takes 30% from revenue. The user receives 70% from revenue.

\n\n

First, you have to create a Play Developer account, and there you have to create an application and edit your Store Listing. Title and Full Description are important for ASO - be aware that around 60% of users are coming from store searches. In Manage Releases you will upload your .apk files.

\n\n\n

\n\n\n

For creating an APK from your Ionic sources you have to use this script:

\n\n

1 nano ~/MVPS/mvp-application/app-web/ionic-client/build.sh\n

\n\n\n\n

The script:

\n\n

 1 #!/bin/bash\n 2 \n 3 echo \"#################################\"\n 4 project_path=~/MVPS/mvp-application/app-web/ionic-client\n 5 android_sdk_path=~/Library/Android/sdk/build-tools/22.0.1\n 6 android_adb_path=~/Library/Android/sdk/platform-tools\n 7 app_name=ItJobsBoard.apk\n 8 \n 9 echo \"#################################\"\n10 echo $project_path\n11 echo \"#################################\"\n12 echo $android_sdk_path\n13 \n14 cd $project_path\n15 cordova build --release android\n16 cd $project_path\n17 \n18 #apk\n19 cp $project_path/platforms/android/build/outputs/apk/android-release-unsigned.apk .\n20 jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore jobsboard.keystore android\\\n21 -release-unsigned.apk jobsboard -storepass Password123!\n22 echo $android_sdk_path/zipalign\n23 $android_sdk_path/zipalign -vf 4 android-release-unsigned.apk android-$app_name\n24 \n25 $android_adb_path/adb -d install -r $project_path/android-$app_name\n

\n\n\n\n

As you can see the apk is encrypted. You have to create a keystore using this command (keytool is in bin folder of your JDK installation):

\n\n

1 keytool -genkey -v -keystore jobsboard.keystore -keyalg RSA -keysize 2048 -validity 10000 -\\\n2 alias jobsboard\n

\n\n\n\n

You have to execute it:

\n\n

1 cd ~/MVPS/mvp-application/app-web/ionic-client/\n2 ./build.sh\n

\n\n\n\n

You will find the APK file in your Ionic app folder: ionic-client/android-ItJobsBoard.apk. You have to upload it and publish the app to the store.

\n\n

Apple App Store

\n\n

The store is Apple Store - your application is verified in detail and takes around one week to be published. You can make more money from this store, and in general, there are more payable applications than free. You pay $99 per year for publishing on this store.

\n\n

Build the iOs project:

\n\n

1 ionic build ios\n

\n\n\n\n

First open the project in XCode pointing to the generated .xcodeproj file (from /plathorms/ios folder):

\n\n

1 ~/MVPS/mvp-application/app-web/ionic-client/platforms/ios/ItJobsBoard.xcodeproj\n

\n\n\n\n

You can first test the application by running the application in the XCode provided emulator using Product/Run.

\n\n

For publishing, you need to have an Apple Id. Then you have to go to your Apple developer account in the area named Certificates, Identifiers & Profiles. There you have to create an application id - in our case eu.itjobsboard.mobile.app associated with an application named ItJobsBoard. Then, you have to go to your iTunes Connect account where you have to request a new application using New App using the application id created in the previews step. There you have to complete App Information and other application data before submitting it for approval.

\n\n\n

Also, you have to upload the binary file, and this can be done in two ways. The first option is to use Product/Archive option from XCode. Second is using a distinct application named Application Loader.

\n\n

Windows App Store

\n\n

The store for Windows applications is Windows Store and is not so rich in applications like the previous stores. You have to pay $40 for starting publishing in this store. The advantage of this store is that it is a unified store for all Windows 10 applications and you can publish your application to all Windows 10 devices.

\n\n

For building your application you need a Windows 10 machine with Visual Studio 2015 or 2017 installed (you can get one for free usage for 1 month or you can buy one forever Windows 10 preinstalled with Visual Studio Community Edition). Then you have to get the project from GitHub on your Windows 10 machine (lets say you are doing this in a C:MVPS folder):

\n\n

1 cd C:\\MVPS\n2 git clone https://github.com/colaru/mvp-application.git\n

\n\n\n\n

Now you will be able to build our project:

\n\n

1 cd C:\\MVPS\\mvp-application\\app-web\\ionic-client\n2 ionic platform add windows\n3 ionic build windows\n

\n\n\n\n

Now you can open in Visual Studio the Windows 10 project located in C:MVPS\\mvp-application\\app-web\\ionic-client\\platforms\\windows and you can start publishing it to the Windows Store. You can create the deployment artifacts in Project/Store/Create App Packages and there you can choose to link to an existing application definition from your Windows Developer Center account or to create a new one. The package will be signed automatically and you have to upload it manually into the store using Project/Store/Upload App Packages.

\n\n

You don’t have support in Ionic 2 for generating icons and splash screen resources like in iOs and Android using ionic resources command but you can generate all the icons and splash screens using Properties/Visual Assets option from Visual Studio. Also Windows 10 resources can be generated using this online tool.

\n\n\n

\n\n\n

To do list

\n\n

There are a set of things we didn’t manage to implement in the sample application. We will try to implement these features in the near future, but can be a good exercise for the reader to implement them:

\n\n

Implement refresh token using angular2-jwt following this Ionic 2 sample\n
Implement users signup on client and server side
Implement a scenario where the customer can save jobs posts after login and the saves are kept on the server side after user logoff

\n\n

\n\n","tocStructure",[217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254],{"_76":77,"_43":78,"_70":-5,"_79":80,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":85,"_43":86,"_70":-5,"_79":87,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":85,"_43":92,"_70":-5,"_79":93,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":77,"_43":95,"_70":-5,"_79":96,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":85,"_43":99,"_70":-5,"_79":100,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":102,"_43":103,"_70":-5,"_79":104,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":102,"_43":106,"_70":-5,"_79":107,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":102,"_43":109,"_70":-5,"_79":110,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":102,"_43":112,"_70":-5,"_79":113,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":102,"_43":115,"_70":-5,"_79":116,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":85,"_43":118,"_70":-5,"_79":119,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":102,"_43":121,"_70":-5,"_79":122,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":85,"_43":124,"_70":-5,"_79":125,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":102,"_43":127,"_70":-5,"_79":128,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":102,"_43":130,"_70":-5,"_79":131,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":102,"_43":133,"_70":-5,"_79":134,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":102,"_43":136,"_70":-5,"_79":137,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":85,"_43":139,"_70":-5,"_79":140,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":102,"_43":142,"_70":-5,"_79":143,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":102,"_43":145,"_70":-5,"_79":146,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":77,"_43":148,"_70":-5,"_79":149,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":85,"_43":152,"_70":-5,"_79":153,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":85,"_43":155,"_70":-5,"_79":156,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":102,"_43":158,"_70":-5,"_79":159,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":102,"_43":161,"_70":-5,"_79":162,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":102,"_43":164,"_70":-5,"_79":165,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":102,"_43":167,"_70":-5,"_79":168,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":102,"_43":170,"_70":-5,"_79":171,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":85,"_43":173,"_70":-5,"_79":174,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":102,"_43":176,"_70":-5,"_79":177,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":102,"_43":179,"_70":-5,"_79":180,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":102,"_43":182,"_70":-5,"_79":183,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":102,"_43":185,"_70":-5,"_79":186,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":85,"_43":188,"_70":-5,"_79":189,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":102,"_43":191,"_70":-5,"_79":192,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":102,"_43":194,"_70":-5,"_79":195,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":102,"_43":197,"_70":-5,"_79":198,"_72":81,"_88":-5,"_89":-5,"_90":-5},{"_76":85,"_43":200,"_70":-5,"_79":201,"_72":81,"_88":-5,"_89":-5,"_90":-5},"publicChapterContent","nextChapter","sections",[],"routes/_store+/_layout","routes/_store+/_readers+/_layout","actionData","errors"]

Table of Contents

How this book is organized

First part - Grails 3 Essentials\n

Second part - Practical example with Grails 3\n

Introduction to Grails 3

Some history

Java history

Java EE history

Spring history

Groovy history

Grails history

Grails application architecture

A classical layered architecture

New technologies inside Grails 3

Spring Boot

Gradle

Gorm

LogBack

Modularity aspects of Grails

Plugins

Profiles

The Mobile Application - Rest API Profile

About this chapter content

Introduction to Ionic 2 and Hybrid Mobile Applications

Install Ionic 2

Generate client app

Angular 2

Cordova

Ionic Native

Rest API

From verbs to nouns

Swagger specification

REST Security on the server side

REST Security on the client side

To the app store

Google Play Store

Apple App Store

Windows App Store

To do list