Módulo 5 PROJETOS

Atividade 24: Cartão de Visita Digital (Link na Bio)

Venda o seu App para um cliente! Aprenda como fazer os botões nativos saltarem do seu aplicativo abrindo o Whatsapp, Telefone e E-mail.

🎯 O que vamos construir

✓ Design Perfeito com Avatares redondos (borderRadius: 100)
✓ Dominar a API Nativa do React: Linking
✓ Conectores tel: mailto: https:

🔗 A API Global Linking

Muitos desenvolvedores acham que precisam instalar bibliotecas gigantescas do Google para fazer o celular ligar para um restaurante através do seu App. Mas o React Native esconde um segredo de Ouro Nativo já instalado no sistema Base: o Módulo Linking.

As 4 Chaves URL Universais

A biblioteca Linking importa uma função poderosa `Linking.openURL(string)`. Dependendo as Duas ou três letras antes dos dois pontos que você usar, o Celular do usuário abrirá um Aplicativo Interno nativo diferente e saindo do seu App para ele!

import { Linking } from 'react-native'; // A Importação de Ouro

// 1. WhatsApp Mágico (Abre a conversa na hora com o número)
Linking.openURL("https://wa.me/5514999999999");

// 2. Telefone/Discador (Joga o número na tela de Ligar do celular)
Linking.openURL("tel:+5514999999999");

// 3. E-mail (Abre o Gmail/Apple Mail já preenchendo o "Para:")
Linking.openURL("mailto:contato@gmail.com");

// 4. Instagran (Aplica o link base do insta, abrindo App deles se tiver)
Linking.openURL("https://instagram.com/NOME_DO_PERFIL");

💻 App Perfil PRO

Abra seu Expo Snack. Faremos um Card com foto de perfil e botões lindos de contato direto usando a magia no Linking! Ideal para portfólio de médicos, advogados e estúdios.

App.js

import React from 'react';
import { View, Text, Image, TouchableOpacity, Linking, StyleSheet, ScrollView } from 'react-native';

export default function App() {

  // Funções Nativas de Deep-Linking
  const chamarZap = () => Linking.openURL('https://wa.me/5514991234567');
  const ligarFone = () => Linking.openURL('tel:+5514991234567');
  const abrirSite = () => Linking.openURL('https://github.com/Reginaldo');
  const mandarMail = () => Linking.openURL('mailto:professor@fatec.edu.br?subject=Dúvida no App!');

  return (
    <ScrollView style={styles.fundoBg}>
       
       {/* Parte 1: O Container de Cima Escuro */}
       <View style={styles.headerEscuro}>
           
           {/* A Foto de Perfil Redondinha Perfeita! */}
           <Image 
              source={{uri: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d'}}
              style={styles.minhaFoto}
           />
           
           <Text style={styles.tituloNome}>Prof. Reginaldo</Text>
           <Text style={styles.cargoSubtitulo}>Mobile Developer Sênior</Text>
           
           <View style={styles.chipTech}>
               <Text style={styles.chipText}>React Native · Node · PHP</Text>
           </View>

       </View>

       {/* Parte 2: A Área de Botões Abaixo */}
       <View style={styles.botoesArea}>
            
            <Text style={styles.sectionTitle}>Entre em Contato</Text>

            <TouchableOpacity style={[styles.btn, styles.btnZap]} onPress={chamarZap}>
                 <Text style={styles.iconTxt}>💬</Text>
                 <Text style={styles.btnTextLight}>Chamar no WhatsApp</Text>
            </TouchableOpacity>

            <TouchableOpacity style={[styles.btn, styles.btnFone]} onPress={ligarFone}>
                 <Text style={styles.iconTxt}>📞</Text>
                 <Text style={styles.btnTextLight}>Ligar Agora (Tel)</Text>
            </TouchableOpacity>

            <TouchableOpacity style={[styles.btn, styles.btnMail]} onPress={mandarMail}>
                 <Text style={styles.iconTxt}>✉️</Text>
                 <Text style={styles.btnTextEscuro}>Enviar E-mail</Text>
            </TouchableOpacity>

            <TouchableOpacity style={[styles.btn, styles.btnSite]} onPress={abrirSite}>
                 <Text style={styles.iconTxt}>🌐</Text>
                 <Text style={styles.btnTextLight}>Visitar Portfólio</Text>
            </TouchableOpacity>

       </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  fundoBg: { flex: 1, backgroundColor: '#f1f5f9' },
  
  headerEscuro: { backgroundColor: '#1e293b', paddingVertical: 50, alignItems: 'center', borderBottomLeftRadius: 40, borderBottomRightRadius: 40, elevation: 10, shadowColor: '#000', shadowOpacity: 0.3, shadowRadius: 10 },
  minhaFoto: { width: 140, height: 140, borderRadius: 100, borderWidth: 4, borderColor: '#38bdf8', marginBottom: 15 },
  tituloNome: { color: 'white', fontSize: 28, fontWeight: 'bold' },
  cargoSubtitulo: { color: '#94a3b8', fontSize: 16, marginTop: 5 },
  chipTech: { backgroundColor: '#38bdf820', paddingHorizontal: 15, paddingVertical: 5, borderRadius: 20, marginTop: 15, borderWidth: 1, borderColor: '#38bdf850' },
  chipText: { color: '#38bdf8', fontSize: 13, fontWeight: 'bold' },

  botoesArea: { padding: 25, marginTop: 10 },
  sectionTitle: { color: '#475569', fontSize: 14, textTransform: 'uppercase', letterSpacing: 1.5, fontWeight: 'bold', marginBottom: 20, marginLeft: 5 },
  
  btn: { flexDirection: 'row', alignItems: 'center', padding: 18, borderRadius: 15, marginBottom: 15, elevation: 3, shadowColor: '#000', shadowOffset:{width:0, height:2}, shadowOpacity: 0.1, shadowRadius: 4 },
  iconTxt: { fontSize: 24, marginRight: 15 },
  
  /* Cores Mágicas das Marcas */
  btnZap: { backgroundColor: '#25D366' },
  btnFone: { backgroundColor: '#0ea5e9' },
  btnMail: { backgroundColor: '#f8fafc', borderWidth: 1, borderColor: '#e2e8f0' },
  btnSite: { backgroundColor: '#0f172a' },
  
  btnTextLight: { color: 'white', fontSize: 16, fontWeight: 'bold' },
  btnTextEscuro: { color: '#334155', fontSize: 16, fontWeight: 'bold' }
});

⚠️ Testanto no Computador Web: O Browser pode bloquear o `tel:` e o `mailto:`, é comum! Instale o App Expo Go no Celular físico e leia o QRCode. Ao tocar nestes botões lá, o Discador real do Android vai subir estralando!

📝 Quiz - Linking e Design

Anterior ← Atividade 23 Próxima Vítima Atividade 25 (FINAL) →