Uso de Mídia do AWS S3

No capítulo anterior, criamos um bucket e o configuramos de acordo com nossas necessidades. Agora, vamos aprender como fazer upload e usar arquivos de mídia em nosso bucket.

Primeiro, precisamos abrir a aba Objects e clicar no botão Upload:

Seremos apresentados a um menu onde podemos selecionar arquivos ou uma pasta contendo arquivos para upload. Atualmente, para nós, o S3 opera de forma semelhante ao Google Drive, por exemplo.

Nota

Google Drive também é um serviço de armazenamento em nuvem, mas oferece um conjunto menor de ferramentas para trabalhar com dados. Portanto, para programação, o AWS S3 é muito mais comumente usado, e é exatamente isso que estamos fazendo.

Você precisa selecionar qualquer imagem e fazer o upload para a plataforma; no nosso caso, será uma foto de uma tartaruga.

Após o upload, abrimos o arquivo enviado, e as seguintes informações aparecem:

A propósito, é assim que nossa tartaruga se parece:

Como usar esta imagem em nossos projetos?

Para usar este arquivo, já configuramos o bucket corretamente para que possamos acessá-lo de qualquer fonte.

Vamos escrever uma pequena página HTML com um espaço para esta foto.

Podemos inserir a foto usando um link na tag <img> em HTML.

O código para esta foto ficará assim:

Como você pode ver, quando o código é executado, a foto desta tartaruga é exibida para nós.

Tudo o que fizemos foi escrever um link para a imagem da nossa tartaruga na tag HTML.

Nota

Observe que a foto desta tartaruga não está nos arquivos deste site, e ela pode não ser baixada localmente no seu dispositivo. Este arquivo está armazenado no AWS S3, de onde o acessamos e o exibimos em qualquer página.

Você também pode acessar diretamente esta imagem seguindo este link.

Agora, vamos escrever uma pequena página HTML onde descrevemos a tartaruga e damos ao usuário a oportunidade de alimentá-la.

O código ficará assim:

Para sua conveniência, também adicionei o código para a página da tartaruga a um bloco no site:

Assim, podemos incorporar vários meios de comunicação que carregamos para o S3 em nossas páginas HTML, assim como fizemos com a imagem da tartaruga. Basta inserir o link da imagem na tag img, e obtemos o resultado.

Ótimo trabalho!