MENU

Criando aplicação com NW.js – 1 – Introdução

Olá pessoal iniciarei hoje uma série de posts sobre como criar uma aplicação com node-webkit, agora também conhecido como NW.js. O que é NW.js? Como você pode ver aqui NW.js é um aplicativo runtime baseado no Chromium e em Node.js, este último dá parte do nome do runtime. A outra parte vem de WebKit, que é um projeto de browser engine open source muito poderoso que já foi utilizado em navegadores como Google Chrome e Opera, e ainda é utilizado no Safari. O objetivo de node-webkit é proporcionar o desenvolvimento de Aplicações Desktop usando de linguagens e tecnologias WEB como HTML, CSS e, é claro JavaScript. Preparando sua área de trabalho: Para iniciar, você precisa instalar alguns softwares em seu computador. Veja quais são: Node.js É importante que o Node.js esteja instalado para que você possa gerenciar pacotes, mas NW.js não depende diretamente deste software, pois já o tem de forma incorporada. Faça download aqui. NW.js Você não precisa necessariamente instalar o nw.js, basta apenas ter ele em seu computador em uma pasta de fácil acesso. Você pode fazer download na página oficial. Eu uso o Windows 8.1 x64, e deixo os arquivos do nw.js na pasta C:/nwjs, pois para […]
Read More ›

Create database sqlite encrypted with node.js

Hi, first sorry for the following text, I can not speak English and I’m using google translator to write this. But I think you can understand. To create the database files encrypted with node.js I’m using sqlite-cipher package, developed by me using sql.js and crypto-js. The usage of this package is very simple, with it you can encrypt and decrypt and create new databases encrypted. See: Install To install this package open your prompt or terminal and run: $ npm install sqlite-cipher Usage You can open encrypted database file or create a new also encrypted. And you can encrypt or decrypt an existing file and save in another file. See how: connect(database, password) Opening a encrypted database file or creating a new. 1 2 3 4 5 6 7 8 9 10 11 var sqlite = require('sqlite-cipher'); //Oppening your encrypted file, you can use any extension. sqlite.connect('myEncrypedFile.myextension','MyPassword'); //Creating a table sqlite.run("CREATE TABLE COMPANYS(ID INTEGER PRIMARY KEY AUTOINCREMENT, NAME TEXT NOT NULL);"); //Inserting the data sqlite.insert("COMPANYS",{NAME:"My COMPANY"}, function(inserid){ console.log(inserid); }); //Selecting data console.log(sqlite.run("SELECT name FROM COMPANYS;")); encrypt(from, to, password) Encrypting an existing database. In the output file you can use any extension. 1 2 3 var sqlite = require('sqlite-cipher'); //Encrypting sqlite.encrypt('myDataBase.db', […]
Read More ›

Usando Sqlite e node.js

“SQLite é uma biblioteca em linguagem C que implementa um banco de dados SQL embutido.” (Wikipedia) Você não precisa de um servidor banco de dados rodando na sua máquina para poder usar o sqlite, o que facilita a vida do programador, além de ser um banco de dados leve. Para se usar sqlite em node.js devemos fazer o uso de pacote ou módulo que nos ajude, existem vários. Um dos mais conhecidos é o node-sqlite3, que já usei e é realmente muito bom, mas não me agradei da forma com que ele retorna os dados. Por isso fiz o meu próprio módulo para sqlite, que é o sqlite-sync.js. Instalando A biblioteca está disponível no NPM e você pode baixa-la e instala-la com o seguinte comando: npm install sqlite-sync Usando O uso do sqlite-sync é bem simples, ele foi desenvolvido para funcionar de forma síncrona ou assíncrona, e a conexão com o banco de dados é totalmente síncrona, por isso o nome. Veja como usar: 1 2 3 4 5 6 7 var sqlite = require('sqlite-sync');   //Connecting sqlite.connect('myDatabase.db');   //Create example table sqlite.run("CREATE TABLE COMPANYS(ID INTEGER PRIMARY KEY AUTOINCREMENT, NAME TEXT NOT NULL);"); Fazendo consulta No sqlite-sync existem várias formas […]
Read More ›

