Create your blog and photo album with postbit
Create your blog and photo album

Create new post

Content:

Upload a picture:
Tags (keywords separated by comma)

Save Cancel
Rodrigo Siqueira rsiqueira:   Followers: 25 ; Following: 31

Explore Rodrigo Siqueira's photo albums:
Beaugency (47)
Château de Cheverny (23)
Tour Eiffel - Paris (30)
Pousada Azul Maria - Praia da Baleia (41)
Structure Synth Fractals (17)
Venice Art - Italy (39)

Como publicar aplicativo apk no Google Play Store


1) Cadastre-se no "Developer Console" em https://play.google.com/apps/publish/

2) Pague a taxa de inscrição (US$ 25) para ser um Google Play Developer

3) Clique em "Publish an Android App on Google Play" e crie uma nova aplicação.
Para publicar em produção é necessário: Adicionar ícone em alta resolução, adicionar ao menos 2 screen shots, selecionar a categoria (ex: ), selecionar a classificação de conteúdo (content rating), enviar o arquivo APK com a aplicação, selecionar os países que podem baixar o app, adicionar o url com a Política de Privacidade do aplicativo, definir o preço do app (ou disponibilizar grátis).

Verifique o checklist com passos para lançamento de aplicativo para Android:
http://developer.android.com/distribute/tools/launch-checklist.html
 
Tela do painel de desenvolvedor no Google Play com o formulário para entrar com os dados:
  •  Título do aplicativo (até 30 caracteres)
  •  Descrição curta do aplicativo (até 80 caracteres)
  •  Descrição completa do aplicativo (até 4000 caracteres)
  •  Screenshot para celular
  •  Screenshot para tablet (7 polegadas)
  •  Screenshot para tablet (10 polegadas)
  •  Ícone em alta resolução (png 512x512 pixels, com transparência alpha)
  • Gráfico promocional grande - Feature Graphic (png ou jpg 1024x500 pixels, sem alpha)
  • Gráfico promocional pequeno - Promo graph (png ou jpg 180x120 pixels, sem alpha)
  • Vídeo promocional opcional - promo video (URL do vídeo no youtube)
  • Seleção da tipo de aplicativo: Aplicativo ou Jogo
  • Seleção da Categoria (Ex: Tools, News, Social, Productivity, etc)
  • Política de Privacidade do aplicativo
Para atualizar a versão do APK, vá em "All aplications -> (escolha seu app) -> APK -> "Upload new APK to Production".
Se ocorrer o erro "Upload failed - You need to use a different version code...", então remova a pasta "ant-build" (platforms/android/ant-build) e rode o "phonegap run android" e "ant release" novamente.
 
Publicar app para Android
 
Tela de upload de ícones do aplicativo para o Google Play store:
Upload do app para Google Play store

Post by Rodrigo Siqueira (2015-12-20 17:44)

Post your comment:

Name: Email: Site:

Como criar aplicativos para Android usando o Visual Studio da Microsoft

O Microsoft Visual Studio permite criar aplicativos multi-plataforma (Android, iOS e Windows phone) usando integração com o Apache Cordova.
Instruções: https://msdn.microsoft.com/en-us/library/dn757054(v=vs.140).aspx

1. Instale o Microsoft Visual Studio:

IMPORTANTE: Rode o instalador como "Administrador", para evitar o erro "A setup package is either missing or damaged"

Durante a instalação do Visual Studio, é necessário selecionar:
Custom (ao invés de Typical) "Cross Platform Mobile development -> HTML/JavaScript (Apache Cordova)" e também o "Common Tools and Software Development Kits": Android SDK, Apache Ant, Git CLI, Java SE, Node.js e Microsoft Visual Studio Emulator for Android
Isso vai instalar automaticamente o Cordova, Node.js, JDK, Apache Ant e Android SDK.
Se esquecer de marcar as opções adicionais (Cordova), rode novamente o instalador (vs_community.exe).

Se ocorrer erro na instalação ("Unable to locate package source"), instale apenas com as opções default, SEM SELECIONAR os componentes "HTML/JavaScript (Apache Cordova)" e nem os "Common Tools" (Ex: Android SDK, etc). E depois de instalar, execute novamente o instalador com a opção de modificar a instalação e ai selecione os esses componentes adicionais. O erro mostrava opções: Download packages from the internet ou pediu para localizar (Provide a location to search) no computador o arquivo "BuildTools_MSBuildResMsi.msi", mas mesmo encontrando o arquvio, o erro permanece. Então reinstale sem o Cordova e depois instale o Cordova (usando o mesmo instalador).

 

2. Crie um novo projeto:

File -> New Project -> Javascript -> Apache Cordova Apps

Isso vai criar a pasta com o projeto, contendo diretórios "bin", "res", "www" e arquivos como "config.xml", "www/index.html", "www/scripts.index.js", etc.

Para testar a aplicação, clique em "Build": Build -> (nome do projeto)
Ou clique direto no menu "Debug / Android / Continue", para abrir automaticamente o browser Chrome com o emulador de Android  Automaticamente vai rodar o servidor web na porta 4400 e o browser abrirá mostrando o resultado da aplicação, com o emulador de celular "Ripple". Este endereço abriu automaticamente:

http://localhost:4400/index.html?enableripple=cordova-3.0.0-NexusGalaxy
 
Se você tentar usar um webview, colocando um iframe de site externo no "index.html", então provavelmente vai precisar remover esta linha do index.html, que bloqueia iframe:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
 
 
3. Altere o código para o conteúdo do seu próprio projeto
Clique em "Solution Explorer" para editar o "config.xml" e coloque o nome do autor, descrição, número de versão, orientação da tela (retrato e/ou paisagem) e outras configurações.

Edite também o "www/index.html" e "www/scripts/index.js" para colocar o conteúdo do seu projeto.
 
4. Defina o ícone e tela de abertura (splashscreen) do aplicativo para aparecer na tela do celular:
 
As imagens dos ícones ficam na pasta:
./platforms/android/res/drawable-hdpi/icon.png (72x72 pixels)
./platforms/android/res/drawable-ldpi/icon.png (36x36 pixels)
./platforms/android/res/drawable-mdpi/icon.png (48x48 pixels)
./platforms/android/res/drawable-xhdpi/icon.png (96x96 pixels)
 
OBS: Se não funcionar, então copie as imagens do ícone sobre estas:
./res/icons/android/icon-36-ldpi.png
./res/icons/android/icon-48-mdpi.png
./res/icons/android/icon-72-hdpi.png
./res/icons/android/icon-96-xhdpi.png
 
 
As imagens e resoluções do splashscreen ficam aqui:
res/screens/android/screen-hdpi-landscape.png (640x480 pixels)
res/screens/android/screen-hdpi-portrait.png (480x640 pixels)
res/screens/android/screen-ldpi-landscape.png (426x320 pixels)
res/screens/android/screen-ldpi-portrait.png (320x426)
res/screens/android/screen-mdpi-landscape.png (470x320)
res/screens/android/screen-mdpi-portrait.png (320x470)
res/screens/android/screen-xhdpi-landscape.png (960x720 pixels)
res/screens/android/screen-xhdpi-portrait.png (720x960 pixels)

OBS: Se o splash screen não funcionar (ex: aparecer uma tela em branco no lugar da tela de abertura), ative o plugin do Cordova SplashScreen. Para ativar um plugin, selecione (dentro do Solution Explorer) para editar o arquivo "config.xml" e clique em "Plugins".
 

5. Crie o arquivo keystore para assinar sua aplicação (veja instruções de como criar o arquivo keystore). 

Altere o arquivo "build.json", como no exemplo:

{
  "android": {
    "release": {
      "keystore": "C:/Dropbox/android-key.store/my-release-key.keystore",
      "storePassword": "(minha senha)",
      "alias": "ALIAS DO MEU APP",
      "password": "(minha senha)",
      "keystoreType": ""
    }
  }
}

 

ANTES EU USAVA o "ant.properties", mas não uso mais isso na nova versão (Visual Studio 2015):
(conteúdo antigo abaixo)
Altere o arquivo "res/native/android/ant.properties" para colocar o caminho da sua chave para assinar o app. Exemplo de como deve ficar:

