Skip to content

Tutoriais

Kathelleen edited this page May 2, 2024 · 6 revisions

Preparação do Ambiente de Trabalho

Instalando o VS Code

O IDE utilizado para o desenvolvimento será o Visual Studio Code. Para baixá-lo, basta acessar o link e selecionar o sistema operacional desejado.

Instalando o Node.js

O Node.js é um software de código aberto que permite executar código JavaScript fora do navegador. Para este projeto React Native, ele é necessário para instalar ferramentas essenciais, gerenciar dependências e executar scripts que possibilitam o desenvolvimento do aplicativo móvel, para baixá-lo basta acessar o link e selecionar o sistema operacional desejado.

Instalando o Expo no dispositivo móvel ou emulador

O Expo é uma plataforma e conjunto de ferramentas que simplificam o desenvolvimento de aplicativos móveis usando React Native, ele fornece uma variedade de recursos úteis, como um conjunto de componentes pré-construídos, acesso fácil a APIs nativas do dispositivo e uma ferramenta de desenvolvimento ao vivo que permite visualizar instantaneamente as mudanças feitas no código. É necessário instalar o aplicativo do Expo no seu dispositivo móvel ou emulador para construir e executar a aplicação. Para isso, acesse a loja de aplicativos do seu dispositivo (Google Play Store para Android e App Store para iOS) e faça o download do Expo.
Play Store
Apple Store

Criando aplicação React Native

O React Native é um framework de desenvolvimento de aplicativos móveis que permite criar aplicativos nativos para iOS e Android usando JavaScript e React. Ele permite que os desenvolvedores usem uma única base de código para criar aplicativos para múltiplas plataformas. Para criar uma aplicação siga as instruções:

  1. Crie um novo diretório.
  2. Abra o Visual Studio Code (VS Code).
  3. Na barra de menu, vá em File -> Open Folder e selecione o diretório criado anteriormente.
  4. Abra o terminal no diretório atual.!
  5. No terminal, digite o comando npx create-expo-app my_app.
  6. Se você não tiver o Expo instalado, será solicitada a instalação. Confirme a instalação.
  7. Após a criação, um diretório para a aplicação será criado. Navegue até ele usando o comando cd my_app no terminal.
  8. No terminal, execute o comando npx expo start para iniciar o servidor de desenvolvimento do Expo. Um QR Code será gerado.
  9. Abra o aplicativo Expo no seu dispositivo móvel ou emulador e escaneie o QR Code para iniciar a construção do aplicativo.
  10. Após a construção, o aplicativo será carregado e executado no dispositivo móvel ou emulador, permitindo que você interaja com ele.

Instalando o Python

Python é a linguagem de programação base para o desenvolvimento de aplicações em Django, que é o framework que será utilizado no back-end. Python é interpretado, dinâmico e suporta diversos paradigmas de programação, tornando-o amplamente utilizado em uma variedade de domínios, desde desenvolvimento web e científico até automação e inteligência artificial. Para baixá-lo basta acessar o link e selecionar o sistema operacional desejado, durante a instalação é importante selecionar a opção de adicionar "python.exe" ao PATH.

Instalando o Django

Django é um framework de desenvolvimento web em Python que simplifica a criação de sites e aplicativos web robustos e escaláveis. Ele oferece uma série de recursos poderosos, incluindo um sistema de administração automática, mapeamento objeto-relacional para interagir com bancos de dados, e um sistema de roteamento que facilita a organização do código, para instalá-lo:

  1. Após instalar o Python, abra o prompt de comando
  2. Digite o comando python -m pip install Django==5.0.4

