간단한 암호화 가격 위젯

CoinGecko API을 사용하여 Svelte로 자신만의 Simple Crypto Price Tracker를 구축하려면 HTML, CSS 및 JavaScript에 대한 기본적인 이해가 필요합니다.

시작하기

계속해서 CodeSandbox의 Svelte 플레이그라운드를 사용하여 새 프로젝트를 초기화하거나 Github에서 사용 가능한 상용구 중 하나를 사용하세요.

# Creating a new project
npx degit sveltejs/template 

# Install the dependencies...
npm install

...롤업을 시작합니다.

npm run dev

localhost:8080으로 이동하면 앱이 실행되는 것을 볼 수 있습니다. src에서 구성 요소 파일을 편집하고 저장한 다음 페이지를 새로고침하여 변경 사항을 확인하세요.

설정

우리 프로젝트는 HTML, CSS 및 JavaScript를 포함하는 .svelte 파일을 사용하여 Svelte로 작성된 구성 요소를 사용합니다. 이제 Card.svelte 파일을 생성하여 준비하고 App 구성 요소를 다음 구조로 수정해 보겠습니다.

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

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

<!-- HTML Markup -->

우리의 코드에는 선택 사항인 세 가지 주요 섹션이 포함되어 있습니다.

구성 요소 인스턴스가 생성될 때 실행되는 JavaScript를 포함하는 <script> 블록입니다.

해당 구성 요소로 범위가 지정되는 <style> 블록입니다.

앱 템플릿이 포함된 <main> 블록입니다.

우리의 앱 구성 요소

Crypto 객체를 저장하기 위해 빈 배열을 생성하는 것과 함께 다음 가져오기로 App.svelte를 편집하는 것으로 시작합니다.

<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>

여기에서 다음을 가져왔습니다.

<Card/> Card.svelte의 카드 구성 요소에서 초기화되었습니다.

{onMount} 네트워크를 통해 API 요청을 처리합니다.

다음으로 아래와 같이 JavaScript의 가져오기 API를 사용하여 끝점에서 요청을 가져오기 위해 onMount 핸들러를 만듭니다.

  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>
  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의 카드 구성 요소로 내보낼 데이터 개체를 만듭니다. 다음으로 sveltesttrap에서 다음 구성 요소를 가져옵니다.

<script>
  import { Card, CardHeader, CardTitle, CardSubtitle, CardText} 
  from "sveltestrap";
  export let data;
</script>

이제 이전에 Sveltstrap 구성 요소를 사용해 본 적이 없다면 Sveltstrap 구성 요소docs를 살펴보는 것이 좋습니다. 다음 단계는 다음과 같이 구성 요소를 사용하는 것입니다.

<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 앱을 완료해야 합니다.

이제 여기까지 완료했다면 코드를 완성된 코드Sandbox에 연결하여 포크하거나 복제하면 작업이 완료됩니다.

라이선스: 📝

이 프로젝트는 MIT 라이선스(MIT)에 따릅니다. 자세한 내용은 라이센스를 참조하십시오.

기여

기여는 언제나 환영합니다...

저장소 포크

현재 프로그램을

개선

기능 개선

새 기능 추가

버그 수정

작업을 푸시하고 풀 요청 생성

유용한 리소스

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