key.store = /meu-diretório-do-android-key.store/my-release-key.keystore
key.alias = (Alias do meu aplicativo)
key.store.password=minha senha
key.alias.password=minha senha
 
6. Crie a versão final do APK:

Mude de "Debug" para "Release" e execute o "Build".
 

7. Publique no Google Play Store
(Veja instruções aqui para publicar o apk)

 

Problemas e soluções:

* Ao executar o aplicativo no celular, apareceu "Hello, your application is ready!" ao invés de aparecer o conteúdo real que programei no meu app.

* Como não consegui fazer o setup no Windows 7, instalei o Windows 10 dentro de uma máquina virtual (VMWare Player) e instalei do zero o Visual Studio, sem ter instalado antes JDK nem Android SDK.

Pode ter sido conflito com versões de programas anteriores (tipo Eclipse, SDK, JDK, Apache Ant, versão 32bits x 64bits, etc).
Melhor deixar as variáveis de ambiente como default pelo que é instalado com o Visual Studio:
 ADT_HOME: C:\Program Files (x86)\Android\android-sdk
 ANT_HOME: C:\Program Files (x86)\Microsoft Visual Studio 14.0\Apps
 GIT_HOME: C:\Program Files (x86)\Git
 JAVA_HOME: C:\Program Files (x86)\Java\jdk1.7.0_55
 
* Copiei o arquivo "bin/Android/Release/MainActivity-release-unsigned.apk" para o celular Android, mas ao tentar instalar apareceu a mensagem de erro:

"Describe error. There is a problem parsing the package."
Resolvi isso ao copiar o arquivo "MainActivity-release.apk" (é o assinado e não o "unsigned").

* Ao tentar instalar o apk, apareceu "App not installed". Para resolver, desinstalei a versão anterior e tentei novamente. Ai deu certo!

* Tentei instalar mas apareceu "App not installed. An existing package by the same name with a conflicting signature is already installed".
Resolvi isso ao remover (desinstalar) a aplicativo anterior.

* Durante a instalação do Visual Studio apareceu o erro: Emulators for Windows Mobile 10.0.10069 : The installer failed. Fatal error during installation. Error code: -2147023293 

* Na primeira instalação, ao mudar de Ripple para "Android Emulator", apareceu o erro: "exit code 1". Para resolver, precisei instalar a versão mais antiga do node.js (node-v0.10.28-x86.msi). Mas ai outro erro apareceu:
\android\cordova\build.bat: Command failed with exit code 8 - File MDAVSCLI
Verifique se em "Debug -> Options" aparece "Multi-Device Hybrid Apps" (fica entre os itens "HTML Designer" e o "NuGet Package Manager").
 
* Ao entrar no projeto apareceu erro na configuração do ambiente:
"Oracle Java SDK: The override value set on the Environment Variable Option Page pointed to an invalid or nonexistent location for this software."
E ao clicar em "Build", apareceu o erro: Error  C:\(path)\platforms\android\cordova\build.bat: Command failed with exit code 2, File: MDAVSCLI 1
Isso ocorreu pois eu tinha atualizado o Java JDK e mudou o path da instalação, que deve ser atualizado tanto nas variáveis de ambiente do Windows quanto no Visual Studio. Para atualizar a variável de ambiente no Visual Studio:
Tools -> Options -> Tools for Apache Cordova -> Environment Variable Overrides -> JAVA_HOME = 
Valor antigo: C:\Program Files (x86)\Java\jdk1.8.0_05
Valor novo: C:\Program Files\Java\jdk1.8.0_45
Para atualizar variáveis de ambiente no Windows 7:
digite "env" dentro do start ("Edit the system environment variables") -> System Properties -> Advanced -> Environment Variables -> System Variables -> Edit (ou New)
Variable name: JAVA_HOME
Variable value: C:\Program Files\Java\jdk1.8.0_45
 

Post by Rodrigo Siqueira (2015-05-15 21:05)

Post your comment:

Name: Email: Site:

Como criar aplicativos para Windows usando o PhoneGap

Estou usando o preview do Windows 10 que baixei no site da Microsoft e achei muito bom! Ele vem com o aplicativo "Store" que permite baixar apps no Windows Store. Por isso fui procurar saber como desenvolver aplicativos para Windows 10 (ou Windows 8) com o PhoneGap. Os aplicativos baixados aparecem como "modern application".

1. Registre-se como desenvolvedor Microsoft:

Procure por "Opening a developer account - Windows app development".

Ao fazer o cadastro na Microsoft como developer, é necessário selecionar o tipo de conta e pagar uma taxa. Os valores são:
  * Plano "Individual": R$ 46,00 - Permite enviar apps para "Windows Store" e "Windows Phone Store". Não fala se permite "desktop apps".
  * Plano "Company": R$ 160,00 - Permite desenvolver para desktop ("desktop apps"), permite "additional app capabilities" (não sei o que é). Se escolher país Estados Unidos, o preço é US$ 90,00

Entendi que o pagamento é feito uma vez só pois a conta de desenvolvedor não expira e não é necessário renovar.

Post by Rodrigo Siqueira (2015-05-15 16:02)

Post your comment:

Name: Email: Site:

Receba pagamentos via PayPal

Passo-a-passo sobre como criar botões para receber pagamentos com PayPal no seu blog ou site. O PayPal também serve para receber pagamentos com cartão de crédito.

O método Paypal Payments Standard serve para criar botões tipo Buy Now (compre agora), implementar carrinho de compras (shopping cart) e botão de receber doações.

Faça login no PayPal e clique no menu de navegação da administração da sua conta:
Ferramentas para quem vende (Merchant Tools) -> Website Payments Standard - Botões de Pagamento

Então selecione um dos botões para receber pagamento:
Comprar agora: Para vender um único produto ("Produto unitário")
Adicionar ao carrinho: para vender múltiplos produtos
Assinar: para vendas recorrentes (ex: cobrar o cliente todos os meses ou semanalmente, etc.)

Como receber cobranças recorrentes com o PayPal:

Estou criando uma aplicação onde o usuário poderá selecionar a compra de um serviço online pelo plano 1 semana (grátis para testar) ou planos Mensal, Semestral e Anual (cada um com um valor diferente). 

Então vou usar o botão do paypal "Assinar". Como são vários planos, vou criar vários botões.

Clicando na opção do tipo de botão "Assinar" é possível definir o nome do produto, a moeda (ex: pagamentos em Reais ou "BRL"), o ID da assinatura (identificação do produto para poder rastrear a compra depois).

OBS: Conta de paypal para pessoa física não permite criar o botão Assinar, é preciso mudar para conta paypal Pessoa Jurídica para poder criar planos de cobrança por assinatura. Se usar conta de pessoa física, vai aparecer a mensagem de erro: "Este recurso só está disponível para as contas Empresa e Especial - Retornar para o site do vendedor".

Ao criar um botão de pagamento, usei a opção "Utilizar o ID de minha conta de vendedor segura." (ao invés da opção Utilizar meu e-mail principal) para deixar o email invisível (para não receber spam por exemplo).

Também é possível definir parâmetros avançados como (clique em "Etapa 3") como: Necessário endereço de entrega do cliente (Sim/Não) e "Leve os clientes para esta URL quando eles concluírem o checkout" (é chamado de parâmetro "ReturnURL"). Ao completar a compra, aparecerá na página de confirmação do paypal um botão "Return to (nome da loja) Store" que leva a este url cadastrado para retorno.

Após criar o botão, aparecerá o código HTML para ser copiado (basta fazer copy e paste do código para o seu site).

COMO EDITAR UM BOTÃO DE PAGAMENTO PAYPAL:
Para listar e editar os botões criados, utilize o endereço: https://www.paypal.com/br/cgi-bin/webscr?cmd=_button-management ("Acessar meus botões salvos" mostra a página de listagem e edição "Meus botões salvos" ou "My saved buttons"). Selecione o botão da lista e clique em "Editar botão de pagamento". É necessário fazer upgrade para um Business Account para poder ver os botões salvos.

CRIANDO CONTA DE TESTES NO PAYPAL (CONTA SANDBOX DE DESENVOLVEDOR):

