new be

By

Komputasi pada Ponsel
(Pengatur Waktu Satu Menit)

Pengatur Waktu Satu Menit

Tutorial ini mengajarkan Anda cara menggunakan komponen Jam di App Inventor untuk membuat jam alarm sederhana.

Foto

Tata Letak

Tangkapan layar

Blok

Antarmuka Pengguna

Antarmuka pengguna untuk aplikasi ini menggunakan komponen-komponen yang terlihat berikut. Ikuti tata letak yang disediakan pada cuplikan layar.

  • Komponen HorizontalArrangement -- di dalam laci Screen Arrangement .
  • Empat Tombol -- di laci Dasar .
  • Kotak Teks -- di laci Dasar .

Seret item-item ini ke Viewer dari Palette . Tempatkan tombol + dan - serta TextBox di dalam komponen HorizontalArrangement seperti yang ditunjukkan pada cuplikan di atas. Kemudian tempatkan tombol Start dan Stop di bawah HorizontalArrangement .

Sebaiknya beberapa komponen ini diganti namanya agar lebih mudah dikenali di Editor Blok . Gunakan nama-nama berikut (tanpa spasi di dalamnya):

  • Tombol: Tombol Plus , Tombol Minus , Tombol Mulai , Tombol Berhenti .

Sesuaikan Properti komponen yang terlihat sebagai berikut:

  • Tempatkan Teks yang sesuai pada setiap tombol dan atur Ukuran Huruf menjadi 30.0.
  • Atur properti Teks pada TextBox menjadi 10.
  • Atur Lebar semua komponen menjadi Isi induk . Atur Tinggi menjadi Otomatis .

Komponen Tak Terlihat

Aplikasi ini menggunakan dua komponen tak terlihat , yaitu Jam (di laci Dasar ), dan Suara di laci Media . Seret masing-masing komponen ini ke Penampil .

Hapus centang pada TimerEnabled untuk Jam .

Untuk komponen Suara , Anda perlu mengunggah efek suara :

  • Klik pada file wav Annoying Alarm Clock dan unduh ke desktop Anda atau ke folder unduhan Anda.
  • Klik pada kotak teks Sumber di panel Properti , lalu klik tombol Tambah .
  • Gunakan dialog Unggah File untuk menavigasi ke file wav yang baru saja Anda unduh dan klik Ok . Kemudian klik Ok di dialog Sumber untuk mengaitkan file tersebut dengan komponen Suara Anda .

Setelah Anda selesai mendesain antarmuka pengguna, tampilannya akan seperti gambar yang ditunjukkan di sini (klik untuk memperbesar).

Editor Blok

Kita akan menggunakan Blocks Editor untuk memprogram perilaku aplikasi kita. Klik tombol Buka Blocks Editor (pojok kanan atas halaman AppInventor ) dan klik persetujuan pada izin pengunduhan.

Hubungkan ponsel Anda ke laptop menggunakan Kabel USB dan setelah satu atau dua detik, klik tombol Hubungkan ke Perangkat di Editor Blok . Anda akan melihat ponsel Anda terdaftar di sana. Pilih ponsel tersebut.

Setelah beberapa saat, Anda akan melihat aplikasi tersebut mulai berjalan di ponsel Anda. Tampilannya akan seperti ini (klik untuk memperbesar):

Tombol Pemrograman Plus

Saat tombol ButtonPlus diklik, kita ingin angka di TextBox bertambah satu. Berikut cara menulis kode tersebut:

  • Klik tab Blok Saya (pojok kiri atas) lalu klik laci ButtonPlus . Ini akan membuka daftar blok yang berlaku untuk komponen Tombol .
  • Pilih blok When ButtonPlus.Click . Tampilannya seperti ini: Ini adalah contoh blok Event Handler . Blok ini akan dieksekusi secara otomatis setiap kali pengguna mengklik ButtonPlus . Kita perlu menentukan perilaku pasti yang kita inginkan agar aplikasi lakukan saat tombol ini diklik.
  • Saat ButtonOne diklik, kita ingin menambahkan 1 ke angka di TextBox1 dan menampilkan nilai baru tersebut. Untuk melakukan ini, kita perlu membuat ekspresi berikut :

Ikuti langkah-langkah berikut:

  • Klik tab My Blocks , lalu klik drawer TextBox1 . Pilih blok Set TextBox1.Text dan masukkan ke dalam slot When ButtonPlus.Click.do . Blok tersebut akan terpasang dengan tepat.
  • Klik tab Bawaan (pojok kiri atas), buka laci Matematika , pilih blok + dan pasang ke slot di sisi kanan blok Set TextBox1.Text . Blok tersebut akan terpasang dengan tepat.
  • Sekarang isi slot kosong pada blok + . Anda akan menemukan blok Angka di laci Matematika . Atur nilainya menjadi 1 dan pasang ke slot sebelah kanan tombol + .
  • Anda akan menemukan blok TextBox1.Text di laci TextBox1 (di bawah Blok Saya). Pasang blok tersebut ke slot di sisi kiri tombol + .

