Como criar uma galeria de imagens usando Gatsby e Cloudinary

Como criar uma galeria de imagens usando Gatsby e Cloudinary

13 de October, 2020 0 By António César de Andrade


o JAMstack é uma arquitetura moderna de desenvolvimento web baseada em client-side JavaScript, reusable APIs e prebuilt Markup.

Os principais aspectos de um JAMstack aplicação são as seguintes:

  • Todo o aplicativo é executado em um CDN (ou ADN). CDN significa Content Delivery Network e ADN é uma Application Delivery Network.
  • Tudo vive em Git.
  • Construções automatizadas executado com um fluxo de trabalho quando os desenvolvedores enviam o código.
  • Implantação automática da marcação pré-construída para o CDN / ADN.
  • É praticamente Sem servidor. Para ser mais claro, não mantemos nenhum aplicativo do lado do servidor, mas sim fazemos uso de serviços já existentes (como e-mail, mídia, banco de dados, pesquisa e assim por diante).

E aqui está um fato engraçado: 70% – 80% dos recursos que antes exigiam um back-end personalizado agora podem ser feitos inteiramente no front-end.

Neste artigo, aprenderemos como construir um JAMstack aplicativo que tem:

E, finalmente, vamos implantá-lo em um CDN.

Então, o que estamos construindo hoje?

Vamos construir uma galeria de imagens. Amo filmes, então decidi criar uma galeria de imagens dos meus atores favoritos. Eu tenho um nome divertido para ele: imaginary.

Usaremos um serviço de gerenciamento de mídia chamado Cloudinary para hospedar e gerenciar nossas imagens. Ele também fornece APIs de desenvolvedor para fazer upload e buscar mídia, como imagens, vídeos e assim por diante

Usaremos um framework chamado Gatsby para construir o front-end da galeria de imagens. Gatsby é uma estrutura de código aberto baseada em React para a criação de sites e aplicativos.

Por fim, aprenderemos como implantar o aplicativo em um CDN com um processo automático de construção e implantação. Nós vamos usar Netlify CDN por esta.

No final do artigo, nosso imaginary o aplicativo terá a seguinte aparência:

Aplicativo Image Gallery – Final Look

TL; DR

Aprenderemos coisas com uma abordagem passo a passo neste artigo. Se você deseja acessar o código-fonte ou a demonstração mais cedo, aqui estão os links para eles.

Agora vamos começar.

Como configurar o Cloudinary

Primeiro, Crie a sua conta aqui com Cloudinary. Um plano gratuito é mais do que suficiente para nosso aplicativo de galeria de imagens.

Faça login usando as credenciais de sua conta para chegar ao Cloudinary painel de controle. Por favor, anote o Cloud name, API Key e, API Secret pois precisaremos deles em nosso aplicativo.

Em seguida, carregue as imagens de sua escolha para usá-las no image gallery. Você pode criar uma pasta e chamá-la do que quiser. No meu caso, eu o chamei artists e carregou as imagens nele.

Observe que usaremos este nome de pasta mais tarde, quando integrarmos Cloudinary com Gatsby.

Selecione cada uma das imagens e adicione um Title e Description. Usaremos esses dois bits de meta informação como legendas de imagem e texto alternativo, respectivamente, em nossa galeria de imagens.

Isso é tudo. Não compartilhe o segredo da API e a chave com ninguém. Vamos agora passar pela configuração necessária para Gatsby.

Como configurar o Gatsby

UMA gatsbynecessidades de projeto baseadas node.js trabalhar. Certifique-se de ter o Node.js instalado. Você pode baixar e instalar node.js a partir de aqui.

Uma instalação bem-sucedida mostrará a versão do Node usando este comando:

node -v

Crie um diretório de projeto

Crie um diretório de projeto para organizar o código-fonte. Vamos criar um diretório com o nome imaginary.

mkdir imaginary

cd imaginary

Inicialize o projeto

Existem muitos projetos iniciais para criar um gatsby aplicativo. Embora os projetos iniciais simplifiquem muitas complexidades, ao mesmo tempo podem ser um pouco opressores para um aplicativo simples como o nosso.

Tendo isso em mente, vamos inicializar um simples gatsby projeto por nós mesmos.

Abra um prompt de comando e digite o seguinte comando para inicializar um projeto compatível com Node.js.

npm init -y

Gatsby: instalação e configuração inicial

Instale o gatsby-cli ferramenta globalmente. Esta ferramenta nos ajudará a trabalhar com o ambiente Gatsby.

 npm install -g gatsby-cli

Instale as dependências Gatsby, React e ReactDOM. Você pode usar o npm install comando como acima ou o yarn add comando se você tiver o yarn instalado.

 yarn add gatsby react react-dom

