DEV Community

Altencir Junior
Altencir Junior

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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();
    }
  };
};
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)