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

Cara Membangun Aplikasi Pebble

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (you can also view the original English article)

Final product image
What You'll Be Creating

Smartwatch Pebble telah ada sejak kampanye Kickstarter yang sangat sukses pada tahun 2012 dan merupakan pilihan populer di kalangan pengguna smartwatch. Hal ini disebabkan daya baterai yang sangat baik, harga murah, berbagai model untuk dipilih, dan kompatibilitas dengan iOS dan Android.

Pebble telah memiliki SDK pengembang sejak hari pertama, mendorong pengembang untuk membangun aplikasi yang menarik dan inovatif untuk platform Pebble. SDK selalu diperbarui, dengan fitur baru yang ditambahkan dari waktu ke waktu.

Aplikasi Pebble secara tradisional telah dikodekan dalam C, tetapi, baru-baru ini, Pebble telah menggunakan JavaScript dan membuka dunia pengembangan aplikasi pada platform mereka ke lebih banyak pengembang. Dalam pengantar untuk pengembangan Pebble, saya memandu Anda melalui beberapa dasar-dasar memulai dengan Pebble development menggunakan SDK dan pustaka Pebble.js dengan membangun aplikasi dan mengirimkannya ke toko aplikasi Pebble.

Memiliki Pebble atau pengetahuan sebelumnya dari bahasa C tidak diperlukan untuk tutorial ini.

1. Menyiapkan Proyek

Saat ini ada dua lingkungan di mana Anda dapat membangun aplikasi pebble. CloudPebble memungkinkan untuk mengembangkan aplikasi kerikil di browser. Hal ini bagus jika Anda berada di Windows atau menggunakan mesin kurang kuat.

Pilihan lain, dan pilihan yang tutorial ini akan mengikuti, adalah memiliki alur kerja pengembangan lokal. Hal ini memungkinkan Anda untuk bekerja secara offline dan menggunakan editor pilihan Anda. Pertama mari kita install Pebble tool dan SDK.

Saat ini, ada tidak ada dukungan resmi untuk Pebble tool dan SDK pada Windows sehingga bagian berikut menuntun Anda melalui langkah-langkah untuk menginstal Pebble tool dan SDK pada OS X dan Linux. Pebble merekomendasikan bahwa Anda menggunakan CloudPebble untuk pengembangan Windows, tetapi Anda juga dapat menggunakan mesin virtual Linux.

Cara termudah untuk menginstal Pebble tool di OS X adalah melalui Homebrew. Jika Anda belum menginstall Homebrew, Anda bisa mendapatkan petunjuk instalasi pada Homebrew website. Dengan Homebrew terinstall, Anda dapat menginstal alat Pebble dengan perintah berikut:

Ada beberapa langkah tambahan untuk mengambil untuk menginstal Pebble tool dan SDK pada Linux. Pebble memiliki panduan rinci tersedia yang bisa Anda ikuti. Setelah Anda menginstal Pebble tool, Anda akan memiliki perintah pebble yang tersedia untuk Anda dari baris perintah. Jalankan pebble --version menunjukkan informasi versi.

Antarmuka baris perintah pebble mencakup beberapa perintah yang nyaman. Anda dapat melihat daftar perintah ini dengan menjalankan pebble --help atau pebble -h. Salah satu perintah set up sebuah proyek baru dengan beberapa kode boilerplate. Buat sebuah direktori baru dan jalankan perintah berikut di root direktori baru:

Jika ini adalah pertama kalinya Anda membuat sebuah aplikasi pebble, Anda akan diminta untuk menerima persyaratan penggunaan dan lisensi pengembang pebble. Sekali Anda telah menerima ini, SDK Pebble terbaru (3.11.1 pada saat menulis) download dan diinstal.

Setelah menginstal SDK Pebble, sebuah proyek Pebble dasar diatur dalam direktori saat ini. Untuk membangun, menginstal dan menjalankan aplikasi Anda, Anda harus melakukan hal berikut. Pertama, pastikan bahwa Anda berada di root Pebble proyek Anda. Dalam kasus ini, kami di root direktori hello-pebble.

Berikutnya, jalankan perintah pebble build. Ketika kode dikompilasi, Anda akan melihat pesan 'build' finished sucessfully dan ada beberapa file baru dalam direktori build. Satu-satunya file yang kita perlu khawatir sekarang adalah hello-pebble.pbw. Ini adalah aplikasi yang akan dipasang pada jam tangan.

