Как создать галерею изображений с помощью GATSBY и County

Автор оригинала: TAPAS ADHIKARY.

Согласно Mathias Biilmann, генеральный директор & соучредителем NetLify, «The jamstack – это современная архитектура веб-разработки на основе JavaScript к клиентам, многоразовым API и предварительному размеру».

Ключевые аспекты JamStack Приложение следующие:

Все приложение работает на CDN (или ADN) Отказ Стенды CDN для сети доставки контента и ADN – это сеть доставки приложений.
Все в Гит Отказ
Автоматизированные сборки Беги с рабочим процессом, когда разработчики нажимают код.
Есть Автоматическое развертывание предварительной накладки на CDN/ADN.
Это практически Смертный Отказ Чтобы поставить его более четко, мы не поддерживаем какие-либо серверные приложения, а скорее используем уже существующие услуги (например, электронные средства, медиа, базы данных, поиск и т. Д.).

И вот забавный факт: многие функции, которые когда-то потребовались, нестандартный задний конец, теперь можно сделать полностью на переднем конце.

В этой статье мы узнаем, как построить JamStack Приложение, которое имеет:

служба API для обслуживания медиафайлов,
и а Статический генератор сайта (SSG) создать предварительно созданную разметку.

И, наконец, мы разверним его через CDN.

Итак, что мы строим сегодня?

Мы построим галерею изображений. Я люблю фильмы, поэтому я решил создать картинку галереи моих любимых актеров. У меня есть веселое имя для этого: воображаемый Отказ

Мы будем использовать Службу управления СМИ под названием Главарное провести и управлять нашими изображениями. Он также предоставляет разработчику API для загрузки и извлечения носителей, таких как изображения, видео, и так далее

Мы будем использовать рамки под названием GATSBY Чтобы создать передний конец галереи изображения. GATSBY Является ли структура открытых источников на основе RACT для создания веб-сайтов и приложений.

Наконец, мы узнаем, как развернуть приложение к CDN с помощью автоматического процесса сборки и развертывания. Мы будем использовать NetLify CDN за это.

В конце статьи наша воображаемый Приложение будет выглядеть так:

TL; доктор

Мы узнаем вещи с пошаговым подходом в этой статье. Если вы хотите перейти в исходный код или демонстрацию раньше, вот ссылки на них.

Вы можете получить доступ к изображению Галерея Demo отсюда: http://imaginary.netlify.app/
Весь исходный код, используемый в этой статье, находится в моем репо GitHub. Не стесняйтесь следовать за ним, так как я часто обновляю исходный код. Если вам понравилась работа, пожалуйста, поддержите ее звездой. https://github.com/atapas/imaginary/tree/1-freeCodeCamp-poc.

Теперь давайте начнем.

Как настроить облачный

Во-первых, Создать учетную запись с Главарное Отказ Свободный план более чем достаточно для нашей галерее изображений.

Войдите в систему, используя учетные данные с учетной записью, чтобы добраться до Главарное панель приборов. Пожалуйста, обратите внимание на Облачное имя , Ключ API и, API Secret Как нам понадобится в нашем приложении.

Далее загрузите изображения по вашему выбору, чтобы использовать их в Галерея изображений Отказ Вы можете создать папку и позвонить ему, что хочешь. В моем случае я назвал это Художники и загрузил изображения в него.

Обратите внимание, что мы будем использовать имя этой папки позже, когда мы интегрируем Главарное с GATSBY Отказ

Пожалуйста, выберите каждый из изображений и добавьте Название и Описание Отказ Мы будем использовать эти два бита мета-информации в качестве подписи изображения и Alt-Text, соответственно, в нашей галерее изображений.

Вот и все. Пожалуйста, не делитесь секретом API и ключом с кем угодно. Давайте теперь пройдемся через необходимую настройку для GATSBY Отказ

Как настроить GATSBY

