Panduan Pemula tentang Cara Mendirikan Aplikasi Seluler Ionic 2

Hai teman-teman! Dalam posting ini saya akan langkah demi langkah memandu Anda melalui dasar-dasar ekstrim tentang cara gaya aplikasi Ionic 2 menggunakan SCSS.

Untuk memanfaatkan langkah-langkah ini sebaik-baiknya, sebaiknya memiliki pengetahuan sebelumnya tentang CSS dan Ionik, tetapi itu tidak perlu. Jika Anda tidak terbiasa dengan kerangka kerja Ionic 2 saya sarankan memeriksa dokumentasi Ionic 2.

Langkah-langkahnya

Ionic 2 membawa banyak hal ke meja (Jika Anda tidak mulai dari perancah yang benar-benar kosong). Anda mendapatkan aplikasi, dan itu sudah cukup banyak ditata. Tetapi jika Anda ingin mengubahnya, itu menjadi sedikit rumit jika Anda seorang pemula.

Untuk menginstal plugin yang diperlukan kita harus mulai bekerja dengan Ionic kita perlu mengunduh dan menginstal NodeJS. Setelah itu Anda dapat menginstal Cordova dan Ionic dari terminal Anda dengan menjalankan perintah ini:

$ npm pasang -g ionic cordova

Kita juga perlu menginstal Typecript, yang merupakan bahasa Ionic 2. Jalankan perintah ini:

$ npm install -g naskah

Untuk membuat walkthrough ini fokus terutama pada gaya, kami akan menggunakan aplikasi pra-dibuat dengan desain dasar.

Tancapkan aplikasi tab Ionic 2 dengan menjalankan perintah ini di terminal Anda:

$ ion mulai tab myTabs --v2

Anda akan mendapatkan aplikasi dengan tab sehingga Anda dapat menavigasi antara tampilan yang berbeda. Anda dapat mengujinya di browser dengan mengetik ini di terminal Anda!

$ melayani ion
Seperti yang Anda lihat, Ionic mengkustomisasi komponen yang berbeda untuk setiap platform. Saya akan membahas lebih lanjut tentang bagaimana melakukan desain khusus platform di bawah ini. Anda juga mendapatkan serangkaian warna tema standar dan tampilannya cukup generik.

Ubah tema warna dengan $ colors

Buka aplikasi dalam editor teks. (Saya menggunakan WebStorm IDE oleh Jetbrains btw)

Kemudian mulailah dengan menavigasi ke file ini:

src / theme / variable.scss

Di sini Anda dapat melihat bahwa tema warna aplikasi diatur dalam variabel yang disebut $ warna, kunci / nilai yang dapat diedit sebanyak yang Anda suka, bahkan menambahkan yang baru.

Untuk menunjukkan kepada Anda cara kerjanya, cukup ganti warna hex pada primer dengan misalnya "merah".

Ini akan menghasilkan ini:

Semua komponen yang menggunakan warna primer sekarang diatur ke warna primer, yaitu merah.

Anda dapat dengan mudah menggunakan warna-warna ini di komponen apa pun. Sekarang saya akan menunjukkan kepada Anda bagaimana Anda bisa melakukannya!

Arahkan ke file ini:

src / pages / home / home.scss

Dalam file ini kami menambahkan SCSS khusus halaman, artinya gaya yang Anda tambahkan di sini hanya akan diterapkan ke halaman beranda.

Kita akan mengubah warna teks h2 "Selamat datang di Ionic!" Menjadi warna primer (merah). Untuk melakukan itu, kita harus menambahkan tag h2 ke halaman-rumah dan mengganti warna ke map-get ($ colors, primary). Ini akan mengambil variabel $ warna dan nilai kunci "primer".

Ini adalah hasil dari itu:

Warna h2 sekarang juga merah! Misi berhasil!

Seperti yang sekarang mungkin sudah Anda ketahui, Anda juga dapat menggunakan salah satu kunci dalam variabel $ colors Anda. Cobalah sedikit bermain-main dengannya, bahkan tambahkan beberapa yang baru!

Menggunakan $ colors adalah cara yang baik untuk melacak semua warna dalam aplikasi. Anda dapat mengubah warna sejumlah besar elemen sekaligus dengan mudah. Alih-alih harus memperbesar ke semua komponen yang berbeda dan mengubah warna secara manual, seperti yang harus Anda lakukan jika Anda tidak menggunakan SCSS.

Mengganti Variabel Ionik

