Projek Aplikasi Svelte: Membina UI Aplikasi Berita Planet '

Svelte adalah perpustakaan UI JavaScript baru yang serupa dengan banyak cara untuk perpustakaan UI moden seperti React. Satu perbezaan penting ialah ia tidak menggunakan konsep dom maya.

Dalam tutorial ini, kami akan memperkenalkan Svelte dengan membina permohonan berita yang diilhamkan oleh Daily Planet, akhbar fiksyen dari dunia Superman.

Takeaways Key

Svelte adalah perpustakaan UI JavaScript baru yang tidak menggunakan DOM maya, menjadikannya lebih cepat daripada kerangka yang paling kuat seperti React, Vue, dan Angular. Ia mengalihkan kerja yang diperlukan untuk fasa kompilasi pada mesin pembangunan ketika membina aplikasi.

• Tutorial menyediakan panduan langkah demi langkah untuk membina aplikasi berita yang diilhamkan oleh Daily Planet, sebuah akhbar fiksyen dari dunia Superman. Ini termasuk memulakan projek Svelte, menjalankan pelayan pembangunan tempatan, dan membina bundle akhir.
• Tutorial ini juga merangkumi penggunaan alat degit untuk menghasilkan projek -projek svelte, mengambil data dari titik akhir berita, dan mewujudkan UI untuk aplikasi.
• Setelah membangunkan aplikasi, seseorang boleh membuat bundle pengeluaran dengan menjalankan perintah binaan di terminal dan menjadi tuan rumah aplikasi menggunakan ZEIT Now, platform awan untuk laman web dan fungsi tanpa pelayan.
• tentang Svelte

Svelte menggunakan pendekatan baru untuk membina antara muka pengguna. Daripada melakukan kerja yang diperlukan dalam penyemak imbas, pergeseran svelte yang berfungsi pada fasa kompilasi masa yang berlaku pada mesin pembangunan apabila anda membina aplikasi anda.

secara ringkas, ini adalah bagaimana kerja -kerja Svelte (seperti yang dinyatakan dalam blog rasmi):

Svelte berjalan pada

binaan masa

, menukar komponen anda ke dalam kod

yang sangat efisien yang pembedahan mengemas kini DOM. Akibatnya, anda dapat menulis aplikasi bercita -cita tinggi dengan ciri -ciri prestasi yang sangat baik. Svelte lebih cepat daripada kerangka yang paling kuat (bertindak balas, vue dan sudut) kerana ia tidak menggunakan dom maya dan pembedahan hanya bahagian yang berubah.

Kami akan belajar tentang konsep asas seperti komponen svelte dan bagaimana untuk mengambil dan melepasi array data. Kami juga akan belajar bagaimana untuk memulakan projek Svelte, menjalankan pelayan pembangunan tempatan dan membina bundle akhir.

Prasyarat

anda perlu mempunyai beberapa prasyarat, jadi anda boleh mengikuti tutorial ini dengan selesa, seperti:

kebiasaan dengan HTML, CSS, dan JavaScript (ES6),

node.js dan npm dipasang pada mesin pembangunan anda.
• node.js boleh dipasang dengan mudah dari laman web rasmi atau anda juga boleh menggunakan NVM dengan mudah memasang dan mengurus pelbagai versi nod dalam sistem anda.

Kami akan menggunakan API JSON sebagai sumber berita untuk aplikasi kami, jadi anda perlu mendapatkan kunci API dengan hanya membuat akaun secara percuma dan mengambil perhatian mengenai kunci API anda.

Bermula

Sekarang, mari kita mula membina aplikasi Daily Planet News kami dengan menggunakan alat degit untuk menghasilkan projek svelte.

anda boleh memasang degit secara global pada sistem anda atau menggunakan alat NPX untuk melaksanakannya dari npm. Buka terminal baru dan jalankan arahan berikut:

npx degit sveltejs/template dailyplanetnews

Seterusnya, navigasi di dalam folder projek anda dan jalankan pelayan pembangunan menggunakan arahan berikut:

<span>cd dailyplanetnews
</span><span>npm run dev
</span>

pelayan dev anda akan mendengar dari alamat http: // localhost: 5000. Jika anda melakukan apa-apa perubahan, mereka akan dibina semula dan dilepaskan secara langsung ke dalam aplikasi berjalan anda.

Buka fail main.js projek anda, dan anda harus mencari kod berikut:

<span>import <span>App</span> from './App.svelte';
</span>
<span>const app = new App({
</span>    <span>target: document.body,
</span>    <span>props: {
</span>        <span>name: 'world'
</span>    <span>}
</span><span>});
</span>
<span>export default app;
</span>