Plugin jQuery e Bootstrap para slide show com vídeo (youtube e vimeo)

Bom pessoal, precisei de um plugin que execute vídeos em forma de slide, quando o slide chega no vídeo ele executa automaticamente e quando o vídeo termina ele segue para o próximo slide. Simples, mas não encontrei, então fiz um usando jQuery, Bootstrap e as APIs do Vimeo e do Youtube. DEMO DOWNLOAD Como o nome e a pequena descrição acima já dizem, este plugin serve para manipular o carousel do Bootstrap de forma dinâmica, além de possibilitar a execução de vídeos do Youtube ou do Vimeo. Quando o slide onde está o vídeo aparece o vídeo inicia automaticamente, e no fim dele o slide passa sozinho. Usando Primeiro você precisa incluir a biblioteca jQuery, e o Bootstrap, e depois o arquivo bootstrap-dynamic-carousel.js. 1 2 3 var slide = $('#carousel').bootstrapDynamicCarousel({ indicators: false }); A biblioteca aceita alguns parametros na sua instancia, são eles: Atributo Tipo Descrição interval inteiro Serve para dizer o tempo em milesimos que o slider irá demorar para passar para o próximo. controls boolean Para informar se os controles do carousel serão mostrados ou não indicators boolean Para informar se os indicatores do carousel serão mostrados ou não addItem(options) Este método serve para adicionar um novo item […]
Read More ›

Abas dinâmicas com Boostrap – Abrir, fechar e arrastar

Plugin jQuery para manipular tabs do bootstrap de forma dinâmica, excelente para aplicações multitelas na WEB ou em runtimes como node-webkit ou electron DEMO Dependencias Para que o plugin funcione melhor é necessário o uso da biblioteca jQuery, do jQuery UI e do Font Awesome. Este último pode ser dispensado se você não pretende usar ícones. E a dependencia mais importante obviamente é o Bootstrap Usando Para usar o plugin basta incluir as depencias citadas acima no seu documento HTML e incluir também os arquivos bootstrap-dynamic-tabs.js e bootstrap-dynamic-tabs.css. bootstrap-dynamic-tabs é escrito como um plugin jQuery, então a form de usar será a mesma. 1 var tabs = $('#tabs').bootstrapDynamicTabs(); Adicionando tabs Para adicionar uma nova aba basta usar o metodo addTab(options), veja o exemplo: 1 2 3 4 5 6 7 var tabs = $('#tabs').bootstrapDynamicTabs(); tabs.addTab({ title: "Home", text: "Seja bem-vindo", icon: 'fa fa-home', closable: false }); Options (Opções) As opções das abas são usadas para definir atributos como título, corpo, etc. Veja abaixo a lista dos atributos. Atributo Tipo Descrição title String Título da aba id String Este será o id do elemento DOM da aba, caso não seja informado será usado o titulo sem acentos e espaços e em […]
Read More ›

Costomizando o confirm do JavaScript com Bootstrap

Cansado do visual do confirm() do javascript, ou cansado de ter que colocar um evento nos botões do modal, ou coisa parecida? Bootstrap Confirm Dialog v1.0.0 Download do plugin (GitHub) Plugin para janelas de dialogos de confirmação, substitui a função confirm() do JavaScript de forma elegante. Full Na versão Full é possível difinir a linguagem e o titulo da janela, além da mensagem e das funções de callback. Usando 1 2 3 4 5 6 7 8 9 10 confirmDialog({ message:'Tem certeza que deseja confirmar?', language:'english.json', onConfirm: function(){ alert('Confimou') }, onDismiss: function(){ alert('Não') } }); Liguagem (Idioma) Se a linguagem não for informada será usada a padrão português. 1 2 3 4 5 6 { "title": "Confirm", "message": "Standard message", "btn_dismiss": "No", "btn_confirm": "Yes" } Basic Na versão básica é possível informar apenas a mensagem a ser mostrada e as funções callback Usando 1 2 3 4 5 confirmDialog('Você tem certeza que deseja apagar?', function(){ alert("Confirmou") }, function(){ alert("Não") });  
Read More ›