Dalam "src / theme / variable.scss" Anda dapat mengubah banyak desain buatan Ionics. Misalnya, kami ingin mengubah warna bilah alat yang dirancang ion untuk kami. Kita dapat menavigasi ke dokumentasi Ionic 2 dan mencari "toolbar". Jika Anda gulir ke bawah sedikit Anda menemukan "toolbar-background", ini yang kami butuhkan. Di sini Anda dapat melihat bahwa warna tema default diatur ke "# f8f8f8".

Kami akan mengubah warna bilah alat ini ke warna utama kami. Arahkan ke file “variable.scss” Anda dan tambahkan ini:

$ toolbar-background: map-get ($ colors, primary);

dan voila, semua latar belakang bilah alat di aplikasi Anda akan menjadi warna utama kami, yang sebelumnya kami atur menjadi merah!

Hm, tetapi bagaimana jika menurut Anda bilah alat terlalu kecil? Dan ingin menambah ketinggiannya? Anda dapat melakukannya dengan cara yang sangat mirip!

Pergi ke halaman Overriding Variables di dokumentasi Ionic 2 dan cari tinggi bilah alat.

di bagian bawah Anda dapat melihat $ toolbar-ios-height, $ toolbar-md-height dan $ toolbar-wp-height. Ini adalah bilah alat yang berbeda untuk ketiga platform yang Anda kembangkan! ios = Iphone, md = Android dan wp = Windows Phone. Untuk mengujinya, pilih bilah alat iOS dan letakkan di "variable.scss" dan cukup tetapkan nilai baru untuk itu, seperti ini:

Itu akan menghasilkan ini:

Seperti yang Anda lihat, bilah alat di iOS sekarang besar. Jangan ragu untuk bereksperimen dengan ini dan mencoba untuk menemukan lebih banyak komponen yang dapat Anda ganti gaya. Jika Anda tidak tahu nama komponen yang Anda cari, Anda dapat mengklik kanan pada komponen di browser dan mencari nama kelas komponen, dan kemudian menggunakannya untuk mencari di dokumentasi 2 Ion!

Anda juga dapat melihat-lihat di repo github Ionic 2 untuk berbagai komponen dan melihat variabel mana yang mereka miliki.

Manfaatkan desain khusus platform khusus

Karena Anda sedang mengembangkan aplikasi untuk tiga platform sekaligus, sangat penting bagi Anda untuk dapat menyesuaikan komponen Anda untuk masing-masing dan salah satu dari mereka secara terpisah. Maksud saya, desain materi tidak benar-benar berfungsi dengan baik di iOS.

Untuk mendemonstrasikan ini, kita akan mengubah warna

teks pada platform iOS.

Arahkan ke file ini:

src / app / app.scss

Di sini Anda dapat menambahkan variabel SCSS global. Artinya gaya yang Anda letakkan di sini akan diterapkan ke seluruh aplikasi.

Untuk membuat teks "

" di iOS hijau, cukup tambahkan SCSS ini ke file itu:

.ios {
  p {
    warna: hijau;
  }
}

Itu akan menghasilkan ini! :)

Saya pikir ini adalah salah satu fitur gaya yang paling berharga yang dibawa oleh Ionic 2.

Ini adalah contoh yang sangat sederhana tentang bagaimana Anda melakukan ini. Tetapi jika Anda membayangkan kemungkinan! Anda pada dasarnya dapat membangun satu aplikasi dan membuatnya terlihat sangat asli dan berbeda di setiap platform. Animasi tombol mungkin harus berbeda untuk setiap platform agar sesuai dengan animasi asli, kan? Saya harap Anda mengerti berapa banyak waktu yang Anda hemat dengan melakukan ini alih-alih mengembangkan tiga aplikasi asli yang berbeda.

Saya akan mengakhiri langkah kaki saya di sini, dan membiarkan Anda melakukannya! Cobalah untuk bermain sebanyak yang Anda bisa dan ada banyak lagi untuk belajar tentang ionik 2. Saya baru saja membahas dasar-dasar gaya.

Tapi ingat, ketika Anda mengerti bagaimana melakukan semua ini, Anda akan dapat menggabungkan semua hal untuk membuat aplikasi yang benar-benar terlihat bagus!

Saya akan melakukan posting serupa di masa depan tentang aspek-aspek lain dari kerangka kerja Ionic 2, seperti cara mengonsumsi Api, pengujian E2E, dan hal-hal menyenangkan lainnya.

Saya mendorong hasil penelusuran ini ke Github saya jika Anda ingin memeriksanya!

Sampai jumpa lagi!