Decidi que era hora de atualizar meu site pessoal para permitir que os visitantes comprassem e acessassem meus cursos através de um novo portal.

Especificamente, eu queria um lugar para os visitantes se inscreverem em uma conta, exibir meus cursos disponíveis e comprá-los. Depois que um usuário adquirisse um curso, ele seria capaz de acessar todo o conteúdo do curso para sempre.

Isso pode parecer simples em teoria. No entanto, sem usar um site de comércio eletrônico como o Shopify, os sites de associação são surpreendentemente complexos.

Neste artigo, mostrarei as decisões que tomei e a pilha de tecnologia que usei para criar este novo site, incluindo:

  1. Como começar?
  2. Iniciando um projeto Django
  3. Como configurar modelos do Django
  4. Integrando Listra Pagamentos
  5. Implantando meu novo site em uma instância do AWS EC2
  6. Como clonar CSS de uma página existente

Como começar?

Ao adicionar uma nova seção ao seu site com um conjunto de recursos completamente novo, é lógico organizar esse site como um subdomínio do site original.

Um subdomínio é exatamente o que parece. Está um domínio que faz parte de outro domínio (principal). Os subdomínios aparecem como uma nova seção do URL do seu domínio antes o URL principal do domínio.

Mais especificamente:

A principal vantagem de um subdomínio é que eles são gratuitos! Sem mencionar, um subdomínio marcado em um site já bem classificado é indexado rapidamente e se beneficia do sucesso de seus pais.

Eu sabia que precisaria de um servidor para hospedar meu novo site. Eu também precisaria anexar esse servidor com um endereço IP elástico.

Um endereço IP elástico é um IP estático que nunca será alterado. Isso significa que pode ser acessado pelo público 24 horas por dia, 7 dias por semana.

Atualmente, a maneira mais rápida de colocar um servidor em funcionamento é hospedá-lo na nuvem. Existem muitas opções para computação em nuvem, incluindo AWS da Amazon, Gotas da DigitalOceanou Contêineres do Azure. Em termos de preços, as opções disponíveis são todas iguais em todos os aspectos – de modo que isso não influenciou muito minha decisão.

Eu já tive experiência anterior com AWS (Amazon Web Services) – um serviço baseado em nuvem para infraestrutura de hospedagem. Naturalmente, escolhi hospedar meu servidor aqui. Para ser mais específico, estou hospedando o site em um EC2 instância. Falaremos mais sobre isso mais tarde.

Ok, então agora eu sabia onde queria hospedar meu novo site, o que vem a seguir?

Estava na hora de pensar na pilha de tecnologia do site. Ao pensar em qual tecnologia usar para criar seu site, é importante considerar os principais tópicos:

  1. Em que você é proficiente?
  2. Escolhendo tecnologias de front-end e back-end que combinam bem
  3. O desempenho do site

Você deve responder a essas perguntas e tentar escolher uma pilha de tecnologia que atenda às suas necessidades e habilidades. Para mim, eu sou mais proficiente em Python, então Django 3.0 foi uma escolha natural!

Eu já havia trabalhado em um aplicativo Django antes (Passiv), então eu estava familiarizado com a infraestrutura. No entanto, eu nunca construí um projeto Django do zero.

Por causa disso, eu tinha algumas leituras para fazer. À medida que aprendi mais sobre esse quadro popular, continuei comparando-o ao PHP, a popular ferramenta de programação da web. Eu trabalhei em vários sites WordPress no passado, e o WordPress é construído em PHP, então essa foi uma comparação natural (pelo menos para mim).

De acordo com a documentação e vários posts no Stackoverflow, aqui estão as principais diferenças entre a estrutura do Django e as principais estruturas do PHP:

  • O Django é mais focado em segurança por padrão e fornece práticas de segurança integradas para ajudar os programadores a economizar tempo durante o desenvolvimento.
  • O Django está focado na velocidade. É conhecido como uma estrutura que ajuda os desenvolvedores a se instalarem o mais rápido possível.
  • O Django tem desempenho marginalmente mais baixo em comparação com a maioria das estruturas baseadas em PHP.

