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:

        url: jdbc:oracle:thin:@//localhost:27017/howdyl
        driver-class-name: mongodb.jdbc.MongoDriver
        show-sql: true            
    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!


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:

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">
... (any repeations you need)

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