0

Utilizando a API Speech do Expo - React Native

R
Ricardo Leme

Introdução

Para quem está iniciando no desenvolvimento Mobile, o Expo é uma excelente alternativa, já que não demanda nenhuma instalação complexa.👏

Considerando que você já possui o nodejs e o npm instalados, o processo de instalação do Expo, é simples. Abra o seu terminal (ou prompt) e informe:

npm install -g expo-cli

Iniciando o desenvolvimento

Agora, iremos iniciar o desenvolvimento de um app que irá ler para o usuário de forma randômica algumas frases do Albert Einstein. (Para isso, utilizaremos a API Speech do Expo)

expo init fala-einstein
cd fala-einstein
expo install expo-speech
expo start

Dica: Baixe no seu dispositivo móvel o Expo Go, que permitirá visualizar o app no seu próprio dispositivo móvel. (disponível para Android e iOS)


Abra o projeto no VsCode (ou no seu editor preferido), edite o arquivo App.js e nas linhas iniciais do arquivo, iremos efetuar o import da API e dos demais componentes necessários:

import React, { useState } from 'react'
import { StyleSheet, Text, SafeAreaView, Image } from 'react-native'
import { FontAwesome } from '@expo/vector-icons'
import * as Speech from 'expo-speech'


Agora, logo após a linha que cria a function App, crie um array com algumas frases do famoso físico, conforme abaixo:

export default function App(){ 
//array de frases - fonte: https://www.pensador.com/autor/albert_einstein/
const frases = [
"A imaginação é mais importante que o conhecimento.",
"A liberação da energia atômica mudou tudo, menos nossa maneira de pensar.",
"O mundo não está ameaçado pelas pessoas más, e sim por aquelas que permitem a maldade.",
"O nacionalismo é uma doença infantil; é o sarampo da humanidade.",
"Os ideais que iluminaram o meu caminho são a bondade, a beleza e a verdade.",
"Nenhum cientista pensa com fórmulas.",
"Tudo deveria se tornar o mais simples possível, mas não simplificado.",
"Quero conhecer os pensamentos de Deus... O resto é detalhe.",
"Duas coisas são infinitas: o universo e a estupidez humana. Mas, em relação ao universo, ainda não tenho certeza absoluta."
]


Nós chamaremos a API Speech através de duas funções:

function falar() {
    let frase = frases[parseInt(Math.random() * frases.length)]  //Obtemos um valor randômico do array  
    Speech.speak(frase, { language: 'pt' })    //definimos o idioma para falar
}
    
function parar() {    
     Speech.stop()   
} 


O retorno da função montará a UI do nosso projeto e consistirá de uma imagem do físico (copie o arquivo e coloque na pasta assets) e de dois botões (Falar e Parar). Estaremos utilizando ícones do FontAwesome que foram importados no início do nosso projeto.

O código ficará da seguinte forma:

 return( 
<SafeAreaView style={styles.Principal}>    
  <Text style={styles.Titulo}>    
    <FontAwesome name="comment-o" size={50} /> &nbsp;    Fala Einstein!    
  </Text>    
  <Image source={require('./assets/einstein.png')} style={styles.Imagem} />    
        <FontAwesome.Button    name="volume-up"    backgroundColor="#0275d8"    
                 onPress={falar}    style={styles.Botao}    >Ouvir Frase</FontAwesome.Button>    
        <FontAwesome.Button    name="stop-circle"    backgroundColor="#d9534f"    
                 onPress={parar}    style={styles.Botao}    >Parar</FontAwesome.Button>    
        { /*Consulte a lista de ícones em: https://icons.expo.fyi */}    
</SafeAreaView>   
)

Observe que estamos fazendo referência a vários estilos (Principal, Titulo, Botao e Imagem). Eles são inseridos no final do projeto, após a function falar (){ ... }

 const styles = StyleSheet.create({
   Principal: {    
             flex: 1,    
             flexDirection: 'column',    
             justifyContent: 'space-around',    
             alignItems: 'center'    
             },    
   Titulo: {    
             fontSize: 30,    
             color: '#1a237e' /* indigo */    
           },    
    Botao: {    
             height: 50,    
             borderRadius: 10,    
             marginLeft: 5,    
             width: 200    
            },    
   Imagem: {    
            height: 400,    
            resizeMode: 'center'    
           }   
});  

Para visualizar o projeto, o método mais fácil é abrir o Expo Go no seu dispositivo e "ler" o QrCode que é apresentado no momento que você digitou expo start no terminal/prompt.


O projeto final está disponível no meu Github: https://github.com/ricardoleme/fala-einstein

Documentação Oficial da API Speech: https://docs.expo.io/versions/latest/sdk/speech/


Bons estudos! 😃

0
0

Comentários (1)

1
Jefferson Ferreira

Jefferson Ferreira

01/04/2021 19:06

Parabéns, ficou muito bom o resultado.

Professor Universitário na Fatec Itu