А GATSBY -Базированные проекты нужны node.js работать. Убедитесь, что у вас установлены Node.js. Вы можете скачать и установить node.js от здесь Отказ

Успешная установка покажет версию узла, используя эту команду:

node -v

Создайте каталог проекта

Создайте каталог проекта для организации исходного кода. Давайте создадим каталог с именем воображаемый Отказ

mkdir imaginary

cd imaginary

Инициализировать проект

Есть много Стартерские проекты создать GATSBY приложение. Хотя старшие проекты упрощают многие сложности, в то же время они могут быть немного подавляющими для простого приложения, как наше.

Сохранение этого в виду, мы инициализируем простой GATSBY Проект самим собой.

Откройте командную строку и введите следующую команду для инициализации поддерживаемого проекта Node.js:

npm init -y

GATSBY: установка и начальная настройка

Установите GATSBY-CLI Инструмент глобально. Этот инструмент поможет нам работать с окружающей средой GATSBY.

 npm install -g gatsby-cli

Установите зависимости GATSBY, RECT и взаимодействия. Вы можете либо использовать NPM установить команда как выше или пряжа Добавить Команда, если у вас установлена пряжа.

 yarn add gatsby react react-dom

Давайте также добавим .gitignore Файл со следующим контентом:

.cache
public
node_modules
*.env

Вы можете необязательно создать файл readme.md и лицензию. На этом этапе наш проект должен иметь эти папки и файлы:

GATSBY Проекты нуждаются в специальном файле конфигурации под названием gatsby-config.js Отказ В это время нам понадобится пустой файл. Создать файл с именем gatsby-config.js Со следующим контентом:

 module.exports = {
  // keep it empty    
 }

Теперь пришло время создать нашу первую страницу с GATSBY Отказ Создать папку с именем SRC в корне папки проекта. Создать подпункту с именем Страницы под SRC Отказ Создать файл с именем index.js под SRC/страницы Со следующим контентом:

import React from 'react';    

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

На этом этапе наши файлы и папки проекта должны выглядеть следующим образом:

Давайте запустим

Попробуйте следующую команду в командной строке, чтобы запустить приложение локально:

gatsby develop

По умолчанию A GATSBY Приложение работает на 8000 номер порта. Откройте свой любимый браузер и получите доступ к приложению @ http://localhost: 8000 Отказ

Вы должны увидеть, как он работает так, как будто вы видите на экране, который ниже:

Вот и все. Теперь мы получили обоих Главарное и GATSBY успешно настроить. Пришло время привлечь их вместе.

Countrary & Gatsby, становится история

GATSBY Рамки имеет огромную поддержку сообщества, и есть много плагинов, чтобы удовлетворить критические потребности. В начале 2020 года Главарное Команда Введен два супер крутых плагинов GATSBY к сообществу Dev:

GATSBY-SOURCE-HELORARY – Помогает принять хранимые изображения в состоянии сборки из House Mornary до приложения GATSBY/сайта.
Гэтсби-трансформатор - облачный – Помогает загрузку локальных изображений из приложения GATSBY/сайта до Countrary.

Поскольку нас интересуют только для получения изображений в галерее изображений здесь, мы просто установим GATSBY-SOURCE-HELORARY плагин.

Мы также установим коммунальный пакет под названием Доценв Для обработки переменных среды (секретный ключ, ключ API и т. Д.) Локально.

Давайте установим их. Откройте командную строку и используйте следующую команду:

yarn add dotenv gatsby-source-cloudinary

Теперь следуйте этим шагам, чтобы извлечь изображения в наше приложение.

Создать .env Файл в корневой папке проекта и добавьте его следующий контент. Обратите внимание, что значения в Ключевое значение Пары доступны в Главарное Приборная панель, как мы видели раньше.

CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=

2. Отредактируйте gatby-config.js Файл добавить следующий контент:

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
            }
          }
    ]

}

Здесь есть несколько вещей. Мы говорим GATSBY использовать GATSBY-SOURCE-HELORARY плагин с несколькими параметрами.

