Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Titanium Mobile

Membuat Aplikasi Penawaran Saham: Mencari Data Saham dengan YQL

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Make a Stock Quote App with Raphael JS, YQL, and Titanium Mobile.
Make a Stock Quote App: Displaying Charts with Raphael JS

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Dalam seri tutorial ini, saya akan mengajarkan Anda cara membuat aplikasi penawaran saham dengan Raphael JS, Titanium Mobile, dan layanan web YQL dri Yahoo. Grafik Raphael JS akan digunakan untuk menyajikan informasi penawaran saham secara grafikal, Titanium Mobile akan digunakan untuk meng-cross-compile aplikasi iOS asli, dan tabel data YQL benar-benar akan mengambil informasi saham.

Pengantar Yahoo YQL & Raphael JS

YQL adalah bahasa mirip SQL yang memungkinkan Anda untuk kueri, menyaring dan menggabungkan data dari berbagai sumber di jaringan Yahoo! dan sumber data terbuka lainnya. Biasanya, akses pengembang ke data dari berbagai sumber daya berbeda dan memerlukan panggilan ke beberapa API dari penyedia yang berbeda, seringkali dengan berbagai format feed. YQL menghilangkan masalah ini dengan menyediakan endpoint tunggal untuk melakukan kueri dan membentuk data yang Anda minta. Dalam tutorial ini, kita akan menggunakan tabel data terbuka YQL yang disediakan oleh Yahoo Finance untuk mengambil dan menyajikan informasi penawaran saham.

Presentasi informasi ini adalah di mana grafik Raphael JS masuk. Bagan dan grafik adalah cara termudah dan paling logis untuk menyajikan garis waktu data keuangan, dan Titanium Mobile tidak dilengkapi dengan API pembuatan grafik asli. Raphael adalah sumber-terbuka dan berlisensi MIT, dan untungnya sangat ramah mobile karena ditulis dalam JavaScript standar, mempertahankan jejak proses rendah, dan benar-benar me-render dalam format SVG yang berarti dapat dengan mudah diubah ukurannya untuk menyesuaikan layar mobile apa pun tanpa penurunan kualitas gambar!

Pratinjau Aplikasi Akhir

Berikut ini adalah pratinjau aplikasi yang akan kami susun dalam seri ini:

Langkah 1: Membuat Sebuah Proyek Baru

Buka Titanium Developer dan buat proyek baru. Anda dapat memberikan nama proyek apa pun yang Anda inginkan, tetapi saya akan menggunakan judul "StockQuotes" untuk kesederhanaan. Sekarang adalah saat yang tepat untuk mengunduh file sumber untuk proyek ini juga. Unduh dan unzip file proyek yang terlampir pada posting ini dan salin folder "images" ke dalam direktori "Resources" dari proyek Titanium baru Anda. Secara default, Titanium juga menyertakan dua file ikon di root direktori "Resources" Anda yang bernama KS_nav_ui.png dan KS_nav_views.png - kita tidak memerlukannya jadi lanjutkan dan pindahkan kedua hal ini ke trash.

Langkah 2: Membuat Antarmuka Dasar

Buka file app.js, di root direktori "Resources" Anda, ke editor favorit Anda. Kita tidak memerlukan kode yang dihasilkan secara otomatis, jadi hapus semuanya dan ganti dengan yang berikut:

Apa yang telah kita lakukan di atas adalah menciptakan cangkang yang sederhana dan bergaya bagus untuk aplikasi kita. Ada ruang di bagian atas untuk membuat bidang pencarian, dan dua lagi kotak kosong untuk menempatkan informasi saham dan bagan kita. Semua ini telah ditambahkan ke ScrollView sehingga kita dapat dengan mudah menggulir aplikasi kita untuk melihat informasi apa pun yang disembunyikan dari batas-batas layar. Jalankan aplikasi Anda di emulator iPhone dan sekarang seharusnya terlihat seperti gambar di bawah ini:

Langkah 3: Membuat Bidang Pencarian

Langkah selanjutnya adalah membuat bidang teks dan tombol pencarian yang akan digunakan pengguna untuk berinteraksi dengan aplikasi kita dengan menyediakan simbol saham (misalnya APPL untuk Apple Computers) untuk dicari. Masukkan kode berikut sebelum baris di mana Anda menambahkan objek searchBox Anda ke scrollArea (baris 39).