Entre em "developer.paypal.com" e clique em "Applications -> Sandbox accounts -> Create Account" para criar e gerenciar contas de teste. Pode criar uma "Personal buyer account" (para testar funcionalidades do comprador) e outra conta como "Business merchant account" (para testar funcionalidades do vendedor). Nesta tela é possível definir qual valor (dinheiro) em US$ desejado de saldo para testar. Ao criar a conta, use o site https://www.sandbox.paypal.com/ para criar botões de pagamento teste e fazer compras teste.

RECEBENDO DOAÇÕES COM PAYPAL:

Para receber doações também é possível criar botões de doação. Este botão por exemplo, pode ser utilizado se você quiser doar para o meu Paypal (Rodrigo Siqueira), qualquer valor. Funciona mesmo!! Pode usar agora:

Para criar um botão de doação como esse, vá em "Merchant Tools -> Website Payments Standard -> Donations" e preencha o formulário. É possível definir o valor a ser doado ou deixar o doador escolher o valor que quiser.

De acordo com a página "Paypal-fees", as tarifas para receber pagamentos são:
Tarifas por transação Vendas à vista no Brasil: 4,99% + R$ 0,60. Se for parcelado, adicione 2,39% por parcela. Vendas internacionais: 5.99% + tarifa fixa de acordo com a moeda.

 

Ao tentar usar o paypal para receber pagamentos no site Elo7, apareceu mensagem de erro dizendo que precisa fazer upgrade da conta do PayPal para "Premier" ou "Business". Pelo site do Paypal fiz upgrade para "Premier" (Vendedor pessoa física?), parece que não paga nada a mais por isso.

 

Post by Rodrigo Siqueira (2014-06-06 18:50)

Post your comment:

Name: Email: Site:

Como criar aplicativos para Android usando o PhoneGap



Tutorial: Como fazer apps para android

Instruções passo a passo para criar Android apps com o PhoneGap para Windows 7.
Com este método é possível criar aplicações para celular em html e javascript. Não precisa usar outras linguagens de programação como Java e não precisa entrar no Eclipse. É possível desenvolver aplicativos para Android usando apenas HTML5 e JS.
Estas instruções mostram todos os passos, desde os pré-requisitos, instalações e configuração do ambiente para desenvolvimento até como usar o Phonegap para gerar pacote apk final para Android e subir no Google Play Store.

Passo 1: Instale o NodeJS e o Android SDK:

Baixe o Node JS no site http://nodejs.org/

Baixe o Android SDK clicando em "Download Eclipse ADT with the Android SDK for Windows". Se baixar a versão para 64-bit, então o nodejs também precisa ser 64-bit (x64). Execute o Android SDK Manager e instale o "Android 4.4.2 (API 19) -> SDK Platform [x]" (para não aparecer o erro "Please install Android target 19").

Passo 2: Instale o phonegap à partir do npm (instalador de pacotes do NodeJS)

Comando para instalar o Phonegap:
npm install -g phonegap --loglevel info
Se tiver erros ("npm ERR! not ok code 0 / ERR Failed using git / not found git"), instale a versão anterior (3.4):
npm install -g phonegap@3.4

Passo 3: Entre no phongap (linha de comando) com o comando "phonegap" e crie seu aplicativo para testes:

$ phonegap create MyApp
Isso cria a aplicação HelloWorld na pasta "MyApp". Para criar aplicação com nome MyApp, utilize o comando completo passando também os parâmetros com o id e o nome do app:
$ phonegap create MyApp com.example.myapp MyApp
 
$ cd MyApp
$ phonegap run android
 
Este último comando (phonegap run android) deu erro: "ERROR: executing command ant, make sure you have ant installed and added to your path". Para resolver precisa baixar o "Apache ANT" (ant.apache.org) e descompactar dentro da pasta (criar a pasta manualmente):
C:\Program Files\ANT\
Criar variável de sistema "ANT_HOME" (variável de ambiente):
Start -> Computer (aperte o botão da direita do mouse) -> Properties -> System Properties -> Advanced ->  Environment variables -> System variables -> New -> New System Variable

Variable name: ANT_HOME
Variable value: C:\Program Files\ANT\apache-ant-1.9.4
Também editei a variável de sistema "PATH" nessa mesma tela, precisei adicionar ao final do PATH o valor ";%ANT_HOME%\bin" para o phonegap run android encontrar o ANT executável (ant.bat).

Instale o JAVA JDK para não ocorrer o erro "Error: Failed to run 'java -version', make sure your java environment is set up including JDK and JRE. Your JAVA_HOME variable is undefined".

Adicionar o java ao path:
No final do Path adicione o valor contendo o caminho do JDK/bin instalado: ";C:\Program Files (x86)\Java\jdk1.8.0_05\bin"
Para saber se o java.exe está no path, execute "java -version" para ver se aparece a versão do java.

Teste executando o comando "ant -v". Se aparecer o erro "Unable to locate tools.jar", então é necessário adicionar a variável JAVA_HOME para o ant funcionar, assim:
Variable name: JAVA_HOME
Variable value: C:\Program Files (x86)\Java\jdk1.8.0_05
Tente novamente rodar "ant -v". Se aparecer apenas "Buildfile: build.xml does not exist! Build failed", então é porquê FUNCIONOU corretamente o ant.
 
Rodei novamente o "phonegap run android" e agora apareceu um erro de cordova:
"Error: An error occurred while listing Android targets" e "\.cordova\lib\android\cordova\3.4.0\bin\create.bat: Command failed with exit code 8"
 
Para resolver precisa adicionar a variável de sistema ANDROID_HOME:
Variable name: ANDROID_HOME
Variable value: C:\android-sdk\sdk (pois foi aqui onde instalei o SDK do Android)
E também precisa editar a variável PATH para adicionar no final ";%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools"
Esse trecho ";%ANDROID_HOME%\platform-tools" precisa ser adicionado ao Path para não ocorrer o erro "Error executing adb devices: adb is not recognized as an internal or external command"
 
Agora funcionou melhor o comando "phonegap run android", apareceu "BUILD SUCCESSFUL" mas deu erro: "ERROR : No emulator images (avds) found". Pelo menos criou o arquivo APK em "./MyApp/platforms/android/ant-build/HelloWorld-debug.apk"
Para corrigir este problema, crie um emulador de Android (explicado no próximo passo). A sigla AVD significa Android Virtual Device.
 

Passo 4: Crie um emulador de Android para testar seu aplicativo

Utilize o comando:

android create avd --name test --target android-19

Em seguida rode novamente "phonegap run android" e aparecerá o emulador do Android com o aplicativo "HelloWorld" instalado (ver tela capturada do emulador do Android contendo o Hello World). Se ocorrer o erro "emulator: ERROR: This AVD's configuration is missing a kernel file", tente criar novamente o emulador.

Copiei o arquivo "HelloWorld-debug.apk" para um endereço na web, acessei com meu celular Android e consegui instalar corretamente.

Para o emulador ficar rápido, precisa instalar o Intel Hardware Accelerated Execution Manager (HAX ou HAXM).

Passo 5: Edite o conteúdo do seu aplicativo.

Na pasta 'www', pode editar os arquivos www/index.html, www/css/index.css e www/js/index.js

A cada vez que editar os arquivos (HTML/CSS/JS) com as páginas, pode usar o browser para testar e rodar novamente o comando phonegap run android para visualizar o app no emulador de android.

 

Passo 6: Criar o ícone da aplicação e Splash Screen (tela de abertura)

* Criar o Ícone (app icon):
O ícone é o arquivo icon.png que fica na pasta "www" do seu aplicativo. O tamanho é 128x128 pixels. Você pode substituir a imagem default (icone original) pela imagem que será o ícone da aplicação. IMPORTANTE: Substitua também a imagem "icon.png" em outras resoluções que estão nos diretórios "platforms/android/res/drawable-*". A pasta " drawable-xhdpi" foi onde coloquei o ícone que funcionou na instalação do aplicativo no meu fone celular android Motorola Moto G, pois usa a resolução XHDPI.
As pastas com ícones são:
platforms/android/res/drawable-xhdpi/icon.png (96x96 pixels)
platforms/android/res/drawable-hdpi/icon.png (72x72 pixels)
platforms/android/res/drawable-ldpi/icon.png (36x36 pixels)
platforms/android/res/drawable-mdpi/icon.png (48x48 pixels)
platforms/android/res/drawable/icon.png (96x96 pixels)
 
