Saya memutuskan untuk menggunakan pengalaman pemrograman saya untuk memberikan pagi Natal yang imersif kepada saudara laki-laki saya. Saya membuat game yang bisa dimainkan kakak saya di ponselnya untuk mengetahui cara membuka hadiahnya. Apa tangkapannya? Satu-satunya cara untuk mengontrol permainan adalah perintah ke asisten suara Alexa melalui Echo.
Permainan
Jadi, saya membuat game sederhana - melintasi labirin di ruang bawah tanah. Saya mulai dengan kisi berukuran 8 x 8, mengecat lantai penjara bawah tanah dengan dinding, pintu terkunci, dan benda-benda yang disembunyikan di peta. Tujuannya adalah menemukan semua item dan melewati penjara bawah tanah. Setelah menemukan item, Anda dapat membuka hadiah yang sesuai dengan item tersebut.
Di dalam game, Anda dapat memilih dua tindakan: bergerak atau menjelajah. Jelajahi - menjelajahi ruangan untuk mencari hadiah dan kesempatan untuk membuka hadiah, pindah - pindah ke kamar yang berdekatan. Saat Anda bergerak, peta mulai terisi, dengan setiap gerakan, tata letak menjadi lebih terlihat. Di semua kamar, Alexa menceritakan sebagian dari cerita. Semakin dalam saudaraku berada di penjara bawah tanah, semakin membingungkan ceritanya. Hebat, ya?
Peta
Aplikasi seluler
Untuk menginspirasi sensasi petualangan masa depan, setiap tahun pada Malam Natal, saya memberikan Panduan berlapis untuk Menerima Hadiah kepada saudara saya. Tahun ini, ia memiliki kode QR yang mengenkripsi tautan unduhan untuk aplikasi seluler. Saudaranya akan menginstal aplikasi dan siap untuk berpetualang. Aplikasinya sendiri cukup sederhana. Sebenarnya aplikasi ini hanya untuk melihat peta. Semua perintah melalui Alexa, jadi Anda tidak dapat melakukan apa pun selain melihat ponsel Anda dan merencanakan langkah selanjutnya.
Aplikasi ini memiliki dua layar: halaman inventaris dan halaman peta. Hadiah yang ditemukan dan gambarnya ditampilkan di halaman dengan inventaris. Halaman peta menunjukkan ruangan yang dieksplorasi dan lokasi di mana item ditemukan.
Halaman Aplikasi Seluler
Setiap kali saya perlu mengembangkan sesuatu dengan cepat, saya membuka OutSystems . Ini adalah platform pengembangan intuitif dengan kode minimum yang memungkinkan Anda dengan cepat membangun halaman web reaktif, layanan web, dan aplikasi seluler. Apa hal terbaik tentang dia? Ini gratis untuk digunakan sebagai bukti konsep! Ada beberapa bagian bergerak yang memberikan kesan magis:
- API.
- Aplikasi seluler.
- Keterampilan Alexa.
- WebSocket.
API
Aplikasi harus memiliki otak untuk menjalankan logika dan menyimpan status. Otak Hadiah Natal Terbaik adalah API sederhana yang dibangun di OutSystems. Ini memuat posisi di peta, memeriksa pergerakan, menggerakkan Anda, dan kemudian memberi tahu Anda sedikit tentang ceritanya. Seluruh aplikasi hanya memiliki dua titik akhir API, satu untuk navigasi dan satu lagi untuk mendapatkan keadaan saat ini. Anda bisa mendapatkan status saat ini hanya jika Anda keluar dari aplikasi dan kembali ke sana (saya tahu bahwa kadang saudara akan beristirahat). Di balik layar, di bawah ini terdapat model data yang membangun peta, plot, hadiah dalam inventaris, dan transisi antar ruangan.
Diagram hubungan dalam game.
Dengan OutSystems, saya membuat model data, logika pergerakan karakter, dan REST API untuk mengelola semuanya. Saatnya membuat frontend!
Aplikasi seluler
Sekali lagi, OutSystems akan membantu kami. Layanan ini memiliki antarmuka pengguna yang sederhana yang memungkinkan Anda menyeret dan melepaskan komponen ke layar dan kemudian menyatukannya menjadi aplikasi seluler untuk Anda. Jadi saya mulai bekerja dan menggambar dua halaman untuk melacak hadiah mana yang ditemukan dan area mana di peta yang dieksplorasi. Saya menggunakan API untuk memuat data peta dan menampilkannya di layar. Seperti yang saya sebutkan, ini adalah aplikasi seluler yang cukup sederhana, Anda hanya dapat melihatnya. Saya bermain-main dengan CSS, menambahkan beberapa gambar Natal, dan memutuskan itu sudah cukup.
Keterampilan Alexa
Saya menggunakan AWS setiap hari di tempat kerja, jadi saya cukup familiar dengan banyak layanan platform. Tapi saya belum pernah mengembangkan keterampilan Alexa sebelumnya. Mendekati konsol, saya mulai menonton videonya. Ternyata tim Alexa di AWS benar-benar tahu apa yang mereka lakukan. Saya melihat salah satu representasi terbaik dari solusi sederhana untuk masalah kompleks. Keterampilan memiliki dua komponen:
- Model interaksi.
- Kode backend.
Model interaksi hanya menampilkan kata atau frasa mana yang memicu tindakan tertentu. Beberapa frasa dimasukkan , dipetakan ke maksud , lalu Anda mengklik tombol buat untuk aplikasi. Keajaiban yang tersisa terjadi di konsol.
Dua maksud untuk keterampilan Alexa.
Kode backend sama mudahnya untuk ditulis. Anda dapat menulis kode keterampilan di VS Code menggunakan ekstensi Alexa dengan mendorongnya ke cloud. Cukup sederhana. Tentukan dalam kode apa yang akan dilakukan setiap maksud saat dipanggil. Dalam permainan, saya hanya memanggil API yang dikembangkan oleh OutSystems, jadi untuk setiap maksud saya menulis panggilan cepat menggunakan axios ke titik akhir API yang sesuai, meminta Alexa untuk mengulangi pesan tanggapan. Selesai!
WebSocket
Saat menguji aplikasi, saya segera menyadari bahwa saya telah melupakan sesuatu. Bagaimana cara memperbarui aplikasi seluler ketika Alexa memindahkan karakter? Saya membutuhkan sesuatu yang meneruskan data ke aplikasi setiap kali terjadi peristiwa. Dan itu adalah WebSocket . WebSocket pada dasarnya membuka saluran komunikasi dua arah antara browser (atau aplikasi seluler) dan server. Hal ini memungkinkan Anda untuk menerima pesan dengan segera alih-alih terus-menerus memeriksa server untuk pembaruan.
Ada banyak hal yang terjadi di dalam WebSocket. Beruntung bagi saya, ada perusahaan yang fokus untuk mempermudah konsumen. Saya membuat akun gratis di Pusher, mengkonfigurasi aplikasi dengan beberapa klik dan siap untuk mengintegrasikan Pusher ke dalam API dan aplikasi seluler saya. Pikirkan WebSocket sebagai pendekatan penerbit / pelanggan. Ketika sesuatu terjadi dalam sistem, peristiwa tersebut dipicu, pelanggan menerimanya dan melakukan tindakan.
Saya telah memperbarui API untuk memposting acara Pendorong setiap kali karakter bergerak atau menjelajahi ruangan. Saya juga memasukkan sebagian dari sejarah yang dikembalikan oleh API di dalam pesan. Di aplikasi seluler, saya telah menambahkan cuplikan kode langganan peristiwa JavaScript sederhana. Langganan memperbarui data di layar dan menampilkan bagian sejarah baru. Tes cepat melalui Echo saya menunjukkan bahwa karakter bergerak di sekitar peta segera setelah saya mengucapkan sepatah kata pun. Keren, ya?
Panel kontrol Pendorong menampilkan grafik pesan WebSocket.
Paparan
Saya menulis artikel ini sebelum Natal. Adikku belum merasa senang menyelesaikan game ini. Tahun lalu, ulasan tentang perpesanan dan menelepon hadiah adalah bahwa idenya terlalu rumit dan terlalu mengandalkan keberuntungan. Saya mencamkannya dan sekarang saya telah mengembangkan permainan yang memberi petunjuk ke mana harus pergi selanjutnya.
Percaya atau tidak, aku tidak ingin hadiah tahun lalu membuat adikku kesal. Saya ingin hadiah ini menjadi kesempatan yang istimewa dan menyenangkan dalam hidupnya dan kesempatan untuk mengembangkan keterampilan saya sebagai pengembang dan belajar - untuk saya. Saya pikir hadiah tahun ini adalah kompromi yang baik. Ini juga cukup rumit, tetapi ada sebuah cerita untuk diikuti. Selain itu, saya harus bekerja dengan banyak teknologi modern dan fantastis.
Dan gratis! Semua yang telah saya lakukan untuk hadiah ini mungkin ada di tingkat gratis, yang berarti satu-satunya pengeluaran adalah waktu saya. Saya membutuhkan waktu sekitar 30 jam untuk menghasilkan sebuah cerita, menggambar peta, dan menggabungkan semuanya. Itu pasti investasi. Saat Natal kita akan mencari tahu apakah dia layak. Saya pasti akan melaporkan hasilnya. Selamat Natal!
Pelatihan diskon - mengapa tidak memberikan hadiah untuk diri Anda sendiri, di tahun 2021 yang baru? Dan kode promo HABR akan membuat hadiah ini semakin menyenangkan dengan menambahkan diskon 10% di banner.
Profesi dan kursus lainnya