Untuk menjalankan aplikasi, kami menggunakan emulator Pebble dengan SDK Pebble. Pebble menggunakan emulator QEMU opensource. Saat ini, ada tiga generasi Pebble yang tersedia untuk mengembangkan. Pebble dan Pebble Steel adalah generasi asli Pebble. Waktu Pebble mendukung 64 warna dan menggunakan sedikit 3.x versi sistem operasi.

Pebble waktu putaran hampir identik dengan waktu Pebble kecuali tampilan melingkar dan lebih besar. Kerikil menggunakan nama-nama platform untuk membedakan tiga generasi Pebble smartwatches.

  • Aplite adalah nama platform yang digunakan untuk Pebble dan Pebble Steel.
  • Basalt adalah nama platform untuk Pebble Time.
  • Dan Chalk nama platform untuk Pebble Time Round.

Kita bisa meluncurkan salah satu emulator ini menggunakan flag --emulator setelah perintah pebble install, melewati platform yang kita inginkan untuk menargetkan. Sebagai contoh, jika kita ingin menjalankan aplikasi kami pada platform untuk Pebble Time, kita akan jalankan perintah berikut di direktori root proyek Pebble:

Perintah ini meluncurkan emulator, mulai platform yang dipilih, dan menginstall file .pbw disimpan dalam direktori build. Ini adalah apa yang harus Anda lihat di emulator:

Hello Pebble Basic App

Jam Pebble tidak memiliki layar sentuh dan dilengkapi dengan empat tombol, atas, bawah, select, dan back. Ini ditiru dengan up, down, kanan, dan kiri tombol pada keyboard Anda masing-masing. Menekan tombol ini, Anda tidak dapat menavigasi app yang Anda buat.

Jika kita membuka kode sumber proyek, Anda melihat bahwa itu ditulis dalam C. Untuk menggunakan Pebble.js untuk proyek, kita akan menggunakan template yang bisa kita mulai lebih cepat. Pebble.js adalah masih dalam versi beta saat menulis sehingga beberapa hal yang masih bisa berubah di masa depan.

Meninggalkan proyek direktori, menciptakan direktori baru, dan clone GitHub repo seperti ditunjukkan di bawah.

Setelah Anda telah clone repo, buka dalam text editor, dan melihat-lihat. Kode sumber aplikasi dapat ditemukan dalam direktori src. Di dalam direktori tersebut, Anda memiliki tiga direktori lain, js, simply, util, dan main.c file.

Folder js adalah tempat kita menaruh kode aplikasi. Direktori simply adalah tempat kode asli adalah akses fungsi JavaScript dan direktori util berisi lebih banyak kode asli yang tidak perlu kita sentuh Entry point untuk aplikasi akan tinggal di js/app.js. Jika kita membangun dan menjalankan aplikasi ini, Anda akan melihat hasilnya berikut dalam emulator:

Hello Pebblejs Boilerplate App

Buka js/app.js, melihat-lihat, dan kemudian menghapus file ini. Kita akan mulai dari awal.

2. Mari Membuat Aplikasi

Hal pertama yang kita butuhkan untuk belajar adalah bagaimana untuk menampilkan teks pada layar. Pebble.js memiliki kerangka antarmuka pengguna untuk instantiating Elements. Dengan kerangka ini, Anda dapat membuat elemen, seperti teks, persegi panjang dan gambar. Tambahkan baris berikut ke app.js untuk meminta kerangka.

Elemen pertama yang akan kita gunakan dalam tutorial ini adalah Window. Windows adalah blok bangunan utama Pebble aplikasi. Ada tiga jenis windows.

  • Card yang dapat digunakan untuk menampilkan teks dalam cara yang sudah terformat, seperti judul di atas, sub judul di bawah ini, dan area tubuh untuk beberapa teks.
  • Menu ini digunakan untuk menampilkan daftar pilihan.
  • Sebuah Window yang paling fleksibel dan memungkinkan Anda untuk menambah berbagai elemen untuk itu.

Untuk menambahkan teks ke jendela, kita juga memerlukan Vector2, modul untuk Menggambar Vektor 2D dan salah satu yang Anda akan akrab dengan jika Anda telah melakukan apa-apa dengan three.js atau gambar Perpustakaan vektor lainnya.

Tujuan pertama kami adalah untuk membuat sebuah window, membuat dan menambahkan teks ke window itu dan menampilkannya kepada pengguna. Potongan berikut adalah minimum yang diperlukan untuk menampilkan teks pada layar.

