DEV Community: Altencir Junior

Transformando AppImage "em um app instalado"

Altencir Junior — Wed, 04 Dec 2024 23:33:44 +0000

Depois de tanto tempo sem postar nehum artigo aqui no Dev.to, finalmente consegui retornar para compartilhar.

Para fazer uma aplicação .AppImage aparecer como uma aplicação instalada no Linux(Testado no Ubuntu, distros próximas devem funcionar), você deve seguir os seguintes passos:

Mover o arquivo .AppImage para um local escolhido:

Para facilitar o gerenciamento, mova o arquivo .AppImage, (irei utilizar a nova IDE integrada com Inteligência Artificial: CURSOR.) para uma pasta, como ~/Applications (ou outra de sua preferência) você deve utilizar o comando:

~ mkdir -p ~/Applications
~ mv ~/Downloads/cursor-0.43.5x86_64.AppImage ~/Applications/

Tornar o arquivo executável

Utilize o comando:

`chmod +x ~/Applications/cursor-0.43.5x86_64.AppImage`

Criar um arquivo .desktop

Crie um arquivo .desktop para que a aplicação apareça no menu. Use uma IDE ou editor de texto, para criar o arquivo (por exemplo, cursor.desktop) em ~/.local/share/applications/:

`nano ~/.local/share/applications/cursor.desktop`

Configure:

`
Name=Cursor
Exec=/home/seuUsuario/Applications/cursor-0.43.5x86_64.AppImage
Icon=/home/seuUsuario/Applications/icon.png # Substitua pelo caminho de um ícone, se disponível.
Type=Application
Categories=Development;IDE;
Terminal=false
`

Atualize o .desktop:

`update-desktop-database ~/.local/share/applications/`

Assim que pesquisar o nome do seu aplicativo, ele irá aparecer na central de aplicações de sua máquina.

Espero que tenha gostado, até a próxima

Passando parâmetros por rotas em React Native

Altencir Junior — Wed, 24 May 2023 20:23:46 +0000

Criando uma nova aplicação, tive a necessidade de passar um determinado parâmetro que estava em um input, de modo que em uma tela seguinte o título seria o que foi digitado nele. Utilizei um método aprendido recentemente que pode auxiliar os que desejam saber como fazer isso, neste artigo explicarei como executei a resolução.

O Problema -

Como explicado antes, eu quero passar um parâmetro dinâmico escrito em um input e substituir por um título em outra página. Mas como fazer isso? Meu código estava do seguinte modo:


(...)

export function NewGroup(){

    const navigation = useNavigation();

    function handleNew(){
        navigation.navigate('players',{"teste"});
    }


    return(
        <Container>
            <Header showBackButton/>

            <ContentTwo>
                <Icon/>

                <Highlight
                    title="Nova Turma"
                    subtitle="Crie turmas e adicione pessoas"
                />

                <Input
                    placeholder="Nome da turma..."
                    placeholderTextColor= "#7C7C8A"
                />  
            </ContentTwo>

            <Button
                title="Criar"
                onPress={handleNew}
            />  
        </Container>
    );
}

Neste código, temos a base de um componente que tem um input e button. Neste botão,temos uma função chamada handleNew que quando clicada executa a navegação para outra tela com nome player.

A Solução -

Para que no clique do botão eu não só passe para a próxima página, como também buscar o valor descrito dentro do input, é necessário fazer uma manipulação de estado. Com isso, utilizo o hookuseState e crio uma constante que irá pegar o parâmetro escrito. O código ficará do seguinte modo:

export function NewGroup(){

    const [group, setGroup] = useState('');

    const navigation = useNavigation();

    function handleNew(){
        navigation.navigate('players',{ group });
    }


    return(
        <Container>
            <Header showBackButton/>

            <ContentTwo>
                <Icon/>

                <Highlight
                    title="Nova Turma"
                    subtitle="Crie turmas e adicione pessoas"
                />

                <Input
                    placeholder="Nome da turma..."
                    placeholderTextColor= "#7C7C8A"
                    onChangeText={setGroup}
                />  
            </ContentTwo>

            <Button
                title="Criar"
                onPress={handleNew}
            />  
        </Container>
    );
}

Neste código, criamos uma const que guardará groupe setGroup. Ao adicionar no input o setGroup receberá tudo que foi escrito no group. E adicionamos na navegação da página o groupque irá ser carregado para a tela seguinte.

Recebendo o parâmetro de outra tela -

