Um dos nosso produtos funciona sobre Raspberry Pi que é – dito seja de passagem – uma plataforma e tantas, não apenas para investigar, inventar mas também para produzir e ganhar o pão nosso de cada dia.

Todavia, o que mais me causava atrito era ter que toda vez criar uma imagem, gravar ela na SD, espetar isso no Raspberry, esperar ligar, comprovar as mudanças, etc.

Receita de bolo

1. Garanta que tenha tudo instalado
   $ sudo apt-get install -y qemu-system
2. Baixe a imagem do raspberry (ou qualquer outro sistema operacional) do seu interesse: https://www.raspberrypi.org/downloads/. Aos fins do exemplo, digamos que estamos usando raspbian-buster-lite.
3. Depois baixe os kernels daqui: https://github.com/dhruvvyas90/qemu-rpi-kernel
   $ cd ~/Downloads/
$ mkdir dev
$ git clone https://github.com/dhruvvyas90/qemu-rpi-kernel.git
4. Crie uma pasta de fácil acesso:
   $ mkdir ~/qemu-mv
5. Expanda o buster que baixou no ponto 1 para a pasta criada
   $ cd ~/qemu-mv
$ unzip ~/Downloads/2019-06-20-raspbian-buster-lite.zip
6. Agora precisamos pegar as dimensões da imagem para poder modifica-la:
   $ fdisk -l ~/qmu-mv/2019-06-20-raspbian-buster-lite.img
7. Repare que o tamanho do setor é 512 bytes e que a partição Linux começa no setor 540672. Multiplicando os dois obtemos 276824064. Com essa informação, montamos o disco para mudarmos dois arquivos que estão dentro da imagem:
   1. Criamos uma pasta e montamos a imagem lá:
      $ sudo mkdir /mnt/raspberry
$ sudo mount -v -o offset=276824064 -t ext4 2019-06-20-raspbian-buster-lite.img /mnt/raspbian
   2. Edite o arquivo ld.so.preload
$ sudo nano /mnt/raspbian/etc/ld.so.preload
   3. Comente todas as linhas colocando um ‘#’ no inicio de cada linha.
   4. Agora edite o arquivo /etc/fstab
      $ sudo nano /etc/fstab
   5. Substitua as referências para /dev/sda1 (vfat) e /dev/sda2 (ext4)
   6. Desmonte a unidade
      $ sudo umount /mnt/raspbian
8. Copie o kernel para dentro desta pasta
   $ cp ~/Downloads/dev/qemu-rpi-kernel/kernel-qemu-4.19.50-buster ~/qemu-mv/
9. Agora crie um arquivo com o conteúdo indicado abaixo
   $ nano ~/qemu-mv/meu-rb.sh
10. E dê direitos de execução ao script
    $ sudo chmod +x ~/qemu-mv/meu-rb.sh

Conteúdo do script meu-rb.sh

#!/bin/bash
qemu-system-arm \
-kernel ~/work/qemu_mv/kernel-qemu-4.19.50-buster \
-cpu arm1176 \
-m 256 \
-M versatilepb \
-serial stdio \
-append "root=/dev/sda2 rootfstype=ext4 rw" \
-drive file=~/work/qemu_mv/2019-06-20-raspbian-buster-lite.img,format=raw,index=0,media=disk \
-no-reboot \
-net nic \
-net user,hostfwd=tcp::5022-:22 

Com isso feito, é apenas rodar o script que o qemu abrirá uma sessão com o raspberry/arm.

Modificações feitas aqui são salvas de forma permanente (instalação de pacotes, configuração do seu software, volcado de banco de dados, etc) na imagem.

Uma vez que sua máquina esteja rodando como desejado, desligue-a. Reverta o feito nos passos 7.2 e 7.4 e grave a imagem em uma SD

Com certeza seu processo de desenvolvimento e entrega será mais rápido ficando apenas para depurar in situ aquelas coisas que o emulador não consegue entregar como interface com hardware via GPIO por exemplo.

Estou pesquisando algumas coisas. Entre elas, Objetive-C. Me resulta interessante porque me permite – supostamente – usar o mesmo código fonte para compilar para Windows, Linux e Mac entre outros.

Então fiz o seguinte script (testado em buster/sid) que instala o que é necessário e faz os scripts necessários para facilitar a compilação.

#!/bin/bash
# instalador de gnustep e compilador para debian/ubuntu

sudo apt install -y clang gnustep gnustep-devel && \
 cc=`cat ~/.bashrc | grep GNUstep\.sh | wc -l` && \
 (
     if [ $cc -eq 0 ]; then
       echo ". /usr/share/GNUstep/Makefiles/GNUstep.sh" >> ~/.bashrc
     fi
 ) && \
 (
   cc=`cat ~/.bashrc | grep gnuc | wc -l`
   if [ $cc -eq 0 ]; then
     echo "gnuc() {"  >> ~/.bashrc
     echo "  gcc \$1.m \`gnustep-config --objc-flags\` -lgnustep-base -lobjc -o \$1" >> ~/.bashrc
     echo "}" >> ~/.bashrc
   fi
 )

