Создание прогрессивного приложения для блога с помощью Apollo и Cosmic JS

Привет незнакомец. Отправляйтесь со мной в небольшое приключение, пока мы создаем быстрый и простой интерфейс для публикации статей в стиле блога. Что-то разумное. Он должен выглядеть чистым и простым, но при этом иметь возможность выполнять мощную выборку ресурсов с помощью некоторой магии запросов. Я говорю о Graphql, языке запросов, созданном с учетом веб-API. Говоря о веб-API, мы также будем использовать нашу удобную службу управления контентом: Cosmic JS для создания и хранения данных нашего блога.

TLDR:

Прогрессивный блог Аполлона
Кодовая база блога Progressive Apollo

0.0 Прежде чем начать

Прежде чем идти дальше, убедитесь, что на вашем компьютере установлены необходимые инструменты разработчика. В основном вам понадобится Узел JS , сопровождающий его менеджер пакетов: нпм** , а также мерзавец. Git** не является обязательным и будет использоваться только для хранения и развертывания кода, если это ваша цель.

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

0.1 Библиотеки и пакеты

Давайте рассмотрим основные пакеты, которые мы будем использовать для создания нашей платформы для блогов.

  • Создать React-приложение — Мы будем использовать популярную библиотеку React для создания наших компонентов пользовательского интерфейса. Для загрузки нашего проекта мы также будем использовать удобный инструмент командной строки. создать-восстановить-приложение так что мы можем потратить как можно меньше времени на настройку и настройку и просто приступить к созданию осмысленного javascript.

  • Семантический интерфейс— Это структура пользовательского интерфейса, которая позволит нам импортировать полностью стилизованные компоненты пользовательского интерфейса. Не нужно возиться с утомительными спецификациями CSS, чтобы сразу получить что-то красивое.

  • Аполлон/Графкл — Эти два пакета идут рука об руку. Аполлон будет использоваться в качестве клиента Graphql для выполнения запросов к конечным точкам нашего сервера Graphql. Его легко настроить и очень просто использовать. Опять же, это позволяет нам сосредоточиться на написании меньшего количества javascript и вместо этого сосредоточиться на высокоуровневой композиции нашего приложения. Графкл конечно, позволит нам делать запросы, которые возвращают только те данные, которые нам нужны, позволяя нам эффективно получать контент из Cosmic JS.

Я верю, что со всеми этими скучными делами мы можем начать хлопать по клавишам!

1.0 Настройка нашего проекта

Давайте запустим наш терминал и начнем загружать исходные файлы нашего проекта. Для тех, у кого нет Создать React-приложение установлен, мы можем сделать это с помощью простой команды npm:

$npm install -g create-react-app

Как только это закончится (или у вас уже установлен этот пакет), мы можем вызвать наши исходные файлы проекта, запустив cli:

$create-react-app apollo-blog

Вы заметите, что в вашем терминале происходит довольно много волшебства, поскольку наше приложение загружено всевозможными мощными библиотеками и исходным кодом. Взглянув на нашу файловую систему, вы увидите каталог с названием apollo-blog. Изменение каталогов в этой папке покажет структуру, подобную этой:

apollo-blog/
    README.md 
    node_modules/
    package.json
    public/
        index.html
        favicon.ico
    src/
        App.css
        App.js
        App.test.js
        index.css
        index.js
        logo.svg

Теперь мы должны иметь возможность запускать:

$npm start

или же

$yarn start

Это запустит сценарий запуска, хранящийся в нашем package.json файл, который связан вместе с Webpack и инструментами сборки, которые будут компилировать весь наш исходный код React и объединять его в файлы, готовые для обслуживания в браузере.

После запуска сценария вы должны увидеть простое сообщение в своем терминале, а ваш браузер по умолчанию должен открыть вкладку с запущенным проектом. Вы должны увидеть что-то вроде этого:

1.1 Установка библиотек Javascript

