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

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

В этом уроке я буду обсуждать, как создать приложение-агрегатор новостей о криптовалюте с помощью React, реализуя при этом такие инструменты, как Cloudinary и Xata.

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

Описание изображения


Инструменты

Я буду использовать инструменты ниже для этого проекта.

  • React.js: React — это бесплатный интерфейсный набор инструментов JavaScript с открытым исходным кодом для создания пользовательских интерфейсов с использованием компонентов пользовательского интерфейса.
  • Облачно: Cloudinary — это платформа, на которой пользователи размещают, управляют и доставляют фотографии и видео для веб-сайтов и приложений.
  • Воровать: Xata — это бессерверная платформа данных с пользовательским интерфейсом, похожим на электронные таблицы, и бесконечно масштабируемым API данных. Xata также функционирует как поисковая система с произвольным текстом.


Предпосылки

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

  • Текстовый редактор
  • Узел установлен на вашем локальном компьютере
  • Базовые знания Reactjs
  • Понимание того, как работают API
  • Облачно учетная запись


Начиная

При создании нашего агрегатора криптовалютных новостей мы создадим приложение для реагирования, добавим в него функции, приступим к интеграции Cloudinary для управления загрузкой мультимедиа и Xata для управления базой данных.
Если вы хотите сразу приступить к работе с кодом, вы можете посетить репозиторий GitHub. здесь.


Создать реагирующее приложение

На своем компьютере создайте папку проекта и откройте ее в текстовом редакторе.

В каталоге проекта откройте терминал и выполните приведенные ниже команды.


npx create-react-app news-aggregator

cd news-aggregator

npm start
Войти в полноэкранный режим

Выйти из полноэкранного режима

npm start Команда используется для запуска приложения реакции на сервере разработки в вашем веб-браузере. Открытым localhost:3000 в вашем браузере, и вы должны увидеть изображение ниже

Реагировать

Теперь ваше приложение для реагирования готово, пришло время настроить Cloudinary.


Облачная настройка

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

Прежде чем настраивать Cloudinary в своем приложении React, установите Облачный SDK React.js в вашем проекте с помощью команды ниже

npm i @cloudinary/url-gen @cloudinary/react
Войти в полноэкранный режим

Выйти из полноэкранного режима

  • В корне вашего проекта создайте .env файл в папке проекта и укажите свое имя Cloudinary Cloud. Вы должны найти имя облака, перейдя на панель инструментов Cloudinary.

облачная панель

import React from 'react'
    import {AdvancedImage} from '@cloudinary/react';
    import {Cloudinary} from "@cloudinary/url-gen";

    const App = () => {
      // Create a Cloudinary instance and set your cloud name.
      const cloud = new Cloudinary({
        cloud: {
          cloudName: 'demo'
        }
      })
Войти в полноэкранный режим

Выйти из полноэкранного режима

Примечание: заменить demo с вашим облачным именем из cloudinary


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

К настоящему времени у вас должен быть src папка в каталоге вашего проекта, созданная из react.
Внутри папки создайте component folder который будет содержать следующие файлы

  • latest.js
  • navigation.js
  • news.js
  • options.js
  • watchlist.js

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

Создать latest.js файл и вставьте в него нижеприведенное

import React from "react";

export default function TheLastest(){
    return (
        <h1 className="latest">
            Latest News...
        </h1>
      )
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Создать navigation.js файл и вставьте в него нижеприведенное

import React from "react";

export default function Nav(){
    return (
        <div>
        <nav>

        <img src="  className="logoimg"/>

        <div>
            <h2 className="logoname">
            LightCrypto
        </h2>
        <p className="newstor">News Aggregator</p>

        </div>

        <h2 className="search">
            <input type= "search" placeholder="search" className = "searchtab" />
        </h2>
        </nav>
    </div>
    )
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Создать news.js файл и реализовать приведенную ниже конфигурацию, а также

import React from "react";

export default function News(props){
    return (

        <div className="newstab">
            <div>
            <p className="Arrival">
                {props.timestamp}
            </p>
            </div>
        <div className="the-news">

        <h3 className="the-heading">
            <a href=" alt="" className="sourceList">
        {props.heading}
        </a>
        </h3>
        <h4 className="the-preview">
        source: {props.source}
        </h4>
        </div>
        </div>
    )
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Создать options.js файл и вставьте в него нижеприведенное

import React from 'react';
export default function Options(){
    return(
        <div className="optionsArea">
            <div className="optionButton">
        <h3 className="home">
            Home
        </h3>
        <h3 className="calender">
            <a href= " className="calender" >Calender</a>
        </h3>
        <h3 className="aboutUs">
            About Us
        </h3>
        <h3>
            <a href= " className="blog">Blog</a>
        </h3>
        </div>
        <div className="socails">
            <h3 className="socailhead">Socials</h3>                   
                <div className="twitter"><img src=" alt="youtube" className="twitter-img" /><a href=" className="twitterr">Youtube</a></div>
                <div className="twitter"><img src=" alt="discord" className="twitter-img" /><a href=" className="twitterr">Discord</a></div>
        </div>
        </div>
    )
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Создать watchlist.js файл и добавьте следующий фрагмент кода


Настройка фиктивного API

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

API будет организован следующим образом:

  • я бы
  • прибытие
  • ссылка на сайт
  • заголовок
  • источник

Вернуться к src папку и создайте Api.js файл src/Api.js и вставьте в него приведенные ниже фрагменты.

Не стесняйтесь экспериментировать с API, добавляя свою информацию.

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


Форматирование стилей CSS

Я буду использовать базовый CSS для стилизации приложения. вставьте фрагмент кода ниже.

После выполнения вышеуказанных действий перезапустите приложение с npm start команда и ваше приложение будет готово.


Настройка Xata

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

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

  • Запустите приведенную ниже команду на локальном терминале.

npm install typescript @types/node @types/react -D
Войти в полноэкранный режим

Выйти из полноэкранного режима

  • Затем на вашем терминале глобально установите Xata CLI.
npm i -g @xata.io/cli
Войти в полноэкранный режим

Выйти из полноэкранного режима

  • Чтобы войти в свой Xata, запустите вход в систему на своем терминале.
xata auth login
Войти в полноэкранный режим

Выйти из полноэкранного режима

  • Создайте ключ API для Xata, нажав здесь. Для инициализации Xata выполните следующую команду
xata init
Войти в полноэкранный режим

Выйти из полноэкранного режима

  • Скопируйте и вставьте приведенные ниже коды на свой основной src файл для запроса базы данных
import { FC } from 'react';
    import { XataClient } from '../util/xata';

    type Props = Awaited<ReturnType<typeof getServerSideProps>>['props'];
Войти в полноэкранный режим

Выйти из полноэкранного режима

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


Вывод

В этом руководстве объясняется, как создать веб-приложение агрегатора криптовалютных новостей, которое я реализую Cloudinary для управления медиаактивами и Xata для управления базой данных.


Ресурсы

  • Вы можете посетить Cloudinary’s официальная документация, чтобы понять, как начать работу.
  • Чтобы начать с Воровать а также, хорошее место для посещения — их официальная документация
  • Xata загрузил видео на YouTube, которые проведут вас через реализация инструмента в своих проектах и ​​объясните, как Xata упрощает разработка.