miércoles, 28 de junio de 2017

How to configure Reactive Forms in your Angular Application?

Hey people!

Today I'm going to explain how to configure your Angular application to use Reactive Forms and how to implements your first form.

First of all, you have to install the forms module in your project:

npm install @angular/forms --save

Then, you have to modify your app.module.ts adding:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
imports: [ BrowserModule, ReactiveFormsModule ], 
declarations: [ AppComponent ], 
bootstrap: [ AppComponent ]
})

On this point, your project is prepared for using Reactive Forms.

The you have to modify the form component you want to use:
<div class="container">
  <h1>Add user</h1>
  <form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm.value, myForm.valid)">
    <div class="form-group">
      <label for="">Name</label>
      <input type="text" class="form-control" formControlName="name">
      <small [hidden]="myForm.controls.name.valid || (myForm.controls.name.pristine && !submitted)" class="text-danger">
            Name is required (minimum 5 characters).
          </small>
      <!--<pre class="margin-20">{{ myForm.controls.name.errors | json }}</pre>-->
    </div>
    <div class="form-group" formGroupName="address">
      <label for="">Address</label>
      <input type="text" class="form-control" formControlName="street">
      <small [hidden]="myForm.controls.address.controls.street.valid || (myForm.controls.address.controls.street.pristine && !submitted)" class="text-danger">
            Street required
          </small>
    </div>
    <div class="form-group" formGroupName="address">
      <label for="">Postcode</label>
      <input type="text" class="form-control" formControlName="postcode">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
    <div class="margin-20">
      <div>myForm details:-</div>
      <pre>Is myForm valid?: <br>{{myForm.valid | json}}</pre>
      <pre>Is myForm submitted?: <br>{{submitted | json}}</pre>
      <pre>myForm value: <br>{{myForm.value | json}}</pre>
    </div>
    <div class="margin-20">
      Form changes:
    </div>
    <div *ngFor="let event of events" class="margin-20">
      <pre> {{ event | json }} </pre>
    </div>
  </form>
</div>
With the typescript file of the component with the changes:

public myForm: FormGroup;
public submitted: boolean;
...

constructor(private _fb: FormBuilder) { }

...

ngOnInit() {

        // the short way
        this.myForm = this._fb.group({
            name: ['', [<any>Validators.required, <any>Validators.minLength(5)]],
            address: this._fb.group({
                street: ['', <any>Validators.required],
                postcode: ['8000']
            })
        });

}

...

save(model: User, isValid: boolean) {
        this.submitted = true;
        console.log(model, isValid);
}

You can develop your forms in many way.
Use which is more easy for you.

Try it and have fun!

miércoles, 24 de mayo de 2017

The way to implements Unit Tests in Spring Boot

For doing Tests in Spring Boot you have to know the next things:

- You need a java test and resources test directories in your project. In the resources directory you put the files for the src/test/java and the src/test/resources directory the test you want to pass when you do the maven build.
- You need am application-TEST.yml file in your resources directory for configure the test calls.
- When you implements a Test you have to use the next anotations before the class name:

@org.junit.runner.RunWith(SpringJUnit4ClassRunner.class)
@org.springframework.boot.test.SpringApplicationConfiguration(classes = ClassName.class)
@org.springframework.test.context.ActiveProfiles(value = "TEST")

- For test a Service implemented in you src/main/java directory you have to indicate this way:

@org.springframework.beans.factory.annotation.Autowired
MyService service;

- At last, you need to indicate the method that test one call like:

@org.junit.Test
public void test() {
    ... do the test and finally verify the result of the test
    assertThat(result).isEqualTo("OK");
}

Here you have implemented your first test.

For call it, you have to run the maven test option.

For skip one test, you can indicate @org.junit.Ignore and the test don't will be executed.

For skip all test, you can indicate to maven that don't want to execute test this way:

Go to run configuration and check the option skip tests.

Any question of this tip, don't doubt ask me!

Try it and have fun!

miércoles, 10 de mayo de 2017

The Electronic Signatures Types: XAdES, PAdES and CAdES

Hi everyone,

I'm currently working on Pompeu Fabra University in the Electronic Administration Department.

I'm doing a Signature Project that signs, completes and validates in XAdES, PAdES and CAdES signature types.

Now I want to explain what consists my project, the troubles I had to resolve and the conclusions.

First of all, I want to explain the signature types:

XAdES: XML Advanced Electronic Signature

This signature can sign BINARI or XML files and the way for complete and validate is different. The XAdES Signature Type generates a XML Signature file. For a correct validation, the generated signature must have a correctly hash document code. So the libraries used are important, because differents libraries generates differents XML files.

