Создайте одностраничное приложение JavaScript без фреймворка

Последние курсы валют

Для этой задачи мы будем использовать конечную точку Fixer Latest Rates . Откройте файл .env и добавьте свой ключ API. Мы также укажем время ожидания и символы, которые мы перечислим на нашей странице. Не стесняйтесь увеличивать значение тайм-аута, если у вас медленное интернет-соединение:

 API_KEY=<paste key here> PORT=3000 TIMEOUT=5000 SYMBOLS=EUR,USD,GBP,AUD,BTC,KES,JPY,CNY 

Затем создайте файл lib/fixer-service.js . Здесь мы напишем вспомогательный код для нашего сервера Express, чтобы легко запрашивать информацию у Fixer. Скопируйте следующий код:

 require('dotenv').config(); const axios = require('axios'); const symbols = process.env.SYMBOLS || 'EUR,USD,GBP'; // Axios Client declaration const api = axios.create({ baseURL: 'http://data.fixer.io/api', params: { access_key: process.env.API_KEY, }, timeout: process.env.TIMEOUT || 5000, }); // Generic GET request function const get = async (url) => { const response = await api.get(url); const { data } = response; if (data.success) { return data; } throw new Error(data.error.type); }; module.exports = { getRates: () => get(`/latest&symbols=${symbols}&base=EUR`), }; 

Опять же, потратьте некоторое время на просмотр кода, чтобы понять, что происходит. Если вы не уверены, вы также можете проверить документацию для dotenv , axios и ознакомиться с экспортом модулей . Теперь давайте сделаем быстрый тест, чтобы убедиться, что getRates() работает.

Откройте server.js и добавьте этот код:

 const { getRates } = require('./lib/fixer-service'); ... // Place this block at the bottom const test = async() => { const data = await getRates(); console.log(data); } test(); 

Запустите npm start или node server . Через несколько секунд вы должны получить следующий вывод:

 { success: true, timestamp: 1523871848, base: 'EUR', date: '2018-04-16', rates: { EUR: 1, USD: 1.23732, GBP: 0.865158, AUD: 1.59169, BTC: 0.000153, KES: 124.226892, JPY: 132.608498, CNY: 7.775567 } } 

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

 // Express Error handler const errorHandler = (err, req, res) => { if (err.response) { // The request was made and the server responded with a status code // that falls out of the range of 2xx res.status(403).send({ title: 'Server responded with an error', message: err.message }); } else if (err.request) { // The request was made but no response was received res.status(503).send({ title: 'Unable to communicate with server', message: err.message }); } else { // Something happened in setting up the request that triggered an Error res.status(500).send({ title: 'An unexpected error occurred', message: err.message }); } }; // Fetch Latest Currency Rates app.get('/api/rates', async (req, res) => { try { const data = await getRates(); res.setHeader('Content-Type', 'application/json'); res.send(data); } catch (error) { errorHandler(error, req, res); } }); 

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

Давайте подтвердим, что этот бит кода работает. Перезапустите сервер Express и перейдите в браузере по этому адресу: localhost: 3000 / api / rate . Вы должны увидеть тот же результат JSON, который был показан в консоли. Теперь мы можем реализовать представление, которое будет отображать эту информацию в аккуратной элегантной таблице.

