Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Tools & Tips

Sederhanakan Proses Anda dengan Volo

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Oktavia maria putri (you can also view the original English article)

Pengembang front-end menghadapi berbagai tantangan saat membuat situs yang memiliki solusi berulang. Semua situs menggunakan kerangka DOM yang sama, serta banyak fitur dan atribut umum. Volo bertujuan untuk menghapus beberapa upaya dari proses, yang memungkinkan pengembang untuk fokus pada aspek-aspek baru dari suatu proyek, karena dianggap sama.

Jika Anda menambahkan file JavaScript yang tidak kompatibel dengan AMD, Volo akan mencoba dan mengubahnya untuk Anda.

Volo adalah aplikasi yang membantu pengembang front-end dengan mengotomatisasi prosesnya. Ini memungkinkan Anda membuat proyek berdasarkan template; Anda dapat memperluas templat ini dan menyiapkan perintah khusus untuk mengotomatiskan tugas yang berulang.

Volo diciptakan dengan hubungan yang sangat khusus dengan GitHub; ia mengerti respon GIT, serta cabang dan tanda. Tidak ada paket atau repositori khusus Volo; jika ada sesuatu di GitHub, Anda dapat menggunakannya dalam proyek Anda. Inilah yang membedakan Volo dari aplikasi serupa.

Volo was created by James Burke, the same James Burke that created the very popular require.js library

Ini mungkin tidak mengejutkan Anda bahwa Volo memiliki alur kerja yang sangat didengung-dengungkan; diasumsikan Anda ingin menggunakan AMD yang tepat untuk file, serta menyediakan preset di tempat menyimpan file.

Apakah ini hal yang buruk? Tidak juga - Anda harus melakukan hal ini. Selain itu, Anda dapat mengganti perintah jika Anda perlu melakukannya.

Jadi mari kita mulai dengan mengikuti beberapa perintah Volo


Membuat Proyek

Anda mungkin akan menggunakan perintah create terlebih dahulu. Saya menyebutkan bahwa Volo berakar kuat di GitHub, tetapi cukup menarik, Volo sebenarnya tidak menggunakan GIT. Anda biasanya hanya ingin snapshot dari repo, bukan seluruh sejarah komitmennya; jadi Volo hanya mengunduh file repo tanpa data GIT yang sebenarnya.

Metode paling sederhana untuk mereferensikan sebuah template adalah dengan hanya memberikan nama repo. Misalnya, jika Anda ingin menyalin repo bernama 'starterTemplate', Anda cukup mengetikkan perintah berikut:

Dengan asumsi repo adalah hasil pertama yang dikembalikan oleh GitHub, Volo akan mengunduh dan "menginstal" template ke direktori baru bernama myApp.

Ini sedikit berisiko, terutama jika Anda lebih suka menamai repos Anda dengan judul yang sangat umum. Untungnya, Anda dapat menentukan lebih banyak detail untuk mempersempit hasil yang ditetapkan. Sistem penyaringan cukup maju ketika mengartikan masukan Anda. Pada dasarnya, Anda dapat menggunakan:

Anda juga dapat menghilangkan beberapa informasi tertentu. Misalnya, Anda dapat menghilangkan nama pengguna GitHub, menyebabkan Volo mencari proyek pertama dengan nama dan cabang yang diberikan.

Atau, Anda dapat menentukan nama pengguna tetapi mengabaikan versi / cabang, dan Volo akan mengunduh versi yang diberi tag terbaru.

Jika tidak ada tag yang ditemukan, Volo akan kembali ke cabang master. 

Selain itu, Anda tidak perlu menentukan versi yang tepat. Mengetik ekspresi seperti "> 1.0" memberi tahu Volo untuk mengunduh versi yang lebih besar dari 1.0.

Last but not least, Anda tidak perlu menggunakan repo dari Github; Anda cukup meneruskan URL ke arsip zip yang ingin Anda gunakan sebagai template Anda. Untuk menyalin folder lokal, Anda dapat menggunakan format berikut:

Jadi ada berbagai opsi yang dapat Anda gunakan untuk memilih repo yang Anda inginkan, dan Anda bahkan dapat menghilangkan nama repo untuk menggunakan Volo sendiri default template.


Mencari dan Mengambil Informasi Repo

