У меня много связей с командами, частью которых я был, - это один из способов, которым я остаюсь с ними на связи. Что еще более важно, я получаю от этого большое удовлетворение; обмен инструментами, которые делают чью-то работу более приятной и / или интересной, - это здорово. Я чувствовал, что было бы целесообразно сохранить общедоступную зону, где я мог бы делиться всем своим дизайнерским вдохновением и полезными сведениями, которые я собрал. Обычно я публикую их в Твиттере, но я также видел в этом возможность протестировать Next.js. Здесь я расскажу вам, как создать доску для вдохновения в дизайне с использованием этого фреймворка.

Зачем использовать Next.js

Next.JS - это высокопроизводительное приложение узла с рендерингом на стороне сервера, которое имеет простоту Meteor без проблем с производительностью . Часто его используют в сочетании с React, но это бесконечно подключаемый; вы можете настраивать столько или меньше, сколько хотите (например, Sass… или Redux), и документация для этого обширна. В него встроено множество оптимизаций производительности, что означает, что вы можете меньше думать о настройке.

Начиная

Мы собираемся создать одностраничное приложение, которое будет извлекать данные из фида Dropmark и использовать их для отображения сетки изображений. Эти данные представляют собой ответ в формате JSON от конечной точки API в Dropmark. Нам нужно что-то, что поможет нам легко извлекать данные, сортировать их и отображать.

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

Создайте новый каталог и установите зависимости для этого проекта:

mkdir design-inspo
cd design-inspo 
yarn init
yarn install next moment react react-dom isomorphic-fetch

Что все они делают?

  • Next обрабатывает части узла и все наши активы (стили, js) Подробнее здесь.
  • Момент обрабатывает расчет времени, чтобы мы могли видеть, когда что-то опубликовали.
  • React и React-dom помогают нам с интерфейсом, поэтому мы можем отображать его с помощью причудливого HTML. На самом деле мы могли бы использовать любой интерфейсный фреймворк JS или вообще ничего. Однако в нашем примере без фреймворка немного сложнее.
  • Ramda помогает нам сортировать данные, это альтернатива Lodash и Underscore.

Добавьте наш стартовый скрипт в ваш package.json файл

{
  "scripts": 
   { 
      "dev": "next" 
   } 
}

Создание макета папки и исходного файла `index.js`

Нам нужна pages/ папка для Next API. Введите в командной строке следующее: mkdir pages && touch pages/index.js. Мы собираемся использовать наш index.js файл как компонент-оболочку, который извлекает все наши данные и передает их более мелким компонентам.

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

Вот что нам нужно в этом index.js файле:

Подводя итог, мы асинхронно получаем данные из конечной точки Dropmark (http://twnsndco.dropmark.com/396720.json). Когда запрос завершен, мы возвращаем data, которые являются items частью json-объекта. Этот data затем передается в наш Feed компонент.

Componentize меня Cap’n

Давайте займемся более мелкими компонентами. Создайте папку /component и новый файл в ней с именем Feed.js. Этот компонент потянет наши данные на map компонент меньшего размера, Post, который мы создадим позже.

Наш Feed.js файл:

Мы передаем этому функциональному компоненту два аргумента: className и posts. Скорее всего, мы будем использовать className, чтобы стилизовать контейнер для всех наших posts. Data - это наш объект JSON, который компонент Feed получает от нашего index компонента (файла index.js). С data, массивом, мы можем map каждый post объект Post компоненту.

Сообщение: давайте посмотрим кое-что

Создайте Post.js файл в своей components папке. Мы собираемся развернуть объект post, который он получает от Feed, и использовать его для заполнения группы элементов HTML.

Укладка его

Чтобы протестировать наше приложение, запустите npm run dev и откройте в браузере localhost: 3000. Вы должны увидеть поток изображений и текста без стиля. С Next.js вы получаете горячую перезагрузку модуля прямо из коробки, что означает мгновенную визуальную обратную связь.

Поскольку вы дизайнер, я не буду рассказывать вам, как это стилизовать; Теперь у вас есть все сырые ингредиенты для создания доски для дизайна. Я бы порекомендовал установить styled-components (простой в использовании, хорошо писать) или cxs (простой в использовании, производительный).

Сделайте свой собственный канал

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

Во-первых, я бы добавил пару предметов в эту коллекцию. Загрузите и установите расширение Dropmark для Chrome / Safari или их приложение для Mac. Обычно с веб-сайтами я делаю снимок экрана, который, по сути, переносит вас на главную страницу сайта.

Откройте свою новую коллекцию, щелкнув заголовок на боковой панели до доски этой коллекции. Скопируйте URL-адрес из вашего браузера. Обычно это что-то вроде yourusername.dropmark.com/102333. Затем перейдите к настройкам учетной записи под своим аватаром справа. Прокрутите вниз до частных ссылок и получите / сгенерируйте свой закрытый ключ.

Скопируйте и этот ключ. В корне папки проекта создайте .env файл с ключом DROPMARK_API_KEY=XXXXXXXXXXX, где вместо X у вас будет ваш ключ. Затем добавьте в корень еще один файл с именем now.json со следующим содержимым:

{
  "dotenv": true
}

Это позволяет Теперь узнать, что вы включили файл .env и вам нужен доступ к нему.

Перейдите в свой index.js файл и измените его, чтобы использовать URL новой коллекции и ключ Dropmark. Здесь мы используем строковый шаблон для вставки нашего ключа перед генерацией строки.

import React from 'react';
import 'isomorphic-fetch';
const postEndpoint = `http://<your-user-name>.dropmark.com/<collection-id>.json?key=${process.env.DROPMARK_KEY}`

Снова раскрутите свой проект с помощью npm run dev, и теперь вы должны увидеть список с изображениями / сайтами, которые вы уже добавили.

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

Чтобы развернуть копию, глобально установите now с npm install -g now и запустите now --dotenv из корня папки проекта, чтобы развернуть его по временному URL-адресу. Чтобы узнать о настраиваемых URL-адресах, обратитесь к https://zeit.co/now.

Вопросов? Создать что-нибудь классное?

Свяжитесь со мной в твиттере @twnsndco, я буду более чем счастлив помочь или указать вам на полезную документацию.

Хакерский полдень - это то, с чего хакеры начинают свои дни. Мы часть семьи @AMI. Сейчас мы принимаем заявки и рады обсуждать рекламные и спонсорские возможности.

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