Espero lhe seja útil.

Abç

YeAPF! tem um gestor de abas bem simples de usar que permite construir um SPA (Single Page Application) com muita facilidade.

Tendo várias abas, uma coisa que quase com certeza vai querer fazer é responder dinamicamente a essa mudança atualizando – por exemplo – o conteúdo de algum campo ou coisa assim.

Digamos que no seu HTML tem a seguinte estrutura de abas:

<div class=tnContainer>
  <div class=tnTab id=vw_boas_vindas>
    <img id=imagemBoasVindas>
  </div>
  <div class=tnTab id=vw_cadastro>
    <form ...>
      ...
    </form>
  </div>
  <div class=tnTab id=vw_listagem>
    <table ...>
    </table>
  </div>
</div>

E imaginemos também que cada vez que você envia o usuário a sua tela de boas vindas quer mudar a imagem de uma lista que seu aplicativo tem.

Seu javascript ficaria assim:

/* lista de imagens */
var imagens = ["rio.jpg", "montanha.jpg", "deserto.png", "cascata.jpeg"];
/* indice da imagem atual */
var imagemAtual = 0;

function monitorarMudancaAba() {
  /* verifico se a aba mostrada é a de boas-vindas */
  if (mTabNav.currentTab().id=="vw_boas_vindas") {
    /* calculo o seguinte indice da imagem */
    imagemAtual = (imagemAtual + 1) % imagens.length;
    /* altero a imagem a ser mostrada */
    y$("imagemBoasVindas").src="img/"+imagens[imagemAtual++];
  }
}

function inicializacao() {
  /* adiciono um gestor de eventos do objeto window */
  window.addEventListener('tabshow', monitorarMudancaAba);
}

/* indico ao YeAPF! para chamar a rotina de inicialização assim que estiver tudo pronto */
addOnLoadManager(inicializacao);

Com isso, toda vez que a aba for alterada, há um monitoramento sobre essa mudança e uma alteração da imagem de boas vindas que era o objetivo procurado.

Obvio que sua criatividade vai levar este simples exemplo a níveis maiores.

Quando você está desenvolvendo um aplicativo web, carregar as fontes de uma URL bem conhecida pode deixar seu site mais responsivo já que – geralmente – as fontes mais utilizadas são distribuídas por meio de cdn e via de regra são de uso comum. Então esse tempo de carga é abreviado já que as fontes estão no navegador. E se não estão, vão a passar a estar a partir daquele momento.

Em um dispositivo acontece tudo o contrário. Geralmente você deseja que suas fontes estejam já na pasta para serem usadas offline visto que você segue o princípio de offline-first.

As ferramentas que o YeAPF! disponibilizam ajudam na tarefa de baixar essas fontes.

Por exemplo, digamos que você tem um arquivo chamado ‘aplicativo.css’ e sua primeira linha importa fontes da Google assim:

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic);

Isso é bem bacana em sites mas não em aplicativo como dizíamos no inicio.

A primeira coisa que faremos é baixarmos essa url para um arquivo assim:

$ wget https://fonts.googleapis.com/css\?family=Lato:400,300,300italic,400italic,700,700italic -O lato-orig.css

Após isso teremos um arquivo chamado lato-orig.css com várias chamadas a distintas urls que descarregam as fontes para o cache do navegador. Por exemplo, a primeira fonte fica assim no arquivo css:

@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  src: local('Lato Light Italic'), local('Lato-LightItalic'), url(https://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI9w2_Gwfo.ttf) format('truetype');
}

Transformar esse lato-orig.css em um css offline (por chama-lo de alguma forma) requer que você faça o download de cada fonte, a coloque em uma pasta e mude a referencia no css para carregar da pasta e não do site da Google.

Uma outra opção é usar o ydownload-fonts-from-css que vêm na distro do YeAPF! da seguinte forma:

$ mkdir ../fonts
$ ydownload-fonts-from-css lato-orig.css

Após isso, seu arquivo css fica assim para a primeira fonte:

@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  src: local('Lato Light Italic'), local('Lato-LightItalic'), url(../fonts/S6u_w4BMUTPHjxsI9w2_Gwfo.ttf) format('truetype');

}

Ele faz download sozinho de todas as fontes e já corrige seu css em um único lance.

O passo a passo completo fica assim:

$ cd css
$ wget https://fonts.googleapis.com/css\?family=Lato:400,300,300italic,400italic,700,700italic -O lato-orig.css
$ mkdir ../fonts
$ ydownload-fonts-from-css lato-orig.css