У меня много связей с командами, частью которых я был, - это один из способов, которым я остаюсь с ними на связи. Что еще более важно, я получаю от этого большое удовлетворение; обмен инструментами, которые делают чью-то работу более приятной и / или интересной, - это здорово. Я чувствовал, что было бы целесообразно сохранить общедоступную зону, где я мог бы делиться всем своим дизайнерским вдохновением и полезными сведениями, которые я собрал. Обычно я публикую их в Твиттере, но я также видел в этом возможность протестировать 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. Сейчас мы принимаем заявки и рады обсуждать рекламные и спонсорские возможности.
Если вам понравился этот рассказ, мы рекомендуем прочитать наши Последние технические истории и Современные технические истории. До следующего раза не воспринимайте реалии мира как должное!