Создание сайтов в Дружковке, ДНР. Создайте клон Hacker News, используя React и HarperDB

 
 

Один из самых эффективных и интересных способов улучшить свои навыки веб-разработки — это клонирование существующей веб-страницы или веб-сайта. В этом уроке мы будем клонировать домашнюю страницу Hacker News, используя React и HarperDB.

К тому времени, когда мы закончим, наша клонированная версия домашней страницы Hacker News должна выглядеть так:

Наша клонированная версия

Код этого проекта можно найти в его репозитории на GitHub.

Преимущества клонирования

Создание клона веб-страницы имеет следующие преимущества:

Это поможет вам уделить внимание тонкостям и нюансам дизайна. Это делает вас более всесторонним дизайнером.

Это поможет вам познакомиться с цветом и типографикой. Это очень важные концепции, которыми должен владеть каждый фронтенд-разработчик/дизайнер.

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

О техническом стеке React/useHarperDB

Стек, который мы будем использовать для этого проекта, в основном представляет собой стек React/useHarperDB.

HarperDB — это программное обеспечение для управления данными. Он отлично подходит для случаев, когда вам нужны возможности NoSQL и SQL, быстрая разработка приложений, интеграция, граничные вычисления, распределенные вычисления и операционная аналитика в реальном времени.

HarperDB также является гибким. Он позволяет сделать следующее:

делать запросы к одной конечной точке

используйте как SQL, так и NoSQL для запроса вашей базы данных

выгружать данные в формате JSON и с запросами SQL

загружать массовые данные в один файл CSV

Он очень быстрый, простой в использовании и позволяет настроить без сервера. Бессерверная архитектура влечет за собой перенос внутренних задач на другой сервис.

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

В процессе разработки мы будем использовать следующие инструменты.

Реагировать

Мы будем использовать библиотеку React для клонирования нашей домашней страницы. React — это внешняя библиотека JavaScript для создания многократно используемых компонентов пользовательского интерфейса. Например, вы хотите использовать аналогичную кнопку в двух или более местах на своем веб-сайте. С HTML вы должны определить разметку для этой кнопки в каждом разделе, который вы хотите использовать. Это не согласуется с принципом DRY (не повторяйтесь). С React все, что вам нужно сделать, это определить один компонент кнопки, а затем зарегистрировать этот компонент в каждом разделе, который вы собираетесь использовать в приложении. Это упрощает весь процесс сборки и очищает ваш код.

Вместо того, чтобы вручную устанавливать React и настраивать утомительные конфигурации, мы воспользуемся этим create-react-appинструментом, чтобы мгновенно создать для нас работающий фреймворк. Это поможет сэкономить время.

Узел и нпм

React, React DOM и тысячи других пакетов находятся внутри реестра npm. Чтобы иметь возможность установить эти зависимости на нашем локальном компьютере, нам нужно установить Node и npm. Вы можете установить Node отсюда.

Если вы не уверены, что Node уже установлен на вашем компьютере, или не знаете, какая версия установлена ​​в данный момент, просто откройте командный терминал на своем компьютере и введите node -v. Если у вас установлен Node, он должен отображать установленную версию Node. Обратите внимание, что для запуска этого проекта у вас должна быть версия узла не ниже 12.xx.

Облачная учетная запись HarperDB

Чтобы настроить базу данных, нам нужно создать экземпляр для нашего приложения. Чтобы создать экземпляр, нам сначала нужно зарегистрироваться в Harper. После настройки нашего облачного экземпляра базы данных нам нужно будет использовать имя пользователя, пароль и URL-адрес базы данных позже в нашем приложении React. В базе данных мы создадим таблицу, содержащую список сообщений Hacker News, которые позже будут отображаться на веб-странице.

использоватьHarperDB

Это хук React, предоставленный Harper. Этот хук, по сути, действует как мост между нашим приложением React и базой данных. Вызвав эту функцию внутри нашего компонента React и передав некоторые важные параметры, включая SQL-запрос, мы сможем получить доступ к сообщениям из нашей облачной базы данных. Этот пакет будет установлен с помощью менеджера пакетов Node, подробности о нем можно найти здесь.

SQL

В этом проекте мы будем использовать только один базовый SQL-запрос, поэтому обширные знания не требуются.

CSS

Наконец, мы будем стилизовать наш клон, используя чистый CSS без библиотек. Каждый стиль, который мы применяем, будет имитировать домашнюю страницу Harper News.