O ícone original (default) de aplicação feita com o phonegap é este:
Caso o ícone no emulador não mude (fique a imagem default ou ícone antigo ao invés da imagem que você criou), remova a pasta "ant-build" e execute novamente o comando "phonegap run android" e o ícone aparecerá atualizado.
 
* Para o aplicativo ter Splash Screen (tela de abertura) é necessário criar as imagens (em várias resoluções) com nome "splash.png".
Copiar as imagens (splash.png) para os diretórios:
platforms/android/res/drawable-ldpi/splash.png (small, 426x320 pixels)
platforms/android/res/drawable-hdpi/splash.png (large, 640x480 pixels)
platforms/android/res/drawable-mdpi/splash.png (medium, 470x320 pixels)
platforms/android/res/drawable-xhdpi/splash.png (extra large, 960x720 pixels)

Incluir esta linha no arquivo de configuração "www/config.xml":
<preference name="SplashScreen" value="splash" />
 
A tela inicial (splashscreen) aparece por 3 segundos. Se quiser mudar o valor, adicione esta linha na configuração xml com o valor desejado (ex: 3000 = 3 segundos):
<preference name="SplashScreenDelay" value="3000" />
 
OBS: As imagens VÃO FICAR DISTORCIDAS (ex: logotipo oval ao invés de redondo) dependendo da resolução do celular (problema de aspect ratio), então utilize o método 9-patch para criar os arquivos splash.png e renomeie todos os arquivos de "splash.png" para "splash.9.png" (não precisa mudar nada no xml). A maneira mais fácil para usar o método "9-Patch" é criar uma borda transparente de 1 pixel na imagem e marcar 4 pixels de preto e mais 2 linhas grandes pretas, conforme este modelo (amplie para ver os 4 cantos da imagem). Este exemplo de splash screen com png 9 patch eu peguei do meu diretório "platforms/android/res/drawable-hdpi":
 
Veja a ampliação das bordas da imagem splash acima.
Os pixels pretos (linha superior e lateral esquerda) definem o trecho da imagem que vai ser expandido (scalable area) e as linhas pretas (linha inferior e lateral direita) definem a área que vai ficar de tamanho fixo (fill area). Os pontos brancos e cinza são a transparência do photoshop.
 
Se ao rodar "ant release" aparecer o erro abaixo, mude o nome de "splash.9.png" para outro nome, como "mysplash.9.png" e mude também o www/config.xml na linha <preference name="SplashScreen" value="mysplash" /> 
 
Mensagem de erro:
     [aapt] res\drawable\splash.png:0: error: Resource entry splash is already defined.
     [aapt] res\drawable\splash.9.png:0: Originally defined here.
 

Passo 7: Gerar a versão para release do apk (sem extensão "-debug.apk"):

Ao gerar o apk, o nome ficou assim: "HelloWorld-debug.apk". Então precisa criar sua chave para produzir a versão final do apk (versão release).
 

7a) Criar pasta com arquivo keystore (ex: my-release-key.keystore) de senha para assinar sua aplicação.
Aprendi a fazer isso aqui: http://developer.android.com/tools/publishing/app-signing.html#cert
Comando para criar suas senhas ("keystore password" e "app_name password") no arquivo .keystore com validade de 20000 dias:
keytool -genkey -v -keystore my-release-key.keystore -alias app_name -keyalg RSA -keysize 2048 -validity 20000
(copie o arquivo gerado "my-release-key.keystore" para uma pasta segura)

7b) Criar arquivo "platforms/android/ant.properties" para dizer ao ant onde está seu keystore. Digite as duas linhas no "ant.properties" definindo a pasta para onde foi copiado seu arquivo e definindo o nome (alias/app_name) do seu aplicativo:
key.store = C:\Users\(usuario)\keystores\my-release-key.keystore
key.alias = app_name
 
7c) Executar os comandos para compilar a aplicação em modo release:
cd platforms/android
ant release

Esse comando "ant release" deve produzir a mensagem "BUILD SUCCESSFUL" e o arquivo final na pasta "bin":
platforms/android/bin/HelloWorld-release.apk
 
7d) Assinar a versão final:
cd bin
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore /Users/(usuario)/keystores/my-release-key.keystore AppName-release-unsigned.apk app_name

Esse comando vai pedir sua senha e produzir mensagem "jar signed".
 
# Verificar se deu certo com o comando (que deve mostrar "jar verified." e mensagem de "warning certificate chain is not validated" que pode ser ignorada):
jarsigner -verify -verbose -certs AppName-release-unsigned.apk
Se der erro, vai aparecer: "jar is unsigned. (signatures missing or not parsable)"
 
7e) Rodar o zipalign para criar o arquivo apk final:
zipalign -v 4 AppName-release-unsigned.apk AppName.apk
Este comando deve produzir mensagem "Verification succesful" e salvar a versão final com nome "AppName.apk", que pode ser enviada (upload) para o Google Play.
 

Passo 8: Publicar o aplicativo no Google Play Store

 
 
 
Próximos passos:


* Como mostrar a barra de status do celular no topo da aplicação (habilitar barra para mostrar sinal, hora, status da conexão, nível da bateria, etc.)

Basta mudar no arquivo www/config.xml:
Onde estava:<preference name="fullscreen" value="true" /> (o default esconde o status bar)
Mudar para: <preference name="fullscreen" value="false" /> (isso mostra a barra de status)


* Fazer iframe funcionar mostrando site externo:

A primeira tentativa de visualizar página com iframe não funcionou ao tentar mostrar página externa (site de outro url). Iframe funciona no phonegap sem problemas para mostrar páginas dentro da própria aplicação. O problema foi que o arquivo de configuração MyApp/www/config.xml estava configurado para não permitir acessar páginas ou arquivos externos. Para corrigir o problema do iframe no phonegap:
Comentei a linha:
<access origin="http://127.0.0.1*"/>
Descomentei a linha:
<access origin="*" />


* Como compilar no PhoneGap um aplicativo feito no Sencha Touch:
(ainda não fiz)

Dicas:

* Emulador via browser Chrome: Instale a extensão do browser Chrome chamada "Ripple Emulator" para poder testar seus aplicativos ou visualizar páginas web como se estivesse usando um smartphone celular.

* Automatizar passos da compilação: (OBS: Não funcionou bem comigo!)
É possível automatizar os passos de criação da versão final do apk usando apenas o comando "ant release". A vantagem é que economiza alguns passos, não precisa entrar com a senha. Só precisei rodar o comando do "zipalign" para gerar a versão final. O método é:
Editar o arquivo platforms/android/custom_rules.xml, adicionando dicionar a linha logo abaixo a linha <project>:
<property file="C:\Users\(usuario)\keystores\my-release-key.private-password" />
Criar este arquivo "my-release-key.private-password"  contendo 2 linhas com suas senhas:

key.store.password=(sua senha)
key.alias.password=(sua senha)
 

* Trocar o nome da aplicação:
Para mudar o nome do default "HelloWorld" para outro nome, modifique dentro do arquivo de configuração "www/config.xml". 
Se preferir não alterar no www/config.xml então será necessário alterar diretamente nos arquivos gerados:
1) Altere o arquivo "platforms/android/build.xml":
Onde estava: <project name="HelloWorld" default="help">
Troque por: <project name="Nome-do-seu-app" default="help">
Isso vai fazer com que o arquivo apk gerado pelo comando "ant release"  fique com o nome desejado do seu app ao invés de "HelloWorld"
2) Altere o arquivo "www/config.xml":
Altere de "helloworld" para o nome desejado do seu app nas linhas:
id = "com.phonegap.helloworld"
e
<name>HelloWorld</name>
(este nome é o que vai aparecer escrito sob o ícone do aplicativo instalado no celular ou tablet)

* Permitir que o usuário faça zoom (pinch) na aplicação:
Altere nas páginas html a linha <meta name="viewport"> onde está  user-scalable=no por user-scalable=1