Eu gostaria de abordar esse último ponto. Python é uma linguagem interpretada e é comumente associada a um desempenho inferior ao de outras linguagens de programação. Quando um novo programador ouve algo assim, pode pensar que o Python é muito pior do que outras opções de linguagem, devido à importância do desempenho na computação.

Embora o Python tenha padrões de desempenho mais baixos em comparação com outros idiomas, essa é uma afirmação extremamente vaga. De fato, a diferença entre Django e Laravel (uma estrutura popular baseada em PHP) é tão pequena que é considerada insignificante.

Para que essa diferença de desempenho seja importante para você, você precisará escrever um aplicativo altamente dependente de desempenho com milhões de usuários. Fui encorajado a aprender que muitos dos maiores aplicativos Web do mundo são criados no Django. Dito de outra forma, se o Django é bom o suficiente para Instagram, certamente o desempenho foi suficiente para o meu site.

No final, decidi construir o site dos meus cursos usando o Django principalmente porque tenho experiência com Pitão. Aprender uma nova estrutura da web foi um bom bônus.

Em seguida, eu sabia que precisaria de um banco de dados para este site. Ter experiência com MySQL e PostgreSQL, Originalmente eu ia recorrer a usá-lo novamente aqui. No entanto, o Django fornece o padrão com um serviço de banco de dados SQLite3 que requer configuração mínima. Eu nunca usei o SQLite, então fiz mais algumas pesquisas.

Com base nas necessidades de desempenho e armazenamento de dados, o padrão SQLite3 O banco de dados enviado com o Django seria mais do que poderoso o suficiente para o meu site. Fiquei chocado ao descobrir que uma versão mais leve de um serviço de banco de dados poderia ser tão poderosa!

Para quem não conhece essa tecnologia (como eu), o SQLite3 é um banco de dados relacional com ótimo desempenho para sites com baixo a médio nível de tráfego (~ 100 mil acessos por dia). O SQLite3 pode ser executado no mesmo servidor que o site sem afetar o desempenho. Isso significa que não precisei criar uma instância separada do Amazon RDS, o que economiza algum dinheiro na fase de implantação!

Iniciando um projeto Django

d5I NnBMYltwX71zwpcZJ6Fx54w AU WR2GRRzrJgw70jY5Xd3oTAEZnmfnslPwM EeZ na8 KHOjrlk Z9VH9gGKvuF8UXz4fOgewIA8dD1

O Django é uma estrutura de web python de alto nível com o objetivo principal de permitir desenvolvimento rápido e fornecendo segurança por padrão. Ele cuida de muitas dificuldades no desenvolvimento da web, reduzindo práticas de codificação repetitivas.

Uma das melhores partes do uso do Django é que ele é totalmente gratuito!

O Django foi desenvolvido para ajudar os desenvolvedores a tirarem seus sites do ar rapidamente (que é uma das principais razões pelas quais escolhi usá-lo para este projeto). Um dos meus recursos favoritos dessa estrutura (como na maioria das outras) é o sistema de modelos de front-end.

Django Templates permite escrever código dinâmico que gera o HTML e CSS desejados. Isso permite que você use estruturas como loops e instruções if para criar código HTML dinâmico (o que significa que é renderizado de maneira diferente para cada usuário) que pode ser servido como um arquivo estático.

Por exemplo:

# course_titles_template.html{% for course in courses_list %}

{{ course.course_title }}

{% endfor %}

Criaria um cabeçalho para cada variável de curso encontrada no courses_list objeto. Isso poderia renderizar um arquivo HTML com um

tag que contém o título de cada curso, assim:

Python Fundamentals

Advanced Python for Finance and Data Science

How to Run Python Scripts

How to Make A Python Class

O sistema de modelos evita que você trabalhe muito. Permitir que o HTML seja renderizado dinamicamente economiza as dores de cabeça de atualizar seu código toda vez que você adiciona um novo objeto.