Tidak yakin siapa pemilik repo yang populer? Gunakan perintah search.

Ini menggunakan pencarian GitHub yang sama seperti create; sehingga Anda dapat yakin bahwa repo pertama dalam hasil pencarian Anda adalah repo Volo yang akan diunduh.

Perintah search hanya untuk menemukan repo atau mengambil informasinya. Akibatnya, ia tidak memiliki beberapa fungsi yang ditemukan dalam perintah create. Misalnya, James membuat beberapa template resmi yang dapat Anda gunakan, tetapi Anda mungkin tidak tahu nama mereka.

Pelaksana volo search volojs/template menampilkan beberapa opsi bagus untuk digunakan.

Anda tidak harus terlalu akurat dengan kriteria pencarian Anda; Volo melakukan pekerjaan layak menemukan apa yang Anda inginkan. Ini sangat cepat.

Jika Anda ingin informasi lebih lanjut tentang repo, seperti nomor versi atau tautan, Anda dapat menggunakan perintah info dengan nama yang tepat. Salah satu hasil dari volo search volojs/template adalah repo bernama 'volojs/create-responssive-template'. Anda dapat mengambil informasi lebih lanjut tentang repo ini dengan mengetik:

Menggunakan perintah create, search, dan info, kita dapat mengasumsikan bahwa kita membuat aplikasi kita. Jadi apa selanjutnya?


Menambahkan File

Selanjutnya, kita perlu menambahkan dependensi. Ini cukup mudah, dan menggunakan opsi yang sama dengan perintah create dengan beberapa tambahan. Selain dapat menentukan pengguna GitHub, cabang / tag atau URL ke zip, perintah add memungkinkan Anda menambahkan "#<filebane> " untuk intall file tertentu dari repo. Banyak repo cenderung memiliki pustaka JaveScript yang Anda inginkan, tetapi dikemas bersama dengan demo dan dokumentasi. Lebih sering daripada tidak, Anda hanya menginginkan perpustakaan, dan perintah add memungkinkan Anda melakukan ini.

Mari berpura-pura Anda ingin mengunduh pustaka yang disebut 'foo.js'. Anda cukup mengetik:

Ini mengunduh seluruh file zip dari GitHub, hanya mengekstrak file foo.js dan menambahkannya ke proyek Anda. Fitur hashtag ini tidak khusus untuk nama file; Anda dapat meneruskan nama folder untuk menambahkan hanya folder yang ditentukan ke proyek Anda.

Sebelumnya saya menyebutkan bahwa Volo mengharapkan Anda untuk mempraktekkan AMD yang tepat. Jadi jika Anda menambahkan file JavaScript yang tidak kompatibel dengan AMD, Volo akan mencoba dan mengubahnya untuk Anda. Prosesnya sangat sederhana.

Ini dimulai dengan menanyakan dependensi apa yang digunakan file JavaScript Anda.

Anda dapat meneruskan nama-nama dependensi dalam daftar yang dipisahkan koma, atau Anda dapat secara opsional memberi mereka nama variabel. Berikut ini contoh apa yang dapat Anda ketikkan untuk jQuery plugin :

Ini memberitahu Volo bahwa perpustakaan yang ditentukan membutuhkan file bernama jquery1.9 dan meneruskannya di bawah nama variabel jQuery. Kemudian kita menambahkan koma untuk menyatakan ketergantungan berikutnya: jqueryui.

Setelah Anda selesai menyatakan dependensi Anda, Anda dapat menyatakan apa yang ingin Anda ekspor dari skrip Anda. Anda biasanya tidak mengekspor apa pun di plugin jQuery; yang ditangani oleh jQuery sendiri. Tetapi jika Anda memiliki pustaka JavaScript yang perlu mengekspor sesuatu, Anda cukup mengetikkan nama variabel yang diinginkan di skrip Anda. Anda dapat menggunakan fitur konversi ini dengan cepat dengan perintah amdify:

Hanya lewat nama file yang diinginkan.

Anda juga dapat secara otomatis mengganti nama file yang diunduh. Misalnya, Anda mungkin ingin menambahkan file bernama jquery.pluginName.1.3.min.js, tetapi ini bukan file yang mudah untuk referensi di skrip Anda. Anda dapat mengirimkan nama baru sebagai parameter terakhir ke perintah add, dan Volo akan mengganti nama file.