Setelah selesai, blok When ButtonPlus.Clicked Anda akan terlihat seperti ini:

Sekarang coba klik tombol ini di ponsel Anda. Setiap kali Anda mengklik, angka di kotak teks akan bertambah 1.

Latihan Praktik Langsung

Unduh kode sumber aplikasi dan impor ke App Inventor sebagai salah satu proyek Anda. Berikut beberapa revisi yang dapat Anda coba.

  1. Perindah tampilannya. Tambahkan warna dan pikirkan cara lain untuk meningkatkan penampilan aplikasi.
  2. Perbaiki efek suara. Tambahkan suara detak/detik pada hitungan mundur.
  3. Perbaiki logikanya. Buat tombol + mengatur ulang timer ke 0 saat nilainya melebihi 60 dan tombol - mengatur ulang timer ke 60 saat nilainya kurang dari 0.
  4. Tambahkan grafis dan animasi. Misalnya, tambahkan bola berwarna dan ubah warnanya setiap detik.
  5. Sesi curah pendapat: Usulkan sebuah perubahan dan kita akan coba melakukannya bersama-sama.

 

Komputasi di Ponsel
Di Mana Arah Utara?

Di mana letak utara?

Tutorial ini mengajarkan Anda cara menggunakan image sprite dan orientation sensor dari App Inventor untuk membuat kompas sederhana.

Foto

Tata Letak

Tangkapan layar

Kode QR

kode QR

Blok

Antarmuka Pengguna

Antarmuka pengguna untuk aplikasi ini menggunakan komponen-komponen yang terlihat berikut. Ikuti tata letak yang disediakan pada cuplikan layar.

  • Komponen HorizontalArrangement -- di dalam laci Screen Arrangement .
  • Dua Label -- di laci Dasar .
  • Kanvas -- di laci Dasar .
  • ImageSprite -- Penggambar animasi .

Seret item-item ini ke Viewer dari Palette . Tempatkan kedua Label di dalam komponen HorizontalArrangement di bagian atas layar seperti yang ditunjukkan pada cuplikan di atas. Tempatkan Canvas di bawah tombol dan tempatkan ImageSprite di tengah canvas.

Editor Blok

Kita akan menggunakan Blocks Editor untuk memprogram perilaku aplikasi kita. Klik tombol Buka Blocks Editor (pojok kanan atas halaman App Inventor ) dan klik persetujuan pada izin pengunduhan.

Hubungkan ponsel Anda ke laptop menggunakan Kabel USB dan setelah satu atau dua detik, klik tombol Hubungkan ke Perangkat di Editor Blok . Anda akan melihat ponsel Anda terdaftar di sana. Pilih ponsel tersebut.

Dalam beberapa saat Anda akan melihat Label dan ImageSprite di ponsel Anda. Dengan ponsel Anda terhubung, App Inventor akan langsung menampilkan setiap perubahan yang Anda buat pada aplikasi Anda.

Kembali ke Antarmuka Pengguna

Sebaiknya beberapa komponen ini diganti namanya agar lebih mudah dikenali di Editor Blok . Gunakan nama-nama berikut (tanpa spasi di dalamnya):

  • Label: OrientasiLabel , LokasiLabel .

Sesuaikan Properti komponen yang terlihat sebagai berikut:

  • Atur properti FontSize menjadi 14 untuk kedua Label .
  • Atur Lebar Label menjadi Isi elemen induk dan Tingginya menjadi Otomatis .
  • Atur Lebar Kanvas menjadi Isi elemen induk dan Tingginya menjadi 400 piksel. Atur Ukuran Font menjadi 20.

Untuk komponen ImageSprite , perlu dilakukan pengunggahan file gambar untuk properti Picture -nya :

  • Klik panah ini.gif dan unduh ke desktop Anda atau ke folder unduhan Anda.
  • Klik properti Gambar di panel Properti , lalu klik tombol Tambah .
  • Gunakan dialog Unggah File untuk menavigasi ke file arrow.gif dan klik Ok . Kemudian klik Ok di dialog Tambah untuk mengaitkan file tersebut dengan ImageSprite Anda.

Komponen Tak Terlihat

Aplikasi ini menggunakan dua komponen tak terlihat , yaitu OrientationSensor dan LocationSensor , di laci Sensor . Seret masing-masing komponen ini ke Viewer .

Hapus centang pada TimerEnabled untuk Jam .

Pastikan kedua komponen ini diaktifkan dan periksa properti ProviderLocked untuk LocationSensor .

Setelah Anda selesai mendesain antarmuka pengguna, tampilannya akan seperti gambar yang ditunjukkan di sini (klik untuk memperbesar).