Логотип «Хакер Ньюс»

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

Создание облачного экземпляра HarperDB

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

Зарегистрироваться

После регистрации мы создадим экземпляр HarperDB Cloud для нашего приложения. Следуйте инструкциям, введите свое имя пользователя, пароль для вашего экземпляра и имя вашего экземпляра. После этого для вас будет сгенерирован URL-адрес.

Добавление информации о вашем экземпляре

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

Выберите спецификации

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

Пожалуйста, сохраните ваше имя пользователя, пароль и URL

Наконец, мы подтверждаем экземпляр. Вы сразу же увидите на карточке метку «Создание экземпляра». Это указывает на то, что HarperDB работает с нашим экземпляром и все будет настроено через несколько минут.

Раскрутка базы данных

Важно, чтобы мы хранили наши учетные данные экземпляра в доступном месте, так как они потребуются нам позже в этом руководстве. Учетные данные — это ваше имя пользователя, пароль и URL-адрес экземпляра.

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

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

Сначала мы переходим к терминалу и запускаем следующую команду:

npx create-react-apphacker-news-clone

Это создаст папку с именем hacker-news-cloneи установит библиотеку React в проект. Так create-react-appкак это генератор кода, все настройки будут сделаны за нас автоматически. Таким образом, мы можем больше сосредоточиться на создании нашего приложения.

Создание базы данных и обеспечение ее данными

Возвращаясь к HarperDB, нам нужно предоставить ему данные для нашей страницы. Эти данные будут представлять собой список постов новостей Hacker, которые мы будем отображать в нашем интерфейсе.

Создание схемы и таблицы в базе данных

Нам нужно определить схему для нашей базы данных. Схема — это структурная форма базы данных. Он определяет, как данные будут организованы внутри базы данных. В HarperDB вы можете просто думать о схеме как о наборе таблиц. Мы можем определить несколько таблиц внутри схемы и получить доступ к этим таблицам из разных мест нашего приложения.

На панели инструментов HarperDB щелкните карточку. Вы будете перенаправлены на новую страницу.

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

Чтобы создать схему, просто щелкните значок + рядом с ней.

Как добавить схему и таблицу

Для нашего урока мы назовем нашу схему «HackerNews».

Внутри схемы мы определим нашу первую таблицу с именем posts. Эта таблица будет содержать все данные сообщений, которые будут отображаться на нашей странице. В дополнение к имени таблицы нам также нужно будет передать хеш-атрибут для нашей таблицы. Атрибут хеша — это уникальное значение, которое отличает одну строку (сообщение) от другой строки данных внутри таблицы.

Для нашей таблицы сообщений мы установим для атрибута хэш значение id. Это означает, что idстолбец будет содержать уникальные данные для каждой строки таблицы.

Схема и таблица для наших постов

Заполнение нашей таблицы данными

На данный момент стол пуст. Нам нужно заполнить таблицу данными. HarperDB предоставляет нам различные способы сделать это:

путем создания запросов SQL или NoSQL для создания данных в нашей базе данных

путем определения одного объекта JSON (только для одной записи) и массива данных JSON (для нескольких записей)

путем импорта и загрузки данных с помощью файла CSV

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

Нажмите маленький значок + в правом верхнем углу и вставьте следующие данные JSON:

[

{

«id»: 1,

«title»: «Intel Is Reducing Server Chip Pricing in Attempt to Stem the AMD Tide»,

«website»: «(tomshardware.com)»,

«url»: «https: //www.tomshardware.com»,

«points»: 115,

«user»: «rbanffy»,

«time»: «2 hours ago»,

«comments»: 67

},

{

«id»: 2,

«title»: «AI recognizes race in medical images»,

«website»: «(explainthispaper.com)»,

«url»: «https: //www.explainthispaper.com»,

«points»: 31,

«user»: «stuartbman»,

«time»: «30 minutes ago»,

«comments»: 15

}

]

Примечание: эти данные относятся только к двум сообщениям Hacker News. Получить данные для 30 постов можно из репозитория GitHub.

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

Вставка сообщений с использованием JSON

На этом мы закончили нашу работу над облаком HarperDB. Пришло время сосредоточиться на интерфейсной части нашего веб-сайта.

Интеграция HarperDB и нашего приложения с HarperDBProvider

Прямо сейчас наш передний конец изолирован от нашего заднего конца. Нам нужно подключить наш облачный экземпляр HarperDB к нашему приложению React. К счастью, HarperDB предоставляет нам для этого возможность: use-harperdb.

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

