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

Membangun Ribbit di Rails

by
Read Time:29 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Sap (you can also view the original English article)

Selamat datang di bagian berikutnya dalam seri clone Twitter! Dalam tutorial ini, kita akan membangun Ribbit dari nol, tidak menggunakan PHP, tetapi dengan Ruby on Rails. Mari kita mulai!

ExampleExampleExample

Satu pengumuman layanan cepat sebelum memulai: kita tidak akan menata UI untuk aplikasi dalam tutorial ini; yang dilakukan di Build a Twitter Clone From Scratch: The Design. Saya akan memberi tahu Anda jika kita harus mengubah apa pun dari artikel itu.


Langkah 0: Menyiapkan Lingkungan

Pertama-tama: Saya menggunakan Ruby 1.9.3 (p194) dan Rails versi 3.2.8 untuk tutorial ini. Pastikan Anda menjalankan versi yang sama. Tidak masalah bagaimana Anda menginstal Ruby; Anda dapat menggunakan RVM (tutorial ), rbenv, atau hanya instalasi Ruby biasa. Tidak peduli pendekatannya, setiap installer memberi Anda biner gem, yang kemudian dapat Anda gunakan untuk memasang Rails. Cukup gunakan perintah ini:

Ini menginstal versi terbaru Rails, dan kita bisa mulai membangun aplikasi kita sekarang setelah diinstal. Saya harap Anda menyadari bahwa Rails adalah alat baris perintah; Anda harus nyaman di terminal agar nyaman dalam tutorial ini.


Langkah 1: Membuat Aplikasi Rails

Kita mulai dengan membuat proyek. Di baris perintah, arahkan ke direktori apa pun yang Anda inginkan untuk proyek baru. Kemudian, jalankan ini:

Perintah tunggal ini menghasilkan beberapa file di dalam folder, yang disebut ribbitApp. Inilah yang diberikan Rails kepada kita untuk memulai; bahkan memasang gem yang diperlukan untuk proyek tersebut.

Mari kita cd ke direktori dan menginisialisasi git repo.

Salah satu file yang dihasilkan Rail adalah .gitignore. Jika Anda menggunakan Mac, Anda mungkin ingin menambahkan baris berikut ke file ini - hanya untuk menjaga semuanya tetap bersih:

Sekarang, kita siap untuk membuat komitmen pertama!


Langkah 2: Persiapan UI

Tutorial antarmuka memperkenalkan Anda pada gambar dan stylesheet Ribbit. Unduh aset tersebut dan salin folder gfx dan file less.js dan style.less ke direktori public aplikasi Anda.

Mari tambahkan aturan ke style.less: gaya untuk pesan flash kami. Tempel ini di bagian bawah file:

Itu saja! Mari lakukan commit lain:

Sekarang, mari kita buat tata letaknya. Ini adalah HTML yang membungkus konten utama setiap halaman - pada dasarnya, header dan footer. Aplikasi Rails menyimpan ini di app/views/layouts/application.html.erb. Singkirkan semuanya di file ini, dan tambahkan kode berikut:

Ada tiga hal yang harus Anda perhatikan tentang ini. Pertama, setiap URL untuk aset publik (gambar, stylesheet, JavaScript) dimulai dengan garis miring (/). Ini agar kita masih dapat memuat aset ketika kita berada di rute "lebih dalam". Kedua, perhatikan markup untuk menampilkan pesan flash. Ini menampilkan pesan flash saat ada. Dan ketiga, perhatikan <%= yield %>; ini adalah tempat kita memasukkan "sub" -template lainnya.

Oke, mari kita melakukan ini:


Langkah 3: Membuat Pengguna

Tentu saja, kita tidak dapat memiliki klon Twitter tanpa pengguna, jadi mari tambahkan fungsionalitas itu. Ini bisa menjadi fitur yang rumit, tetapi Rails membuatnya sedikit lebih mudah bagi kita.

Kita tentu tidak ingin menyimpan kata sandi pengguna sebagai teks biasa; itu risiko keamanan yang sangat besar. Sebaliknya, kita akan mengandalkan Rails untuk mengotomatiskan proses enkripsi untuk kata sandi. Kita mulai dengan membuka Gemfile dan mencari baris-baris berikut:

Menggunakan has_secure_password adalah persis apa yang ingin kita lakukan, jadi jangan beri komentar pada baris kedua. Simpan file dan kembali ke baris perintah. Sekarang kita harus menjalankan bundle install untuk menginstal permata bcrypt.

Kita dapat membuat sumber pengguna, setelah gem itu dipasang.

Sumber Rails pada dasarnya adalah model, pengontrol yang terkait, dan beberapa file lainnya.

Kita membuat sumber dengan menggunakan rails generate (atau rails g):

Kita mengirimkan beberapa parameter ke perintah ini, menghasilkan resource, yang disebut user; modelnya memiliki lima bidang berikut:

  • username: nama pengguna unik, yang setara dengan pegangan Twitter.
  • name: nama asli pengguna.
  • email: alamat email mereka.
  • password_digest: versi sandi yang dienkripsi.
  • avatar_url: path ke gambar avatar mereka.

Kita sekarang perlu memigrasikan basis data sehingga disiapkan untuk menyimpan pengguna. Kita mencapai ini dengan menjalankan perintah berikut:

Ini menciptakan tabel users, tetapi tidak langsung berinteraksi dengan basis data dengan Rails. Sebaliknya, kita menggunakan ORM ActiveRecord. Kita perlu menambahkan beberapa kode ke app/models/user.rb. Buka file itu.

Ketika Rails menghasilkan file ini, itu menambahkan panggilan ke metode attr_accessible. Metode ini menentukan properti mana yang dapat dibaca dan ditulis pada instance kelas ini. Secara default, semua properti yang disebutkan di atas dapat diakses, tetapi kita ingin mengubah itu:

Sebagian besar harus masuk akal, tapi bagaimana dengan password dan kata password_confirmation? Lagi pula, kita hanya memiliki bidang password_digest di database. Ini adalah bagian dari sihir Rails yang saya sebutkan sebelumnya. Kita dapat mengatur bidang password dan kata password_confirmation pada instance User. Jika cocok, password akan dienkripsi dan disimpan dalam basis data. Tetapi untuk mengaktifkan fungsi ini, kita perlu menambahkan baris lain ke kelas model User kita:

Selanjutnya, kita ingin memasukkan validasi ke dalam model kami. Memanggil has_secure_password akan menangani bidang kata sandi, jadi kami akan menangani bidang email, username, dan name.

Bidang name sederhana: kita hanya ingin memastikan bahwa itu ada.

Untuk bidang username, kita ingin memastikan bahwa itu ada dan unik; tidak ada dua pengguna yang dapat memiliki nama pengguna yang sama:

Akhirnya, bidang email tidak hanya perlu ada dan menjadi unik, tetapi juga perlu untuk mencocokkan ekspresi reguler:

Ini adalah regex email yang sangat sederhana, tetapi harus dilakukan untuk tujuan kita.

Sekarang, bagaimana dengan bidang avatar_url itu? Kita ingin menggunakan alamat email pengguna dan menarik Gravatar terkait mereka, jadi kita harus membuat URL ini. Kita bisa melakukan ini dengan cepat, tetapi akan lebih efisien untuk menyimpannya dalam database. Pertama, perlu pastikan bahwa kita memiliki alamat email yang bersih. Mari tambahkan metode ke kelas User kita:

Kata kunci private itu berarti bahwa semua metode yang ditentukan setelah kata kunci didefinisikan sebagai metode pribadi; mereka tidak dapat diakses dari luar kelas (pada contoh).

Metode prep_email ini memangkas ruang putih di awal dan akhir string, dan kemudian mengonversi semua karakter menjadi huruf kecil.

Ini diperlukan karena kita akan menghasilkan hash untuk nilai ini.

Kita ingin metode ini dijalankan tepat sebelum proses validasi; tambahkan baris kode berikut di dekat bagian atas kelas.

Selanjutnya, mari kita buat URL untuk avatar dengan menulis metode lain (letakkan di bawah yang di atas):

Kita perlu memanggil metode ini sebelum kita menyimpan pengguna ke database. Tambahkan panggilan ini ke bagian atas file:

Dan itu dia! Sekarang kita memiliki mekanisme fungsi pengguna di tempat. Sebelum menulis UI untuk membuat pengguna, mari kita komit pekerjaan kita sejauh ini:


Langkah 5: Menulis UI Pengguna

Membangun UI di Rails berarti bahwa kita perlu menyadari rute yang membuat pandangan kita. Jika Anda membuka config/routes.rb, Anda akan menemukan baris seperti ini:

Ini ditambahkan ke file routes.rb ketika kita menghasilkan sumber pengguna, dan itu mengatur rute REST default. Saat ini, rute yang kita minati adalah rute yang menampilkan formulir untuk membuat pengguna baru: /users/new. Ketika seseorang pergi ke rute ini, metode new pada pengontrol pengguna akan dijalankan, jadi di sanalah kita akan mulai.

Pengontrol pengguna ditemukan di app/controllers/users_controller.rb. Ini tidak memiliki metode secara default, jadi mari kita tambahkan metode new dalam kelas UserController.

Seperti yang Anda ketahui, variabel instance Ruby dimulai dengan @ - membuat @user tersedia dari dalam tampilan kita. Mari menuju ke tampilan dengan membuat file, bernama new.html.erb di folder app/views/users. Inilah yang terjadi dalam tampilan itu:

Ini sebenarnya adalah tampilan yang berfungsi sebagai tampilan halaman beranda, ketika seorang pengguna tidak masuk. Kita menggunakan metode form_for helper untuk membuat formulir dan memberikannya variabel @user sebagai parameter. Kemudian, di dalam formulir (yang ada di dalam blok Ruby), kita mencetak kesalahan terlebih dahulu. Tentu saja, tidak akan ada kesalahan pada halaman saat pertama kali.

Namun, setiap masukan yang gagal aturan validasi kita menghasilkan pesan galat yang ditampilkan dalam daftar item.

Kemudian, kita memiliki ladang untuk properti pengguna. Karena desain ini tidak memiliki label untuk kotak teks, saya telah menempatkan apa yang akan menjadi teks label sebagai placeholder kolom (menggunakan atribut placeholder). Ini tidak akan ditampilkan di browser yang lebih lama, tetapi itu tidak relevan dengan tujuan utama kita di sini.

Sekarang, apa yang terjadi ketika pengguna mengklik tombol "Create Account"? Formulir ini akan POST ke /users rute, sehingga pelaksanaan metode create di pengontrol pengguna. Kembali ke pengontrol itu, lalu:

Kita mulai dengan membuat pengguna new, meneruskan metode baru nilai dari formulir. Kemudian, kita memanggil metode save. Metode ini pertama kali memvalidasi input; jika data dalam format yang benar, metode memasukkan catatan ke dalam database dan mengembalikan nilai true. Jika tidak, ia akan kembali false.

Jika @user.save mengembalikan nilai true, kita mengarahkan penampil ke... objek @user itu sendiri?

Ini sebenarnya mengarahkan ke jalur untuk pengguna itu, yang akan menjadi /users/. Jika @user.save menghasilkan false, kami membuat ulang jalur /users/new dan menampilkan kesalahan validasi apa pun. Kita juga mengisi kolom formulir dengan informasi yang disediakan sebelumnya oleh pengguna. Pintar, ya?

Nah, jika kita mengarahkan penampil ke profil pengguna baru mereka, kita perlu membuat halaman itu selanjutnya. Ini memicu metode show di pengontrol pengguna, jadi kita akan menambahkan yang pertama:

Metode ini melihat nomor id di rute (misalnya, /user/4) dan menemukan pengguna terkait dalam database. Sama seperti sebelumnya, kita sekarang dapat menggunakan variabel @user ini dari tampilan.

Buat file app/views/users/show.html.erb, dan tambahkan kode berikut:

Anda akan melihat bahwa kita memiliki beberapa placeholder dalam tampilan ini. Pertama, ada bentuk untuk membuat pita baru. Lalu ada pengikut, nomor berikut, dan daftar pita Anda. Kita akan segera datang.

Ada satu hal lagi yang harus dilakukan dalam langkah ini: kita ingin rute root (/) untuk menampilkan formulir pengguna baru untuk sementara waktu. Buka file config/routes.rb lagi, dan tambahkan baris ini:

Ini hanya membuat rute root memanggil metode new di pengontrol pengguna. Sekarang, kita hanya perlu menghapus file public/index.html yang menimpa konfigurasi ini. Setelah Anda menghapusnya, jalankan perintah berikut di baris perintah:

Anda juga bisa menjalankan rails s untuk mencapai hasil yang sama. Seperti yang Anda harapkan, ini memulai server rel. Anda sekarang dapat mengarahkan browser Anda ke localhost:3000/, dan Anda akan melihat yang berikut:

Sekarang, isi formulir dan klik "Create Account." Anda harus dikirim ke profil pengguna, seperti ini:

Hebat! Sekarang kita memiliki akun pengguna yang berfungsi. Mari kita lakukan ini:


Langkah 6: Menambahkan Dukungan Sesi

Meskipun kita menerapkan fitur pengguna, pengguna belum dapat masuk. Jadi, mari kita tambahkan dukungan sesi selanjutnya.

Anda mungkin telah mengenali cara kita membuat akun pengguna.

Saya telah mengambil metode umum ini dari Railscast episode 250. Episode itu juga menunjukkan cara membuat dukungan sesi, dan saya akan menggunakan pendekatan itu untuk Ribbit.

Dimulai dengan membuat pengontrol untuk mengelola sesi. Kita tidak akan benar-benar menyimpan sesi dalam database, tetapi harus dapat mengatur dan menyetel variabel sesi. Pengontrol adalah cara yang benar untuk melakukan itu.

Di sini, Kita membuat pengontrol baru, yang disebut sessions. Kita juga mengatakannya untuk menghasilkan metode new, create, dan destroy. Tentu saja, itu tidak akan mengisi metode ini, tetapi itu akan menciptakan "shell" mereka untuk.

Sekarang, mari buka file app/controllers/sessions_controller.rb. Metode new baik-baik saja, tetapi metode create perlu perhatian. Metode ini dijalankan setelah pengguna memasukkan kredensial mereka dan mengklik "Log In." Tambahkan kode berikut:

Kita menggunakan metode find_by_username pada kelas User untuk mengambil pengguna dengan nama pengguna yang disediakan. Kemudian, kita memanggil metode authenticate, meneruskannya kata sandinya. Metode ini ditambahkan sebagai bagian dari fitur use_secure_password. Jika kredensial pengguna diterima, kita dapat menetapkan variabel sesi user_id ke ID pengguna. Akhirnya, kita mengarahkan kembali ke rute root dengan pesan "Masuk!".

Jika kredensial pengguna gagal untuk mengotentikasi, kita hanya mengarahkan ke rute root dan mengatur pesan kesalahan flash ke "Nama pengguna atau kata sandi salah."

Logging out akan memadamkan metode destroy. Ini adalah metode yang sangat sederhana:

Kode ini cukup jelas; hilangkan saja variabel sesi itu dan arahkan kembali ke root.

Rel membantu kita keluar sekali lagi dan menambahkan tiga rute untuk metode ini, ditemukan di config/routes.rb:

Kita ingin mengubah sessions/create rute ke POST, seperti ini:

Kita hampir siap untuk menambahkan formulir masuk ke tampilan. Tapi pertama-tama, mari kita buat metode pembantu yang memungkinkan kita untuk dengan cepat mengambil pengguna yang saat ini masuk. Kita akan menempatkan ini di pengontrol aplikasi sehingga dapat mengaksesnya dari file tampilan apa pun. Jalur ke pengontrol aplikasi adalah app/controllers/application_controller.rb.

Kita melewati User.find session[:user_id] variabel yang ditetapkan di pengontrol sesi. Panggilan ke helper_method inilah yang menjadikan ini metode pembantu yang dapat kita panggil dari tampilan.

Sekarang, kita dapat membuka file app/views/layouts/application.html.erb dan menambahkan form login. Lihat <span>Twitter Clone</span>  di elemen <header>? Kode berikut berjalan tepat setelah itu:

Jika pengguna masuk (atau, jika nilai non-nil dikembalikan dari current_user), kita menampilkan tautan keluar, tetapi kita akan menambahkan lebih banyak tautan di sini nanti. Anda mungkin belum pernah melihat metode link_to sebelumnya; dibutuhkan teks dan URL yang disediakan dan menghasilkan hyperlink.

