Asus lança robo assistente pessoal chamado Zenbo

A Asus lançou em evento para desenvolvedores o robo assistente pessoal chamado Zenbo. O robo além de muito simpático o preço lá fora não é tão caro por volta de US 599,00
Agora o que sempre foi muito interessante foi a apresentação do presidente da Asus um Japa pra lá de descontrido e meio doidão.

OXWall Hacking Theme

A ideia aqui é customizar o template do FrameWork OXWall viabilizando a edição e teste on-the-fly. Você pode encontrar vários templates pagos ( ruins ) e outros free mas a ideia é utilizar todos os recursos do framework e criar o seu próprio template.

Entendendo o funcionamento do OXWALL
O OXWall trabalha com um sistema de cache de template onde ele salva a estrutura de arquivos incluindo Javascripts e CSS dentro de uma pasta chamada ow_static/themes/ e ow_static/plugins. A limpeza destes arquivos pode ser feita fácilmente com o plugin Cache Extreme Administration.

Para fazer o download dele é muito simples entre em oxwall.org/store e procure pelo nome especificado.

Feito isto você pode editar o arquivo de CSS que fica em ow_themes/tema/??.css. Para que você possa visualizar as alterações efetuadas no CSS você deve usar o botão Clean IT UP! para visualizar as alterações.

 

 

Fix Angular error: ngRepeat:dupes Duplicate Key in Repeater

Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: thing in mynotes, Duplicate key: string:xxxxx, Duplicate value: xxxxx

Um exemplo aplicado no Ionic com uma estrutura de repetição ng-repeat você pode adicionar track by $index

<ion-item ng-repeat=”thing in mynotes track by $index”>
{{thing}}
<ion-option-button style=”width:200px;background:#ff0000;” class=”button-assertive ion-trash-b” ng-click=”remove(thing)”></ion-option-button>
</ion-item>

Testando aplicativos híbridos em um device real

Método 1)
Levando em consideração que esteja utilizando o Ionic como framework execute o comando:

ionic run android -l -c

Método 2)
No Google Chrome é possível associar via USB o seu celular e ai testar seus Apps híbridos por ele.

Siga a instrução em:

chrome://inspect/#devices

Método 3)
Usando o Ionic Lab e testando para as duas plataformas

ionic serve --lab

Método 4)
Rodando o App direto no emulador do iOS ou Android


ionic emulate ios
ionic emulate android

Fix Consider upgrading to cordova-ios

O Cordova sempre verifica a versão do plugin que está utilizando com a versão do sistema que está instalado em seu App. Muitas vezes o conflito de versões impossibilita que você faça o seu build até que você resolva esta dependência.

Um erro comum que podemos encontrar é algo como:

Using this version of Cordova with older version of cordova-ios is being deprecated. Consider upgrading to cordova-ios@4.0.0 or newer.

para resolver apenas instale a versão do sistema que ele está exigindo:

cordova platform add ios@4.0.0

Desenvolvimento App Híbrido com IONIC

O IONIC é um dos mais conhecidos frameworks para desenvolvimendo de aplicativos híbridos. Ele possui um conjunto de ferramentas interessantes e bem intuitivas para o desenvolvimento de aplicações híbridas.

Downloads
NodeJS
Ionic Viewer
Intel XDK

Plataforma de desenvolvimento
Mac OS X 10.10 Yosemite ( Hackintosh )

Hardware
Intel Core i3
8GB RAM
HD 1TB

1) Iniciando
O primeiro passo é baixar o NodeJS ( o canivete suiço em Javascript ) para que possamos baixar o Ionic. Utilize o link acima para baixar a última versão do NodeJS e na sequência instale. Não irei abordar aqui neste tutorial a instalação do NodeJS pois não há grau de complexidade para que possamos fazer um passo-a-passo para isto.

A instalação do Ionic deve ser feita conforme o exemplo abaixo:

 npm install -g cordova ionic

2) Criando a primeira View do App

Primeiramente vamos criar nossa view do App ou seja o front-end do App. Uma maneira descomplicada para fazer isto é utilizando a própria interface web do IONIC que já possui algumas opções de templates de aplicativos bem interessantes e também possui o Market que pode auxiliar você na utilização de plugins, themes entre outros recursos interessantes para o seu App.
Então neste primeiro momento vamos entrar em https://creator.ionic.io/ caso não tenha ainda um cadastro é importante que você se cadastre para que possamos ir para o próximo passo.

*OBS: Lembrando que este é apenas um mockup do que será a interface do App. É apenas um template para que possa agilizar o processo de desenvolvimento.

Exemplo de interface do IONIC Creator
Screen Shot 2016-05-01 at 11.12.54 PM

A interface do Creator você deve levar em consideração que uma página é criada na lateral superior esquerda ( bloco 1 ) com seus elementos logo abaixo ( bloco 2 ) e suas propriedade no bloco 3

Screen Shot 2016-05-01 at 11.12.54 PM

3) Exportando a View do Creator para importar no Intel XDK ( cat jump )
Levando em consideração que você preparou a view do seu App vamos exportar ele para dar os ajustes finais no Intel XDK. Nele também é possível você adicionar novos recursos e também exportar o App para as App Stores.

No topo da tela do lado superior direito há um botão como exportar. Neste momento iremos utilizar o Ionic CLI ( command line ) para exportar o app. Você deve copiar o ID do seu App pois iremos utilizar ele para baixar o código fonte do App. Antes disto é importante você abrir o seu terminal e fazer login na plataforma.
No ambiente que estamos utilizando para desenvolvimento, irei utilizar o terminal do OS X. Para isto abra o terminal e digite os comandos abaixo:

ionic login

* Entre com as informações de login e senha utilizado na criação da conta do IONIC Creator.

Agora crie a pasta do seu projeto, aqui iremos chamar simplesmente de MyApp. Entre na pasta deste app e execute os comandos abaixo:

 

Screen Shot 2016-05-01 at 11.35.15 PM

ionic start myapp creator:xxxxxxx ( o id do App que você deve pegar no Creator assim como exemplo abaixo )

Screen Shot 2016-05-01 at 11.19.22 PM

4) Preparando o ambiente para o Intel XDK
Agora que você baixou todo o código donte do App é necessário que você também adicione as plataformas para o qual deseja trabalhar. Para este projeto iremos adicionar o Android e o iOS. Entre no diretório que deseja armazenar os arquivos do projeto e digite os comandos abaixo:

$ cd myApp
$ ionic platform add ios
ionic platform add ios

 

Referências:
http://ionicframework.com/getting-started/