Outros comandos:

# Compila / Cria apk, mas sem rodar (sem instalar o resultado no emulador de Android):
phonegap build android
(OBS: Ao invés do comando "phonegap build android" é prefirível rodar "phonegap run android" para garantir que o conteúdo da pasta assets/www estará correto)

# Mostra a versão atual do phonegap:
phonegap -v
(minha versão é 3.5.0-0.21.14)

# Atualiza a versão do phonegap: 
npm update -g phonegap
# ou melhor, comando mais verbose para mostrar o que está acontecendo durante a atualização:
npm update -g phonegap 
--loglevel info
 

Para rodar compilar o aplicativo para iOS, é necessário usar Mac rodando o Xcode.

Documentação adicional:
http://developer.android.com/tools/publishing/publishing_overview.html

Documentação da API do PhoneGap: 
http://docs.phonegap.com/en/2.7.0/

Contém referência de API para acesso ao acelorômetro, câmera, bússola ("Compass"), captura de arquivos de mídia do dispositivo ("Capture"),  acesso aos contatos, acesso à rede e verificação do status da rede e celular, obtenção de informações sobre o dispositivo, acesso aos eventos usando javascript (native events), geolocalização ("Geolocation"), InAppBrowser (abrir URLs em outros apps), notificações (visual, audio, tátil), armazenamento, Media (gravação e reprodução de áudio) e mostrar aplicações na splashscreen.

 

Resolução de problemas e erros comuns:

Se ao rodar o "jarsigner" ocorrer o erro: "jarsigner: Certificate chain not found for: app_name.  app_name must reference a valid KeyStore key entry containing a private key and corresponding public key certificate chain.", não resolvi este problema. Criei um novo projeto em outra pasta, gerei um keystore novo e então funcionou.

* Se ao rodar o "jarsigner" ocorrer o erro: "jarsigner error: java.lang.RuntimeException: keystore load: Keystore was tampered with, or password was incorrect", então a senha está incorreta. Use a senha certa ou gere o arquivo keystore novamente.

* Se ocorrer o erro ao instalar o APK "App not installed", pode ser problema na assinatura do app. Tente os passos a partir do comando "jarsigner".

* Se ao rodar "ant release" não pedir a senha, verifique se o arquivo "ant.properties" existe e está correto. Pois o "ant release" deve pedir para entrar a senha.

* Ao compilar para iOS, o aplicativo não rotacionou automaticamente ao virar a tela (orientation): não resolvido ainda. Supostamente deveria funcionar se no "config.xml" tiver a configuração: <preference name="Orientation" value="default" />, pois "default" significa que a orientação fica tanto em modo paisagem (landscape mode) quanto em modo retrato (portrait mode). Outras opções são (para fixar o modo paisagem ou fixar modo retrato):
<preference name="Orientation" value="landscape" />
<preference name="Orientation" value="portrait" />

* Para desinstalar um aplicativo do emulador de Android: Clique em "MENU", "Manage Apps", selecione o app que quer remover e clique "Uninstall". 

* Se ao rodar "ant release" aparecer o erro: "BUILD FAILED - The following error occurred while executing this line: build.xml signing key (app name) not found", então pode ser que o arquivo gerado "my-release-key.keystore" tenha sido gerado sem o alias (nome) correto da aplicação. Gere novamente o keystore.

* Se ao rodar o zipalign aparecer o erro "Output file 'HelloWorld.apk' exists", então apague este arquivo .apk para poder gerá-lo novamente com o zipalign.

* Ao rodar a aplicação no emulador, não aparece o ícone correto.

* Ao instalar novamente o aplicativo sobre uma versão anterior previamente instalada aparece um erro no celular: 

* Se ao rodar "phonegap -v" aparecer erro "phonegap is not recognized as an internal or external command, operable program or batch file", então rode o comando "npm update -g phonegap" para atualizar e reconfigurar o executável do phonegap.

* Se ao abrir o app no celular aparecer o erro "Application Error: net::ERR_FILE_NOT_FOUND (file:////android_asset/www/index.html)", então pode ser que o diretório "platforms/android/assets/www" tenha sido removido ao rodar o comando "phonegap build android". Rode o comando "phonegap run android" para ver se o diretório assets/www é criado novamente com os arquivos html.

* Se ao rodar "phonegap run android" ocorrer este erro: "[error] ...platforms\android\cordova\build.bat: Command failed with exit code 2", verifique se o path contém "%ANDROID_HOME%\platform-tools". Se o erro persistir, remova a pasta "platforms/android" e tente novamente.

* Se ocorrer o erro "ERROR: No started emulators found, starting an emulator; No emulator images (avds) found", então precisa criar o emulador de Android.

* Se ao rodar "phonegap run android" ocorrer o erro "[error] No Java files found which extend CordovaActivity" (ocorreu quando atualizei os pacotes do "SDK Manager.exe"), remova a pasta "platforms/android" e tente novamente.

* Se não encontrar o aplicativo ao rodar "phonegap run android" ou outro comando começando com phonegap, tente desinstalar o phonegap e instalar novamente, com os comandos:

npm uninstall -g phonegap --loglevel info
npm install -g phonegap --loglevel info

 

* Se o programa "zipalign.exe" não for encontrado, use o caminho completo:
c:\android-sdk\sdk\build-tools\android-4.4W\zipalign.exe
(confira o local onde foi instalado)

* Lentidão: Se o emulador de Android estiver muito lento, instale o Intel Hardware Accelerated Execution Manager (HAX ou HAXM). A mensagem de erro que aparece (ao rodar "phonegap run android") quando o emulador fica lento é: "emulator: Failed to open the HAX device! emulator: Open HAX device failed. HAX is not working and emulator runs in emulation mode". A mensagem correta (quando o HAX device está instalado e o emulador fica rápido) é: "HAX is working and emulator runs in fast virt mode".

OBS: Criei estas instruções pois tentei fazer um aplicativo em HTML 5 e Javascript para Android com o Sencha Touch, mas não consegui gerar o pacote APK, então usei o PhoneGap para criar o pacote APK.


Exemplo com o passo-a-passo para gerar aplicativo de Android com o APK. Executei a partir do "cygwin" estes comandos abaixo para criar um aplicativo chamado "BDM":

Comando:
$ phonegap create BDM --id br.com.insite.bdm --name BDM

Resultado:
[phonegap] create called with the options C:\cygwin\home\rodrigo\BDM com.phonegap.helloworld HelloWorld
[phonegap] created project at C:\cygwin\home\rodrigo\BDM
 
Comandos:
$ cd BDM
$ nano www/config.xml
Editei essa configuração xml (usei o editor de textos "nano") para mudar o nome de "helloworld" para o nome desejado do meu app nas linhas:
 Onde estava: id = "com.phonegap.helloworld"
 Mudei para: id = "br.com.insite.bdm"
 (Mudei também o número de versão do aplicativo, onde estava: version = "1.0.0")

 Onde estava: <name>HelloWorld</name>

 Mudei para: <name>BDM</name>
(Este é o nome que aparecerá na tela abaixo do ícone do app instalado)

 Comentei a linha: <access origin="http://127.0.0.1*"/>
 Descomentei a linha: <access origin="*" />

 Mudei a linha "orientation" de "default" para "portrait" (para aplicação funcionar apenas na vertical)

 Mudei a linha "fullscreen" de "true" para "false" para mostrar a barra de status do celular (sinal/wifi/bateria) com a aplicação aberta: <preference name="fullscreen" value="false" />
 

$ nano -w www/index.html
(fiz algumas alterações no www/index.html, assim como no "www/css/index.css" e "www/js/index.js")


$ phonegap run android
Resultado: Este comando vai rodar o emulador de Android que abrirá o aplicativo criado com extensão apk. Aparece mensagem "BUILD SUCCESSFUL... Installing app on emulator" .
 
# Não foi necessário fazer esse comando abaixo, pois o nome do apk ficou correto ao editar apenas no www/config.xml:
# nano platforms/android/build.xml
# (usei o editor de textos "nano" para trocar o nome do aplicativo onde aparecia name="HelloWorld" por name="BDM", que é o nome do meu app)
 
