Простой виджет цен на криптовалюты

Вам понадобится базовое понимание HTML, CSS и JavaScript, чтобы создать свой собственный простой трекер цен криптовалют с помощью Svelte, используя API CoinGecko.

Начало работы

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

# Creating a new project
npx degit sveltejs/template 

# Install the dependencies...
npm install
Войдите в полноэкранный режим Выйдите из полноэкранного режима

…затем запустите Rollup.

npm run dev
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Перейдите на localhost:8080 и вы увидите, что ваше приложение запущено. Отредактируйте файл компонента в src, сохраните его и перезагрузите страницу, чтобы увидеть свои изменения.

Настройка

Наш проект будет использовать компоненты, написанные на Svelte с помощью файлов .svelte, которые содержат HTML, CSS и JavaScript. Теперь давайте подготовимся, создав наш файл Card.svelte и изменим наш компонент App со следующей структурой.

<script>
<!-- JavaScript Logic -->
</script>

<style>
<!-- CSS Styles -->
</style>

<!-- HTML Markup -->
Вход в полноэкранный режим Выход из полноэкранного режима

Наш код содержит три основные секции, которые являются необязательными.

  • Блок <script>, содержащий JavaScript, который запускается при создании экземпляра компонента.
  • Блок <style>, который будет привязан к данному компоненту.
  • Блок <main>, который содержит шаблон нашего приложения.

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

Мы начнем с редактирования App.svelte со следующими импортами наряду с созданием нашего пустого массива для хранения объектов Crypto.

<script>
  import Card from "./Card.svelte";
  import { onMount } from "svelte";

  let cryptoData = [];
</script>

<style>
  main {
    font-family: sans-serif;
    text-align: center;
  }
</style>

<main>
    <h1>Crypto Price Widget</h1>
    <Card />
</main>
Вход в полноэкранный режим Выход из полноэкранного режима

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

Далее мы создадим обработчик onMount для выполнения запросов get с конечной точки с помощью JavaScript’s fetch API, как показано ниже:

  onMount(async () => {
    const res = await fetch(
      `https://api.coingecko.com/api/v3/coins/markets?vs_currency=eur&order=market_cap_desc&per_page=100&page=1&sparkline=false`
    );
    const data = await res.json();
    console.log(data);
    cryptoData = data;
  });
Вход в полноэкранный режим Выход из полноэкранного режима

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

<script>
  import Card from "./Card.svelte";
  import { onMount } from "svelte";

  let cryptoData = [];

  onMount(async () => {
    const res = await fetch(
      `https://api.coingecko.com/api/v3/coins/markets?vs_currency=eur&order=market_cap_desc&per_page=100&page=1&sparkline=false`
    );
    const data = await res.json();
    console.log(data);
    cryptoData = data;
  });
</script>

<style>
  main {
    font-family: sans-serif;
    text-align: center;
  }
</style>

<main>
<h1>Crypto Price Widget</h1>
    {#each cryptoData as crypto}
    <Card data={crypto}/>
    {/each}
</main>
Вход в полноэкранный режим Выход из полноэкранного режима

Примечание 💡 — Проверьте консоль и убедитесь, что наш запрос get работает.

Наш компонент карты

Мы откроем Card.svelte и создадим наш объект данных, который будет экспортирован в наш компонент карты в App.svelte. Далее мы импортируем следующие компоненты из sveltestrap:

<script>
  import { Card, CardHeader, CardTitle, CardSubtitle, CardText} 
  from "sveltestrap";
  export let data;
</script>
Вход в полноэкранный режим Выход из полноэкранного режима

Если вы еще не использовали компоненты Sveltstrap, то я настоятельно рекомендую вам изучить их документацию. Следующий шаг — начать использовать наши компоненты следующим образом:

<Card class="container mb-3">
<CardHeader class="cryptoHeader">
    <CardTitle>{data.name}</CardTitle>
  </CardHeader>
<CardText> ${data.current_price} </CardText>
</Card>
Войти в полноэкранный режим Выйти из полноэкранного режима

Примечание 💡 — Даже без css вы теперь должны иметь возможность просматривать живые криптоданные из нашего api.

Давайте добавим следующие стили, чтобы завершить наш файл Card.Svelte.

<style>
  :global(.container) {
    display: flex;
    justify-content: space-between;
    text-align: center;
    width: 30%;
    height: 20vh;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 20px;
    margin: 20px auto;
    transition: 0.2s;
    font-size: 1.4rem;
  }

  :global(.container:hover) {
    background-color: greenyellow;
    font-weight: bold;
    opacity: 0.04px;
  }

  :global(.cryptoHeader) {
    background-color: transparent;
    border: none;
    text-transform: uppercase;
  }
</style> 
Вход в полноэкранный режим Выход из полноэкранного режима

Обзор

Если вы следовали за нами, то вы должны были завершить проект и закончить свое приложение Svelte Todo App.

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

Лицензия: 📝

Этот проект находится под лицензией MIT (MIT). Смотрите ЛИЦЕНЗИЮ для получения дополнительной информации.

Вклад

Вклад всегда приветствуется…

  • Форк репозитория
  • Улучшить текущую программу путем
  • улучшения функциональности
  • добавление новой функции
  • исправления ошибок
  • Выкладывайте свою работу и создавайте Pull Request

Полезные ресурсы

https://sveltestrap.js.org/
https://svelte.dev/
https://github.com/sveltejs/template

Оцените статью
Procodings.ru
Добавить комментарий