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

Erlang dan Elixir, Bagian 5: Phoenix Framework

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Introduction to Erlang and Elixir.
Erlang and Elixir, Part 4: Control Flow

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

Sejauh ini kita telah melihat bagaimana menggunakan tipe data dasar dan prinsip-prinsip pengkodean Erlang VM melalui bahasa Elixir. Sekarang kita akan pergi lingkaran penuh dan membuat aplikasi web yang bekerja menggunakan Phoenix Web Framework.

Phoenix menggunakan pola sisi server MVC dan pada kenyataannya adalah lapisan teratas dari sistem modular multi-layer yang mencakup Plug (spesifikasi modular yang digunakan untuk Routing, Controller, dll.), Ecto (DB wrapper untuk MongoDB, MySQL, SQLite3, PostgreSQL , dan MSSQL) dan server HTTP (Cowboy).

Phoenix struktur akan tampak akrab dengan Django Python atau Ruby on Rails. Baik kinerja aplikasi dan kecepatan pengembangan merupakan faktor kunci dalam desain Phoenix, dan ketika dikombinasikan dengan fitur real-time, mereka memberikannya potensi kuat sebagai kerangka kerja aplikasi web berkualitas produksi.

Persiapan

Elixir diperlukan, jadi silakan lihat petunjuk pemasangan di awal seri ini.

Kami juga akan membutuhkan Hex untuk mendapatkan Phoenix bekerja (untuk menginstal dependensi). Inilah perintah untuk menginstal Hex (jika Anda sudah memasang Hex, itu akan meng-upgrade Hex ke versi terbaru):

Jika Anda belum mengenal bahasa Elixir, bolehkah saya merekomendasikan Anda untuk terus membaca langkah pertama dari panduan ini sebelum melanjutkan di bagian ini.

Perhatikan bahwa jika Anda ingin membaca panduan singkat, Anda juga dapat merujuk ke Belajar Elixir dan Erlang Guide yang disediakan oleh tim Phoenix.

Erlang

Catatan: Secara default, ini sudah termasuk dalam instalasi Elixir.

Untuk menjalankan Elixir, kita perlu Erlang virtual machine karena kode Elixir mengkompilasi kode byte Erlang.

Jika Anda menggunakan sistem berbasis Debian, Anda mungkin perlu menginstal Erlang secara eksplisit untuk mendapatkan semua paket yang dibutuhkan.

Phoenix

Jadi sekarang kami memiliki Elixir dan Erlang untuk mengurus, Anda siap untuk menginstal Mix archive.

Mix archive sama seperti file Zip, kecuali bahwa itu berisi aplikasi serta file BEAM yang dikompilasi dan terkait dengan versi tertentu dari aplikasi.

Mix archive adalah apa yang akan kami gunakan untuk menghasilkan aplikasi basis Phoenix baru yang darinya kami dapat membangun aplikasi kami!

Jalankan perintah berikut di terminal Anda:

Jika Phoenix Mix archive tidak dapat diinstal dengan benar dengan perintah ini, kita dapat mengunduh paket dari Phoenix archives, simpan ke filesystem, dan kemudian jalankan: mix archive.install / path/to/local/phoenix_new.ez.

Node

Kita akan membutuhkan node.js versi 5 atau lebih besar, karena Phoenix akan menggunakan paket brunch.io untuk mengkompilasi aset statis seperti css dan js, yang pada gilirannya menggunakan npm.

Download Node.js dari halaman download. Ketika memilih paket untuk diunduh, penting untuk dicatat bahwa Phoenix memerlukan versi 5.0.0 atau lebih tinggi. 

Pengguna Mac OS X juga dapat menginstal Node.js melalui homebrew.

Jika Anda memiliki masalah menginstal Node, lihat di official panduan bantuan Phoenix.

PostgreSQL

Secara default, Phoenix mengonfigurasi aplikasi untuk menggunakan server relasi db PostgreSQL, tetapi kita dapat beralih ke MySQL dengan meneruskan flag --database mysql saat membuat aplikasi baru.

Untuk selanjutnya, saat kami bekerja dengan model Ecto dalam panduan ini, kami akan menggunakan PostgreSQL dan adaptor Postgrex.

Jadi untuk mengikuti contoh, Anda harus menginstal PostgreSQL  PostgreSQL wiki memiliki panduan instalasi untuk sejumlah sistem operasi yang berbeda.

Perhatikan bahwa Postgrex adalah direct Phoenix dependency, dan itu akan secara otomatis terinstal bersama dengan sisa dependensi kita saat kami memulai aplikasi kita.

Default User