Copiar ícones do aplicativo:
cp icon-128x128.png www/icon.png
cp icon-96x96.png platforms/android/res/drawable-xhdpi/icon.png
(e outras pastas/resoluções)
 
 
Comando (rodar somente na primeira vez, pois as próximas compilações vão usar o mesmo arquivo keystore gerado):
$ keytool -genkey -v -keystore my-release-key.keystore -alias BDM -keyalg RSA -keysize 2048 -validity 20000
 
Resultado:
(isso pediu a senha desejada para ser criada e alguns outros dados pessoais). Apareceu:
[Storing my-release-key.keystore]

Comando (rodar somente uma vez, não precisa gerar de novo nas próximas compilações):
$ cat > platforms/android/ant.properties
key.store = /cygwin/home/rodrigo/BDM/my-release-key.keystore
key.alias = BDM
(pressionar control-D para finalizar e salvar o novo arquivo "ant.properties")
(OBS: Trocar "BDM" pelo nome/alias do seu app)
 
Comando (compilar para modo release):
cd platforms/android
ant release
Entre com a senha duas vezes (quando pedir "Please enter keystore password" e "Please enter password for alias"). Se não pediu a senha, verifique se o arquivo "ant.properties" está correto.

Resultado:
BUILD SUCCESSFUL

Comando para assinar app:
cd bin
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore /cygwin/home/rodrigo/BDM/my-release-key.keystore BDM-release-unsigned.apk BDM
 
Resultado:
Mensagens de adding (...), signing (...) e finalmente apareceu:
jar signed.
 
Comando para gerar apk para instalação:
#zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk
zipalign -v 4 BDM-release-unsigned.apk BDM.apk
 
Resultado:
Verifying alignment of HelloWorld.apk (4)... (OK - compressed)
Verification succesful
(isso gerou o arquivo final HelloWorld.apk, que copiei para um endereço na web e acessei com o celular para instalar corretamente)
 
----
 
Dica: Testar na maior quantidade de dispositivos móveis (celulares de diferentes tamanhos de tela e resolução e tablets). Quando testei no Samsung Galaxy Pocket 2 SM-G110B de 3.3 polegadas, ocorreu problema devido à baixa resolução (320x240 pixels): algumas linhas sumiram (borda do div com espessura 1 pixel) aleatoriamente e imagens reescaladas ficaram com baixa resolução.
 
----
Como identificar (no servidor) se o acesso a uma página está vindo do aplicativo móvel:

Ao acessar uma página web com o app instalado no meu celular (Galaxy S5), o servidor web recebeu a seguinte variável de ambiente "X_REQUESTED_WITH" contendo o id da aplicação:
HTTP_X_REQUESTED_WITH = br.com.insite.bdm

O servidor também recebe a variável USER_AGENT mas não serve como identificador confiável da origem do acesso:
HTTP_USER_AGENT = Mozilla/5.0 (Linux; Android 5.0; SM-G900MD Build/LRX21T; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/43.0.2357.121 Mobile Safari/537.36
 
----
Outras alternativas ao PhoneGap:

Fiz um teste usando o aplicativo para desenvolver apps online "MIT App Inventor". Em alguns modelos de celular funcionou corretamente a instalação do APK, mas em outros modelos apareceu a mensagem de erro: "Erro desconhecido. column date_modified is not allowed in queries. Relatar este erro."
 

Post by Rodrigo Siqueira (2014-06-02 14:01)

From: Álvaro Bezerra
No meu computador apareceu essa mensagem ao tentar emular "emulator: ERROR: This AVD's configuration is missing a kernel file". Já criei vários emuladores e ela continua a aperecer. Alguma sugestão. 2015-08-13 21:08

Post your comment:

Name: Email: Site:

Como fazer aplicativo para Android em HTML e Javascript

Instruções passo a passo para fazer seu primeiro mobile app para Android (Como criar apps para Android):

OBS: Sugiro primeiro usar as instruções "criar aplicativo para android com phonegap", pois funcionou melhor do que usar apenas o Sencha Touch.

Para fazer um app para Android usando HTML5 e JavaScript, desenvolvendo em ambiente Windows, é necessário:

Passo 1: Obter o Sencha Touch
 * Baixar e descompactar o Sencha Touch (pode colocar em qualquer pasta, não precisa instalar)

Passo 2:  Instalar o Sencha CMD
 * Precisa ter o Java instalado (pois precisa do JRE - Java Runtime Environment) senão dá o erro: "The installer could not find a valid Java(tm) on this machine. Supported versions: Vendor: any min. 1.6.0 max. any". Por default o Sencha CMD é instalado na pasta C:\Users\(usuário)\bin

Passo 3: Criar o template inicial para o aplicativo
 * Utilize o CMD.EXE para executar o comando que vai criar a aplicação inicial:

> cd c:\Users\(usuário)\bin\Sencha\Cmd\4.0.4.84

> sencha -sdk C:\path\to\touch generate app MyApp c:\tmp\MyApp
Trocar C:\path\to\touch pela pasta onde descompactou o Sencha Touch.
O MyApp é o nome do seu aplicativo.
Trocar C:\tmp\MyApp pela pasta desejada onde será criado o seu aplicativo.

Passo 4: Executar o servidor web para testar a aplicação

* Vá para a pasta onde está seu aplicativo (MyApp) e Inicie o servidor web (vêm com o Sencha Touch) com o comando:
> c:\Users\(usuario)\bin\Sencha\Cmd\4.0.4.84\sencha web start

Acesse seu aplicativo pelo endereço:

http://localhost:1841/

(se não aparecer a tela do aplicativo e sim uma listagem de arquivos, é porquê você não iniciou o servidor web a partir do diretório onde está o aplicativo "MyApp")

Passo 5: Editar o conteúdo do aplicativo (desenvolver seu próprio aplicativo)
* Altere o conteúdo do arquivo "MyApp/app/view/Main.js" para incluir o conteúdo (html e js) da sua aplicação.

Passo 6: Compilar a versão final
Compile a versão final do aplicativo usando o comando "sencha app build", que vai criar a pasta MyApp/build com seu aplicativo:
/c/Users/(user)/bin/Sencha/Cmd/4.0.4.84/sencha app build
(usei essa sintaxe de diretórios acima pois uso cygwin ao invés do cmd.exe)
OBS: Precisa instalar o ruby (download em rubyinstaller.org) pois sem a linguagem ruby instalada, ocorre erro ao compilar o app: "com.sencha.exceptions.ExNotFound: Failed to detect ruby". Ao instalar o ruby, utilize a opção do instalador para adicionar o Ruby ao PATH do Windows (Add Ruby executables do your PATH).

Passo 7: Preparar para o lançamento (gerar arquivo APK para instalar no Android)
(OBS: NÃO CONSEGUI GERAR .APK COM O SENCHA, ENTÃO PULE PARA O PASSO 8 PARA USAR O Phonegap).

* Seguir os passos para preparar para o lançamento (Preparing for release) e gerar o APK. Veja a documentação do Sencha "Native Android Packaging":

1) Baixar o Android SDK Tools: http://developer.android.com/sdk/index.html

2) Obter o Android ready certificate (debug ou release) para assinar a aplicação. Gerar arquivo tipo "Java Keystore" com o comando (executar dentro da pasta do Java):
C:\Program Files (x86)\Java\jre7\bin\keytool -genkey -v -keystore c:\tmp\my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

3) Criar o arquivo de configuração (packaging configuration)

4) Executar o packager para criar o pacote .apk
 

Passo 8: Usando o Phonegap para gerar o pacote apk para android (clique no link para ver os detalhes)

 

Erros e soluções de problemas:
Ao executar "sencha app build native" apareceu o erro "Command must be run from an application folder". Mudei para o diretório da aplicação e rodei novamente o comando, mas o erro agora é: Unable to find a javac compiler: com.sun.tools.javac.Main is not on the classpath. Perhaps JAVA_HOME does not point to the JDK. It is currently set to "C:\Program Files (x86)\Java\jre7".
Para resolver essa falta do compilador javac, fiz download e instalei o "Java SE Development Kit 7", porém como escolhi a versão 64 bit, preciso mudar o path da variável JAVA_HOME para o local correto: "C:\Program Files\Java\jre7". Para adicionar no PATH fui em "Computer" (antes era "My Computer") -> Properties -> Advanced system settings -> Environment Variables -> New