Membangun proyek dan menginstal aplikasi untuk melihat hasil. Daripada melakukan keduanya langkah secara terpisah, saya lebih suka untuk menggabung perintah bersama dan jalankan perintah berikut:

Jika Anda ingin menguji pada semua tiga platform secara bersamaan, Anda dapat menambahkan perintah instalasi untuk emulator setiap:

Anda akan melihat bahwa aplite dan basalt terlihat hampir identik sementara chalk tidak terlihat terlalu bagus. Hal ini karena layar bulat dan dimensi layar. Kita akan membahas platform deteksi dalam sekejap. Untuk sekarang, kita bergerak maju dengan beberapa fungsionalitas dasar.

Dalam potongan kode di atas, kita membuat Teks elemen menggunakan metode Text(). Instansiasi Text() mengambil objek sebagai parameter untuk mengkonfigurasi elemen Teks. Tombol size mendefinisikan ukuran persegi panjang (ditentukan oleh contoh Vector2) di mana elemen Text ditarik. Nilai kunci text berisi string yang ingin kita tampilkan. Kita kemudian menambahkan elemen Text ke Window sebelum memanggil show() pada window untuk menampilkannya.

Stripped Down Pebblejs App

Sejauh ini aplikasi Anda menggunakan pengaturan default untuk Window dan Teks. Namun, kami memiliki opsi untuk menyesuaikannya. Kami memiliki kontrol untuk mengubah posisi, warna, dan ukuran font. Ada beberapa font sistem yang tersedia dan Anda bahkan memiliki opsi untuk memuat font kustom yang dapat Anda gunakan di aplikasi Anda.

Aplikasi kami akan menghitung mundur untuk tanggal tertentu. Ketika aplikasi dimulai, kami ingin mengambil tanggal dan menghitung berapa banyak hari sampai tanggal tertentu di masa depan. Katakanlah, misalnya, saya ingin sebuah aplikasi yang memberitahu saya berapa banyak hari itu akan sampai Star Wars, Episode VIII adalah di sini.

Aku tahu bahwa aku ingin membuat Window utama saya ketika app dimulai, menghitung jumlah hari yang tersisa sampai 15 Desember 2017, dan kemudian menambahkan nomor itu ke layar saya di pusat. Tidak ada yang terlalu mewah.

Mari kita mulai dengan menampilkan sejumlah statis, tidak terlalu berbeda dari kode "Halo PebbleJS" yang kami menulis. Sebaliknya, kami menggunakan sebuah variabel sebagai nilai kunci text dan menambahkan kunci textAlign, baru, ke pusat teks.

Menjalankan app memberikan Anda hasil yang ditunjukkan di bawah ini.

Creating a Window and Showing Text

Seperti yang saya jelaskan sebelumnya, ada sejumlah sistem font yang tersedia. Untuk tutorial ini, kita akan tetap dengan salah satu font sistem, Bitham 42 Bold, dan posisi itu sedikit lebih dekat ke pusat layar, secara horisontal dan vertikal. Opsi font mengambil serangkaian font yang ingin Anda gunakan sebagai direferensikan dalam dokumentasi. Posisi ditentukan oleh contoh Vector2 yang lain, adalah hal-hal yang mendefinisikan posisi Text horizontal dan vertikal.

Mengubah konfigurasi Text yang seperti ini:

Anda seharusnya sudah memiliki sesuatu yang tampak seperti berikut:

Font Changed and Centered

Mari kita ganti hard-kode nilai dengan benar jumlah hari. Ketika kita kloning proyek dari GitHub, kami mendapat semua file yang diperlukan untuk mengakses perangkat api dan berbagai utilitas lain untuk menciptakan sebuah aplikasi Pebble dengan JavaScript. Salah satu utilitas ini adalah Perpustakaan moment.js, yang dapat Anda temukan di direktori vendor. Ini akan membuat perhitungan yang lebih mudah.

Memerlukan moment.js ke aplikasi dan menetapkan variabel daysRemaining ke fungsi dengan implementasi berikut:

Selanjutnya, mengubah referensi untuk daysRemaining untuk fungsi panggilan seperti ini:

Jika Anda mengkompilasi dan menjalankan app, Anda harus melihat benar jumlah hari sampai Star Wars, Episode VIII dirilis. Kami bisa meninggalkan ini di sini dan memiliki aplikasi yang hanya menunjukkan jumlah hari sampai acara kami ingin melacak, tapi mengapa tidak mengambil kesempatan untuk menambahkan beberapa fitur untuk app.