npm install use-harperdb

Из соображений безопасности нам нужно будет хранить учетные данные нашего экземпляра внутри переменной окружения. Мы создадим файл с именем.envвнутри корневого приложения (hacker-news-clone) и передадим следующие переменные:

REACT_APP_DB_URL=**

REACT_APP_USER=**

REACT_APP_PASSWORD=**

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

После этого мы войдем внутрь index.jsфайла, перейдя к hacker-news-clone/src/index.js. Затем мы импортируем HarperDBProviderи оборачиваем в него все наше приложение:

import React from 'react’;

import ReactDOM from 'react-dom’;

import '. /index.css’;

import App from '. /App’;

import { HarperDBProvider } from 'use-harperdb’;

ReactDOM.render (

<HarperDBProvider

url={process.env.REACT_APP_DB_URL}

user={process.env.REACT_APP_USER}

password={process.env.REACT_APP_PASSWORD}

>

 

,

document.getElementById ('root’)

) ;

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

Создание домашней страницы с помощью React

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

Создание корневого компонента

Корневой компонент app.js. Перейдите hacker-news-clone/src/App.jsи введите следующий код:

import React from 'react’;

import '. /App.css’;

import Posts from '. /components/Posts’;

import logo from '. /hacker-news.svg’

function App () {

return (

Hacker News

new

|

past

|

comments

|

ask

|

show

|

job

|

submit

|

login

) ;

}

export default App;

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

Заголовок

содержит всю разметку раздела заголовка страницы Hacker News. Это включает в себя небольшой логотип, текст логотипа и список навигационных ссылок. Вы также можете увидеть flexкласс, зарегистрированный для некоторых элементов. Все выравнивания будут выполняться из нашей таблицы стилей App.cssс использованием Flexbox.

 

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

Создание компонента сообщений

Это, пожалуй, самый интересный компонент React в этом проекте. Этот компонент будет отображать список сообщений, которые будут извлечены из базы данных с помощью use-harperdbфункции.

Перейдите к компоненту hacker-news-clone/src/components/Post.jsи создайте его: Post

import { useHarperDB } from 'use-harperdb’;

function Posts () {

let [data, loading, error, refresh] = useHarperDB ({

query: {

operation: 'sql’,

sql: `select * from HackerNews.posts`

}

/* interval: 40000 */

})

// CODE WILL CONTINUE

После импорта зависимостей мы определим компонент «функция» наших сообщений. Внутри него мы выполняем useHarperDBфункцию и передаем объект запроса в качестве параметра. Внутри этого объекта мы определяем два свойства:

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

sql: здесь мы определяем наш SQL-запрос.

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

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

Вызов useharperdbфункции вернет следующие переменные, которые мы принимаем в массив:

loading: это указывает на то, что данные все еще загружаются

error: при возникновении ошибки в эту переменную возвращается сообщение об ошибке.

refresh: эту функцию можно использовать для многократного извлечения данных из базы данных.

data: это содержит фактические данные, которые мы запросили в объекте запроса

Теперь мы напишем оставшуюся часть компонента:

// CONTINUATION

if (loading) {

return

Loading...

 

}

if (data) {

return (

{data.map ((post, index) => {

return (

{post.id}. {post.title}{post.website}

{post.points} points by {post.user} {post.time} | hide | {post.comments} comments

)

}) }

More

 

 

Guidelines| FAQs| Lists|

API| Security| Legal|

Apply to YC| Contact

 

)

} else {

return (

 

Sorry, no data

 

{error}

)

}

}

export default Posts

Данные, возвращаемые при вызове use-harperdb, будут представлять собой массив из 30 объектов. Это 30 сообщений Hacker News.

Каждый объект публикации будет иметь идентификатор, заголовок, веб-сайт, URL-адрес, баллы, пользователя, время и комментарии. Все эти данные будут использованы для заполнения нашего шаблона.

Первый ifоператор отображает Loading... сообщение, если данные еще не готовы.

Второй оператор проверяет наличие данных и наличие в массиве данных более одного сообщения. В этом случае мы будем отображать все сообщения на странице с помощью map () метода. Данные из каждого поста будут динамически передаваться в шаблон.

Нам нужно указать уникальное значение keyсвойства на каждой итерации, чтобы помочь React различать каждый новый набор сообщений. Поле idотлично подходит для этой роли, ведь каждый пост имеет уникальное idзначение.

Если второе утверждение ложно и данные не возвращаются, отображается сообщение «Извините, нет данных «вместе с сообщением об ошибке. Как я упоминал ранее, любое сообщение об ошибке будет возвращено внутри error.

В разделе нижнего колонтитула мы назначим refreshфункцию onClickсвойству ссылки. Следовательно, каждый раз, когда нажимается «Дополнительно «, страница будет обновляться.

Наконец, мы обязательно экспортируем компонент. Таким образом, он будет доступен для app.js.

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

cd /path/to/hacker-news-clone

npm start

Эта команда запустит локальный сервер разработки и загрузит ваше приложение на localhost:3000.

Стилизация страницы для имитации Hacker News

Наконец, мы определяем стили для нашего приложения внутри app.css.

Для понимания некоторые из стилей были задокументированы. Перейдите hacker-news-clone/src/App.cssи используйте следующее:

/* BASE STYLES */

/* Reset user agent default styles */

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}