Jika tidak ada pengguna yang masuk, kita menggunakan metode form_tag untuk membuat formulir yang memposting ke seesions_create_path.

Perhatikan bahwa tidak dapat menggunakan metode form_for karena kita tidak memiliki objek instance untuk formulir ini (seperti dengan objek pengguna kita). Metode text_field_tag dan password_field_tag menerima parameter yang sama: nama untuk bidang sebagai simbol, nilai untuk bidang (nil dalam kasus ini), dan kemudian objek opsi. Kita hanya menetapkan nilai placeholder di sini.

Ada sedikit kesalahan dalam dukungan sesi kita: pengguna tidak masuk secara otomatis, setelah mereka membuat akun pengguna baru. Kita dapat memperbaikinya dengan menambahkan satu baris ke metode create di kelas UserController. Tepat setelah baris if @user.save, tambahkan:

Percaya atau tidak, baris kode di atas menyelesaikan fitur sesi. Anda sekarang harus dapat memulai kembali server Rails dan masuk. Coba keluar dan masuk lagi. Satu-satunya perbedaan antara dua fungsi adalah kurangnya formulir masuk saat Anda masuk. Namun kita akan menambahkan lebih banyak nanti!

Mari kita melakukan ini:


Langkah 7: Membuat Ribbits

Sekarang Kita akhirnya siap untuk mencapai tujuan aplikasi: membuat Ribbits (versi tweets). Kita mulai dengan membuat sumber ribbit:

Sumber daya ini hanya membutuhkan dua bidang: konten sebenarnya dari ribbit, dan id dari pengguna yang membuatnya. Kita akan memigrasi database untuk membuat tabel baru. Kemudian, kita akan membuat beberapa modifikasi pada model Ribbit yang baru. Buka app/models/ribbit.rb dan tambahkan yang berikut:

Panggilan default_scope penting; itu memesan daftar ribbits dari yang terbaru sampai yang paling baru. Metode belongs_to menciptakan hubungan antara kelas Ribbit dan kelas Pengguna, membuat objek pengguna kita memiliki array tweet sebagai properti.

Akhirnya, kita memiliki panggilan validates, yang memastikan bahwa pita tidak melebihi 140 karakter.

Oh, ya: sisi lain dari pernyataan belongs_to. Di kelas Pengguna (app/models/user.rb), kita ingin menambahkan baris ini:

Ini melengkapi asosiasi; sekarang setiap pengguna dapat memiliki banyak pita.

Kita ingin pengguna memiliki kemampuan untuk membuat ribbits dari halaman profil mereka. Seperti yang Anda ingat, kita memiliki formulir di templat itu. Jadi mari ganti form itu di app/view/users/show.html.erb, serta buat beberapa perubahan lainnya. Inilah yang Anda harus berakhir dengan:

Ada tiga area yang kami ubah dengan kode ini. Pertama, kita menghapus formulir HTML di bagian atas dan menggantinya dengan panggilan ke form_for fungsi pembantu. Tentu saja, masuk akal bahwa kita hanya membutuhkan area teks untuk konten (kita sudah tahu ID pengguna saat ini). Perhatikan bahwa form_for menerima @ribbit sebagai parameter, dan kita perlu menambahkan objek itu ke metode users_controller#show (app/controllers/users_controller.rb):

Perhatikan bahwa kita membungkus seluruh bagian formulir (<div id="createRibbit">) dengan pernyataan if. Jika tidak ada pengguna saat ini (artinya tidak ada yang masuk), kita tidak akan menampilkan bentuk pita.

Selanjutnya, kita ingin menampilkan jumlah pita pengguna. Angka itu muncul tepat di atas jumlah pengikut mereka. Ingat bahwa contoh pengguna kita memiliki properti ribbits. Jadi, kita dapat mengganti teks pengisi dengan ini:

Kita harus menunjukkan ribbits milik pengguna. Kita bisa mengulang di atas ribbits yang sama, dan menampilkan setiap ribbit secara bergantian. Itu bagian terakhir dari kode di atas.

