Desenvolvendo um Aplicativo de Alarme em React Native

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.