Ini adalah di mana aplikasi Svelte dibebaskan dengan membuat dan mengeksport contoh komponen akar, secara konvensional dipanggil aplikasi. Komponen mengambil objek dengan sasaran dan atribut prop.

Sasaran mengandungi elemen DOM di mana komponen akan dipasang, dan prop mengandungi sifat yang kami mahu lulus ke komponen aplikasi. Dalam kes ini, ia hanya nama dengan dunia nilai.

Buka fail app.svelte, dan anda harus mencari kod berikut:

<span><span><span><script</span>></span><span>
</span></span><span><span>    <span>export let name;
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span>h1 {
</span></span></span><span><span>        <span>color: purple;
</span></span></span><span><span>    <span>}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>
<span><span><span><h1</span>></span>Hello {name}!<span><span></h1</span>></span>
</span>

Ini adalah komponen akar permohonan kami. Semua komponen lain akan menjadi anak -anak aplikasi.

Komponen dalam Svelte Gunakan lanjutan .svelte untuk fail sumber, yang mengandungi semua javascript, gaya dan markup untuk komponen.

Eksport Let Nama; Sintaks mencipta komponen komponen yang dipanggil nama. Kami menggunakan interpolasi berubah - {...} - untuk memaparkan nilai yang diluluskan melalui nama prop.

Anda hanya boleh menggunakan JavaScript lama, CSS, dan HTML yang anda kenal untuk membuat komponen Svelte. Svelte juga menambah beberapa sintaks templat ke HTML untuk interpolasi berubah -ubah dan gelung melalui senarai data, dan lain -lain

Oleh kerana ini adalah aplikasi kecil, kita hanya dapat melaksanakan fungsi yang diperlukan dalam komponen aplikasi.

Dalam tag , import kaedah onMount () dari "svelte" dan tentukan API_KEY, artikel, dan pembolehubah URL yang akan memegang kunci API berita, artikel berita yang diambil dan titik akhir yang menyediakan data:

<span><script>
</span>    <span>export let name;
</span>
    <span>import <span>{ onMount }</span> from "svelte";
</span>
    <span>const API_KEY = "<YOUR_API_KEY_HERE>";
</span>    <span>const URL = <span>`https://newsapi.org/v2/everything?q=comics&sortBy=publishedAt&apiKey=<span>${API_KEY}</span>`</span>;
</span>    <span>let articles = [];
</span>
<span></script>
</span>

onMount adalah kaedah kitaran hayat. Inilah tutorial rasmi mengenai perkara itu:

Setiap komponen mempunyai kitaran hayat yang bermula apabila ia dicipta dan berakhir apabila ia dimusnahkan. Terdapat beberapa fungsi yang membolehkan anda menjalankan kod pada saat -saat penting semasa kitaran hayat itu. Yang anda akan gunakan paling kerap ialah OnMount, yang berjalan selepas komponen pertama kali diberikan kepada Dom.

Seterusnya, mari kita gunakan API Fetch untuk mengambil data dari titik akhir berita dan simpan artikel dalam pembolehubah artikel apabila komponen dipasang di DOM:

npx degit sveltejs/template dailyplanetnews

Oleh kerana kaedah pengambilan () mengembalikan janji JavaScript, kita boleh menggunakan sintaks async/menunggu untuk membuat kod kelihatan segerak dan menghapuskan panggilan balik.

Seterusnya, mari tambahkan markup HTML berikut untuk membuat UI aplikasi kami dan memaparkan data berita:

<span>cd dailyplanetnews
</span><span>npm run dev
</span>

Kami menggunakan setiap blok untuk gelung melalui artikel berita dan kami memaparkan tajuk, keterangan, url dan urltoimage setiap artikel.

Logo Planet Harian dan tajuk utama dipinjam dari organisasi berita bukan keuntungan yang diilhamkan oleh DC Comics.

Kami akan menggunakan Kalam, fon tulisan tangan yang boleh didapati dari Google Fonts, jadi buka fail awam/index.html dan tambahkan tag berikut:

<span>import <span>App</span> from './App.svelte';
</span>
<span>const app = new App({
</span>    <span>target: document.body,
</span>    <span>props: {
</span>        <span>name: 'world'
</span>    <span>}
</span><span>});
</span>
<span>export default app;
</span>

Seterusnya, kembali ke fail app.svelte dan tambahkan gaya berikut:

<span><span><span><script</span>></span><span>
</span></span><span><span>    <span>export let name;
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span>h1 {
</span></span></span><span><span>        <span>color: purple;
</span></span></span><span><span>    <span>}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>
<span><span><span><h1</span>></span>Hello {name}!<span><span></h1</span>></span>
</span>

Ini adalah tangkapan skrin aplikasi berita harian kami:

Bangunan untuk Pengeluaran

Setelah membangunkan aplikasi anda, anda boleh membuat berkas pengeluaran dengan menjalankan perintah binaan di terminal anda:

<span><script>
</span>    <span>export let name;
</span>
    <span>import <span>{ onMount }</span> from "svelte";
</span>
    <span>const API_KEY = "<YOUR_API_KEY_HERE>";
</span>    <span>const URL = <span>`https://newsapi.org/v2/everything?q=comics&sortBy=publishedAt&apiKey=<span>${API_KEY}</span>`</span>;
</span>    <span>let articles = [];
</span>
<span></script>
</span>

Perintah akan menghasilkan bundle minified dan siap sedia yang anda boleh menjadi tuan rumah pada pelayan hosting pilihan anda.

Mari kita menjadi tuan rumah aplikasi menggunakan ZEIT sekarang.

Zeit Now adalah platform awan untuk laman web dan fungsi tanpa pelayan yang boleh anda gunakan untuk menggunakan projek anda ke .Now.sh atau domain peribadi.

kembali ke terminal anda dan jalankan arahan berikut untuk memasang sekarang CLI:

<span><script>
</span>    <span>// [...]
</span>
    <span>onMount(async function() {
</span>        <span>const response = await fetch(URL);
</span>        <span>const json = await response.json();
</span>        articles <span>= json["articles"];
</span>    <span>});
</span><span></script>    
</span>

Seterusnya, navigasi ke folder awam dan jalankan perintah sekarang:

<span><span><span><h1</span>></span>
</span>    <span><span><span><img</span> src<span>="https://dailyplanetdc.files.wordpress.com/2018/12/cropped-daily-planet-logo.jpg?w=656&h=146"</span> /></span>
</span>    <span><span><span><p</span> class<span>="about"</span>></span>
</span>            The Daily Planet is where heroes are born and the story continues. We are proud to report on the planet, daily.
    <span><span><span></p</span>></span>
</span><span><span><span></h1</span>></span>
</span>
<span><span><span><div</span> class<span>="container"</span>></span>
</span>
        {#each articles as article}
            <span><span><span><div</span> class<span>="card"</span>></span>
</span>                <span><span><span><img</span> src<span>="{article.urlToImage}"</span>></span>
</span>                <span><span><span><div</span> class<span>="card-body"</span>></span>
</span>                    <span><span><span><h3</span>></span>{article.title}<span><span></h3</span>></span>
</span>                    <span><span><span><p</span>></span> {article.description} <span><span></p</span>></span>
</span>                    <span><span><span><a</span> href<span>="{article.url}"</span>></span>Read story<span><span></a</span>></span>
</span>                <span><span><span></div</span>></span>
</span>            <span><span><span></div</span>></span>
</span>        {/each}

<span><span><span></div</span>></span>
</span>

Itu sahaja! Permohonan anda akan digunakan ke awan. Dalam kes kami, ia boleh didapati dari public-kyqab3g5j.now.sh.

anda boleh mencari kod sumber aplikasi ini dari repositori GitHub ini.

Kesimpulan

Dalam tutorial ini, kami membina aplikasi berita mudah menggunakan Svelte. Kami juga melihat apa yang Svelte dan bagaimana untuk membuat projek Svelte menggunakan alat degit dari npm.

anda boleh merujuk kepada dokumen rasmi untuk tutorial terperinci untuk mengetahui tentang setiap ciri Svelte.

Soalan Lazim (Soalan Lazim) Mengenai Membangun Aplikasi Berita dengan Svelte

Apakah faedah utama menggunakan Svelte untuk membina aplikasi berita? yang secara langsung memanipulasi Dom. Apabila membina aplikasi berita, Svelte menawarkan beberapa faedah. Pertama, ia menyediakan kod yang lebih mudah dan bersih, menjadikannya lebih mudah bagi pemaju untuk memahami dan mengekalkan kod. Kedua, aplikasi Svelte sangat berprestasi. Oleh kerana Svelte berjalan pada masa membina, ia menukarkan komponen aplikasi ke dalam kod imperatif yang sangat efisien yang mengemas kini DOM. Ini menghasilkan masa beban yang lebih cepat dan pengalaman pengguna yang lebih lancar. Akhir sekali, Svelte adalah berasaskan komponen, seperti React dan Vue, yang menjadikannya lebih mudah untuk membina antara muka pengguna yang kompleks. > Menambah artikel baru ke aplikasi Svelte News anda melibatkan membuat komponen baru untuk artikel itu dan kemudian mengimportnya ke dalam komponen induk yang berkaitan. Dalam komponen baru, anda boleh menentukan kandungan artikel dan mana -mana metadata yang berkaitan seperti pengarang dan tarikh yang diterbitkan. Sebaik sahaja komponen dibuat, anda boleh mengimportnya ke dalam komponen induk menggunakan pernyataan import. Kemudian, anda boleh menambahkannya ke kaedah render komponen induk di mana anda mahu artikel muncul. Aplikasi berita Svelte melibatkan membuat komponen carian dan menambah pengurusan negeri untuk menjejaki input carian. Anda boleh menggunakan ciri reaktiviti terbina dalam Svelte untuk mengemas kini artikel yang dipaparkan berdasarkan input carian. Apabila input carian berubah, anda boleh menapis senarai artikel untuk hanya memasukkan yang sepadan dengan input carian. Aplikasi Svelte boleh dicapai dengan menambahkan harta kategori kepada setiap artikel. Harta ini kemudiannya boleh digunakan untuk menapis artikel berdasarkan kategori yang dipilih. Anda boleh membuat komponen kategori yang memaparkan senarai kategori. Apabila kategori dipilih, anda boleh mengemas kini artikel yang dipaparkan untuk hanya termasuk dalam kategori yang dipilih. Aplikasi Berita Svelte boleh dilakukan menggunakan pelbagai kaedah, seperti menggunakan Perkhidmatan Pengesahan Firebase atau pelayan backend dengan JWT (JSON Web Tokens). Anda perlu membuat komponen pengesahan di mana pengguna boleh memasukkan kelayakan log masuk mereka. Setelah penyerahan borang, kelayakan ini dihantar ke Perkhidmatan Pengesahan atau Backend Server untuk pengesahan. Sekiranya kelayakan sah, pengguna disahkan dan diberikan akses kepada aplikasi.

Bagaimana saya boleh membuat aplikasi berita Svelte saya responsif?

Membuat aplikasi Berita Svelte Responsif melibatkan menggunakan pertanyaan media CSS untuk menyesuaikan susun atur aplikasi berdasarkan saiz skrin. Svelte membolehkan anda menulis kod CSS dalam fail yang sama dengan kod JavaScript dan HTML anda, menjadikannya lebih mudah untuk gaya komponen anda. Anda boleh menentukan gaya yang berbeza untuk saiz skrin yang berbeza untuk memastikan aplikasi anda kelihatan baik pada semua peranti.

Bagaimana saya boleh menambah pemberitahuan push ke aplikasi berita Svelte saya? App boleh dilakukan menggunakan perkhidmatan seperti pemesejan awan Firebase. Anda perlu mendaftarkan aplikasi anda dengan perkhidmatan dan kemudian tambahkan kod yang diperlukan untuk aplikasi anda untuk mengendalikan pemberitahuan push menerima. Ini biasanya melibatkan menambah pekerja perkhidmatan ke aplikasi anda yang mendengarkan untuk peristiwa push dan memaparkan pemberitahuan apabila seseorang diterima. Bahagian komen kepada aplikasi berita Svelte melibatkan membuat komponen komen dan menambah pengurusan negeri untuk mengesan komen. Anda boleh menggunakan ciri reaktiviti terbina dalam Svelte untuk mengemas kini komen berdasarkan input pengguna. Apabila pengguna mengemukakan komen, anda boleh menambahkannya ke senarai komen dan mengemas kini komen yang dipaparkan. Aplikasi berita Svelte boleh melibatkan beberapa strategi. Pertama, anda boleh menggunakan alat terbina dalam Svelte untuk pemisahan kod dan pemuatan malas untuk hanya memuatkan kod yang diperlukan untuk paparan semasa. Kedua, anda boleh mengoptimumkan imej anda dan aset statik lain untuk mengurangkan saiz fail mereka. Akhir sekali, anda boleh menggunakan pekerja perkhidmatan untuk cache aset aplikasi anda dan melayani mereka dari cache, mengurangkan masa beban. App boleh dilakukan menggunakan pelbagai kaedah, seperti menggunakan perkhidmatan hosting tapak statik seperti Netlify atau Vercel, atau platform awan seperti Google Cloud atau AWS. Anda perlu membina aplikasi anda untuk pengeluaran menggunakan arahan NPM Run Build, yang membuat folder awam dengan aplikasi yang disusun anda. Folder ini kemudiannya boleh dimuat naik ke perkhidmatan hosting atau platform awan anda.

Atas ialah kandungan terperinci Projek Aplikasi Svelte: Membina UI Aplikasi Berita Planet '. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!