Pengembangan aplikasi dalam aplikasi mini VK

Mengapa saya harus melihat ke arah pengembangan aplikasi untuk bekerja di VK? Saya telah memiliki bertahun-tahun pengembangan front-end untuk layanan massal di belakang saya, dan apa yang ditawarkan jejaring sosial VKontakte kepada pengembang adalah cara cepat dan efektif untuk membangun saluran komunikasi lain dengan audiens yang sangat besar. Di bawah ini saya akan memberi tahu Anda gagasan tentang aplikasi mini VK, teknologi apa yang digunakan saat mengembangkan aplikasi, dan apa yang harus Anda perhatikan.



Publikasi awal artikel di posting blog Cloud Cloud Blog.ru: https://mcs.mail.ru/blog/razrabotka-prilozhenij-v-vk-mini-apps

Platform aplikasi mini VK

VKontakte memberi pengembang pihak ketiga peluang untuk menulis aplikasi web dan menempatkannya di direktori aplikasi dan / atau mempromosikannya di dalam jaringan. Pengguna aplikasi tidak perlu mengunduh aplikasi asli individual dari Google Play / App Store, fungsionalitas aplikasi yang dipilih tersedia di dalam sesi pengguna aplikasi utama di VKontakte atau melalui browser di situs jejaring sosial. Jejaring sosial memiliki petunjuk terperinci tentang cara memulai pada platform VK mini apps .

Infrastruktur aplikasi VK aplikasi mini

Aplikasi mini VK adalah sumber daya web biasa yang terletak di alamat tertentu. Kita harus meletakkannya di "Panel Kontrol Aplikasi" di jejaring sosial.

VKontakte memungkinkan Anda untuk menempatkan tiga versi aplikasi:

• untuk klien seluler - yaitu, untuk membuka aplikasi VKontakte asli;
• opsi desktop - vk.com di browser;
• opsi untuk browser di ponsel (https://m.vk.com).

Saat menempatkan, Anda juga dapat mengaktifkan "Mode Pengembangan". Ini memungkinkan pengguna VKontakte yang ditunjuk sebagai administrator aplikasi untuk menggunakan alamat terpisah untuk menguji masing-masing dari tiga etalase. Artinya, saat membuka aplikasi, pengguna biasa akan melihat apa yang terletak di alamat bersyarat yourapp.com, dan administrator akan melihat test.yourapp.com.

Sumber daya web Anda tertanam dalam aplikasi VKontakte melalui WebView yang biasa, ketika dibuka dari desktop, melalui iFrame. Oleh karena itu, perlu diingat bahwa bagian dari fungsi JavaScript mungkin tidak tersedia, pengujian menyeluruh diperlukan.

Setelah menguji aplikasi web pada perangkat yang berbeda, itu dapat dikirim untuk moderasi sehingga dapat ditempatkan di direktori. Aplikasi untuk moderasi dikirim dari "Panel Kontrol Aplikasi". Periode moderasi yang diumumkan oleh VKontakte adalah 7 hari. Perhitungan aplikasi baru (layanan dalam terminologi VKontakte) terjadi seminggu sekali pada hari Kamis.

Ada memo rinci tentang cara membuat aplikasi yang tepat. Saya merekomendasikan Anda untuk memeriksanya sebelum memberikan aplikasi untuk moderasi.

Pengembangan aplikasi aplikasi mini VK

Jadi, aplikasi VK Mini Apps sebenarnya adalah aplikasi web biasa yang tertanam di platform melalui iFrame atau WebView. Oleh karena itu, pilihan teknologi yang akan dituliskan adalah milik Anda.

Namun, untuk mengembangkan frontend, VKontakte merekomendasikan perpustakaannya sendiri komponen siap pakai untuk VK UI , dibuat di React:

Ini nyaman - banyak komponen khas sudah siap, tetap hanya untuk menanamkannya dalam struktur halaman Anda atau SPA.

Komponen sudah disesuaikan dengan styleguide VKontakte - itu akan menjadi lebih akrab dan nyaman bagi pengguna untuk bekerja dengan kontrol dan interaktivitas yang sudah dia gunakan saat berada di dalam jejaring sosial.

VKontakte tidak mengharuskan pengembang untuk mengikuti arsitektur frontend yang kaku - kami hanya mengambil apa yang diperlukan dan memodifikasi komponen sesuai kebutuhan. Misalnya, Anda selalu dapat menambahkan kelas Anda, pengendali acara Anda ke komponen tampilan bodoh, membuat komponen bersarang dari kedalaman apa pun, dan sebagainya.
Ada dokumentasi yang cukup rinci (meskipun tidak sepenuhnya lengkap) tentang VKUI . Kode sumber di GitHub: https://github.com/VKCOM/VKUI . Dengan demikian, instalasi paling sederhana:

npm i —save-dev @vkontakte/vkui 

Pastikan untuk meletakkan tag meta berikut di kepala halaman tata letak aplikasi Anda, jika tidak pada perangkat iOS navigasi VKontakte asli tidak akan ditampilkan dengan benar:

 <meta content=»width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, viewport-fit=cover» name=»viewport» /> 

Selanjutnya, kita hanya perlu menyematkan aplikasi Bereaksi pada halaman.

Opsi Pembukaan Aplikasi

VKontakte sendiri menambahkan parameter startup ke bilah alamat tempat aplikasi Anda dibuka. Daftar mereka adalah sebagai berikut: vk_user_id, vk_app_id, vk_are_notifications_enabled, vk_language, vk_ref, vk_access_token_settings, vk_group_id, vk_viewer_group_role, vk_platform, vk_is_favorite, tandatangan . Itu adalah frame dengan aplikasi Anda akan terbuka dengan alamat kurang lebih sama: youvkapp.ru/?vk_access_token_settings=notify&vk_app_id=888888&vk_are_notifications_enabled=1&vk_is_app_user=1&vk_is_favorite=1&vk_language=ru&vk_platform=desktop_web&vk_ref=other&vk_user_id=111111&sign=fsdfsdgfgfiuoitu8345u34j

Ini memungkinkan Anda untuk memiliki kumpulan data yang cukup lengkap yang diekstrak dari url saat Anda memulai aplikasi untuk memulai interaksi pribadi dengan pengguna tertentu. Misalnya, berbicara dengan bahasa yang sama dengannya - Rusia, Inggris atau bahasa lain, atau minta untuk memasukkan notifikasi Anda.

Untuk November 2019, Vkontakte tidak berencana untuk memasukkan parameter tambahan dalam daftar VKontakte ini. Namun, di url Anda dapat mengirimkan hash yang sewenang-wenang, misalnya: youvkapp.ru # custom_param

Routing

Jika aplikasi memiliki lebih dari satu layar (saya pikir ini hanya kasus Anda), Anda memerlukan transisi antar layar. Keadaan aplikasi Bereaksi kami bertanggung jawab untuk menampilkan layar ini atau itu. Sedangkan untuk organisasi View, VKontakte menawarkan dua cara: mengubah komponen aktif VKUI View dan VKUI Panel.

Setiap View bertanggung jawab atas skenario penggunanya sendiri: primer, sekunder, direktori panggilan, halaman pencarian, dan lainnya. Di dalam Tampilan berisi kumpulan Panelnya sendiri - ini adalah langkah-langkah khusus (layar) dalam skrip pengguna. Secara abstrak, tampilannya seperti ini:

 import {Root, View, Panel} from '@vkontakte/vkui'; <Root activeView={this.state.views.activeView}> <View id=»main» activePanel={this.state.views.main.activePanel}> <Panel id=»step-1″> … </Panel> <Panel id=»step-2″> … </Panel> </View> <View id=»search»> <Panel id=»search-panel»> … </Panel> </View> <View id=»info» activePanel={this.state.views.info.activePanel}> <Panel id=»oferta»> … </Panel> <Panel id=»conditions»> … </Panel> <Panel id=»about»> … </Panel> </View> </Root> 

Dalam keadaan di activePanel, kami menentukan id elemen yang akan ditampilkan.

Tata letak dan komponen

Sekarang Anda dapat melihat halaman khas di dalam Panel, dibuat menggunakan komponen VK UI.

Perpustakaan VK UI menyediakan komponen yang hampir lengkap yang diperlukan untuk membangun aplikasi interaktif: semua jenis elemen bentuk, munculan, peringatan bergaya, galeri, panel navigasi, pemintal, avatar, footer, dan sebagainya.

 import { Button, Div, FormLayout, Input, Panel, PanelHeader, PanelHeaderBack, Search, View } from "@vkontakte/vkui"; import Icon36Done from "@vkontakte/icons/dist/36/done"; import CustomTextarea from "./YourComponents/CustomTextarea"; render() { return ( <div> <PanelHeader left={<PanelHeaderBack onClick={() => {this.Actions.historyBack()}} />} >App Title</PanelHeader> <Icon36Done width={48} height={48} /> <Div> <h1>This is the first page</h1> <p className="page-hint">You can do some interaction here</p> </Div> <FormLayout> <Input type="text" defaultValue="" placeholder="Enter your name" className="active" /> <CustomTextarea name="textarea1" className="custom" disabled={this.state.blocks.textarea.disabled} value={this.state.userData.textarea} /> <Button size="xl" level="secondary" >Submit</Button> </FormLayout> <Search value={this.state.search.text} onChange={this.onSearch} /> </div> ) } 

Seperti yang Anda lihat, paket vkontakte lain muncul:

 npm i —save-dev @vkontakte/icons 

Anda dapat menggunakan manajer praktis untuk memilih ikon yang diinginkan.

Aturan utamanya adalah menggunakan komponen dengan benar atau tata letak header Anda sendiri. Aplikasi VKontakte asli menempatkan tombol kontrol di sisi kanan header.



Blok khusus:

 import { Textarea } from «@vkontakte/vkui»; export default class CustomTextarea extends React.Component { render() { return ( <div className=»form-group custom_textarea»> <div className=»FormLayout__row-top»>Custom textarea is here</div> <Textarea disabled={this.props.disabled} name={name} id={name} onChange={(e) => this.bindData(e, this.props.name)} value={this.props.value} className={this.props.className} /> </div> </div> ); } } 

Perlu diperhatikan: VKontakte menyatakan bahwa komponen mungkin tidak ditampilkan secara memadai di desktop. Namun, mereka dapat ditata dengan menambahkan aturan css mereka sendiri. Misalnya, animasi transisi antar panel dalam satu aplikasi bergaya dengan cara ini:

 .desktop_web { .View__panel—prev { max-width: 458px !important; margin: 0 auto; left: calc(50% — 230px) !important; -webkit-animation: root-android-animation-hide-back 3s cubic-bezier(.4, 0, .2, 1); animation: root-android-animation-hide-back 3s cubic-bezier(.4, 0, .2, 1); } .View__panel—next { max-width: 460px !important; left: calc(50% — 230px) !important; } } 

Gaya-gaya ini terhubung dalam aliran gaya umum yang terhubung ke aplikasi Anda.

Perpustakaan VK Connect

Pustaka VK Connect menyediakan akses ke kapabilitas luas jaringan VKontakte itu sendiri, serta kapabilitas perangkat jika kita bekerja dari aplikasi seluler. Untuk menghubungkannya, Anda perlu menginstal paket vkontakte / vk-connect: npm i —save-dev vkontakte / vk-connect .

Di antara banyak fitur VK Connect adalah memindai kode QR, mendapatkan geolokasi, dan memanggil kartu kontak. Ada juga peluang luas untuk menggunakan fitur jejaring sosial: menghidupkan / mematikan notifikasi, menerbitkan posting di dinding, otorisasi komunitas, berlangganan pesan. Mereka harus digunakan dengan bijak: misalnya, ada batasan jumlah pemberitahuan - tidak lebih dari satu per hari. Ada rekomendasi terpisah untuk notifikasi . Daftar lengkap fitur disediakan dalam dokumentasi .

Agar aplikasi kami mulai bekerja secara umum, pertama-tama kita harus melakukan inisialisasi:

 import connect from '@vkontakte/vk-connect'; connect.send(«VKWebAppInit», {}); 

Semua interaksi lebih lanjut dengan perpustakaan terjadi dengan cara yang sama. Dengan menggunakan metode connect.send, kami memanggil tindakan yang diinginkan dan mendengarkan jawabannya. Untuk melakukan ini, kita harus berlangganan ke acara:

 connect.subscribe((e) => { switch (e.detail.type) { case «VKWebAppGetUserInfoResult» : this.bindConnectUserData(e.detail.data); break; } }); 

Di objek detail, tipe dikembalikan - nama tipe acara yang kami tunggu jawabannya, dan data - kumpulan data. Pada contoh di atas, kami mendengarkan respons permintaan connect.send ("VKWebAppGetUserInfo", {}), yang akan mengembalikan informasi tentang pengguna aplikasi: nama, jenis kelamin, tanggal lahir, tempat tinggal, tautan ke gambar avatar di jejaring sosial.

VKontakte tidak menjamin dukungan untuk semua acara di semua perangkat (iOS, Android, Web), jadi lebih baik untuk memeriksa dukungan ini sebelum menjalankan kode:

 if (connect.supports(«VKWebAppGetUserInfo»)) … 

VK Connect juga menyediakan dukungan untuk permintaan ke VK API , jika Anda membutuhkan sesuatu yang lebih dari yang dapat disediakan oleh perpustakaan VK Connect:

 connect.send(«VKWebAppCallAPIMethod», {«method»: «users.get», «request_id»: «your_unique_req_id», «params»: {«user_ids»: «1», «v»:»5.103″, «access_token»:»your_token»}}); 

VK Pay

VK Pay sebenarnya adalah front-end yang nyaman untuk menggunakan layanan pembayaran online menggunakan Money Mail.Ru. Untuk memanggil formulir pembayaran, cukup buka jendela pembayaran menggunakan panggilan di perpustakaan VK Connect:

 connect.send(«VKWebAppOpenPayForm», {«app_id»: 888888, «action»: «pay-to-service», «params»: {}}); 

Dengan demikian, Anda dapat menjual layanan dan barang Anda menggunakan alat pembayaran internal pada jaringan VKontakte. Lebih detail dalam dokumentasi resmi .