Vamos também adicionar um .gitignore arquivo com o seguinte conteúdo:

.cache
public
node_modules
*.env

Opcionalmente, você pode criar um arquivo README.md e LICENSE. Nesta fase, nosso projeto deve ter estas pastas e arquivos:

Gatsby projetos precisam de um arquivo de configuração especial chamado gatsby-config.js. Neste momento, precisaremos de um arquivo vazio. Crie um arquivo chamado gatsby-config.js com o seguinte conteúdo:

 module.exports = {
  // keep it empty    
 }

Agora é hora de criar nossa primeira página com Gatsby. Crie uma pasta chamada src na raiz da pasta do projeto. Crie uma subpasta chamada pages sob src. Crie um arquivo chamado index.js sob src/pages com o seguinte conteúdo:

import React from 'react';    

  export default () => {    
   return (
      <>    
        <h1>Images to load here...</h1>
      </>        
    )    
  }

Nesta fase, os arquivos e pastas do nosso projeto devem ter a seguinte aparência:

Vamos correr

Tente o seguinte comando no prompt de comando para executar o aplicativo localmente:

gatsby develop

Por padrão, um gatsby aplicativo é executado no 8000 número da porta. Abra seu navegador favorito e acesse o app @ http: // localhost: 8000.

Você deve vê-lo funcionando como na captura de tela abaixo:

Isso é tudo. Agora, nós temos ambos Cloudinary e Gatsby configurado com sucesso. É hora de reuni-los.

Cloudinary e Gatsby, a história da reunião

o Gatsby framework tem um grande suporte da comunidade e há muitos plug-ins para satisfazer necessidades críticas. No início de 2020, o Cloudinary equipe introduziu dois plug-ins Gatsby super legais para a comunidade dev:

Como estamos interessados ​​apenas em buscar as imagens para a galeria de imagens aqui, vamos apenas instalar o gatsby-source-cloudinary plugar.

Também instalaremos um pacote de utilitário chamado dotenv para lidar com as variáveis ​​de ambiente (chave secreta, chave de API e assim por diante) localmente.

Vamos instalá-los. Abra um prompt de comando e use o seguinte comando:

yarn add dotenv gatsby-source-cloudinary

Agora, siga estas etapas para buscar as imagens em nosso aplicativo.

  1. Crie um .env arquivo na raiz da pasta do projeto e adicione o seguinte conteúdo a ele. Observe que os valores no key-value pares estão disponíveis no Cloudinary painel como vimos antes.

CLOUDINARY_CLOUD_NAME=<YOUR_CLOUDINARY_NAME>
CLOUDINARY_API_KEY=<YOUR_CLOUDINARY_API_KEY>
CLOUDINARY_API_SECRET=<YOUR_CLOUDINARY_API_SECRET>

2. Edite o gatby-config.js arquivo para adicionar o seguinte conteúdo:


require('dotenv').config();

module.exports = {
    
    plugins:[
        {
            resolve: `gatsby-source-cloudinary`,
            options: {
              cloudName: process.env.CLOUDINARY_CLOUD_NAME,
              apiKey: process.env.CLOUDINARY_API_KEY,
              apiSecret: process.env.CLOUDINARY_API_SECRET,
              resourceType: `image`,
              prefix: `artists/` ,
              context: true,
              tags: true,
              maxResults: 50
            }
          }
    ]

}

Existem algumas coisas acontecendo aqui. Estamos contando gatsby para usar o gatsby-source-cloudinary plug-in com alguns parâmetros.

Os parametros cloudName, apiKey e apiSecret são buscados no .env arquivo usando o dotenv pacote. Nós também especificamos o resourceType valor como image já que não estamos interessados ​​em buscar outros tipos de mídia.

o prefix o valor do parâmetro deve ser igual ao nome da pasta da imagem em Cloudinary.

Nós especificamos context e tags como true para buscar os metadados contextuais e as informações de marca de uma imagem. Também definimos o maxResults como 50 para que não fiquemos limitados com o valor padrão de 10.

3. Em seguida, crie uma pasta chamada components sob src e criar um arquivo chamado Gallery.js dentro dele. Gatsby usa graphQL para consultar os dados de várias fontes, como markdown, JSON e Excel.

No nosso caso, vamos usar Cludinary como uma fonte para consultar as imagens usando o gatsby-source-cloudinary plug-in já configurado.

4. Agora edite o Gallery.js arquivo e adicione o seguinte conteúdo:


import React from 'react';
import {useStaticQuery, graphql} from 'gatsby';