Следующим шагом является установка некоторых библиотек npm, которые помогут быстро создать красивый интерфейс приложения, а также легко получать данные с графических серверов Cosmic JS.

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

$npm install --save apollo-boost react-apollo graphql dotenv semantic-ui-css semantic-ui-react react-router-dom

аполлон-буст / реакция-аполлон / graphql — Эти ребята будут служить основным решением для эффективной и масштабируемой передачи наших данных с серверов Cosmic JS в наш клиентский пользовательский интерфейс. Они предоставляют обертки для наших компонентов, чтобы иметь возможность настраивать запросы и предоставлять полезные переменные для загрузки данных и обработки ошибок.

дотенв — этот пакет позволит настроить получувствительные ключи, поэтому нам не нужно ничего публично хранить для доступа к нашему Cosmic JS Bucket.

семантический-пользовательский интерфейс-CSS / семантический-пользовательский интерфейс-реагировать — Наша структура пользовательского интерфейса, которая позволит нам импортировать предварительно стилизованные контейнеры и компоненты, что позволит нам сосредоточиться на функциях программирования, тратя меньше времени на возню с CSS и другими соображениями стиля.

реакция-маршрутизатор-дом — Библиотека реагирования, которая позволит нам настроить логику маршрутизации URL-адресов для управления связыванием в нашем приложении и доступом к параметрам URL-адреса.

с их установкой мы можем начать писать javascript!

1.2 Настройка переменных среды

Мы собираемся добавить минимальную меру безопасности, чтобы любой запрос не проходил через конечную точку API нашей корзины, не стесняйтесь пропустить этот раздел, но имейте в виду, что ваши компоненты будут вести себя немного по-другому, и ваша корзина может быть запрошена из любой, кто знает, как делать запросы API. Итак, вы знаете… не кладите конфиденциальную информацию в свои корзины.

Нам потребуется read_key прикрепляться к каждому запросу API к нашему ведру. Вам нужно будет сгенерировать его, перейдя на вкладку настроек корзины Cosmic JS и нажав «Основные настройки». Космический JS > Ваше ведро > настройки > главный.

Вверху должен быть раздел под названием Доступ к API > Ключ доступа для чтения API. Нажмите на кнопку, чтобы Создать новый ключ. Скопируйте ключ в буфер обмена и давайте настроим каталог нашего проекта с помощью нашего конфигурационного файла:

$touch .env

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

просто добавьте одну строку в ваш файл .env:

конфигурация среды

Убедитесь, что вы добавляете префикс к имени переменной REACT_APP! Сценарии сборки, которые объединяют наш исходный код, будут искать это, чтобы сделать переменные доступными в нашем скомпилированном javascript. После этого мы готовы использовать этот ключ в нашем проекте React.

2.0 Создание наших маршрутов и компонентов

Наконец, мы готовы создать наши компоненты и настроить наши маршруты. Чтобы все было как можно проще, мы просто создаем два маршрута и два основных компонента:

Маршруты

Составные части

2.1 Настройка App.js

Давайте продолжим и откроем App.js компонент в любом текстовом редакторе, который вы предпочитаете, и начните настраивать его с нашей логикой маршрутизации и нашим Графкл клиент.

Мы собираемся импортировать одну оболочку компонента из реагировать-аполлон и одна функция-конструктор, которая позволит компонентам внутри нашей оболочки компонента делать запросы к указанному серверу Graphql (для нас это будет сервер Graphql Cosmic JS).

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

Наконец, мы собираемся импортировать файл CSS из Семантический интерфейс чтобы мы могли использовать его селекторы классов и придавать импортированным компонентам их базовые стили.

Вот что у нас App.js должно выглядеть после того, как все правильно настроено:

настройка app.js

2.2 Создание основного вида

Давайте создадим новый файл в новом каталоге

src/views/home.js

