jeudi 21 mars 2019

Auto document your Spring Boot REST API with Springfox

Documentation is usually a pain for the developpers. If you use Spring Boot, there is a way to automatically generate the documentation, from you code, with no effort at all.
Interested ? Let's do it now.

Prerequisites

  • A GIT client 
  • JDK >= 1.8
  • maven

Get the sample code

In a previous article, I built a REST API with Spring Boot to access a mongo database. You can start from this code. 

See the article here :

Customize the code

Add the dependencies in your pom.xml

In order to work, you need some extra libraries. In the dependencies bloc, add the following sub-blocs :



<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-swagger2</artifactId>
    <version>2.9.2</version>
</dependency>
<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-swagger-ui</artifactId>
    <version>2.9.2</version>
</dependency>
<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-data-rest</artifactId>
    <version>2.9.2</version>
</dependency>

  • swagger2 is necessary to generate the swagger file from your classes. It's a big JSON file, containing the documentation. 
  • swagger-ui allows you to generate the GUI of your documentation. Unlike the swagger file, it's human readable.
  • data-rest is a complement to generate the documentation for a REST repository, which is our case here

Downgrade the Spring Boot version

Ooops. At this time, with springfox 2.9.2, you cannot use Spring boot 2 together with Springfox Data Rest. There is an issue in their github. 

Modify in the version sub bloc of the parent bloc :


    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.19.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>


If you have a clue to make it work with Spring Boot 2, please leave a comment !

Add the swagger config class

Now, to make the Spring Boot magic happen, you need to add a class in src/main/java/com/example/demo

Call it SwaggerConfig.java with the folloging content :


import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;

@Configuration
@EnableSwagger2
public class SwaggerConfig {
    @Bean
    public Docket api() {
        return new Docket(DocumentationType.SWAGGER_2)
                .select()
                .apis(RequestHandlerSelectors.any())
                .paths(PathSelectors.any())
                .build();
    }
}



Enable swagger on the application class

Edit the DemoApplication.java in the following :


package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Import;
import springfox.documentation.spring.data.rest.configuration.SpringDataRestConfiguration;
import springfox.documentation.swagger2.annotations.EnableSwagger2;

@SpringBootApplication
@EnableSwagger2
@Import(SpringDataRestConfiguration.class)
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }

}



And you're done !

Build and run your application

As in the previous article build and run the app :

$ mvn clean install
$ java -jar  java -jar demo-0.0.1-SNAPSHOT.war

 Browse your documentation

  • To get the swagger file (JSON) :
http://localhost:8080/v2/api-docs
  •  To get the swagger-ui (HTML) :
http://localhost:8080/swagger-ui.html

  • The full code can ge cloned from github :
git clone https://github.com/benoittouron/autodocumented-rest-api.git


mercredi 13 mars 2019

Deploy a fullstack app in the cloud using GCP - part 5

Step 5 : Move your front end to the cloud

Prerequisites

  • Have gcloud installed : https://cloud.google.com/sdk/install
  • Have a google account, with billing enabled (see step 3 for details)
  • Have the backend up and running on the cloud (step 3)
  • Have the front end up and running locally (see step 4)
  • Have node.js, npm and ng installed (see step 2)

Switch to a new GCP project

For the first time (you never deployed the app, and never created the configuration)

  • Create a new gcloud configuration for the front 
gcloud config configurations create front
  • If you are behind a corporate proxy 
gcloud config set proxy/address [address_of_your_proxy]
gcloud config set proxy/port [port_of_youor_proxy]
gcloud config set proxy/type http
  • Then 
gcloud init
  • Choose 1 - Re-initialize configuration
  • Then choose your google account (or login with a new account)
  • Create a new project (first time) or Select an existing project (you should see the project for the backend, do not use this project !)
  • The project name will be part of the URL, select an appropriate name

Or, if the configuration "front" already exists

gcloud config configurations activate front

Build an deploy at hand

