viernes, 23 de febrero de 2018

Internationalization in Angular

Here we come again!

Today we will learn how to implement the externalization in angular easily and in a few steps.

Step 1: Add the necessary libraries to our package.json file.

"dependencies": {
...
"@ngx-translate/core": "8.0.0",
"@ngx-translate/http-loader": "2.0.0",
...
},

Step 2: Configure our application to use a folder of language files.

app.module.ts

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClientModule, HttpClient } from '@angular/common/http';

@NgModule({
declarations: [ AppComponent ],
imports: [
...
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
})
...
],
providers: [ ],
bootstrap: [ AppComponent ]
})
export class AppModule { }

export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

Step 3: Define a component where you can change the language.

language;

languages: Language[] = [
new Language("ca","CATALÀ"),
new Language("es","ESPAÑOL"),
new Language("en","ENGLISH")
];

constructor(private route: ActivatedRoute,
private translate: TranslateService) {
var userLang = "";
this.route.queryParams.subscribe(params => {
if(!params['lang'] || params['lang'] == "") {
userLang = this.language;
} else {
userLang = params['lang'];
}
console.log("queryParams:" + userLang);

if(!userLang || userLang == "") {
userLang = navigator.language;
}

if(userLang) {
userLang = userLang.toLowerCase();
if(userLang.length > 2) {
userLang = userLang.substring(0, 2);
}
}
if(userLang == "ca" || userLang == "es" || userLang == "en") {
this.changeLanguage(userLang);
} else {
this.changeLanguage("ca");
}
});

}

public changeLanguage(language) {

console.log(language);

// canviar l'idioma per defecte usat a les traduccions
this.translate.setDefaultLang(language);
// canviar l'idioma a usar per fer les traduccions
this.translate.use(language);

// canviem l'idioma seleccionat
this.language = language;
}

@NgModule({
imports: [ ... ],
declarations: [ ... ],
exports: [ ...],
providers: [ TranslateService ]
})

Step 4: Use the Pipe translate to get the translations of the language files.

pageComponent.html

...
{{ 'field' | translate }}
...

Step 5: Create the json files with the translations.

en.json

{
"field": "traduction of my first field"
}

Here we could make all the necessary translations in our pages and components.

If we wanted that when choosing a language, the other components and pages of our application were translated, where we had loaded arrays of information, we should do the following:

Step 1: Subscribe an Observable where to load the array.

projects: Project[];

public static updateStuff: Subject<any> = new Subject();

constructor(
private projectService: ProjectService) {
ProjectsComponent.updateStuff.subscribe(res => {
// here fire functions that fetch the data from the api
this.getProjects();
});
}

ngOnInit(): void {
this.getProjects();
}

getProjects(): void {
this.projectService.getProjects()
.then(projects =>
{ this.projects = projects }
);
}

Step 2: Call the Subscription when we change the language.

import { ProjectsComponent } from '../projects/projects.component';

public changeLanguage(language) {
...
ProjectsComponent.updateStuff.next(false);
...
}

I hope you have helped the tutorial.

Any questions, do not hesitate to ask.




miércoles, 7 de febrero de 2018

How to search your web on google.com

Hi,

Like all people know, google have a domain for region. For example, for searching your web on google in Spain you have to use https://www.google.es, for searching your web in USA you have to use https://www.google.com.

But we have a problem using https://www.google.com. Automatically, you will be redirect to your region domain. For example, if you are in Spain, you will be redirect to https://www.google.es.

For resolving this problem, you can access to the url https://www.google.com/ncr and you could use the USA domain and you can investigate your SEO in America and how are you publishing there.

For example, acceding to https://www.google.com/ncr and searching the words david angular java full stack you will see on the first position of the google link list the domain https://davidmartinezros.com/dashboard?lang=en, which is my english web.



And if you search on https://www.google.es and searchs the words david angular java full stack you will see on the first position the domain https://davidmartinezros.com/dashboard?lang=es, which is my spanish web.