/* Set the font-family to the same typeface as Hacker News */

body{

font-family: «verdana», «geneva», sans-serif;

}

a {

text-decoration: none;

color: black;

}

/* NAVIGATION STYLES */

/* Center the navbar, ensure it doesn’t exceed the specified width */

.container {

margin: 10px auto;

max-width: 1350px;

}

/* Set the height of Hacker News Logo */

.image {

height: 19px;

width: 19px;

border: 1px solid white;

margin: 0 3px 0 0;

}

.part-1 img {

height: 100%;

width: 100%;

background-color: white;

}

/* Display the navbar in a horizontally-aligned manner, using FlexBox */

.flex {

display: flex;

justify-content: space-between;

align-items: center;

}

/* Set background color to same orange shade as Hacker News */

.header {

padding: 1px 2px;

margin: 0;

height: 22px;

background-color: #f46404;

}

.header h1 {

font-size: 13px;

margin: 0 4px;

}

.header h3 {

font-size: 13px;

font-weight: 100;

margin: 0 4px;

}

/* Style the strokes which divides the nav links */

.stroke {

font-size: 13px;

}

/* BODY SECTION */

/* Set body color to lighter purple */

.body {

background-color: #f3f4ec;

padding-bottom: 10px;

margin: 0;

}

/* Draw a triangle */

.triangle {

width: 0;

height: 0;

border-left: 4px solid transparent;

border-right: 4px solid transparent;

border-bottom: 8px solid #9c9c9c;

position: relative;

bottom: 12px;

right: 3px;

}

.posts {

padding: 10px 6px;

font-size: 13px;

}

.posts p{

color: black;

}

/* Sets the font size of each paragrapgh */

.posts.secondary,

.posts.outline {

font-size: 9px;

margin: 5px 0;

}

.posts.secondary {

color: #9c9c9c;

font-size: 9px;

margin-left: 30px;

}

.website {

margin-left: 3px;

}

.posts.number {

color: #9c9c9c;

}

/* Set a border on the bottom of the links when hovered over */

.outline: hover {

border-bottom: 1px solid #9c9c9c;

}

.posts a {

color: #9c9c9c;

font-size: 11px;

}

/* Footer */

.footer p {

font-size: 13px;

}

.footer hr {

border: 1px solid #f46404;

margin: 7px 0;

}

.footer p {

font-size: 11px;

font-weight: 100;

margin: 0 4px;

}

.links {

text-align: center;

}

.links a {

margin-right: 6px;

}

.form {

color: #9c9c9c;

margin: 20px auto;

width: 200px;

}

.form input {

width: 130px;

}

Вот и все, что касается стиля.

Просмотр нашего приложения

В командной строке введите следующую команду:

npm start

Это запустит локальный сервер разработки и отобразит нашу страницу в localhost:3000.

Развертывание на страницах GitHub

Вы можете пойти еще дальше и развернуть свою страницу на страницах GitHub.

Прежде чем продолжить, убедитесь, что у вас есть активная учетная запись GitHub. Также убедитесь, что Git установлен на вашем локальном компьютере.

Вернитесь к командному терминалу и выполните следующую команду:

npm install gh-pagessave-dev

Это сохранит страницы GitHub в вашем проекте как зависимость от разработчиков.

Когда установка будет завершена, перейдите в папку вашего проекта и откройте package.jsonфайл, который находится в корневой папке. Вы должны найти gh-pagesв зависимости dev:

«devDependencies»: {

«gh-pages»: «^3.2.3»

}

Перейдите в каталог вашего проекта (hacker-news-clone) и выберите package.jsonфайл. Внутри файла вставьте следующие строки строк (шаблон замените на свой):

«homepage»: https: //{Your GitHub username here}.github.io/{Your Project Name}.git

// Inside scripts object

«predeploy»: «npm run build»,

«deploy»: «gh-pages -d build»

Теперь выполните следующую команду

npm run deploy

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

Заключительные слова

Одним из самых больших плюсов HarperDB является то, что он предоставляет пользователям бесплатный тарифный план. Как разработчик, это позволяет создавать различные проекты, не беспокоясь о расходах.

Используя стек React/HarperDB, вы можете улучшить свои навыки кодирования, создав несколько других простых приложений CRUD.

3D-печать5GABC-анализAndroidAppleAppStoreAsusCall-центрChatGPTCRMDellDNSDrupalExcelFacebookFMCGGoogleHuaweiInstagramiPhoneLinkedInLinuxMagentoMicrosoftNvidiaOpenCartPlayStationPOS материалPPC-специалистRuTubeSamsungSEO-услугиSMMSnapchatSonyStarlinkTikTokTwitterUbuntuUp-saleViasatVPNWhatsAppWindowsWordPressXiaomiYouTubeZoomАвдеевкаАктивные продажиАкцияАлександровск ЛНРАлмазнаяАлчевскАмвросиевкаАнализ конкурентовАнализ продажАнтимерчандайзингАнтрацитАртемовскАртемовск ЛНРАссортиментная политикаБелгородБелицкоеБелозерскоеБердянскБизнес-идеи (стартапы)БрендБрянкаБукингВахрушевоВендорВидеоВикипедияВирусная рекламаВирусный маркетингВладивостокВнутренние продажиВнутренний маркетингВолгоградВолновахаВоронежГорловкаГорнякГорскоеДебальцевоДебиторкаДебиторская задолженностьДезинтермедитацияДзержинскДивизионная система управленияДизайнДимитровДирект-маркетингДисконтДистрибьюторДистрибьюцияДобропольеДокучаевскДоменДружковкаЕкатеринбургЕнакиевоЖдановкаЗапорожьеЗимогорьеЗолотоеЗоринскЗугрэсИжевскИловайскИрминоКазаньКалининградКировскКировскоеКомсомольскоеКонстантиновкаКонтент-маркетингКонтент-планКопирайтингКраматорскКрасноармейскКрасногоровкаКраснодарКраснодонКраснопартизанскКрасный ЛиманКрасный ЛучКременнаяКураховоКурскЛисичанскЛуганскЛутугиноМакеевкаМариупольМаркетингМаркетинговая информацияМаркетинговые исследованияМаркетинговый каналМаркетинг услугМаркетологМарьинкаМедиаМелекиноМелитопольМенеджментМерчандайзерМерчандайзингМиусинскМолодогвардейскМоскваМоспиноНижний НовгородНиколаевНиколаевкаНишевой маркетингНовоазовскНовогродовкаНоводружескНовосибирскНумерическая дистрибьюцияОдессаОмскОтдел маркетингаПартизанский маркетингПервомайскПеревальскПетровскоеПлата за кликПоисковая оптимизацияПопаснаяПравило ПаретоПривольеПрогнозирование продажПродвижение сайтов в ДонецкеПроизводство видеоПромоПромоушнПрямой маркетингРабота для маркетологаРабота для студентаРазработка приложенийРаспродажаРегиональные продажиРекламаРеклама на асфальтеРемаркетингРетро-бонусРибейтРитейлРовенькиРодинскоеРостов-на-ДонуРубежноеСамараСанкт-ПетербургСаратовСватовоСвердловскСветлодарскСвятогорскСевастопольСеверодонецкСеверскСедовоСейлз промоушнСелидовоСимферопольСинергияСколковоСлавянскСнежноеСоздание сайтов в ДонецкеСоледарСоциальные сетиСочиСтаробельскСтаробешевоСтахановСтимулирование сбытаСуходольскСчастьеТелемаркетингТельмановоТираспольТорговый представительТорезТрейд маркетингТрейд промоушнТюменьУглегорскУгледарУкраинскХабаровскХарцызскХерсонХостингЦелевая аудиторияЦифровой маркетингЧасов ЯрЧелябинскШахтерскЮжно-СахалинскЮнокоммунаровскЯндексЯсиноватая