AWS SDK dành cho JavaScript

YAML 1. 2 trình phân tích cú pháp và trình tuần tự hóa

Sử dụng đơn giản, máy khách và máy chủ websocket nhanh và được thử nghiệm kỹ lưỡng cho Node. js

Kiểu dáng chuỗi đầu cuối được thực hiện đúng

Tay lái cung cấp sức mạnh cần thiết để cho phép bạn xây dựng các mẫu ngữ nghĩa một cách hiệu quả mà không gây khó chịu

Vue. js là một khung Javascript đơn giản cho phép bạn xây dựng các ứng dụng web động với các tầng fron-end. Đã có rất nhiều bài viết so sánh nó với React và Angular. Là một lập trình viên back-end và là một người không có kinh nghiệm làm việc với ứng dụng web phía front-end. Tôi đã tìm thấy VueJs, sử dụng nó và tôi thích nó hơn so với React và Angular

Lý thuyết và tài liệu hướng dẫn học Vue. js thì có rất nhiều, chúng ta có thể dễ dàng tìm kiếm được trên Internet (Trên Viblo cũng có rất nhiều bài viết về Vue. js). Theo mình cách học lập trình tốt nhất là tập luyện, sau khi chúng ta đọc qua cả chồng lý thuyết về ngôn ngữ, khung. hãy bắt tay vào làm "cái gì đó" ngay và luôn. Tiền số nổi lên trong thời gian gần đây, mình đã đọc và thấy chúng cực kỳ thú vị, nên trong bài này mình sẽ hướng dẫn viết một trang web đơn giản hiển thị 10 loại tiền số phổ biến hàng đầu cùng các thông tin . Thử nghiệm

Các thư viện hỗ trợ sẽ sử dụng

Đầu tiên chúng ta sẽ tạo trang web của chúng ta bằng html, javascript, vài thư viện javascript. Bởi vì tôi không phải là một nhà thiết kế web (và có mắt thẩm mỹ kém

• bộ lọc vue2. Một thư viện Vue. js đơn giản cung cấp một số bộ lọc mẫu cho công việc lọc hiển thị văn bản
• trục. Một thư viện phổ biến của Javascript để thực hiện các yêu cầu HTTP

Cấu trúc dự án

• chỉ mục tệp. html sẽ bao gồm toàn bộ thư viện chúng tôi sẽ sử dụng

    
    
    
    
    
    
    


Cryptocurrency Index


    

        

            Hello!!! Trang web này cung cập thông tin 10 loại tiền số thông dụng nhất,
            nó còn cho bạn một cái nhìn tổng quan và dễ dàng để so sánh tỷ giá các đồng tiền trong một tuần.
        
    

Chúng ta đã có một trang html cơ bản, sẵn sàng cho các bước xây dựng ứng dụng bên dưới đây

Thiết kế ứng dụng của chúng ta

Tôi chỉ muốn làm một ứng dụng đơn giản và hướng vào nội dung chính, vì vậy trong trường hợp này, chúng tôi sẽ xây dựng một danh sách các loại tiền của chúng tôi, chỉ cần đơn giản thôi. Nó là một bảng html liệt kê các loại tiền và thuộc tính của nó

    

        

        

            
Thứ hạng
            
Tên
            
Ký hiệu
            
Giá (USD)
            
1H
            
1D
            
1W
            
Giá trị vốn hoá thị trường(Market Cap) (USD)
        
        

        
    

Tạo kiểu một chút

• /tĩnh/css/kiểu. css

h1 {
  text-align: center;
}

td img {
  width: 25px;
}

.jumbotron p {
  font-size: 1.2em;
}

.jumbotron {
  margin-top: 5em;
  margin-bottom: 5em;
}

Chúng ta đã hoàn thành việc lên bố cục cho ứng dụng, thực hiện các bước tiếp theo

Nhận thông tin các số tiền đồng

Để hoàn thiện ứng dụng, chúng ta cần lấy thông tin cập nhật mới của tiền đồng, đối với ứng dụng này các công việc phải làm là

• Top 10 đồng tiền số phổ biến nhất và tổng giá trị vốn hóa của nó tương ứng
• Tên của mỗi loại tiền
• Biểu tượng của mỗi loại tiền
• Giá trị của một "đồng xu" tương ứng, tính bằng USD
• Phần thưởng thay đổi về giá trị của đơn vị tiền tệ trong 1 giờ, 1 ngày và 1 tuần May mắn thay cho chúng ta, có một API miễn phí rất tốt cho việc lấy toàn bộ thông tin trên CoinMarketCap, . Bạn chỉ cần đọc tài liệu của API và nhúng nó vào mọi hệ thống mà bạn đang xây dựng
  
  ))

