Forem: Mesaque Francisco

Android SDK command line tools only

Mesaque Francisco — Sat, 13 May 2023 21:18:43 +0000

You can easily find jokes related to Android Studio, the amount of RAM it consumes, and computer overheating. I've always been someone who tries to keep the minimum of installed programs or running on my daily basis. During React Native app development, especially in projects that don't use Expo, it's common to have to install a full package with IDE to open the local emulator.

The truth is, you don't always need Android Studio, just some command-line tools that come with it.

A few years ago, when I discovered this, I looked for a guide on how to configure the environment in this way, but I found scattered information or missing information. It was difficult, but I managed to make it work. Seeing the complexity of the steps and predicting that the next time I needed to do something similar, my future self would probably not remember the steps, I created a guide to help me with these configuration steps.

Time passed, the SDK was updated, some tools and syntaxes changed, and my guide became outdated.

To solve this, I rewrote the guide, created a public project on GitHub, and made it available there.

A PDF version of this guide is available in both English and Brazilian Portuguese on the GitHub repository.

Android SDK install guide

This guide was created to assist in setting up the development environment for Android mobile applications. My current environment is based on GNU/Linux, but I believe the steps described here can be adapted to your reality on other operating systems.

If you have any questions or suggestions, feel free to contact me through my GitHub (@mesaquen).

Command line tools

Go to android sdk download page
Look for "Command line tools only"
Download the commandline tools for your operating system

Extracting and setting up the environment variables

Create a directory named .android_sdk and extract the command line tools you downloaded earlier:

mkdir .android_sdk
unzip commandlinetools-linux-9477386_latest.zip -d ~/.android_sdk/

Export the following environment variables in your .bashrc file:

export ANDROID_SDK_ROOT="$HOME/.android_sdk"
export PATH="$ANDROID_SDK_ROOT/cmdline-tools/latest/bin:$PATH"
export PATH="$ANDROID_SDK_ROOT/emulator:$PATH"

Install the latest cmdline-tools

$ANDROID_SDK_ROOT/cmdline-tools/bin/sdkmanager \
--sdk_root=$ANDROID_SDK_ROOT "cmdline-tools;latest"

Once you've installed the command line tools, the sdkmanager should be able to recognize the SDK location, and you won't need to provide the sdk_root flag anymore.

Install the platforms, build-tools and extras

sdkmanager "platforms;android-33" "build-tools;33.0.2"
sdkmanager "extras;google;m2repository" "extras;android;m2repository"
sdkmanager "platform-tools" "tools"
sdkmanager --licenses

Installed packages

To see a list of the installed packages, run:

sdkmanager --list_installed

AVD: Android Virtual Device

Before creating an AVD, you'll need to download the system images. To see a list of available images, run:

sdkmanager --list | grep system-images

Install the chosen system image

sdkmanager "system-images;android-33;google_apis_playstore;x86_64"

Creating the AVD

Create an AVD using the following command:

avdmanager create avd -n device \
--device pixel -k "system-images;android-33;google_apis_playstore;x86_64"

To get a list of available virtual devices, run:

avdmanager list avd

Emulator

You can start the emulator by passing the name of the AVD with the
command:

emulator @device

Here "device" is the name of the AVD.

Gerenciando múltiplas contas do git [pt-BR]

Mesaque Francisco — Sat, 23 Oct 2021 01:12:14 +0000

Em algum momento você já deve ter se deparado com a necessidade de utilizar mais de um email na configuração do git. Seja por estar fazendo commits em projetos que utilizam um emails diferentes ou por que na mesma máquina você tem projetos feitos para empresas diferentes.

A troca do email normalmente pode ser feita pelo comando

git config user.email your@email.here

Mas, ficar alterando essa configuração manualmente toda vez que precisar fazer um commit em um projeto diferente não é muito produtivo, não é mesmo?

E se eu te disser que é possível realizar uma configuração específica do git para cada diretório?

A solução

Vamos supor que você organize seus projetos em uma estrutura de diretórios dessa forma:

Development/
├── CompanyA
│   ├── project-a-1
│   └── project-a-2
├── CompanyB
│   ├── project-b-1
│   └── project-b-2
├── my-project-1
└── my-project-n

Para configurar uma conta diferente para seus projetos pessoais, projetos sob o diretório CompanyA e projetos sob o diretório CompanyB, podemos fazer uso da Inclusão condicional de configurações no seu arquivo .gitconfig

A forma de como vamos trabalhar é deixando no arquivo .gitconfig todas as configurações compartilhadas e criar arquivos com configurações específicas para cada diretório.