Esse sistema de modelos também permite que o aplicativo da Web seja atualizado com o tempo, à medida que adiciono mais conteúdo. Portanto, nesse caso, se eu fosse adicionar um novo curso ao meu banco de dados, esse modelo não precisaria ser alterado. Simplesmente renderizaria o título do meu novo curso em uma nova tag de cabeçalho!

O Django também torna extremamente fácil iniciar um projeto. Depois de instalar o Django, você poderá usar o django-admin para iniciar um projeto e até mesmo configurar seus aplicativos.

Espere um segundo, aplicativos? Projetos? Qual é a diferença?

Um aplicativo é um aplicativo da web que executa algumas funcionalidades. Pode ser um blog, um sistema de login, ou mesmo um servidor de arquivos. Um projeto é uma coleção de aplicativos e configurações que juntos formam um site.

Instalando o Django:

A maneira mais simples de instalar é com o pip, o gerenciador de pacotes Python.

python -m pip install Django

Para um guia de instalação completo, confira Documentação oficial do Django.

Iniciando um projeto:

Depois de instalar o Django, você terá acesso ao django-admin ferramenta que ajuda os desenvolvedores a configurar projetos e aplicativos e também fornece outras ferramentas úteis.

Corrida django-admin startproject myproject criará uma nova pasta no diretório atual em que seu projeto estará localizado. Ele também criará muitos dos arquivos necessários que você precisará para começar!

Aqui está a aparência do seu diretório depois de executar este comando:

meu projeto/
manage.py
meu projeto/
__init__.py
settings.py
urls.py
asgi.py
wsgi.py

Dentro de myproject pasta você encontrará uma manage.py arquivo, que é extremamente útil e fornece muitos utilitários úteis! Haverá outra pasta chamada myproject que será onde você definirá suas configurações para o projeto.

O diretório myproject / root externo é um contêiner para o seu projeto, o nome não importa e, se você achar isso confuso, poderá renomeá-lo para o que quiser.

O diretório myproject / interno é o pacote Python real para o seu projeto. Seu nome é o nome do pacote Python que você precisará usar para importar qualquer coisa dentro dele.

Os arquivos importantes a serem observados aqui são os myproject/settings.py, onde as configurações específicas do Django e do aplicativo estão definidas e as myproject/urls.py. o urls.py O arquivo é usado para criar URLs no seu site e apontá-los para um local para atender à solicitação. Esta imagem faz um ótimo trabalho ao explicar como o Django lida com solicitações:

sSrqigM9D JRg3XQg sh9WvtehX UKJnnOmygeIn4u8 Ht2xcv y0jZ1toPcg8mgoA4BIC 7Y14AG4DKKJ6CIV3IzON06BtmjLp cTyL8GJ7CvHRr odmE1Yofo0cGYzhuPbgXQI

Parabéns para Ryan Nevius por criar uma visualização tão maravilhosa.

o myproject/urls.py O arquivo descreve a resolução da URL para todo o site. Cada aplicativo que você adicionar ao seu site conterá seu próprio urls.py arquivo que descreve a resolução do URL nesse aplicativo específico.

Agora que você tem uma ideia do uso de alguns desses arquivos, vamos começar um projeto com os comandos do script do gerente.

Um comando a ser observado seria o startapp comando usado para criar um aplicativo dentro do seu projeto da mesma maneira que você criou o aplicativo. python manage.py startapp myapp criará uma nova pasta e alguns dos arquivos necessários para criar um novo aplicativo no seu projeto!

myapp /
__init__.py
admin.py
apps.py
migrações /
__init__.py
models.py
tests.py
views.py

A principal diferença aqui é a presença dos arquivos de modelos e visualizações, que são usados ​​para definir o banco de dados e a funcionalidade de front-end do aplicativo, respectivamente.

Modelos são classes que definem suas tabelas de banco de dados. Discutiremos os modelos com mais detalhes posteriormente neste tutorial.

As visualizações controlam a estrutura e a funcionalidade do front-end do aplicativo, recebendo uma solicitação da web e retornando uma resposta da web.

