Menciptakan pengalaman pengguna (UX) yang luar biasa untuk aplikasi Anda adalah pekerjaan yang sulit, terutama jika Anda mengembangkan aplikasi yang disematkan. Saat ini, ada dua jenis alat antarmuka pengguna grafis (GUI) yang umumnya tersedia untuk mengembangkan perangkat lunak tertanam:apakah itu melibatkan teknologi yang kompleks, atau sangat mahal.
Namun, kami telah membuat bukti konsep (PoC) untuk cara baru menggunakan alat yang sudah ada dan mapan untuk membangun antarmuka pengguna (UI) untuk aplikasi yang berjalan di desktop, seluler, perangkat yang disematkan, dan perangkat ARM Linux berdaya rendah . Metode kami menggunakan Android Studio untuk menggambar UI; TotalCross untuk merender XML Android pada perangkat; TotalCross API baru bernama KnowCode; dan Raspberry Pi 4 untuk menjalankan aplikasi.
Memilih Android Studio
Dimungkinkan untuk membangun UX yang responsif dan indah untuk aplikasi menggunakan TotalCross API, tetapi membuat UI di Android Studio mempersingkat waktu antara pembuatan prototipe dan aplikasi sebenarnya.
Ada banyak alat yang tersedia untuk membangun UI untuk aplikasi, tetapi Android Studio adalah yang paling sering digunakan oleh pengembang di seluruh dunia. Selain adopsi besar-besaran, alat ini juga sangat intuitif untuk digunakan, dan sangat kuat untuk membuat aplikasi sederhana dan kompleks. Satu-satunya kelemahan, menurut saya, adalah daya komputasi yang dibutuhkan untuk menggunakan alat ini, yang jauh lebih berat daripada lingkungan pengembangan terintegrasi (IDE) lainnya seperti VSCode atau alternatif open source-nya, VSCodium.
Dengan memikirkan masalah ini, kami membuat bukti konsep menggunakan Android Studio untuk menggambar UI dan TotalCross untuk menjalankan Android XML secara langsung di perangkat.
Membangun UI
Untuk PoC kami, kami ingin membuat aplikasi peralatan rumah tangga untuk mengontrol suhu dan hal lainnya dan itu akan berjalan di perangkat ARM Linux.
Kami ingin mengembangkan aplikasi kami untuk Raspberry Pi, jadi kami menggunakan ConstraintLayout Android untuk membangun UI berukuran layar tetap 848x480 (resolusi Raspberry Pi), tetapi Anda dapat membangun UI responsif dengan tata letak lain.
Android XML menambahkan banyak fleksibilitas untuk pembuatan UI, membuatnya mudah untuk membangun pengalaman pengguna yang kaya untuk aplikasi. Dalam XML di bawah ini, kami menggunakan dua komponen utama:ImageView dan TextView.
<ImageView
android:id="@+id/imageView6"
android:layout_width="273dp"
android:layout_height="291dp"
android:background="@drawable/Casa"
tools:layout_editor_absoluteX="109dp"
tools:layout_editor_absoluteY="95dp" />
<TextView
android:id="@+id/insideTempEdit"
android:layout_width="94dp"
android:layout_height="92dp"
android:background="#F5F5F5"
android:text="20"
android:textAlignment="center"
android:gravity="center"
android:textColor="#000000"
android:textSize="67dp"
android:textStyle="bold"
tools:layout_editor_absoluteX="196dp"
tools:layout_editor_absoluteY="246dp" />
Elemen TextView digunakan untuk menampilkan beberapa data kepada pengguna, seperti suhu di dalam gedung. Sebagian besar ImageView digunakan sebagai tombol untuk interaksi pengguna dengan UI, tetapi juga diperlukan untuk mengimplementasikan Peristiwa yang disediakan oleh komponen di layar.
Mengintegrasikan dengan TotalCross
Teknologi kedua dalam PoC ini adalah TotalCross. Kami tidak ingin menggunakan apa pun dari Android di perangkat karena:
- Tujuan kami adalah menyediakan UI yang bagus untuk ARM Linux.
- Kami ingin mencapai footprint yang rendah pada perangkat.
- Kami ingin aplikasi berjalan pada perangkat keras kelas bawah dengan daya komputasi rendah (mis., tanpa GPU, RAM rendah, dll.).
Untuk memulai, kami membuat proyek TotalCross kosong menggunakan plugin VSCode kami. Selanjutnya, kami menyimpan salinan gambar di dalam drawable folder dan salinan file XML Android di dalam XML folder—keduanya terletak di dalam Sumber Daya map:
Untuk menjalankan file XML menggunakan TotalCross Simulator, kami menambahkan TotalCross API baru yang disebut KnowCode dan MainWindow untuk memuat XML. Kode di bawah ini menggunakan API untuk memuat dan merender XML:
public void initUI() {
XmlScreenAbstractLayout xmlCont = XmlScreenFactory.create(“xml / homeApplianceXML.xml”);
swap(xmlCont);
} Itu dia! Dengan hanya dua perintah, kita dapat menjalankan file XML Android menggunakan TotalCross. Berikut adalah bagaimana kinerja XML pada simulator TotalCross:
Ada dua hal yang tersisa untuk menyelesaikan PoC ini:menambahkan beberapa peristiwa untuk menyediakan interaksi pengguna dan menjalankannya di Raspberry Pi.
Menambahkan acara
KnowCode API menyediakan cara untuk mendapatkan elemen XML dengan ID-nya (getControlByID) dan mengubah perilakunya untuk melakukan hal-hal seperti menambahkan acara, mengubah visibilitas, dan banyak lagi.
Misalnya, untuk memungkinkan pengguna mengubah suhu di rumah atau bangunan lain, kami menempatkan tombol plus dan minus di bagian bawah UI dan peristiwa "klik" yang menaikkan atau menurunkan suhu satu derajat setiap kali tombol diklik:
Button plus = (Button) xmlCont.getControlByID("@+id/plus");
Label insideTempLabel = (Label) xmlCont.getControlByID("@+id/insideTempLabel");
plus.addPressListener(new PressListener() {
@Override
public void controlPressed(ControlEvent e) {
try {
String tempString = insideTempLabel.getText();
int temp;
temp = Convert.toInt(tempString);
insideTempLabel.setText(Convert.toString(++temp));
} catch (InvalidNumberException e1) {
e1.printStackTrace();
}
}
}); Pengujian pada Raspberry Pi 4
Akhirnya, langkah terakhir! Kami menjalankan aplikasi pada perangkat dan memeriksa hasilnya. Kami hanya perlu mengemas aplikasi dan menyebarkan dan menjalankannya di perangkat target. VNC juga dapat digunakan untuk memeriksa aplikasi pada perangkat.
Seluruh aplikasi, termasuk aset (gambar, dll.), Android XML, TotalCross, dan KnowCode API, berukuran sekitar 8MB di Linux ARM.
Berikut demo aplikasinya:
Lebih banyak sumber daya Linux
- Lembar contekan perintah Linux
- Lembar contekan perintah Linux tingkat lanjut
- Kursus online gratis:Ikhtisar Teknis RHEL
- Lembar contekan jaringan Linux
- Lembar contekan SELinux
- Lembar contekan perintah umum Linux
- Apa itu container Linux?
- Artikel Linux terbaru kami
Dalam contoh ini, aplikasi dikemas hanya untuk Linux ARM, tetapi aplikasi yang sama akan berjalan sebagai aplikasi desktop Linux, perangkat Android, Windows, Windows CE, dan bahkan iOS.
Semua kode sumber sampel dan proyek tersedia di repositori GitHub HomeApplianceXML.
Kemungkinan baru dengan alat yang ada
Membuat GUI untuk aplikasi yang disematkan tidak perlu sesulit sekarang ini. Bukti konsep ini membawa perspektif baru tentang cara melakukan tugas ini dengan mudah—tidak hanya untuk sistem tertanam tetapi untuk semua sistem operasi utama, semuanya menggunakan basis kode yang sama.
Kami tidak bertujuan untuk membuat alat baru bagi desainer atau pengembang untuk membangun aplikasi UI; tujuan kami adalah memberikan kemungkinan baru untuk menggunakan alat terbaik yang sudah tersedia.
Apa pendapat Anda tentang cara baru ini untuk membuat aplikasi? Bagikan pendapat Anda di komentar di bawah.