Menjalankan aplikasi krom pada peranti mudah alih menggunakan cordova

Takeaways Key

Apps Chrome boleh dijalankan pada peranti Android dan iOS menggunakan toolset berdasarkan Apache Cordova, rangka kerja sumber terbuka untuk aplikasi mudah alih pembungkusan menggunakan HTML, CSS, dan JavaScript. Cordova membungkus aplikasi web ini menggunakan shell asli, yang membolehkan pengedaran di Google Play, Apple App Store, dan kedai -kedai lain.
Proses membuat aplikasi Chrome termasuk membuat folder projek, menentukan tetapan yang diperlukan dalam fail manifest.json, membuat tetingkap untuk aplikasi pada pelancaran, dan menyediakan panggilan AJAX untuk mendapatkan data. Proses ini ditunjukkan dengan penciptaan aplikasi Chrome Twitter yang mudah. ​​
Untuk menjalankan aplikasi Chrome pada Android, Java JDK 7 atau lebih tinggi, Android SDK 4.4.2 atau lebih tinggi, dan Apache Ant perlu dipasang pada sistem. Alat baris arahan CCA juga diperlukan. Selepas menubuhkan persekitaran, projek baru boleh dibuat dari aplikasi Chrome yang sedia ada ke pelabuhan ke Android menggunakan arahan tertentu.

Aplikasi Chrome popular di kalangan pengguna Chrome. Dan mengapa tidak, mereka menyediakan kaedah untuk membuat 'aplikasi' mudah alih dalam persekitaran yang biasa pelayar Chrome.

Bayangkan kuasa aplikasi Chrome yang tersedia pada telefon pintar anda. Kami kini boleh menjalankan aplikasi Chrome kegemaran kami di Android dan iOS menggunakan set alat berdasarkan Apache Cordova.

Cordova adalah kerangka sumber terbuka untuk aplikasi mudah alih pembungkusan menggunakan HTML, CSS dan JavaScript. Cordova membungkus aplikasi web HTML, CSS dan JavaScript menggunakan shell asli dan membolehkan pengedaran di Google Play, Apple App Store dan kedai -kedai lain.

Gambaran Keseluruhan

Dalam tutorial ini, kami akan membuat aplikasi Chrome kami sendiri menggunakan HTML, CSS dan JavaScript dan melaburkannya ke Emulator Android. Aplikasi yang akan kami buat akan menjadi aplikasi mudah untuk mengambil tweet terkini berdasarkan hashtag Twitter tertentu.

Membuat aplikasi Chrome

Kami akan bermula dengan membuat aplikasi Chrome kami. Sebaik sahaja kami membuat aplikasi Chrome dan mengujinya pada penyemak imbas Chrome, kami akan memasuki Android.

Kod sumber dari tutorial ini boleh didapati di GitHub.

Buat folder projek yang dipanggil Twitterchromeapp. Di dalam folder Projek Buat fail manifest yang dipanggil manifest.json yang akan menjadi fail konfigurasi untuk aplikasi kami. Di dalam manifest.json kami akan menentukan beberapa tetapan yang diperlukan oleh aplikasi Chrome. Aplikasi Chrome memerlukan manifest_version menjadi 2. Kami juga akan menentukan nama aplikasinya, versi dan laluan ke skrip latar untuk dilaksanakan pada melancarkan aplikasi. Kami akan mengambil tweet dari URL perkhidmatan luaran, jadi kami juga akan menyatakan bahawa di dalam fail ini. Inilah cara manifest.json harus melihat:

<span>{
</span>    <span>"manifest_version": 2,
</span>    <span>"name": "Tweet Chrome App",
</span>    <span>"version": "1.0",
</span>    <span>"app": {
</span>        <span>"background": {
</span>            <span>"scripts": ["scripts/main.js"]
</span>        <span>}
</span>    <span>},
</span>    <span>"permissions": [
</span>        <span>"http://twittersearchapi.herokuapp.com/search"
</span>    <span>]
</span><span>}</span>