Singkatnya, kita dapat menginstal plugin pseudo jQuery ini dari dalam repo dengan mengetikkan yang berikut:

Volo akan mengunduh repo yang ditentukan, ekstrak hanya file yang diberikan untuk plugin, tanyakan bagaimana cara mengubahnya menjadi sesuai AMD dan letakkan di proyek Anda dengan nama baru. Ini banyak kontrol dan otomatisasi dalam perintah yang sangat mudah digunakan.

Sekarang mari kita lanjutkan ke Volofiles.


Volofiles

Volofile memungkinkan Anda mengotomatiskan tugas dengan membuat perintah mirip makro. Sebagai contoh, pengguna CoffeeScript dan SCSS dapat secara manual mengeluarkan perintah berikut untuk mengkompilasi file-file mereka:

Ini adalah banyak perintah untuk dijalankan berulang kali. Tentu saja, seseorang dapat menambahkan perintah ini ke file bash, tetapi mengotomatisasi beberapa operasi lebih dari mungkin melibatkan file bash semi-rumit atau file bash beberapa. Dengan Volo, Anda membuat file bernama volofile. Di dalam file ini, Anda membuat objek JavaScript yang berisi perintah yang ingin Anda jalankan. Kemudian Anda dapat memanggil mereka seolah-olah mereka adalah perintah asli.

Berikut ini contoh volofile menggunakan parameter umum:

Anda kemudian dapat mengetikkan volo -h untuk melihat perintah-perintah ini dan ringkasannya. Memasukkan volo hi -h menunjukkan apa saja yang ada di bidang doc. Kunci validate adalah opsional, dan Anda dapat menggunakannya untuk tujuan pengujian untuk keluar secara opsional jika ada masalah. Last but not least, kami memiliki properti run, yang berisi daftar perintah untuk dieksekusi. Anda dapat memasukkan string sederhana atau serangkaian string, dan Volo akan memproses dan menjalankan masing-masing string.

Dengan perintah di atas, saya akan dapat mengetik:

Untuk mendapatkan hasil, atau:

Untuk memicu pernyataan if dan keluar dengan pesan kesalahan yang disediakan. Ini mungkin contoh paling mendasar, dan Anda memiliki lebih banyak opsi yang tersedia saat membuat perintah Anda sendiri.

Saya menyebutkan Volo memproses setiap string dalam run properti . Contoh di atas menggunakan pengaturan 'last-resort'. Volo pertama mencari karakteristik tertentu dalam perintah Anda, dan hanya mengeksekusi string di terminal standar jika tidak dapat menentukan apa yang Anda inginkan. Anda memiliki dua opsi sebelum itu, dan mereka diberi nama 'v' dan 'n'.

Kata Kunci 'v' dan 'n'

Kedua kata kunci ini memungkinkan Anda menyuntikkan fungsi kustom ke dalam string run Anda. Jika Anda perlu membaca file, menjalankan proses, atau tugas khusus OS lainnya, Anda ingin menggunakan kata kunci 'v'. Hanya menulis perintah (misalnya rm file.js) hanya berfungsi pada sistem operasi yang mendukung perintah yang diberikan. Dengan menggunakan perintah v, Anda memastikan dukungan cross-platform dari volofile Anda. Misalnya, Anda dapat menambahkan string run berikut jika Anda ingin menyalin file dari satu lokasi ke lokasi lain:

Perintah cross-platform. Untuk melihat daftar lengkap opsi 'v', lihat source file. Anda dapat menambahkan parameter dengan spasi (seperti di terminal) daripada menggunakan tanda kurung.

Selanjutnya kita memiliki kata kunci n, yang memetakan ke modul executable node.js. Jika Anda menetapkan perintah di bawah kata kunci n, Volo memeriksa apakah ia dapat menemukan node.js yang dapat dieksekusi dalam folder node_modules pribadi proyek saat ini, dan itu jatuh kembali ke folder modul node.js global jika tidak ditemukan.

Node.js, atau lebih spesifik NPM, memiliki koleksi alat pengembangan kualitas yang sangat banyak yang dibuat oleh banyak orang pintar dan kreatif.