Apa yang kita capai di atas adalah untuk membuat dua komponen masukan yang diperlukan bagi pengguna untuk memasukkan data (penawaran saham dalam kasus ini) dan untuk melakukan tindakan berdasarkan masukan tersebut dengan mengetuk tombol pencarian. Jika Anda belum menyadarinya, objek tombol btnSearch kami memiliki event listener yang akan diaktifkan setiap kali pengguna menyentuhnya dan memanggil fungsi bernama searchYQL. Jika Anda menjalankan aplikasi di emulator sekarang, Anda akan berakhir dengan layar kesalahan merah besar karena kita belum membuat fungsi ini. Mari lakukan itu sekarang.

Masukkan berikut ini di bagian atas file app.js Anda, setelah baris Titanium.UI.setBackgroundColor:

Jika Anda belum melakukannya, simpan file app.js Anda dan jalankan di emulator. Anda seharusnya melihat layar yang serupa dengan yang di bawah ini:

Langkah 4: Mencari Penawaran Saham Menggunakan Yahoo YQL

Sekarang, sebelum kita mencari YQL untuk informasi tentang saham kita, kita perlu membuat beberapa label dan gambar yang akan masuk ke dalam quoteInfoBox kita dan menyajikan informasi itu kepada pengguna. Ini adalah proses yang cukup sederhana. Kode berikut harus ditempatkan sebelum Anda menambahkan quoteInfoBox ke scrollArea on baris 93.

Setelah label dan gambar panah pergerakan saham kita telah ditambahkan, Anda seharusnya dapat menjalankan emulator dan berakhir dengan layar seperti ini:

Sekarang mari kita lakukan sesuatu yang berguna dengan tata letak ini dan mengisinya dengan data saham dari Yahoo! Untuk melakukan itu kita perlu memperluas fungsi searchYQL() kosong kita dan melakukan pencarian terhadap tabel data keuangan Yahoo YQL menggunakan kombinasi sintaks YQL dan metode Titanium.Yahoo.yql() dari Titanium.

Jadi, apa yang sebenarnya terjadi di sini dalam fungsi searchYQL()? Pertama, kita melakukan validasi dasar pada bidang teks untuk memastikan pengguna telah memasukkan penawaran saham sebelum menekan pencarian. Jika penawaran saham ditemukan, kita menggunakan metode blur() dari bidang teks untuk memastikan keyboard menjadi tersembunyi. Daging dari kode berputar di sekitar membuat kueri Yahoo YQL menggunakan sintaks yang benar dan menyediakan nilai bidang teks sebagai parameter simbol. Kueri YQL ini hanyalah sebuah string, digabungkan bersama menggunakan simbol + seperti yang Anda lakukan dengan manipulasi string lainnya di JavaScript. Kita kemudian mengeksekusi permintaan kita menggunakan metode Titanium.Yahoo.yql(), yang mengembalikan hasil dalam objek 'e' dari fungsi inline.

Data di dalam objek 'e' hanyalah JSON, format data cepat yang umum, cepat ditemukan di mana-mana di web dan dengan semua API utama. Menggunakan data ini adalah masalah notasi titik sederhana. Dalam kode kita, kita pertama kali memeriksa properti bernama data.quote.ErrorIndicationreturnedforsymbolchangedinvalid untuk memastikan bahwa simbol yang dimasukkan pengguna adalah kode saham yang valid. Jika ya, kita dapat menetapkan semua nilai ke label kita! Terakhir, kita melakukan pengecekan untuk melihat apakah harga saham ditutup lebih tinggi dari pembukaannya, jika demikian maka kita dapat menetapkan gambar pergerakan saham ke panah hijau "up", yang menandakan kenaikan dalam nilainya. Jika jatuh nilainya, kita bisa memindahkan gambar ke panah merah, "down".

Jalankan kode di emulator Anda dan masukkan kode, seperti AAPL. Anda harus mendapatkan layar berikut dengan data serupa yang dikembalikan setelah menekan tombol pencarian:

Waktu Berikutnya. . .

Dalam tutorial berikutnya dalam seri ini, yang akan diterbitkan minggu depan, saya akan memandu Anda melalui pengaturan perpustakaan grafik Raphael JS, menyiapkan web view untuk menampilkan grafik, mengumpulkan data historis saham dengan YQL, dan, tentu saja, menggambar representasi grafik sebenarnya di layar untuk pengguna! Pastikan untuk berlangganan melalui RSS atau Twitter jika Anda ingin diberitahu ketika posting berikutnya dirilis!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.