В этой папке будут храниться все компоненты React нашего слоя представления. Наш домашний вид просто вернет краткую информацию о нашем сайте и список статей, которые были опубликованы в нашем блоге.

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

Нам также потребуется настроить это представление с помощью некоторых Графкл логика, чтобы он мог делать запросы к Cosmic JS.

Компонент домашнего просмотра

Теперь у нас есть старый компонент React, который будет извлекать статьи из нашего контент-менеджера (Cosmic JS) до того, как компонент отобразится, и передавать их в виде массива в свойствах компонента.

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

2.3 Создание представления статьи

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

Давайте создадим еще один файл в нашем Просмотры каталог:

src/views/article.js

Создание этого компонента похоже на Home View, но наш запрос будет включать идентификатор статьи из нашего URL-адреса, хранящегося в реквизите: соответствие который реакция-маршрутизатор-дом создает для нас, когда мы визуализируем компонент в Маршрут.

Компонент представления статьи

Этот компонент намного проще, чем наш компонент Home, в основном из-за того, что мы просто используем Запрос оболочка компонента вместо того, чтобы превращать наш компонент в компонент более высокого уровня, используя Графкл обертка. Это дает нам доступ к нашему Графкл объекты и логические значения непосредственно в логике нашего компонента, но не делает его доступным для компонентного реквизита! Так что примите к сведению.

Для обоих компонентов я включил в исходный код несколько минимальных объектов стилей, но не стесняйтесь использовать свое творчество и изменять свойства стилей, чтобы создать свой собственный внешний вид.

Вот и все! Мы создали два относительно простых и масштабируемых компонента React, настроенных на два отдельных маршрута URL. Мы можем легко контролировать наши взгляды с помощью реакция-маршрутизатор-дом и разумно извлекать наши данные с помощью силы Аполлон/Графкл а также Космический JS.

3.0 Развертывание

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

3.1 Запуск скрипта сборки

Если вы посмотрите на пакет.json файл, в котором у нас есть скрипт с именем строить. Запустив это, вы скомпилируете все файлы вашего проекта и соберете их в статический каталог сборки, который готов к развертыванию на любой службе хостинга.

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

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

3.2 Развертывание с использованием Netlify и Github

Нетлайф предоставляет услуги по созданию и развертыванию приложений, и они предоставят вам бесплатный (если не немного подробный) URL-адрес для развертывания кода на стороне клиента. Процесс довольно прост, и мы можем использовать репозиторий github для непрерывного развертывания нашего кода, когда мы вносим изменения в наш исходный код.

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

Нажав на места Вкладка покажет список сайтов, которые вы развернули на Netlify. Отсюда у вас есть два варианта:

  1. Развертывание с использованием каталога статической сборки, созданного с помощью строить сценарий.
  2. Подключите свою учетную запись Netlify к репозиторию git и используйте непрерывное развертывание. Этот шаг требует, чтобы вы передали свой код в репозиторий git.

Развернуть статический каталог сборки очень просто, но вам потребуется вручную собрать и загрузить файлы в Netlify. Просто перетащите каталог сборки прямо в область внизу вкладки сайтов с панели управления Netlify.

Это автоматически развернет ваш сайт на URL-адрес, который сгенерирует Netlify. Простой, но требует работы каждый раз, когда вы обновляете исходный код.

В крайнем правом углу будет кнопка с надписью Новый сайт от Git. Выбор этой опции проведет вас через процесс авторизации Netlify для доступа к репозиторию кода. После того, как эти шаги будут завершены, Netlify соберет файлы вашего сайта из указанного вами сценария сборки и будет автоматически развертывать его каждый раз, когда вы делаете фиксацию в своем репозитории!

Вывод

Ну, это для меня сегодня. Удачного взлома, пока мы не встретимся снова 😃

Если у вас есть какие-либо комментарии или вопросы о создании приложений с помощью Cosmic JS, свяжитесь с нами в Twitter а также присоединиться к беседе в Slack.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *