MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Terdapat banyak cara untuk menstruktur sebuah aplikasi menggunakan teknologi web, dan membuat keputusan perancangan organisasi mengambil masa. Mujurlah, apabila bekerja dengan alat arahan baris seperti Ember CLI, struktur aplikasi telah ditentukan untuk anda. Ini memudahkan pementasan sumber-sumber baru atau templat-templat dan mengautomasikan tugas-tugas yang berulang kali, membolehkan anda dengan lebih banyak masa untuk fokus pada peningkatan aplikasi anda. Artikel ini merangkumi topik untuk memasang Ember CLI dan menggunakannya untuk membina rangka asas aplikasi untuk anda bina di atasnya.

Apa yang akan kita cipta?

Kita akan mencipta sebuah aplikasi MVC ringkas yang dinamakan world-clock, di mana ia akan memaparkan waktu tempatan, mengemaskininya setiap saat, dan membenarkan anda untuk memilih zon waktu tambahan untuk dipaparkan. Anda boleh melihat demo aplikasi tersebut, dan memeriksa kod sumber lengkap di Github.

Memasang set alatan kita

Untuk memasang Ember/Ember CLI, anda perlu mengikuti arahan-arahan di bahagian ini.

Nota: Anda akan menggunakan arahan baris dengan banyak dalam siri-siri artikel ini. Jika anda kurang pasti bagaimana untuk mengakses arahan baris, jangan risau - set arahan ini akan menerangkannya. Setiap sistem operasi mempunyai alat arahan baris yang telah diprapilih.

Kita juga akan menggunakan sebahagian pustaka Javascript tambahan yang akan memudahkan kita untuk mengimplementasi ciri-ciri aplikasi yang sukar.

  • Handlebars untuk menulis templat-templat aplikasi. Ember akan menambahkannya secara automatik.
  • LocalForage untuk menyimpan dan menguruskan data luar talian. Kami akan menunjukkan bagaimana untuk memasangnya selepas ini.
  • Moment Timezone akan menyediakan senarai zon waktu yang tersedia, dan membenarkan kita untuk mudah membentuknya dalam cara yang lebih mudah dibaca. Kita juga akan lihat bagaimana untuk memasangnya selepas ini.

Mulakan dengan mengikuti langkah-langkah ini:

  1. Anda perlu pasang Git untuk menggunakan sebahagian fungsi ember. Pasang ia sekarang.
  2. Ember CLI memerlukan Node.js. Pergi ke sini untuk memuat turun dan memasang Node sebelum meneruskan ke langkah seterusnya.
  3. Buka Terminal atau Command Prompt anda.
  4. Pasang Ember CLI menggunakan node package manager (NPM):

    npm install -g ember-cli
  5. Untuk mengesahkan pemasangan anda berjaya, taip:

    ember -v

Nota: Jika anda mendapat ralat kebenaran, atau EACCESS dan anda menggunakan platform Linux, Mac OS X, atau perisa Unix yang lain, anda mungkin menghadapi isu dengan pemilikan direktori .npm. Salah satu penyelesaiannya adalah menggunakan arahan chown pada alat arahan baris, iaitu, menggantikan path ke direktori .npm anda: sudo chown -R $USER /Users/[YOUR USER NAME]/.npm.

Mencipta rangka asas aplikasi anda

Walaupun kita memberikan tanggungjawab yang wajar kepada Ember CLI, ianya masih amat penting untuk anda menyesuaikan diri dengan bagaimana projek-projek ini disusun atur. Mari mulakan dengan mencipta projek baru. Kita akan menjana rangka asas aplikasi dan menyampaikannya setempat untuk dipaparkan di dalam pelayar web.

  1. Langkah pertama ialah memikirkan nama yang pendek,mudah diingati untuk projek anda — dalam kes ini kita akan menggunakan world-clock.
  2. Daripada terminal atau command line anda, navigasikan ke direktori yang mudah diingati di dalam pemacu keras anda di mana anda ingin mencipta aplikasi anda:

    cd path-to-directory
  3. Cipta projek baru anda menggunakan arahan tersebut:

    ember new world-clock

    Ember akan menjana direktori baru yang mengandungi projek anda di dalam direktori semasa. Folder ini mengandungi semua alatan dan sumber yang diperlukan untuk aplikasi Ember asas. Walaupun ia kelihatan banyak untuk dijejaki, anda akan mendapati struktur ini menyediakan fleksibiliti yang hebat apabila anda ingin menambah lebih fungsi kepada aplikasi anda.

  4. Ubah direktori ke punca direktori projek anda dan lihat-lihatlah:

    cd world-clock
    ls      # use the dir command instead on Windows
    

Memulakan aplikasi anda

Sementara anda menyunting fail-fail aplikasi anda, Ember CLI akan secara automatik menghimpun dan memproses skrip anda untuk anda. Ember CLI juga menyediakan pelayan pembangunan yang membenarkan anda untuk melihat dan menyahpijat perubahan ketika anda membuatnya. Untuk memulakan aplikasi anda:

  1. Dari punca direktori projek anda, jalankan arahan tersebut:

    ember serve
  2. Jika anda mendapat mesej Run 'bower install' to install missing dependencies, jalankan arahan bower install di dalam command line/terminal kemudian cuba ember serve sekali lagi.
  3. Mesej lain yang boleh muncul adalah 'ENOGIT is not install or not in the PATH' — ini bermakna Git tidak disediakan;pasang Git kemudian cuba sekali lagi.
  4. Buka pelayar web anda dan navigasikan ke http://localhost:4200/. Anda sepatutnya dapat melihat sebuah laman dengan tajuk tunggal "Welcome to Ember.js"

Struktur Aplikasi Ember

Anda akan dapat mempelajari lebih banyak tentang struktur aplikasi Ember sementara anda meletakkan usaha anda kepada bahagian-bahagian seterusnya panduan ini.

Silalah lihat sekali lagi struktur direktori menggunakan ls/dir.(atau lihat melalui tetingkap pelayar fail jika anda suka)

  • Anda akan dapat melihat direktori dist di dalam struktur aplikasi. Setiap kali Ember CLI membina aplikasi anda, ia menempatkan fail akhir sedia untuk pengeluaran aplikasi anda di dalam direktori tersebut. Anda sepatutnya jangan sekali-kali mengedit mana-mana fail ini secara langsung, kerana ia akan ditulis ganti bila-bila masa Ember CLI membina fail anda.
  • Anda juga akan dapat melihat direktori app: di sinilah di mana anda membuat sebarang perubahan secara langsung kepada kod aplikasi anda. Kandungan direktori ini dibina kemudian disalin ke dalam dist apabila anda menjalankan ember serve.
  • Terdapat juga direktori awam, di mana anda meletakkan aset mentah seperti tulisan atau gambar yang tidak memerlukan sebarang kompilasi.
  • Terdapat fail package.json di dalam direktori punca anda, yang mana mengandungi maklumat konfigurasi, seperti nama aplikasi, dan kebergantungan yang ia ada.
  • Di dalam direktori punca, anda juga akan dapat menjumpai Brocfile.js, yang mana mengandungi perincian semua pustaka pihak ketiga, aset-aset, dan lain-lain. yang perlu dimasukkan sekali apabila aplikasi anda dibangunkan.Kompilasi aset Ember CLI adalah berdasarkan alat saluran aset: Brocfile.js ialah fail spesifikasi pembinaan broccoli.

Nota: Penerangan yang lebih terperinci struktur aplikasi boleh dijumpai di dalam dokumentasi Ember.

Seterusnya

Kita kini sudah mempunyai aplikasi baru berjalan setempat di mana kita boleh mulakan kerja. Seterusnya, kami akan mendemonstrasikan bagaimana untuk menambah route kepada aplikasi anda yang memaparkan kandungan daripada templat yang berkaitan.

 

Tag Dokumen dan Penyumbang

 Penyumbang untuk halaman ini: arerifx
 Terakhir dikemaskini oleh: arerifx,