Pertama, mari kita mengubah warna latar belakang Window dan warna teks sehingga latar belakang putih dan teks lebih gelap.

Dan mari tambahkan elemen Text lain untuk menunjukkan apa yang diwakili oleh angka. Kami membuat elemen Text baru dan memberikannya opsi untuk ukuran, posisi, font, dll.

Selanjutnya, kita menambahkan elemen Text ke window utama setelah kita menambahkan obyek text.

Akhirnya, mari kita tambahkan elemen Text untuk menunjukkan bahwa hitung mundur di hari ketiga.

Show 633 Days Until Countdown Ends

Untuk menavigasi, Pebble menggunakan tombol perangkat keras sebagai lawan layar sentuh, yang ditemukan di sebagian besar jam tangan pintar lainnya. Kami dapat menambahkan kemampuan untuk memungkinkan pengguna untuk menyelam lebih dalam ke aplikasi kami menggunakan input ini. Katakanlah, misalnya, kami ingin juga menunjukkan tanggal rilis untuk film mendatang lainnya dalam waralaba Star Wars. Rogue One dirilis tahun ini dan sudah ada tanggal rilis untuk Episode IX.

Interaksi dengan tombol memicu peristiwa yang kita dapat berlangganan. Ketika suatu peristiwa terdeteksi, kita bisa memutuskan apa tindakan yang perlu diambil. Jika pengguna mengklik ke bawah, kita bisa membangun sebuah Window baru untuk menahan tanggal rilis untuk Rogue One dan menampilkan jumlah hari sampai rilis film itu.

Mari berlangganan tombol ke bawah dan membangun sebuah Window baru. Metode on() mengambil tiga parameter, action, button, dan handler. Seperti disebutkan sebelumnya, nilai parameter kedua adalah up, down, select, atau back. Action biasanya click, tetapi Anda juga memiliki pilihan untuk menggunakan longClick.

Jalankan aplikasi dan Anda akan melihat bahwa Anda mendapatkan layar hitam ketika Anda mengklik ke bawah. Anda mungkin bertanya pada diri sendiri bagaimana Anda bisa mendapatkan akses ke konsol untuk melihat Pebble logs.

Ketika aplikasi berjalan, kami dapat melampirkan konsol lain untuk itu dan mendapatkan log dengan menjalankan pebble logs --emulator basalt. Ganti nama emulator jika Anda menggunakan salah satu emulator lainnya. Anda sekarang dapat melihat bahwa konsol log Down Clicked ketika tombol bawah diklik.

Seperti kita lakukan sebelumnya, mari kita menghitung jumlah hari sampai rilis dan menampilkan informasi ini kepada pengguna. Untuk membuat penggunaan fungsi perhitungan tanggal, aku akan lulus dalam tanggal sebagai parameter. Kami tidak ingin untuk menduplikasi kode.

Jika Anda ingin, Anda dapat menambahkan layar untuk Episode IX juga. Aku akan meninggalkan itu sebagai tantangan bagi Anda untuk mencoba sendiri.

New Screen Added for Two Additional Countdowns

Kita harus memperbaiki masalah tampilan untuk pengguna dengan Pebble Time Round. Untuk melakukan ini, kita perlu untuk mendeteksi apa platform mereka pada dan memperbarui antarmuka pengguna yang sesuai.

Dalam aplikasi Anda, Anda memiliki akses ke objek global, Pebble. Objek ini memiliki beberapa fungsi yang dapat kita gunakan, salah satu dari mereka getActiveWatchInfo(), yang mengembalikan sebuah objek dengan informasi platform runtime.

Kita bisa mendapatkan nama platform menggunakan tombol platform. Jika platform sama dengan chalk, kita perlu membuat beberapa penyesuaian untuk antarmuka pengguna.

Di bagian atas app.js, kami mengambil action watch informasi dan memeriksa apakah platform namanya sama chalk.

Jika Anda menjalankan aplikasi Anda pada platform kapur, Anda harus melihat berikut:

Viewing the App In the Pebble Round

Di manapun kami ukuran dan posisi elemen antarmuka pengguna, kita perlu membuat perubahan kecil untuk mengakomodasi layar bulat platform chalk. Sebagai permulaan, kami menciptakan sebuah variabel yang memegang lebar layar.

Pebble Time Round memiliki x 180px 180px menampilkan. Ini berarti bahwa kita perlu mengubah koordinat X objek Vector. Kami membuat tiga variabel untuk membantu kami dengan ini.