Provavelmente o comando mais importante a lembrar é o comando runserver:
python manage.py runserver. Isso executará seu projeto no host local na porta padrão, 8000.

É isso aí! Com três etapas simples, você verá uma página de destino bem-vinda, mostrando que a instalação funcionou.

przKJhywBTWAxqF7H1D7YbreiryXuAE4k1a 3ZmGQ0zu7ByEFTI LBW PsyBJlT7sUSmWXvycmlZcwAkK0QoOe

Há um tutorial extremamente bem escrito na Documentação do Django, que fornece um passo muito mais profundo do início de um projeto. Pode ser encontrado aqui: Iniciando um projeto

Como configurar modelos

Como muitas outras estruturas da web, o Django possui uma implementação do mapeamento objeto-relacional (ORM) conceito. No Django, essa implementação é chamada de modelos!

Modelos são um tópico muito importante para entender ao desenvolver um projeto no Django. Na forma mais básica, os modelos podem ser considerados como invólucros para tabelas de banco de dados.

Dito de forma diferente, um modelo Django é usado para definir seus dados. Ele contém os campos e comportamentos dos dados que você armazena. Cada modelo é mapeado para uma única tabela em seu banco de dados e os campos em seu modelo são mapeados para os campos em seu banco de dados.

Ao escrever modelos, você tem acesso a poderosos tipos de campos internos que fazem muito trabalho pesado para você. Esqueça de escrever o código SQL manualmente para construir seu banco de dados. Você pode simplesmente escrever uma classe de modelo e executar os comandos de migração para ter um script SQL totalmente funcional carregado no seu banco de dados.

CVP WO8s02EEdmC8 A0w6gbAFmH4AbZ5Z65XatAvx9j31rLjJ1oQMgW4EmBMTlOz0hRWjiybiqnYgadFVX4rlCKLBZGX8pEbhYKbsYwCXwEClo444j6eRt3UeTYurZPg047u5 LH

O Django oferece uma Modelo de Usuário como parte do sistema de autenticação integrado, que permite ignorar o lado de back-end de todo o login / inscrição e tratamento de senhas.

Ao projetar os modelos para o meu novo site, eu precisei dos três modelos a seguir:

  • Perfil – uma classe de wrapper em torno do modelo de Usuário para adicionar informações não relacionadas à autenticação (geralmente chamadas de Modelo de perfil)
  • Curso – para armazenar todas as informações sobre cada curso
  • Documento – um modelo que armazena informações sobre quais arquivos são atribuídos a cada curso. Eu queria especificamente fazer o upload de documentos Markdown, pois é como meu blog público já está construído

Aqui está um exemplo de modelo:

class Profile(models.Model):    user = models.OneToOneField(User, on_delete=models.CASCADE)    			    enrolled_courses = models.ManyToManyField(Course)

Um modo de perfileu é uma ferramenta útil para estender a funcionalidade do modelo de usuário existente para armazenar informações sobre o usuário, além de apenas dados de autenticação. No meu caso, eu criei um modelo de perfil chamado Perfil para armazenar em quais cursos o usuário está inscrito.

Aqui está o meu modelo de curso:

class Course(models.Model):       course_title = models.CharField(max_length=200)       course_description = models.CharField(max_length=500)       course_price = models.DecimalField(max_digits=10, decimal_places=2)

Meu modelo de curso é bastante direto, eu só precisava armazenar 3 informações sobre cada curso para logística, enquanto o conteúdo real do curso é tratado pelo modelo de documento.

class Document(models.Model):       course = models.ForeignKey(Course,on_delete=models.PROTECT)       file = models.FileField (upload_to=markdown_upload_location,default='default.md')

Aqui, aproveito algumas funcionalidades integradas do python, onde estou passando a função markdown_upload_location no FileField construtor.

Esta função é usada para determinar onde o arquivo que está sendo carregado deve ser armazenado no sistema de arquivos. Passar a função para o construtor permite que a função seja executada sempre que um novo arquivo é carregado, em vez de ser executado apenas uma vez e, em seguida, o mesmo resultado sendo usado novamente.

