10 petua untuk membangunkan aplikasi web kiosk

Saya fikir saya akan menulis beberapa petua dari pengalaman saya untuk membangunkan aplikasi web kiosk. Boleh berguna untuk melihat dengan cepat melalui pastikan aplikasi web kiosk seterusnya tidak terlepas pandang apa -apa. Di sini mereka.

1. Lumpuhkan Pemilihan Teks

Sesetengah kiosk berkelakuan sedemikian rupa sehingga teks masih boleh dipilih apabila menyeret jari anda, ini juga bergantung pada penyemak imbas/perisian yang anda gunakan untuk memaparkan aplikasinya.

<span>/* disable text selection */
</span>    <span>-webkit-touch-callout: none;
</span>    <span>-webkit-user-select: none;
</span>    <span>-khtml-user-select: none;
</span>    <span>-moz-user-select: moz-none;
</span>    <span>-ms-user-select: none;
</span>    user<span>-select: none;</span>

2. Mencontohi peranti sentuhan. Semasa membangunkan penggunaan alat Chrome Dev untuk mensimulasikan acara klik anda dan sentuh/sapu.

3. Cache Cache Force Refresh Aplikasi Web Kiosk mungkin menjalankan media cache dan memaksa mereka untuk menjalankan kod terkini yang mungkin perlu ditambah pembolehubah kepada media statik untuk memaksa penyemak imbas untuk menyegarkan JS/CSS. Anda boleh mempersiapkan pembolehubah dinamik ke media statik secara invididally atau jika anda menggunakan php, contohnya index.php anda boleh melakukan sesuatu seperti ini:

4. Gunakan Google Chrome dalam mod kiosk

<span>< ?php
</span>    <span>//currently changes daily at middnight
</span>    $forceNum <span>= '5'; //increment this number to force browser to refresh static media cache(js/css).
</span>    $cacheKey <span>= '?'.strtotime(date('Y-m-d')).$forceNum;
</span><span>?>
</span><span><link href="css/styles.css<?php echo $cacheKey; ?/>" rel="stylesheet">
</span><span><script src="js/main.js<?php echo $cacheKey; ?>"></script></span>

Chrome boleh bermula dalam mod kiosk keluar dari kotak. Hebat untuk ujian. Ikuti arahan ini untuk mengetahui cara melakukannya -> Persediaan Mod Kiosk Chrome.

5. Bootstrap dengan Sokongan Touch

Jika anda bermula dari awal jangan mencipta semula roda! Semak Gumby 2 Bootstrap yang mempunyai sokongan sentuhan keluar dari kotak dan UI bootstrap yang disesuaikan untuk mudah mendapatkan aplikasi web mencari cara yang anda mahukan. Backbone.js menyediakan pandangan segera dan pengurusan templat dan data antara pandangan.

6. Mencegah panggilan skrip sapu pendua

Apabila pengguna menggesek skrin, ia mungkin membakar pelbagai peristiwa dan hanya boleh dibakar sekali sahaja. Jadi untuk memastikan aplikasi anda berjalan lancar menggunakan skrip debounce.

7. Pramuat Gambar Aplikasi Web Anda

Berikut adalah tutorial mengenai cara menyiapkan preloading imej aplikasi web anda. Ini secara dramatik boleh mempercepatkan penggunaan aplikasi anda dan mencegah pemuatan skala imej yang lebih besar.

Saya akan mengemas kini dengan lebih banyak lagi apabila saya mengkaji semula kod/fungsi. - Seperti biasa berasa bebas untuk berkongsi tip anda dan saya akan menambahnya.

Soalan Lazim (Soalan Lazim) untuk Membangunkan Aplikasi Web Kiosk

Apakah pertimbangan utama ketika membangunkan aplikasi web kiosk? Pertama, anda perlu memastikan bahawa aplikasi itu mesra pengguna dan intuitif. Ini bermakna antara muka pengguna harus mudah dan mudah dinavigasi. Kedua, aplikasi itu harus direka untuk dijalankan dalam mod skrin penuh, tanpa sebarang kawalan penyemak imbas kelihatan. Ini adalah untuk mengelakkan pengguna menavigasi dari aplikasi. Ketiga, aplikasi itu harus direka untuk mengendalikan input sentuhan, kerana kebanyakan kiosk menggunakan skrin sentuhan. Akhir sekali, permohonan itu harus teguh dan dapat mengendalikan kesilapan dengan anggun, untuk mengelakkan sebarang gangguan dalam perkhidmatan.