There are three Signature Types: Detached (the signature don't includes the file signed), Atached Enveloped (when the signature comprises a part of the document containing the signed data) and Atached Enveloping (when the signature contains the signed data withing itself).

PAdES: PDF Advanced Electronic Signature

This signature only can sign BINARI files. The PAdES Signature Type generate a PDF Signature file that is the result of sign or complete the PDF file we want to sign. So the PAdES Signature only exists in Atached way.

CAdES: CMS Advanced Electronic Signature

This signature only can sign BINARI files. The CAdES Signature Type generate a p7b Signature file that is a binary file. There are Atached or Detached Signature Types, but don't exists the Enveloped or Enveloping concept.

Now I'm going to explain how to implements a Sign Service:

For implements a WebService I use Spring Boot and Java 8.

First of all, you have to find the Service you want to use, in my case I choose DSS (Digital Signature Service): here is the git repository.

Take a look to the repository and, when you are ready, make the next steps:

- Add the necessaries maven dependencies.
- Find the Cookbook example and try to understand how it goes and reply the example to your code.

Is very easy to integrate the DSS Sign Service.

In a week I've integrated a PAdES Enveloped, XAdES Detached and CAdES Detached Sign Service with an indicated Certificate.

And finally, I'm going to explain how I've done a Complete and Validation Signature Service:

For implements a WebService I use Spring Boot and Java 8.

First of all, you have to find the Service you want to use. In my case, I choose Psis Client from AOC: here you have the explanations in his web.

Here AOC offers some example codes and calls for integrate his Service in your Application.

Now you are in the moment to play and improve your code.

After over 3 months you will have your Complete and Validation Signature Service, but, what it's more important, You are going to learn a lot.

I've done a Complete and Validation PAdES Enveloped, XAdES Detached and CAdES Detached Signature Service three months ago.

If you are interested in more details, contact me and we could collaborate together in your project.

miércoles, 26 de abril de 2017

How to configure MongoDB with Spring Boot in Windows 7

Hi, everyone!

Today we are going to show the steps for configuring MongoDB 3.3.4 with Spring Boot 1.5 in Windows 7.

First you have to download the MongoDB:

Here you have the official link: https://docs.mongodb.com/manual/installation/

Now here is the most important think, that don't tells the manual of mongodb:

You have to download the Windows parche: Windows6.1-KB2999226-x64.msu and it will add a dll file that is necessary for running MongoDB.

Then, you have to create the directory C:/db/data.

Then, when MongoDB is installed and you have create the directory, you have to run the file C:\Program Files\MongoDB\Server\3.4\bin\mongod.exe.

This file will open the MongoDB connection.

Here you have MongoDB running!

For the other side, you have to configure your mongoDB database connectio and driver in Spring Boot configuration.

You have to create a file named application-{environment}.yml with the next content:

spring:
    datasource:
        url: jdbc:oracle:thin:@//localhost:27017/howdyl
        driver-class-name: mongodb.jdbc.MongoDriver
    jpa:
        show-sql: true            
hibernate:
    showSql: true
    dialect: org.hibernate.dialect.Oracle10gDialect

And the magic, you run your application a mongoDB is running.

For any question, ask me!

Try it and have fun!

martes, 18 de abril de 2017

Keys for configure Bootstrap 3 in Angular 4 Project!

Hi,

Today, I'm going to explain the steps for configure Bootstrap in an Angular application.

First of all, we have to add Bootstrap in our application with:

 > npm install --save ngx-bootstrap@latest  

Then, we have to open the index.html file and add:


<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />


Then, we have all we need for use Bootstrap 3 in Angular 4.

Now, we have to configure all the html files following the structure:

<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-3">
...
</div>
... (any repeations you need)
</div>

You have to know that any div with class col-**-** need a parent div with class row.
Also, you have to know that col-xs is for mobiles dispositive, col-sm for tablets dispositives and col-lg for computer dispositive.

Here you have the documentation of the Bootstrap 3 style; All you need is here:


When you domain all this css styles, you can improve new approach for your develops.

Try it and have fun!

lunes, 10 de abril de 2017

How to migrate an Angular 2 Project to Angular 4?

Hi people,

Angular is growing ;) and now we have to migrate it to be updated!

The steps to upgrade to angular 4 are as follows:

First of all verify the Node Version:
> node -v
To actualice the version download it from: https://nodejs.org/en/download/

Then, we are going to actualice angular/cli:

First, we have to remove the actuals possibles versions:
> npm uninstall -g @angular/cli
> npm uninstall -g @angular-cli
Then, we are going to install it again:
> npm install -g @angular/cli
Then, verify the versions installed:
> ng -v
It must shows something like this:
    _                      _                 ____ _     ___ 
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | | 
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | | 
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/                                        
@angular/cli: 1.0.0                                  
node: 6.10.2                                              
os: win32 x64 
Then, goes to the Project directory and actualice the @angular version:

In Windows PC:
npm install @angular/common@next @angular/compiler@next @angular/compiler-cli@next @angular/core@next @angular/forms@next @angular/http@next @angular/platform-browser@next @angular/platform-browser-dynamic@next @angular/platform-server@next @angular/router@next @angular/animations@next --save
In Mac PC:
npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@next --save
In last, actualice typescript version:
> npm install typescript@2.2.1 --save
And finally, start the project:
> ng serve

viernes, 31 de marzo de 2017

How to generate a Method with Generic Classes in Java?

Wellcome again,

Today I'm going to explain how to generate methods with generic classes in the call in Java.

First of all, I'm going to show you an example:

        public <T> T convertirDesdeXml(Class<T> c, byte[] xml) {
XStream xStream = new XStream();
xStream.alias(c.getSimpleName(), c);
T objecte = (T)xStream.fromXML(new String(xml));
return objecte;
}

This example converts an xml in byte[] format to a generic object.

We have to use a placeholder that is presented with <T> syntax. A placeholder is a String name that represents any object type that you will use in the context (the class, a method, an static call, etc.).

The placeholder <T> indicates that you can use the class T like a generic type in the method.

You can complicate the call like <T extends java.util,Map>. This new example indicates that the placeholder T extends the interface Map or, what is the same, the operator instanceof returns true.

You can complicate the call like <T, K>. In this example you use two placeholder and you can you the number of placeholder you want.

With the placeholder you have your first generic method with generic classes.

Thanks for the read!

Try it and have fun!