Do the following steps at leat once, to understand what's happening. After that, I provide an automatic npm script.
  • Build the app : ng build --prod
  • Copy the content of dist/gcpfullstack-front to the folder dep/dist. With gitbash or cmder :
cp -r dist\gcpfullstack-front dep/dist
  •  Deploy the app
cd dep 
gcloud app deploy

  • If you are creating a new project, select the region
  • Review the informations (including the URL) and confirm by Y
  • Browse the appspot URL and let the magic happen

Build and deploy with the NPM script

  • If you look in the package.json, you will find a script called dep
  • Run the dep script
npm run dep

  • And that's it. Your app is in the cloud. Yeeepee ! 

lundi 11 mars 2019

Deploy a fullstack app in the cloud using GCP - part 4

Step 4 - The front end

Now we are going to build the front end application with Angular 7. Once again, this is not a Angular tutorial. You can download the code, customize it a little (follow the steps of the tutorial), run it locally and at the end push it to GCP.
This tuto is inspired by https://coursetro.com/posts/code/171/Angular-7-Tutorial---Learn-Angular-7-by-Example. I recommand you to have a look if you want to better understand Angular.

Prerequisites

  • As always, you need a GIT client to get the source code. Under Windows, use gitbash : https://gitforwindows.org/ You will get a GIT client and a BASH environment for the same price !
  • Install node.js : https://nodejs.org/en/download/
  • NPM commands do not seem to work well with gitbash. You can either use the good old cmd.exe, or a smarter terminal like cmder : https://cmder.net/

Download the source

  • Just use GIT and do the following in git bash :
git clone https://github.com/benoittouron/gcpfullstack-front.git
  • Edit the file src/app/data.service.ts
Adjust the URL in the getUsers fonction :
getUsers() { 
  return this.http.get('https://your_project_name.appspot.com/people') 
}
Adjust the project name with the URL of your backend (you should have got it in step 3). You can find the app name in your GCP console.

  •  Connect to your GCP console : https://console.cloud.google.com/ 



  1. Select your project clicking in the top blue nav bar
  2. Click the icon on the top left, and select AppEngine
  3. Select Services
  4. Right click on the service name to get the URL (copy link)

Download the dependencies

  • Download the dependencies with npm. From cmd.exe or cmder (but not gitbash) :
$ cd gcpfullstack-front
$ npm install

Feed the database

  • Use Postman. Create 2 POST requests (creation)
  • Endpoint = https://your_project_name.appspot.com/people
  • Headers = Content-Type : application/json 
  • Body of the first request :
 {
"firstName" : "Steve",
"lastName" : "Jobs",
"avatar" : "https://avataaars.io/?avatarStyle=Circle&topType=LongHairCurvy&accessoriesType=Kurt&hairColor=Platinum&facialHairType=BeardMagestic&facialHairColor=Platinum&clotheType=ShirtVNeck&clotheColor=Pink&eyeType=EyeRoll&eyebrowType=UpDown&mouthType=Default&skinColor=DarkBrown"
}

  • Body of the second request :

 {
"firstName" : "Bill",
"lastName" : "Gates",
"avatar" : "https://avataaars.io/?avatarStyle=Circle&topType=LongHairMiaWallace&accessoriesType=Blank&hairColor=Red&facialHairType=MoustacheFancy&facialHairColor=Platinum&clotheType=ShirtScoopNeck&clotheColor=Blue03&eyeType=EyeRoll&eyebrowType=UnibrowNatural&mouthType=Smile&skinColor=DarkBrown
"
}

Start the server locally

  • At the root of the source, simply do :
npm start

  • The application is up and running on the 4200 port. Visit http://localhost:4200

  • Appreciate the webpack magic : edit a HTML or TS component. The changes are automatically shown in the browser. No need to reload the page ! 
  • Example (optionnal) : edit the file src/app/home/home.component.html. Change <h1>Users</h1> by <h1>The great users</h1> , save the file. The browser is automatically refreshed. 
  • Great. You front app is now running locally. Next step, move it to the cloud !