Bagaimana saya boleh membuat aplikasi web kiosk saya dijalankan dalam mod skrin penuh?

Untuk membuat aplikasi web kiosk anda dijalankan dalam mod skrin penuh, anda boleh menggunakan API Fullscreen HTML5. API ini membolehkan anda untuk memasuki dan keluar secara pemrograman mod skrin penuh, serta mengesan apabila penyemak imbas berada dalam mod skrin penuh. Walau bagaimanapun, perlu diingat bahawa API skrin penuh tidak disokong oleh semua pelayar, jadi anda mungkin perlu memberikan sandaran untuk penyemak imbas yang tidak menyokongnya.

Mengendalikan input sentuhan dalam aplikasi web kiosk boleh dilakukan dengan menggunakan API Peristiwa Touch HTML5. API ini menyediakan satu set peristiwa yang boleh anda dengar dalam aplikasi anda, seperti TouchStart, TouchMove, dan Touchend. Dengan mendengar peristiwa-peristiwa ini, anda boleh bertindak balas terhadap input pengguna dengan cara yang sesuai untuk skrin sentuh. Aplikasi web kiosk anda teguh dan tahan ralat melibatkan gabungan amalan reka bentuk yang baik dan ujian menyeluruh. Di sisi reka bentuk, anda harus berhasrat untuk memastikan permohonan anda semudah mungkin, untuk mengurangkan potensi kesilapan. Di sisi ujian, anda harus menguji permohonan anda di bawah pelbagai keadaan, untuk memastikan ia dapat mengendalikan situasi yang tidak dijangka dengan anggun. 🎜> Ya, anda boleh menggunakan rangka kerja pembangunan web untuk membina aplikasi web kiosk. Walau bagaimanapun, beberapa rangka kerja mungkin lebih sesuai untuk tugas ini daripada yang lain. Sebagai contoh, rangka kerja yang menyokong aplikasi satu halaman (SPA) boleh menjadi pilihan yang baik untuk aplikasi web kiosk, kerana mereka membenarkan pengalaman pengguna yang lancar tanpa sebarang halaman semula. Dari aplikasi web kiosk saya?

Satu cara untuk mengelakkan pengguna menavigasi dari aplikasi web kiosk anda adalah untuk menyembunyikan kawalan penyemak imbas. Ini boleh dilakukan menggunakan API skrin penuh HTML5, seperti yang dinyatakan sebelum ini. Cara lain adalah untuk melumpuhkan menu konteks klik kanan, yang boleh dilakukan dengan menggunakan JavaScript. Sertakan pengendalian input sentuhan, berjalan dalam mod skrin penuh, menghalang pengguna dari menavigasi dari aplikasi, dan memastikan aplikasi itu teguh dan tahan ralat. Cabaran -cabaran ini dapat ditangani melalui reka bentuk yang teliti dan ujian menyeluruh.

Bagaimana saya boleh menguji aplikasi web kiosk saya?

Menguji aplikasi web kiosk boleh dilakukan dengan pelbagai cara. Satu pendekatan yang biasa adalah menggunakan gabungan ujian unit, ujian integrasi, dan ujian akhir-ke-akhir. Ujian unit boleh digunakan untuk menguji komponen individu aplikasi, ujian integrasi boleh digunakan untuk menguji bagaimana komponen ini berfungsi bersama-sama, dan ujian akhir-ke-akhir boleh digunakan untuk menguji aplikasi secara keseluruhan. Bolehkah saya menggunakan Sistem Pengurusan Kandungan (CMS) untuk membina aplikasi web kiosk? CMS boleh menyediakan antara muka mesra pengguna untuk menguruskan kandungan aplikasi anda, serta pelbagai alat dan plugin yang dapat membantu proses pembangunan. Aplikasi?

Mengoptimumkan prestasi aplikasi web kiosk boleh melibatkan pelbagai teknik, seperti meminimumkan fail JavaScript dan CSS anda, mengoptimumkan imej anda, dan menggunakan Rangkaian Penghantaran Kandungan (CDN) untuk menyampaikan fail statik anda. Di samping itu, anda harus berhasrat untuk memastikan permohonan anda ringan, untuk memastikan ia memuat dengan cepat dan berjalan lancar.

Atas ialah kandungan terperinci 10 petua untuk membangunkan aplikasi web kiosk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!