If you have any question, ask me on the comments.

jueves, 1 de febrero de 2018

How to Use Forms in Angular 2 passing complex data objects between pages

Hi everybody!

Today we are going to explain how to pass form data object like a complex object between pages in Angular 2 or 4 or 5.

First of all, we have to declare our Data object like an injectable, on this way:

import { Injectable } from '@angular/core';

@Injectable()
export class Data {
    public storage: any;
    public constructor() { }
}

Then, we have to declare our Data object like a provider in our ngModule class file configuration, on this way:

@NgModule({
    declarations: [AppComponent, ...appComponents],
    bootstrap: [AppComponent],
    imports: [
        NativeScriptModule,
        NativeScriptRouterModule,
        NativeScriptRouterModule.forRoot(appRoutes)
    ],
    providers: [Data]
})
class AppComponentModule {}

Then we can use this Data object in our pages.

First of all, we are going to define this in our first page, the origin one:

public constructor(private router: Router, private data: Data) {}

public navigationToPage2() {
   this.data.storage = {
        "firstname": "Nic",
        "lastname": "Raboy",
        "address": {
            "city": "San Francisco",
            "state": "California"
}
   }
   this.router.navigate(["page2"]);
}

And then, we will get the Data object in our second page, which receive the request of our form POST:

public constructor(private data: Data) {
    console.log(JSON.stringify(this.data.storage));
}

Only we need now is to pass our form to the this.data.storage like a JSON file on this way:

this.data.storage = {
    "requestData": JSON.stringify(requestData)
};

And the get the Data on the second page this way:

console.log(this.data.storage.requestData);

I hope you have found it useful and that you have solved your problems.

Try it and have fun!

lunes, 13 de noviembre de 2017

How to Configure Actuator in Spring Boot

Hi,

Today I'm going to explain the steps for configuring Actuator in a Rest Service Spring Boot Application.

It's very easy, only two steps and you have it!

First you have to add the dependency to the pom.xml file:

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-actuator</artifactId>
</dependency>

The second step is the disable security to the services offers by actuator.

You have to edit the application.properties file and add:

management.security.enabled=false

With this to step, you can run your appication and can call the next services:

http://localhost:8080/health for know the State of your App.

http://localhost:8080/mappings for view your Rest Services published

And you have more services, you can see in your log of your App when you run it.

Try it and have fun!

viernes, 20 de octubre de 2017

What to do for Convert your App into a Progressive Web App

Hi,

I'm going to explain what to do for Converting your App into a Progressive Web App. Or what's the same, for using Service Workers.

Here you can see the demo of a Progressive Web App with Service Workers.

It's very easy.

You have to use Angular/Cli in your Angular App and do the next three steps:

- First, you have to change your Angular/Cli config file and add the next line:

{
"apps": [
{ "serviceWorker": true } ]
}


- Second, you have to install the Service Workers dependency:

npm i @angular/service-worker --S

- And finally, you have to add the external links from your index.html for use the cache on them, modifying the generated file ngsw-manifest.json:

