Meu Primeiro App com React Native - #20 QRCode

Nessa videoaula iniciaremos a utilização do módulo de QRCode do nosso projeto. A ideia é a leitura rápida das encomendas para atualização do status.

Usando QRCode no React Native

Vamos instalar primeiramente o qrcode no nosso backend para gerar o código. Para isso, utilizaremos o módulo node-qrcode

npm install --save qrcode

Controller.js

Vamos chamar o módulo recém instalado e vamos chamá-lo na rota create para assim que for cadastrado o produto já ser criado o código.

const QRCode = require('qrcode');

//Criação do produto no banco
app.post('/create',async (req,res)=>{
    let trackingId='';
   await tracking.create({
     userId: req.body.userId,
       code: req.body.code,
       local: req.body.local
   }).then((response)=>{
       trackingId+=response.id;
   });

   await product.create({
       trackingId: trackingId,
       name: req.body.product
   });

    QRCode.toDataURL(req.body.code).then(url=>{
        QRCode.toFile(
            './assets/img/code.png',
            req.body.code
        );
        res.send(JSON.stringify(url));
    })
});

views/arearestrita/Cadastro.js

No componente Cadastro vamos receber a resposta do backend e chamar a imagem do QRCode.

//Envio do formulário
async function sendForm()
{
    let response=await fetch(config.urlRoot+'create',{
        method: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            userId: user,
            code: code,
            product: product,
            local: address
        })
    });
    let json=await response.json();
    setResponse(json);
}

{response && (
    <View>
        <Image source={{uri:response, height:180, width:180}} />
        <Button title='Compartilhar' />
    </View>
)}

Precisamos também colocar uma dependência para geração do código randômico. Toda vez, que tivermos um novo produto cadastrado precisamos gerar um novo código para o QRCode.

useEffect(()=>{
    randomCode();
    setProduct('');
},[response]);

E vamos setar o value do input de produto:

<TextInput
    placeholder='Nome do Produto:'
    onChangeText={text=>setProduct(text)}
    value={product}
/>

Por hoje é só! Sucesso nos códigos e na vida!

Precisa de aulas particulares? webdesignemfoco@gmail.com