Volo memanfaatkan sumber daya yang sangat besar itu dengan memungkinkan Anda untuk mem-plugin eksekutabel mereka langsung ke Volofiles Anda. James Burke bahkan telah membuat template untuk membuat modul node.js Anda sendiri khusus untuk Volo, tetapi kita akan mendapatkannya dalam satu menit.

Contoh penggunaan kata kunci n adalah modul CoffeeScript. Jika Anda ingin mengcompile direktori yang berisi file-file CoffeeScript, kita dapat menulis perintah berikut:

Bahkan jika CoffeeScript tidak diinstal secara global, Anda dapat memastikannya berjalan di semua OS dari folder node_modules lokal.

Sekarang Anda dapat menggunakan template perintah yang saya sebutkan (download here, dengan cara) untuk membuat perintah Volo yang dapat digunakan kembali untuk digunakan di semua proyek Anda. Misalnya, jika Anda memiliki modul yang mencadangkan aplikasi Anda, Anda mungkin ingin memasukkannya ke dalam semua proyek Anda.

Buat modul NPM standar yang mengekspor properti tersebut (summaryrun dll) dan minta modul ke Volofile Anda.

Jadi, dengan paket Anda ditambahkan ke NPM, Anda cukup mengetik:

Dan dalam volofile Anda, ketikkan saja:

Di mana index.js adalah nama ekstensi Anda. Karena file Anda mengekspor properti yang diperlukan, opsi akan langsung disuntikkan ke dalam volofile Anda di bawah nama perintah yang diberikan. Saya tidak akan benar-benar menyebutnya sebagai fitur khusus (JavaScript standar), tetapi masih bagus untuk mengetahui Anda memiliki opsi ini.

Sekarang dengan teori ini, mari kita lihat contoh dunia nyata. Kami akan membangun aplikasi menggunakan Volo.


Mulai

Volo adalah paket NPM, jadi menginstalnya sesederhana:

Untuk artikel ini, saya pikir saya akan membuat halaman web kecil untuk menghasilkan peta daerah Anda, menunjukkan siapa walikota Foursquare dari situs favorit Anda. Ini bukan ide yang sangat luar biasa, tetapi itu akan membuat Volo melalui langkahnya.

Jadi untuk memulai, kita perlu repo. Anda dapat menemukan sejumlah template starter, yang dibuat khusus untuk Volo, hanya dengan mencari GitHub. Template default dilengkapi dengan kebutuhan dasar: kerangka HTML sederhana dan folder JavaScript dengan setup barebone AMD.

Anda juga mendapatkan volofile dengan perintah build untuk mengkompilasi file JavaScript dan CSS proyek.

Saya tidak akan menggunakan template standar, karena saya ingin memiliki lebih banyak sumber daya. Setelah pencarian GitHub cepat, saya menemukan an official template yang berisi default, kerangka bootstrap, dan sumber daya lainnya.

Jadi untuk membuat proyek baru kami (yang saya beri nama 'turf'), Anda cukup mengetikkan yang berikut di jendela terminal:

Ini membuat folder proyek dan mengunduh snapshot dari repo yang ditentukan. Selanjutnya, untuk mengunduh sumber daya lainnya. Kami jelas akan menggunakan jQuery, jadi mari menambahkannya:

Kami juga membutuhkan cara untuk menampilkan peta di halaman. Google Maps muncul dalam pikiran, jadi kami akan menggunakan perpustakaan bernama gmaps. File JavaScript berisi seluruh pustaka; oleh karena itu, kami tidak benar-benar membutuhkan sisa repo. Selain itu, Anda dapat melihat bahwa pustaka disimpan dalam variabel bernama GMap, dan memerlukan Google maps API sebagai dependensi.

Ada satu masalah kecil dengan ini: Google Maps API tidak sesuai dengan AMD dan merupakan pustaka asynchronous.

Ketika Anda memuat URL tunggal, itu terus memuat sumber daya lain dengan sendirinya. Ini membuat penggunaan standar membutuhkan.js masalah, tapi ada plugin yang menangani situasi yang tepat ini. Ini bagian dari repo yang disebut "requirejs-plugins", tetapi sekali lagi, kita tidak perlu repo keseluruhan. Jadi, ketikkan yang berikut di jendela terminal:

Dengan plugin async, kita dapat memuat dependensi asynchronous khusus.

Kami memiliki dua opsi untuk menginstal plugin yang sebenarnya:

  • Konversi pustaka menjadi sesuai-AND.
  • Gunakan fitur shim require.js untuk menambahkan file non-AMD.

Saya akan menunjukkan cara menggunakan kedua opsi. Untuk mengonversi file, tambahkan saja. Volo akan secara otomatis mendeteksi bahwa file perlu dikonversi:

Volo diciptakan dengan hubungan yang sangat khusus dengan GitHub; ia mengerti repo GIT, serta cabang dan tag.

Menurut halaman Github proyek, itu bergantung pada google maps API. Ada masalah kecil saat memasukkan URL karena berisi karakter yang tidak didukung (tanda sama dengan). Jadi mari kita gunakan placeholder; cukup ketik googlemaps dan tekan enter. Selanjutnya, kita perlu menentukan apa yang ingin kita ekspor. Ketik GMaps (dengan dua huruf besar; itulah nama variabel) dan tekan enter. Volo akan selesai mengonversinya dan menambahkannya ke folder js / lib.

Mengapa folder js /lib? Jika Anda melihat file package.json di root proyek Anda, Anda akan melihat entri bernama baseUrl di bawah properti amd. Ini memberitahu Volo di mana menaruh semua file JavaScript yang diunduh. Sebenarnya ada sejumlah lokasi yang dicari Volo untuk memutuskan tempat menaruh barang:

  1. properti baseDir di bawah entri bernama volo
  2. properti baseUrl lagi di bawah volo
  3. baseUrl di bawah amd seperti yang kita miliki di sini
  4. folder js di direktori Anda saat ini
  5. folder scripts di direktori Anda saat ini

Jika tidak ada lokasi ini, Volo menempatkan file di direktori saat ini.

Dengan memasang modul, kami masih perlu mengganti placeholder yang kami buat untuk Google Maps API. Buka file www / js / lib / gmaps.js dan ganti placeholder di baris pertama (atau kedua) dengan yang berikut:

Ini memberitahu Volo untuk memasukkan plugin async dan memberikannya URL untuk Google Maps API.

Modul GMaps sekarang sudah terinstal sepenuhnya, tetapi Anda harus memasukkan koordinat garis bujur dan garis lintang tertentu - sesuatu yang kebanyakan pengguna tidak akan tahu. Jadi kita harus memiliki semacam plugin autocomplete yang mengubah nama lokasi menjadi koordinat.

Setelah pencarian Github cepat lainnya, saya menemukan plugin jQuery yang disebut geocomplete oleh ubilabs. Ini juga tidak sesuai AMD, tetapi kami akan menggunakan fitur shim require.js '. Di terminal ketik perintah berikut:

Opsi amdoff mencegah Volo dari mengonversi file, dan parameter akhir mengganti nama file dari jquery.geocomplete.js menjadi geocomplete.js. Ini tidak wajib, tetapi itu membuat referensi lebih nyaman.

Sekarang buka file www / js / app.js, dan ganti pernyataan config require.js di bagian atas:

Hanya untuk menjalankan melalui pengaturan yang sudah ada, baseUrl memberitahu require.js di mana harus mencari file relatif, dan opsi paths.app memberitahu require.js bahwa jika nama modul memiliki referensi ke lokasi bernama "app", maka untuk mengganti dengan apa yang ditentukan ('../app').

Bagian shim adalah apa yang saya tambahkan ke file. Ini memberitahu require.js untuk memuat jQuery dan Google Maps API saat seseorang memuat file bernama geocomplete. Anda dapat secara opsional mengatur properti lain yang disebut exsports, nama variabel untuk diekspor. Kami tidak perlu mengekspor apa pun karena ini adalah plugin dan menempel ke objek jQuery.

Pada titik ini, kita memiliki file yang diperlukan untuk menampilkan peta dan mengambil koordinat yang diperlukan. Kami belum menulis kode apa pun, tetapi kami memiliki semua dependensi.


Garis Besar