Essencialmente, quando um administrador (eu) carrega um novo curso no site, uma nova pasta é criada para esse curso e todos os arquivos de remarcação para esse curso são armazenados lá. Os registros do modelo de documento vinculam esses arquivos ao registro do curso no banco de dados.

Uma coisa que tirei da configuração desses modelos foi a facilidade com que o processo de criação do meu banco de dados se tornou. Longe vão os dias dos diagramas de MySQL Workbench e ERR, ou escrever SQL linha por linha e executar atualizações dolorosas nos esquemas.

Integrando pagamentos por faixas

Listra é uma plataforma usada por muitos sites em todo o mundo para receber pagamentos de clientes. É seguro, fácil de usar para os clientes e, o mais importante, é fácil para nós, desenvolvedores, configurar!

O preço também é bastante justo se comparado à concorrência, atualmente em 2,9% + 0,30 CAD por transação. Esse preço se aplica a pagamentos únicos, bem como a inscrições de assinaturas.

Para usar o Stripe como desenvolvedor, você deve criar uma conta e conferir as páginas dos desenvolvedores para revisar as opções. Eles possuem checkouts pré-criados, bibliotecas inteiras e SDKs para criar seu próprio checkout personalizado. O Stripe também fornece plugins preexistentes para estruturas da web (WordPress, Drupal, etc.)

Eu decidi usar o seu Verificação de saída ferramenta que é uma página de pagamento segura e hospedada pelo Stripe, que me permitiu evitar a criação de uma página de pagamento. Isso não apenas economiza o tempo de desenvolvimento da página de front-end para coletar informações de pagamento, mas também o aborrecimento de garantir o pagamento no back-end.

Hoje em dia, a segurança é um assunto imenso e os clientes desconfiam de onde entregam os detalhes do cartão de crédito. Portanto, para mim, usar o Stripe era um acéfalo. Não guardo nenhum dos detalhes do usuário. Em vez disso, eles são enviados diretamente para o Stripe, onde podem ser manuseados com segurança.

Com algumas linhas de código, pude importar o módulo de check-out Javascript pré-construído do Stripe. Aqui está a tag do script:

Aqui, a chave de dados é configurada para a chave pública Stripe, semelhante a qualquer chave de API do desenvolvedor. A descrição é o que aparecerá no seu painel do Stripe para o pagamento recebido e o valor é o número de centavos da compra. Essa inclusão simples importa essa página de pagamento como um modal no site:

ZoLSCpczDEDUwno0TaWc8jYVl4dTnBxnL1bZBMNjyVJ46UDPbP271hBWancYSPPWA9IDPZHxg6YWSEQEyrcIyNkb4eMpg5iIMHnl0NSJ1oiF4QZluZ8YarjqWStmUc3c0 2hvY3c

Depois que um cliente preenche as informações de pagamento, você só precisa agrupar as informações de pagamento em uma solicitação e enviá-las ao Stripe. Em seguida, o Stripe pode processar as informações e aprovar o pagamento em segundos.

# Send the charge to Stripecharge = stripe.Charge.create(    amount=amount,currency=currency,    description=f"Payment for course: {courseTitle}",    source=self.request.POST['stripeToken'])

Implantando meu novo site em uma instância do EC2

uRaS5Pqadp9Z

Quando terminei de desenvolver meu novo site no meu host local, precisei encontrar um local para implantá-lo. Eu tive alguma experiência com a AWS e já tinha uma conta, por isso tomou uma decisão fácil.

O Elastic Compute Cloud da Amazon – geralmente chamado de EC2 – permite uma abundância de configurações; simplesmente segui a configuração mais direta. Mais especificamente, uma máquina Ubuntu rodando em um servidor T2 Micro seria um amplo desempenho para este site.

Configurar o servidor foi a parte mais fácil da implantação. Configurei um servidor em menos de 10 minutos. Em seguida, tive que anexar um endereço IP elástico à instância e atualizar meus registros DNS em Rota53 (onde meu domínio mora).