Apabila aplikasi Chrome dilancarkan, kami akan menunjukkan tetingkap di mana tweet dari Twitter akan dipaparkan. Aplikasi Chrome mempunyai acara yang dipanggil Onlaunched yang kami gunakan untuk membuat tetingkap untuk aplikasi kami pada pelancaran aplikasi.

Di dalam folder projek twitterchromeapp, buat folder lain yang dipanggil skrip dan di dalamnya membuat skrip latar belakang yang dipanggil main.js. Tambahkan kod berikut ke main.js:

<span>{
</span>    <span>"manifest_version": 2,
</span>    <span>"name": "Tweet Chrome App",
</span>    <span>"version": "1.0",
</span>    <span>"app": {
</span>        <span>"background": {
</span>            <span>"scripts": ["scripts/main.js"]
</span>        <span>}
</span>    <span>},
</span>    <span>"permissions": [
</span>        <span>"http://twittersearchapi.herokuapp.com/search"
</span>    <span>]
</span><span>}</span>

Di dalam acara Onlaunched kami akan membuat janda untuk aplikasi Chrome kami. Tambahkan kod berikut ke main.js:

chrome<span>.app.runtime.onLaunched.addListener(function() {
</span>  <span>// creating window for app code will be here
</span><span>});</span>

Dalam kod di atas, kami telah menggunakan objek skrin untuk mendapatkan lebar dan ketinggian skrin yang tersedia. Berdasarkan lebar sebenar skrin, kami menetapkan batas luar tetingkap krom baru untuk dipaparkan dengan betul.

chrome.app.window.create mencipta tetingkap baru menggunakan HTML di dalam indeks fail.html.

Di dalam folder projek Twitterchromeapp Buat fail baru yang dipanggil index.html seperti yang ditunjukkan di bawah:

chrome<span>.app.runtime.onLaunched.addListener(function() {
</span>
    <span>var screenWidth = screen.availWidth;
</span>    <span>var screenHeight = screen.availHeight;
</span>    <span>var width = 500;
</span>    <span>var height = 300;
</span>
    chrome<span>.app.window.create('index.html', {
</span>        <span>id: "tweetAppID",
</span>        <span>outerBounds: {
</span>            <span>width: width,
</span>            <span>height: height,
</span>            <span>left: Math.round((screenWidth - width) / 2),
</span>            <span>top: Math.round((screenHeight - height) / 2)
</span>        <span>}
</span>    <span>});
</span><span>});</span>

Sekarang cuba pasang aplikasi Chrome dalam penyemak imbas Chrome anda. Terbuka ke Alat -> Sambungan (mungkin lebih banyak alat ). Dayakan mod pemaju dari kotak semak di sebelah kanan atas dan kemudian klik pada Load Unpacked Extension dan pilih folder Projek.

Jalankan lanjutan sama ada melalui tetingkap Apps atau

Seterusnya, kami akan membuat Panggilan Ajax yang dicetuskan apabila tetingkap melancarkan yang mengambil tweet dari URL perkhidmatan. Kami akan menggunakan perkhidmatan yang dihoskan di Heroku. Perkhidmatan ini mempunyai beberapa batasan. Ia hanya mengambil tweet dengan hashtag Perkytweets

, ini cukup untuk contoh kami. kami akan menggunakan jQuery untuk membuat panggilan Ajax kami, jadi muat turun ke folder skrip dan masukkannya dalam index.html, contohnya:

Sekarang buat fail baru yang dipanggil script.js dalam folder skrip dan buat panggilan ajax seperti yang ditunjukkan:

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span>
<span><span><span><head</span>></span>
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><title</span>></span>Chrome Tweet App<span><span></title</span>></span>
</span><span><span><span></head</span>></span>
</span>
<span><span><span><body</span>></span>
</span>    <span><span><span><h1</span>></span>Tweets !!<span><span></h1</span>></span>
</span>
<span><span><span></body</span>></span>
</span>
<span><span><span></html</span>></span></span>