dimanche 3 mars 2019

Deploy a fullstack app in the cloud using GCP - part 3

Step 3 - Move the backend to the cloud

Now that your backend is running locally and consumes your online MongoDB instance, it's time to move your app to GCP.

Create a google account with billing activated

No stress ! You need a credit card to activate the billing, but google gives a 300$ credit for free, and you have 1 year to consume it.
If you do only tests, not production, it's free for 1 year. 

  • Click on the "Activate" Button on the top-right corner, and follow the assistant. You need to enter your card number, but you won't be charged without giving your authorization.

Create a project for the backend

  • In the nav bar, click "Select a project', and 'New project' in the popup
  • Then enter the name of yout project in the text box.
  • I recommand to modify the ID of the project, because the ID will be part of the URL. It will make your URL smarter.
  • To do this, click "Modify" button
  • Wait for the project to be created
  • Go to your new project (nav bar "Select project")
  • Activate appengine. On the right side, click "App Engine"
  • Click "Create an application", and select your region.
  • Then select :
  • Language : Java
  • Environment : Standard 

Note :

It is a way to create the project directly from the gcloud command (without using the GCP console). Unfortunatly, when I try this, there are network issues with the MongoDB. If anybody has any clue about that, please leave a comment !

Install the gcloud SDK

  • Click the "Download SDK" button and follow the instructions.

For the first time (you never deployed the app, and never created the configuration)

  • Create a new gcloud configuration for the back 
gcloud config configurations create back
  • If you are behind a corporate proxy 
gcloud config set proxy/address [address_of_your_proxy]
gcloud config set proxy/port [port_of_youor_proxy]
gcloud config set proxy/type http
  • Then 