Untuk memulai membuat prototipe aplikasi kami, kami perlu menulis beberapa HTML. Buka file index.html dan hapus semua yang ada di dalam tag body kecuali <script  /> elemen di bagian bawah. Anda harus pergi dengan file seperti berikut:

Selanjutnya, tambahkan kolom input teks untuk kotak pencarian dan placeholder untuk peta aktual. Area tubuh baru Anda akan terlihat seperti ini:

Ini sedikit lebih dari dasar-dasar sehingga sesuai dengan aturan CSS bootstrap. Saya memberi teks masukan ID search dan peta <div /> sebuah ID map. Sekarang mari kita buka file JavaScript.

Volo adalah aplikasi yang membantu pengembang front-end dengan mengotomatisasi prosesnya.

Saya akan memecahnya bagi Anda yang baru membutuhkan.js. Alasan utama untuk menggunakan sesuatu seperti require.js adalah untuk memastikan dependensi skrip Anda dimuat ketika, dan hanya ketika, skrip Anda benar-benar membutuhkannya. Ini meningkatkan kecepatan keseluruhan situs Anda dan menyederhanakan file HTML Anda (Anda tidak perlu banyak referensi skrip).

Anda dapat melihat skrip di bagian bawah file HTML mengarah ke pustaka require.js, dan juga memiliki atribut data-main yang secara otomatis berjalan setelah require.js siap.

Jika Anda membuka js / app.js, bagian konfigurasi yang dimodifikasi dan pernyataan yang diperlukan di bagian bawah. Perhatikan bahwa Anda tidak memerlukan ekstensi file. Dalam file indeks, kami mereferensikan js / app (tanpa .js), dan di sini memuat app / main.

Biasanya, referensi ke app / main akan memetakan ke file bernama main.js di dalam folder yang disebut app (semua relatif ke folder js / lib). Tetapi ingat dalam konfigurasi, kami mengatakan referensi apa pun ke aplikasi yang disebut app, harus diganti dengan ../app. Daripada mencari js / lib / app / main.js, require.js akan mengambil js / app / main.js.

Selanjutnya, buka js / app / main.js, hapus semuanya dan ketik yang berikut:

Parameter pertama adalah array dependensi kami. Yang kedua adalah fungsi dengan nama parameter untuk jQuery ($) dan GMaps (gmaps). Ingat bahwa geocomplete adalah plugin jQuery, jadi tidak ada alasan untuk memberikannya parameter yang sesuai ..

Fungsi dilewatkan ketika parameter kedua dijalankan setelah pemuatan akhir dependensi.

Di dalam fungsi ini, kita menjalankan metode geocomplete () ketika dokumen sudah siap.

Anda sekarang dapat membuka halaman di browser Anda, dan jika semua berjalan dengan baik, kotak teks harus mengatakan "Enter a Location". Mulai mengetik, dan Anda akan melihat beberapa hasil.

Selanjutnya, kita perlu menangani acara ketika kecocokan ditemukan, yaitu ketika pengguna menekan tombol Enter pada nama tempat. Peristiwa ini adalah: geocode: result dan geocode: error. Tambahkan kode untuk menangani acara-acara ini:

Langkah selanjutnya adalah mengambil lintang dan bujur dan menghasilkan peta baru. Lat / long disimpan dalam properti bernama geometry.location.hb dan geometry.location.ib, masing-masing. Tambahkan kode berikut di dalam geocode: result handler:

Kami menyimpan koordinat dan memuat peta baru. Membuat peta sederhana: kami memberikan ID penampung bersama dengan koordinat dan tingginya.

Anda sekarang harus dapat mencari dan menampilkan peta. Selanjutnya, kita perlu berinteraksi dengan Foursquare dan menampilkan "walikota" kota Anda.


Interfacing dengan Foursquare

Kami pertama-tama membutuhkan antarmuka ke API foursquare. Untuk menghemat waktu, dan untuk tetap pada topik, saya membuat repo yang bisa kita kloning. Jadi di jendela terminal, ketik:

Ini mengunduh repo dan menempatkannya di folder bernama foursquare di bawah direktori www.

Selanjutnya, buka foursquare.php dan masukkan id klien Anda dan rahasia klien ke dalam konstanta kelas. Jika Anda belum memiliki informasi ini, Anda bisa mendapatkannya dari Foursquare dengan mendaftarkan aplikasi.

