DEV Community: Nathan Ferreira

WakaTime: Uma Forma de Aumentar Sua Produtividade e Gerenciar Seu Tempo

Nathan Ferreira — Wed, 20 Sep 2023 19:22:23 +0000

Introdução:

No mundo do desenvolvimento de software, cada minuto gasto de forma eficiente faz a diferença. Por conta disso, apresento à vocês: WakaTime. Uma extensão que possibilita gerenciar seu tempo gasto em cada projeto, e além de tudo, aumentar sua produtividade.

Tópicos abordados

O que é o WakaTime
Aumentando a Produtividade com o WakaTime
Configurando o WakaTime

O que é o WakaTime

O WakaTime é uma extensão que pode ser integrada facilmente em diferentes ambientes de desenvolvimento. A sua principal função é te auxiliar no gerenciamento de tempo em cada projeto, proporcionando uma dashboard com diversas informações como:

Gráfico de linha demonstrando sua atividade semanal
Comparação com a sua média diária
Gráfico com horas totais de codificação em um dia
Gráfico em pizza mostrando suas linguagens
Gráfico em pizza mostrando seus editores

Vale lembrar que a extensão está disponivéis em diversas IDE's e outros programas.

Aumentando a Produtividade com o WakaTime

Com o WakaTime é possível definir metas para você cumprir durante o tempo que você desejar, essas metas podem variar de acordo com suas necessidades, tendo como opções:

Horas gerais da sua semana
Um projeto
Uma linguagem
Um editor

Com isso você pode gerenciar sua semana, seus estudos e seus projetos de uma forma fácil e prática e claro, gratuitamente.

Configurando o WakaTime

A configuração é a parte mais simples, vamos ao passo a passo:

Vá em https://wakatime.com/login
Crie sua conta
Após a criação você receberá a sua API KEY, que será utilizada na extensão
Abra seu editor de código
Procure a extensão WakaTime
Baixe a extensão e coloque a sua API key
Agora você tudo estará sendo guardado na sua Dashboard em https://wakatime.com/dashboard

Conclusão

Em resumo, o WakaTime é mais do que apenas uma extensão. Ele é uma ferramenta poderosa que pode ajudar você a melhorar sua produtividade, gerenciar seu tempo e suas metas. Comece a usar e veja a diferença!

Voltar ao inicio do artigo ↑

Referências

Site oficial do WakaTime

Muito obrigado por ler até aqui, não esqueça de curtir e compartilhar o artigo! 😁💙

Explorando o Flutter: Um Guia Básico para Iniciantes

Nathan Ferreira — Sun, 10 Sep 2023 21:32:17 +0000

Introdução:

Você está interessado em entrar no mundo de desenvolvimento mobile ou já ouviu falar sobre Flutter e está curioso para entender mais sobre esse poderoso framework? Se sim, você está no lugar certo! Com o passar dos anos o Flutter tem ganhado destaque como uma escolha para desenvolvedores que desejam criar aplicativos para Android e iOS. Neste guia, exploraremos o que é o Flutter até o seu primeiro aplicativo! 📱💙

Tópicos abordados

O que é o Flutter
Principais features do Flutter
Configurando o Ambiente de Desenvolvimento
- Flutter
- Dart
- IDE
- Emulador
- Modo alternativo
Criando seu Primeiro App com Flutter
Benefícios do Flutter
Desafios e Soluções
Referências

O que é o Flutter?

Flutter é um framework de código aberto do Google para a construção de belos aplicativos multiplataforma, compilados nativamente a partir de uma única base de código, de acordo com o site oficial do Flutter. Mas o que ele quer dizer com tudo isso? Simples: o seu código escrito em Flutter pode ser executado em diferentes plataformas, como website, mobile e software. Olha que maneiro! Vale lembrar que o framework usa a linguagem de programação *Dart * como base.

Principais features do Flutter

Uma das principais características do Flutter é a utilização de widgets na construção da aplicação. Widgets são elementos individuais de uma interface de usuário que variam em suas mais diversas formas, desde botões até mesmo layouts complexos com colunas e linhas. A árvore de widgets do Flutter descreve a hierarquia dos widgets em seu aplicativo. Aqui está um pequeno exemplo:



Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          TextButton(
            onPressed: () {},
            child: Text('Sou um Widget'),
          ),
        ],
      ),
    );
  }

No exemplo acima, temos três tipos de widgets: Container, que contém uma coluna, e dentro dessa coluna, um botão.

Além disso o Flutter possui Hot Reload um recurso que te permite ver instantaneamente as mudanças que você realizou no código, seja durante a criação da interface, adição de novas features etc.

Configurando o Ambiente de Desenvolvimento

Vamos agora para a parte de instalação, ela será dividida em 4 partes: Flutter, Dart, IDE (ambiente de desenvolvimento integrado) e emulador.

Flutter

Clique aqui para abrir a documentação oficial do flutter na parte de instalação
Selecione o seu sistema operacional
Baixe o arquivo .zip

Extraia o .zip e coloque a pasta no diretório (C:)
Na barra de pesquisa do Windows digite "Variáveis de Ambiente" e clique, agora no canto inferior direito clique em variáveis de ambiente

Clique em PATH e logo depois em Editar

Clique em Novo e coloque o endereço "C:\flutter\bin" (Se você tiver colocado em outra pasta tenha certeza que o endereço esteja correto ;D)
Logo após isso a sua instalação do Flutter foi concluída, para testar abra o seu CMD e digite "flutter doctor".