Terakhir, (setidaknya sejauh pembuatan ribbit yang bersangkutan), kita perlu memodifikasi metode create di kontroler ribbits (app/controllers/ribbits_controller.rb. Metode ini dijalankan ketika pengguna mengklik tombol "Ribbit!".

Saya tahu "Masalah!" Pesan kesalahan tidak terlalu deskriptif, tetapi akan dilakukan untuk aplikasi sederhana kita. Sungguh, satu-satunya kesalahan yang bisa terjadi adalah sebuah ribbit yang lebih panjang dari 140 karakter.

Jadi, cobalah: memulai server (rails server), masuk, buka halaman profil Anda (http://localhost:3000/user/, tapi tentu saja, setiap halaman profil pengguna akan lakukan), menulis sebuah ribbit, dan klik "Ribbit!". Ribbit baru harus ditampilkan dalam daftar ribbit di halaman profil Anda.

Oke, mari kita lakukan perubahan ini:


Langkah 8: Membuat Halaman Tweet Publik

Selanjutnya, kita membuat halaman publik yang mencakup semua ribbits yang dibuat oleh semua pengguna. Logikanya, itu harus menjadi tampilan index ribbits, ditemukan di /ribbits. Metode pengontrol untuk ini adalah ribbits_controler#index. Ini sebenarnya metode yang sangat sederhana:

Baris pertama menjemput semua ribbits dan pengguna yang terkait, dan baris kedua menciptakan contoh ribbit baru (halaman ini akan memiliki bentuk ribbit).

Langkah lainnya, tentu saja, adalah template (app/view/ribbits/index.html.erb). Ini mirip dengan template profil pengguna:

Dalam template ini, gambar avatar dan nama pengguna dikelilingi oleh tautan yang menunjuk ke halaman profil pengguna. Mari juga tambahkan tautan ke halaman tweet publik. Tepat sebelum tautan keluar di app/view/layouts/application.html.erb, tambahkan ini:

Akhirnya:


Langkah 9: Mengikuti Pengguna Lain

Itu tidak akan menjadi klon Twitter jika kita tidak bisa mengikuti pengguna lain, jadi mari kita kerjakan fitur itu selanjutnya.

Ini sedikit rumit pada awalnya. Pikirkan tentang itu: catatan User kita harus mengikuti catatan User lain dan diikuti oleh catatan User lainnya. Ini adalah asosiasi banyak-ke-banyak, bergabung sendiri. Ini berarti kita akan membutuhkan kelas asosiasi, dan kita akan menyebutnya "Hubungan". Mulai dengan membuat sumber daya ini:

Model ini hanya membutuhkan dua bidang: ID pengikut, dan ID yang diikuti (catatan: terminologi di sini bisa sedikit membingungkan. Dalam kasus kita saya menggunakan istilah "diikuti" untuk mengartikan pengguna, baik, diikuti) .

Selanjutnya, kita ingin menghubungkan model User dengan model Relantionship ini, yang dilakukan dari kedua sisi. Pertama, di kelas Relantionship (app/models/relationship.rb), kita ingin menambahkan dua baris ini:

Baris pertama menghubungkan catatan User ke bidang follower_id, dan baris kedua menghubungkan catatan User ke bidang followed_id. Sangat penting untuk memasukkan nama kelas, karena Rails tidak dapat menyimpulkan kelas dari nama properti ('pengikut' dan 'diikuti'). Namun, ini bisa menyimpulkan bidang database yang benar (follower_id dan followed_id) dari nama-nama itu.

Sekarang, di kelas User (app/model/user.rb), pertama-tama kita harus menghubungkan setiap model pengguna ke hubungan terkaitnya:

Kita perlu membuat dua asosiasi, karena kita memiliki dua set hubungan per pengguna: semua orang yang mengikuti mereka dan semua orang yang mereka ikuti. Dan tidak, kunci asing itu tidak boleh diganti. Asosiasi follower_relationship bertanggung jawab untuk semua pengikut Anda. Oleh karena itu, perlu kunci asing yang followed_id.

Kemudian, kita dapat menggunakan hubungan tersebut untuk mendapatkan pengikut di sisi lain dari mereka:

Ini memberi pengguna kita mencatat metode followers dan followeds. Keduanya adalah metode yang mengembalikan array pengikut kita atau orang yang diikuti.

Akhirnya, mari tambahkan dua metode ke model user yang membantu kita dengan UI:

Mari lakukan perubahan ini sebelum menyesuaikan UI.

Sekarang, UI semuanya ada di halaman profil pengguna, yaitu app/views/users/show.html.erb. Kita akan mulai dengan sesuatu yang sederhana: pengikut dan jumlah berikut. Lihat di mana kita punya ini?

Kita akan mengganti nilai-nilai placeholder ini, seperti:

Kita memiliki tombol follow/unfollow di bawah jumlah ini, tetapi ada beberapa negara yang perlu dipertimbangkan. Pertama, kita tidak ingin menampilkan tombol apa pun jika pengguna melihat profil mereka sendiri atau jika mereka tidak masuk. Kedua, kita ingin menampilkan tombol "Unfollow" jika pengguna sudah mengikuti pemilik profil ini.

Sumber Rails pada dasarnya adalah model, pengontrol yang terkait, dan beberapa file lainnya.

Letakkan kode ini tepat di bawah paragraf yang memegang rentang di atas.

Bentuknya adalah bagian yang lebih rumit di sini. Pertama, jika pengguna saat ini sudah mengikuti pengguna yang dilihat, kita akan menggunakan form_tag untuk membuat formulir yang masuk ke relationship_path. Tentu saja, kami tidak dapat lupa untuk menetapkan method sebagai delete karena kita menghapus suatu hubungan.

Jika pengguna saat ini tidak mengikuti pengguna yang dilihat, akan membuat form_for hubungan saat ini. Kita hanya akan menggunakan bidang tersembunyi untuk menentukan pengguna mana yang akan diikuti.

Jika Anda memperhatikan, Anda akan tahu bahwa ada sesuatu yang hilang: kemampuan untuk memanipulasi contoh hubungan dari tampilan ini. Kita membutuhkan contoh Relationship. Jika pengguna saat ini sudah tidak mengikuti pengguna ini, kita perlu menciptakan hubungan yang kosong. Sebaliknya, kita perlu memiliki hubungan di tangan untuk menghapus! Kembali ke app/controllers/users_controller.rb, dan tambahkan baris berikut ke metode Tampilkan:

Ini sedikit berbeda dari cara biasa menemukan atau membuat catatan. Ini menginisialisasi instance Relationship kosong jika tidak ada catatan yang ditemukan yang cocok dengan parameter where. Tentu saja, kita hanya ingin melakukan ini jika ada current_user.

Rute untuk model ini diaktifkan oleh resources :relationship di config/routes.rb, jadi kita tidak perlu khawatir tentang itu.

Sekarang, di app/controllers/relationships_controller.rb, kita akan mulai dengan metode new:

Barang-barang standar cantik sekarang, kan? Kita akan membuat hubungan, menyimpannya, dan mengarahkan kembali ke profil pengguna.

Metode destroy juga sederhana:

Sekarang, buat pengguna lain (atau empat) dan memiliki beberapa pengguna mengikuti pengguna lain. Anda harus melihat teks tombol ikuti berubah, serta jumlah pengikut / berikut.

Hebat! Sekarang kita dapat melakukan fitur ini:


Langkah 10: Membuat beberapa halaman lain

Ada beberapa halaman sederhana lainnya yang ingin ditambahkan. Pertama, mari buat halaman untuk mendaftar semua pengguna terdaftar. Ini akan menjadi tempat yang bagus untuk menemukan teman baru, melihat halaman mereka, dan akhirnya mengikuti mereka. Logikanya, ini seharusnya adalah rute /users, jadi kita akan menggunakan metode UserController#index:

Sekarang, untuk app/views/users/index.html.erb:

Terakhir, mari tambahkan tautan ke halaman ini ke bagian atas template kita. Mari juga tambahkan tautan ke profil pengguna yang sudah masuk. Tepat di samping tautan "Public Ribbits", tambahkan:

Selanjutnya adalah halaman teman. Di sinilah pengguna pergi untuk melihat ribbits dari orang yang mereka ikuti; kita juga akan mengalihkan pengguna ke halaman ini saat mereka masuk dan melihat halaman beranda.

Anehnya, menemukan tempat yang tepat dalam kode untuk halaman ini agak sedikit rumit. Lagi pula, setiap halaman di aplikasi Rails kita harus didasarkan pada metode di salah satu pengendali. Praktik terbaik menyatakan bahwa setiap kontroler memiliki enam metode REST yang mengontrol sumber. Dalam hal ini, kita ingin melihat bagian-bagian dari sebagian kecil dari pengguna, yang, setidaknya bagi saya, tampaknya sedikit kasus tepi. Beginilah cara mengatasinya: ayo buat metode buddies di UserController:

Tentunya, tidak ada yang perlu ditunjukkan jika seorang pengguna tidak masuk, jadi kita akan memeriksa current_user. Jika tidak masuk, kita mengarahkan ke URL root (/). Kalau tidak, kita membuat ribbit baru (untuk bentuk ribbit baru).

Kita kemudian perlu mencari semua ribbits dari pengguna saat ini dan orang-orang yang mereka ikuti.

Kita bisa menggunakan properti array followeds, dan memetakannya hanya untuk mengambil id pengguna. Kemudian, kita memasukkan id pengguna saat ini juga dan akhirnya mengambil kembali pita dari para pengguna tersebut.

Mari simpan template di app/views/users/buddies.html.erb; ini sangat mirip dengan template ribbits publik kita:

Kita perlu membuat rute untuk metode ini, untuk menggunakannya. Buka config/routes.rb dan tambahkan yang berikut:

Sekarang, kita dapat pergi ke /buddies dan melihat halaman!

Namun ada hal lain yang ingin kita lakukan dengan hal ini. Jika pengguna yang masuk masuk ke URL root, kita perlu mengalihkan mereka ke /buddies. Ingat, rute ini saat ini:

Mari kita ubah ke ini:

Kita juga harus menambahkan tautan ke halaman teman di app/views/layouts/application.html.erb:

Dan sekarang, kita akan melakukan perubahan ini:


Langkah 11 Menyebarkan ke Heroku

Langkah terakhir adalah menerapkan aplikasi. Kita akan menggunakan Heroku.

Langkah terakhir adalah menerapkan aplikasi. Kita akan menggunakan Heroku. Saya akan berasumsi bahwa Anda memiliki akun Heroku, dan bahwa Anda telah menginstal Heroku toolbelt (alat baris perintah).

Kita mengalami masalah bahkan sebelum memulai! Kita telah menggunakan database SQLite, karena Rails menggunakan SQLite secara default. Namun, Heroku tidak menggunakan SQLite; ia menggunakan PostgreSQL untuk database. Kita harus membuat perubahan pada Gemfile, perubahan yang benar-benar melanggar salinan lokal kita dari aplikasi (kecuali Anda menginstal dan mengkonfigurasi server PostgreSQL). Inilah kompromi saya: Saya akan menunjukkan cara melakukannya di sini, dan Anda dapat bermain dengan versi yang saya sebar. Tetapi Anda tidak membuat perubahan pada proyek lokal Anda.

Untungnya, beralih Rails ke PostgreSQL sangat sederhana. Di Gemfile kita, ada garis yang terlihat seperti ini:

Ubah baris itu menjadi ini:

Kita sekarang harus menginstal permata ini secara lokal, untuk memperbarui Gemfile.lock. Kita melakukan ini dengan menjalankan:

Dan kita berkomitmen:

Kita sekarang dapat membuat aplikasi Heroku. Di direktori proyek, jalankan:

Dan akhirnya:

Itu membuka browser Anda dengan aplikasi Heroku yang Anda terapkan. Anda dapat bermain dengan salinan yang saya kirimkan.


Itu dia!

Dan begitulah! Kita baru saja membuat klon Twitter yang sangat sederhana. Tentu, ada lusinan fitur yang bisa ditambahkan ke ini, tetapi kita memaku bagian yang paling penting: pengguna, pita, dan yang berikut.

Ingat, jika Rails bukan raket Anda, periksa tutorial lain dalam seri ini! Kami memiliki serangkaian tutorial Ribbit yang menggunakan berbagai bahasa dan kerangka kerja dalam pipa. Tetap ikuti!

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