В этой серии руководств я расскажу вам, как создать приложение для котировок акций с помощью Raphael JS, Titanium Mobile и веб-службы YQL от Yahoo. Диаграммы Raphael JS будут использоваться для графического представления информации о котировках акций, Titanium Mobile будет использоваться для кросс-компиляции собственного приложения iOS, а таблицы данных YQL фактически будут получать информацию об акциях.
Введение в Yahoo YQL & Raphael JS
YQL — это SQL-подобный язык, который позволяет запрашивать, фильтровать и объединять данные из нескольких источников в Yahoo! сеть и другие открытые источники данных. Обычно доступ разработчика к данным из нескольких ресурсов является разрозненным и требует обращения к нескольким API от разных поставщиков, часто с разными форматами каналов. YQL устраняет эту проблему, предоставляя единую конечную точку для запроса и формирования данных, которые вы запрашиваете. В этом руководстве мы будем использовать таблицы открытых данных YQL, предоставленные Yahoo Finance, для получения и представления информации о котировках акций.
В этой презентации этой информации появляются диаграммы Raphael JS. Диаграммы и графики — это самый простой и логичный способ представления временной шкалы финансовых данных, а в Titanium Mobile нет встроенного API для построения диаграмм. Raphael имеет открытый исходный код и лицензию MIT, и, к счастью, она очень дружественна к мобильным устройствам, поскольку написана на стандартном JavaScript, сохраняет низкую нагрузку на обработку и фактически отображает в формате SVG, что означает, что ее можно легко изменить, чтобы она подходила для любого мобильного экрана без снижение качества изображения!
Final App Preview
Ниже приведен предварительный просмотр приложения, которое мы будем создавать в этой серии:
Шаг 1: Создайте новый проект
Откройте Titanium Developer и создайте новый проект. Вы можете дать проекту любое имя, какое захотите, но я буду использовать название «StockQuotes» для простоты. Сейчас самое время загрузить исходные файлы и для этого проекта. Загрузите и распакуйте файлы проекта, прикрепленные к этому сообщению, и скопируйте папку «images» в каталог «Resources» вашего нового проекта Titanium. По умолчанию Titanium также включает два файла значков в корне каталога «Ресурсы», которые называются KS_nav_ui.png и KS_nav_views.png — нам не нужно ни одного, так что давайте оба перенесем их в корзину.
Шаг 2. Создание базового интерфейса
Откройте файл app.js в корневом каталоге вашего «Ресурса» в вашем любимом редакторе. Нам не нужен автоматически сгенерированный код, поэтому удалите его и замените следующим:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
// This sets the background color of the master UIView
Titanium.UI.setBackgroundColor(‘#000’);
// Create the application window
var win1 = Titanium.UI.createWindow({
backgroundImage: ‘images/background.png’
});
// Create the title label for our app
var titleLabel = Titanium.UI.createLabel({
text: ‘Search Quotes’,
color: ‘#fff’,
height: 20,
width: 320,
top: 6,
textAlign: ‘center’,
font: {fontSize: 15, fontFamily: ‘Helvetica’, fontWeight: ‘bold’}
});
win1.add(titleLabel);
//Create the scroll area, all our content goes in here
var scrollArea = Titanium.UI.createScrollView({
top: 40,
width: 320,
height: 420,
contentHeight: ‘auto’
});
// Create the stock quote search box
var searchBox = Titanium.UI.createView({
width: 300,
left: 10,
top: 10,
height: 50,
borderRadius: 5,
backgroundImage: ‘images/gradient-small.png’
});
scrollArea.add(searchBox);
// Create the quote information box
var quoteInfoBox = Titanium.UI.createView({
width: 300,
left: 10,
top: 70,
height: 200,
borderRadius: 5,
backgroundImage: ‘images/gradient.png’
});
scrollArea.add(quoteInfoBox);
// Create the quote chart box
var quoteChartBox = Titanium.UI.createView({
width: 300,
left: 10,
top: 280,
height: 300,
borderRadius: 5,
backgroundImage: ‘images/gradient.png’
});
scrollArea.add(quoteChartBox);
// This small view just adds 10px of padding to the bottom of
// our scrollview (scrollArea)
var emptyView = Titanium.UI.createView({
height: 10,
top: 580
});
scrollArea.add(emptyView);
// Add the scrollview to the window
win1.add(scrollArea);
// Open the window
win1.open();
|
То, что мы сделали выше, создали базовую, хорошо стилизованную оболочку для нашего приложения. Вверху есть место для создания поля поиска и еще два пустых поля для размещения информации о наших запасах и нашего графика. Все это было добавлено в ScrollView, поэтому мы можем легко прокрутить наше приложение, чтобы просмотреть любую информацию, которая скрыта за пределами экрана. Запустите ваше приложение в эмуляторе iPhone, и оно должно выглядеть так, как показано ниже:
Шаг 3: Создание поля поиска
Нашим следующим шагом будет создание текстового поля и кнопки поиска, которые пользователь будет использовать для взаимодействия с нашим приложением, предоставляя биржевой символ (например, APPL для компьютеров Apple) для поиска. Введите следующий код перед строкой, в которую вы добавили объект scrollArea в scrollArea (строка 39).
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
// This is the input textfield for our stock code
var txtStockCode = Titanium.UI.createTextField({
hintText: ‘Stock code, eg APPL’,
borderWidth: 0,
width: 200,
left: 10,
height: 30,
font: {fontSize: 14, fontColor: ‘#262626’, fontFamily: ‘Helvetica’},
autoCorrect: false,
autocapitalization: Titanium.UI.TEXT_AUTOCAPITALIZATION_ALL
});
searchBox.add(txtStockCode);
// Create the search button from our search.png image
var btnSearch = Titanium.UI.createButton({
backgroundImage: ‘images/search.png’,
width: 80,
height: 30,
right: 10,
borderRadius: 3
});
// Add the event listener for this button
btnSearch.addEventListener(‘click’, searchYQL);
searchBox.add(btnSearch);
|
То, что мы сделали выше, — это создать два компонента ввода, необходимые пользователю для ввода данных (в данном случае котировки акций) и выполнить действие на основе этого ввода, нажав кнопку поиска. Если вы еще не заметили, у нашего btnSearch кнопки btnSearch есть прослушиватель событий, который срабатывает всякий раз, когда пользователь нажимает на него, и вызывает функцию с именем searchYQL . Если бы вы сейчас запустили приложение в эмуляторе, вы бы получили большой красный экран с ошибкой, поскольку мы еще не создали эту функцию. Давайте сделаем это сейчас.
Введите следующую строку в верхней части файла app.js после строки Titanium.UI.setBackgroundColor :
|
1
2
3
|
// This function is called on search button tap, it will query YQL for our stock data
function searchYQL() {
}
|
Если вы этого еще не сделали, сохраните файл app.js и запустите его в эмуляторе. Вы должны увидеть экран, подобный показанному ниже:
Шаг 4: Поиск котировок акций с помощью Yahoo YQL
Теперь, прежде чем мы будем искать в YQL информацию о наших акциях, нам нужно создать несколько ярлыков и изображений, которые войдут в наш quoteInfoBox и представят эту информацию пользователю. Это довольно простой процесс. Следующий код должен быть помещен перед добавлением quoteInfoBox в область scrollArea в строке 93.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
// Add the labels and images we need to show some basic stock information
var lblCompanyName = Titanium.UI.createLabel({
width: 280,
height: 30,
left: 10,
top: 10,
color: ‘#003366’,
font: {fontSize: 17, fontWeight: ‘bold’, fontFamily: ‘Helvetica’},
text: ‘No company selected’
});
quoteInfoBox.add(lblCompanyName);
var lblDaysLow = Titanium.UI.createLabel({
width: 280,
height: 20,
left: 10,
top: 50,
color: ‘#000’,
font: {fontSize: 14, fontWeight: ‘bold’, fontFamily: ‘Helvetica’},
text: ‘Days Low: ‘
});
quoteInfoBox.add(lblDaysLow);
var lblDaysHigh = Titanium.UI.createLabel({
width: 280,
height: 20,
left: 10,
top: 80,
color: ‘#000’,
font: {fontSize: 14, fontWeight: ‘bold’, fontFamily: ‘Helvetica’},
text: ‘Days High: ‘
});
quoteInfoBox.add(lblDaysHigh);
var lblLastOpen = Titanium.UI.createLabel({
width: 280,
height: 20,
left: 10,
top: 110,
color: ‘#000’,
font: {fontSize: 14, fontWeight: ‘bold’, fontFamily: ‘Helvetica’},
text: ‘Last Open: ‘
});
quoteInfoBox.add(lblLastOpen);
var lblLastClose = Titanium.UI.createLabel({
width: 280,
height: 20,
left: 10,
top: 140,
color: ‘#000’,
font: {fontSize: 14, fontWeight: ‘bold’, fontFamily: ‘Helvetica’},
text: ‘Last Close: ‘
});
quoteInfoBox.add(lblLastClose);
var lblVolume = Titanium.UI.createLabel({
width: 280,
height: 20,
left: 10,
top: 170,
color: ‘#000’,
font: {fontSize: 14, fontWeight: ‘bold’, fontFamily: ‘Helvetica’},
text: ‘Volume: ‘
});
quoteInfoBox.add(lblVolume);
|
После того, как ваши метки и наша стрелка со стоковым изображением движения будут добавлены, вы сможете запустить эмулятор и получить такой экран:
Теперь давайте сделаем что-нибудь полезное с этим макетом и наполним его данными из Yahoo! Для этого нам нужно расширить нашу пустую функцию searchYQL () и выполнить поиск по таблицам финансовых данных Yahoo YQL, используя комбинацию синтаксиса YQL и метода Titanium Titanium.Yahoo.yql () .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
// This function is called on search button tap.
function searchYQL() {
// Do some basic validation to ensure the user has entered a stock code value
if(txtStockCode.value != »)
{
txtStockCode.blur();
// Create the query string using a combination of YQL syntax and the value of the txtStockCode field
var query = ‘select * from yahoo.finance.quotes where symbol = «‘ + txtStockCode.value + ‘»‘;
// Execute the query and get the results
Titanium.Yahoo.yql(query, function(e) {
var data = e.data;
// Iff ErrorIndicationreturnedforsymbolchangedinvalid is null then we found a valid stock
if(data.quote.ErrorIndicationreturnedforsymbolchangedinvalid == null)
{
//we have some data!
lblCompanyName.text = data.quote.Name;
lblDaysLow.text = ‘Days Low: ‘ + data.quote.DaysLow;
lblDaysHigh.text = ‘Days High: ‘ + data.quote.DaysHigh;
lblLastOpen.text = ‘Last Open: ‘ + data.quote.Open;
lblLastClose.text = ‘Last Close: ‘ + data.quote.PreviousClose;
lblVolume.text = ‘Volume: ‘ + data.quote.Volume;
lblPercentChange.text = data.quote.PercentChange;
//if the previous close was equal or higher than the opening price, the
//stock direction is up… otherwise it went down!
if(data.quote.PreviousClose >= data.quote.Open) {
imgStockDirection.image = ‘images/arrow-up.png’;
}
else {
imgStockDirection.image = ‘images/arrow-down.png’;
}
}
else
{
//show an alert dialog saying nothing could be found
alert(‘No stock information could be found for ‘ + txtStockCode.value + ‘!’);
}
});
}
else
{
alert(‘You must provide a stock code to search upon, eg AAPL or YHOO’);
}
}
|
Итак, что же на самом деле происходит здесь в функции searchYQL() ? Во-первых, мы проводим очень простую проверку текстового поля, чтобы убедиться, что пользователь вошел в котировку акций до нажатия кнопки поиска. Если котировка акций найдена, мы используем метод blur() текстового поля, чтобы клавиатура стала скрытой. Основная часть кода вращается вокруг создания запроса YQL Yahoo с использованием правильного синтаксиса и предоставления значения текстового поля в качестве параметра символа. Этот YQL-запрос представляет собой просто строку, объединенную с помощью символа +, так же, как и при любых других манипуляциях со строками в JavaScript. Затем мы выполняем наш запрос, используя метод Titanium.Yahoo.yql() , который возвращает результаты в объекте ‘e’ встроенной функции.
Данные в объекте ‘e’ — это просто JSON, общий, быстрый формат данных, быстро распространяющийся в сети и со всеми основными API. Использование этих данных является вопросом простого точечного обозначения. В нашем коде мы сначала проверяем свойство data.quote.ErrorIndicationreturnedforsymbolchangedinvalid , чтобы убедиться, что введенный пользователем символ является действительным кодом запаса. Если это так, мы можем назначить все значения нашим меткам! Наконец, мы проверяем, закрылась ли цена акций выше, чем она открылась, и в таком случае мы можем установить для изображения движения акций зеленую стрелку «вверх», указывающую, что она выросла в цене. Если значение упало, мы можем переместить изображение в красную стрелку «вниз».
Запустите код в эмуляторе и введите код, такой как AAPL. Вы должны получить следующий экран с похожими данными, возвращаемыми после нажатия кнопки поиска:
В следующий раз. , ,
В следующем уроке из этой серии, который будет опубликован на следующей неделе, я расскажу вам о настройке библиотеки диаграмм Raphael JS, настройке веб-представления для отображения диаграммы, сборе исторических данных о запасах с помощью YQL и, конечно же, на самом деле рисование графического представления на экране для пользователя! Не забудьте подписаться через RSS или Twitter, если вы хотите получать уведомления о выходе следующего поста!