Funções callback do JavaScript

Em JavaScript funções são tratadas como objetos, portanto é possível passar uma função como parâmetro para outra função, executando-a, sendo assim uma função callback. Quando se tem requisições Ajax, ou outras operações assíncronas, o uso de funções callbacks é importante. Veja como se usa funções callbacks:   1 2 3 4 5 6 7 8 9 //Função base function getUsuario(idUsuario, callback){ callback("Jayr Alencar"); //Passamos a função callback por parâmetro e executamos ela dentro da outra função }   //Usando getUsuario(1, function(resultado){ alert(resultado); }); Usando callbacks com Ajax 1 2 3 4 5 6 7 8 9 10 11 12 13 function getUsuario(id, callback){ $.ajax({ data: {idUsuario : id}, url: 'getUsuario.php', success: function(resultado){ callback(resultado); } }); }   getUsuario(1, function(resultado){ alert(resultado); });
Read More ›

Responsive – Usando Media Queries CSS

Olá pessoal, hoje vamos falar de Media Queries, que é essencial para sites com template responsivos. Você sabe o que é? O que é um site responsivo Bom, hoje a maioria dos sites são responsivos, você já deve pelo menos ter ouvido isso em algum lugar, mas poucos sabem o que é um site assim. Tem se crescido o uso de aparelhos móveis e seu acesso a internet, muitas pessoas preferem usar o celular para acessar e-mail, redes sociais, ver notícias e visitar outros sites. Por isso é importante que os sites saibam se adaptar à necessidade de cada usuário e às configurações de seu dispositivo, para que eles proporcionem uma experiência única a cada pessoa. Media Types Media Types serve para definir para qual tipo de dispositivo ou mídia o CSS será direcionado, é usado na linkagem do arquivo .css, e é uma boa opção para a responsividade. Abaixo segue uma lista das medias, que devem ser escritos em caixa baixa, ou seja, são case-sensitive: all Para todos os dispositivos. braille Para dispositivos táteis. embossed Para dispositivos que “imprimem” em braille. handheld Para dispositivos de mão. Normalmente com telas pequenas e banda limitada. print Para impressão em papel. projection […]
Read More ›

Node.js – Desenvolvendo Aplicações Desktop com node-webkit

No último post falamos sobre Node.js, uma plataforma desenvolvida sobre o motor JavaScript do Google Chrome. Ela é usada normalmente para o desenvolvimento de aplicações WEB, mas também se aplica para softwares executáveis em computadores desktop. Hoje mostrarei de forma introdutória (talvez seja só o que você precisa saber) como se dá tal desenvolvimento. Obs: Sou usuário Windows, portanto os exemplos aqui mostrados foram testados unicamente nesta plataforma.Mas para os exemplos em Linux ou para Mac OS não foram testados. O que preciso para começar? Primeiramente você precisa ter o Node.js instalado em sua máquina, obviamente. Eu particularmente gosto de emular um terminal Linux em minha máquina Windows com o CMDER, você pode usar um outro de sua preferência, ou o própria terminal do Windows. Se for usuário Linux ou Mac Os desconsidere. Tenha um editor de texto ou IDE, de sua preferência é claro. Eu uso o Aptana Studio 3, mas também gosto do Sublime Text. O que é node-webkit? Boa pergunta! Node-webkit, agora também chamada de NW.js é aplicativo runtime baseado no Chromium e em Node.js, este último dá parte do nome do runtime. A outra parte vem de WebKit, que é um projeto de browser engine open […]
Read More ›