Tutorial Ruby Intermediate Ultimate on Rails: Ayo Buat Seluruh Aplikasi!

Ada banyak tutorial online yang menunjukkan cara membuat aplikasi pertama Anda. Tutorial ini akan melangkah lebih jauh dan menjelaskan baris demi baris cara membuat aplikasi Ruby On Rails yang lebih kompleks.

Sepanjang keseluruhan tutorial, saya secara bertahap akan memperkenalkan teknik dan konsep baru. Idenya adalah bahwa dengan setiap bagian baru Anda harus mempelajari sesuatu yang baru.

Topik-topik berikut akan dibahas dalam panduan ini:

  • Dasar-dasar Ruby On Rails
  • Refactoring: pembantu, sebagian, kekhawatiran, pola desain
  • Pengujian: TDD / BDD (RSpec & Capybara), Pabrik (Factory Girl)
  • Kabel Tindakan
  • Pekerjaan aktif
  • CSS, Bootstrap, JavaScript, jQuery

Jadi apa yang akan terjadi dengan aplikasi ini?

Ini akan menjadi platform di mana Anda dapat mencari dan bertemu orang-orang yang berpikiran sama.

Fungsi utama yang akan dimiliki aplikasi:

  • Otentikasi (dengan Rancangan)
  • Kemampuan untuk mempublikasikan posting, dan mencari dan mengategorikannya
  • Olahpesan instan (jendela sembulan dan messenger terpisah), dengan kemampuan untuk membuat percakapan pribadi dan grup.
  • Kemampuan untuk menambahkan pengguna ke kontak
  • Pemberitahuan waktu nyata

Anda dapat melihat bagaimana tampilan aplikasi yang lengkap.

Dan Anda dapat menemukan kode sumber proyek lengkap di GitHub.

Daftar Isi

  1. Pengantar dan Pengaturan
    Prasyarat
    Mempersiapkan
    Buat aplikasi baru
  2. Tata letak
    Halaman rumah
    Bootstrap
    Bilah navigasi
    Lembar gaya
  3. Posting
    Otentikasi
    Pembantu
    Pengujian
    Umpan utama
    Pos tunggal
    Cabang tertentu
    Obyek layanan
    Buat posting baru
  4. Pesan singkat
    Percakapan pribadi
    Kontak
    Percakapan kelompok
    Kurir
  5. Notifikasi
    Permintaan kontak
    Percakapan

Prasyarat

Saya akan mencoba menjelaskan setiap baris kode dan bagaimana saya menemukan solusi. Saya pikir sangat mungkin bagi seorang pemula total untuk menyelesaikan panduan ini. Tetapi perlu diingat bahwa tutorial ini mencakup beberapa topik yang berada di luar dasar-dasar.

Jadi jika Anda seorang pemula total, itu akan menjadi lebih sulit, karena kurva belajar Anda akan sangat curam. Saya akan memberikan tautan ke sumber daya tempat Anda bisa mendapatkan informasi tambahan tentang setiap konsep baru yang kami sentuh.

Idealnya, yang terbaik adalah jika Anda mengetahui dasar-dasar:

  • HTML, CSS, Bootstrap, JavaScript, jQuery
  • Ruby, Ruby On Rails
  • Git

Mempersiapkan

Saya berasumsi bahwa Anda telah menyiapkan lingkungan pengembangan Ruby On Rails dasar Anda. Jika tidak, periksa RailsInstaller.

Saya telah mengembangkan pada Windows 10 untuk sementara waktu. Pada awalnya itu baik-baik saja, tetapi setelah beberapa waktu saya bosan mengatasi hambatan mistis yang disebabkan oleh Windows. Saya harus terus mencari cara hack untuk membuat aplikasi saya berfungsi. Saya menyadari bahwa ini tidak layak untuk waktu saya. Mengatasi hambatan itu tidak memberi saya keterampilan atau pengetahuan yang berharga. Saya hanya menghabiskan waktu dengan saluran rekaman pengaturan Windows 10.

Jadi saya beralih ke mesin virtual. Saya memilih untuk menggunakan Vagrant untuk menciptakan lingkungan pengembangan dan Putty untuk terhubung ke mesin virtual. Jika Anda ingin menggunakan Vagrant juga, ini adalah tutorial yang menurut saya berguna.

Buat aplikasi baru

Kita akan menggunakan PostgreSQL sebagai basis data kita. Ini adalah pilihan populer di antara komunitas Ruby On Rails. Jika Anda belum membuat aplikasi Rails dengan PostgreSQL, Anda mungkin ingin memeriksa tutorial ini.

Setelah Anda terbiasa dengan PostgreSQL, navigasikan ke direktori tempat Anda menyimpan proyek dan membuka prompt baris perintah.

Untuk membuat aplikasi baru, jalankan baris ini:

rails collabfield baru --database = postgresql

Collabfield, begitulah cara aplikasi kita akan dipanggil. Secara default Rails menggunakan SQlite3, tetapi karena kami ingin menggunakan PostgreSQL sebagai basis data kami, kami perlu menentukannya dengan menambahkan:

--database = postgresql

Sekarang kita harus berhasil membuat aplikasi baru.

Arahkan ke direktori yang baru dibuat dengan menjalankan perintah:

collabfield cd

Dan sekarang kita dapat menjalankan aplikasi kita dengan memasukkan:

rel s

Kami baru saja memulai aplikasi kami. Sekarang kita harus bisa melihat apa yang kita dapatkan sejauh ini. Buka browser dan buka http: // localhost: 3000. Jika semuanya berjalan dengan baik, Anda akan melihat halaman sambutan tanda tangan Rails.

Tata letak

Waktu untuk kode Di mana kita harus mulai? Ya, kita bisa mulai di mana pun kita mau. Ketika saya membangun situs web baru, saya suka memulai dengan membuat semacam struktur visual dasar dan kemudian membangun yang lain di sekitarnya. Ayo lakukan saja.

Halaman rumah

Ketika kita pergi ke http: // localhost: 3000, kita melihat halaman sambutan Rails. Kami akan mengganti halaman default ini dengan beranda kami sendiri. Untuk melakukan itu, buat pengontrol baru bernama Halaman. Jika Anda tidak terbiasa dengan pengendali Rails, Anda harus membaca Controller Aksi untuk mengetahui apa yang dimaksud dengan kontroler Rails. Jalankan baris ini di command prompt Anda untuk menghasilkan pengontrol baru.

rails g halaman pengontrol

Generator rel ini seharusnya membuat beberapa file untuk kita. Output di command prompt akan terlihat seperti ini:

Kami akan menggunakan PagesController ini untuk mengelola halaman khusus dan statis kami. Sekarang buka proyek Collabfield dalam editor teks. Saya menggunakan Teks Sublim, tetapi Anda dapat menggunakan apa pun yang Anda inginkan.

Buka file pages_controller.rb

app / controllers / pages_controller.rb

Kami akan menentukan beranda kami di sini. Tentu saja kita dapat mendefinisikan beranda di pengontrol yang berbeda dan dengan cara yang berbeda. Tapi biasanya saya suka mendefinisikan halaman beranda di dalam PagesController.

Ketika kita membuka pages_controller.rb, kita melihat ini:

Ini adalah kelas kosong, bernama PagesController, yang mewarisi dari kelas ApplicationController. Anda dapat menemukan kode sumber kelas ini di app / controllers / application_controller.rb.

Semua pengontrol kami, yang akan kami buat, akan mewarisi dari kelas ApplicationController. Yang berarti bahwa semua metode yang didefinisikan di dalam kelas ini akan tersedia di semua pengontrol kami.

Kami akan mendefinisikan metode publik bernama indeks, sehingga dapat dipanggil sebagai tindakan:

Seperti yang mungkin telah Anda baca di Kontroler Aksi, perutean menentukan controller mana dan metode publiknya (aksi) untuk memanggil. Mari kita tentukan rute, jadi ketika kita membuka halaman root situs web kita, Rails tahu pengendali mana dan tindakannya untuk memanggil. Buka file routes.rb di app / config / routes.rb.

Jika Anda tidak tahu apa rute Rails, ini adalah waktu yang tepat untuk membiasakan diri dengan membaca Rails Routing.

Masukkan baris ini:

root ke: 'halaman # indeks'

File route.rb Anda akan terlihat seperti ini:

Simbol hash # di Ruby menunjukkan metode. Seperti yang Anda ingat tindakan hanyalah metode publik, jadi indeks halaman # mengatakan "panggil PagesController dan indeks metode publik (tindakan) -nya."

Jika kami pergi ke jalur root kami http: // localhost: 3000, tindakan indeks akan dipanggil. Tetapi kami belum memiliki template untuk disajikan. Jadi mari kita buat templat baru untuk tindakan indeks kami. Buka aplikasi / tampilan / halaman dan buat file index.html.erb di dalam direktori ini. Di dalam file ini kita dapat menulis kode HTML + Embedded Ruby reguler kami. Cukup tulis sesuatu di dalam file, sehingga kami dapat melihat templat yang diberikan di browser.

Halaman Beranda

Sekarang ketika kita pergi ke http: // localhost: 3000, kita akan melihat sesuatu seperti ini daripada halaman informasi Rails default.

Sekarang kita memiliki titik awal yang sangat mendasar. Kami dapat mulai memperkenalkan hal-hal baru ke situs web kami. Saya pikir sudah waktunya untuk membuat komit pertama kami.

Dalam menjalankan prompt perintah Anda:

status git

Dan Anda akan melihat sesuatu seperti ini:

Jika Anda belum tahu, ketika kami membuat aplikasi baru, repositori git lokal baru diinisialisasi.

Tambahkan semua perubahan saat ini dengan menjalankan:

git add -A

Lalu komit semua perubahan dengan menjalankan:

git commit -m "Hasilkan PagesController. Inisialisasi Halaman Utama"

Jika kami menjalankan ini:

status git

Kami akan melihat bahwa tidak ada yang perlu dikomit, karena kami hanya berhasil melakukan semua perubahan.

Bootstrap

Untuk bilah navigasi dan sistem grid responsif kami akan menggunakan pustaka Bootstrap. Untuk menggunakan perpustakaan ini kita harus menginstal
permata bootstrap-sass. Buka Gemfile di editor Anda.

collabfield / Gemfile

Tambahkan permata bootstrap-sass ke Gemfile. Seperti yang dikatakan dalam dokumentasi, Anda harus memastikan permata sass-rails juga ada.

...
gem 'bootstrap-sass', '~> 3.3.6'
gem 'sass-rails', '> = 3.2'
...

Simpan file dan jalankan ini untuk menginstal permata yang baru ditambahkan:

bundel instal

Jika Anda masih menjalankan aplikasi, restart server Rails untuk memastikan bahwa permata baru tersedia. Untuk me-restart server cukup matikan dengan menekan Ctrl + C dan jalankan perintah rails lagi untuk mem-boot server.

Buka aset untuk membuka file application.css:

app / aset / stylesheet / application.css

Di bawah ini semua teks yang dikomentari tambahkan ini:

...
@import "bootstrap-sprockets";
@import "bootstrap";

Sekarang ubah nama application.css ke application.scss. Ini diperlukan untuk menggunakan perpustakaan Bootstrap di Rails, juga memungkinkan kita untuk menggunakan fitur Sass.

Kami ingin mengontrol urutan semua file .scss diberikan, karena di masa mendatang kami mungkin ingin membuat beberapa variabel Sass. Kami ingin memastikan bahwa variabel kami akan ditentukan sebelum kami menggunakannya.

Untuk mencapainya, hapus dua baris dari file application.scss:

* = wajib_ sendiri
* = require_tree.

Kami hampir dapat menggunakan pustaka Bootstrap. Ada satu hal lagi yang harus kita lakukan. Seperti yang dikatakan oleh bootstrap-sass, Bootstrap JavaScript bergantung pada pustaka jQuery. Untuk menggunakan jQuery dengan Rails, Anda harus menambahkan permata jquery-rails.

permata 'jquery-rails'

Lari…

bundel instal

... lagi, dan restart server.

Langkah terakhir adalah meminta Bootstrap dan jQuery dalam file JavaScript aplikasi. Buka application.js

app / aset / javascripts / application.js

Kemudian tambahkan baris berikut dalam file:

// = membutuhkan jquery
// = membutuhkan bootstrap-sprocket

Komit perubahan:

git add -A
git commit -m "Tambah dan konfigurasikan permata bootstrap"

Bilah navigasi

Untuk bilah navigasi kita akan menggunakan komponen navbar Bootstrap sebagai titik awal dan kemudian memodifikasinya. Kami akan menyimpan bilah navigasi kami di dalam templat sebagian.

Kami melakukan ini karena lebih baik menyimpan setiap komponen aplikasi dalam file terpisah. Memungkinkan untuk menguji dan mengelola kode aplikasi lebih mudah. Kami juga dapat menggunakan kembali komponen-komponen itu di bagian lain aplikasi, tanpa menduplikasi kodenya.

Navigasi ke:

tampilan / tata letak

Buat file baru:

_navigation.html.erb

Untuk parsial kami menggunakan awalan garis bawah, sehingga kerangka Rails dapat membedakannya sebagai parsial. Sekarang salin dan tempel komponen navbar dari Bootstrap docs dan simpan file tersebut. Untuk melihat parsial di situs web, kita harus membuatnya di suatu tempat. Arahkan ke views / layout / application.html.erb. Ini adalah file default tempat semuanya ditampilkan.

Di dalam file kita melihat metode berikut:

<% = hasil%>

Ini membuat templat yang diminta. Untuk menggunakan sintaksis ruby ​​di dalam file HTML, kita harus membungkusnya dengan <%%> (ruby yang disematkan memungkinkan kita melakukan itu). Untuk mempelajari perbedaan antara sintaks ERB dengan cepat, periksa jawaban StackOverflow ini.

Di bagian Beranda, kami mengatur rute untuk mengenali URL root. Jadi, setiap kali kami mengirim permintaan GET untuk pergi ke halaman root, tindakan PagesController‘sindex dipanggil. Dan bahwa tindakan masing-masing (dalam hal ini indexaction) merespons dengan templat yang akan diberikan dengan metode yield. Seperti yang Anda ingat, template kami untuk beranda terletak di app / views / pages / index.html.erb.

Karena kami ingin memiliki bilah navigasi di semua halaman, kami akan membuat bilah navigasi kami di dalam file application.html.erb default. Untuk merender sebagian file, cukup gunakan metode render dan berikan path sebagian sebagai argumen. Lakukan tepat di atas metode hasil seperti ini:

...
<% = render 'tata letak / navigasi'%>
<% = hasil%>
...

Sekarang buka http: // localhost: 3000 dan Anda seharusnya bisa melihat bilah navigasi.