termasuk script.js dalam index.html:

<span><span><span><script</span> type<span>="text/javascript"</span> src<span>="scripts/jquery-1.11.1.min.js"</span>></span><span><span></script</span>></span></span>

Sekarang buka

<span>$(function() {
</span>    $<span>.ajax({
</span>        <span>type: 'GET',
</span>        <span>url: 'http://twittersearchapi.herokuapp.com/search',
</span>        <span>success: function(response) {
</span>            <span>var resObj = JSON.parse(response);
</span>            <span>console.log(resObj);
</span>        <span>},
</span>        <span>error: function(error) {
</span>            <span>console.log(error);
</span>        <span>}
</span>    <span>});
</span><span>});</span>

alat -> sambungan

(atau lebih banyak alat ) dan klik Reload untuk mencerminkan perubahan. Klik seterusnya pada aplikasi untuk melancarkannya semula. Jika anda menyemak Konsol Chrome (hanya konsol biasa yang anda akses di Chrome), ia harus menunjukkan respons dari url perkhidmatan. Seterusnya, kami akan memaparkan respons dalam index.html. Kami akan menggunakan bootstrap untuk menggayakan halaman.

Buat folder Styles di dalam folder projek anda dan muat turun fail CSS Bootstrap ke dalam folder. Sertakan fail CSS Bootstrap di index.html.

Sertakan elemen UL dalam index.html untuk memaparkan tweet. Inilah caranya index.html harus melihat sekarang:

<span><span><span><script</span> type<span>="text/javascript"</span> src<span>="scripts/script.js"</span>></span><span><span></script</span>></span></span>

Di dalam Ajax Success Call kembali dalam skrip.js termasuk kod berikut untuk menambahkan item yang diambil dari panggilan perkhidmatan ke UL dalam index.html.

<span><span><span><link</span> href<span>="styles/bootstrap.min.css"</span> rel<span>="stylesheet"</span>></span></span>

Muat semula dan peluncurkan aplikasinya dan anda sepatutnya dapat melihat skrin yang penuh dengan tweet. Membuat aplikasi Chrome untuk Android

Oleh kerana kami akan menjalankan aplikasi kami di Android, pastikan anda mempunyai Java JDK 7 atau lebih tinggi, Android SDK 4.4.2 atau lebih tinggi dan Apache Ant dipasang pada sistem anda.

Kami juga memerlukan alat baris perintah CCA. Anda boleh memasangnya menggunakan

<span>{
</span>    <span>"manifest_version": 2,
</span>    <span>"name": "Tweet Chrome App",
</span>    <span>"version": "1.0",
</span>    <span>"app": {
</span>        <span>"background": {
</span>            <span>"scripts": ["scripts/main.js"]
</span>        <span>}
</span>    <span>},
</span>    <span>"permissions": [
</span>        <span>"http://twittersearchapi.herokuapp.com/search"
</span>    <span>]
</span><span>}</span>

Maklumat terperinci mengenai penyediaan persekitaran anda untuk memindahkan aplikasi Chrome ke Android dan iOS boleh didapati dalam dokumen rasmi.

Setelah menubuhkan persekitaran kami selesai, kami akan membuat projek baru dari Twitterchromeapp sedia ada kami ke pelabuhan ke Android. Jalankan arahan berikut untuk membuat projek:

chrome<span>.app.runtime.onLaunched.addListener(function() {
</span>  <span>// creating window for app code will be here
</span><span>});</span>

Navigasi ke TwitterAppForandroid dan jalankan arahan berikut untuk menjalankan projek dalam emulator Android:

chrome<span>.app.runtime.onLaunched.addListener(function() {
</span>
    <span>var screenWidth = screen.availWidth;
</span>    <span>var screenHeight = screen.availHeight;
</span>    <span>var width = 500;
</span>    <span>var height = 300;
</span>
    chrome<span>.app.window.create('index.html', {
</span>        <span>id: "tweetAppID",
</span>        <span>outerBounds: {
</span>            <span>width: width,
</span>            <span>height: height,
</span>            <span>left: Math.round((screenWidth - width) / 2),
</span>            <span>top: Math.round((screenHeight - height) / 2)
</span>        <span>}
</span>    <span>});
</span><span>});</span>

Setelah emulator berjaya dilancarkan, anda harus melihat aplikasi yang berjalan di dalam emulator.

Kesimpulan

Dalam tutorial ini, kami melihat bagaimana untuk membuat aplikasi Chrome mudah dan portnya ke platform Android. Maklumat lanjut mengenai menjalankan aplikasi Chrome pada peranti mudah alih menggunakan Apache Cordova boleh didapati di dokumen pegawai.

Apa pendapat anda mengenai pilihan aplikasi Chrome ini untuk membuat aplikasi mudah alih? Adakah ia menawarkan sebarang kelebihan hanya menggunakan aplikasi web HTML, CSS dan JavaScript standard di dalam Cordova?

Soalan Lazim (Soalan Lazim) Mengenai Running Chrome Apps pada Peranti Mudah Alih Menggunakan Cordova

Bagaimana saya boleh memasang Cordova pada sistem saya?

Untuk memasang Cordova, anda perlu mempunyai Node.js yang dipasang pada sistem anda. Sebaik sahaja Node.js dipasang, anda boleh memasang Cordova menggunakan NPM (Pengurus Pakej Node) dengan menjalankan perintah NPM Install -g Cordova di terminal atau command prompt anda. Bendera -g digunakan untuk memasang Cordova secara global pada sistem anda.

Apakah prasyarat untuk menjalankan aplikasi Chrome pada peranti mudah alih menggunakan Cordova? Peranti Menggunakan Cordova, anda perlu memasang yang berikut pada sistem anda: Node.js, Cordova, Apps Chrome untuk Toolchain Mudah Alih, dan Android SDK atau iOS SDK Bergantung pada platform yang anda target Dengan arahan CREATE dan nama projek anda. Sebagai contoh, CCA membuat myProject. Ini akan mewujudkan projek Cordova baru dalam direktori yang dinamakan myProject.

Bagaimana saya boleh menambah platform ke projek Cordova saya?

Tambah arahan diikuti dengan nama platform. Sebagai contoh, platform Cordova menambah Android akan menambah platform Android ke projek anda. diikuti dengan nama platform. Sebagai contoh, Cordova membina Android akan membina projek anda untuk platform Android.

Bagaimana saya boleh menjalankan projek Cordova saya pada peranti? Sebagai contoh, Cordova menjalankan Android akan menjalankan projek anda pada peranti Android.

Bagaimana saya boleh debug projek Cordova saya? Untuk melakukan ini, anda perlu menavigasi ke Chrome: // Periksa dalam pelayar Chrome anda dan klik pada pautan semak di bawah peranti anda. 🎜>

Walaupun Cordova membolehkan anda menjalankan aplikasi Chrome pada peranti mudah alih, terdapat beberapa batasan. Sebagai contoh, tidak semua API Chrome disokong, dan mungkin terdapat perbezaan tingkah laku antara aplikasi Chrome dan aplikasi Cordova kerana perbezaan dalam platform yang mendasari. 🎜> Ya, anda boleh menggunakan plugin Cordova dalam aplikasi Chrome anda. Untuk melakukan ini, anda perlu menambah plugin ke projek anda menggunakan arahan plugin Cordova diikuti dengan nama plugin. Projek Cordova, anda boleh menggunakan arahan kemas kini platform Cordova diikuti dengan nama platform. Sebagai contoh, kemas kini platform Cordova Android akan mengemas kini platform Android dalam projek anda.

Atas ialah kandungan terperinci Menjalankan aplikasi krom pada peranti mudah alih menggunakan cordova. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!