gcloud components install app-engine-java
    $ gcloud init
    • Choose 1 - Re-initialize configuration
    • Then choose your google account (or login with a new account)
    • Select the project you created at the previous step
    • The project name will be part of the URL, select an appropriate name

    Or, if the configuration "back" already exists

    gcloud config configurations activate back

    Deploy the application

    • Just do the following command :
    ./mvnw -DskipTests appengine:deploy
    • At the end, the public URL of your app is displayed :
    [INFO] GCLOUD: Deployed service [default] to [https://xxx_yourappname.appspot.com]

    Test the app online

    • As in local, you can use Postman to test.
    • If you are behing a proxy, do not forget to adjust the postman settings.
    • Take your local testsuite, change the URL from http://localhost:8080 by https://xxx_yourappname.appspot.com, as displayed by the Maven build (previous step).
    • Great, now your backend is up and running in the cloud. Next step : build the frontend locally !

    samedi 2 mars 2019

    Deploy a fullstack app in the cloud using GCP - part 2


    Step 2 : the backend

    Prerequisites

    • The MongoDB database up and running (see step 1)
    • A git client (install gitbash if you are under Windows)
    • An Java IDE. May suggest IntelliJ : https://www.jetbrains.com/idea/download/ . The community edition is fine.
    • A JDK version 8. The JAVA_HOME environment pointing to the directory

    Steps

    Now it's time to do some code. For the backend, we will use Java and Spring Boot (could have been node.js, maybe in another article !).

    This is not a Java/Mongo tutorial, so we will just use the Spring sample code as a basis, and customize it to make it work on the cloud.

    To get more details, look at this tutorial : https://spring.io/guides/gs/accessing-mongodb-data-rest/

    • Clone the following repo with GIT : https://github.com/benoittouron/gcpfullstack-back.git
    git clone https://github.com/benoittouron/gcpfullstack-back.git
    • If you try to launch the server locally, it will fail because you do not have a Mongo instance. Before launching the server and test it locally, edit the file called : src/main/resources/application.properties with the following content :
    spring.data.mongodb.uri=mongodb://admin:PASSWORD@clusterXX
    spring.data.mongodb.database=rest_tutorial
    • Replace the URI with your URI. To get it, connect to your Mongo instance https://cloud.mongodb.com/ (see the previous tutorial) 
    • Click the "Connect" button, then "Connect your application" and select driver=Java, version=3.4
    The version 3.4 is important. v 3.6 URIs do not work with GCP.
    • Do not forget to change the password in the URL.
    • The parameter spring.data.mongodb.database is the name of the database created on the previous episode.
    • Now, you can build and run the server locally. 
    cd gcpfullstack-back
    ./mvnw.cmd clean install
    cd target
    java -jar demo-0.0.1-SNAPSHOT.war
    • You can also use your favorite IDE.
    • To test the server, you can either use CURL as in the Spring tutorial, or Postman
    • Get postman at https://www.getpostman.com/downloads/ and install it
    • Create a new collection called RestTutorial
    • Create GET request to http://localhost:8080 and run it. You should get the links to the API.
    • To create a person, use a POST request :
    • URL = http://localhost:8080/people
    • Body =
      {  
       "firstName" : "Frodo",
       "lastName" : "Baggins" 
      }
      

    • You can verify that the datas have been saved to your online Mongo instance. 
    • Use the mongo shell as shown in the first episode and to the following commands :
    use rest_tutorial
    show collections => the collection "person" has been created
     db.person.find({}) => displays the persons created by your API
    • Cool, you can now fill your online database. Next step : move the backend application to the cloud !

    vendredi 1 mars 2019

    Deploy a fullstack app in the cloud using GCP - part 1

    The goal




    What we want to do is developping a sample application, with a backend and a frontend.
    • The backend will be in Java/Springboot, the database will be MongoDB
    • The frontend will be Angular
    A the end, the app will run in the cloud, and be accessible worldwide, thanks to the google infrastructure.

    Ready to go ? Lest's start !

    References

    For this article, I combined some tutorials. Here are the links :

    https://www.codementor.io/gtommee97/rest-api-java-spring-boot-and-mongodb-j7nluip8d
    https://www.opencodez.com/java/use-mongodb-atlas-with-spring-boot.htm
    https://spring.io/guides/gs/accessing-mongodb-data-rest/
    https://cloud.google.com/community/tutorials/mongodb-atlas-appengineflex-nodejs-app

    Step 1 : create the database


    In order to be cloud ready, you need to create a mongoDB instance online. 
    To do this, we will use MongoDB Atlas. It's the Database As A Service for Mongo. The instance can be obtained for free. No need to give your credit card number ! Cooool.



    • Either login or create a new account (click Register and fill the form). It's quick and free.
    • Once logged, click the button "Build a Cluster"

    • In "Cloud provider and region", choose GCP and Europe-West-1 (or another which is free).



    • Click the "create cluster" button at the bottom. Cluster creation starts.
    • While it is working, you can do the next steps. Click "Get Started"

    • Click "Create your first database user". The system will guide you (showing where to click)
    • As shown, click "Security" / "Add new user". Create an admin user. Use a strong password. Don't forget that your instance is on a public network.
    • Now, configure the firewall. Click "Get Started" / "Whitelist your IP address"
    • Follow the assistant. In the dialog, click "Allow access from anywhere" (we will improve security later).



    • Click the "Confirm" button. Wait a couple of minutes that the rules are OK.
    • Go back to the "Overview" tab, then click the "Connect" button, and "Connect with the Mongo Shell"
    • Choose your platform and download the mongo shell. Unzip it and put the "mongo" executable in your path.
    • Click "Short SRV connection String", copy the connection string (part "2") and run the command in a terminal
    • When prompted, enter the password for the admin user you created in a previous step.
    • Now, you are ready to create the database : 
    use rest_tutorial

    • Create the collection 

    db.createCollection("pets");

    • Insert some data
    db.pets.insertMany([
    { "name" : "Spot", "species" : "dog", "breed" : "pitbull" }, { "name" : "Daisy", "species" : "cat", "breed" : "calico" }, { "name" : "Bella", "species" : "dog", "breed" : "australian shepard"
    ]); 


    • Verify that your datas are accessible :
    db.pets.find({});


    • Congrats ! Your database is now online. Next step : create the SpringBoot application to consume this database.



    lundi 30 novembre 2009

    Custom application router with Mobicents/Tomcat and Eclipse

    Introduction

    This tutorial shows how to create a custom application router, deploy it and debug inside Eclipse.
    Prerequisites : follow the tutorial Developping a simple SIP application with Mobicents and Eclipse.

    Create the project


    The workspace can be found on the Mobicents-public google group : click here.
    • In the File menu, click new/Java project.
    • In the dialog, enter "approuter" as project name, then click Finish.
    • Edit the Java build path for the new approuter project (right click on your project, then properties/Java build path).
    • Click Add Library, Server runtime, Mobicents
    • From the package explorer, create a package org.example.servlet.sip
    • In this package, add a file called ApplicationRouter.java (right clic/new/file)
    • Cut'n'paste the following :
    package org.example.servlet.sip;

    import java.io.Serializable;
    import java.util.List;
    import java.util.Properties;

    import javax.servlet.sip.SipServletRequest;
    import javax.servlet.sip.ar.SipApplicationRouter;
    import javax.servlet.sip.ar.SipApplicationRouterInfo;
    import javax.servlet.sip.ar.SipApplicationRoutingDirective;
    import javax.servlet.sip.ar.SipApplicationRoutingRegion;
    import javax.servlet.sip.ar.SipRouteModifier;
    import javax.servlet.sip.ar.SipTargetedRequestInfo;

    public class ApplicationRouter implements SipApplicationRouter {


    public SipApplicationRouterInfo getNextApplication(SipServletRequest r,
    SipApplicationRoutingRegion rr,
    SipApplicationRoutingDirective rd, SipTargetedRequestInfo tri,
    Serializable s) {

    System.out.println("**** Approuter called ****");
    return new SipApplicationRouterInfo("SimpleServlet",SipApplicationRoutingRegion.ORIGINATING_REGION,r.getFrom().toString(),null,SipRouteModifier.NO_ROUTE,null);
    }


    public void init() {
    System.out.println("**** Approuter V2 started ****");
    }


    public void init(Properties arg0) {
    System.out.println("**** Approuter started ****");
    }

    public void applicationDeployed(List arg0) {
    System.out.println("**** Deploy ****");
    }

    public void applicationUndeployed(List arg0) {

    System.out.println("**** Undeploy ****");

    }

    public void destroy() {
    System.out.println("**** Approuter destroy ****");

    }

    }


    • Add the file ApplicationRouterProvider.java
    package org.example.servlet.sip;

    import javax.servlet.sip.ar.SipApplicationRouter;
    import javax.servlet.sip.ar.spi.SipApplicationRouterProvider;

    public class ApplicationRouterProvider extends SipApplicationRouterProvider{

    private final ApplicationRouter appRouter = new ApplicationRouter();

    public ApplicationRouterProvider() {
    }

    public SipApplicationRouter getSipApplicationRouter() {
    return appRouter;
    }
    }



    • Generate the approuter.jar (right clic/export/java/jar file)

    Configure your server

    Now, we will tell the Mobicents server running inside Eclipse to use your application router instead of the standard one.

    • In the servers pane, double clic on your server
    • Clic "Open launch configuration"
    • In the classpath tab, under "User Entries", add your approuter.jar (clic Add external jar)


    • In the "Arguments" tab, add "-Djavax.servlet.sip.ar.spi.SipApplicationRouterProvider=org.example.servlet.sip.ApplicationRouterProvider"


    • Start the server. You should see in the log file that Mobicents is actually using your custom AR.
    • Call your server with x-lite (see previous tutorial). You should get the Ringback. Check the log file "approuter used".