Layanan Dart: halaman web bergetar

Latihan

The terakhir kali kita berakhir pada kenyataan bahwa web server kami menerima nama domain dan belajar untuk membuat sambungan aman dengan klien. Namun, kami sama sekali tidak memiliki apa pun untuk ditunjukkan kepada pengguna masa depan kami. Meskipun kami sudah dapat berbagi ide tentang sebuah startup dan mengumumkan tanggal rilis MVP . Halaman web informasional cocok untuk tugas ini. Mari kita tulis di Dart menggunakan kerangka FlutterWeb. Semua aplikasi klien kami dari layanan ini akan menjadi perpanjangan dari halaman khusus ini. Kami akan berusaha melakukan pengembangan seadatif dan terstruktur mungkin, sehingga pengembangan dan assemblies untuk platform yang dibutuhkan (web-android-iOS) menjadi rutinitas.







Mari mulai dengan memasang Flutter:

• Pasang git
• Kami mengkloning repositori dengan Flutter versi beta menggunakan perintah

  git clone https://github.com/flutter/flutter.git -b beta

• Untuk menjalankan perintah flutter dari baris perintah, Anda harus menentukan jalur ke file yang dapat dijalankannya di sistem operasi. Mari kita buka variabel OS, untuk ini kita mulai memasukkan "perubahan variabel lingkungan pengguna saat ini" di bilah pencarian
  
  
  
  
  
  
  
  Di jendela, pilih variabel Path dan klik Ubah . Dalam daftar yang terbuka, buat baris baru dengan alamat ke file eksekusi flutter di sistem file, misalnya C: \ flutter \ bin
• Instal ekstensi VScode untuk flutter
• Mulai ulang VScode (sehingga variabel OS baru diterapkan) dan di terminal periksa status flutter dengan perintah
  
  
  
  

  flutter doctor

  
  
  
  
  
  
  yang paling penting di sini adalah flutter dipasang dalam versi beta (dengan dukungan pengembangan web)
• Sekarang kami mengaktifkan pengembangan web dengan tim
  
  
  
  

  flutter config --enable-web

Buat proyek baru dan mulai debugging

Kami membuat proyek baru dengan tim

flutter create < >

Mari segera buka di VScode dengan perintah

code < >

Mari buka file main.dart di folder lib dan mulai debugging dengan perintah F5 :







Mungkin, saat pertama kali memulai debugging, Anda perlu memilih Chrome sebagai perangkat untuk debugging:







Hapus konten file main.dart . Tambahkan metode utama kosong dan kelas root dari aplikasi, yang mengembalikan instance MaterialApp dalam metode build () : Selanjutnya, buat set subfolder proyek berikut: Jelaskan secara singkat tujuan masing-masing subfolder :

• di adalah mekanisme komunikasi antar komponen aplikasi. Semua layanan yang diperlukan, repositori, klien jaringan yang diperlukan agar aplikasi berfungsi akan dibuat dan didaftarkan di sini. Saya akan menggunakan perpustakaan GetIt
• domain - objek data. Kelas presentasi data
• res - warna, garis, impor jalur ke gambar dan font. Apa pun yang terkait dengan sumber daya statis
• layanan - layanan untuk bekerja dengan data
• ui - antarmuka
• utils - kelas utilitas

Tambahkan dependensi yang diperlukan di file pubspec.yaml:

Bersiap untuk menskalakan elemen UI

Diasumsikan bahwa halaman kita harus beradaptasi tergantung pada ukuran layar perangkat klien dan lokasinya (mode potret atau lanskap).



Mari kita mulai dengan gambar latar belakang. Persiapan mereka berada di luar cakupan artikel, jadi saya akan meninggalkan dua tautan ini di sini:

• Pixabay.com - tempat penyimpanan foto konten
• Paint.net - editor grafis

Tempatkan gambar yang sudah jadi di folder / assets / images, tambahkan jalur ini ke sumber daya di file pubspec.yaml:







Saya lebih suka akses ke sumber daya dalam bentuk pohon dengan parameter. Dalam hal ini, jalur ke gambar latar belakang rintisan:

images.background(bool isPortrait).stub

Untuk melakukan ini, di folder res , buat file images.dart dengan kelas alamat gambar:







Untuk menskalakan antarmuka dan ukuran font, kami menghubungkan pustaka ScreenUtil . Fungsinya bermuara pada dua hal:

• Pendaftaran ukuran layar "dasar". Di sini Anda perlu mengatur lebar dan tinggi layar tempat tata letak utama dilakukan dan kebutuhan untuk mengatur skala font.
• Sekumpulan ekstensi untuk menerapkan faktor penskalaan ke angka (num). Misalnya, 100.w berarti hasil dari ekspresi ini untuk layar 1920dp => 100dp, dan untuk layar iPhone8 dengan lebar 414dp => 100x (414/1920) = 21.6dp. Artinya, lima kali lebih sedikit. Ada juga ekstensi untuk tinggi dan ukuran font.

Mari buat file /utils/screen_util_ext.dart dan metode inisialisasi statis di dalamnya: Tambahkan