Dart

Para instalação do Dart vamos utilizar o Chocolatey, um gerenciador de pacotes
Procure na barra de pesquisa : Windows Powershell, e abra em modo administrador
E coloque o seguinte comando



Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

Após a instalação execute o comando choco

Agora para instalar o Dart digite choco install dart-sdk
Após a instalação digite dart --version para ver se a instalação deu certo

IDE

Como IDE vamos utilizar o Visual Studio Code

Vá ao site e baixe a versão de acordo com seu sistema operacional
Logo após a instalação vamos instalar a extensão do Flutter e do Dart

Agora seu Visual Studio Code está pronto para uso

Emulador

Agora vamos configurar onde você verá sua aplicação rodando

Vá até o site do Android Studio e baixe a IDE
Siga as etapas de instalação
Agora vá em More actions > Virtual Device Manager
É comum ja vir configurado um emulador, mas você pode configurar da maneira que você quiser

Modo alternativo

Os emuladores costumam ser bem pesados, então, existe um método alternativo para visualizar sua aplicação utilizando seu próprio celular

Ative o modo desenvolvedor em seu celular
Entre nas configurações de desenvolvedor > Ative a opção de Depuração USB > Ative a Intalação por USB
Conecte seu celular no computador e pronto!

Criando seu Primeiro App com Flutter

Vamos colocar a mão na massa! Criar seu primeiro aplicativo Flutter é emocionante e surpreendentemente simples.

Abra seu Terminal/CMD
Vá até a pasta de sua preferência e digite flutter create nome_do_app

Agora digite cd nome_do_app e logo após isso code .para abrir no Visual Studio Code
Nosso arquivo da aplicação fica localizada na pasta: lib > main.dart
Selecione o dispositivo onde será instalado a aplicação, é possível realizar isso no canto inferior direito. É nesta estapa onde você pode optar por utilizar seu próprio celular.

Agora vamos compilar nosso aplicativo e visualizar ele, vá no topo da janela e clique em Run > Run without debugging

E agora pronto, você tem sua primeira aplicação feita e está pronto para entrar nessa jornada de aprendizado!

Benefícios do Flutter

Uma das maiores vantagens do Flutter é a capacidade de criar aplicativos de alta qualidade para Android e iOS com um único código-base. Isso economiza tempo e recursos no desenvolvimento de aplicativos para múltiplas plataformas.

Desafios e Soluções

É claro que nenhum framework está isento de desafios. Você pode encontrar obstáculos ao longo do caminho, como a curva de aprendizado da linguagem Dart ou a necessidade de se adaptar ao modelo de widgets do Flutter. Felizmente, há uma comunidade ativa de desenvolvedores e muitos recursos disponíveis para ajudá-lo a superar esses desafios.

Com base na minha experiência eu recomendaria aprender o básico de Dart antes de entrar de cabeça no Flutter, apenas para você se familiarizar mais com a linguagem e framework.

Voltar ao inicio do artigo ↑

Referências

Flutter
Dart
Chocolatey

Muito obrigado por ler até aqui, não esqueça de curtir e compartilhar o artigo! 😁💙

Gerenciamento de Estado no Flutter, aprenda de uma vez!

Nathan Ferreira — Wed, 06 Sep 2023 21:23:30 +0000

No desenvolvimento de aplicativos móveis com o Flutter, uma das decisões mais importantes que os desenvolvedores enfrentam é como gerenciar o estado da aplicação. O estado é fundamental para manter informações, responder a interações do usuário e atualizar a interface do usuário. No Flutter, existem dois principais paradigmas de gerenciamento de estado: Stateless e Stateful.

Stateless Widgets

Os Stateless Widgets são componentes no Flutter que não possuem estado interno mutável. Isso significa que, uma vez que você os construiu com um conjunto específico de propriedades, eles permanecem imutáveis durante o ciclo de vida do widget. Os Stateless Widgets são ideais para partes da interface do usuário que não precisam mudar com o tempo ou não dependem do estado.

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  final String title;

  MyApp(this.title);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: Text("Olá, mundo!"),
        ),
      );
  }
}

Neste exemplo, o widget MyApp é stateless porque ele não mantém nenhum estado interno. Ele simplesmente constrói uma interface do usuário com base nas propriedades fornecidas (no caso, o title) e não muda ao longo do tempo.

Stateful Widgets

Os Stateful Widgets são usados quando você precisa que parte da interface do usuário seja atualizada de acordo com as mudanças no estado do aplicativo. Eles possuem um estado interno mutável que pode ser modificado ao longo do tempo. Quando o estado muda, o Flutter recria o widget para refletir essas alterações.


import 'package:flutter/material.dart';

class CounterApp extends StatefulWidget {
  @override
  State<CounterApp> createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Exemplo Stateful'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'Contador:',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.titleLarge,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Incrementar',
          child: const Icon(Icons.add),
        ),
    );
  }
}

void main() {
  runApp(CounterApp());
}

Neste exemplo, o widget CounterApp é stateful porque mantém o estado interno _counter que pode ser modificado pelo método _incrementCounter. O método setState é usado para notificar o Flutter de que o estado foi alterado, e a interface do usuário é reconstruída de acordo.

Muito obrigador por ler 😁, espero ter ajudado!