Параметры CloudName , Apikey и Apisecret извлечены из .env Файл с использованием Доценв упаковка. Мы также указываем ResourceType ценность как изображение Поскольку мы не заинтересованы в получении других типов СМИ.

префикс Значение параметра должно совпадать с именем папки изображения в Countrary.

Мы указываем контекст и Теги Например, чтобы получить контекстные метаданные и тег информацию о изображении. Мы также устанавливаем MaxResults Как 50, так что мы не ограничены значением по умолчанию 10.

3. Далее создайте папку под названием Компоненты под SRC и создать файл под названием Галерея.js внутри него. GATSBY использует graphql Чтобы запросить данные из различных источников, таких как Markdown, Json и Excel. В нашем случае мы будем использовать Клюдаминированное В качестве источника для запроса изображений с использованием GATSBY-SOURCE-HELORARY настроен плагин уже.

4. Теперь отредактируйте Галерея.js Файл и добавьте следующий контент:

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 (
        
            {images.map((image, index) => (
                
                    
                    
                    {image.node.context.custom.caption}
                
                ))
            }
        
    )
};

export default Gallery;

Как мы видим выше, мы используем graphql Запрос, чтобы получить исходные пути изображения и контекстную информацию. Мы используем информацию для цикла и добавления изображений с подписью.

5. Следующий шаг – редактировать index.js Файл для импорта Галерея.js Файл и используйте его.

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

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

Если вы используете GATSBY Развивается Уже, пожалуйста, остановите его и запустите его снова. Доступ к приложению снова в браузере. Вы должны увидеть приложение со всеми изображениями, извлеченными из Главарное Отказ

Но подождите, это не выглядит так элегантно, как было обещано. Мы должны сделать некоторые CSS работать здесь.

Создайте файл под названием Gallery.csss Под папкой SRC \ Компоненты и добавьте следующий контент в нем:

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. Импортируйте Gallery.csss файл в Галерея.js файл как

import './gallery.css';

Вот и все. Вы должны увидеть приложение, глядя намного лучше, чем раньше, как будто изображения висят от стены с анимацией в них.

Давайте разверним приложение

Последний шаг – публично развернуть приложение, чтобы мы покажем это.

Во-первых, создайте репозиторий в GitHub и нажмите исходный код. Затем создайте учетную запись с помощью NetLify чтобы залогиниться.

Следуйте этим простым шагам для развертывания вашего приложения в NetLify CDN со встроенной поддержкой CI/CD.

Создайте новый сайт из Git
Аутентифицироваться на ваш Github Учетная запись и выберите проект галереи изображения. В моем случае название проекта является воображаемый Отказ
На следующем шаге предоставьте информацию о команде сборки как Гэтсби построить и опубликовать каталог как публично/ Отказ
Затем нажмите на Настройки сайта сказать NetLify о Главарное Облачное имя, секретный ключ, API-ключ и так далее.
Просмотрите Окружающая среда Опция и нажмите на Редактировать переменные кнопка.
Добавьте три переменных, как показано ниже со значениями, показанными в вашем Главарное панель приборов.
Просмотрите Развертывание Опция и вызвайте свежие развертывание.
Вы можете изменить имя сайта для чего-то, что соответствует вашим потребностям. В моем случае это https://imaginary.netlify.app/ :

Теперь мы закончили. У нас есть приложение вверх и проводится публично.

В итоге

Надеюсь, вам понравилось читать эту статью. В будущей статье мы увидим, как использовать другой Gatsby-Doublerary Plug-in, чтобы загрузить изображение на Главарное Сервер, чтобы добавить в нашу картинку галерею.

Вы также можете понравиться эти статьи:

Если эта статья была полезна, пожалуйста, поделитесь этим, чтобы другие могли прочитать его также. Вы можете у меня в Twitter ( @tapasadhary ) с комментариями или не стесняйтесь следовать за мной.