Hello World em Django

  1. Abra o prompt de comando
  2. Navegue até o local onde está o espaço do Django
  3. Execute o comando Scripts\activate.bat
  4. Execute o comando django-admin startproject nome_do_projeto
  5. Navegue até o local do projeto
  6. Use o comando python manage.py startapp nome_app
  7. Acesse no Explorador de Arquivos o arquivo settings em nome_do_projeto/settings.py
  8. Procure a variável INSTALLED_APPS e adicione a seguinte str:
    INSTALLED_APPS = [
    "**nome_app**",
    'django.contrib.admin',
    ...
    ]
  9. Acesse no Explorador de Arquivos o arquivo views em nome_app/views.py
  10. Adicione a view:
    from django.shortcuts import render, HttpResponse
    def index(request):
    return HttpResponse("Olá, Mundo!\nAquele abraço!")
  11. Acesse no Explorador de Arquivos o arquivo urls em nome_do_projeto/urls.py
  12. Adicione os elementos:
    from django.urls import path, include
    urlpatterns = [
    path('admin/', admin.site.urls),
    path("nome_app", include("nome_app.urls", namespace="nome_app"))
    ]
  13. Crie o arquivo urls.py em nome_app
  14. Acesse no Explorador de Arquivos o arquivo urls nome_app/urls
  15. Adicione os elementos:
    from django.urls import path
    from . import views
    app_name = "nome_app"
    urlpatterns = [
    path("/index", views.index, name="index")
    ]
  16. Digite no terminal python manage.py runserver
  17. Copie e cole o link gerado no navegador e acrescente /nome_app/index
    Exemplo: http://127.0.0.1:8000/Ola_Mundo/index

MySQL na AWS

AWS, ou Amazon Web Services, é uma plataforma de computação em nuvem oferecida pela Amazon que fornece uma ampla gama de serviços de infraestrutura e aplicações na internet. Um desses serviços fornecidos é o Amazon RDS que é um banco de dados relacional na nuvem, que suporta diversos bancos, incluindo o MySQL. No qual facilita a configuração, operação, possui escalabilidade conforme as necessidades de uso, flexibilidade na aplicação e segurança com criptografia de dados armazenados e transmitidos.

Criando o banco de dados RDS MySQL na AWS com conexão no MySQL Workbench

Passo 1: Configurar o Amazon RDS

  1. Faça login na AWS Management Console:
  1. Crie uma Instância do RDS:
  • No Console, procure por RDS ou encontre o serviço em “Serviços”.
  • Clique em “Criar banco de dados”.
  • Escolha “Criação padrão” e selecione "MySQL" como opção.
  • Escolha o modelo “Nível gratuito”.
  1. Especifique os detalhes da instância do DB:
  • Defina o nome da instância, nome de usuário e senha do administrador.
  1. Configurações de Rede e Segurança:
  • Selecione a VPC adequada, geralmente a VPC padrão já serve.
  • Assegure-se de permitir acesso público se desejar conectar-se de fora da AWS.
  • Configure o grupo de segurança para permitir conexões na porta 3306 (padrão do MySQL) do seu endereço IP.
  1. Revise as configurações e clique em “Criar banco de dados”.
  • Aguarde enquanto a instância é provisionada (isso pode levar alguns minutos).

Passo 2: Conectar usando MySQL Workbench

  1. Obtenha o Endpoint do Banco de Dados e adicione a permissão de acesso:
  • Uma vez que a instância esteja ativa, vá para o painel do RDS, selecione a instância de banco de dados.
  • Anote o “Endpoint” e a “Porta” listados nas propriedades da instância.
  • Clique em editar regras de entrada e adicione "Meu IP".
  1. Abra o MySQL Workbench:
  1. Crie uma Nova Conexão:
  • Clique no ícone “+” para adicionar uma nova conexão.
  • No campo “Connection Name”, dê um nome à sua conexão.
  • Em “Hostname”, insira o endpoint do seu banco de dados RDS.
  • Em “Port”, insira a porta (geralmente 3306).
  • Em “Username”, insira o nome de usuário que você configurou.
  • Clique em “Store in Vault” para inserir e salvar sua senha.
  1. Teste e Conecte:
  • Clique em “Test Connection” para verificar se todas as configurações estão corretas e se a conexão pode ser estabelecida.
  • Se o teste for bem-sucedido, clique em “OK” para salvar a conexão.
  1. Conecte-se ao Banco de Dados:
  • Selecione a conexão recém-criada na tela inicial do Workbench e clique em “Connect”.

Vídeos

  1. Preparando o ambiente de desenvolvimento React Native
  2. Preparando o ambiente de desenvolvimento Django
  3. Hello Word em Django
  4. Criando o banco de dados RDS MySQL na AWS com conexão no MySQL Workbench