Kode akhir akan terlihat seperti ini:

Saya yakin Anda akan setuju bahwa ada banyak ruang untuk perbaikan. Kami adalah duplikasi code di berbagai tempat, yang tidak sebuah praktek yang baik. Yang mengatakan, saya harap Anda sekarang memiliki pemahaman dasar tentang bagaimana Anda dapat membuat aplikasi untuk Pebble menggunakan JavaScript dan Pebble SDK.

Dalam bagian terakhir dari tutorial ini, saya ingin menunjukkan kepada Anda bagaimana untuk meng-upload aplikasi kami ke Pebble app store.

App Corrected for Pebble Time Round

3. Mengupload ke Pebble App Store

Sebelum kita meng-upload app, ada satu hal yang kita perlu untuk diurus. Seperti kita mulai app ini dari template, ada beberapa rincian di appinfo.json, yang nyata untuk aplikasi kita, bahwa kita perlu berubah. Anda dapat menemukan file ini di root dari proyek. Buka appinfo.json dan mengubah nilai companyname, shortname dan longname.

Hal terakhir yang kita butuhkan adalah UUID (Universal Unique Identifier). Manifes sudah berisi satu, tetapi ketika Anda mencoba untuk meng-upload .pbw file ke app store, Anda akan mendapatkan kesalahan karena UUID ini sudah digunakan.

Cara termudah untuk mendapatkan satu adalah untuk mengambil itu dari app hello-pebble asli yang kita buat pada awal tutorial ini, karena kami tidak akan meng-upload itu app ke app store. Jika Anda menghapus proyek, membuat proyek baru dan Salin UUID dari proyek tersebut. Setelah selesai, membuat membangun yang baru.

Kami sekarang memiliki aplikasi yang siap untuk meng-upload ke Pebble app store. Pergilah ke portal pengembang Pebble dan daftar untuk akun atau masuk jika Anda sudah memilikinya. Setelah Anda masuk, klik tautan yang menyatakan Publikasi Aplikasi Pebble.

Publish a Pebble App

Pada halaman berikutnya, pilih Buat Watchapp di bagian bawah.

Create a Watchapp

Formulir di halaman berikutnya terlihat agak menakutkan, tapi bidang cukup jelas. Untuk menyelesaikan pengajuan, Anda perlu meng-upload aset setidaknya dua, keduanya ikon untuk aplikasi Anda.

Create a Pebble Wachapp Profile

Setelah langkah ini, Anda akan diarahkan ke app store preview dengan beberapa aplikasi data pada sisi kanan. Hal ini diperlukan bahwa Anda menambahkan tanggal rilis untuk app Anda. Untuk melakukan ini, klik Tambah sebuah rilis dan meng-upload file .pbw, yang dapat Anda temukan di folder build proyek Anda.

Setelah ini selesai, Anda kembali ke layar overview dan .pbw file diverifikasi. Ini biasanya hanya membutuhkan waktu beberapa detik. Setelah diverifikasi, app siap untuk publikasi. Jika Anda mengalami masalah di sini dan verifikasi gagal, Anda disajikan dengan pesan bermanfaat yang menjelaskan mengapa verifikasi gagal.

Release Uploaded and Ready to Publish

Sebelum melanjutkan dan menekan tombol Publish, Anda mungkin ingin menambahkan beberapa tangkapan layar agar orang-orang dapat melihat apa yang diharapkan setelah menginstalnya. Gambar-gambar ini ditampilkan di pratinjau app store.

Tool Pebble CLI ini memiliki metode yang besar dan mudah untuk mengambil screenshot. Menjalankan pebble screenshot FILENAME mengambil screenshot dari saat ini menjalankan emulator dan menyimpannya dalam direktori saat ini.

Setelah meng-upload screenshot dan mengisi Deskripsi untuk berbagai platform, Anda siap untuk menerbitkan aplikasi Pebble pertama Anda.

Kesimpulan

Dalam artikel ini, Anda telah belajar cara menginstal dan mengatur Pebble SDK, cara menggunakan beberapa perintah Pebble CLI dasar, dan bagaimana membangun aplikasi dasar menggunakan JavaScript. Tak usah dikatakan bahwa kita hanya menggaruk permukaan dalam tutorial ini. Ada banyak hal yang bisa dipelajari, tidak hanya tentang menulis aplikasi Pebble dengan JavaScript, tetapi juga tentang Pebble development secara umum dan alat-alat yang tersedia untuk Anda.

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.