Chúng ta sẽ sử dụng CoinMarketCap, api này cho phép chúng ta lấy top 10 đồng tiền phổ biến nhất, kèm theo đó là "xếp hạng" và các thông tin của nó, đây là những gì API sẽ trả lại cho chúng ta

[
  {
    "id": "bitcoin",
    "name": "Bitcoin",
    "symbol": "BTC",
    "rank": "1",
    "price_usd": "2747.54",
    "price_btc": "1.0",
    "24h_volume_usd": "2242640000.0",
    "market_cap_usd": "45223373666.0",
    "available_supply": "16459587.0",
    "total_supply": "16459587.0",
    "percent_change_1h": "-2.83",
    "percent_change_24h": "19.78",
    "percent_change_7d": "17.2",
    "last_updated": "1500596647"
  },
  ...
]

Một mảng top 10 loại tiền phổ biến hàng đầu. Mỗi đối tượng JSON trong mảng đại diện cho một đồng tiền, chứa đầy đủ thông tin chúng ta cần

Còn lại một thứ chúng ta vẫn còn thiếu, chúng ta muốn hiển thị biểu tượng của đồng tiền ngay cạnh tên của nó cho đẹp. Thật không thể CoinMarketCap không cung cấp bất kỳ thông tin nào về hình ảnh, nhưng thật may mắn tôi đã thấy một API khác đang làm việc này CryptoCompare API, api sẽ cung cấp thông tin còn thiếu cho chúng ta, giống như CoinMarketCap của chúng ta . API lấy thông tin về toàn bộ số tiền xu Coinlist sẽ trả lại cho chúng tôi dữ liệu

{
  ...
  "Data": {
    "AVT": {
      "Id": "138642",
      "Url": "/coins/avt/overview",
      "ImageUrl": "/media/1383599/avt.png",
      "Name": "AVT",
      "CoinName": "AventCoin",
      "FullName": "AventCoin (AVT)",
      "Algorithm": "N/A",
      "ProofType": "N/A",
      "FullyPremined": "0",
      "TotalCoinSupply": "10000000",
      "PreMinedValue": "N/A",
      "TotalCoinsFreeFloat": "N/A",
      "SortOrder": "1266"
    },
    ...
  }
}

with information ImageUrl we could show the image of each money. Kết hợp dữ liệu của 2 API chúng tôi đã có tất cả mọi thứ chúng tôi cần

Cài đặt ứng dụng Vue

Để cho đơn giản chúng ta sẽ viết toàn bộ mã Vue vào tệp tĩnh/js/ứng dụng. js Đầu tiên chúng ta chuẩn bị là một ứng dụng vue, các giá trị sẽ được sử dụng trong ứng dụng

// API dành cho việc lấy thông tin của các đồng tiến số
// (thông tin chúng ta cần là logo images của các loại tiền)
// Doc: https://www.cryptocompare.com/api/
let CRYPTOCOMPARE_API_URI = "https://www.cryptocompare.com";

// API dành cho việc lấy các thông tin quan trọng của top 10 đồng tiền số
// Doc: https://coinmarketcap.com/api/
let COINMARKETCAP_API_URI = "https://api.coinmarketcap.com";

// Thời gian sẽ update lại thông tin đang hiển thị
let UPDATE_INTERVAL = 60 * 1000;

let app = new Vue({
    el: "#app",
    data: {
        coins: [], // Array chứ thông tin các đồng tiền khác nhau(bitcoin, ethereum...)
        coinData: {} // Đối tượng chứa kết quả của API CryptoCompare. Chúng ta sẽ dùng nó để lấy ra thông tin logos
    },
    methods: {

        /**
         * Lấy thông tin của tất cả các đồng tiền, thông tin được sử dụng để lấy ra
         * logo tương ứng của từng đồng tiền.
         */
        getCoinData: function() {
        },

        /**
         * Lấy thông tin top 10 đồng tiền phổ biến
         * Thông tin sẽ được refresh sau UPDATE_INTERVAL / 1000 seconds
         * bằng cách gọi lại API
         */
        getCoins: function() {
        },

        /**
         * Truyền vào ký hiệu của đồng tiền, trả ra logo của đồng tiền đó
         */
        getCoinImage: function(symbol) {
        }
    }
});