Variable name: Path
Variable value: adicionar ";C:\Program Files\Java\jdk1.7.0_60\bin" no final do Path

Executar:
/c/Users/rodrigo/bin/Sencha/Cmd/4.0.4.84/sencha.exe app package build packager.json

* Instale o arquivo apk gerado no seu aparelho Android.
 
* Ícone do aplicativo
 

Documentação para desenvolvimento de apps para Android com o Sencha Touch: 
http://docs.sencha.com/touch/2.3.1/#!/guide/first_app
Página com documentação: http://www.sencha.com/products/touch/thank-you/

 

Post by Rodrigo Siqueira (2014-05-27 00:48)

Post your comment:

Name: Email: Site:

Usando screen no cygwin

Eu uso o "GNU screen" no Cygwin para poder gerenciar várias janelas de bash dentro de uma janela só. Uso teclas de atalho para alternar entre uma janela e outra. Por exemplo estes são os atalhos mais usados no screen:
"Ctrl-A P"  (previous) mostra o conteúdo da janela anterior
"Ctrl-A N" (next) vai para a próxima janela
"Ctrl-A C" cria uma nova janela dentro do screen.

Instruções (passo-a-passo) para usar o screen com cygwin:

1) Instalar o pacote "screen" à partir do setup do Cygwin.

2) Para o screen entrar como default ao entrar no cygwin, passei a usar um arquivo de inicialização que criei, chamado "cygwin2.bat", para substituir o "cygwin.bat" original. Assim eu clico no cygwin2.bat e entro direto no mintty e no screen. A vantagem de usar o mintty (ao invés do default CMD.exe) é que posso usar o mouse para redimensionar a janela onde roda o cygwin e possui melhores recursos de scroll, copy e paste com o mouse, fonte mais legível, etc.

Conteúdo do meu cygwin2.bat:

@echo off
C:
chdir C:\cygwin\bin
start mintty -e /usr/bin/screen
 
Ou seja, apenas mudei a última linha do cygwin.bat que originalmente tinha o comando:
bash --login -i


3) Criei um arquivo de inicialização do screen chamado ".screenrc" no meu diretório raiz do cygwin, com o conteúdo:

shell -/bin/bash
nethack on
echo "welcome :-)"
defscrollback 12000
# Cria algumas janelas:
screen -t '' 0 /bin/bash --login -i
screen -t '' 1 /bin/bash --login -i
screen -t '' 2 /bin/bash --login -i
screen -t '' 3 /bin/bash --login -i
screen -t '' 4 /bin/bash --login -i
screen -t '' 5 /bin/bash --login -i

 

Um problema que tive (e consegui corrigir) foi que a última linha da tela (last line/bottom line) ficou com problema de terminal, bagunçando as letras e dificultando editar um texto, mudando as outras linhas de posição, pulando letras, editando fora de lugar, deixando a última linha em branco e mantendo o cursor fora de lugar. Para resolver esse problema da última linha, criei um arquivo de configuração do Mintty (arquivo ".minttyrc") com o seguinte conteúdo no meu diretório raiz:

Columns=120
Rows=54
CopyOnSelect=yes
Transparency=low
CursorColour=252,236,188
ScrollbackLines=25000
Font=DejaVu Sans Mono
FontHeight=8
CursorType=block
CursorBlinks=no
BoldAsFont=no
FontIsBold=no
Term=xterm-256color
 
4) Criei um atalho para executar o screen a partir do Windows:
Aperte o botão da direita do mouse no padrão de fundo do Windows -> Novo -> Atalho:
Target: C:\cygwin\bin\mintty.exe -e /usr/bin/screen -d -RR (e criar shortcut com a tecla: "CTRL-ALT-X" para este atalho).
Assim a cada vez que pressionar control-alt-x, vai entrar o screen, recuperando a sessão anterior (se tiver) ou criando uma sessão nova.
No meu computador, o atalho criado ficou na pasta:
C:\Users\(meu usuário)\AppData\Roaming\Microsoft\Internet Explorer\Quick Launch\User Pinned\StartMenu

Ao instalar a versão 64 bits do Cygwin (http://www.cygwin.com/setup-x86_64.exe), ocorreu um erro ao tentar executar o "screen". O GNU screen só funcionou a primeira vez e não entrou quando tentei executar pela segunda vez. Apareceu erro:

Directory /tmp/uscreens-S-my_username must have mode 700.

Para resolver esse problema, precisei rodar o Cygwin.bat como administrador e executar os comandos no bash:
(obs: trocar "my_username pelo seu nome de usuário no cygwin)

Comando 1:
chgrp Usuários /tmp/uscreens/S-my_username 

Se você estiver usando Windows em inglês, o comando é:
chgrp users /tmp/uscreens/S-my_username 

Comando 2:
chmod 700 /tmp/uscreens/S-my_username

Agora com isso consigo usar o screen como usuário comum (sem precisar rodar como administrador do Windows). Essa solução do problema funcionou no Windows 7 e Windows 8.

Se não funcionar, pode tentar remover o diretório /tmp/uscreens e tentar rodar o screen novamente como usuário normal.
Outro erro que pode ocorrer é esse: Directory /tmp/uscreens must have mode 777 (resolvi ao remover este diretório).

 

OUTRA SOLUÇÃO PARA ESTE PROBLEMA DO SCREEN (sem precisar mudar o grupo do usuário, quando usar cygwin64 e Windows 7 ou Windows 8 ou Windows 10):

Fazendo o GNU screen funcionar no cygwin64 e Windows 10:

Para não dar erro ao executar o cygwin screen.exe (GNU screen):
Directory '/tmp/uscreens' must have mode 777.
Directory /tmp/uscreens/S-rodrigo must have mode 700.
 
Após rodar o screen pela primeira vez, rode o seguinte comando:
chgrp -R Users /tmp/uscreens/
chmod 777 /tmp/uscreens/
chmod 700 /tmp/uscreens/S-rodrigo
(OBS: tambem pode ser grupo "None" ao invés do grupo "Users")
 
Isso resolve o problema de permissão do diretório para o chmod funcionar corretamente com grupo (group) no cygwin64.
 

Post by Rodrigo Siqueira (2014-05-11 15:08)

Post your comment:

Name: Email: Site:

Reconhecimento de caracteres com o Tesseract OCR

Consegui usar o Tesseract OCR para reconhecer caracteres (converter imagem em texto).

Instalei o Tesseract OCR no Linux Ubuntu com o comando:
sudo apt-get install tesseract-ocr

Rodei o tesseract com o comando:

tesseract test.png resultado.txt

Isso extraiu as palavras encontradas na imagem (test.png) e salvou o texto reconhecido no resultado.txt

A qualidade foi boa para a maioria das palavras, mas apareceram alguns caracteres estranhos de erro em palavras com fonte muito diferente.

Post by Rodrigo Siqueira (2014-04-23 16:30)

Post your comment:

Name: Email: Site:

Instalando Linux Ubuntu junto com o Windows 7 (VMWare Player)

É possível rodar o Windows e o Ubuntu ao mesmo tempo utilizando o gerenciador de máquinas virtuais VMWare Player (similar ao Virtualbox que também pode ser usado para rodar Ubuntu e Windows ao mesmo tempo).

1) Baixe e instale o VMWare Player (software gratuito) para Windows 7. Rode e clique em "Create a New Virtual Machine".

2) Baixe a imagem .iso do Linux Ubuntu (instalação do Ubuntu, por exemplo "ubuntu-14.04-desktop-amd64.iso") e instale a partir do "New Virtual Machine Wizard" do VMware Player. Selecione o arquivo .iso em "Installer disc image file (iso)".

Para o Ubuntu ler arquivos do hd do Windows (pastas compartilhadas), fui em Virtual Mchine Settings -> Options -> Shared Folders, "Always enabled" e adicionei o folder name "C" apontando para o Host Path "C:\". Isso vai fazer o compartilhamento de pastas aparecer dentro de "/mnt/hfgs/C".
Para facilitar, criei um atalho do "c:" do Windows para a pasta "/c" do linux Ubuntu, com este comando:

sudo ln -s /mnt/hgfs/C /c

O problema é que ao atualizar o Ubuntu (rodando o Software Updater) sempre que o Kernel é atualizado, os drives do HD do Windows não ficam mais acessíveis. Para voltar a funcionar as pastas compartilhadas (Virtual Machine Settings -> Options -> Shared Folders -> Folder sharing -> Always enabled -> Name="C" , Host Path = "C:\" ) basta rodar a instalação ou reconfiguração do "vmware tools" (não precisa fazer novamente o "Player -> Manage -> Reinstall VMWare Tools"):
/usr/bin/vmware-config-tools.pl

Após a instalação do Ubuntu no VMware Player, instalei também os seguintes aplicativos:

Apache 2 (servidor web httpd):

sudo apt-get install apache2
sudo apt-get install php5

screen (gerenciador de múltiplas janelas bash dentro do xterm):
sudo apt-get install screen

MySQL (servidor de banco de dados):
sudo apt-get install mysql-server
(mas vou substituir em breve pelo maria-db-server)

Outros programas que instalei posteriormente pois não vieram instalados no Ubuntu:
whois (para informar dados de um domínio na Internet)
tesseract-ocr (programa de OCR para Linux, feito pela HP e hoje mantido pelo Google)
memcached (banco de dados em memória para cache de informações)

Para manter a os aplicativos do ubuntu atualizado, use o comando:
sudo apt-get update && sudo apt-get upgrade

Outra opção de instalar o Ubuntu e Windows na mesma máquina é rodar o Ubuntu separado do Windows, usando o método Dual Boot.

OBS: Tive um problema na instalação do Ubuntu 14.04 junto com o VMware Player 6.0.1, pois não consegui instalar o Player -> Manager -> VMWare Tools. Mas resolveu quando atualizei para versão VMware 6.0.2.
 
Ao tentar fazer atualização do VMware Tools, às vezes ocorre o erro: "Error while updating software: Corrupt file received from update server.".
 
 

Post by Rodrigo Siqueira (2014-04-23 15:59)

Post your comment:

Name: Email: Site:

Bootstrap 3 icons

Bootstrap Icons (Bootstrap version 3):

Bootstrap 3 contains more than 200 icons provided by Glyphicon. See all available bootstrap 3 icons. The previous bootstrap version of icons is here: bootstrap 2 icons.

Usage (complete working example).This will display the "check" (v icon):

 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 <i class="glyphicon glyphicon-ok"></i> OK icon<br>

See also other live samples of bootstrap icons and Font Awesome Icons with Web Application Icons, Text Editor Icons, Directional Icons, Video Player Icons and Brand Icons.

Complete list of 200 bootstrap icons:

 

 

 

 

 

 

                                                                                                                                                                                                                                                                                                                                                                                                               

 

Sample usage (html syntax): <span class="glyphicon glyphicon-asterisk"></span>

List of icon names and sample image for each icon:

  •  asterisk
  •  plus
  •  euro
  •  minus
  •  cloud
  •  envelope
  •  pencil
  •  glass
  •  music
  •  search
  •  heart
  •  star
  •  star-empty
  •  user
  •  film
  •  th-large
  •  th
  •  th-list
  •  ok
  •  remove
  •  zoom-in
  •  zoom-out
  •  off
  •  signal
  •  cog
  •  trash
  •  home
  •  file
  •  time
  •  road
  •  download-alt
  •  download
  •  upload
  •  inbox
  •  play-circle
  •  repeat
  •  refresh
  •  list-alt
  •  lock
  •  flag
  •  headphones
  •  volume-off
  •  volume-down
  •  volume-up
  •  qrcode
  •  barcode
  •  tag
  •  tags
  •  book
  •  bookmark
  •  print
  •  camera
  •  font
  •  bold
  •  italic
  •  text-height
  •  text-width
  •  align-left
  •  align-center
  •  align-right
  •  align-justify
  •  list
  •  indent-left
  •  indent-right
  •  facetime-video
  •  picture
  •  map-marker
  •  adjust
  •  tint
  •  edit
  •  share
  •  check
  •  move
  •  step-backward
  •  fast-backward
  •  backward
  •  play
  •  pause
  •  stop
  •  forward
  •  fast-forward
  •  step-forward
  •  eject
  •  chevron-left
  •  chevron-right
  •  plus-sign
  •  minus-sign
  •  remove-sign
  •  ok-sign
  •  question-sign
  •  info-sign
  •  screenshot
  •  remove-circle
  •  ok-circle
  •  ban-circle
  •  arrow-left
  •  arrow-right
  •  arrow-up
  •  arrow-down
  •  share-alt
  •  resize-full
  •  resize-small
  •  exclamation-sign
  •  gift
  •  leaf
  •  fire
  •  eye-open
  •  eye-close
  •  warning-sign
  •  plane
  •  calendar
  •  random
  •  comment
  •  magnet
  •  chevron-up
  •  chevron-down
  •  retweet
  •  shopping-cart
  •  folder-close
  •  folder-open
  •  resize-vertical
  •  resize-horizontal
  •  hdd
  •  bullhorn
  •  bell
  •  certificate
  •  thumbs-up
  •  thumbs-down
  •  hand-right
  •  hand-left
  •  hand-up
  •  hand-down
  •  circle-arrow-right
  •  circle-arrow-left
  •  circle-arrow-up
  •  circle-arrow-down
  •  globe
  •  wrench
  •  tasks
  •  filter
  •  briefcase
  •  fullscreen
  •  dashboard
  •  paperclip
  •  heart-empty
  •  link
  •  phone
  •  pushpin
  •  usd
  •  gbp
  •  sort
  •  sort-by-alphabet
  •  sort-by-alphabet-alt
  •  sort-by-order
  •  sort-by-order-alt
  •  sort-by-attributes
  •  sort-by-attributes-alt
  •  unchecked
  •  expand
  •  collapse-down
  •  collapse-up
  •  log-in
  •  flash
  •  log-out
  •  new-window
  •  record
  •  save
  •  open
  •  saved
  •  import
  •  export
  •  send
  •  floppy-disk
  •  floppy-saved
  •  floppy-remove
  •  floppy-save
  •  floppy-open
  •  credit-card
  •  transfer
  •  cutlery
  •  header
  •  compressed
  •  earphone
  •  phone-alt
  •  tower
  •  stats
  •  sd-video
  •  hd-video
  •  subtitles
  •  sound-stereo
  •  sound-dolby
  •  sound-5-1
  •  sound-6-1
  •  sound-7-1
  •  copyright-mark
  •  registration-mark
  •  cloud-download
  •  cloud-upload
  •  tree-conifer
  •  tree-deciduous



Other usage example (this will display the circle-arrow-right icon):
<span class="glyphicon glyphicon-circle-arrow-right"></span>
or
<i class="glyphicon glyphicon-circle-arrow-right"></i>

 

This icon list above is for the version 3 of Bootstrap.

In version 2, the icons were a single image file using sprite method for display each icon.
In this version 3, the icons are inside a font file (webfont) automatically loaded by bootstrap.css (or bootstrap.min.css): /bootstrap/fonts/glyphicons-halflings-regular.woff (also .ttf, .svg and .eot extensions).

The icon size can be changed (enlarged or reduced), since they are vectorial images. Example of enlarged bootstrap icon:

 


This example is the "ok" icon with double size (2em means twice the default size). Syntax:
<span class="glyphicon glyphicon-ok" style="font-size: 2em;"> 

Other free icons collection: http://bootstrapguru.com/preview/piluku/ion-icons.html ("ionicons" for Ionic Framework). Including ion-ios-pulse and ion-ios-lightbulb-outline icon.

 

Post by Rodrigo Siqueira (2014-04-21 17:22)

Post your comment:

Name: Email: Site:



  Page 1 of 10 NEXT PAGE >>

| Explore users | New posts | Create your blog | Create your photo album |
| About Postbit | Our blog | Terms of use | Contact Postbit |


Copyright © 2016 - postbit.com