Phoenix berasumsi bahwa basis data PostgreSQL kami akan memiliki akun user postgres dengan permission yang benar dan password 'postgres'. Jika itu bukan bagaimana Anda ingin mengatur, silakan lihat instruksi untuk ecto.create mix task untuk menyesuaikan kredensial.

Skeleton Install

Jika Anda hanya ingin bone untuk menjalankan aplikasi phoenix Anda, tanpa Ecto atau Plug (tanpa db atau brunch.io), buat aplikasi Anda dengan yang berikut --no-brunch dan --no-ecto flags:

Pre-Flight Check

Pada titik ini, Anda harus memiliki:

  • Elixir
  • Erlang (secara default yang disediakan oleh instalasi Elixir)
  • Hex
  • Terinstal Phoenix mix archive
  • Selain itu, jika Anda telah memilih dukungan DB dan aset statis, Anda juga akan memiliki PostgreSQL dan Node.js> = 5.0.0, dalam hal ini Anda sekarang akan siap untuk membuat aplikasi Anda.

Membuat aplikasi Anda

Anda dapat menjalankan mix phoenix.new dari direktori mana pun untuk bootstrap aplikasi Phoenix

Untuk proyek baru Anda, Phoenix akan menerima jalur absolut atau relatif; dengan asumsi bahwa nama aplikasi kita adalah hello_world, salah satu dari ini akan berfungsi dengan baik:

Ketika Anda sudah siap, jalankan perintah buat dan Anda akan mendapatkan mirip dengan output berikut:

Jadi di sini Phoenix telah mengurus pembuatan semua struktur direktori dan file untuk aplikasi Anda. Anda dapat melihat apa yang dibuat dengan menavigasi langsung ke file di editor kode pilihan Anda.

Ketika itu selesai, kita melihat prompt meminta dependensi untuk diinstal. Lanjutkan dengan yes:

Setelah semuanya telah diunduh, kita dapat cd ke direktori yang telah digunakan Elixir untuk mengisi file proyek, dan membuat database melalui mix ecto.create.

Catatan: jika ini adalah pertama kalinya Anda menjalankan perintah ini, Phoenix juga dapat meminta menginstal Rebar. Lanjutkan dengan instalasi sebagai Rebar digunakan untuk membangun paket Erlang.

Masalah Database

Jika Anda melihat kesalahan berikut:

Pastikan Layanan PostgreSQL menjalankan dan dapat diakses dengan kredensial pengguna yang disediakan (secara default postgres pengguna dengan password dari "postgres" digunakan).

Mulai Phoenix Web Server!

Kami sekarang dapat memulai server untuk aplikasi Elixir kami! Jalankan perintah berikut ini:

Secara default, Phoenix adalah menerima permintaan pada port 4000.

Kunjungi http://localhost:4000, dan Anda akan melihat halaman Selamat datang Phoenix Framework.

The Phoenix Framework Welcome Page

Jika Anda tidak dapat melihat halaman di atas, coba akses melalui http://127.0.0.1:4000 (jika localhost tidak didefinisikan di OS Anda).

Secara lokal, kita sekarang dapat melihat permintaan sedang diproses di sesi terminal kami karena aplikasi kami berjalan dalam sesi iex. Untuk menghentikan itu, kita menekan ctrl-c dua kali, hanya seperti yang kita akan berhenti iex biasanya.

Customising Aplikasi Anda

Ketika Phoenix menghasilkan aplikasi baru untuk kami, itu membangun struktur direktori tingkat atas, seperti yang akan kita lihat pada bagian berikut di bawah ini.

Kami membuat sebuah aplikasi baru melalui perintah mix phoenix.new, yang menghasilkan aplikasi baru, termasuk struktur direktori seperti itu

Untuk saat ini kami akan bekerja pada direktori web, yang berisi hal-hal berikut:

Untuk mengubah logo di bagian atas halaman, kita perlu mengedit aset statis, yang disimpan di priv/static. Logo yang disimpan dalam direktori sebagai begitu: priv/static/images/phoenix.png.

Jangan ragu untuk menambahkan gambar Anda sendiri di sini; kami akan menautkannya dalam css dan mulai memodifikasi template berikutnya. Secara default, Phoenix akan mengkompilasi semua aset yang statis (misalnya di sini dalam direktori gambar) ke bundel produksi.

Karena ketika kita membutuhkan fase build untuk js atau css, kita menempatkan aset di web/static, dan file sumber dibangun ke dalam bundel app.js/app.css masing-masing di priv/static.

Modifikasi file CSS

Path untuk css Anda adalah web/static/css/phoenix.css. Untuk mengubah logo, lihat ke baris 29-36.