Thực hiện các phương thức

• Thực hiện triển khai phương thức

  h1 {
    text-align: center;
  }
  
  td img {
    width: 25px;
  }
  
  .jumbotron p {
    font-size: 1.2em;
  }
  
  .jumbotron {
    margin-top: 5em;
    margin-bottom: 5em;
  }
  

  8 phương thức này sẽ gọi API CoinMarketCap. API sẽ trả lại một mảng JSON, chúng ta sẽ lưu nó trong biến của ứng dụng Vue. Để thực hiện yêu cầu API ở phía khách hàng, tôi thích sử dụng

  h1 {
    text-align: center;
  }
  
  td img {
    width: 25px;
  }
  
  .jumbotron p {
    font-size: 1.2em;
  }
  
  .jumbotron {
    margin-top: 5em;
    margin-bottom: 5em;
  }
  

  9 nó phổ biến và đơn giản. Phương thức

  h1 {
    text-align: center;
  }
  
  td img {
    width: 25px;
  }
  
  .jumbotron p {
    font-size: 1.2em;
  }
  
  .jumbotron {
    margin-top: 5em;
    margin-bottom: 5em;
  }
  

  8 của chúng ta sẽ như sau

getCoins: function() {
  let self = this;

  axios.get(COINMARKETCAP_API_URI + "/v1/ticker/?limit=10")
    .then((resp) => {
      this.coins = resp.data;
    })
    .catch((err) => {
      console.error(err);
    });
},

Như chúng ta thấy bạn dễ dàng tạo ra một yêu cầu GET với

h1 {
  text-align: center;
}

td img {
  width: 25px;
}

.jumbotron p {
  font-size: 1.2em;
}

.jumbotron {
  margin-top: 5em;
  margin-bottom: 5em;
}

[
  {
    "id": "bitcoin",
    "name": "Bitcoin",
    "symbol": "BTC",
    "rank": "1",
    "price_usd": "2747.54",
    "price_btc": "1.0",
    "24h_volume_usd": "2242640000.0",
    "market_cap_usd": "45223373666.0",
    "available_supply": "16459587.0",
    "total_supply": "16459587.0",
    "percent_change_1h": "-2.83",
    "percent_change_24h": "19.78",
    "percent_change_7d": "17.2",
    "last_updated": "1500596647"
  },
  ...
]

[
  {
    "id": "bitcoin",
    "name": "Bitcoin",
    "symbol": "BTC",
    "rank": "1",
    "price_usd": "2747.54",
    "price_btc": "1.0",
    "24h_volume_usd": "2242640000.0",
    "market_cap_usd": "45223373666.0",
    "available_supply": "16459587.0",
    "total_supply": "16459587.0",
    "percent_change_1h": "-2.83",
    "percent_change_24h": "19.78",
    "percent_change_7d": "17.2",
    "last_updated": "1500596647"
  },
  ...
]

• Tiếp theo, thực hiện phương thức

  [
    {
      "id": "bitcoin",
      "name": "Bitcoin",
      "symbol": "BTC",
      "rank": "1",
      "price_usd": "2747.54",
      "price_btc": "1.0",
      "24h_volume_usd": "2242640000.0",
      "market_cap_usd": "45223373666.0",
      "available_supply": "16459587.0",
      "total_supply": "16459587.0",
      "percent_change_1h": "-2.83",
      "percent_change_24h": "19.78",
      "percent_change_7d": "17.2",
      "last_updated": "1500596647"
    },
    ...
  ]
  

  4, chúng tôi sẽ gọi api trả lại thông tin của tất cả các số tiền đồng và sẽ sử dụng thông tin này để lấy ra logo của từng đồng tiền mà chúng tôi cần

    

        

        

            
Thứ hạng
            
Tên
            
Ký hiệu
            
Giá (USD)
            
1H
            
1D
            
1W
            
Giá trị vốn hoá thị trường(Market Cap) (USD)
        
        

        
    

Một API đơn giản, nhưng chúng ta lưu ý rằng chúng ta sẽ gọi phương thức

h1 {
  text-align: center;
}

td img {
  width: 25px;
}

.jumbotron p {
  font-size: 1.2em;
}

.jumbotron {
  margin-top: 5em;
  margin-bottom: 5em;
}

h1 {
  text-align: center;
}

td img {
  width: 25px;
}

.jumbotron p {
  font-size: 1.2em;
}

.jumbotron {
  margin-top: 5em;
  margin-bottom: 5em;
}