.gitconfig

Seu arquivo .gitconfig se parecerá com assim:

[user]
    name = Mesaque Francisco
    email = my@personal.email
    signinKey = ......

...

[includeIf "gitdir:~/Development/CompanyA/"]
    path = .gitconfig-company-a

[includeIf "gitdir:~/Development/CompanyB/"]
    path = .gitconfig-company-b

.gitconfig-company-a

Seu arquivo .gitconfig-company-a se parecerá com assim:

[user]
    email = ...@companya.com
    signinKey = <diffrent key>

.gitconfig-company-b

Seu arquivo .gitconfig-company-b se parecerá com assim:

[user]
    email = ...@companyb.com
    signinKey = <diffrent key>

Note que aqui eu utilizei o parâmetro signinKey como exemplo de mais coisas que podem ser alteradas nesses arquivos, mas poderiam ser, por exemplo, aliases exclusivos para projetos da ComapanyB, uma ferramenta de diff.

Estrutura final de arquivos

Imaginando que você esteja em um sistema unix-like, e esteja na sua home, ao listar seus arquivos teríamos essa visão:

.
├── Development
│   ├── CompanyA
│   │   ├── project-a
│   │   └── project-b
│   ├── CompanyB
│   │   ├── project-a
│   │   └── project-b
│   ├── my-project-1
│   └── my-project-n
├── .gitconfig
├── .gitconfig-company-a
└── .gitconfig-company-b

Para verificar se tudo funcionou corretamente, basta rodar dentro dos diretórios dos projetos o comando

git config user.email

Esse comando retornará o email atual utilizado para os commits.

Dica rápida: Maneiras de apresentar seu código

Mesaque Francisco — Tue, 19 Jan 2021 22:38:07 +0000

Utilizando redes sociais, você já deve ter se deparado com algumas imagens contendo código fonte, que parecem familiares, possuem formatação de sintáxe mas, não são screenshots de nenhum editor de código que você conheça.

Existem algumas ferramentas que permitem você gerar essas imagens de maneira simples e rápida.

Agora você já sabe. É só escolher uma das ferramentas e sair compartilhando seu código de uma maneira mais chamativa.

Programação no estilo funcional em Javascript, Promises e dores de cabeça [pt-BR]

Mesaque Francisco — Fri, 31 Jan 2020 20:56:03 +0000

Quem desenvolve em javascript já deve ter se deparado com algumas funções de operações sobre objetos iteráveis (forEach, map, reduce):

const list = ['apple', 'banana', 'watermelon'];

// forEach
list.forEach(item => {
  console.log('Item:', item);
});

// map
const changedList = list.map(item => item + 1);

// reduce
const itemSum = list.reduce((accumulated, item) => {
  return accumulated + item;
}, 0);

Esses métodos estão disponíveis há algum tempo e são uma forma funcional de realizar operações sobre esse tipo de objetos.

Um dos conceitos na programação funcional é que você escreve seu código de maneira descritiva, se preocupando em dizer o que acontece, não como acontece.

Comparar o .forEach com um for (;;) ("for raiz") ou um for-of é um bom exemplo pois no forEach você não se preocupa em controlar os passos da iteração sobre o objeto, seu foco é direcionada para o que deve acontecer para cada item durante a iteLração. Já em um "for raiz", além de se preocupar com o que deve acontecer com o item em questão, você precisa se preocupar com como os itens são recuperados, como conseguir o próximo item e quantas vezes o laço será executado.

Desde o ES6 temos a possibilidade de trabalhar com código assíncrono no javascript sem ter que passar aquele zilhão de callbacks (a.k.a. callback hell). As maravilhas tecnológicas por trás disso são as Promises.

Com a chegada do ES8 para facilitar a vida dos desenvolvedores, que são criaturas insatisfeitas por natureza, foi disponiblilizada a especificação de funções async/await - mais conteúdo aqui.

Em algum momento você pode se deparar com uma situação em que tenha uma lista e precisa realizar alguma operação assíncrona com os itens dessa lista, na ordem em que eles aparecem na lista. Provavelmente você pode brotar com uma solução parecida com essa:

const fruits = ['apple', 'lemon', 'orange'];

fruits.forEach(async fruit => {
  const result = await doNetworkCall(fruit);
  doSomethingElseSynchronously(fruit, result);
});

Conhecendo o funcionamento do async/await é esperado que o código acima funcione, porém, ele não terá o comportamento esperado:

Isso acontece porque tanto o forEach quanto seus companheiros map e reduce por serem mais antigos que a especificação de Promise e async/await simplesmente não são compatíveis com essas features.

Para exemplificar melhor, uma versão muito simplificada do forEach seria:

Array.prototype.forEach = function(callback) {
  for (let i = 0; i < this.length; i++) {
    callback(this[i], i, this);
  }
};

Como você pode notar, callback não está sendo aguardado (await) dentro do forEach, logo, a cadeia de Promises é quebrada, resultando no comportamento inesperado.

Solução

A solução é não usar esses métodos quando trabalhar com operações assíncronas. Usar o bom e velho "for raiz" ou um for-of garantirá que o resultado será o esperado.

const doAsyncProcess = fruits => {
    for (const fruit of fruits) {
        const result = await doNetworkCall(fruit);
        doSomethingElseSynchronously(fruit, result);
    }
};

Ressalvas

O textão acima exemplifica casos onde você precisa garantir que as operações sejam realizadas na ordem em que aparecem no objeto iterável. Caso seja possível fazer as operações em paralelo, você pode usar do combo await Promise.all + Array.map para realizar as operações:

const doAsyncProcess = async fruits => {
    await Promise.all(fruits.map(async (fruit) => {
        const result = await doNetworkCall(fruit);
        doSomethingElseSynchronously(fruit, result);
    }));

    doMoreSynchronousStuff();
};

⚠️ Nota

Nesse exemplo, Promise.all está sendo utilizado apenas para aguardar a resolução de todas as promises que são implicitamente criadas com o método .map antes de continuar com execução da função doMoreSynchronousStuff. Sabemos que .map cria promises pois a função que é aplicada durante a iteração está marcada como async, logo seu retorno sempre é uma Promise.

Caso o restante do código dependesse dos valores resolvidos das promises, alguns ajustes seriam necessários no código, na função aplicada durante o map e nos valores aguardados de Promise.all.

Bônus

Código de exemplos está disponível no codepen.

[pt-BR] ES2020: Nullish coalescing operator (??)

Mesaque Francisco — Tue, 28 Jan 2020 00:39:31 +0000

O operador de coalescência nula (??) é um operador lógico que retorna o operando do lado direito caso o valor do operando do lado esquerdo seja null ou undefined. Caso contrário, retorna o operando do lando esquerdo.

Diferente do operador lógico OR (||), o operando do lado esquerdo é retornado caso seja um valor falsy que não seja null ou undefined.

Atribuindo valor padrão à uma variável

Antes, quando você queria atribuir um valor padrão à uma variável, era comum se deparar com algum código como esse:

let foo = 0;

...

const defaultNumber = 42;
console.log(output || defaultNumber); // expected output: 42

O problema com essa abordagem é que caso você considere zero (0) ou uma string vazia ('') como válidos, você terminaria com um comportamento indesejado aqui.

Utilizando o operador de coalescência nula, a história muda.

let foo = 0;
let bar;

...
const defaultNumber = 42;

console.log(foo ?? defaultNumber); // expected output: 0
console.log(bar ?? defaultNumber); // expected output: 42

Encadeando com os operadores OR (`||`) e AND (`&&`)

O operador ?? não pode ser encadeado diretamente com os operadores || e &&. Caso isso aconteça, você vai terminar com um SyntaxError sendo lançado:

null || undefined ?? 'default'; // lança um SyntaxError

Para corrigir isso você deve envolver a expressão em parênteses para explicitamente indicar a precedência:

(null || undefined) ?? 'default'; // 'default'

Relação com o operador de encadeamento opcional (`?.`)

O operador ?? trata os especificamente os valores null e undefined, assim como o operador de encadeamento opcional (?.), que é usado para acessar propriedades de um objeto que podem ser null ou undefined.

[pt-BR] ES2020: Optional chaining operator

Mesaque Francisco — Tue, 28 Jan 2020 00:34:49 +0000

Muitas novidades são esperadas com a chegada do ES2020. Uma delas que veio para simplificar a vida e diminuir a quantidade de código que temos que escrever é o operador de encadeamento opcional ?. - Optional chaining em inglês.

O funcionamento dele é similar ao do operador de encadeamento ., exceto que ao invés de causar um erro ao tentar acessar uma propriedade de uma referência vazia (null ou undefined), a expressão irá retornar undefined.

Isso pode ser muito util ao explorar conteúdo de um objeto onde não se tem garantia de que as propriedades são obrigatórias.

Exemplo