Para receber o que foi escrito no input da tela anterior, fazemos o seguinte:

type RouteParams = {
    group: string;
}



export function Players (){

    const [team, setTeam] = useState('Time A');
    const [players, setPlayers] = useState([]);

    const route = useRoute();
    const { group } = route.params as RouteParams;

return(
        <Container>
            <Header showBackButton/>

            <ContentOne>
                <Highlight 
                title={group}
                subtitle="Adicione e separe os times"
                /> 
            </ContentOne>

Importamos o useRoute que é um hook que acessa propriedades de outras telas, e nela criamos um hook com nome route que irá receber esse hook. Após isso, nós desestruturamos dentro de uma const o parâmetro da tela anterior, e nele será recebido: route.params as RouteParams; esse caminho se deve a tipagem necessária para que o typescript pudesse reconhecer que parâmetros ele recebe, que é uma string. Logo após isso, escolhemos onde será trazido o parâmetro que escolhi ser o título da página.

Vejamos o resultado:

Ao passar o parâmetro digitado, o título da tela seguinte irá mudar do seguinte modo:

Esse foi o método que utilizei para resolver esse problema, espero que esse artigo tenha o ajudado. Obrigado por ler até aqui!!!

Resolvendo problemas no hackerRank: Contando CamelCases

Altencir Junior — Tue, 09 May 2023 00:35:16 +0000

Olá, seja bem vindo a mais um Resolvendo problemas no HackerRank: No caso de hoje, iremos percorrer todos os valores de uma função declarada e analisar se estes tem camelCase, caso sim, iremos contá-los. Vejamos mais informações com a explicação e sua resolução.

CamelCase -

Há uma sequência de palavras no CamelCase como uma sequência de letras,s, tendo as seguintes propriedades:

É uma concatenação de uma ou mais palavras que consistem em letras inglesas.
Todas as letras da primeira palavra são minúsculas .
Para cada uma das palavras subsequentes, a primeira letra é maiúscula e as demais letras são minúsculas.

Vamos determinar o número de valores de s.

Vejamos um exemplo:

s = oneTwoTree, tem 3 palavras em inglês logo nosso contador irá percorrer s e retornar 3 como a quantidade exata de CamelCases. Agora vejamos como resolver isso em Javascript em nosso algoritmo.

function camelcase(s) {
    // Write your code here
  let count = 1;

  for ( let letters of s){
    if(letters == letters.toUpperCase()){
      count++
    }
  }
  return count
}

Neste código, nós declaramos um contador count,com início 1. E criamos um laço de repetição forque irá percorrer o parâmetro da função camelcas. Onde declaramos uma variável letters que recebe s, se essa variável for igual a UpperCase, ou seja se dentro desse parâmetro tiver alguma letra em camelCase, iremos adicionar +1. Depois retornaremos a variável count.

O resultado será:

saveChangesInTheEditor

input: 5

Assim, concluímos mais um Resolvendo problemas no HackerRank: até a próxima.

Utilizando Phosphor Icons em React Native

Altencir Junior — Thu, 04 May 2023 20:37:38 +0000

Os Phosphor Icons são uma coleção de ícones desenvolvida pelo designer Steven Roberts. Esses ícones são minimalistas, nítidos e com estilo moderno, adequados para uma ampla variedade de aplicativos. A biblioteca Phosphor Icons oferece mais de 800 ícones distintos, abrangendo várias categorias, como ações, mídia, dispositivos, emojis, entre outras. Neste artigo, vamos explorar como integrar e utilizar os Phosphor Icons em um aplicativo React Native.

Instalação dos Phosphor Icons em um projeto React Native -

Para começar a usar os Phosphor Icons em um projeto React Native. Execute o seguinte comando para instalar a biblioteca react-native-phosphor-icons usando o npm ou o yarn:

npm install react-native-phosphor-icons
yarn add react-native-phosphor-icons

Após a instalação, execute o seguinte comando para linkar a biblioteca ao seu projeto React Native:

npx react-native link react-native-phosphor-icons

Aguarde até que o processo de linkagem seja concluído. Isso fará com que os arquivos de ícones sejam corretamente vinculados ao seu projeto.

Phosphor Icons em um componente React Native -

Após a instalação e linkagem dos Phosphor Icons, você pode começar a usá-los em qualquer componente React Native. Siga as etapas abaixo para exibir um ícone em um componente:

Importe o ícone específico que deseja usar em seu componente React Native. Por exemplo, se você deseja exibir um ícone de uma estrela, você pode fazer o seguinte:

import { PhosphorIcons } from 'react-native-phosphor-icons';

No seu componente, você pode usar o ícone como um componente de imagem ou um componente de texto, por exemplo:

import React from 'react';
import { View, Text, Image } from 'react-native';
import { PhosphorIcons } from 'react-native-phosphor-icons';

const MyComponent = () => {
  return (
    <View>
      <Text>Este é um ícone usando um componente de imagem:</Text>
      <Image source={PhosphorIcons.Star} />

      <Text>Este é um ícone usando um componente de texto:</Text>
      <Text>
        <PhosphorIcons.Star size={24} color="blue" />
      </Text>
    </View>
  );
};

export default MyComponent;

No código acima, adicionamos uma função de handleIconPress que será chamada quando o usuário pressionar o ícone. Nesse exemplo, apenas exibimos uma mensagem no console quando o ícone é pressionado, mas você pode adicionar a lógica desejada para lidar com a interação do usuário.

Também adicionamos uma linha de ícones adicionais exibidos em uma linha usando um componente View com flexDirection: 'row'. Esses ícones demonstram como você pode adicionar vários ícones e ajustar o tamanho e a cor de cada um deles.

Essas são apenas algumas das funcionalidades e possibilidades que os Phosphor Icons oferecem. Você pode explorar a biblioteca para encontrar mais ícones e personalizar ainda mais os estilos deles.

Os Phosphor Icons são uma excelente opção para adicionar ícones atraentes e modernos em seus aplicativos React Native. Com a biblioteca react-native-phosphor-icons, você pode integrar facilmente esses ícones em seu projeto e personalizá-los de acordo com suas necessidades. Agora você pode criar interfaces de usuário atraentes e intuitivas com uma ampla seleção de ícones Phosphor disponíveis.

Resolvendo problemas no hackerRank: Redução de Strings

Altencir Junior — Thu, 04 May 2023 12:58:47 +0000

Olá, seja bem vindo a mais um Resolvendo problemas no HackerRank: No caso de hoje, reduzir os valores que se encontram dentro de um parâmetro. Vejamos mais informações com a explicação e sua resolução.

Super Reduced String -

Reduza uma sequência de caracteres minúsculos no intervalo ascii[‘a’..’z’]executando uma série de operações. Em cada operação, selecione um par de letras adjacentes que correspondam e exclua-as.

Exclua o máximo de caracteres possível usando este método e retorne a string resultante. Se a string final estiver vazia, retorne Empty String. Vejamos um exemplo:

aaabccdddd
abd

A execução do código a seguir nos mostra:

function superReducedString(s) {
    // Write your code here
  let arr = s.split("");

    for (let i = 0; i < arr.length; i++) {

        if (arr.length === 0) return ('Empty String')
        if (arr[i] === arr[i + 1]) {
            arr.splice(i, 2)
            i = i - 2
        }
    }
    return arr.join('')
}

A linha let arr = s.split(""); converte a string s em um array de caracteres, onde cada caractere da string se torna um elemento do array. Isso é feito usando o método split(""), que divide a string em cada caractere vazio.

Em seguida, um loop for é usado para iterar sobre o array de caracteres. A variável de controle i representa o índice atual no array.

Dentro do loop, há uma verificação condicional if (arr.length === 0) return ('Empty String'). Se o tamanho do array se tornar zero, isso significa que todos os caracteres idênticos foram removidos e a string resultante é vazia. Nesse caso, a função retorna a string 'Empty String' para indicar que a string original foi completamente reduzida.

A próxima verificação condicional if (arr[i] === arr[i + 1]) verifica se o caractere atual é igual ao próximo caractere no array. Se eles forem idênticos, isso significa que encontramos uma sequência de caracteres repetidos.

Dentro do bloco if, a linha arr.splice(i, 2) remove os caracteres repetidos do array. O método splice modifica o array original, removendo dois elementos a partir da posição i, ou seja, o caractere atual e o próximo caractere.

Após a remoção dos caracteres repetidos, a linha i = i - 2 é executada para atualizar o valor da variável de controle i. Isso é necessário para garantir que o próximo loop do for verifique novamente o caractere atual e seu novo próximo caractere, já que os índices do array foram modificados pela remoção.

O loop continua até que todos os caracteres repetidos tenham sido removidos do array.

Finalmente, fora do loop, a função retorna a string resultante usando o método join(''). Isso une todos os elementos do array em uma única string sem espaços entre eles.

O resultado será:

aaabccddd
Expected Output
abd

Assim, concluímos mais um Resolvendo problemas no HackerRank: até a próxima.

Iconify em React Native

Altencir Junior — Wed, 03 May 2023 14:50:41 +0000

O Iconify é uma biblioteca popular de ícones para a web e aplicativos móveis, incluindo o React Native. Ele fornece um conjunto abrangente de ícones que podem ser facilmente integrados em seus projetos. Neste artigo iremos fazer sua instalação e aprender um pouco sobre seu uso:

Instalando o Iconify -

Certifique-se de ter o Node.js e o npm (gerenciador de pacotes do Node.js) instalados em seu sistema. Em seguida, abra o terminal e execute o seguinte comando para instalar a biblioteca Iconify:

npm install @iconify/react-native

Utilizando o Iconify -

Depois de instalar a biblioteca, você pode importar os componentes necessários no seu arquivo de componente React Native. Geralmente, você importará o componente Icon, que é usado para exibir um ícone específico. Você também pode importar ícones específicos do pacote de ícones que deseja usar. Aqui está um exemplo de importação:

import Icon from '@iconify/react-native';
import homeIcon from '@iconify-icons/mdi/home';

Agora você pode usar o componente Icon para exibir um ícone em seu aplicativo. O componente Icon requer duas propriedades principais: icon e size. A propriedade icon define qual ícone será exibido e a propriedade size define o tamanho do ícone. Aqui está um exemplo de uso:

<Icon icon={homeIcon} size={24} />

Neste exemplo, estamos exibindo o ícone "home" com tamanho 24. Você também pode usar outras propriedades para personalizar a aparência do ícone, como color para definir a cor do ícone e style para adicionar estilos CSS adicionais ao ícone.

<Icon icon={homeIcon} size={24} color="#ff0000" style={{ marginLeft: 10 }} />

Este é um exemplo básico de como utilizar o Iconify em um projeto React Native. Lembre-se de que você pode explorar a documentação oficial do Iconify para obter mais informações sobre os recursos e opções disponíveis.(https://github.com/oktaysenkan/react-native-iconify/blob/main/CONTRIBUTING.md).

Obrigado por ler até aqui.

Resolvendo problemas no HackerRank: Joaninhas Felizes

Altencir Junior — Wed, 03 May 2023 13:12:47 +0000

Olá, seja bem vindo a mais um Resolvendo problemas no HackerRank: No caso de hoje, iremos jogar um jogo de tabuleiro de joaninhas . Vejamos mais informações com a explicação e sua resolução.

Happy Ladybugs -

Happy Ladybugs é um jogo de tabuleiro com as seguintes propriedades:

O tabuleiro é representado por uma string, b, de comprimento n. O ith caractere da string, b[i], denota a ith célula do quadro.
Se b[i] for um sublinhado (ou seja, _), significa que a i-ésima célula do quadro está vazia.
Se b[i] for uma letra maiúscula do alfabeto inglês (ascii[AZ]), significa que a ¿ésima célula contém uma joaninha da cor b[i].
A string b não conterá nenhum outro caractere.
Uma joaninha fica feliz apenas quando sua célula adjacente esquerda ou direita (ou seja, b[i+1]) é ocupada por outra joaninha da mesma cor.
Em um único movimento, você pode mover uma joaninha de sua posição atual para qualquer célula vazia.
Dados os valores de n e b para g jogos de Happy Joaninhas, determine se é possível fazer todas as joaninhas felizes. Para cada jogo, retorne SIM se todas as joaninhas puderem ficar felizes por meio de alguns movimentos. Caso contrário, retorne NÃO.

Exemplo:

b = [YYR_B_BR]
Você pode mover o B e R mais à direita para fazer b = [YYRRBB_] e todas as joaninhas ficarão felizes. Retorno SIM.

Vejamos o código a seguir:

const ladybugs = b.split("");
    const ladybugsSet = [...new Set(ladybugs)];

    if (!ladybugsSet.includes("_")) {
      for (let i = 0; i < ladybugs.length; i++) {
        if (ladybugs[i - 1] !== ladybugs[i] && ladybugs[i] !== ladybugs[i + 1]) return "NO";
      }
      return "YES";
    } else {
      for (const ladybug of ladybugsSet) {
        if (ladybug !== "_") {
          if (ladybugs.filter((color) => color === ladybug).length === 1) return "NO";
        }
      }
      return "YES";
    }

Esse código verifica se é possível rearranjar as joaninhas representadas pela string b de forma que cada joaninha tenha pelo menos uma joaninha vizinha da mesma cor, ou se é possível colocar "_" em alguns espaços vazios para atender a essa condição. Se for possível, a função retorna "YES"; caso contrário, retorna "NO".

4
7
RBY_YBR
6
X_Y__X
2
__
6
B_RRBR


input:
YES
NO
YES
YES

Assim, concluímos mais um Resolvendo problemas no HackerRank: até a próxima.

Barra de navegações com animações, em React Native

Altencir Junior — Tue, 02 May 2023 17:44:15 +0000

Criando um projeto pessoal, me deparei com a necessidade de fazer uma barra de navegação para meu app, com isso me veio a idéia de pesquisar uma forma de adicionar isso na minha aplicação e deixá-la muito mais profissional. Mostrarei a você neste tutorial como criar essa barra de navegação inferior personalizada e animada usando o React Navigation.

Criando o projeto -
Assim como no título deste artigo informa,antes de começarmos, é necessário ter o ambiente de desenvolvimento do React Native configurado em sua máquina. Em seguida, você pode criar um novo projeto React Native executando o seguinte comando:

npx create-expo-app --template

A opção acima irá fornecer escolhas como aplicação por padrão Blank, Blank com Typescript e outros, selecione a padrão. O nome ficará a seu critério. Chamarei meu projeto de TabSlide.

Devemos também instalar as seguintes dependências:

npm install @react-navigation/native

npm install @react-navigation/bottom-tabs

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Feito isso, podemos começar a criar a barra de menu criando o seguinte componente:

import React from "react";
import { View } from "react-native";
import { blue, grey } from "../../styles";
import { AntDesign } from "@expo/vector-icons";
type Props = {
  iconName: string;
  isCurrent?: boolean;
};
export const BottomMenuItem = ({ iconName, isCurrent }: Props) => {
  return (
    <View
      style={{
        height: "100%",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <AntDesign
        name={iconName}
        size={32}
        style={{ color: isCurrent ? blue : grey }}
      />
    </View>
  );
};

Você pode ajustar este componente como quiser. Utilizamos um iconName para exibir o ícone correto e uma propriedade isCurrent que altera a cor do ícone se estiver selecionado no momento. Para indicar se em que parte aba da barra de navegação estaremos.

Customizando o componente TabBar -

import React, { useState } from "react";
import {
  View,
  TouchableOpacity,
  Dimensions,
  StyleSheet,
} from "react-native";
import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
import { BottomMenuItem } from "./BottomMenuItem";
import { blue } from "../../styles";
export const TabBar = ({
  state,
  descriptors,
  navigation,
}: BottomTabBarProps) => {
  const totalWidth = Dimensions.get("window").width;
  const tabWidth = totalWidth / state.routes.length;
  return (
    <View style={[style.tabContainer, { width: totalWidth }]}>
      <View style={{ flexDirection: "row" }}>
        <View style={style.slider}/>
{state.routes.map((route, index) => {
          const { options } = descriptors[route.key];
          const label =
            options.tabBarLabel !== undefined
              ? options.tabBarLabel
              : options.title !== undefined
              ? options.title
              : route.name;
const isFocused = state.index === index;
const onPress = () => {
            const event = navigation.emit({
              type: "tabPress",
              target: route.key,
              canPreventDefault: true,
            });
if (!isFocused && !event.defaultPrevented) {
              navigation.navigate(route.name);
            }
const onLongPress = () => {
            navigation.emit({
              type: "tabLongPress",
              target: route.key,
            });
          };
return (
            <TouchableOpacity
              accessibilityRole="button"
              accessibilityStates={isFocused ? ["selected"] : []}
              accessibilityLabel={options.tabBarAccessibilityLabel}
              testID={options.tabBarTestID}
              onPress={onPress}
              onLongPress={onLongPress}
              style={{ flex: 1 }}
              key={index}
            >
              <BottomMenuItem
                iconName={label.toString()}
                isCurrent={isFocused}
              />
            </TouchableOpacity>
          );
        })}
      </View>
    </View>
  );
};
const style = StyleSheet.create({
  tabContainer: {
    height: 60,
    shadowOffset: {
      width: 0,
      height: -1,
    },
    shadowOpacity: 0.1,
    shadowRadius: 4.0,
    backgroundColor: "white",
    borderTopRightRadius: 20,
    borderTopLeftRadius: 20,
    elevation: 10,
    position: "absolute",
    bottom: 0,
  },
  slider: {
    height: 5,
    position: "absolute",
    top: 0,
    left: 10,
    backgroundColor: blue,
    borderRadius: 10,
    width: 50
},
});

Fizemos a importação do componente de criação da barra, e adicionamos uma customização a ele no caso acima.

Conectando o TabBar personalizado ao sistema de navegação -

import React from "react";
import {
  createBottomTabNavigator,
  BottomTabBarProps,
} from "@react-navigation/bottom-tabs";
import { TabBar } from "./TabBar";
import { AppsScreen } from "../../screens/AppsScreen";
import { DashboardScreen } from "../../screens/DashboardScreen";
import { GroupScreen } from "../../screens/GroupScreen";
import { ProfileScreen } from "../../screens/ProfileScreen";
import { useSafeArea } from "react-native-safe-area-context";
import { View } from "react-native";
export const BottomMenu = () => {
  const Tab = createBottomTabNavigator();
  return (
    <View style={{ flex: 1, position: "relative"}}>
      <Tab.Navigator
        tabBar={(props: BottomTabBarProps) => <TabBar {...props} />}
      >
        <Tab.Screen name="search1" component={AppsScreen} />
        <Tab.Screen name="dashboard" component={DashboardScreen} />
        <Tab.Screen name="profile" component={GroupScreen} />
        <Tab.Screen name="user" component={ProfileScreen} />
      </Tab.Navigator>
      {useSafeArea().bottom > 0 && (
        <View
          style={{
            height: useSafeArea().bottom - 5,
            backgroundColor: "white",
          }}
        />
      )}
    </View>
  );
};

Acima foi feita conexão entre as abas onde cada aba será uma nova navegação clicável.

Nossa aplicação ficará parecida com isso:

Neste artigo você aprendeu como criar barras de navegação animadas, espero que ele tenha o ajudado. O restante de criação ficará por sua criatividade. Obrigado por ler.

Resolvendo problemas no HackerRank: Contador estranho

Altencir Junior — Tue, 02 May 2023 11:39:36 +0000

Olá, seja bem vindo a mais um Resolvendo problemas no HackerRank: No caso de hoje, vamos encontrar o valor T individual de um contador que tem um padrão de contagem diferente do normal. Vejamos mais informações com a explicação e sua resolução.

Strange Counter -

Temos uma tabela com um contador fora do comum. A cada segmento, o número exibido por decrementa em 1 até chegar 1. Partindo para um segundo segmento o contador terá como redefinição 2x o valor inicial do segmento anterior. Podemos ver isso na imagem a seguir:

Com base nisso, queremos encontrar o valor de cada segmento duplicado. Vejamos o algoritmo:

function strangeCounter(t) {
    // Write your code here
  let end = 3
  let size = 3

    while (end<t) {
      size=2*size
      end+=size
    }  
    return end-t+1
}

Temos o parâmetro t representa a parte de tempo de cada segmento. Criamos variáveis ende sizeonde endserá o valor final de cada segmento te sizeo seu multiplicador.

Enquanto endfor menor que t, iremos multiplicar o valor do valor do segmento em 2, e adicionar dentro de end. Sendo assim,ao final retornamos a expressãoend-t+1`que irá trazer o valor duplicado correto de cada segmento sendo multiplicado por 2.

Seu resultado será:

4 input: 6
Assim, concluímos mais um Resolvendo problemas no HackerRank: até a próxima.

Desenvolvendo um Aplicativo de Alarme em React Native

Altencir Junior — Fri, 28 Apr 2023 18:25:11 +0000

O React Native é um framework de desenvolvimento de aplicativos móveis que permite criar aplicativos nativos para iOS e Android usando JavaScript. Neste artigo, vamos explorar como criar um aplicativo de alarme simples usando o React Native.

Antes de começar, certifique-se de ter o ambiente de desenvolvimento React Native configurado em seu sistema. Você pode seguir as instruções de instalação na documentação oficial do React Native.

Iniciando o projeto -

Para criar um novo projeto React Native usando o seguinte comando no terminal:

npx create-expo-app --template

A opção acima irá fornecer escolhas como aplicação por padrão Blank, Blank com Typescript e outros, selecione a padrão. Abrindo o projeto no VScode iremos instalar a biblioteca React Native DateTimePicker, que usaremos para permitir que os usuários definam a hora do alarme. Execute o seguinte comando no terminal:

npm install @react-native-community/datetimepicker --save

Codificando a aplicação em React Native -

Abra o arquivo App.js e adicione o seguinte código para importar o DateTimePicker e definir o estado inicial do aplicativo:

import React, {useState} from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Platform,
} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

const App = () => {
  const [date, setDate] = useState(new Date());
  const [mode, setMode] = useState('time');
  const [show, setShow] = useState(false);

  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setShow(Platform.OS === 'ios');
    setDate(currentDate);
  };

  const showMode = (currentMode) => {
    setShow(true);
    setMode(currentMode);
  };

  const showTimepicker = () => {
    showMode('time');
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={showTimepicker} style={styles.button}>
        <Text style={styles.buttonText}>Definir alarme</Text>
      </TouchableOpacity>
      {show && (
        <DateTimePicker
          testID="dateTimePicker"
          value={date}
          mode={mode}
          is24Hour={true}
          display="default"
          onChange={onChange}
        />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    backgroundColor: 'green',
    padding: 10,
    borderRadius: 5,
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
  },
});

export default App;

Neste código, estamos importando o DateTimePicker e usando o estado para rastrear a data e hora do alarme selecionado, o modo do seletor de data/hora e se o seletor deve ser exibido.

Também adicionamos um botão para permitir que os usuários definam a hora do alarme e um condicional para exibir o DateTimePicker quando o botão é pressionado.

Adicionando som na aplicação -

Adicione a biblioteca React Native Sound, que usaremos para tocar o som do alarme. Execute o seguinte comando no terminal:

npm install react-native-sound --save

Vamos adicionar o código a seguir para importar a biblioteca em nosso código:

import Sound from 'react-native-sound';

const App = () => {
  // Código anterior omitido para maior clareza

  const playAlarm = () => {
    // Carrega o arquivo de som do alarme
    const alarmSound = new Sound('alarm_sound.mp3', Sound.MAIN_BUNDLE, (error) => {
      if (error) {
        console.log('Erro ao carregar o som do alarme', error);
        return;
      }
      // Reproduz o som do alarme
      alarmSound.play((success) => {
        if (success) {
          console.log('O som do alarme foi reproduzido com sucesso');
        } else {
          console.log('Falha ao reproduzir o som do alarme');
        }
        // Libera os recursos do som do alarme
        alarmSound.release();
      });
    });
  };

  const onChange = (event, selectedDate) => {
    // Código anterior omitido para maior clareza

    // Verifica se o alarme está configurado para um horário futuro
    if (currentDate > new Date()) {
      playAlarm();
    }
  };
};

Neste trecho de código, importamos a biblioteca React Native Sound e adicionamos a função playAlarm() que carrega e reproduz o som do alarme quando chamada.

Dentro da função onChange(), verificamos se o horário selecionado para o alarme é futuro em relação à hora atual. Se for, chamamos a função playAlarm() para reproduzir o som do alarme.

Certifique-se de ter um arquivo de som chamado alarm_sound.mp3 em seu projeto, localizado na pasta android/app/src/main/res/raw/. Você pode substituir esse arquivo pelo som do alarme de sua escolha.

Para executar a aplicação use os seguintes comandos variando de dispositivo:

npx expo start

Depois de construir o aplicativo, você verá um botão "Definir alarme". Ao tocar nesse botão, o seletor de tempo será exibido e você poderá selecionar um horário para o alarme. Se o horário selecionado for futuro, o som do alarme será reproduzido.

Espero que este artigo tenha lhe ajudado a criar um alarme pessoal. Este é um exemplo básico de um aplicativo de alarme usando React Native. Você pode personalizá-lo e adicionar mais recursos, como repetição de alarme, seleção de dias da semana, configurações de volume etc., de acordo com suas necessidades.

Resolvendo problemas no HackerRank: A grade de pesquisa

Altencir Junior — Fri, 28 Apr 2023 16:38:45 +0000

Olá, seja bem vindo a mais um Resolvendo problemas no HackerRank: No caso de hoje, vamos movimentar uma grade com resultados. Vejamos mais informações com a explicação e sua resolução.

The Grid Search -

Dada uma matriz de cadeias de dígitos, tente encontrar a ocorrência de um determinado padrão de dígitos. Nas matrizes de grade e padrão, cada string representa uma linha na grade. Por exemplo, considere a seguinte grade:

1234567890  
09 876543 21  
11 111111 11  
11 111111 11  
2222222222

A matriz padrão é:

876543  
111111  
111111

O padrão começa na segunda linha e na terceira coluna da grade e continua nas duas linhas seguintes. Diz-se que o padrão está presente na grade. O valor de retorno deve ser YES ou NO, dependendo se o padrão for encontrado. Nesse caso, retorne YES.

Descrição da função

Complete a função gridSearch no editor abaixo. Ele deve retornar YES se o padrão existir na grade ou NO não.

gridSearch tem o(s) seguinte(s) parâmetro(s):

string G[R]: a grade para pesquisar
string P[r]: o padrão a ser procurado

Vejamos o código em execução:

function gridSearch(G, P) {
    // Write your code here
  for(let i=0; i<=G.length-P.length; i++){
    for(let j=0; j<=G[0].length-P[0].length; j++){
        var k = 0;
    while ( G[i+k].slice(j,j+P[0].length) == P[k] ){
           k++;
        if(k == P.length) return 'YES';
    }
  }
}
  return 'NO';
}

O código usa dois loops for aninhados para percorrer todas as posições possíveis na matriz G onde o padrão P pode ser encontrado. O primeiro loop for itera pelas linhas de G, enquanto o segundo loop for itera pelas colunas de G.

Dentro dos loops for, uma variável k é definida como zero para acompanhar o progresso na comparação entre G e P.

Em seguida, um loop while é usado para comparar as partes relevantes de G e P. A condição do loop while verifica se a fatia da matriz G é igual à linha correspondente de P.

Se o loop while chegar ao final do padrão P, ou seja, se k for igual ao comprimento de P, isso significa que o padrão P foi encontrado em G. Nesse caso, a função retorna a string 'YES'.

Se o código não encontrar o padrão P em nenhuma posição possível na matriz G, a função retorna a string 'NO' após percorrer todos os elementos.

O resultado será:

2
10 10
7283455864
6731158619
8988242643
3830589324
2229505813
5633845374
6473530293
7053106601
0834282956
4607924137
3 4
9505
3845
3530
15 15
400453592126560
114213133098692
474386082879648{-truncated-}

Expected Output
- YES
- NO

Assim, concluímos mais um Resolvendo problemas no HackerRank: até a próxima.

Criando mensagens Toast em React Native

Altencir Junior — Thu, 27 Apr 2023 21:53:20 +0000

Muitas vezes desejamos mostrar uma mensagem de alerta na tela de um usuário e podemos usar diversos meios como um Text ou até um Alert para aviso. Entretanto o React tem a sua disponibilidade os Toast de notificação. Neste artigo iremos criar Toasts. Ele fornece dois tipos de toasts: sucesso e erro, que são personalizáveis por meio do objeto ToastConfig fornecido.

Instalação da biblioteca Toast -

Para usar este componente, instale-o como um pacote npm:

npm install --save react-native-toast-message
yarn add react-native-toast-message

Utilizando o Toast-

Importe o Provider componente do pacote e envolva-o em seu componente principal:

import Toast from "react-native-toast-message";

const App = () => {
  return (
    <View>
      {/* Your main component */}
      <Toast.Provider />
    </View>
  );
};

Isso cria um provedor toast que pode ser usado para mostrar mensagens toast. Para mostrar uma mensagem toast, basta chamar o método showSuccess ou showError do Toast objeto:

import Toast from "react-native-toast-message";

const ExampleComponent = () => {
  const handleButtonClick = () => {
    Toast.showSuccess("Success message");
    Toast.showError("Error message");
  };

  return (
    <View>
      <Button title="Show Toast" onPress={handleButtonClick} />
    </View>
  );
};

Por padrão, o componente será exibido na parte inferior da tela, acima do teclado (se estiver visível). Você pode personalizar a aparência do brinde passando um ToastConfigobjeto para o componente Provider:

import Toast from "react-native-toast-message";

const config = {
  successStyle: {
    backgroundColor: "#00FF00",
  },
  errorStyle: {
    backgroundColor: "#FF0000",
  },
  textStyle: {
    color: "#FFFFFF",
  },
};

const App = () => {
  return (
    <View>
      {/* Your main component */}
      <Toast.Provider config={config} />
    </View>
  );
};

Com isso, conseguimos ver o quão fácil é utilizar o Toast. Espero que este artigo tenha o ajudado a criar mensagens de notificação para sua aplicação mobile feita em React Native. Obrigado por ler até aqui.