panggilan ke metode inisialisasi zoom ke metode build () widget root:







Perluas fungsionalitas perpustakaan zoom dengan beberapa ekstensi tambahan di file /utils/screen_util_ext.dart :

Injeksi ketergantungan

Saatnya menerapkan mekanisme untuk membuat dan mendaftarkan komponen aplikasi menggunakan pustaka GetIt . Di folder lib / DI / , buat file di_container.dart . Di dalamnya kita akan menulis metode statis getItInit () dan menginisialisasi sebuah instance dari kontainer GetIt . Mari daftarkan komponen pertama - sebuah instance dari kelas Images :







Tambahkan panggilan metode inisialisasi ke main () :







Akses ke komponen Images akan terlihat seperti ini:







Dengan cara yang sama, mari kita daftarkan kelas dengan sumber daya dengan string.

Halaman rintisan

Sekarang, di folder UI , buat file stub.dart dengan kelas halaman rintisan StubScreen , perluas kelas dasar StatelessWidget , dan ganti metode build () abstraknya . Halaman kami adalah gambar di latar belakang dan dua blok informasi di depannya, ditempatkan tergantung pada orientasi layar.

Repositori dan layanan

Untuk menampilkan waktu yang tersisa secara dinamis sebelum rilis, Anda harus:

1. Dapatkan pengaturan dari server dengan tanggal dimulainya pengembangan dan rilis
2. Buat aliran acara untuk sisa waktu yang berubah
3. Gabungkan data ini dengan meneruskannya ke aliran keluaran untuk ditampilkan di UI

Mari kita jelaskan objek domain (POJO) untuk data ini:











Repositori untuk menerima pengaturan dan membuat aliran peristiwa:











Layanan untuk logika peristiwa:







Daftarkan komponen ini dalam wadah DI:

Widget sisa waktu

Sisa waktu sebelum rilis dapat direpresentasikan sebagai 4 angka: hari, jam, menit, detik. Mari kita wakili parameter ini sebagai enumerasi:







Mari tambahkan fungsionalitas ke parameter menggunakan ekstensi:







Widget untuk menampilkan dial, nomor dan tanda tangan akan dianimasikan, untuk ini kita akan memperluas kelas StatefulWidget . Kekhasan adalah bahwa Element (dibangun dan ditampilkan tampilan) tidak sesuai dengan widget sendiri, tapi ke keadaan ( Negara ). Status, tidak seperti widget, bisa berubah. Artinya, bidangnya dapat diubah tanpa sepenuhnya membuat ulang instance.











Anda perlu menjelaskan di sini apa itu Animation , AnimationController dan TickerProviderStateMixin... Jadi AnimationController adalah pembungkus di atas parameter nilai ganda sederhana . Nilai parameter ini berubah secara linier dalam kisaran dari 0,0 hingga 1,0 (juga dapat diubah ke arah yang berlawanan atau disetel ulang ke 0,0). Namun, untuk mengubah parameter ini, objek TickerProviderStateMixin khusus digunakan , yang merupakan parameter wajib untuk AnimationController dan memberi tahu bahwa mesin grafis siap untuk membangun bingkai baru. Setelah menerima sinyal seperti itu, AnimationController menghitung berapa banyak waktu yang telah berlalu dari bingkai sebelumnya dan menghitung berapa banyak yang harus mengubah nilai nilainya . Objek animasi berlangganan AnimationControllerdan berisi beberapa fungsi ketergantungan nilai keluaran pada perubahan linier (dalam waktu) dalam nilai AnimationController .



Metode inisialisasi status initState () dipanggil sekali setelah pembuatan:







Ketika status widget dimusnahkan, metode dispose () dipanggil :











Widget akan diwakili oleh tumpukan ( Stack ), dengan AnimatedBuilder untuk nomor dan skala yang ditempatkan di dalamnya :







Tetap menerapkan grafik primitif dalam bentuk busur:







Tambahkan 4 widget seperti itu di layar adalah sebuah rintisan:

Bangun dan lepaskan

Sebelum membangun aplikasi, Anda harus mengganti nama dan deskripsi aplikasi di file ./web/index.html ./web/manifest.json dan pubspec.yaml .



Hentikan debugging dan buat rilis aplikasi dengan perintah

flutter build web

Aplikasi yang sudah selesai terletak di direktori ./build/web/ . Harap dicatat bahwa file .last_build_id dan main.dart.js.map adalah file layanan dan dapat dihapus.

Mari kita letakkan aplikasinya di server yang sudah disiapkan di artikel sebelumnya. Untuk melakukan ini, cukup salin konten direktori ./build/web/ ke / public / di server kami:

scp -r ./* root@91.230.60.120:/public/

Hasil



Source code github



Pertanyaan dan komentar dipersilahkan. Anda dapat mengobrol dengan penulis di saluran Telegram .

Alih-alih kesimpulan

Aplikasi klien kami sudah siap menerima data pertama dari server - informasi tentang tanggal rilis. Untuk melakukan ini, pada artikel keempat kita akan membuat aplikasi server kerangka dan menempatkannya di server.