Buat perubahan dan simpan file, dan perubahan akan diperbarui secara otomatis.

Muat ulang peramban web Anda, atau memuat http://localhost:4000.

An Updated Landing Page

Memodifikasi Template

Untuk mengubah isi dari template Anda, cukup lihat di file dalam web/templates/layout dan templates/halaman/web. Anda dapat mulai memodifikasi file untuk melihat perubahan langsung dalam aplikasi Anda.

Phoenix templating engine menggunakan EEx, yang adalah singkatan Embedded Elixir. Semua file template memiliki ekstensi .eex.

Template ditampilkan ke tampilan, yang pada gilirannya dicakup ke pengontrol.

Phoenix membuat sebuah direktori web/templates yang mana kita dapat menempatkan semua ini. Untuk kepentingan organisasi, yang terbaik adalah menamai ini, jadi jika Anda ingin membuat halaman baru, itu berarti Anda perlu membuat direktori baru di dalam web/templates dan kemudian membuat file index.html.eex di dalamnya (misalnya web/templates/<MY-NewPage>/index.html.eex).

Mari kita melakukan itu sekarang. Buat web/templates/about/index.html.eex dan membuatnya terlihat seperti ini:

Views

Di Phoenix, Bagian views MVC desain paradigma melakukan beberapa pekerjaan penting.

Untuk satu, views membuat template. Selain itu, mereka bertindak sebagai lapisan presentasi untuk data mentah dari controller, bertindak sebagai orang tengah dalam mempersiapkan itu untuk digunakan dalam template.

Sebagai contoh, mengambil struktur data hipotetis umum yang mewakili pengguna dengan first_name field dan  last_name field. Sekarang, untuk template, kami ingin menunjukkan nama lengkap pengguna.

Untuk pendekatan yang terbaik, kami menulis fungsi untuk menggabungkan first_name dan last_name dan berikan kepada kami helper dalam view untuk menulis kode template bersih, ringkas dan mudah dibaca.

Untuk membuat setiap template untuk AboutController kami, kami memerlukan AboutView.

Catatan: Nama-nama signifikan di sini-bagian pertama dari nama-nama tampilan dan controller harus cocok.

Membuat web/views/about_view.ex dan membuatnya terlihat seperti ini:

Routing

Untuk melihat halaman baru, Anda akan perlu untuk mengatur rute dan controller untuk lihat dan template.

Seperti Phoenix bekerja pada paradigma MVC, kita perlu untuk mengisi semua bagian. Ini tidak banyak berhasil.

Dalam bahasa Inggris sederhana: Rute memetakan pasangan kata kerja / jalur HTTP unik ke pasangan pengontrol / tindakan untuk eksekusi lebih lanjut.

Phoenix secara otomatis menghasilkan router file untuk kita dalam aplikasi baru di web/router.ex. Ini adalah di mana kita akan bekerja untuk bagian berikut ini.

Rute untuk halaman "Welcome to Phoenix!" default terlihat seperti ini.

Ini berarti untuk menangkap semua permintaan yang dibuat dengan mengunjungi http://localhost:4000/ di browser (yang mengeluarkan request HTTP GET) ke jalur aplikasi / root dan mengirim semua permintaan tersebut ke fungsi index di modul HelloPhoenix.PageController didefinisikan dalam web/controllers/page_controller.ex.

Halaman kita akan membangun akan berkata "About my app" ketika kami menunjuk browser kita untuk http://localhost:4000/about. Anda dapat mengisi informasi lebih lanjut untuk sesuai dengan aplikasi Anda dalam template, jadi hanya pergi ke depan dan menulis dalam HTML Anda!

Rute baru

Untuk halaman tentang kami, kami perlu menentukan rute. Jadi, cukup buka web/router.ex di editor teks. Secara default, itu akan berisi berikut; untuk informasi lebih lanjut tentang routing, lihat panduan Routing resmi.

Untuk bagian tentang kami, mari tambahkan rute baru ke router untuk permintaan GET ke /about. Itu akan diproses oleh HelloPhoenix.AboutController, yang kita akan membangun dalam bagian selanjutnya.

Untuk GET di /about, tambahkan baris ini untuk scope "/" blok router.ex:

Blok lengkap akan terlihat seperti:

Controller

Kami telah menyiapkan rute, view, dan template. Jadi mari kita sekarang mengumpulkan semua bagian sehingga kita dapat melihat dalam browser.

Controller didefinisikan sebagai Elixir modul, dan action di dalam controller adalah Elixir function. Tujuan tindakan adalah mengumpulkan data apa pun dan melakukan semua tugas yang diperlukan untuk rendering.