const player = {
  name: 'John',
  weapon: {
    name: 'sword',
  },
};

// Correto, porém verboso
let clothingName;
if (player != null && player.clothing != null) {
  clothingName = player.clothing.name;
}
console.log(cloathingName);

// Usando optional chaining
const clothingName = player.clothing?.name;
console.log(cloathingName); // expected output: undefined

// Correto, porém verboso
let value;
if (player != null && typeof player.someNonExistentMethod === 'function') {
  value = player.someNonExistentMethod();
}
console.log(value);

// Usando optional chaining
console.log(player.someNonExistentMethod?.()); // expected output: undefined

Sintaxe

object?.prop;
object?.[expression];
arr?.[index];
func?.(args);

O novo operador de encadeamento opcional ajuda reduzir a quantidade de código escrita, simplificando a leitura e manutenção.

Junto com o optional chaining operator receberemos o Nullish coalescing operator, mas isso é assunto para um post futuro.

[pt-BR] ES2020: Promise.allSettled

Mesaque Francisco — Mon, 27 Jan 2020 18:47:44 +0000

Uma nova adição que chega com o ES2020 é Promise.allSettled. Esse novo método chega para resolver um problema que deixava o código muito verboso na utilização de Promise.all.

Relembrando: Promises

Promise é um objeto usado para processamento assíncrono. Uma Promise representa um valor que pode estar disponível agora, no futuro ou nunca.

UmaPromise pode se encontrar em algum dos estados:

pending (pendente): Estado inicial, que não foi realizada nem rejeitada.
fulfilled (realizada): Sucesso na operação.
rejected (rejeitada): Falha na operação.
settled (estabelecida): Que foi realizada ou rejeitada.

Uma promessa pendente pode ter seu estado alterado para realizada com um valor ou ser rejeitada com um motivo (erro).

Relembrando: Promise.all

Promise.all é um método que recebe um objeto iterável contendo promises. Promise.all apenas retorna uma promise fulfilled caso todas as promises que foram passadas no objeto sejam também fulfilled caso contrário irá retornar uma promise com estado rejected.

Promise.allSettled

Promise.allSettled funciona de forma similar a Promise.all com a diferença que a promise resultante nunca é rejeitada caso uma das promises do objeto iterado seja rejeitada. Ao invés disso retorna um array com um objeto para cada promise contendo as propriedades:

status: fulfilled | rejected
value: valor da promise resolvida
reason: motivo da promise rejeitada

O novo método Promise.allSettled é bem útil quando você precisa executar uma operação que deve ser considerada completa independente de suas etapas falharem ou não. Como por exemplo, quando você quer fazer download de multiplos arquivos e ao final executar alguma outra ação.

Usando Promise.all você teria que adicionar um .catch para cada promise que será executada. Para evitar que o retorno de Promise.all seja uma promise rejeitada.

const download = async (url) => {/*...*/};
const handleFailedDownload = async url => {/*...*/};

const downloadAllFiles = async () => {
  const urls = [
    "http://example.com/exists.txt",
    "http://example.com/missing-file.txt"
  ];

  await Promise.all(urls.map(url => download(url).catch(handleFailedDownload)));
  doSomethingElse();
};

Usando Promise.allSettled você não precisa mais se preocupar com promises sendo rejeitadas em um loop. Porém ter

const download = async (url) => {/*...*/};

const downloadAllFiles = async () => {
  const urls = [
    'http://example.com/exists.txt',
    'http://example.com/missing-file.txt'
  ];

  await Promise.allSettled(urls.map(url => download(url));
  doSomethingElse();
};

Atenção com os valores retornados

Diferente de Promise.all onde em caso de sucesso, os valores são retornados diretamente no array de resultados. Em Promise.allSettled o array de resultados retorna contém um SettlementObject para cada promise passada no iterável inicial.

Abaixo você encontra uma representação da assinatura dos retornos de Promise.allSettled.

type SettlementObject<T> = FulFillmentObject<T> | RejectionObject<T>;

interface SettlementObject<T> {
  status: "fulfilled";
  value: T;
}

interface RejectionObject {
  status: "rejected";
  reason: unknown;
}

Exemplo de Promise.allSettled

const results = Promise.allSettled([
  Promise.resolve("OK"),
  Promise.reject("ERROR"),
  Promise.resolve("OK TOO")
]);

console.log(results);

/**
Expected output:
[
  { status: 'fulfilled', value: 'OK' },
  { status: 'rejected', reason: 'ERROR' },
  { status: 'fulfilled', value: 'OK TOO'},
]
*/