Ionic Cordova AngularJS NodeJS e NPM

O Ionic Framework é um conceito de desenvolvimento de aplicações híbridas, ou seja sem preocupar-se com o a plataforma em questão para desenvolvimento. Ionic possui componentes de desenvolvimento do Cordova (Componentes de integrações de recursos nativos dos dispositivos) e AngularJS (Componentes Web e JS), para execução do mesmo é necessário ter instalado o NodeJS (Server de execução) e NPM (Node Package Manager (Gerenciador de Pacotes do Node)).

 Para instalar o Cordova e o Ionic no Linux64 basta rodar os seguintes comandos:

$ sudo apt-get install curl
$ curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
$ sudo apt-get install -y nodejs
$ npm install -g cordova ionic

 Ao tentar intalar o Ionic (último comando ($ npm install -g cordova ionic)) obtive o seguinte erro de instalação :

make: g++: Command not found
src/libsass.target.mk:134: recipe for target 'Release/obj.target/libsass/src/libsass/src/ast.o' failed
make: *** [Release/obj.target/libsass/src/libsass/src/ast.o] Error 127
make: Leaving directory '/usr/lib/node_modules/ionic/node_modules/node-sass/build'
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/lib/node_modules/ionic/node_modules/node-gyp/lib/build.js:276:23)
gyp ERR! stack     at emitTwo (events.js:106:13)
gyp ERR! stack     at ChildProcess.emit (events.js:191:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:204:12)
gyp ERR! System Linux 4.4.0-22-generic
gyp ERR! command "/usr/bin/nodejs" "/usr/lib/node_modules/ionic/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /usr/lib/node_modules/ionic/node_modules/node-sass
gyp ERR! node -v v6.2.0
gyp ERR! node-gyp -v v3.2.1
gyp ERR! not ok
Build failed
/usr/lib
└── cordova@6.1.1

npm ERR! Linux 4.4.0-22-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install" "-g" "cordova" "ionic"
npm ERR! node v6.2.0
npm ERR! npm  v3.8.9
npm ERR! code ELIFECYCLE

npm ERR! node-sass@3.4.2 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@3.4.2 postinstall script 'node scripts/build.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the node-sass package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node scripts/build.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs node-sass
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls node-sass
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/{$USER}/npm-debug.log

Para solucionar o problema bastou executar o seguinte comando:

$ sudo apt-get install node-gyp

 Após a instalação sem erros, o Ionic disponibiliza por default 3 layout pré prontos das aplicações, basta acessar a pasta local onde você pretende ter os fontes do Ionic, e rodar os comandos abaixo listados, esses comendos irão criar uma estrutura de pasta dentro do diretorio selecionadosão elas:

#Layout em Branco
$ ionic start myApp blank

#Layout em Abas
$ ionic start myApp tabs


#Layout de Menu Laterais
$ ionic start myApp sidemenu

Após a criação da estruta de seu layout você deve acessar a pasta e rodar o seguinte comando :

#Inicia o server com seu template selecionado:
$ ionic serve 

#Inicia o server para exibir no modelo de celular:
$ ionic serve --lab

Imagem execução server (NodeJS) com layout (sidemenu)

Fontes utilizadas:
http://ionicframework.com/ (Acessado em 02/06/2016)
http://nodebr.com/o-que-e-a-npm-do-nodejs/ (Acessado em 02/06/2016);
http://tableless.com.br/introducao-ao-ionic-framework/ (Acessado em 02/06/2016);

JPA HIBERNATE e CARREGAMENTO FetchType.LAZY

Este post tem por objetivo demonstrar como é feito o carregamento de um objeto(Endereco) mapeado com o LAZY para um objeto (Usuario). 

Abaixo trecho do fonte em Java (Usuario.java) de um mapeamento LAZY, digamos que o mapeamento da sua "Entity" por questões de performance ou até mesmo por padrão do projeto foi mapeado com o carregamento do tipo LAZY (fetch = FetchType.LAZY)

Usuario.java

@Entity
@Table(name = "usuario")
public class Usuario {
   
  @Column
  private String nome;

 @ManyToOne(fetch = FetchType.LAZY)
 @JoinColumn(name = "id_endereco")
 private Endereco endereco;

 public String getNome() {
     return nome;
 }
   
 public void setNome(String nome) {
       this.nome = nome;
 } 

 public Endereco getEndereco() {
      return endereco;
 }
   
 public void setEndereco(Endereco endereco) {
       this.endereco = endereco;
 }

} 

Este trecho demonstra o carregamento da entidade "Endereco" sendo executado via código Java, anteriormente conforme mapeado na classe "Usuario.java", podemos observar o mapeamento LAZY para o atributo "endereco", que ao capturar os usuários por sua vez não é carregado a não ser que seja feito o fonte conforme trecho abaixo (Hibernate.initialize(usuario.getEndereco());) :

private List<Usuario> obterUsuarios(Query query) {

List<Usuario> usuarios = (List<Usuario>) query.getResultList();

for (Usuario usuario : usuarios){

Hibernate.initialize(usuario.getEndereco());

}

return usuarios;

}

Após utilizar Hibernate.initialize sua lista terá seus objetos carregados, com seus respectivos endereço.

Android - Transição de tela entre Activities

Neste exemplo prático estarei exibindo nos fontes como é feito um transição entre duas telas a MainActivity.java e a SecondActivity.java.

Funcionalidade:
 Clicar em qualquer lugar da tela e trocar para segunda tela.

 1) Passo: Adicione no seu layout no meu caso é o RelativeLayout o "android:onClick" do arquivo (activity_main.xml) para que tenhamos o evento de clique. Obtendo um trecho de xml semelhante ao seguinte:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" 

android:layout_width="match_parent" 

android:layout_height="match_parent" 

android:paddingLeft="@dimen/activity_horizontal_margin" 

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin"

tools:context=".MainActivity"

android:onClick="choiceScreen"

android:background="@color/backgroudapp">

...

 2) Crie sua próxima classe Java com seu respectivo layout, neste caso criamos a SecondActivity.java e o layout second_activity.xml;

public class SecondActivity extends AppCompatActivity {

    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.second_activity);
    }
}

  3) Passo: Adicione sua tela no arquivo AndroidManifest.xml conforme exemplo abaixo:

    <activity android:name=".MainActivity" >
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
    <activity android:name=".SecondActivity">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>

 4) Passo: Na MainActivity.java escreva um método com nome definido no passo anterior neste caso android:onClick="choiceScreen". Obtendo um método semelhante a esse :

 public class MainActivity extends AppCompatActivity {

    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void choiceScreen(View view){
        Intent intent = new Intent(MainActivity.this, SecondActivity.class);
        MainActivity.this.startActivity(intent);
    }
}

Basta rodar a aplicação e você terá a transição da tela MainActivity para a SecondActivity.

BÔNUS : Dica rápida e fácil, cadastrar um cor padrão para o sistema, basta adicionar no arquivo colors.xml a tag <color name="backgroudapp">#303F9F</color> depois de feito isso basta usa-la desta maneira android:background="@color/backgroudapp">