File lain dalam repo (data.php) mengambil koordinat peta melalui parameter GET dan mengembalikan objek JSON. Jadi untuk menambahkan walikota ke peta, kita perlu menulis ulang geocomplete: result event handler:

Pertama-tama kita mendefinisikan variabel lat dan lng, tetapi bukannya segera membuat peta, kita menunggu permintaan Ajax selesai. Kami membuat sekitar sebelas panggilan API di belakang layar, jadi mungkin butuh sepuluh atau lima belas detik.

Selanjutnya, kami memastikan batas rate belum terpukul dan memperingatkan pengguna secara tepat. Akhirnya, kami menggilirkan hasil, menambahkan masing-masing ke peta menggunakan perintah dari pustaka GMaps.

Anda sekarang dapat membuka halaman dan mengujinya; semuanya harus bekerja! Dengan sedikit styling dan beberapa desain, itu bisa terlihat seperti ini:


Mengoptimalkan dengan Volo

Aplikasi kami selesai, dan langkah terakhir adalah mengoptimalkannya. Pertama mari kita hapus file yang tidak kita gunakan. Di js / app / folder, Anda dapat menghapus semuanya kecuali file main.js. Di js / lib / folder, hapus file bernama appCache.js dan network.js. Anda juga tidak memerlukan file manifest.webapp, tetapi Anda dapat menyimpannya jika Anda menginginkannya.

Sekarang buka volofile, dan Anda dapat melihat bahwa template datang dengan perintah build yang cukup rumit untuk mengoptimalkan dan menyiapkan file JavaScript dan CSS proyek. Kami tidak membutuhkan skrip yang rumit, jadi hapus semuanya dari file dan ganti dengan yang berikut:

Volo adalah alat omni: Anda mendapatkan apa yang Anda masukkan ke dalamnya.

Ini jauh lebih sederhana. Di sini, kita membuat perintah bernama build yang menghapus folde yang dibangun sebelumnya jika ada. Ini kemudian menyalin seluruh folder www sebagai basis untuk versi kami yang dikompilasi. Selanjutnya, kita menghapus direktori js (kita akan menggantinya dengan versi yang dioptimalkan).

Kemudian kita menjalankan require.js 'optimizer untuk mengkompilasi file-file JavaScript ke dalam satu file. Anda mungkin melihatnya mengganti nama produk akhir menjadi require.js; ini semacam "hack" karena itu tidak benar-benar perpustakaan require.js. Namun karena file HTML kami memiliki referensi untuk require.js, lebih mudah untuk mengganti nama file Javascript daripada menguraikan semua file HTML dan mengubah referensi skrip.

Setelah perintah itu selesai, kami menghapus folder CSS (lagi untuk menggantinya dengan versi yang dioptimalkan). Dan last but not least, kami menjalankan require.js optimizer lagi, kali ini untuk CSS.

Anda sekarang dapat menjalankan volo build dari jendela terminal Anda dan Volo akan menjalankan serangkaian perintah ini.

Di browser Anda, Anda dapat menavigasi ke folder www-built  sebagai gantinya folder www untuk memastikannya masih berfungsi. Di komputer saya, membangun proyek memotong ukuran file menjadi setengahnya, dari hanya di bawah satu megabyte menjadi ~ 400kb. Anda mungkin bisa mendapatkannya lebih kecil jika Anda mengecilkan CSS.


Ringkasan

Dalam artikel ini, saya mengajarkan sintaks Volo dan kami membuat aplikasi contoh. Kami belajar bagaimana menggunakan Volo untuk membuat proyek, menambahkan dependensi, menambahkan perintah khusus untuk mengotomatisasi tugas umum dan mengoptimalkan keseluruhan proyek.

Singkatnya, Volo adalah alat omni: Anda mendapatkan apa yang Anda masukkan ke dalamnya. Anda memiliki beberapa, tetapi kuat, perintah, tetapi kekuatan sejati Volo berasal dari kemampuannya yang luar biasa dan akhirnya komunitasnya.

Jadi apa pendapat Anda tentang Volo? Apakah Anda akan membuat perintah Volo kustom? Tinggalkan komentar dengan pertanyaan dan pendapat Anda

Terima kasih telah membaca.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.