"external": {
"urls": [
{"url": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"},
{"url": "https://cdn.rawgit.com/konpa/devicon/4f6a4b08efdad6bb29f9cc801f5c07e263b39907/devicon.min.css"},
{"url": "https://fonts.googleapis.com/icon?family=Material+Icons"},
{"url": "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"}
]
},


And that's all!

Try it and have fun!

lunes, 16 de octubre de 2017

How to define repository ownership in JPA with Spring Security?

Hi, everybody!

Today I'm going to explain how to define repository ownership in JPA with Spring Security.

First of all, we are going to explain what is a repository: is an interface of JPA that provide the access to a database table modeled with hibernate.

In this interface, you can define any JPA or native query and you can change the behaivour of any call.

For example, you can have this:

@Repository
public interface MyHibernateModelClassRepository extends JpaRepository<MyHibernateModelClass, Long> {

}


With this implementation, you can call any CRUD method.

Now, I'm going to explain how to define ownership of this JPA interface:

With the same example, you can have this:

@Repository
public interface MyHibernateModelClassRepository extends JpaRepository<MyHibernateModelClass, Long> {

    @PreAuthorize("#entity == null || #entity.id == principal.id")
    @Override
    <S extends MyHibernateModelClass> S save(S entity);

    @PreFilter("filterObject == null || filterObject.id== principal.id")

    @Override
    <S extends MyHibernateModelClass> List<S> save(Iterable<S> entities);

    @PostAuthorize("returnObject.id == principal.id")

    @Override
    MyHibernateModelClass findOne(Long integer);

    @PostFilter("filterObject.id == principal.id")

    @Override
    List<MyHibernateModelClass> findAll();
    
}

With this call, you implemented a JPA interface with ownership, where the CRUD calls can only be used by the user logged in the application is the same of the attribute id in the database table modeled with Hibernate MyHibernateModelClass.

I'm going to provide another example, which use a method of the hibernate entity that response with a boolean if the CRUD method can be use by this user.

Here is the next example:

(hibernate entity have this method):
...
public boolean hasMetadadaWithId(Long id) {
return (metadades.getId().equals(id));
}
...

And the JPA repository shows like this:

@Repository
public interface MyHibernateModelClassRepository extends JpaRepository<MyHibernateModelClass, Long> {

@PreAuthorize("#entity == null || #entity.hasMetadadaWithId(principal.id)")
    @Override
    <S extends MyHibernateModelClass> S save(S entity);

    @PreFilter("filterObject == null || filterObject.hasMetadadaWithId(principal.id)")

    @Override
    <S extends MyHibernateModelClass> List<S> save(Iterable<S> entities);
    
    @PostAuthorize("returnObject.hasMetadadaWithId(principal.id)")
    @Override
    MyHibernateModelClassfindOne(Long integer);

    @PostFilter("filterObject.hasMetadadaWithId(principal.id)")

    @Override
    List<MyHibernateModelClass> findAll();
    
}

And that's all!

For any question, ask me!

Try it and have fun!

martes, 10 de octubre de 2017

How to configure an unic properties file for Spring 4.3.3 application

Here you are!

Today I'm going to explain how to configure one or more properties files for Spring 4.3.3 application, with active profiles of Spring cofigured in the server on the run call.

You have to create a file, I named properties-context.xml with the next content:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">

<beans profile="DES">
    <bean id="props" class="org.springframework.context.support.PropertySourcesPlaceholderConfigurer">
        <property name="location" value="classpath:properties/file-DES.properties"/>
    </bean>
</beans>

<beans profile="INT">
    <bean id="props" class="org.springframework.context.support.PropertySourcesPlaceholderConfigurer">
        <property name="location" value="classpath:properties/file-INT.properties"/>
    </bean>
</beans>

<beans profile="PRO">
    <bean id="props" class="org.springframework.context.support.PropertySourcesPlaceholderConfigurer">
        <property name="location" value="classpath:properties/file-PRO.properties"/>
    </bean>
</beans>

</beans>

In this file, you can see that we use three profiles={DES,INT,PRO}

This configuration will use the last Spring configuration and will be always on the last version.

The, you have to import this file to the root-context.xml file or the main configuration file of Spring.

The line you have to add id this:

<!-- properties context -->
<import resource="properties-context.xml" />

Then, for load the diferents profiles, you have to call the server with the parameter: -Dspring.profiles.active=DES.

In this call, you can use more than one active profile and will load any profiles defined in the call.

For use more than one profile you can call them like this:
-Dspring.profiles.active=DES,OTHER_PROFILE.

Also, you can load any amount of properties files changing the value of the location parameter, like this:

<property name="location" value="classpath:properties/file-DES.properties,classpath:properties/other_file-DES.properties"/>

This is the way for load properties files in Spring 4.3.3.

Try it and have fun!