Depois de configurar o servidor, tive que descobrir como serviria o site aos visitantes. Eu tive alguma experiência no passado com o Apache, então essa foi uma escolha natural. Acontece que o Apache e o Django se combinam muito bem!

O Django é servido via WSGI (Web Server Gateway Interface) – uma interface CGI rápida para Python, semelhante ao FPM do PHP, se você estiver familiarizado com isso. Em termos simples, o WSGI é uma camada entre o Django e o servidor da web que atua como uma interface para servir as páginas da web.

Como você já deve saber, o Python normalmente é executado dentro de um virtualenv. Isso cria um ambiente virtual no qual as dependências de um projeto específico podem viver sem interferir na versão do sistema do python.

Se você quiser aprender um pouco mais sobre o virtualenv, consulte o Guia do mochileiro para Python.

Basicamente, isso é importante apenas para definir as configurações do Apache. Para servir os arquivos corretamente, você precisa criar um Daemon WSGI para o seu projeto Django da seguinte forma:

# /etc/apache2/sites-available/mysite.conf:WSGIProcessGroup courses.nickmccullum.comWSGIDaemonProcess course python-path=/home/ubuntu/django/courses-website python-home=/home/ubuntu/django/courses-website-venvWSGIProcessGroup courseWSGIScriptAlias / /home/ubuntu/django/courses-website/courses-website/wsgi.py        ServerName courses.nickmccullum.com

Isso diz ao Apache para utilizar o daemon WSGI para servir adequadamente os arquivos do projeto Django. Depois que isso foi configurado, eu precisava reiniciar o Apache, aguardar as 24 horas necessárias para a atualização dos registros DNS e, em seguida – voila:

rPc HYj7M kwBTan4LUTk4pqkYBYsU4PKksK6gfYo0tV9WzX128fl67Iu0m xz2

Uma última etapa, eu precisava proteger meu site com SSL (Secure Socket Layer). Afinal, estou pedindo às pessoas que efetuem pagamentos no meu site, para que os clientes esperem que o site seja protegido!

A maneira mais simples de ativar o SSL em um site, na minha opinião, é através Permite criptografar. Eles oferecem uma ferramenta chamada Certbot gratuitamente, que pode ser ativado em seu servidor para renovar automaticamente um certificado de servidor e manter seu servidor funcionando com SSL 24 horas por dia, durante todo o ano!

É tão simples quanto as três etapas a seguir:

1. Instale o Certbot:

sudo apt-get install certbot python3-certbot-apache

NOTA: Este script examinará a configuração ServerName no arquivo de configuração do apache para criar o certificado. Verifique se você definiu isso antes de executá-lo!

2. Obtenha o certificado e diga ao certbot para atualizar a configuração apache automaticamente:

sudo certbot --apache

3. Teste a renovação automática:

sudo certbot renew --dry-run

Depois de configurar o SSL, você pode testar para garantir que o certificado foi instalado corretamente, verificando este site: https://www.ssllabs.com/ssltest/.

Depois de proteger meu site com SSL, abri as regras de segurança da instância do EC2 para permitir que o site seja público. Com o meu novo site em funcionamento na minha instância do EC2, agora posso vender meus cursos com segurança a clientes que desejam aprender sobre vários tópicos no desenvolvimento de software.

Pensamentos finais

Sou grato por toda a experiência adquirida ao longo deste projeto, desde a navegação em uma nova estrutura da web até a integração da API do Stripe, eu certamente aprendi muito! Aprender um novo tópico como o Django pode ser esmagador, mas senti que a documentação deles era muito forte em comparação com outras que já li (erhm, AWS).

Se eu desse um único conselho, diria que o recurso mais valioso de qualquer ferramenta é a documentação oficial. Isso é especialmente verdadeiro quando está bem escrito, mas não importa qual ferramenta você esteja usando, nunca tenha medo dos documentos e se acostume a lê-los para encontrar respostas para seus problemas!

Este artigo foi escrito por Nick McCullum, que ensina Pitão, Javascripte Data Science cursos em seu site.





Fonte