Откройте public/index.html и замените rates-template следующим кодом:

 <!-- Currency Rates Template --> <script id="rates-template" type="text/x-handlebars-template"> <h1 class="ui header">Currency Rates</h1> <hr> <div class="ui loading basic segment"> <div class="ui horizontal list"> <div class="item"> <i class="calendar alternate outline icon"></i> <div class="content"> <div class="ui sub header">Date</div> <span>{{date}}</span> </div> </div> <div class="item"> <i class="money bill alternate outline icon"></i> <div class="content"> <div class="ui sub header">Base</div> <span>{{base}}</span> </div> </div> </div> <table class="ui celled striped selectable inverted table"> <thead> <tr> <th>Code</th> <th>Rate</th> </tr> </thead> <tbody> {{#each rates}} <tr> <td>{{@key}}</td> <td>{{this}}</td> </tr> {{/each}} </tbody> </table> </div> </script> 

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

Теперь давайте обновим наш код в public/js/app.js чтобы использовать этот новый шаблон. Замените первую route.add('/') следующим кодом:

 // Instantiate api handler const api = axios.create({ baseURL: 'http://localhost:3000/api', timeout: 5000, }); // Display Error Banner const showError = (error) => { const { title, message } = error.response.data; const html = errorTemplate({ color: 'red', title, message }); el.html(html); }; // Display Latest Currency Rates router.add('/', async () => { // Display loader first let html = ratesTemplate(); el.html(html); try { // Load Currency Rates const response = await api.get('/rates'); const { base, date, rates } = response.data; // Display Rates Table html = ratesTemplate({ base, date, rates }); el.html(html); } catch (error) { showError(error); } finally { // Remove loader status $('.loading').removeClass('loading'); } }); 

Первый блок кода создает клиент API для связи с нашим прокси-сервером. Второй блок — это глобальная функция для обработки ошибок. Его работа заключается просто в отображении баннера с ошибкой на случай, если что-то пойдет не так на стороне сервера. В третьем блоке мы получаем данные о тарифах от localhost:3000/api/rates конечную точку localhost:3000/api/rates и передаем их в rates-template для отображения информации.

Просто обновите браузер. Теперь у вас должно появиться следующее представление:

 getSymbols: () => get('/symbols'), 

 require('dotenv').config(); const axios = require('axios'); const api = axios.create({ baseURL: 'https://free.currencyconverterapi.com/api/v5', timeout: process.env.TIMEOUT || 5000, }); module.exports = { convertCurrency: async (from, to) => { const response = await api.get(`/convert?q=${from}_${to}&compact=y`); const key = Object.keys(response.data)[0]; const { val } = response.data[key]; return { rate: val }; }, }; 

 const { getRates, getSymbols, } = require('./lib/fixer-service'); const { convertCurrency } = require('./lib/free-currency-service'); ... // Insert right after get '/api/rates', just before the redirect statement // Fetch Symbols app.get('/api/symbols', async (req, res) => { try { const data = await getSymbols(); res.setHeader('Content-Type', 'application/json'); res.send(data); } catch (error) { errorHandler(error, req, res); } }); // Convert Currency app.post('/api/convert', async (req, res) => { try { const { from, to } = req.body; const data = await convertCurrency(from, to); res.setHeader('Content-Type', 'application/json'); res.send(data); } catch (error) { errorHandler(error, req, res); } }); 

 // Test Symbols Endpoint const test = async() => { const data = await getSymbols(); console.log(data); } // Test Currency Conversion Endpoint const test = async() => { const data = await convertCurrency('USD', 'KES'); console.log(data); } 

 <script id="exchange-template" type="text/x-handlebars-template"> <h1 class="ui header">Exchange Rate</h1> <hr> <div class="ui basic loading segment"> <form class="ui form"> <div class="three fields"> <div class="field"> <label>From</label> <select class="ui dropdown" name="from" id="from"> <option value="">Select Currency</option> {{#each symbols}} <option value="{{@key}}">{{this}}</option> {{/each}} </select> </div> <div class="field"> <label>To</label> <select class="ui dropdown" name="to" id="to"> <option value="">Select Currency</option> {{#each symbols}} <option value="{{@key}}">{{this}}</option> {{/each}} </select> </div> <div class="field"> <label>Amount</label> <input type="number" name="amount" id="amount" placeholder="Enter amount"> </div> </div> <div class="ui primary submit button">Convert</div> <div class="ui error message"></div> </form> <br> <div id="result-segment" class="ui center aligned segment"> <h2 id="result" class="ui header"> 0.00 </h2> </div> </div> </script> 

 { "success": true, "symbols": { "AED": "United Arab Emirates Dirham", "AFN": "Afghan Afghani", "ALL": "Albanian Lek", "AMD": "Armenian Dram", } } 

 // Perform POST request, calculate and display conversion results const getConversionResults = async () => { // Extract form data const from = $('#from').val(); const to = $('#to').val(); const amount = $('#amount').val(); // Send post data to Express(proxy) server try { const response = await api.post('/convert', { from, to }); const { rate } = response.data; const result = rate * amount; $('#result').html(`${to} ${result}`); } catch (error) { showError(error); } finally { $('#result-segment').removeClass('loading'); } }; // Handle Convert Button Click Event const convertRatesHandler = () => { if ($('.ui.form').form('is valid')) { // hide error message $('.ui.error.message').hide(); // Post to Express server $('#result-segment').addClass('loading'); getConversionResults(); // Prevent page from submitting to server return false; } return true; }; router.add('/exchange', async () => { // Display loader first let html = exchangeTemplate(); el.html(html); try { // Load Symbols const response = await api.get('/symbols'); const { symbols } = response.data; html = exchangeTemplate({ symbols }); el.html(html); $('.loading').removeClass('loading'); // Validate Form Inputs $('.ui.form').form({ fields: { from: 'empty', to: 'empty', amount: 'decimal', }, }); // Specify Submit Handler $('.submit').click(convertRatesHandler); } catch (error) { showError(error); } }); 

 npm install body-parser 

 const bodyParser = require('body-parser'); ... /** Place this code right before the error handler function **/ // Parse POST data as URL encoded data app.use(bodyParser.urlencoded({ extended: true, })); // Parse POST data as JSON app.use(bodyParser.json()); 

 https://data.fixer.io/api/2013-12-24 ? access_key = API_KEY & base = GBP & symbols = USD,CAD,EUR 

 { "success": true, "historical": true, "date": "2013-12-24", "timestamp": 1387929599, "base": "GBP", "rates": { "USD": 1.636492, "EUR": 1.196476, "CAD": 1.739516 } } 

 ... /** Place right after getSymbols **/ getHistoricalRate: date => get(`/${date}&symbols=${symbols}&base=EUR`), ... 

 ... const { getRates, getSymbols, getHistoricalRate } = require('./lib/fixer-service'); ... /** Place this after '/api/convert' post function **/ // Fetch Currency Rates by date app.post('/api/historical', async (req, res) => { try { const { date } = req.body; const data = await getHistoricalRate(date); res.setHeader('Content-Type', 'application/json'); res.send(data); } catch (error) { errorHandler(error, req, res); } }); ... 

 const test = async() => { const data = await getHistoricalRate('2012-07-14'); console.log(data); } test(); 

 <script id="historical-template" type="text/x-handlebars-template"> <h1 class="ui header">Historical Rates</h1> <hr> <form class="ui form"> <div class="field"> <label>Pick Date</label> <div class="ui calendar" id="calendar"> <div class="ui input left icon"> <i class="calendar icon"></i> <input type="text" placeholder="Date" id="date"> </div> </div> </div> <div class="ui primary submit button">Fetch Rates</div> <div class="ui error message"></div> </form> <div class="ui basic segment"> <div id="historical-table"></div> </div> </script> 

 npm install semantic-ui-calendar 

 ... <script src="scripts/semantic-ui-css/semantic.min.js"></script> <script src="scripts/semantic-ui-calendar/dist/calendar.min.js"></script> .... 

 const getHistoricalRates = async () => { const date = $('#date').val(); try { const response = await api.post('/historical', { date }); const { base, rates } = response.data; const html = ratesTemplate({ base, date, rates }); $('#historical-table').html(html); } catch (error) { showError(error); } finally { $('.segment').removeClass('loading'); } }; const historicalRatesHandler = () => { if ($('.ui.form').form('is valid')) { // hide error message $('.ui.error.message').hide(); // Indicate loading status $('.segment').addClass('loading'); getHistoricalRates(); // Prevent page from submitting to server return false; } return true; }; router.add('/historical', () => { // Display form const html = historicalTemplate(); el.html(html); // Activate Date Picker $('#calendar').calendar({ type: 'date', formatter: { //format date to yyyy-mm-dd date: date => new Date(date).toISOString().split('T')[0], }, }); // Validate Date input $('.ui.form').form({ fields: { date: 'empty', }, }); $('.submit').click(historicalRatesHandler); });