Seperti disebutkan di atas, kami akan memodifikasi bilah navigasi ini. Pertama-tama mari kita hapus semua elemen

  • dan
    . Di masa depan kita akan membuat elemen kita sendiri di sini. File _navigation.html.erb akan terlihat seperti ini sekarang.

    Kami memiliki bilah navigasi responsif dasar sekarang. Ini saat yang tepat untuk membuat komit baru. Pada prompt perintah, jalankan perintah berikut:

    git add -A
    git commit -m "Tambahkan bilah navigasi dasar"

    Kita harus mengubah nama bilah navigasi dari Brand menjadi collabfield. Karena Merek adalah elemen tautan, kita harus menggunakan metode tautan_ untuk menghasilkan tautan. Mengapa? Karena metode ini memungkinkan kita untuk dengan mudah menghasilkan jalur URI. Buka prompt perintah dan navigasikan ke direktori proyek. Jalankan perintah berikut:

    rute rel

    Perintah ini menampilkan rute yang tersedia, yang dihasilkan oleh route.rbfile. Seperti yang kita lihat:

    Saat ini, kami hanya memiliki satu rute, yang telah kami tentukan sebelumnya. Jika Anda melihat rute yang diberikan, Anda dapat melihat kolom Awalan. Kita dapat menggunakan awalan itu untuk menghasilkan jalur ke halaman yang diinginkan. Yang harus kita lakukan adalah menggunakan nama awalan dan menambahkan _path ke sana. Jika kami menulis root_path, itu akan menghasilkan jalur ke halaman root. Jadi mari kita gunakan kekuatan metode dan rute link_to.

    Ganti baris ini:

     Merek 

    Dengan garis ini:

    <% = link_to 'collabfield', root_path, class: 'navbar-brand'%>

    Ingat bahwa setiap kali Anda tidak cukup memahami cara kerja metode tertentu, cukup Google dan Anda mungkin akan menemukan dokumentasinya dengan penjelasan. Kadang-kadang dokumentasi ditulis dengan buruk, sehingga Anda mungkin ingin sedikit lebih ke Google dan Anda mungkin menemukan blog atau jawaban StackOverflow, yang akan membantu.

    Dalam hal ini kami meneruskan string sebagai argumen pertama kami untuk menambahkan nilai elemen , argumen kedua diperlukan untuk jalur, ini adalah rute yang membantu kami menghasilkannya. Argumen ketiga adalah opsional, yang diakumulasikan di dalam hash opsi. Dalam hal ini kami perlu menambahkan kelas merek navbar untuk menjaga bilah navigasi bertenaga Bootstrap kami berfungsi.

    Mari kita lakukan komitmen lain untuk perubahan kecil ini. Di bagian mendatang kami akan mulai mengubah desain aplikasi kami, mulai dari bilah navigasi.

    git add -A
    git commit -m "Ubah nama merek bilah navigasi dari Brand ke collabfield"

    Lembar gaya

    Biarkan saya memperkenalkan Anda bagaimana saya menyusun file style sheet saya. Dari apa yang saya tahu tidak ada konvensi yang kuat tentang bagaimana menyusun style sheet Anda di Rails. Setiap orang melakukannya dengan sedikit berbeda.

    Beginilah biasanya saya menyusun file saya.

    • Direktori dasar - Di sinilah saya menyimpan variabel dan gaya Sass yang digunakan di seluruh aplikasi. Misalnya ukuran font default dan gaya elemen default.
    • Partials - Sebagian besar gaya saya pergi ke sana. Saya menyimpan semua gaya untuk komponen dan halaman terpisah di direktori ini.
    • Responsif - Di sini saya menetapkan aturan gaya yang berbeda untuk ukuran layar yang berbeda. Misalnya, gaya untuk layar desktop, layar tablet, layar ponsel, dll.

    Pertama, mari kita buat cabang repositori baru dengan menjalankan ini:

    git checkout -b "gaya"

    Kami baru saja membuat cabang git baru dan secara otomatis beralih ke sana. Mulai sekarang ini adalah bagaimana kita akan menerapkan perubahan baru pada kode.

    Alasan untuk melakukan ini adalah bahwa kami dapat mengisolasi versi fungsional kami saat ini (cabang master) dan menulis kode baru di dalam salinan proyek, tanpa takut merusak apa pun.

    Setelah kami selesai dengan implementasinya, kami hanya bisa menggabungkan perubahan ke cabang master.

    Mulailah dengan membuat beberapa direktori:

    aplikasi / aset / stylesheet / parsial / tata letak

    Di dalam direktori layout buat file navigation.scss dan di dalam file tambahkan:

    Dengan baris kode ini kami mengubah latar belakang navbar dan menautkan warna. Seperti yang mungkin Anda perhatikan, pemilih bersarang di dalam blok deklarasi lain. Sass memungkinkan kita untuk menggunakan fungsi ini. ! Penting digunakan untuk secara ketat mengganti gaya Bootstraps default. Hal terakhir yang mungkin Anda perhatikan adalah bahwa alih-alih nama warna, kami menggunakan variabel Sass. Alasan untuk ini adalah bahwa kita akan menggunakan warna ini beberapa kali di seluruh aplikasi. Mari kita mendefinisikan variabel ini.

    Pertama buat folder baru:

    aplikasi / aset / stylesheet / basis

    Di dalam direktori dasar buat file files.scss baru. Di dalam file, tentukan variabel:

    $ navbarColor: # 323738;

    Jika Anda mencoba membuka http: // localhost: 3000, Anda tidak akan melihat adanya perubahan gaya. Alasan untuk itu adalah bahwa di bagian Bootstrap kami menghapus baris ini:

    * = wajib_ sendiri
    * = require_tree.

    dari application.scss, untuk tidak secara otomatis mengimpor semua file gaya.

    Ini berarti bahwa sekarang kita harus mengimpor file yang baru kita buat ke application.scssfile utama. File akan terlihat seperti ini sekarang:

    Alasan untuk mengimpor file variable.scss di bagian atas adalah untuk memastikan bahwa variabel didefinisikan sebelum kita menggunakannya.

    Tambahkan lebih banyak CSS di bagian atas file navigation.scss:

    Tentu saja Anda dapat meletakkan kode ini di bagian bawah file jika Anda mau. Secara pribadi, saya memesan dan mengelompokkan kode CSS berdasarkan spesifisitas pemilih CSS. Sekali lagi, semua orang melakukannya sedikit berbeda. Saya menempatkan pemilih yang kurang spesifik di atas dan pemilih yang lebih spesifik di bawah. Jadi misalnya Selektor pilih pergi di atas Selektor kelas dan Selektor kelas pergi di atas selektor ID.

    Mari kita lakukan perubahan:

    git add -A
    git commit -m "Tambahkan CSS ke bilah navigasi"

    Kami ingin memastikan bahwa bilah navigasi selalu terlihat, bahkan ketika kami gulir ke bawah. Saat ini kami tidak memiliki cukup konten untuk digulir ke bawah, tetapi kami akan melakukannya di masa mendatang. Mengapa kami tidak memberikan fitur ini ke bilah navigasi sekarang?

    Untuk melakukan itu gunakan kelas Bootstrap navbar-fix-top. Tambahkan kelas ini ke elemen nav, sehingga terlihat seperti ini:

    Kami juga ingin memiliki collabfield untuk batas kiri Sistem Bootstrap Grid. Sekarang ini adalah ke batas sisi kiri viewport, karena kelas kami saat ini fluid-container. Untuk mengubahnya, ubah kelas menjadi wadah.

    Seharusnya terlihat seperti ini:

    Komit perubahan:

    git add -A
    git commit -m "
    - di _navigation.html.erb tambahkan navbar-fixed-top class ke nav.
    - Ganti kelas cairan-wadah dengan wadah "

    Jika Anda membuka http: // localhost: 3000, Anda melihat bahwa teks laman Beranda disembunyikan di bawah bilah navigasi. Itu karena navbar-fixed-top class. Untuk mengatasi masalah ini, tekan tubuh ke bawah dengan menambahkan berikut ini ke navigation.scss:

    tubuh {
     margin-top: 50px;
    }

    Pada tahap ini aplikasi akan terlihat seperti ini:

    Komit perubahan:

    git add -A
    git commit -m "Tambahkan margin-top 50px ke tubuh"

    Seperti yang Anda ingat, kami telah membuat cabang baru sebelumnya dan beralih ke cabang itu. Sudah waktunya untuk kembali ke cabang utama.

    Jalankan perintah:

    cabang git

    Anda dapat melihat daftar cabang kami. Saat ini kami berada di cabang thestyles.

    Untuk beralih kembali ke cabang master, jalankan:

    git checkout master

    Untuk menggabungkan semua perubahan kami, yang kami lakukan di cabang gaya, jalankan:

    git menggabungkan gaya

    Perintah menggabungkan kedua cabang dan sekarang kita bisa melihat ringkasan dari perubahan yang kita buat.

    Kami tidak membutuhkan cabang gaya lagi, sehingga kami dapat menghapusnya:

    cabang git -D gaya

    Posting

    Ini hampir waktu yang tepat untuk mulai menerapkan fungsionalitas posting. Karena tujuan aplikasi kami adalah untuk memungkinkan pengguna bertemu orang-orang yang berpikiran sama, kami harus memastikan bahwa penulis posting dapat diidentifikasi. Untuk mencapai itu, diperlukan sistem otentikasi.

    Otentikasi

    Untuk sistem otentikasi kita akan menggunakan permata alat. Kita dapat membuat sistem otentikasi kita sendiri, tetapi itu akan membutuhkan banyak usaha. Kami akan memilih rute yang lebih mudah. Juga merupakan pilihan populer di kalangan komunitas Rails.

    Mulai dengan membuat cabang baru:

    git checkout -b otentikasi

    Sama seperti permata lainnya, untuk mengaturnya kami akan mengikuti dokumentasinya. Untungnya, sangat mudah diatur.

    Tambahkan ke Gemfile Anda

    permata 'merancang'

    Kemudian jalankan perintah:

    bundel instal
    rel menghasilkan alat: instal

    Anda mungkin melihat beberapa instruksi di command prompt. Kami tidak akan menggunakan mailer dalam tutorial ini, jadi tidak diperlukan konfigurasi lebih lanjut.

    Pada titik ini, jika Anda tidak tahu apa-apa tentang model Rails, Anda harus membiasakan diri dengan membaca sekilas melalui Rekaman Aktif dan dokumentasi Modifikasi Aktif.

    Sekarang mari kita gunakan generator alat untuk membuat model Pengguna.

    rail menghasilkan Pengguna

    Inisialisasi basis data untuk aplikasi dengan menjalankan:

    rails db: create

    Kemudian jalankan perintah ini untuk membuat tabel baru di database Anda:

    rails db: bermigrasi

    Itu dia. Secara teknis sistem otentikasi kami sudah diatur. Sekarang kita bisa menggunakan Merancang metode yang diberikan dan membuat pengguna baru. Komit perubahan:

    git add -A
    git commit -m "Tambah dan konfigurasikan permata Alat"

    Dengan menginstal Devise gem, kami tidak hanya mendapatkan fungsionalitas back-end, tetapi juga tampilan default. Jika Anda mendaftar rute Anda dengan menjalankan:

    rute rel

    Anda dapat melihat bahwa sekarang Anda memiliki banyak rute baru. Ingat, kami hanya memiliki satu rute root sampai sekarang. Jika ada sesuatu yang membingungkan, Anda selalu dapat membuka dokumen dan mendapatkan jawaban. Juga jangan lupa bahwa banyak pertanyaan yang sama muncul di benak orang lain. Ada kemungkinan besar bahwa Anda akan menemukan jawabannya dengan Googling juga.

    Coba beberapa rute itu. Pergi ke localhost: 3000 / pengguna / sign_in dan Anda akan melihat halaman masuk.

    Jika Anda pergi ke localhost: 3000 / users / sign_up, Anda akan melihat halaman pendaftaran juga. Ya Tuhan! seperti kata Noob Noob. Jika Anda melihat direktori views, Anda melihat bahwa tidak ada direktori Rancangan, yang dapat kami modifikasi. Seperti yang dikatakan oleh Devise docs, untuk memodifikasi tampilan Devise, kami harus membuatnya dengan generator yang merancang. Lari

    rel menghasilkan alat: pandangan

    Jika Anda memeriksa direktori views, Anda akan melihat direktori merancang yang dihasilkan di dalamnya. Di sini kita dapat mengubah bagaimana halaman mendaftar dan masuk akan terlihat. Mari kita mulai dengan halaman login, karena dalam kasus kami ini akan menjadi implementasi yang lebih mudah. Dengan halaman pendaftaran, karena fitur yang kami inginkan, upaya ekstra akan diperlukan.

    Halaman masuk

    Arahkan ke dan buka aplikasi / views / merancang / sesi / new.html.erb.

    Di sinilah tampilan halaman login disimpan. Hanya ada formulir masuk di dalam file. Seperti yang mungkin Anda perhatikan, metode form_for digunakan untuk menghasilkan formulir ini. Ini adalah metode Rails yang berguna untuk menghasilkan formulir. Kami akan mengubah gaya formulir ini dengan bootstrap. Ganti semua konten file dengan:

    Tidak ada yang mewah di sini. Kami baru saja memodifikasi formulir ini menjadi bentuk bootstrap dengan mengubah nama metode menjadi bootstrap_form_forand menambahkan form-controlclasses ke bidang.

    Lihatlah bagaimana argumen di dalam metode ditata. Setiap argumen dimulai pada baris baru. Alasan mengapa saya melakukan ini adalah untuk menghindari memiliki baris kode yang panjang. Biasanya baris kode tidak boleh lebih dari 80 karakter, itu meningkatkan keterbacaan. Kami akan menata kode seperti itu untuk sisa panduan ini.

    Jika kami mengunjungi localhost: 3000 / pengguna / sign_in, kami akan melihat bahwa itu memberi kami kesalahan:

    metode 'bootstrap_form_for' tidak terdefinisi

    Untuk menggunakan formulir bootstrap di Rails, kami harus menambahkan permata bootstrap_form. Tambahkan ini ke Gemfile

    gem 'bootstrap_form'

    Lalu lari:

    bundel instal

    Pada saat ini halaman login akan terlihat seperti ini:

    Perubahan komit:

    git add -A
    git commit -m "Hasilkan tampilan rancangan, ubah formulir masuk
    dan tambahkan permata bootstrap_form. "

    Untuk memberikan sistem grid bootstrap ke halaman, bungkus form login dengan wadah bootstrap.

    Lebar form login adalah 6 kolom dari 12. Dan offsetnya adalah 3 kolom. Pada perangkat yang lebih kecil, formulir akan mengambil lebar layar penuh. Begitulah cara bootstrap gridworks.

    Mari kita lakukan komitmen lain. Perubahan kecil, ya? Tapi itulah yang biasanya saya lakukan. Saya menerapkan perubahan yang pasti dalam satu bidang dan kemudian melakukan itu. Saya pikir melakukannya dengan cara ini membantu melacak perubahan dan memahami bagaimana kode berkembang.

    git add -A
    git commit -m "bungkus formulir login di halaman login dengan wadah boostrap"

    Akan lebih baik jika kita bisa mencapai halaman login dengan pergi ke / login bukan dari / pengguna / sign_in. Kami harus mengubah rute. Untuk melakukan itu kita perlu tahu di mana tindakan, yang dipanggil saat kita masuk ke halaman login, berada. Menyusun pengontrol terletak di dalam permata itu sendiri. Dengan membaca Devise docs kita dapat melihat bahwa semua controller terletak di dalam direktori devise. Tidak terlalu kaget dengan penemuan itu, jujur ​​saja U_U. Dengan menggunakan metode devise_scope kita cukup mengubah rute. Buka file routes.rb dan tambahkan

    devise_scope: yang dilakukan pengguna
      dapatkan 'login', ke: 'merancang / sesi # baru'
    akhir

    Komit perubahan:

    git add -A
    git commit -m "ubah rute dari / users / sign_in ke / login"

    Untuk saat ini, biarkan halaman login apa adanya.

    Daftar halaman

    Jika kita menavigasi ke localhost: 3000 / pengguna / sign_up, kita akan melihat halaman Mendaftar pendaftaran standar. Tetapi seperti yang disebutkan di atas, halaman pendaftaran akan membutuhkan usaha ekstra. Mengapa? Karena kami ingin menambahkan kolom baru: nama ke tabel pengguna, sehingga objek Pengguna dapat memiliki atribut: nama.

    Kami akan melakukan beberapa perubahan pada file schema.rb. Pada saat ini, jika Anda tidak cukup terbiasa dengan perubahan skema dan migrasi, saya sarankan Anda untuk membaca dokumen Migrasi Rekaman Aktif.

    Pertama, kita harus menambahkan kolom tambahan ke tabel pengguna. Kami dapat membuat file migrasi baru dan menggunakan metode change_table untuk menambahkan kolom tambahan. Tapi kami baru saja dalam tahap pengembangan, aplikasi kami belum digunakan. Kami hanya bisa mendefinisikan kolom baru langsung di dalam file migrasi devise_create_users dan kemudian membuat ulang database. Arahkan ke db / migrasi dan buka file * CREATION_DATE * _devise_create_users.rb dan tambahkan t.string: name, null: false, default: "" di dalam metode create_table.

    Sekarang jalankan perintah untuk menjatuhkan dan membuat database, dan menjalankan migrasi.

    rails db: drop
    rails db: create
    rails db: bermigrasi

    Kami menambahkan kolom baru ke tabel pengguna dan mengubah file schema.rb.

    Agar dapat mengirim atribut tambahan, sehingga pengontrol Devise akan menerimanya, kami harus melakukan beberapa perubahan di tingkat pengontrol. Kita dapat melakukan perubahan untuk merancang pengontrol dengan beberapa cara berbeda. Kita dapat menggunakan alat pembangkit dan menghasilkan pengontrol. Atau kita dapat membuat file baru, tentukan controller dan metode yang ingin kita modifikasi. Kedua cara itu baik. Kita akan menggunakan yang terakhir.

    Arahkan ke app / controllers dan buat file baru registrations_controller.rb. Tambahkan kode berikut ke file:

    Kode ini menimpa sign_up_params dan account_update_paramsmethods untuk menerima atribut: name. Seperti yang Anda lihat, metode-metode itu ada di Devise RegistrationsController, jadi kami menentukannya dan mengubah metodenya. Sekarang di dalam rute kami, kami harus menentukan pengontrol ini, sehingga metode ini dapat ditimpa. Di dalam route.rb berubah

    devise_for: pengguna

    untuk

    devise_for: users,: controllers => {: registrations => "registrations"}

    Komit perubahan.

    git add -A
    git commit -m "
    - Tambahkan kolom nama ke tabel pengguna.
    - Sertakan atribut nama ke sign_up_params dan account_update_params
      metode di dalam RegistrationsController "

    Buka file new.html.erb:

    app / views / merancang / registrasi / new.html.erb

    Sekali lagi, hapus semuanya kecuali formulir. Ubah formulir menjadi bentuk bootstrap. Kali ini kami menambahkan bidang nama tambahan.

    Lakukan perubahan.

    git add -A
    git commit -m "
    Hapus semuanya dari halaman pendaftaran, kecuali formulir.
    Ubah bentuk menjadi bentuk bootstrap. Tambahkan bidang nama tambahan "

    Bungkus formulir dengan wadah bootstrap dan tambahkan beberapa teks.

    Lakukan perubahan.

    git add -A
    git commit -m "
    Bungkus formulir pendaftaran dengan wadah bootstrap.
    Tambahkan teks informasi di dalam wadah "

    Sama seperti dengan halaman login, akan lebih baik jika kita bisa membuka halaman mendaftar dengan pergi ke / mendaftar daripada pengguna / sign_up. Di dalam file routes.rb tambahkan kode berikut:

    devise_scope: yang dilakukan pengguna
      dapatkan 'pendaftaran', ke: 'buat / daftarkan # baru'
    akhir

    Lakukan perubahan.

    git add -A
    git commit -m "Ubah rute mendaftar dari / users / sign_up ke / signup"

    Mari kita terapkan beberapa perubahan gaya sebelum kita melanjutkan. Arahkan ke app / assets / sytlesheets / partials dan buat file signup.scss baru. Di dalam file tambahkan CSS berikut:

    Kami juga tidak mengimpor file dari direktori sebagian di dalam file application.scss. Ayo lakukan sekarang. Arahkan ke application.scss dan tepat di atas sebagian @simport / tata letak / *, impor semua file dari direktori parsial. Application.scss akan terlihat seperti ini

    Komit perubahan.

    git add -A
    git commit -m "
    - Buat signup.scss dan tambahkan CSS ke halaman pendaftaran
    - Impor semua file dari direktori sebagian ke application.scss "

    Tambahkan beberapa perubahan gaya lainnya ke keseluruhan tampilan situs web. Arahkan ke app / assets / stylesheet / base dan buat file default.scss baru. Di dalam file tambahkan kode CSS berikut:

    Di sini kami menerapkan beberapa perubahan gaya umum untuk seluruh situs web. font-size diatur ke 62,5%, sehingga 1 unit rem bisa mewakili 10px. Jika Anda tidak tahu apa itu unit rem, Anda mungkin ingin membaca tutorial ini. Kami tidak ingin melihat teks label pada formulir bootstrap, itulah sebabnya kami mengatur ini:

    .control-label {
      display: tidak ada;
    }

    Anda mungkin telah memperhatikan bahwa variabel $ backgroundColor digunakan. Tetapi variabel ini belum ditetapkan. Jadi mari kita lakukan dengan membuka file variable.scss dan menambahkan ini:

    $ backgroundColor: # f0f0f0;

    File default.scss tidak diimpor di dalam application.scss. Impor di bawah variabel, file application.scss akan terlihat seperti ini:

    Komit perubahan.

    git add -A
    git commit -m "
    Tambahkan CSS dan impor file CSS di dalam file utama
    - Buat file default.scss dan tambahkan CSS
    - Tentukan variabel $ backgroundColor
    - Impor file default.scss di dalam application.scss "

    Pembaruan bilah navigasi

    Saat ini kami memiliki tiga halaman berbeda: beranda, masuk dan mendaftar. Merupakan ide bagus untuk menghubungkan mereka semua bersama-sama, sehingga pengguna dapat menavigasi melalui situs web dengan mudah. Kami akan menaruh tautan ke laman pendaftaran dan masuk di bilah navigasi. Arahkan ke dan buka file _navigation.html.erb.

    app / views / layouts / _navigation.html.erb

    Kami akan menambahkan beberapa kode tambahan di sini. Di masa depan kami akan menambahkan lebih banyak kode di sini. Ini akan mengarah ke file dengan banyak kode, yang sulit untuk dikelola dan diuji. Untuk menangani kode panjang lebih mudah, kami akan mulai membagi kode yang lebih besar menjadi potongan-potongan kecil. Untuk mencapainya, kami akan menggunakan sebagian. Sebelum menambahkan kode tambahan, mari kita pisahkan kode _navigation.html.erb saat ini menjadi sebagian.

    Biarkan saya memperkenalkan Anda dengan cepat bagaimana bilah navigasi kami akan berfungsi. Kami akan memiliki dua bagian utama. Pada satu bagian elemen akan ditampilkan sepanjang waktu, tidak peduli berapa ukuran layarnya. Di bagian lain dari bilah navigasi, elemen akan ditampilkan hanya pada layar yang lebih besar dan runtuh pada yang lebih kecil.

    Ini adalah bagaimana struktur di dalam elemen .container akan terlihat seperti:

    Di dalam direktori layout:

    aplikasi / tampilan / tata letak

    Buat direktori navigasi baru. Di dalam direktori ini buat file _header.html.erb parsial baru.

    app / views / layouts / navigation / _header.html.erb

    Dari file _navigation.html.erb potong seluruh bagian .navbar-header dan rekatkan di dalam file _header.html.erb. Di dalam direktori navigasi, buat file parsial lain bernama _collapsible_elements.html.erb.

    app / views / layouts / navigation / _collapsible_elements.html.erb

    Dari file _navigation.html.erb, potong seluruh bagian .navbar-collapse dan tempel di dalam _collapsible_elements.html.erb. Sekarang mari kita render kedua parsial tersebut di dalam file _navigation.html.erb. File seharusnya terlihat seperti ini sekarang.

    Jika Anda pergi ke http: // localhost: 3000 sekarang, Anda tidak akan melihat adanya perbedaan. Kami hanya sedikit membersihkan kode dan menyiapkannya untuk pengembangan lebih lanjut.

    Kami siap menambahkan beberapa tautan ke bilah navigasi. Arahkan ke dan buka file _collapsible_elements.html.erb lagi:

    app / views / layouts / _collapsible_elements.html.erb

    Mari kita isi file ini dengan tautan, ganti konten file dengan:

    Biarkan saya jelaskan secara singkat kepada Anda apa yang sedang terjadi di sini. Pertama, pada baris kedua saya mengubah id elemen menjadi navbar-collapsible-content. Ini diperlukan untuk membuat konten ini bisa dilipat. Ini fungsionalitas bootstrap. Id default adalah bs-example-navbar-collapse-1. Untuk memicu fungsi ini ada tombol dengan atribut target data di dalam file _header.html. Buka tampilan / tata letak / navigasi / _header.html.erb dan ubah atribut target data ke data-target = "# navbar-collapsible-content". Sekarang tombol akan memicu konten yang dapat dilipat.

    Selanjutnya, di dalam file_collapsible_elements.html.erb Anda melihat beberapa jika elselogic dengan user_signed_in? Merancang metode. Ini akan menampilkan tautan yang berbeda berdasarkan apakah pengguna masuk, atau tidak. Meninggalkan logika, seperti jika pernyataan dalam tampilan bukan praktik yang baik. Tampilan harus cukup "bodoh" dan hanya memuntahkan informasi, tanpa "berpikir" sama sekali. Kami akan memperbaiki logika ini nanti dengan Pembantu.

    Hal terakhir yang perlu diperhatikan di dalam file adalah kelas CSS menu-menu dan seluler-menu. Tujuan dari kelas-kelas ini adalah untuk mengontrol bagaimana tautan ditampilkan pada berbagai ukuran layar. Mari kita tambahkan beberapa CSS untuk kelas-kelas ini. Arahkan ke app / aset / stylesheet dan buat direktori baru responsif. Di dalam direktori buat dua file, desktop.scss dan mobile.scss. Tujuan dari file-file itu adalah untuk memiliki konfigurasi yang berbeda untuk ukuran layar yang berbeda. Di dalam file desktop.scss tambahkan:

    Di dalam file mobile.scss tambahkan:

    Jika Anda tidak terbiasa dengan pertanyaan media CSS, baca ini. Impor file dari direktori responsif di dalam file application.scss. Impor di bagian bawah file, sehingga aplikasi.scss akan terlihat seperti ini:

    Navigasikan ke dan buka file navigation.scss

    app / assets / stylesheet / partials / layout / navigation.scss

    dan lakukan beberapa penyesuaian gaya ke bilah navigasi dengan menambahkan berikut ini di dalam pemilih elemen nav:

    Dan di luar elemen nav, tambahkan kode CSS berikut:

    Saat ini, aplikasi kita akan terlihat seperti ini ketika pengguna tidak masuk:

    Seperti ini saat pengguna masuk:

    Dan seperti ini ketika ukuran layar lebih kecil:

    Komit perubahan.

    git add -A
    git commit -m "
    Perbarui bilah navigasi
    - Tambahkan info masuk, daftar, keluar dan edit tautan profil di bilah navigasi
    - Pisahkan kode _navigation.scss menjadi parsial
    - Buat direktori responsif di dalam direktori stylesheet dan tambahkan CSS.
    - Tambahkan CSS ke tweak gaya navigasi bar "

    Sekarang kami memiliki fungsi otentikasi dasar. Itu memenuhi kebutuhan kita. Jadi mari kita gabungkan cabang autentikasi dengan cabang master.

    git checkout master
    git menggabungkan otentikasi

    Kita bisa melihat ringkasan perubahan lagi. Cabang otentikasi tidak diperlukan lagi, jadi hapus saja.

    git branch -D otentikasi

    Pembantu

    Ketika kami sedang mengerjakan file _collapsible_elements.html.erb, saya menyebutkan bahwa tampilan Rails bukan tempat yang tepat untuk logika. Jika Anda melihat di dalam direktori aplikasi proyek, Anda melihat ada direktori yang disebut helpers. Kami akan mengekstrak logika dari tampilan Rails dan memasukkannya ke dalam direktori helpers.

    aplikasi / tampilan / halaman

    Mari buat pembantu pertama kami. Pertama, buat cabang baru dan pindah ke sana.

    git checkout -B pembantu

    Arahkan ke direktori helpers dan buat navigation_helper.rbfile baru

    app / helpers / navigation_helper.rb

    Di dalam file helper, helper didefinisikan sebagai modul. Di dalam navigation_helper.rb tentukan modul.

    Secara default Rails memuat semua file pembantu ke semua tampilan. Secara pribadi saya tidak suka ini, karena nama metode dari file pembantu yang berbeda mungkin berbenturan. Untuk mengganti perilaku default ini, buka file application.rb

    config / application.rb

    Di dalam kelas Aplikasi tambahkan konfigurasi ini

    config.action_controller.include_all_helpers = false

    Sekarang pembantu tersedia untuk tampilan pengontrol yang sesuai saja. Jadi jika kita memiliki PagesController, semua pembantu di dalam file pages_helper.rb akan tersedia untuk semua file tampilan di dalam direktori halaman.

    Kami tidak memiliki NavigationController, jadi metode pembantu yang ditentukan di dalam modul NavigationHelper tidak akan tersedia di mana pun. Bilah navigasi tersedia di seluruh situs web. Kami dapat menyertakan modul NavigationHelper di dalam ApplicationHelper. Jika Anda tidak terbiasa memuat dan memasukkan file, bacalah artikel ini untuk mengetahui apa yang akan terjadi.

    Di dalam file application_helper.rb, memerlukan file navigation_helper.rb. Sekarang kami memiliki akses ke konten file navigation_helper.rb. Jadi mari kita menyuntikkan modul NavigationHelper ke dalam modul ApplicationHelper dengan menggunakan metode sertakan. Application_helper.rb akan terlihat seperti ini:

    Sekarang metode pembantu NavigationHelper tersedia di seluruh aplikasi.

    Arahkan ke dan buka file _collapsible_elements.html.erb

    app / views / layouts / navigation / _collapsible_elements.html.erb

    Kami akan membagi konten di dalam pernyataan if else menjadi sebagian. Buat direktori collapsible_elements baru di dalam direktori navigasi.

    app / views / layouts / navigation / collapsible_elements

    Di dalam direktori buat dua file: _signed_in_links.html.erb dan _non_signed_in_links.html.erb. Sekarang potong konten dari file _collapsible_elements.html.erb jika ada pernyataan lain dan tempelkan ke parsial yang sesuai. Parsial akan terlihat seperti ini:

    Sekarang di dalam file _collapsible_elements.html.erb, alih-alih jika elsestatements, tambahkan metode yang ada dengan metode collapsible_links_partial_pathhelper sebagai argumen. File akan terlihat seperti ini

    collapsible_links_partial_path adalah metode yang akan kita definisikan di dalam NavigationHelper. Buka navigation_helper.rb

    app / helpers / navigation_helper.rb

    dan tentukan metode di dalam modul. File navigation_helper.rb akan terlihat seperti ini:

    Metode yang didefinisikan cukup mudah. Jika pengguna masuk, kembalikan jalur parsial yang sesuai. Jika pengguna tidak masuk, kembalikan jalur parsial lain.

    Kami telah menciptakan metode penolong pertama kami dan mengekstraksi logika dari tampilan ke metode penolong. Kami akan melakukan ini untuk sisa panduan ini, setiap kali kami menemukan logika di dalam file tampilan. Dengan melakukan ini kami membuat kebaikan untuk diri kita sendiri, menguji dan mengelola aplikasi menjadi lebih mudah.

    Aplikasi harus terlihat dan berfungsi sama.

    Komit perubahan.

    git add -A
    git commit -m "Konfigurasikan dan buat pembantu
    - Ubah config include_all_helpers ke false
    - Pisahkan konten file _collapsible_elements.html.erb menjadi
      parsial dan ekstrak logika dari file ke parsial "

    Gabungkan cabang pembantu dengan master

    git checkout master
    git merge helpershttps: //gist.github.com/domagude/419bba70cb97e27f4ea04fe37820194a#file-rails_helper-rb

    Pengujian

    Pada titik ini aplikasi memiliki beberapa fungsi. Walaupun belum ada banyak fitur, tetapi kami harus meluangkan waktu dengan menguji aplikasi secara manual jika kami ingin memastikan semuanya berfungsi. Bayangkan jika aplikasi memiliki fitur 20 kali lebih banyak daripada yang ada sekarang. Betapa frustasi akan memeriksa bahwa semuanya berfungsi dengan baik, setiap kali kami melakukan perubahan kode. Untuk menghindari frustrasi dan berjam-jam pengujian manual ini, kami akan menerapkan tes otomatis.

    Sebelum terjun ke tes menulis, izinkan saya untuk memperkenalkan Anda bagaimana dan apa yang saya uji. Anda juga dapat membaca Panduan untuk Menguji Aplikasi Rails agar terbiasa dengan teknik pengujian Rails default.

    Apa yang saya gunakan untuk pengujian

    • Kerangka kerja: RSpec
      Ketika saya mulai menguji aplikasi Rails saya, saya menggunakan Minitestframework default. Sekarang saya menggunakan RSpec. Saya pikir tidak ada pilihan yang baik atau buruk di sini. Kedua kerangka itu bagus. Saya pikir itu tergantung pada preferensi pribadi, kerangka mana yang digunakan. Saya pernah mendengar bahwa RSpec adalah pilihan populer di antara komunitas Rails, jadi saya memutuskan untuk mencobanya. Sekarang saya sering menggunakannya.
    • Contoh data: factory_girl
      Sekali lagi, pada awalnya saya mencoba cara standar Rails, untuk menambahkan data sampel. Saya menemukan bahwa ini merupakan kasus yang berbeda dengan kerangka pengujian. Kerangka pengujian mana yang harus dipilih mungkin adalah preferensi pribadi. Menurut pendapat saya, ini bukan kasus dengan data sampel. Pada perlengkapan pertama itu baik-baik saja. Tapi saya perhatikan bahwa setelah aplikasi menjadi lebih besar, mengendalikan data sampel dengan fixture menjadi sulit. Mungkin saya menggunakannya dengan cara yang salah. Tetapi dengan pabrik semuanya baik dan damai segera. Tidak masalah jika aplikasi lebih kecil atau lebih besar - upaya untuk mengatur data sampel adalah sama.
    • Tes penerimaan: Capybara
      Secara default Capybara menggunakan driver rack_test. Sayangnya, driver ini tidak mendukung JavaScript. Alih-alih driver Capybara default, saya memilih untuk menggunakan poltergeist. Ini mendukung JavaScript dan dalam kasus saya itu adalah driver paling mudah untuk diatur.

    Apa yang saya uji

    Saya menguji semua logika yang ditulis oleh saya. Bisa jadi:

    • Pembantu
    • Model
    • Pekerjaan
    • Pola desain
    • Logika lain yang ditulis oleh saya

    Selain logika, saya membungkus aplikasi saya dengan tes penerimaan menggunakan Capybara, untuk memastikan bahwa semua fitur aplikasi berfungsi dengan baik dengan mensimulasikan interaksi pengguna. Juga untuk membantu tes simulasi saya, saya menggunakan tes permintaan untuk memastikan bahwa semua permintaan mengembalikan respons yang benar.

    Itulah yang saya uji di aplikasi pribadi saya, karena sepenuhnya memenuhi kebutuhan saya. Jelas, standar pengujian bisa berbeda dari orang ke orang dan dari perusahaan ke perusahaan.

    Pengontrol, tampilan, dan permata tidak disebutkan, mengapa? Seperti yang dikatakan oleh banyak pengembang Rails, pengontrol dan tampilan tidak boleh mengandung logika apa pun. Dan saya setuju dengan mereka. Dalam hal ini tidak banyak yang bisa diuji. Menurut pendapat saya, tes simulasi pengguna sudah cukup dan efisien untuk tampilan dan pengontrol. Dan permata sudah diuji oleh pencipta mereka. Jadi saya pikir tes simulasi sudah cukup untuk memastikan permata bekerja dengan baik juga.

    Bagaimana saya menguji

    Tentu saja saya mencoba menggunakan pendekatan TDD kapan pun memungkinkan. Tulis tes terlebih dahulu dan kemudian implementasikan kode. Dalam hal ini aliran pengembangan menjadi lebih halus. Tetapi kadang-kadang Anda tidak yakin bagaimana tampilan fitur yang akan diselesaikan dan seperti apa output yang diharapkan. Anda mungkin bereksperimen dengan kode atau hanya mencoba solusi implementasi yang berbeda. Jadi dalam kasus tersebut, tes pertama dan implementasi pendekatan selanjutnya tidak benar-benar bekerja.

    Sebelum (kadang-kadang setelah, seperti yang dibahas di atas) setiap bagian dari logika yang saya tulis, saya menulis tes terisolasi untuk tes unit a.k.a. Untuk memastikan bahwa setiap fitur aplikasi berfungsi, saya menulis tes penerimaan (simulasi pengguna) dengan Capybara.

    Siapkan lingkungan pengujian

    Sebelum kita menulis tes pertama kita, kita harus mengkonfigurasi lingkungan pengujian.

    Buka Gemfile dan tambahkan permata itu ke grup uji

    permata 'rspec-rails', '~> 3.6'
    permata 'factory_girl_rails'
    gem 'rails-controller-testing'
    permata 'tanpa kepala'
    permata 'capybara'
    permata 'poltergeist'
    gem 'database_cleaner'

    Seperti dibahas di atas, rspec gem adalah kerangka pengujian, factory_girl adalah untuk menambahkan data sampel, capybara adalah untuk mensimulasikan interaksi pengguna dengan aplikasi dan driver poltergeist memberikan dukungan JavaScript untuk pengujian Anda.

    Anda dapat menggunakan driver lain yang mendukung JavaScript jika Anda lebih mudah menyiapkannya. Jika Anda memutuskan untuk menggunakan permata poltergeist, Anda harus memasang PhantomJS. Untuk menginstal PhantomJS, baca dokumen poltergeist.

    permata tanpa kepala diperlukan untuk mendukung driver tanpa kepala. poltergeist adalah pengemudi tanpa kepala, itu sebabnya kami membutuhkan permata ini. permata rails-controller-testing akan diperlukan ketika kami akan menguji permintaan dan tanggapan dengan spesifikasi permintaan. Lebih lanjut tentang itu nanti.

    database_cleaner diperlukan untuk membersihkan database pengujian setelah tes di mana JavaScript dieksekusi. Biasanya database pengujian membersihkan dirinya sendiri setelah setiap pengujian, tetapi ketika Anda menguji fitur yang memiliki beberapa JavaScript, database tidak membersihkan dirinya sendiri secara otomatis. Mungkin akan berubah di masa mendatang, tetapi saat ini, saat menulis tutorial ini, setelah pengujian dengan JavaScript dijalankan, basis data pengujian tidak dibersihkan secara otomatis. Itulah sebabnya kami harus mengonfigurasi lingkungan pengujian kami secara manual untuk membersihkan basis data pengujian setelah setiap pengujian JavaScript juga. Kami akan mengonfigurasi kapan menjalankan permata database_cleaner sesaat lagi.

    Sekarang ketika tujuan permata ini tercakup, mari kita instal dengan menjalankan:

    bundel instal

    Untuk menginisialisasi direktori spesifikasi untuk kerangka RSpec jalankan yang berikut:

    rails menghasilkan rspec: install

    Secara umum, spec berarti tes tunggal dalam kerangka RSpec. Ketika kami menjalankan spesifikasi kami, itu berarti kami menjalankan tes kami.

    Jika Anda melihat ke dalam direktori aplikasi, Anda akan melihat direktori baru bernama spec. Di sinilah kita akan menulis tes. Anda juga mungkin telah memperhatikan direktori yang disebut tes. Di sinilah tes disimpan ketika Anda menggunakan konfigurasi pengujian standar. Kami tidak akan menggunakan direktori ini sama sekali. Anda cukup menghapusnya dari proyek c (x_X) b.

    Seperti disebutkan di atas, kita harus mengatur database_cleaner untuk tes yang termasuk JavaScript. Buka file rails_helper.rb

    spec / rails_helper.rb

    Ubah baris ini

    config.use_transactional_fixtures = true

    untuk

    config.use_transactional_fixtures = false

    dan di bawahnya tambahkan kode berikut:

    Saya mengambil cuplikan kode ini dari tutorial ini.

    Hal terakhir yang harus kita lakukan adalah menambahkan beberapa konfigurasi. Di dalam konfigurasi file rails_helper.rb, tambahkan baris berikut

    Mari kita uraikan kodenya sedikit.

    Dengan memerlukan metode, kami memuat file dari permata baru yang ditambahkan, sehingga kami dapat menggunakan metode mereka di bawah ini.

    config.include Devise :: Test :: IntegrationHelpers, ketik:: fitur

    Konfigurasi ini memungkinkan kami untuk menggunakan metode merancang di dalam tes capybara. Bagaimana saya menemukan garis ini? Itu disediakan di dalam dokumen Rancangan.

    config.include FactoryGirl :: Sintaks :: Metode

    Konfigurasi ini memungkinkan untuk menggunakan metode factory_girl gem. Sekali lagi, saya menemukan konfigurasi ini di dalam dokumentasi permata.

    Capybara.javascript_driver =: poltergeist
    Capybara.server =: puma

    Kedua konfigurasi tersebut diperlukan untuk dapat menguji JavaScript dengan capybara. Selalu baca dokumentasi terlebih dahulu, ketika Anda ingin mengimplementasikan sesuatu yang Anda tidak tahu caranya.

    Alasan mengapa saya memperkenalkan Anda dengan sebagian besar permata pengujian dan konfigurasi sekaligus dan tidak secara bertahap, setelah kami menemui masalah tertentu, adalah untuk memberi Anda gambaran yang jelas tentang apa yang saya gunakan untuk pengujian. Sekarang Anda selalu dapat kembali ke bagian ini dan memeriksa mayoritas konfigurasi di satu tempat. Alih-alih melompat dari satu tempat ke tempat lain dan menempatkan permata dengan konfigurasi seperti potongan puzzle.

    Mari kita lakukan perubahan dan akhirnya membuat tangan kita kotor dengan tes.

    git add -A
    git commit -m "
    Siapkan lingkungan pengujian
    - Hapus direktori tes
    - Tambahkan dan konfigurasikan rspec-rails, factory_girl_rails,
      rails-controller-testing, tanpa kepala, capybara, poltergeist,
      permata database_cleaner "

    Spesifikasi pembantu

    Tentang setiap jenis spesifikasi (tes), Anda dapat menemukan informasi umum dengan membaca dokumen rspec dan dokumen permata. Keduanya sangat mirip, tetapi Anda dapat menemukan beberapa perbedaan satu sama lain.

    Buat dan alihkan ke cabang baru:

    git checkout -b spesifikasi

    Sejauh ini kami hanya membuat satu metode pembantu. Mari kita mengujinya.

    Arahkan ke direktori spec anhttps: //gist.github.com/domagude/3c42ba6ccf31bf1c50588c59277a9146#file-navigation_helper_spec-rbd buat direktori baru yang disebut helpers.

    spek / pembantu

    Di dalam direktori, buat file baru navigation_helper_spec.rb

    spec / helpers / navigation_helper_spec.rb

    Di dalam file, tulis kode berikut:

    memerlukan ‘rails_helper 'memberi kami akses ke semua konfigurasi dan metode pengujian. : type =>: helper memperlakukan pengujian kami sebagai spesifikasi pembantu dan memberi kami metode khusus.

    Begitulah seharusnya tampilan file navigation_helper_spec.rb ketika metode collapsible_links_partial_path diuji.

    Untuk mempelajari lebih lanjut tentang konteks dan konteksnya, baca struktur dasar dokumen. Di sini kami menguji dua kasus - ketika pengguna masuk dan ketika pengguna tidak masuk. Dalam setiap konteks pengguna yang masuk dan yang tidak masuk, kami memiliki sebelum kait. Di dalam konteks yang sesuai, kait tersebut (metode) berjalan sebelum setiap pengujian kami. Dalam kasus kami, sebelum setiap pengujian kami menjalankan metode rintisan, jadi user_signed_in? mengembalikan nilai apa pun yang kami katakan untuk dikembalikan.

    Dan akhirnya, dengan metode ekspektasi kami memeriksa bahwa ketika kami memanggil metode collapsible_links_partial_path, kami mendapatkan nilai pengembalian yang diharapkan.

    Untuk menjalankan semua tes, jalankan:

    spesifikasi rspec

    Untuk menjalankan secara khusus file navigation_helper_spec.rb, jalankan:

    rspec spec / helpers / navigation_helper_spec.rb

    Jika tes lulus, output akan terlihat seperti ini:

    Komit perubahan.

    git add -A
    git commit -m "Tambahkan spesifikasi ke metode NavigationHelper collapsible_links_partial_path"

    Pabrik

    Selanjutnya, kita akan memerlukan beberapa data sampel untuk melakukan pengujian kami. factory_girl gem memberi kita kemampuan untuk menambahkan data sampel dengan sangat mudah, kapan pun kita membutuhkannya. Juga menyediakan dokumen berkualitas baik, sehingga membuat pengalaman keseluruhan cukup menyenangkan. Satu-satunya objek yang dapat kita buat dengan aplikasi kita sejauh ini adalah Pengguna. Untuk menentukan pabrik pengguna, buat direktori pabrik di dalam specdirectory.

    spek / pabrik

    Di dalam direktori factory buat file baru users.rb dan tambahkan kode berikut:

    Sekarang dalam spesifikasi kami, kami dapat dengan mudah membuat pengguna baru di dalam basis data pengujian, kapan pun kami membutuhkannya, menggunakan metode factory_girl gem. Untuk panduan lengkap cara mendefinisikan dan menggunakan pabrik, checkout dokumen factory_girlgem.

    Pabrik yang ditentukan kami, pengguna, cukup mudah. Kami mendefinisikan nilai, objek pengguna akan memiliki. Kami juga menggunakan metode urutan. Dengan membaca dokumen, Anda dapat melihat bahwa dengan setiap catatan Pengguna tambahan, n nilainya bertambah satu. Yaitu. nama pengguna pertama yang dibuat akan menjadi test0, yang kedua adalah test1, dll.

    Komit perubahan.

    git add -A
    git commit -m "tambahkan pabrik pengguna"

    Spesifikasi fitur

    Dalam spesifikasi fitur, kami menulis kode yang mensimulasikan interaksi pengguna dengan aplikasi. Spesifikasi fitur ditenagai oleh permata capybara.

    Berita baiknya adalah kami telah menyiapkan dan siap untuk menulis spesifikasi fitur pertama kami. Kami akan menguji fungsi masuk, keluar dan mendaftar.

    Di dalam direktori spec, buat direktori baru yang disebut fitur.

    spec / fitur

    Di dalam direktori fitur, buat direktori lain yang disebut pengguna.

    spec / fitur / pengguna

    Di dalam direktori pengguna, buat file baru yang disebut login_spec.rb

    spec / fitur / pengguna / login_spec.rb

    Seperti itulah tes masuk:

    Dengan kode ini, kami mensimulasikan kunjungan ke halaman login, mulai dari halaman utama. Kemudian kami mengisi formulir dan mengirimkannya. Terakhir, kami memeriksa apakah kami memiliki # elemen pengaturan pengguna di bilah navigasi, yang hanya tersedia untuk pengguna yang masuk.

    fitur dan skenario adalah bagian dari sintaks Capybara. fitur sama dengan konteks / uraian dan skenario sama dengan itu. Info lebih lanjut dapat Anda temukan di dokumen Capybara, Menggunakan Capybara Dengan Rspec.

    Biarkan metode memungkinkan kita untuk menulis metode yang dihafal yang bisa kita gunakan di semua spesifikasi dalam konteks, metode itu didefinisikan.

    Di sini kami juga menggunakan pabrik pengguna buatan kami dan metode buat, yang datang dengan permata factory_girl.

    js: argumen benar memungkinkan untuk menguji fungsionalitas yang melibatkan JavaScript.

    Seperti biasa, untuk melihat apakah tes lulus, jalankan file tertentu. Dalam hal ini adalah file login_spec.rb:

    rspec spec / fitur / pengguna / login_spec.rb

    Komit perubahan.

    git add -A
    git commit -m "tambahkan spesifikasi fitur masuk"

    Sekarang kita dapat menguji fungsionalitas logout. Di dalam direktori pengguna, buat file baru bernama logout_spec.rb

    spec / fitur / pengguna / logout_spec.rb

    Tes yang diterapkan akan terlihat seperti ini:

    Kode mensimulasikan pengguna mengklik tombol logout dan kemudian mengharapkan untuk melihat tautan pengguna yang tidak masuk pada bilah navigasi.

    metode sign_in adalah salah satu metode pembantu Rancangan. Kami telah memasukkan metode pembantu tersebut di dalam file rails_helper.rb sebelumnya.

    Jalankan file untuk melihat apakah tes lulus.

    Komit perubahan.

    git add -A
    git commit -m "tambahkan spesifikasi fitur logout"

    Fungsi terakhir yang kami miliki adalah kemampuan untuk mendaftar akun baru. Mari kita mengujinya. Di dalam direktori pengguna buat file baru bernama sign_up_spec.rb. Begitulah tampilan file dengan tes di dalamnya:

    Kami mensimulasikan pengguna yang menavigasi ke halaman pendaftaran, mengisi formulir, mengirimkan formulir dan akhirnya, kami berharap melihat elemen # pengaturan pengguna yang hanya tersedia untuk pengguna yang masuk.

    Di sini kami menggunakan metode bangun Rancangan alih-alih membuat. Dengan cara ini kita membuat objek baru tanpa menyimpannya ke database.

    Kita dapat menjalankan seluruh rangkaian tes dan melihat apakah semua tes berhasil.

    spesifikasi rspec

    Komit perubahan.

    git add -A
    git commit -m "tambah spesifikasi fitur pendaftaran"

    Kami selesai dengan tes pertama kami. Jadi mari kita gabungkan cabang spesifikasi dengan master.

    git checkout master
    git gabungkan spesifikasi

    Cabang spesifikasi tidak diperlukan lagi. Hapus itu q__o.

    cabang git -D spesifikasi

    Umpan utama

    Di halaman beranda kami akan membuat umpan posting. Umpan ini akan menampilkan semua jenis posting dalam format kartu.

    Mulai dengan membuat cabang baru:

    git checkout -b main_feed

    Hasilkan model baru yang disebut Post.

    rails g model post

    Maka kita akan membutuhkan model Kategori untuk mengategorikan posting:

    kategori model g rails

    Sekarang mari kita membuat beberapa asosiasi antara Pengguna, Kategori dan Postmodel.

    Setiap posting akan menjadi milik kategori dan pengarangnya (pengguna). Buka file model dan tambahkan asosiasi.

    kelas Posting 
    Pengguna kelas 
    Kategori kelas 

    Argumen dependen:: destroy mengatakan, ketika pengguna dihapus, semua posting yang dibuat pengguna juga akan dihapus.

    Sekarang kita harus mendefinisikan kolom data dan asosiasi di dalam file migrasi.

    Sekarang jalankan file migrasi:

    rails db: bermigrasi

    Komit perubahan:

    git add -A
    git commit -m "
    - Hasilkan model Pos dan Kategori.
    - Buat asosiasi antara model Pengguna, Posting dan Kategori.
    - Buat kategori dan posting tabel basis data. "

    Spesifikasi

    Kami dapat menguji model yang baru dibuat. Nanti kita akan membutuhkan data sampel untuk pengujian. Karena posting milik kategori, kami juga memerlukan data sampel untuk kategori untuk mengatur asosiasi.

    Buat pabrik kategori di dalam direktori pabrik.

    spec / pabrik / kategori.rb

    Buat pabrik pos di dalam direktori pabrik

    spec / pabrik / posts.rb

    Seperti yang Anda lihat, sangat mudah untuk mendirikan asosiasi untuk pabrik. Yang harus kami lakukan untuk mengatur asosiasi pengguna dan kategori untuk pabrik pos, adalah menuliskan nama pabrik di dalam pabrik pos.

    Komit perubahan.

    git add -A
    git commit -m "Tambahkan pabrik pos dan kategori"

    Untuk saat ini kami hanya akan menguji asosiasi, karena itulah satu-satunya hal yang kami tulis di dalam model.

    Buka post_spec.rb

    spec / model / post_spec.rb

    Tambahkan spesifikasi untuk asosiasi, sehingga file akan terlihat seperti ini:

    Kami menggunakan metode dideskripsikan untuk mendapatkan kelas konteks saat ini. Yang pada dasarnya sama dengan menulis Posting dalam hal ini. Kemudian kami menggunakan metode reflect_on_association untuk memeriksa apakah ia mengembalikan asosiasi yang benar.

    Lakukan hal yang sama untuk model lain.

    Komit perubahan.

    git add -A
    git commit -m "Tambahkan spesifikasi untuk asosiasi Pengguna, Kategori, Posting model"

    Tata letak halaman rumah

    Saat ini halaman rumah tidak memiliki apa-apa di dalamnya, hanya teks dummy "Halaman Beranda". Saatnya membuat tata letaknya dengan bootstrap. Buka tampilan file tampilan halaman beranda / halaman / index.html.erb dan ganti konten file dengan kode berikut untuk membuat tata letak halaman:

    Sekarang tambahkan beberapa CSS untuk menentukan gaya elemen dan perilaku responsif.

    Di dalam direktori stylesheet / parsial buat file home_page.scss baru

    aset / stylesheet / parsial / home_page.scss

    Dalam file tambahkan CSS berikut:

    Di dalam max-width file mobile.scss: 767px kueri media tambahkan:

    Sekarang halaman utama akan terlihat seperti ini di layar yang lebih besar

    dan seperti ini di layar yang lebih kecil

    Komit perubahan.

    git add -A
    git commit -m "
    - Tambahkan tata letak bootstrap ke beranda
    - Tambahkan CSS untuk membuat perubahan desain gaya dan responsif tata letak laman beranda "

    Biji

    Untuk menampilkan posting di halaman rumah, pertama-tama kita perlu memasukkannya ke dalam basis data. Membuat data secara manual itu membosankan dan menghabiskan waktu. Untuk mengotomatiskan proses ini, kami akan menggunakan benih. Buka file seeds.rb.

    db / seeds.rb

    Tambahkan kode berikut:

    Seperti yang Anda lihat, kami membuat metode seed_users, seed_categories dan seed_posts untuk membuat catatan Pengguna, Kategori dan Posting di dalam database pengembangan. Juga permata faker digunakan untuk menghasilkan teks dummy. Tambahkan permata faker ke Gemfile Anda

    pembuat permata

    dan

    bundel instal

    Untuk mengunggah data, menggunakan file seed.rb, jalankan perintah

    rails db: seed

    Komit perubahan.

    git add -A
    git commit -m "
    - Tambahkan permata faker
    - Di dalam file seeds.rb membuat metode untuk menghasilkan
      Catatan Pengguna, Kategori dan Posting di dalam basis data pengembangan "

    Merender posting

    Untuk merender posting, kita akan memerlukan direktori posting di dalam tampilan.

    Hasilkan pengontrol baru yang disebut Posting, sehingga secara otomatis akan membuat direktori posts di dalam tampilan juga.

    rel g posting pengontrol

    Karena di aplikasi kami, PagesController bertanggung jawab atas beranda, kami harus meminta data di dalam tindakan indeks file pages_controller.rb. Di dalam tindakan indeks mengambil beberapa catatan dari tabel posting. Tetapkan catatan yang diambil ke variabel instan, sehingga objek yang diambil akan tersedia di dalam tampilan halaman beranda.

    • Jika Anda tidak terbiasa dengan variabel ruby, baca panduan ini.
    • Jika Anda tidak terbiasa dengan mengambil catatan dari database di Rails, baca panduan Antarmuka Kueri Rekaman Aktif.

    Tindakan indeks akan terlihat seperti ini sekarang:

    Navigasikan ke templat laman beranda

    views / pages / index.html.erb

    dan di dalam elemen .main-content add

    <% = render @ pos%>

    Ini akan membuat semua posting, yang diambil di dalam tindakan indeks. Karena objek posting milik kelas Post, Rails secara otomatis mencoba merender template parsial _post.html.erb yang terletak

    views / posts / _post.html.erb

    Kami belum membuat sebagian file ini, jadi buat dan tambahkan kode berikut di dalamnya:

    Saya telah menggunakan komponen kartu bootstrap di sini untuk mencapai gaya yang diinginkan. Lalu saya baru saja menyimpan konten posting dan jalurnya di dalam elemen. Saya juga menambahkan tautan yang akan mengarah ke pos lengkap.

    Sejauh ini kami tidak menetapkan rute untuk pos. Kami membutuhkannya sekarang, jadi mari kita deklarasikan. Buka file routes.rb dan tambahkan kode berikut di dalam rute:

    Di sini saya telah menggunakan metode sumber daya untuk mendeklarasikan rute untuk mengindeks, menampilkan, baru, mengedit, membuat, memperbarui, dan menghancurkan tindakan. Lalu, saya menyatakan beberapa rute koleksi khusus untuk mengakses halaman dengan beberapa instance Pos. Halaman-halaman ini akan didedikasikan untuk cabang terpisah, kami akan membuatnya nanti.

    Mulai ulang server dan buka http: // localhost: 3000. Anda akan melihat tulisan yang diberikan di layar. Aplikasi akan terlihat seperti ini:

    Komit perubahan.

    git add -A
    git commit -m "Tampilkan tulisan di halaman rumah
    - Hasilkan pengontrol Posting dan buat tindakan indeks.
      Di dalam tindakan indeks mengambil catatan Posting
    - Nyatakan rute untuk posting
    - Buat direktori postingan _post.html.erb parsial
    - Render pos di dalam konten utama laman beranda "

    Untuk memulai posting penataan, buat file scss baru di dalam direktori partial:

    aset / stylesheet / parsial / posts.scss

    dan di dalam file tambahkan CSS berikut:

    Halaman beranda akan terlihat seperti ini:

    Lakukan perubahan.

    git add -A
    git commit -m "Buat file posts.scss dan tambahkan CSS ke dalamnya"

    Styling dengan JavaScript

    Saat ini desain situs cukup membosankan. Untuk membuat kontras, kami akan mewarnai posting. Tapi alih-alih hanya mewarnai dengan CSS, mari warnai dengan pola warna berbeda setiap kali pengguna menyegarkan situs web. Untuk melakukan itu kita akan menggunakan JavaScript. Itu mungkin ide yang konyol, tapi itu menyenangkan c (o_u)?

    Arahkan ke direktori javascripts di dalam aset Anda dan buat direktori baru yang disebut posting. Di dalam direktori buat file baru bernama style.js. Juga jika Anda mau, Anda dapat menghapus secara default .coffee yang dihasilkan, file di dalam direktori javascripts. Kami tidak akan menggunakan CoffeeScript dalam tutorial ini.

    aset / javascripts / posting / style.js

    Di dalam file style.js tambahkan kode berikut.

    Dengan kode ini, kami menetapkan satu dari dua mode gaya secara acak saat peramban disegarkan, dengan menambahkan atribut ke pos. Satu gaya memiliki batas berwarna saja, gaya lain memiliki posting warna solid. Dengan setiap perubahan halaman dan pembaruan peramban kami juga mewarnai ulang posting secara acak. Di dalam fungsi randomColorSet () Anda dapat melihat skema warna yang telah ditentukan.

    penangan event mouseenter dan mouseleave akan dibutuhkan di masa depan untuk posting di halaman tertentu. Gaya tulisan di sana akan berbeda dari tulisan di halaman beranda. Saat Anda mengarahkan kursor pada sebuah pos, itu akan sedikit mengubah warna batas dasarnya. Anda akan melihatnya nanti.

    Komit perubahan.

    git add -A
    git commit -m "Buat file style.js dan tambahkan js untuk membuat gaya posting"

    Untuk melengkapi gaya, tambahkan beberapa CSS. Buka file posts.scss

    aset / stylesheet / parsial / posts.scss

    dan tambahkan CSS berikut:

    Juga di dalam mobile.scss tambahkan kode berikut untuk memperbaiki masalah teks yang terlalu besar pada layar yang lebih kecil:

    Halaman beranda seharusnya terlihat mirip dengan ini sekarang:

    Komit perubahan

    git add -A
    git commit -m "Tambahkan CSS ke posting di halaman beranda
    - tambahkan CSS ke file posts.scss
    - tambahkan CSS ke mobile.scss untuk memperbaiki masalah teks yang terlalu besar pada layar yang lebih kecil "

    Jendela modal

    Saya ingin dapat mengklik posting dan melihat konten lengkapnya, tanpa pergi ke halaman lain. Untuk mencapai fungsionalitas ini saya akan menggunakan komponen modal bootstrap.

    Di dalam direktori posting, buat file parsial baru _modal.html.erb

    views / posts / _modal.html.erb

    dan tambahkan kode berikut:

    Ini hanya komponen bootstrap yang sedikit dimodifikasi untuk menyelesaikan tugas khusus ini.

    Jadikan parsial ini di bagian atas templat laman beranda.

    Untuk membuat jendela modal ini berfungsi, kita harus menambahkan beberapa JavaScript. Di dalam direktori posting, buat file modal.js baru

    aset / javascripts / posting / modal.js

    Di dalam file, tambahkan kode berikut:

    Dengan kode js ini kami hanya menyimpan data posting terpilih ke dalam variabel dan mengisi elemen jendela modal dengan data ini. Akhirnya, dengan baris kode terakhir kita membuat jendela modal terlihat.

    Untuk meningkatkan tampilan jendela modal, tambahkan beberapa CSS. Tetapi sebelum menambahkan CSS, mari kita lakukan tugas manajemen cepat di dalam direktori stylesheet.

    Di dalam direktori partial membuat direktori baru yang disebut posting

    aset / stylesheet / parsial / posting

    Di dalam direktori posting buat file home_page.scss baru. Potong semua kode dari file posts.scss dan rekatkan di dalam file home_page.scss. Hapus posts.scssfile. Kami melakukan ini untuk pengelolaan kode CSS yang lebih baik. Lebih jelas ketika memiliki beberapa file CSS yang lebih kecil dengan tujuan yang dapat dibedakan, daripada satu file besar di mana semuanya disatukan.

    Juga di dalam direktori posting, buat file.scss file baru dan tambahkan CSS berikut:

    Sekarang ketika kita mengklik posting, aplikasi akan terlihat seperti ini:

    Komit perubahan.

    git add -A
    git commit -m "Tambahkan jendela sembulan untuk menampilkan konten posting lengkap
    - Tambahkan komponen modal bootstrap untuk menampilkan konten posting lengkap
    - Jadikan modal di dalam templat laman beranda
    - Tambahkan js untuk mengisi modal dengan konten posting dan tunjukkan
    - Tambahkan CSS ke gaya modal "

    Juga gabungkan cabang main_feed dengan master

    git checkout master
    git menggabungkan main_feed

    Singkirkan cabang main_feed

    cabang git -D main_feed

    Pos tunggal

    Beralih ke cabang baru

    git checkout -b single_post

    Tampilkan satu posting

    Jika Anda mencoba mengklik tombol Saya tertarik, Anda akan mendapatkan kesalahan. Kami belum membuat templat show.html.erb dan kami juga tidak membuat tindakan pengontrol yang sesuai. Dengan mengklik tombol, saya ingin diarahkan ke halaman posting yang dipilih.

    Di dalam PostsController, buat aksi pertunjukan dan kemudian kueri dan simpan objek posting tertentu di dalam variabel instan:

    Saya tertarik untuk mengalihkan ke posting yang dipilih. Memiliki atribut href dengan jalur ke posting. Dengan mengirimkan permintaan GET untuk mendapatkan pos, rel memanggil aksi pertunjukan. Di dalam aksi pertunjukan, kami memiliki akses ke param id, karena dengan mengirim permintaan GET untuk mendapatkan posting tertentu, kami memberikan id-nya. Yaitu. dengan masuk ke jalur / posting / 1, kami akan mengirim permintaan untuk mendapatkan posting yang id-nya 1.

    Buat template show.html.erb di dalam direktori posting

    views / posts / show.html.erb

    Di dalam file tambahkan kode berikut:

    Buat file show.scss di dalam direktori posting dan tambahkan CSS untuk menata tampilan halaman:

    Di sini saya mendefinisikan tinggi halaman menjadi 100vh-50px, sehingga konten halaman adalah tinggi viewport penuh. Hal ini memungkinkan wadah untuk diwarnai putih di seluruh ketinggian browser penuh, tidak peduli apakah ada cukup konten di dalam elemen atau tidak. properti vh berarti tinggi viewport, jadi nilai 100vh berarti bahwa elemen tersebut direntangkan 100% dari tinggi viewport. Diperlukan 100vh-50px untuk mengurangi ketinggian bilah navigasi, jika tidak wadah akan ditarik terlalu banyak sebanyak 50px.

    Jika Anda mengklik tombol Saya tertarik sekarang, Anda akan diarahkan ke halaman yang mirip dengan ini:

    Kami akan menambahkan fitur tambahan ke templat show.html.erb nanti. Sekarang lakukan perubahan.

    git add -A
    git commit -m "Buat template acara untuk posting
    - Tambahkan tindakan acara dan permintaan posting ke variabel instan
    - Buat file show.scss dan tambahkan CSS "

    Spesifikasi

    Alih-alih memeriksa secara manual bahwa fungsi ini, dari tampilan jendela modal dan pengalihan ke posting yang dipilih, bekerja, bungkus semuanya dengan spesifikasi. Kami akan menggunakan capybara untuk mensimulasikan interaksi pengguna dengan aplikasi.

    Di dalam direktori fitur, buat direktori baru yang disebut posting

    spec / fitur / posting

    Di dalam direktori baru, buat file baru visit_single_post_spec.rb

    spec / fitur / posting / visit_single_post_spec.rb

    Dan tambahkan spesifikasi fitur di dalamnya. File terlihat seperti ini:

    Di sini saya mendefinisikan semua langkah yang akan saya lakukan secara manual. Saya mulai dengan membuka halaman beranda, klik pada posting, berharap untuk melihat jendela modal yang muncul, klik pada tombol Saya tertarik, dan akhirnya, diharapkan akan diarahkan ke halaman posting dan melihat isinya.

    Secara default, pencocokan RSpec, have_selector, have_css, dll. Mengembalikan true jika elemen benar-benar terlihat oleh pengguna. Jadi setelah diklik pada sebuah posting, kerangka kerja pengujian mengharapkan untuk melihat jendela modal yang terlihat. Jika Anda tidak peduli apakah pengguna melihat elemen atau tidak dan Anda hanya peduli tentang kehadiran elemen di DOM, berikan tambahan yang terlihat: argumen salah.

    Coba jalankan tes

    rspec spec / fitur / posting / visit_single_post_spec.rb

    Komit perubahan.

    git add -A
    git commit -m "Tambahkan spesifikasi fitur untuk menguji apakah pengguna dapat pergi ke
    satu pos dari halaman beranda "

    Gabungkan cabang single_post dengan master.

    git checkout master
    git gabungkan single_post
    cabang git -D single_post

    Cabang tertentu

    Setiap posting milik cabang tertentu. Mari kita buat halaman spesifik untuk cabang yang berbeda.

    Beralih ke cabang baru

    git checkout -b specific_branches

    Menu samping halaman Beranda

    Mulailah dengan memperbarui menu samping halaman beranda. Tambahkan tautan ke cabang tertentu. Buka file index.html.erb:

    views / pages / index.html.erb

    Kami akan meletakkan beberapa tautan di dalam elemen menu # side. Pisahkan konten file menjadi sebagian, jika tidak maka akan menjadi sangat bising dengan cepat.
    Potong # menu sisi dan # elemen konten utama, dan rekatkan ke file parsial yang terpisah. Di dalam direktori halaman membuat direktori indeks, dan di dalam direktori membuat file parsial yang sesuai dengan elemen. File akan terlihat seperti ini:

    Render file-file parsial di dalam template halaman rumah. File akan terlihat seperti ini:

    Komit perubahan.

    git add -A
    git commit -m "Membagi konten templat beranda menjadi sebagian"

    Di dalam parsial _side_menu.html.erb tambahkan daftar tautan, sehingga file tersebut akan terlihat seperti ini:

    Daftar yang tidak disusun ditambahkan. Di dalam daftar kami membuat parsial lain dengan tautan. Tautan-tautan itu akan tersedia untuk semua pengguna, tidak peduli apakah itu masuk atau tidak. Buat file parsial ini dan tambahkan tautan.

    Di dalam direktori indeks buat direktori side_menu:

    tampilan / halaman / indeks / side_menu

    Di dalam direktori, buat _no_login_required_links.html.erb parsial dengan kode berikut:

    Di sini kami hanya menambahkan tautan ke cabang posting tertentu. Jika Anda bertanya-tanya bagaimana kita memiliki jalur, seperti hobby_posts_path, dll., Lihat pada route.rbfile. Sebelumnya kami telah menambahkan rute pengumpulan bersarang di dalam sumber daya: postsdeclaration.

    Jika Anda memperhatikan atribut elemen i, Anda akan melihat kelas fa. Dengan kelas-kelas itu kami mendeklarasikan ikon Font Awesome. Kami belum menyiapkan perpustakaan ini. Untungnya, sangat mudah diatur. Di dalam elemen kepala file application.html.erb utama, tambahkan baris berikut

    Menu samping harus ada sekarang.

    Komit perubahan.

    git add -A
    git commit -m "Tambahkan tautan ke menu samping halaman beranda"

    Pada layar yang lebih kecil, di mana lebarnya antara 767px dan 1000px, wadah bootstrap terlihat tidak menyenangkan, terlihat terlalu terkompresi. Jadi rentangkan di antara lebar itu. Di dalam file mobile.scss, tambahkan kode berikut:

    Lakukan perubahan.

    git add -A
    git commit -m "set .container width menjadi 100%
    ketika lebar viewport adalah antara 767px dan 1000px "

    Halaman cabang

    Jika Anda mencoba mengklik salah satu tautan menu samping itu, Anda akan mendapatkan kesalahan. Kami belum membuat tindakan di dalam PostsController atau kami membuat template untuk itu.

    Di dalam PostsController, tentukan hobi, belajar, dan aksi tim.

    Di dalam setiap tindakan, metode posts_for_branch disebut. Metode ini akan mengembalikan data untuk halaman tertentu, tergantung pada nama tindakan. Tentukan metode di dalam ruang lingkup pribadi.

    Dalam variabel instance @categories kami mengambil semua kategori untuk cabang tertentu. Yaitu. jika Anda membuka halaman cabang hobi, semua kategori yang termasuk dalam cabang hobi akan diambil.

    Untuk mendapatkan dan menyimpan posting di dalam variabel instance @posts, metode get_posts digunakan dan kemudian dirantai dengan metode paginate. Metode paginate berasal dari permata will_paginate. Mari kita mulai dengan mendefinisikan metode get_posts. Di dalam lingkup pribadi PostsController tambahkan:

    Saat ini metode get_posts hanya mengambil 30 tulisan, tidak spesifik untuk apa pun, sehingga kami bisa melanjutkan dan fokus pada pengembangan lebih lanjut. Kami akan kembali ke metode ini dalam waktu dekat.

    Tambahkan permata will_paginate untuk dapat menggunakan pagination.

    gem 'will_paginate', '~> 3.1.0'

    Lari

    bundel instal

    Yang kami lewatkan sekarang hanyalah templat. Mereka akan mirip dengan semua cabang, jadi alih-alih mengulang kode, di dalam setiap cabang itu, buat parsial dengan struktur umum untuk cabang. Di dalam direktori posting buat file _branch.html.erb.

    Pertama, Anda melihat variabel page_title dicetak pada halaman. Kami akan meneruskan variabel ini sebagai argumen ketika kami akan me-render bagian _branch.html.erb. Selanjutnya, sebagian _create_new_post dirender untuk menampilkan tautan, yang akan mengarah ke halaman, di mana pengguna dapat membuat posting baru. Buat file parsial ini di dalam direktori branch baru:

    Di sini kita akan menggunakan metode helper create_new_post_partial_path untuk menentukan file parsial mana yang akan di-render. Di dalam file posts_helper.rb, terapkan metode:

    Juga buat dua parsial yang sesuai di dalam direktori create_new_postdirectory baru:

    Selanjutnya, di dalam file _branch.html.erb kami membuat daftar kategori. Buat file parsial _categories.html.erb:

    Di dalam file, kami memiliki metode pembantu all_categories_button_partial_path yang menentukan file parsial mana yang akan di-render. Tetapkan metode ini di dalam file posts_helper.rb:

    Semua kategori akan dipilih secara default. Jika params [: kategori] kosong, itu berarti bahwa tidak ada kategori yang dipilih oleh pengguna, yang berarti bahwa saat ini nilai default semua dipilih. Buat file parsial yang sesuai:

    Metode kirim digunakan di sini untuk memanggil metode dengan menggunakan string, ini memungkinkan untuk menjadi fleksibel dan memanggil metode secara dinamis. Dalam kasus kami, kami membuat jalur yang berbeda, tergantung pada tindakan pengontrol saat ini.

    Selanjutnya, di dalam file _branch.html.erb kita membuat posting dan memanggil metode pembantu no_posts_partial_path. Jika posting tidak ditemukan, metode akan menampilkan pesan.

    Di dalam posts_helper.rb tambahkan metode helper:

    Di sini saya menggunakan operator ternary, jadi kodenya terlihat sedikit lebih bersih. Jika ada posting, saya tidak ingin menampilkan pesan apa pun. Karena Anda tidak dapat meneruskan string kosong ke metode render, saya meneruskan jalur ke sebagian kosong, pada saat saya tidak ingin membuat apa pun.

    Buat direktori bersama di dalam tampilan dan kemudian buat parsial kosong:

    views / shared / _empty_partial.html.erb

    Sekarang buat parsial _no_posts.html.erb untuk pesan di dalam direktori branch.

    Akhirnya, kami menggunakan metode will_paginate dari permata untuk membagi posting menjadi beberapa halaman jika ada banyak posting.

    Buat template untuk hobi, belajar, dan aksi tim. Di dalamnya kita akan membuat file parsial _branch.html.erb dan meneruskan variabel lokal tertentu.

    Jika Anda pergi ke salah satu halaman cabang itu, Anda akan melihat sesuatu seperti ini

    Juga jika Anda gulir ke bawah, Anda akan melihat bahwa sekarang kami memiliki pagination

    Kami telah melakukan banyak pekerjaan untuk membuat halaman cabang ini. Komit perubahan

    git add -A
    git commit -m "Buat halaman cabang untuk posting tertentu
    - Di dalam PostsController, tentukan hobi, belajar, dan aksi tim.
      Tentukan metode posts_for_branch dan sebut di dalam tindakan ini
    - Tambahkan permata will_paginate
    - Buat file parsial _branch.html.erb
    - Buat file parsial _create_new_post.html.erb
    - Tetapkan metode pembantu create_new_post_partial_path
    - Buat file parsial _signed_in.html.erb
    - Buat file parsial _not_signed_in.html.erb
    - Buat file parsial _categories.html.erb
    - Tetapkan metode penolong all_categories_button_partial_path
    - Buat file parsial _all_selected.html.erb
    - Buat file parsial _all_not_selected.html.erb
    - Tetapkan metode pembantu no_posts_partial_path
    - Buat file parsial _no_posts.html.erb
    - Buat file template hobby.html.erb
    - Buat file template study.html.erb
    - Buat file template team.html.erb "

    Spesifikasi

    Tutupi metode pembantu dengan spesifikasi. File posts_helper_spec.rb akan terlihat seperti ini:

    Sekali lagi, spesifikasi cukup sederhana di sini. Saya menggunakan metode rintisan untuk menentukan nilai pengembalian metode. Untuk mendefinisikan params, saya memilih controller dan cukup mendefinisikannya seperti ini controller.params [: param_name]. Dan akhirnya, saya menetapkan variabel instan dengan menggunakan metode assign.

    Komit perubahan

    git add -A
    git commit -m "Tambahkan spesifikasi untuk metode PostsHelper"

    Perubahan desain

    Di halaman cabang ini kami ingin memiliki desain posting yang berbeda. Di halaman rumah kami memiliki desain kartu. Di halaman cabang mari kita buat desain daftar, sehingga pengguna dapat melihat lebih banyak posting dan menjelajahinya lebih efisien.

    Di dalam direktori posting, buat direktori posting dengan _home_page.html.erbpartial di dalamnya.

    posting / posting / _home_page.html.erb

    Potong konten parsial _post.html.erb dan rekatkan di dalam file parsial _home_page.html.erb. Di dalam file parsial _post.html.erb tambahkan baris kode berikut:

    Di sini kita memanggil metode helper post_format_partial_path untuk memutuskan desain posting mana yang akan di-render, tergantung pada path saat ini. Jika pengguna ada di beranda, render desain pos untuk beranda. Jika pengguna ada di halaman cabang, render desain posting untuk halaman cabang. Itu sebabnya kami memotong konten file _post.html.erb menjadi file _home_page.html.erb.

    Di dalam direktori posting, buat file _branch_page.html.erb baru dan tempel kode ini untuk menentukan desain posting untuk halaman cabang.

    Untuk memutuskan file parsial mana yang akan di-render, tentukan metode post_format_partial_pathhelper di dalam posts_helper.rb

    Metode helper post_format_partial_path tidak akan tersedia di beranda, karena kami membuat pos di dalam templat beranda, yang dimiliki oleh pengontrol yang berbeda. Untuk memiliki akses ke metode ini, di dalam templat laman beranda, sertakan PostsHelper di dalam ApplicationHelper

    termasuk PostsHelper

    Spesifikasi

    Tambahkan spesifikasi untuk metode pembantu post_format_partial_path:

    Komit perubahan

    git add -A
    git commit -m "Tambahkan spesifikasi untuk metode pembantu post_format_partial_path"

    CSS

    Jelaskan gaya tulisan di halaman cabang dengan CSS. Di dalam direktori posts, buat file sheet style branch_page.scss baru:

    Di dalam base / default.scss tambahkan:

    Untuk memperbaiki masalah gaya pada perangkat yang lebih kecil, di dalam responsif / mobile.scss tambahkan:

    Sekarang halaman cabang akan terlihat seperti ini:

    Komit perubahan.

    git add -A
    git commit -m "Jelaskan gaya posting di halaman cabang
    - Buat file branch_page.scss dan tambahkan CSS
    - Tambahkan CSS ke file default.scss
    - Tambahkan CSS ke file mobile.scss "

    Bilah pencarian

    Kami ingin tidak hanya dapat menelusuri posting, tetapi juga mencari yang spesifik. Di dalam file parsial _branch.html.erb, di atas baris kategori, tambahkan:

    Buat file parsial _search_form.html.erb di dalam direktori cabang dan tambahkan kode berikut di dalam:

    Di sini, dengan metode kirim, kami secara dinamis membuat jalur ke tindakan PostsController tertentu, tergantung pada cabang saat ini. Kami juga mengirim bidang data tambahan untuk kategori jika kategori tertentu dipilih. Jika pengguna telah memilih kategori tertentu, hanya hasil pencarian dari kategori itu yang akan dikembalikan.

    Tentukan metode pembantu kategori_field_partial_path di dalam posts_helper.rb

    Buat file parsial _category_field.html.erb dan tambahkan kode:

    Untuk memberikan bentuk pencarian gaya, tambahkan CSS ke file branch_page.scss:

    Formulir pencarian, di halaman cabang, akan terlihat seperti ini sekarang

    Komit perubahan

    git add -A
    git commit -m "Tambahkan formulir pencarian di halaman cabang
    - Berikan formulir pencarian di dalam _branch.html.erb
    - Buat file parsial _search_form.html.erb
    - Tetapkan metode pembantu kategori_field_partial_path di PostsHelper
    - Buat file parsial _category_field.html.erb
    - Tambahkan CSS untuk formulir pencarian di branch_page.scss "

    Saat ini formulir kami tidak terlalu berfungsi. Kami dapat menggunakan beberapa permata untuk mencapai fungsionalitas pencarian, tetapi data kami tidak rumit, sehingga kami dapat membuat mesin pencari sederhana kami sendiri. Kami akan menggunakan cakupan di dalam model Pos untuk membuat kueri dapat ditembus dan beberapa logika kondisional di dalam pengontrol (kami akan mengekstraknya menjadi objek layanan di bagian selanjutnya untuk membuat kode lebih bersih).

    Mulailah dengan mendefinisikan cakupan di dalam model Post. Untuk pemanasan, tentukan default_scope di dalam file post.rb. Ini pesanan posting dalam urutan menurun pada tanggal pembuatan, posting terbaru ada di atas.

    Lakukan perubahan

    git add -A
    git commit -m "Tentukan default_scope untuk posting"

    Pastikan default_scope berfungsi dengan benar dengan membungkusnya dengan spec. Di dalam file post_spec.rb, tambahkan:

    Komit perubahan:

    git add -A
    git commit -m "Tambahkan spec untuk default_scope model Post"

    Sekarang mari kita buat bilah pencarian berfungsi. Di dalam posts_controller.rbr, ganti konten metode get_posts dengan:

    Seperti yang saya sebutkan sedikit sebelumnya, logika, seperti dalam tampilan, bukan tempat yang bagus untuk pengontrol. Kami ingin membersihkannya. Jadi kami akan mengekstrak logika dari metode ini di bagian mendatang.

    Seperti yang Anda lihat, ada beberapa logika kondisional yang terjadi. Bergantung pada permintaan pengguna, data akan ditanya secara berbeda menggunakan cakupan.

    Di dalam model Post, tentukan cakupan itu:

    Metode gabungan digunakan untuk meminta catatan dari tabel terkait. Juga sintaks SQL dasar digunakan untuk menemukan catatan, berdasarkan string yang disediakan.

    Sekarang jika Anda me-restart server dan kembali ke halaman cabang mana saja, bilah pencarian akan berfungsi! Juga sekarang Anda dapat memfilter posting dengan mengklik tombol kategori. Dan juga ketika Anda memilih kategori tertentu, hanya posting dari kategori yang ditanyai saat Anda menggunakan formulir pencarian.

    Komit perubahan

    git add -A
    git commit -m "Buat bilah pencarian dan filter kategori
    di halaman cabang fungsional
    - Tambahkan by_category, by_branch dan cari cakupan dalam model Post
    - Ubah metode get_posts di PostsController "

    Tutupi cakupan ini dengan spesifikasi. Di dalam konteks Lingkup file post_spec.rb tambahkan:

    Komit perubahan

    git add -A
    git commit -m "Tambahkan spesifikasi untuk model Post
    by_branch, by_category dan lingkup pencarian "

    Gulir tak terbatas

    Ketika Anda pergi ke salah satu halaman cabang ini, di bagian bawah halaman Anda melihat pagination

    Ketika Anda mengklik tautan berikutnya, itu mengarahkan Anda ke halaman lain dengan posting yang lebih lama. Alih-alih mengarahkan ke halaman lain dengan postingan lama, kami dapat membuat fungsionalitas scrolling yang tak terbatas, mirip dengan umpan Facebook dan Twitter. Anda cukup menggulir ke bawah dan tanpa pengalihan dan memuat kembali halaman, posting lama ditambahkan ke bagian bawah daftar. Anehnya, itu sangat mudah dicapai. Yang harus kita lakukan adalah menulis beberapa JavaScript. Setiap kali pengguna mencapai bagian bawah halaman, permintaan AJAX dikirim untuk mendapatkan data dari halaman berikutnya dan data itu akan ditambahkan ke bagian bawah daftar.

    Mulailah dengan mengonfigurasi permintaan AJAX dan kondisinya. Ketika pengguna melewati ambang tertentu dengan menggulir ke bawah, permintaan AJAX dipecat. Di dalam direktori javascripts / posts, buat file infinite_scroll.js baru dan tambahkan kode:

    Variabel isLoading memastikan bahwa hanya satu permintaan yang dikirimkan sekaligus. Jika saat ini ada permintaan yang sedang berlangsung, permintaan lain tidak akan dimulai.

    Pertama periksa apakah pagination ada, jika ada posting lagi untuk di render. Selanjutnya, dapatkan tautan ke halaman berikutnya, dari sinilah data akan diambil. Kemudian tetapkan ambang kapan untuk memanggil permintaan AJAX, dalam hal ini ambang adalah 60px dari bagian bawah jendela. Terakhir, jika semua kondisi berhasil dilewati, muat data dari halaman berikutnya menggunakan fungsi getScript ().

    Karena fungsi getScript () memuat file JavaScript, kita harus menentukan file mana yang akan di-render di dalam PostsController. Di dalam posts_for_branchmethod tentukan format response_to dan file mana yang akan di-render.

    Ketika controller mencoba merespons dengan file .js, theposts_pagination_pagetemplate akan diterjemahkan. File parsial ini menambahkan posting yang baru diambil ke daftar. Buat file ini untuk menambahkan posting baru dan perbarui elemen pagination.

    Buat metode pembantu update_pagination_partial_path di dalam posts_helper.rb

    Di sini metode next_page dari permata will_paginate digunakan, untuk menentukan apakah ada lagi posting untuk dimuat di masa depan atau tidak.

    Buat file parsial yang sesuai:

    Jika Anda pergi ke halaman cabang mana saja dan gulir ke bawah, tulisan lama harus ditambahkan secara otomatis ke daftar.

    Kita juga tidak perlu lagi melihat menu pagination, jadi sembunyikan dengan CSS. Di dalam file branch_page.scss tambahkan:

    Komit perubahan

    git add -A
    git commit -m "Ubah posting pagination menjadi scroll tak terbatas
    - Buat file infinite_scroll.js
    - Di dalam metode posts_for_branch di PostController, tambahkan format response_to
    - Tetapkan update_pagination_partial_path
    - Buat parsial _update_pagination.js.erb dan _remove_pagination.js.erb
    - sembunyikan elemen .infinite-scroll dengan CSS "

    Spesifikasi

    Tutup metode pembantu update_pagination_partial_path dengan spesifikasi:

    Di sini saya telah menggunakan tes ganda untuk mensimulasikan variabel instance tulisan dan metode rangkainnya next_page. Anda dapat mempelajari lebih lanjut tentang RSpec Mocks di sini.

    Komit perubahan:

    git add -A
    git commit -m "Tambahkan spesifikasi untuk update_pagination_partial_path
    metode pembantu "

    Kami juga dapat menulis spesifikasi fitur untuk memastikan bahwa posting berhasil ditambahkan, setelah Anda gulir ke bawah. Buat file infinite_scroll_spec.rb:

    Dalam file spesifikasi, semua halaman cabang dicakup. Kami memastikan bahwa fungsi ini berfungsi di ketiga halaman. Per_page adalah metode will_paginate gem. Di sini model Post dipilih dan jumlah posting default per halaman ditetapkan.

    Metode check_posts_count didefinisikan untuk mengurangi jumlah kode yang dimiliki file. Alih-alih mengulangi kode yang sama berulang-ulang dalam spesifikasi yang berbeda, kami mengekstraknya menjadi metode tunggal. Setelah halaman dikunjungi, diharapkan untuk melihat 15 posting. Kemudian metode execute_script digunakan untuk menjalankan JavaScript, yang menggulir scrollbar ke bagian bawah browser. Akhirnya, setelah gulir, diharapkan untuk melihat 15 posting tambahan. Sekarang total harus ada 30 posting di halaman.

    Komit perubahan:

    git add -A
    git commit -m "Tambahkan spesifikasi fitur untuk fungsionalitas gulir tak terbatas posting"

    Pembaruan halaman beranda

    Saat ini di beranda kami hanya dapat melihat beberapa posting acak. Ubah halaman beranda, sehingga kami dapat melihat beberapa posting dari semua cabang.

    Ganti konten file _main_content.html.erb dengan:

    Kami membuat bagian dengan posting untuk setiap cabang.

    Tentukan variabel instan di dalam tindakan indeks PagesController. Tindakannya akan terlihat seperti ini:

    Kami memiliki metode bantuan no_posts_partial_path sebelumnya, tetapi kami harus memodifikasinya sedikit dan membuatnya lebih dapat digunakan kembali. Saat ini hanya berfungsi untuk halaman cabang. Tambahkan parameter posting ke metode, sehingga akan terlihat seperti ini sekarang:

    Di sini parameter posting ditambahkan, variabel instan diubah ke variabel sederhana dan jalur parsial diubah juga. Jadi pindahkan file _no_posts.html.erbpartial dari

    posting / cabang / _no_posts.html.erb

    untuk

    pos / dibagikan / _no_posts.html.erb

    Juga di dalam file _branch.html.erb meneruskan variabel instance @posts ke metode no_posts_partial_path sebagai argumen.

    Tambahkan beberapa perubahan gaya. Di dalam file default.scss tambahkan:

    Dan di dalam home_page.scss tambahkan:

    Halaman beranda seharusnya terlihat mirip dengan ini sekarang

    Komit perubahan

    git add -A
    git commit -m "Tambahkan posting dari semua cabang di halaman rumah
    - Ubah file _main_content.html.erb
    - Tentukan variabel instan di dalam tindakan indeks PagesController
    - Ubah metode bantuan no_posts_partial_path agar lebih dapat digunakan kembali
    - Tambahkan CSS ke gaya halaman rumah "

    Obyek layanan

    Seperti yang saya sebutkan sebelumnya, jika Anda memasukkan logika ke dalam pengontrol, mereka menjadi sangat mudah dan sulit untuk diuji. Itu sebabnya merupakan ide bagus untuk mengekstrak logika dari mereka di tempat lain. Untuk melakukan itu saya menggunakan pola desain, objek layanan (layanan) menjadi lebih spesifik.

    Sekarang di dalam PostsController, kami memiliki metode ini:

    Ini memiliki banyak logika kondisional yang ingin saya hapus dengan menggunakan layanan. Pola desain objek layanan (layanan) hanyalah kelas ruby ​​dasar. Ini sangat sederhana, kami hanya meneruskan data yang ingin kami proses dan memanggil metode yang ditentukan untuk mendapatkan nilai pengembalian yang diinginkan.

    Dalam ruby ​​kami meneruskan data ke metode inisialisasi Kelas, dalam bahasa lain itu dikenal sebagai konstruktor. Dan kemudian di dalam kelas, kita hanya membuat metode yang akan menangani semua logika yang didefinisikan. Mari kita buat itu dan lihat tampilannya dalam kode.

    Di dalam direktori aplikasi, buat direktori layanan baru:

    aplikasi / layanan

    Di dalam direktori, buat file posts_for_branch_service.rb baru:

    Di sini, seperti dijelaskan di atas, itu hanya kelas ruby ​​biasa dengan metode initializem untuk menerima parameter dan metode panggilan untuk menangani logika. Kami mengambil logika ini dari metode get_posts.

    Sekarang cukup buat objek baru dari kelas ini dan panggil metode panggilan di dalam metode get_posts. Metode akan terlihat seperti ini sekarang:

    Komit perubahan:

    git add -A
    git commit -m "Buat objek layanan untuk mengekstrak logika
    dari metode get_posts "

    Spesifikasi

    Satu hal yang beruntung tentang pola desain, seperti layanan, adalah mudah untuk menulis unit test untuknya. Kita cukup menulis spesifikasi untuk metode panggilan dan menguji setiap kondisinya.

    Di dalam direktori spec buat direktori layanan baru:

    spek / layanan

    Di dalam direktori buat file baru posts_for_branch_service_spec.rb

    Di bagian atas file, file posts_for_branch_service.rb dimuat dan kemudian masing-masing kondisi metode panggilan diuji.

    Komit perubahan

    git add -A
    git commit -m "Tambahkan spesifikasi untuk PostsForBranchService"

    Buat posting baru

    Sampai sekarang posting dibuat secara artifisial, dengan menggunakan biji. Mari menambahkan antarmuka pengguna untuk itu, sehingga pengguna dapat membuat posting.

    Di dalam file posts_controller.rb tambahkan baru dan buat tindakan.

    Di dalam tindakan baru, kami mendefinisikan beberapa variabel instan untuk formulir untuk membuat posting baru. Di dalam variabel instance @categories, kategori untuk cabang tertentu disimpan. Variabel instance @post menyimpan objek posting baru, ini diperlukan untuk formulir Rails.

    Di dalam variabel instance @post buat aksi, kami membuat Postobject baru dan mengisinya dengan data, menggunakan metode post_params. Tetapkan metode ini dalam ruang lingkup pribadi:

    Metode izin digunakan untuk membuat atribut daftar putih objek, jadi hanya atribut yang ditentukan ini yang boleh dilewati.

    Juga di bagian atas PostsController, tambahkan baris berikut:

    The before_action adalah salah satu filter Rails. Kami tidak ingin agar pengguna yang tidak masuk memiliki akses ke halaman tempat mereka dapat membuat posting baru. Jadi sebelum memanggil tindakan baru, metode redirect_if_not_signed_in dipanggil. Kami juga memerlukan metode ini di pengontrol lain, jadi tentukan di dalam file application_controller.rb. Juga metode untuk mengarahkan pengguna yang sudah masuk akan berguna di masa depan juga. Jadi, tentukan keduanya.

    Sekarang templat baru diperlukan, sehingga pengguna dapat membuat posting baru. Di dalam direktori posting, buat file new.html.erb:

    Buat direktori baru dan file parsial _post_form.html.erb di dalamnya:

    Bentuknya cukup mudah. Atribut bidang didefinisikan dan metode collection_select digunakan untuk memungkinkan untuk memilih salah satu kategori yang tersedia.

    Komit perubahan

    git add -A
    git commit -m "Buat UI untuk membuat posting baru
    - Di dalam PostsController:
      mendefinisikan tindakan baru dan membuat
      tentukan metode post_params
      tentukan filter before_action
    - Di dalam ApplicationController:
      mendefinisikan metode redirect_if_not_signed_in
      mendefinisikan metode redirect_if_signed_in
    - Buat template baru untuk posting "

    Kita dapat menguji apakah formulir berfungsi dengan menulis spesifikasi. Mulailah dengan menulis spesifikasi permintaan, untuk memastikan bahwa kami mendapatkan respons yang benar setelah kami mengirim permintaan tertentu. Di dalam direktori spec buat beberapa direktori.

    spec / permintaan / posting

    Dan file new_spec.rb di dalamnya:

    Seperti disebutkan dalam dokumentasi, spesifikasi permintaan menyediakan pembungkus tipis di sekitar tes integrasi. Jadi, kami menguji apakah kami mendapatkan respons yang benar ketika kami mengirim permintaan tertentu. Baris Warden :: Test :: Helpers diperlukan untuk menggunakan metode login_as. Metode mencatat pengguna.

    Lakukan perubahan.

    git add -A
    git commit -m "Tambahkan spesifikasi permintaan untuk templat posting baru"

    Kami bahkan dapat menambahkan beberapa spesifikasi permintaan lagi untuk halaman yang kami buat sebelumnya.

    Di dalam direktori yang sama buat file branch_spec.rb:

    Dengan cara ini kami memeriksa bahwa semua templat halaman cabang berhasil dirender. Juga shared_examples digunakan untuk mengurangi kode berulang.

    Lakukan perubahan.

    git add -A
    git commit -m "Tambahkan spesifikasi permintaan untuk templat halaman posting cabang '"

    Kami juga dapat memastikan bahwa template acara ditampilkan dengan sukses. Di dalam direktori yang sama buat file show_spec.rb:

    Komit perubahan.

    git add -A
    git commit -m "Tambahkan spesifikasi permintaan untuk templat acara Posting"

    Untuk memastikan bahwa pengguna dapat membuat posting baru, tulis spesifikasi fitur untuk menguji formulir. Di dalam direktori fitur / posting buat file baru create_new_post_spec.rb

    Komit perubahan.

    git add -A
    git commit -m "Buat file create_new_post_spec.rb dengan spesifikasi fitur"

    Terapkan beberapa desain ke templat baru.

    Dalam direktori berikut:

    aset / stylesheet / parsial / posting

    Buat file new.scss:

    Jika Anda pergi ke templat di browser sekarang, Anda akan melihat formulir dasar

    Komit perubahan

    git add -A
    git commit -m "Tambahkan CSS ke Postingan new.html.erb template"

    Akhirnya, kami ingin memastikan bahwa semua bidang diisi dengan benar. Di dalam model Pos kami akan mendefinisikan beberapa validasi. Tambahkan kode berikut ke Postmodel:

    Komit perubahan.

    git add -A
    git commit -m "Tambahkan validasi ke model Post"

    Tutupi validasi ini dengan spesifikasi. Buka file spesifikasi model Posting:

    spec / model / post_spec.rb

    Kemudian tambahkan:

    Komit perubahan.

    git add -A
    git commit -m "Tambahkan spesifikasi untuk validasi model Post"

    Gabungkan cabang specific_branches dengan master

    git checkout -b master
    git menggabungkan specific_branches
    cabang git -D specific_branches

    Pesan singkat

    Pengguna dapat mempublikasikan posting dan membaca posting pengguna lain, tetapi mereka tidak memiliki kemampuan untuk berkomunikasi satu sama lain. Kami dapat membuat sistem kotak surat sederhana, yang akan jauh lebih mudah dan lebih cepat untuk dikembangkan. Tapi itu cara yang sangat tua untuk berkomunikasi dengan seseorang. Komunikasi waktu nyata jauh lebih menarik untuk dikembangkan dan nyaman digunakan.

    Untungnya, Rails memiliki Kabel Tindakan yang membuat implementasi fitur waktu nyata relatif mudah. Konsep inti di balik Kabel Tindakan adalah bahwa ia menggunakan Protokol WebSockets alih-alih HTTP. Dan konsep inti dari WebSockets adalah membangun koneksi klien-server dan membuatnya tetap terbuka. Ini berarti bahwa tidak perlu memuat ulang halaman untuk mengirim dan menerima data tambahan.

    Percakapan pribadi

    Tujuan bagian ini adalah untuk membuat fitur kerja yang memungkinkan untuk melakukan percakapan pribadi antara dua pengguna.

    Beralih ke cabang baru

    git checkout -B private_conversation

    Model penempatan nama

    Mulailah dengan mendefinisikan model yang diperlukan. Kami membutuhkan dua model yang berbeda untuk saat ini, satu untuk percakapan pribadi dan lainnya untuk pesan pribadi. Kami bisa menamainya PrivateConversation dan PrivateMessage, tetapi Anda dapat dengan cepat menemukan sedikit masalah. Sementara semuanya akan bekerja dengan baik, bayangkan bagaimana direktori model akan mulai terlihat setelah kita membuat lebih banyak model dengan awalan nama yang mirip. Direktori akan menjadi sangat sulit dikelola dalam waktu singkat.

    Untuk menghindari struktur kacau di dalam direktori, kita dapat menggunakan teknik namespacing.

    Mari kita lihat bagaimana tampilannya. Model biasa untuk percakapan pribadi akan disebut PrivateConversation dan file-nya akan disebut private_conversation.rb, dan disimpan di dalam direktori models

    models / private_conversation.rb

    Sementara itu, versi namespaced akan disebut Private :: Conversation. File tersebut akan disebut conversation.rb dan terletak di dalam direktori privated

    model / pribadi / percakapan.rb

    Bisakah Anda melihat bagaimana ini mungkin berguna? Semua file dengan awalan pribadi akan disimpan di dalam direktori pribadi, alih-alih terkumpul di dalam direktori model utama dan membuatnya sulit dibaca.

    Seperti biasanya, Rails membuat proses pengembangan menyenangkan. Kami dapat membuat model dengan spasi nama dengan menentukan direktori yang ingin kami masukkan modelnya.

    Untuk membuat Private namespaced :: Model percakapan jalankan perintah berikut:

    rel g model pribadi / percakapan

    Juga buat model Pribadi :: Pesan:

    rel g model pribadi / pesan

    Jika Anda melihat direktori models, Anda akan melihat file private.rb. Ini diperlukan untuk menambahkan awalan ke nama tabel database, sehingga model dapat dikenali. Secara pribadi saya tidak suka menyimpan file-file itu di dalam direktori models, saya lebih suka untuk menentukan nama tabel di dalam model itu sendiri. Untuk menentukan nama tabel di dalam model, Anda harus menggunakan self.table_name = dan memberikan nama tabel sebagai string. Jika Anda memilih untuk menentukan nama tabel database dengan cara ini, seperti yang saya lakukan, maka model akan terlihat seperti ini:

    File private.rb, di dalam direktori models, tidak diperlukan lagi, Anda dapat menghapusnya.

    Seorang pengguna akan dapat memiliki banyak percakapan pribadi dan percakapan akan memiliki banyak pesan. Tetapkan asosiasi ini di dalam model:

    Di sini metode class_name digunakan untuk mendefinisikan nama model terkait. Ini memungkinkan untuk menggunakan nama khusus untuk asosiasi kami dan memastikan bahwa model yang diberi nama spasi dikenali. Kasus penggunaan lain dari class_namemethod adalah membuat hubungan dengan dirinya sendiri, ini berguna ketika Anda ingin membedakan data model yang sama dengan membuat semacam hierarki atau struktur serupa.

    Foreign_key digunakan untuk menentukan kolom nama asosiasi di tabel database. Kolom data dalam tabel hanya dibuat di sisi milik_toasosiasi, tetapi untuk membuat kolom dikenali, kami harus mendefinisikan foreign_key dengan nilai yang sama pada kedua model.

    Percakapan pribadi akan dilakukan antara dua pengguna, di sini kedua pengguna ini adalah pengirim dan penerima. Kami bisa memberi nama mereka seperti user1 dan user2. Tetapi berguna untuk mengetahui siapa yang memulai percakapan, jadi pengirim di sini adalah pencipta percakapan.

    Tentukan tabel data di dalam file migrasi:

    Tabel private_conversations akan menyimpan ids pengguna, ini diperlukan agar Own_to dan has_many asosiasi berfungsi dan tentu saja untuk membuat percakapan antara dua pengguna.

    Di dalam kolom data tubuh, konten pesan akan disimpan. Alih-alih menambahkan indeks dan kolom id untuk membuat hubungan antara dua model berfungsi, di sini kami menggunakan metode referensi, yang menyederhanakan implementasinya.

    jalankan file migrasi untuk membuat tabel di dalam database pengembangan

    rails db: bermigrasi

    Komit perubahan

    git add -A
    git commit -m "Buat Pribadi :: Percakapan dan Pribadi :: model pesan
    - Tentukan asosiasi antara Pengguna, Pribadi :: Percakapan
      dan Pribadi :: Model pesan
    - Tentukan tabel private_conversations dan private_messages "

    Jendela percakapan pribadi non-real time

    Kami memiliki tempat untuk menyimpan data untuk percakapan pribadi, tetapi cukup banyak. Di mana kita harus mulai dari sekarang? Seperti yang disebutkan di bagian sebelumnya, secara pribadi saya suka membuat sisi visual dasar fitur dan kemudian menulis beberapa logika untuk membuatnya berfungsi. Saya suka pendekatan ini karena ketika saya memiliki elemen visual, yang ingin saya buat fungsional, lebih jelas apa yang ingin saya capai. Setelah Anda memiliki antarmuka pengguna, lebih mudah untuk mulai memecah masalah menjadi langkah-langkah yang lebih kecil, karena Anda tahu apa yang harus terjadi setelah peristiwa tertentu. Lebih sulit memprogram sesuatu yang belum ada.

    Untuk mulai membangun antarmuka pengguna untuk percakapan pribadi, buat pengontrol Pribadi :: Conversations. Setelah saya namespace sesuatu di aplikasi, saya ingin tetap konsisten dan namespace semua bagian terkait lainnya juga. Ini memungkinkan untuk memahami dan menavigasi melalui kode sumber secara lebih intuitif.

    rel g controller pribadi / percakapan

    Generator rel cukup manis. Itu menciptakan model namespaced dan tampilan namespaced, semuanya siap untuk pengembangan.

    Buat percakapan baru

    Kami membutuhkan cara untuk memulai percakapan baru. Dalam hal aplikasi kami, masuk akal jika Anda ingin menghubungi seseorang yang memiliki minat serupa dengan Anda. Tempat yang nyaman untuk fungsi ini ada di dalam halaman satu tulisan.

    Di dalam templat posting / show.html.erb, buat formulir untuk memulai percakapan baru. Di bawah baris

    <% = @ post.content%>

    tambahkan:

    Tentukan metode helper di dalam posts_helper.rb

    Tambahkan spesifikasi untuk metode pembantu:

    Buat direktori pertunjukan dan file parsial yang sesuai:

    Tentukan metode helper leave_message_partial_path di dalam posts_helper.rb

    Tambahkan spesifikasi untuk metode ini

    Kami akan mendefinisikan variabel instance @message_has_been_sent di dalam PostsController hanya dalam beberapa saat, itu akan menentukan apakah pesan awal ke pengguna sudah dikirim, atau tidak.

    Buat file parsial, sesuai dengan metode helper leave_message_partial_path, di dalam direktori contact_user baru

    Sekarang konfigurasikan aksi tayangan PostsController. Di dalam aksi tambahkan

    Dalam ruang lingkup pribadi controller, tentukan metode conversation_exist?

    Metode between_users menanyakan percakapan pribadi antara dua pengguna. Tentukan sebagai ruang lingkup di dalam model Pribadi :: Conversation

    Kami harus menguji apakah ruang lingkup berfungsi. Sebelum menulis spesifikasi, tentukan pabrik private_conversation, karena kami akan membutuhkan data sampel di dalam basis data pengujian.

    Kami melihat pabrik bersarang di sini, ini memungkinkan untuk membuat pabrik dengan konfigurasi induknya dan kemudian memodifikasinya. Juga karena kita akan membuat pesan dengan pabrik private_conversation_with_messages, kita perlu mendefinisikan pabrik private_message juga

    Sekarang kita sudah siap untuk menguji lingkup between_users dengan spesifikasi.

    Tentukan tindakan buat untuk pengontrol Pribadi :: Conversations

    Di sini kami membuat percakapan antara penulis pos dan pengguna saat ini. Jika semuanya berjalan dengan baik, aplikasi akan membuat pesan, ditulis oleh pengguna saat ini, dan memberikan umpan balik dengan merender sebagian JavaScript yang sesuai.

    Buat parsial ini

    Buat rute untuk Private :: Conversations and Private :: Messagescontrollers

    Untuk saat ini kami hanya perlu beberapa tindakan, Di sinilah satu-satunya metode yang berguna. Metode namespace memungkinkan untuk dengan mudah membuat rute untuk pengontrol namespace.

    Uji keseluruhan performa formulir .contact-user dengan spesifikasi fitur

    Komit perubahan

    git add -A
    git commit -m "Di dalam postingan tambahkan formulir untuk menghubungi pengguna
    - Tetapkan metode bantuan contact_user_partial_path di PostsHelper.
      Tambahkan spesifikasi untuk metode ini
    - Buat _contact_user.html.erb dan _login_required.html.erb parsial
    - Tetapkan metode pembantu leave_message_partial_path di PostsHelper.
      Tambahkan spesifikasi untuk metode ini
    - Buat _already_in_touch.html.erb dan _message_form.html.erb
      sebagian file
    - Tetapkan @message_has_been_sent di aksi aksi PostsController
    - Tentukan ruang lingkup between_users di dalam model Pribadi :: Conversation
      Tambahkan spesifikasi untuk ruang lingkup
    - Tentukan pabrik private_conversation dan private_message
    - Tentukan rute untuk Pribadi :: Percakapan dan Pribadi :: Pesan
    - Tentukan tindakan buat di dalam Private :: Conversations
    - Buat parsial _success.js dan _fail.js
    - Tambahkan spesifikasi fitur untuk menguji keseluruhan formulir .contact-user "

    Ubah sedikit gaya formulir dengan menambahkan CSS ke file branch_page.scss

    Ketika Anda mengunjungi satu pos, formulir akan terlihat seperti ini

    Saat Anda mengirim pesan ke penulis posting, formulir itu menghilang

    Seperti itulah rasanya ketika Anda sudah berhubungan dengan pengguna

    Komit perubahan

    git add -A
    git commit -m "Tambahkan CSS ke gaya formulir .contact-user"

    Jadikan jendela percakapan

    Kami mengirim pesan dan membuat percakapan baru. Itulah satu-satunya kekuatan kita saat ini, kita tidak dapat melakukan hal lain. Sungguh kekuatan yang tidak berguna sejauh ini. Kami membutuhkan jendela percakapan untuk membaca dan menulis pesan.

    Simpan percakapan terbuka ids di dalam sesi. Ini memungkinkan percakapan tetap terbuka di aplikasi hingga pengguna menutupnya atau menghancurkan sesi.

    Di dalam Pribadi :: ConversationsController membuat panggilan aksi add_to_conversations kecuali sudah_added? metode jika percakapan berhasil disimpan. Kemudian tentukan metode dalam ruang lingkup pribadi

    Ini akan menyimpan id percakapan di dalam sesi. Dan metode private yang sudah_added? Akan memastikan bahwa id percakapan belum ditambahkan di dalam sesi.

    Dan terakhir, kita akan memerlukan akses ke percakapan di dalam tampilan, jadi konversikan variabel percakapan menjadi variabel instan.

    Sekarang kita dapat mulai membuat templat untuk jendela percakapan. Buat file parsial untuk jendela

    Di sini kita mendapatkan penerima percakapan dengan metode private_conv_recipient. Tetapkan metode pembantu di dalam Pribadi :: ConversationsHelper

    Metode oppos_user digunakan. Buka model Private :: Conversation dan tentukan metodenya

    Ini akan mengembalikan pengguna lawan dari percakapan pribadi. Pastikan metode tersebut bekerja dengan benar dengan menutupinya dengan spesifikasi

    Selanjutnya, buat sebagian file yang hilang untuk file _conversation.html.erb

    Di dalam Private :: ConversationsHelper, tentukan metode load_private_messageshelper

    Ini akan menambahkan tautan untuk memuat pesan sebelumnya. Buat file parsial yang sesuai di dalam direktori messages_list baru

    Jangan lupa untuk memastikan bahwa semuanya baik-baik saja dengan metode ini dan tulis spesifikasi untuknya

    Karena jendela percakapan akan dirender di seluruh aplikasi, itu berarti kita akan memerlukan akses ke metode Private :: ConversationsHelperhelper. Untuk memiliki akses ke semua metode ini di seluruh aplikasi, di dalam ApplicationHelper tambahkan

    termasuk Pribadi :: ConversationsHelper

    Kemudian buat file parsial yang terakhir hilang untuk formulir pesan baru percakapan

    Kami akan membuat formulir ini berfungsi sedikit kemudian.

    Sekarang mari kita membuat fitur yang setelah pengguna mengirim pesan melalui pos individu, jendela percakapan akan diberikan pada aplikasi.

    Di dalam file _success.js.erb

    posting / show / contact_user / message_form / _success.js.erb

    Menambahkan

    <% = render 'pribadi / percakapan / buka'%>

    Tujuan sebagian file ini adalah untuk menambahkan jendela percakapan ke aplikasi. Tentukan file parsial

    File parsial panggil balik ini akan digunakan kembali dalam beberapa skenario. Untuk menghindari render jendela yang sama beberapa kali, sebelum merender jendela, kami memeriksa apakah sudah ada di aplikasi. Kemudian kami memperluas jendela dan secara otomatis memfokuskan formulir pesan. Di bagian bawah file, fungsi positionChatWindows () dipanggil untuk memastikan bahwa semua jendela percakapan diposisikan dengan baik. Jika kami tidak memposisikan mereka, mereka hanya akan dirender di tempat yang sama, yang tentu saja tidak dapat digunakan.

    Sekarang di direktori aset buat file yang akan mengatur visibilitas dan posisi jendela percakapan

    Alih-alih membuat fungsi kita sendiri untuk mengatur dan mendapatkan cookie atau cara serupa untuk mengelola data antara JavaScript, kita dapat menggunakan permata gon. Penggunaan asli permata ini adalah untuk mengirim data dari sisi server ke JavaScript. Tapi saya juga merasa berguna untuk melacak variabel JavaScript di seluruh aplikasi. Instal dan atur permata dengan membaca instruksi.

    Kami melacak lebar viewport dengan pendengar acara. Ketika sebuah percakapan mendekati sisi kiri viewport, percakapan menjadi tersembunyi. Setelah ada cukup ruang kosong untuk jendela percakapan tersembunyi, aplikasi akan menampilkannya kembali.

    Pada kunjungan halaman, kami memanggil fungsi pemosisian dan visibilitas untuk memastikan bahwa semua jendela percakapan berada di posisi yang tepat.

    Kami menggunakan komponen panel bootstrap untuk memperluas dan menutup jendela percakapan dengan mudah. Secara default mereka akan diciutkan dan tidak interaktif sama sekali. Untuk menjadikannya toggleable, di dalam direktori javascripts buat file baru toggle_window.js

    Buat file conversation_window.scss baru

    aset / stylesheet / parsial / conversation_window.scss

    Dan tambahkan CSS ke jendela percakapan gaya

    Anda mungkin memperhatikan bahwa ada beberapa kelas yang belum didefinisikan dalam file HTML apa pun. Itu karena file yang akan datang, kita akan buat di direktori views, akan berbagi CSS dengan elemen HTML yang sudah ada. Alih-alih melompat-lompat ke file CSS beberapa kali setelah kami menambahkan elemen HTML kecil, saya telah menyertakan beberapa kelas, yang didefinisikan dalam elemen HTML masa depan, sekarang. Ingat, Anda selalu dapat membuka lembar gaya dan menganalisis cara kerja gaya tertentu.

    Sebelumnya kami telah menyimpan id dari percakapan yang baru dibuat di dalam sesi. Saatnya mengambil keuntungan darinya dan membuka jendela percakapan hingga pengguna menutupnya atau menghancurkan sesi. Di dalam ApplicationController, tentukan filter

    before_action: opens_conversations_windows

    dan kemudian tentukan metode opens_conversations_windows

    Metode include digunakan untuk memasukkan data dari tabel database terkait. Dalam waktu dekat kami akan memuat pesan dari percakapan. Jika kami tidak menggunakan metode sertakan, kami tidak akan memuat rekaman pesan percakapan dengan permintaan ini. Ini akan menyebabkan masalah permintaan N +1. Jika kami tidak memuat pesan dengan kueri, kueri tambahan akan dikirimkan untuk setiap pesan. Ini akan berdampak signifikan pada kinerja aplikasi. Sekarang alih-alih 100 pertanyaan untuk 100 pesan, kami hanya memiliki satu permintaan awal untuk sejumlah pesan.

    Di dalam file application.html.erb, tepat di bawah metode hasil, tambahkan

    Buat direktori aplikasi baru dan di dalam membuat file parp _private_conversations_windows.html.erb

    Sekarang ketika kita menelusuri aplikasi, kita melihat percakapan terbuka sepanjang waktu, tidak peduli halaman apa yang kita masuki.

    Komit perubahan

    git add -A
    git commit -m "Berikan jendela percakapan pribadi pada aplikasi
    - Tambahkan percakapan terbuka ke sesi
    - Buat file _conversation.html.erb di dalam private / percakapan
    - Tentukan metode pembantu private_conv_recipient dalam
      pribadi / conversation_helper.rb
    - Tetapkan metode yang dilawan_user dalam model Pribadi :: Percakapan
      dan tambahkan spesifikasi untuk itu
    - Buat file _heading.html.erb dan _messages_list.html.erb
      di dalam private / percakapan / percakapan
    - Tentukan load_private_messages secara pribadi / conversation_helper.rb
      dan tambahkan spesifikasi untuk itu
    - Buat _new_message_form.html.erb di dalam
      pribadi / percakapan / percakapan
    - Buat pribadi / percakapan _open.js.erbinside
    - Buat position_and_visibility.js di dalam
      aset / javascripts / percakapan
    - Buat percakapan_window.scss di dalam
      aset / stylesheet / sebagian
    - Tetapkan metode pembantu dengan opens_conversations_windows di
      ApplicationController
    - Buat _private_conversations_windows.html.erb di dalam
      tata letak / aplikasi

    Tutup percakapan

    Tombol tutup percakapan belum berfungsi. Tetapi kami memiliki segalanya siap untuk membuatnya begitu. Di dalam Private :: ConversationsController, tentukan tindakan tutup

    Ketika tombol tutup diklik, tindakan ini akan dipanggil. Tindakan menghapus id percakapan dari sesi dan kemudian merespons dengan file parsial js, identik dengan nama tindakan. Buat file parsial

    Ini menghapus jendela percakapan dari DOM dan mengatur ulang posisi jendela percakapan lainnya.

    Komit perubahan

    git add -A
    git commit -m "Jadikan tombol tutup percakapan berfungsi
    - Tetapkan tindakan dekat di dalam Private :: ConversationsController
    - Buat close.js.erb di dalam private / percakapan "

    Render pesan

    Saat ini dalam daftar pesan kita melihat ikon memuat tanpa pesan. Itu karena kami belum membuat template untuk pesan. Di dalam direktori views / privated, buat direktori pesan. Di dalam direktori, buat file baru

    Metode helper private_message_date_check memeriksa apakah pesan ini ditulis pada hari yang sama dengan pesan sebelumnya. Jika tidak, itu membuat garis tambahan dengan tanggal baru. Tentukan metode pembantu di dalam Pribadi :: MessagesHelper

    Di dalam ApplicationHelper, sertakan Private :: MessagesHelper, sehingga kami dapat mengaksesnya di seluruh aplikasi

    termasuk Private :: MessagesHelper

    Tulis spesifikasi untuk metode ini. Buat file messages_helper_spec.rb baru

    Di dalam direktori pesan baru, buat file _new_date.html.erb

    Kemudian di dalam file _message.html.erb, kami telah mengirim_or_received dan seen_or_unseen metode pembantu. Mereka mengembalikan kelas yang berbeda dalam kasus yang berbeda. Tentukan mereka di dalam Private :: MessagesHelper

    Tulis spesifikasi untuk mereka:

    Sekarang kita membutuhkan komponen untuk memuat pesan ke dalam daftar pesan. Komponen ini juga akan menambahkan pesan sebelumnya di bagian atas daftar, ketika pengguna menggulir ke atas, hingga tidak ada pesan yang tersisa dalam percakapan. Kami akan memiliki mekanisme gulir yang tak terbatas untuk pesan, mirip dengan yang kami miliki di halaman posting.

    Di dalam direktori views / private / messages buat file _load_more_messages.js.erb:

    Variabel instance @id_type menentukan jenis percakapan. Di masa depan kita akan dapat membuat tidak hanya percakapan pribadi, tetapi juga grup. Ini mengarah ke metode pembantu umum dan file parsial antara kedua jenis.

    Di dalam direktori helpers, buat direktori bersama. Buat file messages_helper.rb dan tentukan metode pembantu

    Sejauh ini metode ini cukup bodoh. Itu hanya mengembalikan jalur sebagian. Kami akan memberikan beberapa intelijen untuk nanti, ketika kami akan membangun fitur tambahan untuk sistem pesan kami. Saat ini kami tidak akan memiliki akses ke metode pembantu, didefinisikan dalam file ini, dalam file lain apa pun. Kita harus memasukkannya ke dalam file pembantu lainnya. Di dalam
    Pribadi :: MessagesHelper, sertakan metode dari Shared :: MessagesHelper

    memerlukan 'shared / messages_helper'
    termasuk Shared :: MessagesHelper

    Di dalam direktori bersama, buat beberapa direktori baru:

    shared / load_more_messages / window

    Kemudian buat file _append_messages.js.erb:

    Kode ini berhati-hati agar pesan sebelumnya ditambahkan ke bagian atas daftar pesan. Kemudian tentukan yang lain, sekali lagi, bukan metode helper yang menarik dan menarik di dalam Private :: MessagesHelper

    Buat direktori yang sesuai di dalam direktori private / messages dan buat file _add_link_to_messages.js.erb

    File ini akan memperbarui tautan yang memuat pesan sebelumnya. Setelah pesan sebelumnya ditambahkan, tautan diganti dengan tautan yang diperbarui untuk memuat pesan sebelumnya yang lebih lama.

    Sekarang kita memiliki semua sistem ini, bagaimana pesan sebelumnya ditambahkan ke bagian atas daftar pesan. Tetapi, jika kami mencoba membuka aplikasi dan membuka jendela percakapan, kami tidak akan melihat pesan yang dirender. Mengapa? Karena tidak ada yang memicu tautan untuk memuat pesan sebelumnya. Saat kami membuka jendela percakapan untuk pertama kalinya, kami ingin melihat pesan terbaru. Kami dapat memprogram jendela percakapan dengan cara yang setelah diperluas, memuat lebih banyak tautan pesan dipicu, untuk memuat pesan terbaru. Ini memulai siklus pertama menambahkan pesan sebelumnya dan mengganti memuat lebih banyak tautan pesan dengan yang diperbarui.

    Di dalam file toggle_window.js perbarui fungsi sakelar untuk melakukan persis seperti yang dijelaskan di atas

    Buat pengendali acara, jadi setiap kali pengguna menggulir ke atas dan mencapai hampir bagian atas daftar pesan, tautan memuat lebih banyak pesan akan dipicu.

    Ketika memuat lebih banyak tautan pesan akan diklik, tindakan indeks Pribadi :: MessagesController dipanggil. Itulah jalannya, kami mendefinisikan untuk memuat tautan pesan sebelumnya. Buat pengontrol dan indeksaksinya

    Di sini kami menyertakan metode dari modul Pesan. Modul disimpan di dalam direktori keprihatinan. ActiveSupport :: Concern adalah salah satu tempat, tempat Anda dapat menyimpan modul yang nantinya dapat Anda gunakan di kelas. Dalam kasus kami, kami menyertakan metode tambahan untuk pengontrol kami dari modul. Metode get_messages berasal dari modul Pesan. Alasan mengapa disimpan di dalam modul adalah bahwa kita akan menggunakan metode yang sama persis di pengontrol lain beberapa saat kemudian. Untuk menghindari duplikasi kode, kami membuat metode ini lebih dapat digunakan kembali.

    Saya telah melihat beberapa orang mengeluh tentang ActiveSupport :: Masalah dan menyarankan untuk tidak menggunakannya sama sekali. Saya menantang orang-orang itu untuk melawan saya di segi delapan. Saya bercanda: D. Ini adalah aplikasi independen dan kami dapat membuat aplikasi kami sesuka kami. Jika Anda tidak menyukai masalah, ada banyak cara lain untuk membuat metode yang dapat digunakan kembali.

    Buat modul

    Di sini kita memerlukan active_support / concern dan kemudian memperluas modul kami dengan ActiveSupport :: Concern, jadi Rails tahu bahwa itu adalah masalah.

    Dengan metode konstanta kami secara dinamis membuat nama konstan dengan memasukkan nilai string. Kami memanggil model secara dinamis. Metode yang sama akan digunakan untuk Pribadi :: Conversation dan Group :: Conversationmodels.

    Setelah metode get_messages menetapkan semua variabel instance yang diperlukan, indexaction merespons dengan file parsial _load_more_messages.js.erb.

    Akhirnya, setelah pesan ditambahkan ke bagian atas daftar pesan, kami ingin menghapus ikon pemuatan dari jendela percakapan. Di bagian bawah file _load_more_messages.js.erb tambahkan

    <% = render remove_link_to_messages%>

    Sekarang tentukan metode helper remove_link_to_messages di dalam Shared :: MessagesHelper

    Cobalah untuk menulis spesifikasi untuk metode Anda sendiri.

    Buat file parsial _remove_more_messages_link.js.erb

    Sekarang dalam suatu kasus, di mana tidak ada pesan sebelumnya yang tersisa, tautan ke pesan sebelumnya dan ikon pemuatan akan dihapus.

    Jika Anda mencoba menghubungi pengguna sekarang, jendela percakapan akan diberikan dengan pesan, Anda mengirim, di dalam. Kami dapat membuat pesan melalui permintaan AJAX.

    Komit perubahan.

    git add -A
    git commit -m "Render pesan dengan AJAX
    - Buat _message.html.erb di dalam private / messages
    - Tetapkan metode pembantu pribadi_message_date_check di
      Pribadi :: PesanHelper dan tulis spesifikasi untuknya
    - Buat _new_date.html.erb di dalam private / messages / message
    - Tetapkan metode pembantu yang telah dikirim dan diterima
      Pribadi :: PesanHelper dan tulis spesifikasi untuknya
    - Buat _load_more_messages.js.erb di dalam private / messages
    - Tentukan metode bantuan append_previous_messages_partial_path di
      Dibagikan :: PesanHelper
    - Buat bagian dalam _append_messages.js.erb
      shared / load_more_messages / window
    - Tetapkan replace_link_to_private_messages_partial_path di
      Pribadi :: PesanHelper
    - Buat bagian dalam _add_link_to_messages.js.erb
      private / messages / load_more_messages / window
    - Buat toggle_window.js di dalam javascripts / percakapan
    - Buat bagian dalam messages_infinite_scroll.js
      aset / javascripts / percakapan
    - Tetapkan tindakan indeks di dalam Pribadi :: MessagesController
    - Buat messages.rb di dalam pengontrol / kekhawatiran
    - Tetapkan sebuah remove_link_to_messages di dalam helpers / shared
    - Buat bagian dalam _remove_more_messages_link.js.erb
      shared / load_more_messages / window "

    Fungsionalitas waktu nyata dengan Kabel Aksi

    Jendela percakapan sudah terlihat cukup rapi. Dan mereka juga memiliki beberapa fungsi yang manis. Tetapi, mereka kekurangan fitur yang paling penting - kemampuan untuk mengirim dan menerima pesan secara real time.

    Seperti yang telah dibahas sebelumnya secara singkat, Kabel Tindakan akan memungkinkan kami untuk mencapai fitur waktu nyata yang diinginkan untuk percakapan. Anda harus membaca dokumentasi untuk mengetahui cara kerjanya.

    Hal pertama yang harus kita lakukan adalah membuat koneksi WebSocket dan berlangganan saluran tertentu. Untungnya, koneksi WebSocket sudah dicakup oleh konfigurasi Rails default. Di dalam direktori app / channels / application_cable Anda melihat file channel.rb dan connection.rb. Kelas Koneksi menangani otentikasi dan kelas Saluran adalah kelas induk untuk menyimpan logika bersama antara semua saluran.

    Koneksi diatur secara default. Sekarang kita perlu saluran percakapan pribadi untuk berlangganan. Buat saluran dengan spasi nama

    rel g saluran pribadi / percakapan

    Di dalam Private :: ConversationChannel yang dihasilkan, kami melihat metode berlangganan dan berhenti berlangganan. Dengan metode berlangganan, pengguna membuat koneksi ke saluran. Dengan metode berhenti berlangganan, pengguna jelas menghancurkan koneksi.

    Perbarui metode tersebut:

    Di sini kami ingin pengguna memiliki saluran uniknya sendiri. Dari saluran pengguna akan menerima dan mengirim data. Karena id pengguna unik, kami membuat saluran tersebut unik dengan menambahkan id pengguna.

    Ini adalah koneksi sisi server. Sekarang kita perlu membuat koneksi di sisi klien juga.

    Untuk membuat instance koneksi di sisi klien, kita harus menulis beberapa JavaScript. Sebenarnya, Rails telah membuatnya dengan generator saluran. Arahkan ke aset / javascripts / saluran / pribadi dan secara default Rails menghasilkan file CoffeeScript. Saya akan menggunakan JavaScript di sini. Jadi, ganti nama file menjadi conversation.js dan ganti kontennya dengan:

    Mulai ulang server, buka aplikasi, masuk dan periksa log server.

    Kami mendapat koneksi. Inti dari komunikasi waktu nyata diatur. Kami memiliki koneksi klien-server yang terus-menerus terbuka. Ini berarti bahwa kita dapat mengirim dan menerima data dari server tanpa memulai kembali koneksi atau menyegarkan browser, man! Suatu hal yang sangat kuat ketika Anda memikirkannya. Mulai sekarang kita akan membangun sistem pesan di sekitar koneksi ini.

    Komit perubahan.

    git add -A
    git commit -m "Buat saluran percakapan pribadi yang unik dan berlanggananlah"

    Mari kita buat bentuk pesan baru jendela percakapan berfungsi. Di bagian bawah file aset / javascripts / saluran / pribadi / percakapan.js tambahkan fungsi ini:

    Fungsi ini akan mendapatkan nilai dari formulir pesan baru dan meneruskannya ke fungsi send_message. Fungsi send_message akan memanggil metode send_message di sisi server, yang akan menangani pembuatan pesan baru.

    Juga perhatikan, pengendali acara ada di tombol kirim, tetapi di jendela percakapan kami tidak memiliki tombol kirim yang terlihat. Itu pilihan desain. Kita harus memprogram jendela percakapan dengan cara tombol kirim dipicu ketika tombol enter diklik pada keyboard. Fungsi ini akan digunakan di masa depan oleh fitur-fitur lain, jadi buat file conversation.js di dalam direktori assets / javascripts / conversation

    Dalam file tersebut kami menjelaskan beberapa perilaku umum untuk windows percakapan. Perilaku pertama adalah menjauhkan bilah gulir dari atas, sehingga pesan sebelumnya tidak dimuat saat tidak diperlukan. Fungsi kedua memastikan bahwa tombol kirim dipicu pada klik tombol enter dan kemudian membersihkan nilai input kembali ke string kosong.

    Mulailah dengan membuat fungsi send_message di dalam objek private_conversation. Tambahkan di bawah fungsi panggilan balik yang diterima

    Ini memanggil metode send_message di sisi server dan melewati nilai pesan. Metode sisi server harus didefinisikan di dalam Saluran Pribadi :: ConversationChannel. Tentukan metode:

    Ini akan menangani pembuatan pesan baru. Parameter data, yang kita dapatkan dari argumen yang diteruskan, adalah hash bersarang. Jadi untuk mengurangi kerumitan bersarang ini menjadi satu hash, metode each_with_object digunakan.

    Jika Anda mencoba mengirim pesan baru di dalam jendela percakapan, catatan pesan baru sebenarnya akan dibuat. Itu tidak akan muncul di jendela percakapan langsung, hanya ketika Anda me-refresh situs web. Itu akan muncul, tetapi kami belum mengatur apa pun untuk menyiarkan pesan yang baru dibuat ke saluran percakapan pribadi. Kami akan mengimplementasikannya dalam beberapa saat. Tetapi sebelum kita melanjutkan dan melakukan perubahan, rekap cepat bagaimana sistem pesan saat ini bekerja.

    1. Seorang pengguna mengisi formulir pesan baru dan mengirimkan pesan
    2. Penangan acara di dalam javascripts / channels / private / conversations.js mendapatkan data jendela percakapan, id percakapan dan nilai pesan, dan memicu instance saluran pada fungsi send_message sisi klien.

    3. Fungsi send_message di sisi klien memanggil metode send_messagemet di sisi server dan meneruskan data ke sana

    4. Metode send_message di sisi klien memproses data yang disediakan dan membuat catatan Pesan Pribadi :: baru

    Komit perubahan.

    git add -A
    git commit -m "Jadikan formulir pesan baru jendela percakapan pribadi berfungsi
    - Tambahkan pengendali acara di dalam
      javascripts / channels / private / conversation.js untuk memicu tombol kirim
    - Tetapkan perilaku umum di antara jendela percakapan di dalam
      aset / javascripts / percakapan / conversation.js
    - Tentukan fungsi send_message di kedua sisi, klien dan server, "

    Siarkan pesan baru

    Setelah pesan baru dibuat, kami ingin menyiarkannya ke saluran yang sesuai. Ya, Rekaman Panggilan Balik Aktif memberi kita banyak metode panggilan balik yang berguna untuk model. Ada metode panggilan balik after_create_commit, yang berjalan setiap kali catatan model baru dibuat. Di dalam file :: model pesan Pribadi tambahkan

    Seperti yang Anda lihat, setelah pembuatan catatan, Pribadi :: MessageBroadcastJob.perform_later dipanggil. Dan apakah itu? Ini adalah pekerjaan latar belakang, menangani operasi back-end. Memungkinkan untuk menjalankan operasi tertentu kapan pun kita mau. Bisa segera setelah acara tertentu, atau dijadwalkan untuk berjalan beberapa saat kemudian setelah acara. Jika Anda tidak terbiasa dengan pekerjaan latar belakang, checkout Active Job Basics.

    Tambahkan spesifikasi untuk metode prior_message. Jika Anda akan mencoba menjalankan spesifikasi sekarang, komentari metode after_create_commit. Kami belum mendefinisikan Pribadi :: MessageBroadcastJob, jadi spesifikasi saat ini akan meningkatkan kesalahan konstan yang tidak ditentukan.

    Sekarang kita dapat membuat pekerjaan latar belakang yang akan menyiarkan pesan yang baru dibuat ke saluran percakapan pribadi.

    rails g job private / message_broadcast

    Di dalam file kita melihat metode perform. Secara default, saat Anda memanggil suatu pekerjaan, metode ini disebut. Sekarang di dalam pekerjaan, proses data yang diberikan dan disiarkan ke pelanggan saluran.

    Di sini kami memberikan pesan dan mengirimkannya ke pelanggan kedua saluran. Kami juga melewatkan beberapa pasangan nilai kunci tambahan untuk menampilkan pesan dengan benar. Jika kami mencoba mengirim pesan baru, pengguna akan menerima data, tetapi pesan itu tidak akan ditambahkan ke daftar pesan. Tidak ada perubahan yang terlihat akan dibuat.

    Ketika data disiarkan ke saluran, fungsi panggilan balik yang diterima di sisi klien dipanggil. Di sinilah kami memiliki kesempatan untuk menambahkan data ke DOM. Di dalam fungsi yang diterima tambahkan kode berikut:

    Di sini kita melihat bahwa pengirim dan penerima diperlakukan sedikit berbeda.

    // ubah gaya jendela konv saat ada pesan yang tak terlihat
    // tambahkan kelas tambahan ke jendela percakapan atau sesuatu

    Saya telah membuat ini dengan sengaja, jadi setiap kali percakapan memiliki pesan yang tidak terlihat, Anda dapat mengubah gaya jendelanya sesuka Anda. Anda dapat mengubah warna jendela, membuatnya berkedip, atau apa pun yang Anda inginkan.

    Juga ada fungsi findConv, ConvRendered, ConvMessagesVisibility. Kami akan menggunakan fungsi-fungsi ini untuk kedua jenis obrolan, pribadi dan grup.

    Buat direktori bersama:

    aset / javascripts / saluran / dibagikan

    Buat file conversation.js di dalam direktori ini.

    Seorang kurir disebutkan dalam kode cukup banyak dan kami belum memiliki kurir itu. Utusan akan menjadi cara terpisah untuk membuka percakapan. Untuk mencegah banyak perubahan kecil di masa depan, saya sudah menyertakan case dengan messenger sekarang.

    Itu saja, fungsionalitas waktu nyata harus bekerja. Baik pengguna, pengirim dan penerima, harus menerima dan ditampilkan pesan baru di DOM. Ketika kami mengirim pesan baru, kita akan melihatnya langsung ditambahkan ke daftar pesan. Tapi ada satu masalah kecil sekarang. Kami hanya memiliki satu cara untuk membuat jendela percakapan. Itu hanya diberikan saat percakapan dibuat. Kami akan menambahkan cara-cara tambahan untuk membuat jendela percakapan hanya dalam beberapa saat. Tetapi sebelum itu, mari kita rekap bagaimana data mencapai pelanggan saluran.

    1. Setelah Private :: record pesan baru dibuat, metode after_create_commitmeticu, yang memanggil pekerjaan latar belakang
    2. Pribadi :: MessageBroadcastJob memproses data yang diberikan dan menyiarkannya ke pelanggan saluran
    3. Di sisi klien, fungsi panggilan balik yang diterima dipanggil, yang menambahkan data ke DOM

    Komit perubahan.

    git add -A
    git commit -m "Siarkan pesan baru
    - Di dalam Pribadi :: Pesan menentukan metode panggilan balik after_create_comit.
    - Buat Pribadi :: MessageBroadcastJob
    - Tentukan fungsi yang diterima di dalam
      aset / javascripts / saluran / pribadi / conversation.js
    - Buat percakapan. Di dalam
      aset / javascripts / saluran / dibagikan "

    Pembaruan bilah navigasi

    Di bilah navigasi, kami akan menyajikan daftar percakapan pengguna. Ketika daftar percakapan dibuka, kami ingin melihat percakapan yang dipesan oleh pesan-pesan terbaru. Percakapan dengan pesan-pesan terbaru akan berada di bagian atas daftar. Daftar ini harus dapat diakses di seluruh aplikasi. Jadi di dalam ApplicationController, simpan percakapan yang dipesan pengguna di dalam variabel instan. Cara saya menyarankan melakukan itu adalah mendefinisikan all_ordered_conversationsmethod di dalam controller

    Tambahkan filter before_action, sehingga variabel instance @all_conversation tersedia di mana-mana.

    before_action: all_ordered_conversations

    Dan kemudian buat OrderConversationsService untuk menangani permintaan dan pemesanan percakapan.

    Saat ini layanan ini hanya berurusan dengan percakapan pribadi, itulah satu-satunya jenis percakapan yang kami kembangkan sejauh ini. Di masa depan kami akan menyatukan percakapan pribadi dan grup bersama, dan mengurutkannya berdasarkan pesan terbaru mereka. Metode pengurutan digunakan untuk mengurutkan susunan percakapan. Sekali lagi, jika kami tidak menggunakan metode include, kami akan mengalami masalah permintaan N + 1. Karena saat kami mengurutkan percakapan, kami memeriksa tanggal pembuatan pesan terbaru dari setiap percakapan dan membandingkannya. Itu sebabnya dengan kueri kami telah menyertakan catatan pesan.

    Operator <=> mengevaluasi nilai Created_at mana yang lebih tinggi. Jika kita menggunakan
    a <=> b, itu akan mengurutkan array yang diberikan dalam urutan menaik. Saat Anda mengevaluasi nilai dengan cara yang berlawanan, b <=> a, itu mengurutkan array dalam urutan menurun.

    Kami belum menentukan ruang lingkup all_by_user di dalam model Pribadi :: Conversation. Buka model dan tentukan ruang lingkup:

    Tulis spesifikasi untuk layanan dan ruang lingkup:

    Komit perubahan.

    git add -A
    git commit -m "
    - Buat OrderConversationsService dan tambahkan spesifikasi untuknya
    - Tentukan ruang lingkup all_by_user di dalam Pribadi :: Conversation
      model dan tambahkan spesifikasi untuknya "

    Sekarang di dalam tampilan, kami memiliki akses ke berbagai percakapan yang dipesan. Mari membuat daftar tautan mereka. Setiap kali pengguna mengklik salah satu dari mereka, jendela percakapan akan diberikan pada aplikasi. Jika Anda ingat, bilah navigasi kami memiliki dua komponen utama. Di dalam satu komponen, elemen ditampilkan secara konstan. Dalam komponen lain, elemen runtuh pada perangkat yang lebih kecil. Jadi di dalam tajuk navigasi, di mana komponen terlihat sepanjang waktu, kami akan membuat menu tarik turun percakapan. Seperti biasa, untuk mencegah memiliki file tampilan besar, pisahkan menjadi beberapa yang lebih kecil.

    Buka file _header.html.erb navigasi dan ganti kontennya dengan yang berikut:

    Sekarang buat direktori header dengan file _toggle_button.html.erb di dalamnya

    Ini adalah tombol sakelar yang sebelumnya terletak di dalam _header.html.erbfile. Buat file lain di dalam direktori header

    Dan ini adalah tombol beranda dari _header.html.erb. Juga ada tautan tambahan di sini. Pada perangkat yang lebih kecil, kami akan menampilkan ikon, alih-alih nama aplikasi.

    Lihat kembali file _header.html.erb. Ada metode pembantu nav_header_content_partials, yang mengembalikan array jalur parsial. Alasan mengapa kami tidak hanya membuat sebagian satu per satu adalah karena array akan berbeda dalam kasus yang berbeda. Di dalam NavigationHelper, tentukan metode

    Tulis spesifikasi untuk metode di dalam navigation_helper_spec.rb

    Sekarang buat file yang diperlukan untuk menampilkan menu tarik turun di bilah navigasi. Mulailah dengan membuat file _dropdowns.html.erb

    Buat direktori dropdown dengan file _conversations.html.erb di dalamnya

    Ini tempat kami menggunakan variabel instance @all_conversations, yang ditentukan di dalam controller sebelumnya, dan render tautan untuk membuka percakapan. Tautan untuk berbagai jenis percakapan akan berbeda. Kami perlu membuat dua versi tautan yang berbeda untuk percakapan pribadi dan grup. Pertama-tama tentukan metode helper conversation_header_partial_path di dalam NavigationHelper

    Tulis spesifikasi untuknya:

    Tentu saja kami belum melakukan apa pun dengan percakapan grup. Jadi, Anda harus mengomentari bagian percakapan grup dalam spesifikasi untuk sementara waktu untuk menghindari kegagalan.

    Buat file untuk tautan percakapan pribadi:

    Tentukan metode helper private_conv_seen_status di dalam Shared :: ConversationsHelper yang baru

    Tambahkan modul ini ke Private :: ConversationsHelper

    sertakan Shared :: ConversationsHelper

    Di dalam spesifikasi, buat direktori bersama dengan conversations_helper_spec.rbfile untuk menguji metode helper private_conv_seen_status.

    Ketika tautan ke percakapan diklik, tindakan terbuka Pribadi :: Conversationcontroller dipanggil. Tetapkan rute ke tindakan ini. Di dalam file routes.rb, tambahkan sebuah post: anggota terbuka di dalam sumber-sumber privat konversi sumber daya, tepat di bawah post: close.

    Tentu saja jangan lupa mendefinisikan tindakan itu sendiri di dalam controller:

    Sekarang jendela percakapan akan terbuka ketika Anda mengklik tautannya. Bilah navigasi saat ini berantakan, kita harus menjaga desainnya. Untuk menata menu drop down, tambahkan CSS ke file navigation.scss.

    Perbarui max-width: 767px kueri media di dalam mobile.scss

    Perbarui min-width: 767px kueri media di desktop.scss

    Aplikasi terlihat seperti ini sekarang

    Kemudian Anda dapat memperluas daftar percakapan

    Dengan mengklik salah satu tautan menu, jendela percakapan akan muncul di aplikasi

    Jika Anda mencoba mengontrak ukuran peramban, percakapan harus disembunyikan satu per satu

    Perhatikan juga bahwa alih-alih logo collabfield, kami memiliki ikon beranda sekarang. Dan daftar percakapan masih tersedia di layar yang lebih kecil. Nah, jika jendela percakapan disembunyikan di perangkat yang lebih kecil, bagaimana pengguna akan berkomunikasi di perangkat seluler? Kami akan membuat messenger yang akan dibuka alih-alih jendela percakapan.

    Komit perubahan

    git add -A
    git commit -m "Berikan menu drop down tautan percakapan
    - membagi tata letak / navigasi / konten _header.html.erb file menjadi parsial
    - Buat _toggle_button.erb.html di dalam tata letak / navigasi / header
    - Buat _home_button.html.erb di dalam layout / navigasi / header
    - Tentukan nav_header_content_partials di dalam NavigationHelper
      dan tulis spesifikasi untuknya
    - Buat _dropdowns.html.erb di dalam layout / navigasi / header
    - Buat bagian dalam _conversation.html.erb
      tata letak / navigasi / header / dropdown
    - Tentukan percakapan_header_partial_path di dalam NavigationHelper
      dan tulis spesifikasi untuknya
    - Buat bagian dalam _private.html.erb
      tata letak / navigasi / header / dropdown / percakapan
    - Tentukan bagian dalam private_conv_seen_status
      Shared :: ConversationsBantuan dan tulis spesifikasi untuknya
    - Tetapkan aksi terbuka di dalam kontroler Private :: Conversations
    - tambahkan CSS ke menu tarik turun gaya di bilah navigasi.
      Di dalam navigation.scss, mobile.scss dan desktop.scss "

    Ini saat yang tepat untuk memastikan bahwa semua fitur olahpesan waktu nyata bekerja dengan benar.

    Karena kami menambahkan elemen ke DOM secara dinamis, terkadang elemen ditambahkan terlalu terlambat dan Capybara berpikir bahwa suatu elemen tidak ada, karena waktu tunggu secara default hanya 2 detik. Untuk menghindari kegagalan ini, di dalam rails_helper.rb, ubah waktu tunggu di suatu tempat antara 5 hingga 10 detik.

    Di dalam spec / fitur / pribadi / percakapan, lipat file window_spec.rb.

    Di sini saya belum menentukan spesifikasi, untuk menguji apakah pengguna penerima menerima pesan secara real time. Cobalah mencari cara menulis tes seperti itu sendiri.

    Komit perubahan

    git add -A
    git commit -m "Tambahkan spesifikasi untuk menguji fungsionalitas jendela percakapan"

    Jika Anda masuk ke akun yang telah menerima pesan, Anda akan melihat percakapan, ditandai sebagai tidak terlihat

    Saat ini tidak ada cara untuk menandai percakapan seperti yang terlihat. Secara default, pesan baru memiliki nilai yang tidak terlihat. Program aplikasi dengan cara yang ketika jendela percakapan dibuka atau diklik, pesannya ditandai seperti yang terlihat. Perhatikan juga bahwa saat ini kami hanya melihat percakapan yang tidak terlihat yang disorot ketika menu tarik-turun diperluas. Di masa depan kami akan membuat fitur notifikasi, sehingga pengguna akan tahu bahwa mereka mendapat pesan baru tanpa memperluas apa pun.

    Mari kita atasi masalah pertama. Ketika sebuah percakapan sudah diberikan pada aplikasi, tetapi itu diciutkan, dan seorang pengguna mengklik tautan menu drop down untuk membuka percakapan itu, tidak ada yang terjadi. Percakapan yang terputus itu tetap terhenti. Kami telah menambahkan beberapa JavaScript, jadi dalam hal klik tautan menu tarik-turun, percakapan akan meluas dan memfokuskan area pesan barunya.

    Buka file di bawah ini dan tambahkan kode dari Intisari untuk mencapai itu.

    aset / javascripts / percakapan / toggle_window.js

    Saat Anda mengeklik tautan, untuk membuka jendela percakapan, tidak peduli apakah percakapan sudah ada di aplikasi, atau tidak, itu akan diperluas.

    Sekarang kita membutuhkan pengatur acara. Setelah jendela percakapan yang berisi pesan yang tidak terlihat diklik, sisi klien percakapan pribadi harus mengaktifkan fungsi panggilan balik. Pertama, tentukan pengendali acara di dalam sisi klien percakapan pribadi, di bagian bawah file

    Kasus keberadaan messenger sudah termasuk dalam cuplikan kode ini.

    Kemudian, tentukan fungsi panggilan balik di dalam instance private_conversation, tepat di bawah fungsi send_message

    Terakhir, tentukan metode ini di sisi server

    Setelah pengguna mengklik tautan untuk membuka jendela percakapan atau mengklik langsung pada jendela percakapan, pesannya yang tidak terlihat akan ditandai seperti yang terlihat.

    Komit perubahan

    git add -A
    git commit -m "Tambahkan kemampuan untuk menandai pesan yang tidak terlihat seperti yang terlihat
    - Tambahkan pengendali acara untuk memperluas jendela percakapan di dalam
      aset / javascripts / percakapan / toggle_window.js
    - Tambahkan pengendali acara untuk menandai pesan yang tidak terlihat seperti yang terlihat di dalam
      aset / javascripts / saluran / pribadi / conversation.js
    - Tentukan metode set_as_seen untuk Pribadi :: ConversationChannel "

    Pastikan semuanya berfungsi seperti yang kita harapkan dengan menulis spesifikasi.

    Kontak

    Untuk tetap berhubungan dengan orang-orang, Anda bertemu di aplikasi, Anda harus dapat menambahkannya ke kontak. Kami kehilangan fungsi ini sekarang. Juga memiliki fitur kontak membuka banyak kemungkinan untuk membuat fitur lain yang hanya dapat dilakukan oleh pengguna yang diterima sebagai kontak.

    Hasilkan model Kontak

    rel g model kontak

    Tetapkan asosiasi, validasi, dan metode untuk menemukan catatan kontak dengan menyediakan id pengguna.

    Tentukan tabel kontak

    Pabrik untuk kontak akan dibutuhkan. Definisikan:

    Tulis spesifikasi untuk menguji model

    Komit perubahan

    git add -A
    git commit -m "Buat model Kontak dan tulis spesifikasi untuknya"

    Di dalam file model Pengguna, kami harus menetapkan asosiasi yang sesuai dan juga menentukan beberapa metode untuk membantu dengan pertanyaan kontak.

    Tutupi asosiasi dan metode dengan spesifikasi

    Komit perubahan

    git add -A
    git commit -m "Tambahkan asosiasi dan metode pembantu ke model Pengguna
    - Buat hubungan antara Pengguna model Kontak
    - Metode membantu meminta catatan Kontak "

    Hasilkan pengontrol Kontak dan tentukan tindakannya

    rel g kontak pengontrol

    Seperti yang Anda lihat, pengguna akan dapat membuat catatan kontak baru, memperbarui statusnya (menerima pengguna ke kontak mereka) dan menghapus pengguna dari daftar kontak mereka. Karena semua tindakan dipanggil melalui AJAX dan kami tidak ingin merender template apa pun sebagai respons, kami merespons dengan respons yang berhasil. Dengan cara ini Rails tidak perlu memikirkan harus merespons apa.

    Tentukan rute yang sesuai:

    Komit perubahan.

    git add -A
    git commit -m "Buat ContactsController dan tentukan rute ke tindakannya"

    Pembaruan jendela percakapan pribadi

    Cara pengguna dapat mengirim dan menerima permintaan kontak adalah melalui jendela percakapan pribadi. Nanti kami akan menambahkan cara tambahan untuk menerima permintaan melalui menu tarik turun bilah navigasi.

    Buat direktori tajuk baru

    pribadi / percakapan / percakapan / tajuk

    Di sinilah kami akan menyimpan opsi tambahan untuk jendela percakapan pribadi. Di dalam direktori, buat file _add_user_to_contacts.html.erb

    Di bagian bawah file _heading.html.erb, render opsi untuk menambahkan lawan pengguna percakapan ke kontak:

    Tetapkan metode pembantu dan metode tambahan dalam ruang lingkup pribadi

    Tulis spesifikasi untuk metode pembantu ini

    Metode instance_eval digunakan untuk menguji metode dalam lingkup pribadi.

    Karena kami akan menampilkan opsi pada elemen tajuk jendela percakapan, kami harus memastikan bahwa opsi tambahan sesuai dengan tajuk. Di dalam file _heading.html.erb, ganti judul pembicaraan
    kelas dengan <% = conv_heading_class (@contact)%>, untuk menentukan kelas mana yang akan ditambahkan.

    Definisikan metode pembantu

    Tulis spesifikasi untuk metode ini

    Opsi, untuk mengirim atau menerima permintaan kontak, belum akan ditampilkan. Elemen lainnya perlu ditambahkan. Buka file _conversation.html.erb

    privat / percakapan / _conversation.html.erb

    Di bagian atas file, tentukan variabel kontak @contact, sehingga dapat diakses di semua parsial

    Tentukan metode penolong get_contact_record

    Tutupi metode dengan spesifikasi

    Sebelumnya, kami menggunakan metode current_user dan penerima hanya dalam konteks lingkup pribadi. Sekarang kita perlu akses ke mereka dengan metode privat dan publik. Jadi potong dan letakkan di luar konteks ruang lingkup pribadi.

    Di bagian atas elemen .panel-body, render file parsial yang akan menampilkan jendela pesan tambahan untuk menerima atau menolak permintaan kontak

    Buat file _request_status.html.erb

    Tentukan metode pembantu yang dibutuhkan

    Menulis spesifikasi untuk metode pembantu

    Buat direktori request_status dan kemudian buat _send_request.html.erb, _sent_by_current_user.html.erb dan _sent_by_recipient.html.erb file parsial

    Komit perubahan

    git add -A
    git commit -m "Tambahkan tombol di jendela percakapan pribadi
    untuk menambahkan penerima ke kontak "

    Terapkan perubahan desain dan atasi masalah gaya yang muncul karena elemen tambahan di jendela percakapan. Tambahkan CSS ke conversation_window.scssfile

    Komit perubahan

    git add -A
    git commit -m "Tambahkan CSS ke conversation_window.scss ke tombol opsi gaya"

    Ketika jendela percakapan diciutkan, akan lebih baik untuk tidak melihat opsi apa pun. Ini adalah desain yang lebih nyaman untuk melihat opsi hanya ketika jendela percakapan diperluas. Untuk mencapainya, di dalam fungsi sakelar file toggle_window.js, tepat di bawah variabel messages_visible, tambahkan

    Sekarang jendela yang diciutkan terlihat seperti ini, tidak memiliki opsi yang terlihat

    Jendela yang diperluas memiliki opsi untuk menambahkan pengguna ke kontak. Juga ada pesan yang menyarankan untuk melakukan itu

    Sebenarnya, Anda dapat mengirim dan menerima permintaan kontak sekarang dengan mengklik ikon pada tajuk percakapan atau mengklik tautan Tambahkan ke kontak. Untuk saat ini, tidak ada respons apa pun setelah Anda mengklik tautan dan tombol itu. Kami akan menambahkan beberapa umpan balik dan sistem pemberitahuan waktu nyata beberapa saat kemudian. Namun secara teknis, Anda dapat menambahkan pengguna ke kontak Anda, hanya saja belum sangat ramah pengguna.

    Setelah Anda mengirim permintaan kontak, sisi pengguna yang berlawanan terlihat seperti ini

    Komit perubahan

    git add -A
    git commit -m "Tambahkan JS di dalam toggle_window.js untuk menampilkan dan menyembunyikan opsi tambahan"

    Saat ini pengguna dapat berbicara secara pribadi, melakukan percakapan satu lawan satu. Karena aplikasi ini berkolaborasi, masuk akal untuk melakukan percakapan grup juga.

    Mulailah dengan menghasilkan model baru

    rel g model grup / percakapan

    Banyak pengguna akan dapat berpartisipasi dalam satu percakapan. Tentukan asosiasi dan tabel database

    Gabung tabel akan digunakan untuk melacak siapa yang termasuk dalam percakapan grup mana

    Kemudian buat model untuk pesan

    rel g model grup / pesan

    Kami akan menyimpan ids pengguna yang telah melihat pesan ke dalam array. Untuk membuat dan mengelola objek, seperti array, di dalam kolom basis data, metode serialisasi digunakan. Cakupan default, untuk meminimalkan jumlah kueri, dan beberapa validasi ditambahkan.

    Cara kami membangun percakapan grup sangat mirip dengan percakapan pribadi. Bahkan, gaya dan beberapa bagian akan sama antara kedua jenis percakapan.

    Tulis spesifikasi untuk model. Juga pabrik untuk pesan grup akan dibutuhkan

    Tentukan file migrasi

    Dasar-dasar percakapan grup ditetapkan.

    Komit perubahan

    git add -A
    git commit -m "Buat Grup :: Percakapan dan Grup :: Model pesan
    - Tentukan asosiasi
    - Tulis spesifikasi "

    Buat percakapan grup

    Seperti disebutkan sebelumnya, proses membuat fitur percakapan grup akan mirip dengan apa yang kami lakukan dengan percakapan pribadi. Mulai dengan membuat pengontrol dan antarmuka pengguna dasar.

    Hasilkan pengontrol dengan spasi nama

    rails g grup pengontrol / percakapan

    Di dalam controller, tentukan action create dan add_to_conversations, already_added? dan buat metode konversi grup dalam lingkup pribadi

    Ada beberapa kompleksitas yang terlibat dalam membuat percakapan grup baru, jadi kami akan mengekstraknya menjadi objek layanan. Lalu kita punya add_to_conversations dan sudah_added? metode pribadi. Jika Anda ingat, kami memilikinya di Private :: ConversationsController juga, tapi kali ini ia menyimpan percakapan grup ke dalam sesi.

    Sekarang tentukan Grup :: NewConversationService di dalam direktori grup baru

    Cara percakapan grup baru akan dibuat, sebenarnya melalui percakapan pribadi. Kami akan segera membuat antarmuka ini sebagai opsi di jendela percakapan pribadi. Sebelum melakukan itu, pastikan bahwa objek layanan berfungsi dengan baik dengan menutupinya dengan spesifikasi. Di dalam layanan, buat grup direktori baru dengan file new_conversation_service_spec.rb di dalamnya

    Komit perubahan

    git add -A
    git commit -m "Buat back-end untuk membuat percakapan grup baru
    - Buat Grup :: ConversationsController
      Tetapkan tindakan buat dan add_to_conversations,
      create_group_conversation dan sudah_added? metode pribadi di dalam
    - Buat Grup :: NewConversationService dan tulis spesifikasi untuknya "

    Tetapkan rute untuk percakapan grup dan pesannya

    Komit perubahan

    git add -A
    git commit -m "Tentukan spesifikasi untuk Grup :: Percakapan dan Pesan"

    Saat ini kami hanya menangani percakapan pribadi di dalam ApplicationController. Hanya percakapan pribadi yang dipesan dan hanya id mereka, setelah pengguna membukanya, tersedia di seluruh aplikasi. Di dalam ApplicationController, perbarui metode opens_conversations_windows

    Karena pemesanan percakapan terjadi dengan bantuan Layanan OrderConversations, kami memperbarui layanan ini

    Sebelumnya kami hanya memiliki susunan percakapan pribadi dan kami mengurutkannya berdasarkan tanggal pembuatan pesan terbaru. Sekarang kami memiliki susunan percakapan pribadi dan grup, kemudian kami menggabungkannya menjadi satu larik dan mengurutkannya dengan cara yang sama, seperti yang kami lakukan sebelumnya.

    Perbarui spesifikasi

    Komit perubahan

    git add -A
    git commit -m "Dapatkan data untuk percakapan grup di ApplicationController
    - Perbarui metode opens_conversations_windows
    - Perbarui Layanan OrderConversations "

    Sebentar lagi kita harus mengirimkan beberapa data dari pengontrol ke JavaScript. Untungnya, kami telah menginstal gon gem, yang memungkinkan kami melakukannya dengan mudah. Di dalam ApplicationController, dalam ruang lingkup pribadi, tambahkan

    Gunakan filter before_action untuk memanggil metode ini

    before_action: set_user_data

    Komit perubahan

    git add -A
    git commit -m "Tentukan metode pribadi set_user_data di ApplicationController"

    Secara teknis kami dapat membuat percakapan grup baru sekarang, tetapi pengguna tidak memiliki antarmuka untuk melakukan itu. Seperti yang disebutkan, mereka akan melakukannya melalui percakapan pribadi. Mari kita buat opsi ini di jendela percakapan pribadi.

    Di dalam

    tampilan / pribadi / percakapan / percakapan / tajuk

    direktori buat file baru

    Metode collection_select digunakan untuk menampilkan daftar pengguna. Hanya pengguna yang ada dalam kontak yang akan dimasukkan dalam daftar. Tentukan metode helper contacts_except_recipient

    Tulis spesifikasi untuk metode ini

    Jadikan parsial di bagian bawah _heading.html.erb

    Definisikan metode pembantu

    Bungkus dengan spesifikasi

    Komit perubahan.

    git add -A
    git commit -m "Tambahkan UI pada percakapan pribadi untuk membuat percakapan grup"

    Tambahkan CSS ke gaya komponen yang memungkinkan untuk membuat percakapan grup baru

    Pilihan kontak disembunyikan secara default. Untuk membuka pilihan, pengguna harus mengklik tombol. Tombolnya belum interaktif. Buat options.jsfile dengan JavaScript di dalamnya untuk membuat daftar pilihan toggleable.

    Sekarang jendela percakapan dengan penerima yang merupakan kontak terlihat seperti ini

    Ada tombol yang membuka daftar kontak, Anda dapat membuat percakapan grup dengan, ketika Anda mengkliknya

    Komit perubahan.

    git add -A
    git commit -m "
    - Jelaskan gaya untuk opsi buat percakapan grup
    - Jadikan opsi toggleable "

    Kami memiliki daftar percakapan yang dipesan, termasuk percakapan grup sekarang, yang akan disajikan pada menu tarik-turun bilah navigasi. Jika Anda ingat, kami menentukan sebagian untuk berbagai jenis percakapan. Saat aplikasi mencoba merender tautan, untuk membuka percakapan grup, ia akan mencari file yang berbeda dari pada percakapan pribadi. File belum dibuat.

    Buat file _group.html.erb

    Tetapkan metode pembantu group_conv_seen_status di dalam Shared :: ConversationsHelper

    Tulis spesifikasi untuk metode ini

    Komit perubahan.

    git add -A
    git commit -m "Buat tautan di bilah navigasi untuk membuka percakapan grup"

    Jadikan jendela percakapan grup pada aplikasi, dengan cara yang sama seperti kami menerjemahkan percakapan pribadi. Di dalam application.html.erb, tepat di bawah percakapan pribadi yang diberikan, tambahkan:

    Buat file sebagian untuk membuat jendela percakapan grup satu per satu:

    Lakukan perubahan.

    git add -A
    git commit -m "Render jendela percakapan grup di dalam jendela
    application.html.erb "

    Kami memiliki mekanisme bagaimana percakapan grup dibuat dan disajikan di aplikasi. Sekarang mari kita membangun jendela percakapan itu sendiri.

    Di dalam direktori grup / percakapan, buat _conversation.html.erbfile.

    Tentukan metode pembantu add_people_to_group_conv_list:

    Tulis spesifikasi untuk pembantu:

    Sama seperti dengan percakapan pribadi, percakapan grup akan dapat diakses di seluruh aplikasi, jadi jelas, kita perlu akses ke metode Group :: ConversationsHelper di mana-mana juga. Tambahkan modul ini di dalam ApplicationHelper

    termasuk Group :: ConversationsHelper

    Komit perubahan.

    git add -A
    git commit -m "
    - Buat _conversation.html.erb di dalam grup / percakapan
    - Tentukan add_people_to_group_conv_list dan tulis spesifikasi untuknya "

    Buat direktori percakapan baru dengan file _heading.html.erb di dalamnya:

    Lakukan perubahan.

    git add -A
    git commit -m "Buat _heading.html.erb di dalam
    grup / percakapan / percakapan "

    Selanjutnya kita memiliki file _select_user.html.erb dan _messages_list.html.erb sebagian. Buat mereka:

    Tentukan metode pembantu load_group_messages_partial_path:

    Bungkus dengan spesifikasi:

    Komit perubahan.

    git add -A
    git commit -m "
    - Buat _select_user.html.erb dan _messages_list.html.erb di dalamnya
      grup / percakapan / percakapan
    - Tentukan metode pembantu load_group_messages_partial_path
      dan tulis spesifikasi untuknya "

    Buat file _link_to_previous_messages.html.erb, untuk memiliki tautan yang memuat pesan sebelumnya:

    Lakukan perubahan.

    git add -A
    git commit -m "Buat _load_messages.html.erb di dalam
    grup / percakapan / percakapan / pesan_daftar "

    Buat formulir pesan baru

    Lakukan perubahan.

    git add -A
    git commit -m "Buat _new_message_form.html.erb di dalam
    grup / percakapan / percakapan / "

    Aplikasi ini sekarang dapat membuat jendela percakapan grup juga.

    Tapi, mereka belum berfungsi. Pertama, kita perlu memuat pesan. Kami membutuhkan pengontrol untuk pesan dan tampilan. Buat pengontrol Pesan:

    rel g grup pengontrol / pesan

    Sertakan modul Pesan dari masalah dan tentukan tindakan indeks:

    Komit perubahan.

    git add -A
    git commit -m "Buat Grup :: MessagesController dan tentukan tindakan indeks"

    Buat _load_more_messages.js.erb

    Kami telah mendefinisikan append_previous_messages_partial_path dan menghapus_link_to_messages metode bantuan sebelumnya. Kita hanya perlu mendefinisikan metode helper replace_link_to_group_messages_partial_path

    Sekali lagi, metode ini, seperti halnya di pihak swasta, akan menjadi lebih "cerdas", begitu kita mengembangkan messenger.

    Buat _replace_link_to_messages.js.erb

    Juga tambahkan Grup :: MessagesHelper ke ApplicationHelper

    termasuk Group :: MessagesHelper

    Komit perubahan.

    git add -A
    git commit -m "Buat _load_more_messages.js.erb di dalam grup / pesan"

    Satu-satunya cara percakapan kelompok dapat dibuka sekarang adalah setelah inisialisasi mereka. Jelas, ini bukan hal yang mendebarkan, karena begitu Anda menghancurkan sesi, tidak ada cara untuk membuka percakapan yang sama lagi. Buat openaction di dalam controller.

    Buat file parsial _open.js.erb:

    Sekarang kami dapat membuka percakapan dengan mengeklik tautan menu tarik turun bilah navigasi. Cobalah mengujinya dengan spesifikasi fitur sendiri.

    Komit perubahan.

    git add -A
    git commit -m "Tambahkan kemampuan untuk membuka percakapan grup
    - Buat tindakan terbuka di Grup :: ConversationsController
    - Buat _open.js.erb di dalam grup / percakapan "

    Aplikasi ini akan mencoba merender pesan, tetapi kami belum membuat template untuknya. Buat _message.html.erb

    Tentukan group_message_date_check_partial_path, group_message_seen_by dan message_content_partial_path metode penolong.

    Metode group_message_seen_by akan mengembalikan daftar pengguna yang telah melihat pesan. Informasi kecil ini memungkinkan kami untuk membuat fitur tambahan, seperti acara kepada peserta percakapan yang telah melihat pesan, dll. Tetapi dalam kasus kami, kami akan menggunakan informasi ini untuk menentukan apakah pengguna saat ini melihat pesan, atau tidak. Jika tidak, maka setelah pengguna melihatnya, pesan akan ditandai seperti yang terlihat.

    Kami juga membutuhkan metode bantuan dari modul Shared. Di dalam Grup :: MessagesHelper, tambahkan modul.

    memerlukan 'shared / messages_helper'
    termasuk Shared :: MessagesHelper

    Bungkus metode pembantu dengan spesifikasi:

    Komit perubahan.

    git add -A
    git commit -m "Buat _message.html.erb di dalam grup / pesan
    - Tentukan group_message_date_check_partial_path,
      group_message_seen_by dan message_content_partial_path helper
      metode dan tulis spesifikasi untuk mereka "

    Buat sebagian file untuk pesan:

    Komit perubahan.

    git add -A
    git commit -m "Buat _new_date.html.erb,
    _different_user_content.html.erb dan _same_user_content.html.erb
    di dalam grup / pesan / pesan / "

    Sekarang kita membutuhkan mekanisme yang akan membuat pesan satu per satu. Buat file parsial _messages.html.erb:

    Lakukan perubahan.

    git add -A
    git commit -m "Buat _messages.html.erb di dalam grup / percakapan"

    Tambahkan penataan untuk pesan grup:

    Lakukan perubahan.

    git add -A
    git commit -m "Tambahkan CSS untuk pesan grup di conversation_window.scss"

    Jadikan tombol tutup berfungsi dengan menetapkan tindakan tutup di dalam Grup :: ConversationsController

    Buat file templat yang sesuai:

    Komit perubahan.

    git add -A
    git commit -m "Tambahkan fungsionalitas jendela percakapan grup dekat
    - Tetapkan tindakan dekat di dalam Grup :: ConversationsController
    - Buat close.js.erb di dalam grup / percakapan "

    Berkomunikasi secara real time

    Sama seperti dengan percakapan pribadi, kami ingin dapat melakukan percakapan secara real time dengan banyak pengguna di jendela yang sama. Proses mencapai fitur ini akan sangat mirip dengan apa yang kami lakukan dengan percakapan pribadi.

    Buat saluran baru untuk percakapan grup

    rel g grup saluran / percakapan

    Kali ini kami memeriksa apakah pengguna termasuk dalam percakapan, sebelum membuat koneksi, dengan metode milik_to_konversi. Dalam percakapan pribadi, kami melakukan streaming dari saluran unik, dengan memberikan id current_user. Dalam kasus percakapan grup, id percakapan dilewatkan dari sisi klien. Dengan metode milik_ ke_konversi, kami memeriksa apakah pengguna tidak melakukan manipulasi dan tidak mencoba menyambung ke saluran yang bukan milik mereka.

    Lakukan perubahan

    git add -A
    git commit -m "Buat Grup :: ConversationChannel"

    Buat Grup :: MessageBroadcastJob

    rails g job group / message_broadcast

    Lakukan perubahan.

    git add -A
    git commit -m "Buat Grup :: MessageBrodcastJob"

    Potongan puzzle terakhir yang hilang tersisa - sisi klien:

    Pada dasarnya, ini sangat mirip dengan file .js percakapan pribadi. Tata letak kode sedikit berbeda. Perbedaan utama adalah kemampuan untuk mengirimkan id percakapan ke saluran dan loop di bagian atas file. Dengan loop ini kami menghubungkan pengguna ke semua saluran percakapan grupnya. Itulah alasan mengapa kami telah menggunakan metode milik_to_conversasi di sisi server. Id percakapan dilewatkan dari sisi klien. Metode ini di sisi server memastikan bahwa pengguna benar-benar milik percakapan yang disediakan.

    Ketika Anda memikirkannya, kami bisa saja membuat loop ini di sisi server dan tidak harus berurusan dengan semua proses konfirmasi ini. Tapi di sini ada alasan mengapa kami menyampaikan id percakapan dari sisi klien. Ketika pengguna baru ditambahkan ke percakapan grup, kami ingin menghubungkan mereka segera ke saluran percakapan, tanpa perlu memuat ulang halaman. Id percakapan yang lumayan memungkinkan kita untuk mencapai itu dengan mudah. Di bagian yang akan datang kami akan membuat saluran unik untuk setiap pengguna untuk menerima pemberitahuan secara real time. Saat pengguna baru akan ditambahkan ke percakapan grup, kami akan memanggil fungsi subToGroupConversationChannel, melalui saluran pemberitahuan unik mereka, dan menghubungkan mereka ke saluran percakapan grup. Jika kami tidak mengizinkan untuk menyampaikan id percakapan ke saluran, koneksi ke saluran baru akan terjadi hanya setelah laman dimuat ulang. Kami tidak akan memiliki cara untuk menghubungkan pengguna baru ke saluran percakapan secara dinamis.

    Sekarang kami dapat mengirim dan menerima pesan grup secara real time. Cobalah untuk menguji fungsionalitas keseluruhan dengan spesifikasi Anda sendiri.

    Komit perubahan.

    git add -A
    git commit -m "Buat percakapan.js di dalam
    aset / javascripts / saluran / grup "

    Di dalam Grup :: ConversationsController menentukan tindakan pembaruan

    Buat Grup :: AddUserToConversationService, yang akan memastikan bahwa pengguna yang dipilih akan ditambahkan ke percakapan

    Uji layanan dengan spesifikasi:

    Kami memiliki percakapan pribadi dan grup yang berfungsi sekarang. Beberapa nuansa masih hilang, yang akan kami implementasikan nanti, tetapi fungsionalitas intinya ada di sini. Pengguna dapat berkomunikasi satu lawan satu, atau jika perlu, mereka dapat membangun seluruh ruang obrolan dengan banyak orang.

    Komit perubahan.

    git add -A
    git commit -m "Buat Grup :: AddUserToConversationService dan ujilah"

    Kurir

    Apa tujuan memiliki utusan? Di layar seluler alih-alih membuka jendela percakapan, aplikasi akan memuat messenger. Pada layar yang lebih besar, pengguna dapat memilih tempat untuk mengobrol, di jendela percakapan atau di messenger. Jika messenger akan mengisi seluruh jendela browser, seharusnya lebih nyaman untuk berkomunikasi.

    Karena kita akan menggunakan data dan model yang sama, kita hanya perlu membuka percakapan di lingkungan yang berbeda. Hasilkan pengontrol baru untuk menangani permintaan untuk membuka percakapan di dalam messenger.

    rails g controller messenger

    tindakan get_private_conversation dan get_group_conversation akan mendapatkan percakapan yang dipilih pengguna. Templat tindakan tersebut akan menambahkan percakapan yang dipilih ke placeholder percakapan. Setiap kali percakapan baru dipilih untuk dibuka, percakapan lama dihapus dan diganti dengan yang baru terpilih.

    Tentukan rute untuk tindakan:

    Komit perubahan.

    git add -A
    git commit -m "Buat MessengersController dan tentukan rute ke tindakannya"

    Dalam controller adalah tindakan open_messenger. Tujuan dari tindakan ini adalah untuk pergi dari halaman mana saja langsung ke messenger dan membuat percakapan yang dipilih. Pada layar yang lebih kecil, pengguna akan mengobrol melalui messenger alih-alih jendela percakapan. Sebentar lagi, kami akan mengganti tautan untuk layar yang lebih kecil untuk membuka percakapan di dalam messenger.

    Buat templat untuk tindakan open_messenger

    git add -A
    git commit -m "Buat open_messenger.html.erb di / messenger"

    Kemudian kita melihat ConversationForMessengerSerivce, ia mengambil objek percakapan yang dipilih. Buat layanan:

    Tambahkan spesifikasi untuk layanan:

    Komit perubahan.

    git add -A
    git commit -m "Buat ConversationForMessengerSerivce dan tambahkan spesifikasi untuk itu"

    Buat templat untuk tindakan indeks:

    Ini akan menjadi utusan itu sendiri. Di dalam messenger, kita akan dapat melihat daftar percakapan pengguna dan percakapan yang dipilih. Buat file parsial:

    Tentukan metode pembantu:

    Cobalah mengujinya dengan spesifikasi sendiri.

    Buat sebagian file untuk tautan untuk membuka percakapan:

    Sekarang buat sebagian untuk ruang percakapan, percakapan yang dipilih akan diberikan di sana:

    Komit perubahan.

    git add -A
    git commit -m "Buat templat untuk tindakan indeks MessengersController's"

    Buat template untuk tindakan get_private_conversation:

    Buat file _private_conversation.html.erb:

    File ini akan membuat percakapan pribadi di dalam messenger. Perhatikan juga bahwa kami menggunakan kembali sebagian dari tampilan percakapan pribadi. Buat parsial _details.html.erb:

    Komit perubahan.

    git add -A
    git commit -m "Buat templat untuk MessengersController's
    aksi get_private_conversation "

    Ketika kita pergi ke messenger, lebih baik tidak melihat menu drop-down di bilah navigasi. Mengapa? Kami tidak ingin membuat jendela percakapan di dalam messenger, jika tidak maka akan terlihat kacau. Jendela percakapan dan messenger sekaligus untuk mengobrol dengan orang yang sama. Itu akan menjadi desain yang sangat salah.

    Pada awalnya, melarang jendela percakapan yang akan diberikan pada halaman messenger. Tidak terlalu sulit untuk dilakukan. Untuk mengontrolnya, ingat bagaimana jendela percakapan dirender di aplikasi. Mereka dirender di dalam file application.html.erb. Kemudian kita memiliki variabel instance @private_conversations_windowsand @group_conversations_windows. Variabel-variabel tersebut adalah susunan percakapan. Alih-alih hanya membuat percakapan dari array itu, tentukan metode pembantu untuk memutuskan untuk memberikan array itu kepada pengguna atau tidak, tergantung pada halaman mana mereka berada. Jika pengguna berada di dalam halaman messenger, mereka akan mendapatkan array kosong dan tidak ada jendela percakapan. akan diberikan.

    Ganti variabel instan dengan metode private_conversations_windows dan group_conversations_windows helper. Sekarang tentukan mereka di dalam ApplicationHelper

    Bungkus dengan spesifikasi

    Komit perubahan

    git add -A
    git commit -m "
    Tentukan private_conversations_windows dan group_conversations_windows
    metode pembantu di dalam ApplicationHelper dan mengujinya "

    Selanjutnya, buat file parsial alternatif untuk tajuk navigasi, jadi menu tarik-turun tidak akan ditampilkan. Di dalam NavigationHelper, kami telah mendefinisikan metode bantuan nav_header_content_partials sebelumnya. Ini menentukan header navigasi mana yang akan di-render.

    Di dalam

    tata letak / navigasi / tajuk

    direktori, buat file _messenger_header.html.erb

    Gaya utusan. Buat file messenger.scss di dalam direktori parsial

    Lakukan perubahan

    git add -A
    git commit -m "Buat messenger.scss di dalam parsial"

    Di dalam desktop.scss, dalam lebar minimum: 767px, tambahkan

    Saat kami mengeklik percakapan untuk membukanya, kami ingin dapat memuat pesan sebelumnya. Kami dapat menambahkan tautan yang terlihat untuk memuatnya. Atau kita dapat secara otomatis memuat sejumlah pesan sampai bilah gulir muncul, sehingga pengguna dapat memuat pesan sebelumnya dengan menggulir ke atas. Buat metode penolong yang akan mengatasinya

    Uji dengan spesifikasi Anda sendiri. Buat file parsial

    Komit perubahan

    git add -A
    git commit -m "Tentukan autoload_messenger_messages di
    Dibagikan :: PesanHelper "

    Gunakan metode helper di dalam file _load_more_messages.js.erb, tepat di atas <% = render remove_link_to_messages%>

    Sekarang kita memiliki append_previous_messages_partial_path dan
    replace_link_to_private_messages_partial_path metode helper yang harus kita perbarui, untuk membuatnya kompatibel dengan messenger

    Buat file parsial yang hilang

    Perbarui metode lain

    Buat file parsial

    Uji metode pembantu dengan spesifikasi Anda sendiri.

    Komit perubahan

    git add -A
    git commit -m "
    - Perbarui metode bantuan append_previous_messages_partial_path di
      Dibagikan :: PesanHelper
    - Perbarui metode replace_link_to_private_messages_partial_path di
      Pribadi :: PesanHelper "

    Sekarang setelah tautan pesan awal dimuat klik, aplikasi akan secara otomatis memuat pesan sebelumnya sampai ada bilah gulir di daftar pesan. Untuk membuat klik awal terjadi, tambahkan beberapa JavaScript:

    Ketika Anda mengunjungi jalur / messenger, Anda melihat messenger:

    Kemudian Anda dapat membuka salah satu percakapan Anda.

    Komit perubahan.

    git add -A
    git commit -m "Buat messenger.js"

    Sekarang di layar yang lebih kecil, ketika pengguna mengeklik tautan bilah navigasi untuk membuka percakapan, percakapan mereka harus dibuka di dalam messenger alih-alih jendela percakapan. Untuk memungkinkan ini, kami telah membuat tautan berbeda untuk layar yang lebih kecil.

    Di dalam parsial navigasi _private.html.erb, yang menyimpan tautan untuk membuka percakapan pribadi, tambahkan tautan tambahan untuk perangkat layar yang lebih kecil. Tambahkan tautan ini tepat di bawah tautan jalur open_private_conversation_path dalam file

    Pada layar yang lebih kecil, tautan ini akan ditampilkan alih-alih yang sebelumnya, didedikasikan untuk layar yang lebih besar. Tambahkan tautan tambahan untuk membuka percakapan grup juga

    Alasan mengapa kami melihat tautan berbeda pada ukuran layar yang berbeda adalah karena sebelumnya kami telah menetapkan CSS untuk tautan layar lebih besar dan layar tautan kecil.

    Komit perubahan.

    git add -A
    git commit -m "Di dalam _private.html.erb dan _group.html.erb, di
    tata letak / navigasi / tajuk / dropdown / percakapan, tambahkan alternatif
    tautan untuk perangkat yang lebih kecil untuk membuka percakapan "

    Versi Messenger di desktop dan perangkat seluler akan sedikit berbeda. Tulis beberapa JavaScript di dalam messenger.js, jadi setelah pengguna mengklik untuk membuka percakapan, js akan memutuskan untuk menampilkan versi seluler atau tidak.

    Sekarang ketika Anda membuka percakapan di perangkat seluler, sepertinya ini

    Lakukan perubahan.

    git add -A
    git commit -m "Tambahkan JavaScript ke messenger.js untuk menampilkan yang berbeda
    versi messenger di perangkat seluler "

    Sekarang buat percakapan grup berfungsi pada messenger. Sebagian besar pekerjaan dengan messenger sudah dilakukan, jadi mengatur percakapan kelompok akan menjadi jauh lebih mudah. Jika Anda melihat kembali ke dalam MessengersController, kami memiliki tindakan get_group_conversation. Buat file templat untuk itu:

    Kemudian buat file untuk membuat percakapan grup di messenger:

    Buat sebagiannya:

    Komit perubahan:

    git add -A
    git commit -m "Buat templat get_group_conversation.js.erb dan
    parsial di dalam kurir "

    Seperti itulah bentuk percakapan grup di messenger:

    5. Pemberitahuan

    Aplikasi sudah memiliki semua fitur dasar yang siap. Di bagian ini kami akan menggunakan energi kami untuk meningkatkan fitur-fitur vital tersebut. Pemberitahuan instan, ketika pengguna lain mencoba menghubungi Anda, memberikan pengalaman pengguna yang lebih baik. Biarkan pengguna menyadarinya setiap kali mereka mendapatkan pembaruan permintaan kontak atau bergabung ke percakapan grup.

    Permintaan kontak

    Buat saluran notifikasi yang akan menangani semua notifikasi pengguna.

    rails notifikasi saluran

    Lakukan perubahan.

    git add -A
    git commit -m "Buat NotificationChannel"

    Setiap pengguna akan memiliki saluran pemberitahuan unik sendiri. Kemudian kita memiliki ContactRequestBroadcastJob, yang akan menyiarkan permintaan dan tanggapan kontak.

    Hasilkan pekerjaan.

    rails g job contact_request_broadcast

    Buat parsial _contact_request.html.erb, yang akan digunakan untuk menambahkan permintaan kontak di menu tarik-turun bilah navigasi. Dalam hal ini, kami akan menambahkan permintaan tersebut secara dinamis dengan ContactRequestBroadcastJob

    Memecat pekerjaan setiap kali catatan Kontak baru dibuat:

    Komit perubahan.

    git add -A
    git commit -m "Buat ContactRequestBroadcastJob"

    Kemudian buat sendiri menu tarik turun di bilah navigasi:

    Tentukan metode bantuan nav_contact_requests_partial_path:

    Bungkus metode dengan spesifikasi dan kemudian buat file parsial:

    Di dalam file _dropdowns.html.erb, render _contact_requests.html.erb, tepat di bawah percakapan. Jadi kita bisa melihat menu tarik-turun permintaan kontak di bilah navigasi

    Komit perubahan.

    git add -A
    git commit -m "
    - Buat _contact_requests.html.erb di dalam
      tata letak / navigasi / header / dropdown
    - Tentukan nav_contact_requests_partial_path di NavigationHelper "

    Juga buat sebagian file untuk satu permintaan kontak:

    Lakukan perubahan.

    git add -A
    git commit -m "Buat _request.html.erb di dalam
    tata letak / navigasi / header / dropdown "

    Tambahkan CSS ke gaya dan posisi menu drop down permintaan kontak:

    Komit perubahan.

    git add -A
    git commit -m "Tambahkan CSS di navigation.scss ke gaya dan posisikan
    menu kontak permintaan turun "

    Pada bilah navigasi, kita dapat melihat menu tarik turun untuk permintaan kontak sekarang.

    Kami memiliki saluran pemberitahuan dan pekerjaan untuk menyiarkan pembaruan permintaan kontak. Sekarang kita perlu membuat koneksi di sisi klien, sehingga pengguna dapat mengirim dan menerima data secara real time.

    Perhatikan bahwa jika pernyataan, di mana permintaan kontak diterima dan ditolak, memiliki blok kode kosong. Anda dapat bermain-main dan menambahkan kode Anda sendiri di sini.

    Juga buat file contact_requests.js untuk melakukan perubahan DOM setelah peristiwa tertentu dan menyiarkan tindakan yang dilakukan kepada pengguna lawan, menggunakan fungsi callback contact_request_response

    Juga setelah permintaan kontak baru dikirim dari jendela percakapan, hapus opsi untuk mengirim permintaan lagi. Di dalam options.jsfile percakapan, tambahkan berikut ini:

    Sekarang permintaan kontak akan ditangani secara real time dan antarmuka pengguna akan diubah setelah peristiwa tertentu.