Kembali ke Editor Blok

Pada tahap ini, aplikasi Anda seharusnya terlihat kurang lebih seperti ini, tanpa tanda pada Canvas dan angka pada Label (klik untuk memperbesar):

Menginisialisasi Layar

Hal pertama yang akan kita lakukan adalah menggambar detail Kanvas saat aplikasi dimulai.

  • Klik tab Blok Saya (pojok kiri atas) lalu klik laci Screen1 . Ini akan membuka daftar blok yang mengontrol Layar. Pilih blok when Screen1.Initialize dan seret ke ruang kerja. Tampilannya seperti ini:

Ini adalah contoh blok Event Handler . Blok ini akan dieksekusi secara otomatis saat aplikasi dimulai. Untuk aplikasi kita, kita akan menggunakannya untuk menginisialisasi Canvas gambar dengan menggambar tanda arah, N , E , S , dan W pada Canvas.

  • Klik pada laci Canvas1 di bawah tab My Blocks dan seret blok Canvas1.DrawText ke ruang kerja. Seperti yang Anda lihat, blok ini memiliki slot untuk tiga argumen , yaitu teks yang akan digambar, dan koordinat X dan Y tempat kita ingin meletakkannya.
  • Anda perlu menetapkan nilai untuk setiap slot ini. Mari kita kerjakan N terlebih dahulu. Beginilah tampilan blok yang Anda inginkan setelah selesai:

Anda dapat menemukan nilai teks di laci Teks di bawah tab Bawaan . Tempelkan ke dalam slot teks . Anda juga dapat memunculkan komponen Bawaan dengan mengklik latar belakang ruang kerja Editor Blok.

Canvas memiliki sistem koordinat dengan (0,0) di pojok kiri atas. X mewakili sumbu horizontal , yang bertambah positif ke kanan, dan Y mewakili sumbu vertikal , yang bertambah positif dari atas ke bawah. Kita ingin menempatkan N di tengah bagian atas kanvas -- yaitu, kira-kira pada Canvas.Width / 2.

Untuk membuat ekspresi Canvas1.Width / 2 untuk slot teks, cari blok Pembagian dan blok Angka di laci Matematika . Gabungkan keduanya seperti yang ditunjukkan pada gambar di atas.

Anda akan menemukan nilai Canvas1.Width di laci Canvas1 di bawah Blok Saya .

  • Setelah Anda selesai mengisi blok Canvas1.DrawText , pasangkan ke slot do pada blok Screen1.Initialize . Kemudian ulangi latihan tersebut untuk setiap arah S, E, dan W. Jika Anda membutuhkan bantuan, lihat diagram blok di bagian atas halaman ini.

Sensor Orientasi

Untuk melengkapi kompas, kita perlu menganimasikan jarum kompas. Untuk melakukannya, kita akan menggunakan event handler untuk OrientationSensor . Buka drawer OrientationSensor di bawah tab My Blocks dan tarik keluar blok when OrientationSensor.OrientationChanged . Blok ini akan dijalankan setiap kali ponsel digerakkan.

Perhatikan bahwa ia memiliki tiga argumen, untuk yaw , pitch , dan roll . Kita hanya tertarik pada yaw , yang merupakan kata lain untuk azimuth .

Nilai yaw akan menjadi 0 derajat ketika bagian atas ponsel mengarah ke Utara. Di sisi lain, ImageSprite akan bernilai 0 derajat ketika mengarah ke tepi kanan layar. Untuk menyesuaikan perbedaan ini, kita ingin menambahkan 90 ke nilai yaw dan menjadikan ini arah yang ditunjuk oleh panah. Kita juga ingin menampilkan nilai yaw pada LabelOrientation .

OrientationBlock Anda seharusnya terlihat seperti ini setelah selesai:

Dengan perubahan ini, kompas di ponsel Anda seharusnya sudah berfungsi.

Sensor Lokasi (Opsional)

Jika waktu memungkinkan, tambahkan blok yang akan menampilkan lokasi ponsel pada label LabelLocation . Temukan blok when LocationSensor.LocationChanged dan tambahkan kode ke dalamnya yang akan mengatur label ke lintang dan bujur sensor. Seharusnya terlihat seperti ini:

Latihan Praktik Langsung

Unduh kode sumber aplikasi WhereIsNorth.zip dan impor ke App Inventor sebagai salah satu proyek Anda. Berikut beberapa revisi yang dapat Anda coba.

  1. Perindah tampilannya. Tambahkan warna dan pikirkan cara lain untuk meningkatkan penampilan aplikasi.
  2. Tambahkan grafik. Misalnya, gambar garis yang membentang Utara/Selatan di tengah kanvas.
  3. Buatlah sebuah permainan (yang menantang). Biarkan pengguna menebak di mana letak arah Utara.
  4. Sesi curah pendapat: Usulkan sebuah perubahan dan kita akan coba melakukannya bersama-sama.

 

 

 

 

