Phoenix LiveView: ketika kode javascript menyenangkan *

* Karena ketidakhadirannya

Kelanjutan artikel tentang Phoenix Live View . Hari ini saya akan menjelaskan konfigurasi dasar untuk pekerjaan yang nyaman dengan teknologi dan membuat aplikasi baru.

Instal elixir dan phoenix

Kami membutuhkan elixir (proses instalasi dengan referensi). Tapi di windows lebih baik menempatkan buruh pelabuhan atau gelandangan. Saya akan berasumsi bahwa Anda sudah mengetahui teknologi ini. Kami mengabaikan basis data, lebih baik mempertimbangkan bekerja dengan mereka di proyek lain.

Setelah menginstal elixir, instal phoenix (tautan untuk referensi rumah). Bahkan, kita perlu memastikan versi ramuan yang diperlukan

elixir -v 

Harus mengeluarkan 1.8.2 sebagai relevan untuk hari ini. Dan mulai instalasi phoenix itu sendiri

 mix archive.install hex phx_new 1.4.6 

1.4.6 relevan untuk hari ini, Anda dapat melihat versi saat ini di sini. Proyek ini akan menggunakan webpack, keluar dari kotak di phoenix dan jadi kita perlu nodejs .

IDE

Memilih IDE adalah sakit kepala, tetapi bagi saya sendiri, saya memutuskan untuk mengembangkan rubymine, ada plugin yang sangat baik yang disebut elixir. Skema warna sobek menjadi jelas dari waktu ke waktu dan saya tidak ingin kembali ke vscode lagi, tetapi saya ingin mengatakan bahwa dukungan elixir juga diimplementasikan dengan sangat baik melalui plug-in yang sesuai, saya merekomendasikannya untuk pecinta kode.

Pembuatan proyek

Buat folder yang nyaman untuk menyimpan proyek di elixir dan pergi ke konsol:

 cd ~/ElixirProjects/ mix help #    mix help phx.new #           mix phx.new fire --no-ecto #   fire           Fetch and install dependencies? [Yn] #   

Kompilasi akan memakan waktu

 cd fire mix phx.server 

Jika semua dependensi berhasil diinstal dan sesuatu seperti [info] Access FireWeb.Endpoint at http://localhost:4000 maka kami dengan berani membuka browser http: // localhost: 4000 . Muat ulang halaman beberapa kali dan kembali ke terminal. Di sana Anda akan menemukan log yang menarik, di mana µs adalah mikrodetik, dan FireWeb.PageController.index adalah nama fungsi yang memproses permintaan Anda. Mari kita buka kode di IDE dan lanjutkan.

Bagaimana cara mengatasinya?

Semua kode utama akan berada di folder lib. Temukan file lib / fire_web / templates / page / index.html.eex, hapus bagian kedua, simpan dan kembali ke browser. Anda tidak perlu memuat ulang halaman, phoenix akan melakukannya untuk Anda. Mesin template untuk memasukkan kode yang dapat dieksekusi dengan output dari hasil membutuhkan input karakter <%= dan %> . Di bagian bawah template, masukkan <%= "Fire man" %> dan lihat hasilnya di browser. Agar server berhenti bekerja, klik dua kali ctrl + c di konsol

Ringkasan

Pada tahap ini, Anda harus memiliki lingkungan yang siap pakai untuk eksperimen. Jangan ragu untuk membuat proyek lain. Lihatlah perbedaan dalam kode proyek jika Anda membuatnya tanpa --no-ecto atau menambahkan --umbrella (membuat arsitektur microservice). Untuk pekerjaan lebih lanjut, Anda perlu mengetahui tipe data dasar. Dianjurkan untuk membiasakan diri dengan dua sumber Pelajaran dalam Bahasa Rusia dan Dokumentasi Resmi dalam Bahasa Inggris. Elixirschool sebagian diterjemahkan ke dalam bahasa Rusia dan saya akan merekomendasikan untuk mulai belajar bahasa dari sumber ini. Jika Anda benar-benar ingin membuat aplikasi di liveview maka di sini ada artikel yang akan kami bangun di masa depan.

Bergabunglah dengan komunitas @proelixir berbahasa Rusia dan saksikan berita dan lowongan terbaru di saluran @proelixir_news.