• Cuối cùng là phương thức _______ 37 kết hợp thông tin của 2 API

    

        

        

            
Thứ hạng
            
Tên
            
Ký hiệu
            
Giá (USD)
            
1H
            
1D
            
1W
            
Giá trị vốn hoá thị trường(Market Cap) (USD)
        
        

        
    

Thực hiện tải dữ liệu khi bắt đầu ứng dụng

Chúng ta đang chạy ứng dụng, nhưng bạn không thấy hiện tượng gì xảy ra cả

[
  {
    "id": "bitcoin",
    "name": "Bitcoin",
    "symbol": "BTC",
    "rank": "1",
    "price_usd": "2747.54",
    "price_btc": "1.0",
    "24h_volume_usd": "2242640000.0",
    "market_cap_usd": "45223373666.0",
    "available_supply": "16459587.0",
    "total_supply": "16459587.0",
    "percent_change_1h": "-2.83",
    "percent_change_24h": "19.78",
    "percent_change_7d": "17.2",
    "last_updated": "1500596647"
  },
  ...
]

h1 {
  text-align: center;
}

td img {
  width: 25px;
}

.jumbotron p {
  font-size: 1.2em;
}

.jumbotron {
  margin-top: 5em;
  margin-bottom: 5em;
}

Đó là những gì chúng ta cần. Khi tải trang thành công, phương thức

[
  {
    "id": "bitcoin",
    "name": "Bitcoin",
    "symbol": "BTC",
    "rank": "1",
    "price_usd": "2747.54",
    "price_btc": "1.0",
    "24h_volume_usd": "2242640000.0",
    "market_cap_usd": "45223373666.0",
    "available_supply": "16459587.0",
    "total_supply": "16459587.0",
    "percent_change_1h": "-2.83",
    "percent_change_24h": "19.78",
    "percent_change_7d": "17.2",
    "last_updated": "1500596647"
  },
  ...
]

h1 {
  text-align: center;
}

td img {
  width: 25px;
}

.jumbotron p {
  font-size: 1.2em;
}

.jumbotron {
  margin-top: 5em;
  margin-bottom: 5em;
}

{
  ...
  "Data": {
    "AVT": {
      "Id": "138642",
      "Url": "/coins/avt/overview",
      "ImageUrl": "/media/1383599/avt.png",
      "Name": "AVT",
      "CoinName": "AventCoin",
      "FullName": "AventCoin (AVT)",
      "Algorithm": "N/A",
      "ProofType": "N/A",
      "FullyPremined": "0",
      "TotalCoinSupply": "10000000",
      "PreMinedValue": "N/A",
      "TotalCoinsFreeFloat": "N/A",
      "SortOrder": "1266"
    },
    ...
  }
}

    

        

        

            
Thứ hạng
            
Tên
            
Ký hiệu
            
Giá (USD)
            
1H
            
1D
            
1W
            
Giá trị vốn hoá thị trường(Market Cap) (USD)
        
        

        
    

Chúng ta đã xây dựng xong ứng dụng Vue cho trang web của chúng ta. Còn một bước nữa là hoàn thành ứng dụng

Show data

Hiển thị dự kiến ​​dữ liệu của người dùng cuối ở phần HTML. Sử dụng những gì bạn đã học về Vue. js chúng ta sẽ có vòng lặp để hiển thị dữ liệu lên bảng

    

        

        

            
Thứ hạng
            
Tên
            
Ký hiệu
            
Giá (USD)
            
1H
            
1D
            
1W
            
Giá trị vốn hoá thị trường(Market Cap) (USD)
        
        

        
    

Thêm chút phong cách cho sinh động

• Nếu chỉ số tăng sẽ là màu xanh, ngược lại sẽ là màu đỏ. Add a method for Vue app

    

        

        

            
Thứ hạng
            
Tên
            
Ký hiệu
            
Giá (USD)
            
1H
            
1D
            
1W
            
Giá trị vốn hoá thị trường(Market Cap) (USD)
        
        

        
    

và sửa lại phần ràng buộc dữ liệu

    

        

        

            
Thứ hạng
            
Tên
            
Ký hiệu
            
Giá (USD)
            
1H
            
1D
            
1W
            
Giá trị vốn hoá thị trường(Market Cap) (USD)
        
        

        
    

Như vậy là chúng ta đã hoàn thành ứng dụng của mình. Các bạn có thể tham khảo source code đã hoàn thành của mình tại Gtihub