Komputasi pada Ponsel,
Musim Semi 2011

Sensor Lokasi

Tutorial ini akan menunjukkan cara menggunakan sensor lokasi Android.

Latar belakang

Terdapat pembahasan yang ringkas dan bagus tentang cara menggunakan sensor App Inventor di Bab 23 buku teks Prof. Wolber .

Profesor Wolber juga telah menulis tutorial yang bagus tentang subjek ini. Kami akan menyesuaikan tutorial tersebut.

Sistem Penentuan Posisi Global (GPS)

Data GPS berasal dari Sistem Pemosisian Global, sebuah sistem satelit yang dikelola oleh pemerintah AS. Untuk mendapatkan pembacaan GPS, ponsel Anda harus memiliki jalur pandang langsung yang tidak terhalang ke tiga satelit.

Pembacaan GPS terdiri dari tiga data: lintang, bujur, dan ketinggian. Lintang Anda adalah jarak Anda dalam derajat di utara atau selatan khatulistiwa, dengan utara positif dan selatan negatif. Rentangnya adalah -90 hingga +90.

Garis bujur Anda adalah jarak Anda ke timur atau barat dari Garis Meridian Utama, yang melewati Greenwich, Inggris. Koordinat timur memiliki nilai positif dan koordinat barat bernilai negatif. Nilainya berkisar dari -180 hingga +180. Nilai pada Garis Meridian adalah 0.

Sensor Lokasi Android

Ada tiga cara yang dapat digunakan ponsel Android Anda untuk menentukan lokasinya:

  1. Satelit GPS memiliki akurasi hingga beberapa meter, tetapi hanya berfungsi di luar ruangan.
  2. WiFi: Jika Anda terhubung ke jaringan WiFi, ponsel dapat menggunakan lokasi hotspot WiFi sebagai lokasinya.
  3. Menara seluler juga dapat digunakan untuk melacak lokasi ponsel berdasarkan perhitungan kedekatan ponsel dengan menara seluler yang dikenal.

Kita berada di mana?

Kita dapat menggunakan Google Maps untuk menemukan koordinat GPS kita saat ini. Navigasi dan perbesar peta ke lokasi Anda saat ini. Menggunakan tampilan satelit memudahkan untuk menemukan lokasi Anda yang tepat. Klik tab Tautan di kanan atas. Ini akan menampilkan sesuatu yang terlihat seperti ini:

http://maps.google.com/?ie=UTF8&ll=41.744416,-72.691043&spn=0.001053,0.002631&t=h&z=19

Koordinat tersebut, (41.744416,-72.691043), berada di kampus Trinity College.

Menggunakan Sensor Lokasi di App Inventor

App Inventor menyediakan komponen LocationSensor . Komponen ini tidak terlihat dan berada di dalam laci Sensor .

Mari kita buat antarmuka berikut di App Inventor Designer yang menyertakan LocationSensor. Antarmuka ini berisi beberapa label, sebuah tombol, dan LocationSensor:

Penggunaan LocationSensor di aplikasi Anda terutama berkaitan dengan menanggapi peristiwa perubahan lokasi menggunakan event handler LocationChanged . Dalam contoh pertama ini, setiap kali sensor mendeteksi perubahan lokasi, event handler hanya menampilkan garis lintang dan garis bujur ponsel serta menyebutkan alamatnya saat ini.

Tentu saja, untuk menguji aplikasi ini, Anda harus mengunduhnya ke ponsel Anda lalu berjalan-jalan di luar ruangan.

Mengaktifkan dan Menonaktifkan LocationSensor

Tentu saja kita juga dapat mengontrol kapan pembacaan lokasi diambil, seperti yang ditunjukkan contoh berikut. Di sini, LocationSensor diaktifkan setiap kali pengguna mengklik tombol. Setelah pembacaan diterima, LocationSensor dinonaktifkan.

Tugas Rumah

Untuk tugas pekerjaan rumah ini, Anda akan mengunduh dan mencoba versi demo lokasi. Gunakan kode QR berikut untuk mengunduh aplikasi ke ponsel Anda.

Gunakan Google Maps untuk memilih bagian persegi panjang dari kampus Trinity, lalu gunakan aplikasi tersebut untuk menemukan koordinat GPS dari empat sudut wilayah persegi panjang tersebut -- yaitu, kiri atas, kanan atas, kiri bawah, dan kanan bawah. Di kelas berikutnya, kita akan menggunakan koordinat tersebut untuk meningkatkan aplikasi agar dapat menampilkan lokasi kita di peta Trinity.

Berikut kode sumber aplikasinya . Unduh dan coba sebelum kelas berikutnya.

 


Tidak ada komentar:

Posting Komentar