Ai tham gia Blockchain và Crypto Currency thì không còn lạ lẫm gì với TradingView, một công cụ rất mạnh để hỗ trợ phân tích kỹ thuật cho 1 đồng Coin / Chứng khoán / Index,… Nhưng làm thế nào bạn sử dụng được giao diện của TradingView trên chính website của bạn, với dữ liệu mà do chính bạn đã thu thập được. Bài này mình sẽ hướng dẫn các bạn developer thực hiện tích hợp TradingView lên website của bạn.
Để tích hợp bạn cần:
- Step 1: Tải thư viện Charting Library của TradingView
- Step 2: Tạo DataFeeder tương thích với TradingView
Mục lục
Step 1: Tải thư viện Charting Library của TradingView
Charting Library là một giải pháp độc lập mà bạn có thể tải xuống, lưu trữ trên máy chủ của mình, kết nối dữ liệu của riêng bạn và sử dụng miễn phí trong trang web hoặc ứng dụng của bạn. Bộ thư viện Charting Library này viết bằng Javascript giúp chúng tao tạo biểu đồ chuyên nghiệp như trên TradingView. Toàn bộ API của Charting Library bạn xem tại: TradingView Charting Library. Nhưng làm thế nào để có được bộ thư viện Charting Library để có thể chạy dưới local hoặc trên website của bạn?
Có nhiều cách để bạn có được bộ thư viện Charting Library của TradingView.
Tải trực tiếp từ trang web chính thức của TradingView
Bạn vào trang thư viện Charting Library của TradingView để tải thư viện về. Hiện tại có ba loại:
- Lightweight Charts: Bản miễn phí và mã nguồn mở với kích thước chỉ 45K.
- Technical Analysis Charts: Biểu đồ hỗ trợ mạnh cho các nhà phân tích kỹ thuật. Bản này cũng miễn phí nhưng để nhận được bộ thư viện bạn phải gửi 1 request tới TradingView và bạn phải là tổ chức.
- Charting & Trading Platform: Giao diện đầy đủ như trên trang TradingView với nhiều tính năng nâng cao. Để có bộ thư viện, bạn cũng phải gửi request tới TradingView và bạn phải là tổ chức.
Lightweight Chart thì khá đơn giản, thông thường chúng ta cần tích hợp bản Technical Analysis Charts vào website. Để có code bản Technical Analysis Charts thì bạn phải request tới TradingView khá phức tạp, bạn phải là một tổ chức, bạn phải nói lý do do hợp lý. Nói chung cũng không dễ.
Tải từ trang web của bên thứ ba
Bạn có thể tìm kiếm một số bên chia sẻ thư viện này trên Google. Tôi search và có tìm ra trang web https://www.bse-sofia.bg/tradingview có chia sẻ. Bạn dùng các tool tải toàn bộ các file từ website để tải về. Nhưng bạn nhớ rằng, những trang này có thể online nhưng có thể offline bất cứ lúc nào. Trên Ubuntu bạn có thể dùng lệnh:
wget -r --no-check-certificate --level=6 https://www.bse-sofia.bg/tradingview
Bản tradingview-demo-02 này mình không tiện chia sẻ public. Nếu ai thực sự cần có thể liên hệ lại. Tốt nhất các bạn cứ lấy trực tiếp từ website về.
Bạn có thể tham khảo thêm tại: charting-library-examples hoặc TradingView-API
Ngoài ra bạn có thể lấy charting-library từ mã nguồn của Sunswap-Frontend.
Lấy bộ thư viện từ DexScreener
Nếu bạn là tổ chức thì bạn nên thực hiện request tới TradingView, còn nếu bạn chỉ là cá nhân thì các bạn có thể lấy bộ thư viện này từ bên khác. Lúc đầu tôi định lấy trừ trang Technical Analysis Charts Demo, nhưng tên file bị thay đổi liên tục mỗi khi request nên không sử dụng được.
Sau đó tôi thấy rằng thư viện trading view trên trang DexScreener có vẻ chuẩn hơn, tên file không bị thay đổi. Tôi đã lấy thử thư viện trang này và đã thành công chạy được. Có trên 80 tệp js và css, vì bạn phải chấp nhận mất chút thời gian để tải từng file được. Các bước thực hiện:
- B1: Tạo host bằng NodeJs. Chi tiết xem: Triển khai một server đơn giản (Static server) trên NodeJs
- B2: Tạo tệp index.html trong thư mục public, nội dùng lấy từ source code trang Demo. Từ source code này bạn sẽ thấy thư viện chính là charting_library/charting_library.standalone.js và datafeeds/udf/dist/bundle.js. Bạn tải 2 tệp này từ trang demo và tạo cấu trúc thư mục đúng theo đường dẫn.
- B3: Bạn vào trang DexScreener trên Chrome, bạn bật chế độ Debug bằng tổ hợp phím Ctrl+Shift+I, trong phần network bạn search “charting_library” sẽ thấy link này. Tải tệp này và lưu vào “public/charting_library/charting_library.standalone.js“
- B4: Bạn bật host NodeJs, mở link http://localhost:5000 trên Chrome, sang phần network, thấy file nào lỗi thì tải tương ứng về, lưu tương ứng vào thự mục trên local:
- charting_library/en-tv-chart.e2a841ff.html => https://dexscreener.com/tv/v22.032/en-tv-chart.e2a841ff.html
- charting_library/bundles/8445.e3ed5f183ca7539d37f0.css: https://dexscreener.com/tv/v22.032/bundles/8445.e3ed5f183ca7539d37f0.css
- charting_library/bundles/vendors.3197279804dd7477f3fb.js: https://dexscreener.com/tv/v22.032/bundles/vendors.3197279804dd7477f3fb.js
- charting_library/bundles/runtime.f1210af3518e525e94d7.js: https://dexscreener.com/tv/v22.032/bundles/runtime.f1210af3518e525e94d7.js
- … (Đoạn này phải tay to)
Sau khi lấy được hết các tệp cần thiết, chạy thử ở local bạn sẽ được giao diện như thế này (Mình đổi sang dark theme):
Bản tradingview-demo-01 này mình không tiện chia sẻ public. Nếu ai thực sự cần có thể liên hệ lại. Tốt nhất các bạn cứ chịu khó làm như mình chia sẻ là được, muốn có thành quả cũng phải mất công một chút.
Step 2: Tạo DataFeeder tương thích với TradingView
Đầu tiên bạn phải đọc hướng dẫn từ trang TradingView: Connecting Data. Theo hướng dẫn từ trang này bạn có thể kết nối dữ liệu theo 2 cách:
- C1: Bạn tự xây dựng 1 API theo đúng chuẩn UDF. Giống như API dữ liệu demo của TradingView: https://demo-feed-data.tradingview.com. Với cách này bạn không biết nhiều về Javascript, còn phần API bạn có thể code bằng bất kỳ ngôn ngữ nào, miễn đảm bảo đúng chuẩn.
- C2: Bạn sử dụng DataFeed API. Một tập hợp các phương thức theo chuẩn được triển khai trong Javascript.
Tìm hiểu các API cần sử dụng trong dữ liệu Demo của TradingView
C1: Tự xây dựng 1 API theo đúng chuẩn UDF
Chuẩn UDF đã được nói rất rõ trong tài liệu, bạn chỉ cần cài đặt theo là được. Chúng ta cần sử dụng thư viện UDFCompatibleDatafeed để hỗ trợ kết nối tới API. Hình dưới là cách khởi tạo để sử dụng API này:
Tôi đã thử kiểm tra các API này trên link dữ liệu demo. Dưới đây là một số link và dữ liệu trả về:
https://demo-feed-data.tradingview.com/config
{
"supports_search": true,
"supports_group_request": false,
"supports_marks": true,
"supports_timescale_marks": true,
"supports_time": true,
"exchanges": [
{
"value": "",
"name": "All Exchanges",
"desc": ""
},
{
"value": "NasdaqNM",
"name": "NasdaqNM",
"desc": "NasdaqNM"
},
{
"value": "NYSE",
"name": "NYSE",
"desc": "NYSE"
},
{
"value": "NCM",
"name": "NCM",
"desc": "NCM"
},
{
"value": "NGM",
"name": "NGM",
"desc": "NGM"
}
],
"symbols_types": [
{
"name": "All types",
"value": ""
},
{
"name": "Stock",
"value": "stock"
},
{
"name": "Index",
"value": "index"
}
],
"supported_resolutions": [
"D",
"2D",
"3D",
"W",
"3W",
"M",
"6M"
]
}
https://demo-feed-data.tradingview.com/time
1685009148https://demo-feed-data.tradingview.com/symbols?symbol=AAPL
{
"name": "AAPL",
"exchange-traded": "NasdaqNM",
"exchange-listed": "NasdaqNM",
"timezone": "America/New_York",
"minmov": 1,
"minmov2": 0,
"pointvalue": 1,
"session": "0930-1630",
"has_intraday": false,
"has_no_volume": false,
"description": "Apple Inc.",
"type": "stock",
"supported_resolutions": [
"D",
"2D",
"3D",
"W",
"3W",
"M",
"6M"
],
"pricescale": 100,
"ticker": "AAPL"
}
{
"t": [
1520985600,
1521072000,
1521158400,
1521417600,
1521504000,
1521590400,
1521676800,
1521763200,
1522022400,
1522108800
],
"o": [
180.32,
178.5,
178.65,
177.32,
175.24,
175.04,
170,
168.39,
168.07,
173.68
],
"h": [
180.52,
180.24,
179.12,
177.47,
176.8,
175.09,
172.68,
169.92,
173.1,
175.15
],
"l": [
177.81,
178.0701,
177.62,
173.66,
174.94,
171.26,
168.6,
164.94,
166.44,
166.92
],
"c": [
178.44,
178.65,
178.02,
175.3,
175.24,
171.27,
168.845,
164.94,
172.77,
168.34
],
"v": [
29075469,
22584565,
36836456,
32804695,
19314039,
35247358,
41051076,
40248954,
36272617,
38962839
],
"s": "ok"
}
https://demo-feed-data.tradingview.com/marks?symbol=AAPL&from=1484317800&to=2114355600&resolution=1D
{
"id": [
0,
1,
2,
3,
4,
5
],
"time": [
1522108800,
1521763200,
1521504000,
1521504000,
1520812800,
1519516800
],
"color": [
"red",
"blue",
"green",
"red",
"blue",
"green"
],
"text": [
"Red",
"Blue",
"Green + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"Red again",
"Blue",
"Green"
],
"label": [
"A",
"B",
"CORE",
"D",
"EURO",
"F"
],
"labelFontColor": [
"white",
"white",
"red",
"#FFFFFF",
"white",
"#000"
],
"minSize": [
14,
28,
7,
40,
7,
14
]
}
[
{
"id": "tsm1",
"time": 1522108800,
"color": "#F23645",
"label": "A",
"tooltip": ""
},
{
"id": "tsm2",
"time": 1521763200,
"color": "#2962FF",
"label": "D",
"tooltip": [
"Dividends: $0.56",
"Date: Fri Mar 23 2018"
]
},
{
"id": "tsm3",
"time": 1521504000,
"color": "#089981",
"label": "D",
"tooltip": [
"Dividends: $3.46",
"Date: Tue Mar 20 2018"
]
},
{
"id": "tsm4",
"time": 1520812800,
"color": "#F23645",
"label": "E",
"tooltip": [
"Earnings: $3.44",
"Estimate: $3.60"
],
"shape": "earningDown"
},
{
"id": "tsm7",
"time": 1519516800,
"color": "#089981",
"label": "E",
"tooltip": [
"Earnings: $5.40",
"Estimate: $5.00"
],
"shape": "earningUp"
},
{
"id": "tsm8",
"time": 1519516800,
"color": "#FF9800",
"label": "S",
"tooltip": [
"Split: 4/1",
"Date: Sun Feb 25 2018"
]
}
]
https://demo-feed-data.tradingview.com/search?limit=30&query=X&type=&exchange=
[
{
"symbol": "XOM",
"full_name": "XOM",
"description": "Exxon Mobil Corporation",
"exchange": "NYSE",
"type": "stock"
},
{
"symbol": "AXP",
"full_name": "AXP",
"description": "American Express Company",
"exchange": "NYSE",
"type": "stock"
},
{
"symbol": "EXC",
"full_name": "EXC",
"description": "Exelon Corporation",
"exchange": "NYSE",
"type": "stock"
},
{
"symbol": "EXPE",
"full_name": "EXPE",
"description": "Expedia Inc.",
"exchange": "NasdaqNM",
"type": "stock"
},
{
"symbol": "ALXN",
"full_name": "ALXN",
"description": "Alexion Pharmaceuticals, Inc.",
"exchange": "NasdaqNM",
"type": "stock"
},
{
"symbol": "AUXL",
"full_name": "AUXL",
"description": "Auxilium Pharmaceuticals Inc.",
"exchange": "NasdaqNM",
"type": "stock"
},
{
"symbol": "BAX",
"full_name": "BAX",
"description": "Baxter International Inc.",
"exchange": "NYSE",
"type": "stock"
},
{
"symbol": "EBIX",
"full_name": "EBIX",
"description": "Ebix Inc.",
"exchange": "NasdaqNM",
"type": "stock"
},
{
"symbol": "ESRX",
"full_name": "ESRX",
"description": "Express Scripts Holding Company",
"exchange": "NasdaqNM",
"type": "stock"
},
{
"symbol": "KERX",
"full_name": "KERX",
"description": "Keryx Biopharmaceuticals Inc.",
"exchange": "NCM",
"type": "stock"
}
]C2: Bạn sử dụng DataFeed API
Để kết nối được dữ liệu bạn phải tạo đối tượng với interface xác định theo mô tả trong Charting Library methods. Chi tiết cài đặt Datafeed bạn xem tại: Implement datafeed. Bài viết này hướng dẫn từng bước tạo Datafeed lấy dữ liệu từ CryptoCompare API
Nói một cách đơn giản, trên Javascript bạn phải cài đặt một đối tượng có các interface như sau:
{
onReady: (callback) => {
console.log('[onReady]: Method call');
},
searchSymbols: (userInput, exchange, symbolType, onResultReadyCallback) => {
console.log('[searchSymbols]: Method call');
},
resolveSymbol: (symbolName, onSymbolResolvedCallback, onResolveErrorCallback, extension) => {
console.log('[resolveSymbol]: Method call', symbolName);
},
getBars: (symbolInfo, resolution, periodParams, onHistoryCallback, onErrorCallback) => {
console.log('[getBars]: Method call', symbolInfo);
},
subscribeBars: (symbolInfo, resolution, onRealtimeCallback, subscriberUID, onResetCacheNeededCallback) => {
console.log('[subscribeBars]: Method call with subscriberUID:', subscriberUID);
},
unsubscribeBars: (subscriberUID) => {
console.log('[unsubscribeBars]: Method call with subscriberUID:', subscriberUID);
},
};Xử lý như thế nào trong interface này hoàn toàn là do bạn, bạn có thể lấy dữ liệu từ server của bạn hoặc lấy dữ liệu từ một đơn vị cung cấp dữ liệu nào đó. Sau đó bạn chỉ cần chuẩn hóa lại nó để đảm bảo interface trên.
Mình là lập trình viên, mặc dù cũng đã khá lớn tuổi nhưng vẫn thích Lập trình. Gần đây mình tập trung tìm hiểu nhiều hơn về Lĩnh vực Blockchain. Với kiến thức tìm hiểu được, mình muốn viết ra để lưu lại cũng như để chia sẻ cho những người quan tâm. Mong mọi người góp ý và có thể cùng mình chia sẻ nhiều kiến thức hơn cho cộng đồng.
Trường
bạn có cung cấp bộ suorce không ? mình cá nhân mà xin tradingview mãi ko được
Lập Trình Blockchain
Bạn có thể request một trong hai bản tradingview-demo-01 hoặc tradingview-demo-02 ở trên nhé.