const Gallery = () => {
    const data = useStaticQuery(
        graphql`
        query CloudinaryImage {
            allCloudinaryMedia {
            edges {
                node {
                    secure_url
                    context {
                        custom {
                            alt
                            caption
                        }
                    }
                    resource_type
                }
            }
            }
        }`
    );
    const images = data.allCloudinaryMedia.edges;
    return (
        <div className="container">
            {images.map((image, index) => (
                <figure className="wave" key={`${index}-image`}>
                    <img 
                        src={image.node.secure_url} 
                        alt={image.node.context.custom.alt} >
                    </img>
                    <figcaption>{image.node.context.custom.caption}</figcaption>
                </figure>
                ))
            }
        </div>
    )
};

export default Gallery;

Como vimos acima, usamos um graphQL consulta para buscar os caminhos da imagem de origem e as informações de contexto. Usamos as informações para percorrer e adicionar as imagens com uma legenda.

5. A próxima etapa é editar o index.js arquivo para importar o Gallery.js arquivo e usá-lo.

import React from 'react';
import Gallery from '../components/Gallery';

export default () => {    
    return (
      <>    
        <Gallery />
      </>        
    )    
}

Se você estiver executando o gatsby develop já, pare e execute-o novamente. Acesse o aplicativo novamente no navegador. Você deve ver o aplicativo com todas as imagens obtidas de Cloudinary.

Mas espere, não parece tão elegante como foi prometido. Temos que fazer algum css trabalho aqui.

Crie um arquivo chamado gallery.css sob a pasta srccomponents e adicione o seguinte conteúdo nele:

body {
    background: #000000 url("https://res.cloudinary.com/atapas/image/upload/v1602214656/misc/6284_n48wtw.jpg") repeat-x center top;
    color: #FFFFFF;
}

.container {
    margin-top: 55px;
}

.wave {
    float: left;
    margin: 20px;
    animation: wave 
               ease-in-out 
               1s 
               infinite 
               alternate;
    transform-origin: center -20px;
}

.wave:hover {
    animation-play-state: paused;
}

.wave img {
    border: 5px solid #f8f8f8;
    display: block;
    width: 200px;
    height: 250px;
    background-color: #000;
}

.wave figcaption {
    text-align: center;
}

.wave:after{
    content: '';
    position: absolute;
    width: 20px; 
    height: 20px;
    border: 1.5px solid #ffffff;
    top: -10px; 
    left: 50%;
    z-index: 0;
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
}

.wave:before{
    content: '';
    position: absolute;
    top: -23px;
    left: 50%;
    display: block;
    height: 44px;
    width: 47px;
    background-image: url(https://res.cloudinary.com/atapas/image/upload/v1602212639/misc/screw-head_oglfcu.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    z-index: 16;
}

@keyframes wave {
    0% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}

6. Importe o gallery.css arquivo no Gallery.js arquivo como

import './gallery.css';

Isso é tudo. Você deve ver o aplicativo com uma aparência muito melhor do que antes, como se as imagens estivessem penduradas em uma parede com animações.

Vamos implantar o aplicativo

A última etapa é implantar o aplicativo publicamente para que possamos exibi-lo.

Primeiro, crie um repositório no GitHub e envie o código-fonte. Em seguida, crie uma conta com Netlify Entrar.

Siga estas etapas simples para implantar seu aplicativo no Netlify CDN com suporte integrado de CI / CD.

  • Crie um novo site a partir do Git

Novo site do Git

  • Autentique-se em seu Github conta e selecione o projeto da galeria de imagens. No meu caso, o nome do projeto é imaginary.

Crie um novo site

  • Na próxima etapa, forneça informações sobre o comando build como gatsby build e publicar o diretório como public/.

Parâmetros para o site

  • Em seguida, clique no Site settings contar netlify sobre a Cloudinary nome da nuvem, chave secreta, chave de API e assim por diante.

Configurações do site

  • Navegue até o Environment opção e clique no Edit variables botão.

Adicionar variáveis ​​de ambiente

  • Adicione três variáveis ​​conforme mostrado abaixo com os valores mostrados em seu Cloudinary painel de controle.

Adicione todos eles

  • Navegue até o Deploys opção e acionar uma nova implantação.

Acione uma nova implantação

Opcionalmente, para alterar o nome do site

Agora terminamos. Temos o aplicativo instalado e funcionando publicamente.

Em suma

Espero que você tenha gostado de ler este artigo. Em um artigo futuro, veremos como usar o outro plug-in gatsby-cloudinary para fazer upload de uma imagem para o Cloudinary servidor para adicionar à nossa galeria de imagens.

Você também pode gostar destes artigos:

Se este artigo foi útil, compartilhe-o para que outras pessoas também possam lê-lo. Você pode me @ no Twitter (@tapasadhikary) com comentários ou fique à vontade para me seguir.





Fonte

Click to rate this post!
[Total: 0 Average: 0]