Untuk /about rute, kita membutuhkan modul HelloWorld.AboutController dengan index/2 action.

Untuk itu, kita perlu membuat web/controllers/about_controller.ex dan meletakkan kode berikut di dalamnya:

Untuk informasi lebih lanjut pada kontroler, merujuk ke panduan Controllers resmi.

Struktur Controller

Semua actions controller mengambil dua argumen. Yang pertama adalah conn, struct yang memegang beban data tentang request.

Yang kedua adalah params, yang merupakan parameter request. Di sini, kami tidak menggunakan params, dan kami menghindari peringatan kompiler dengan menambahkan _ terkemuka.

Inti dari action ini adalah render conn, "index.html". Ini memberitahu Phoenix untuk menemukan template bernama index.html.eex dan merendernya. Phoenix akan mencari template dalam sebuah direktori yang dinamakan controller kami, jadi web/template/hello.

Catatan: Menggunakan atom sebagai nama template juga akan bekerja di sini: render conn,: index, misalnya dengan menggunakan :index atom. Tapi template akan dipilih didasarkan pada header terima, jadi misalnya "index.html" atau "index.json".

Pengujian rute baru

Mengunjungi http://localhost:4000/about URL akan merender template, controller, view dan rute kami telah mendefinisikan sejauh ini!

The About My App Page

Actions

Jadi sekarang kita telah membuat sebuah halaman dan disesuaikan app sedikit. Tapi bagaimana kita benar-benar melakukan sesuatu dengan input pengguna? Actions.

Request untuk halaman about akan ditangani oleh HelloWorld.AboutController yang menggunakan show action. Seperti yang kita sudah didefinisikan controller di langkah terakhir, kita hanya perlu menambahkan kode cara untuk mempertahankan variabel yang dilewatkan via URL seperti: http://localhost:4000/about/weather.

Kami sekarang akan memodifikasi kode untuk memetakan URL baru GET permintaan param melalui controller dan akhirnya ke template, melalui menggunakan pola pencocokan Elixir.

Tambahkan baris berikut ke modul di web/controllers/about_controller.ex:

Beberapa poin yang menarik di sini:

  • Kami mencocokkan pola dengan params yang dilewatkan ke fungsi acara sehingga variabel appName akan terikat ke nilai dari URL.
  • Untuk contoh kami URL (http://localhost:4000/about/weather), variabel appName akan berisi nilai cuaca.
  • Dalam show action, ada juga dilewatkan argumen ketiga untuk fungsi render: key/value pasangan mana atom  :appName adalah kunci dan variabel appName dilewatkan sebagai nilai.

Daftar lengkap web/controllers/about_controller.ex berbunyi sebagai begitu:

Embedded Elixir

Akhirnya menggunakan variabel dalam template kami pertama, kita perlu membuat file untuk action show kami.

Membuat file web/templates/about/show.html.eex dan tambahkan berikut:

Kami menggunakan EEx khusus < % = %> sintaks untuk tertanam Elixir. Tag pembuka memiliki tanda =, yang berarti bahwa kode Elixir antara akan dieksekusi, dan pada gilirannya output akan mengganti tag.

Kami variabel untuk nama app muncul sebagai @appName. Dalam kasus ini, ini bukanlah sebuah atribut modul, tapi bahkan itu adalah sedikit khusus meta diprogram sintaks yang berdiri di untuk Map.get(assigns, :appName). Hasilnya jauh lebih bagus di mata dan lebih mudah untuk digunakan dalam template.

Menentukan rute

Agar kita dapat melihat rute http://localhost:4000/about/ weather, misalnya, kita perlu menentukan rute untuk menghubungkan dengan aksi show untuk controller yang baru saja kita definisikan.

Sekarang pekerjaan kami sudah selesai! Cobalah dengan mengunjungi URL http://localhost:4000/about/weather.

The Landing Page for Weather

Kesimpulan

Anda sekarang memiliki pengetahuan dasar untuk membuat sebuah aplikasi Phoenix, menyesuaikan grafis dan membuat rute, tindakan, controller dan pemandangan untuk app Anda.

Kami menyentuh tentang setup untuk fitur PostgreSQL Ecto, tetapi untuk pergi ke lebih rinci pada bagian Model paradigma MVC, silakan lanjutkan membaca Anda dalam panduan Ecto.

Interaksi pengguna dan menciptakan otentikasi, misalnya, silakan lanjutkan pembelajaran Anda di panduan Plug atas di Phoenix dokumentasi resmi.

Advertisement
Advertisement
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.