Memulai dengan Ionik: Pendahuluan

Ionic adalah framework aplikasi mobile populer yang membantu Anda membangun aplikasi mobile hybrid dengan cepat, menggunakan HTML, CSS, dan JavaScript. Dalam seri ini, Anda belajar bagaimana untuk mengatur dan membangun aplikasi seluler Anda sendiri dengan ionic dengan menciptakan aplikasi mobile berfungsi penuh bersama-sama. Kita mulai dengan pengantar ionic dan belajar bagaimana untuk memulai dengan tooling.

Dalam tutorial ini, kita membahas:

• apa itu ionic dan berbagai komponen
• Mengapa Anda memilih untuk menggunakan ionic
• cara set up mesin Anda untuk membangun aplikasi ionic hybrid
• alur kerja pengembangan, dari memulai hingga deploy apps

1. Ionic Stack: Cordova, Angular, Ionic

Ionic adalah beberapa teknologi yang rapi dibundel dan dikelola bersama-sama. Saya suka berpikir tentang ionic sebagai tumpukan beberapa framework. Interaksi antara teknologi ini adalah apa yang akhirnya menciptakan app yang menghasilkan dan menyediakan pengalaman pengembang dan pengguna yang baik.

Cordova: Hybrid App Framework

Sebagai pondasi, Ionic menggunakan Cordova sebagai framework aplikasi hybrid. Pada dasarnya, hal ini memungkinkan aplikasi web untuk menjadi terbungkus dalam aplikasi native yang dapat diinstal pada perangkat. Itu komprehensif webview, yang merupakan contoh terisolasi browser yang menjalankan aplikasi web Anda.

Ini juga menyediakan sebuah API yang dapat Anda gunakan untuk berkomunikasi dengan perangkat itu sendiri, misalnya, untuk meminta Koordinat GPS atau mengakses kamera. Banyak dari fitur hardware tambahan ini diaktifkan melalui sistem plugin Cordova, sehingga Anda hanya perlu menginstal dan menggunakan fitur yang Anda butuhkan. Saya memperkenalkan Anda ke Cordova lainnya dalam tutorial nanti.

Angular: Framework Web aplikasi

Angular adalah kerangka JavaScript terkenal untuk membangun aplikasi web, dan ionic dibangun di atasnya. Angular menyediakan logika aplikasi web yang digunakan untuk membangun aplikasi yang sebenarnya.

Jika Anda sudah terbiasa dengan hal itu, maka Anda akan dapat dengan cepat mengambil fitur ionic. Jika Anda baru ke Angular, Anda dapat terus membaca dan Anda akan mulai untuk mengambil beberapa angular dasar.

Aku tidak akan menjelaskan angular secara detail, jadi saya sarankan mengambil beberapa waktu untuk mempelajari dasar-dasar dengan membaca dokumentasi angular.

Ionikc User Interface Framework

fitur utama yang dijual ionic adalah seperangkat komponen bersih antarmuka pengguna yang dirancang untuk mobile. Ketika Anda membangun aplikasi native, ada SDK native yang menyediakan Anda dengan komponen antarmuka, seperti tab dan dialog.

Ionik menyediakan satu sama set komponen antarmuka yang mirip untuk digunakan dalam aplikasi hybrid. Ionik suka mengklaim itu SDK yang hilnag untuk hybrid apps, dan ini mengisi peran yang cukup baik. Selain itu, ionic memiliki sejumlah fitur signifikan lainnya yang membuatnya menjadi pilihan yang sangat menarik.

2. Mengapa Ionic

Ionik lebih dari sekedar kumpulan pengguna komponen antarmuka, juga satu set tool pengembang dan ekosistem untuk dengan cepat membangun aplikasi mobile hybrid. Saya ingin untuk menerangkan mengapa hybrid apps cocok untuk web developer, rincian tentang platform ionic dan tooling, dan kapan ionic tidak cocok.

Mengapa Hybrid Versus Native atau Mobile Web

Ada perdebatan lama tentang kualitas dari pendekatan yang berbeda untuk membangun aplikasi. Beberapa bulan yang lalu, saya menulis artikel yang rinci tentang tiga jenis pengalaman mobile. Saya sarankan bahwa Anda memeriksa itu jika Anda tidak yakin tentang kekuatan dan kelemahan dari pendekatan yang berbeda ini pada perangkat modern.

Hybrid apps adalah sweet spot dalam memberikan pengembang web dengan kemampuan untuk menggunakan keterampilan yang mereka sudah tahu untuk membangun aplikasi seluler yang dapat terlihat dan terasa seperti aplikasi native.

Tooling keren & Ionic Platform

Sangat sedikit framework mobile yang tersedia memiliki tooling yang mendekati kualitas ionic 's tooling. Kami melihat lebih dekat tooling utama yang tersedia dalam sisa tutorial, tetapi saya ingin membahas beberapa fitur yang Anda mungkin akan menemukan berguna dari waktu ke waktu.

Ionic CLI

Ionic CLI  di tingkat pertama dan menyediakan banyak fitur yang membantu Anda memulai sebuah proyek, melihat pratinjau itu, dan pada akhirnya mampu membangun itu.

Ionic Platform

Ionic menyediakan sejumlah fitur, beberapa gratis dan lainnya bayar, yang berguna untuk pengembangan profesional, seperti app analytics, push notifikasi, dan deployment tool.

Ionic Market

Ada beberapa Pengaya yang gratis dan berbayar untuk ionic yang dapat dengan mudah diintegrasikan ke dalam aplikasi Anda. Ada tema, komponen unik, dan plugin lainnya.

keterbatasan Ionic

Ionik tidak cocok untuk setiap aplikasi mobile. Pertimbangkan kasus berikut untuk memutuskan apakah ionic cocok untuk proyek Anda.

• Ionic tidak mendukung setiap platform. iOS dan Android sepenuhnya didukung, tapi ioniv dapat bekerja dengan lainnya untuk beberapa derajat. Ini juga bekerja terbaik pada versi yang lebih modern. Mendukung perangkat lama atau sistem operasi lama dapat mengakibatkan kinerja yang rusak, biasanya karena implementasi browser yang jelek.
• Ionck tidak menyediakan aplikasi yang benar-benar native. Jika aplikasi Anda memerlukan integrasi yang besar dengan platform native, seperti grafis intensif, Ionic tidak mungkin dapat memberikan kekuatan penuh untuk diperlukan. Hal ini karena kebutuhan untuk antarmuka perangkat keras dari aplikasi web ke Cordova, yang dapat menambah beberapa lag.

Dengan kata lain, jika Anda tidak membangun sebuah aplikasi untuk perangkat lama dan tidak memiliki kebutuhan untuk banyak program pada tingkat hardware, ionic lebih dari mampu memberikan kualitas app pengalaman bagi pengguna Anda.

3. instalasi ionic dan Cordova

Ionic dilengkapi dengan fantastis CLI (Command Line Interface) untuk membantu memulai, membangun dan deploy aplikasi Anda. Anda akan menggunaka banyak sekali CLi selama pengembangan. Ionic juga mengandalkan Cordova, sehingga Anda akan menggunakannya secara tidak langsung.

Anda harus memiliki Node.js diinstal untuk memulai. Jika belun ada, luangkan waktu sejenak untuk menginstalnya pada sistem Anda. Saya menggunakan Node.js 5.6 untuk tutorial ini dan saya sarankan pada versi stabil terbaru.

Instalasi ionic dan Cordova sederhana seperti menginstal dua global node modul. Jika Anda telah melakukannya sebelum ini, maka ini harus melihat cukup akrab. Buka terminal dan jalankan perintah berikut:

1

npm install -g ionic@1.7.14 cordova@6.0.0

Ini mungkin memerlukan beberapa saat, tetapi Anda harus mendapatkan pesan sukses yang mengatakan mereka berdua diinstal. Anda dapat memverifikasi ini dengan menjalankan berikut ini untuk melihat output nomor versi.

1

ionic -v && cordova -v

Itu harus menampilkan versi ionic dan Cordova. Untuk tujuan dari tutorial ini, saya menggunakan versi 1.7.14 ionic dan versi 6.0.0 dari Cordova.

Ada beberapa fitur dalam CLI ionic dan Anda dapat selalu mendapatkan referensi cepat dengan menjalankan ionic help. Anda juga dapat melihat dokumentasi online untuk bantuan lebih lanjut jika diperlukan.

Instalasi lain

Ionik tidak dibundel semua tooling yang diperlukan untuk membangun sebuah aplikasi, hal itu bergantung pada beberapa tambahan SDK dan perangkat lunak yang disediakan oleh Apple dan/atau Google. Hal ini baik untuk membaca dan mengikuti panduan platform yang disediakan oleh Cordova dikonfigurasi untuk setiap platform yang Anda ingin bekerja dengan itu.

• Android Platform panduan
• iOS Platform panduan

Anda dapat melakukan ini di lain waktu, tetapi Anda akan perlu untuk mengatur platform tooling sebelum dapat Anda pratinjau atau emulasi aplikasi pada simulator atau perangkat.

4. ionic Development Flow

Ada seperangkat umum langkah-langkah yang Anda akan pergi melalui ketika mengembangkan aplikasi ionic. Langkah-langkah ini memiliki perintah CLI sesuai untuk membantu Anda. Mari kita lihat pada perintah utama yang mewakili aliran pengembangan yang khas untuk membangun aplikasi ionic.

Langkah 1: Memulai sebuah proyek

Dengan asumsi Anda sudah punya ide dasar apa yang Anda rencankan untuk dibuat, langkah pertama adalah untuk menciptakan sebuah proyek baru. Ionik proyek berdasarkan Cordova dan memerlukan beberapa perancah untuk Cordova kemudian untuk memahami proyek Anda. Ion memiliki beberapa prebuilt template yang dapat Anda gunakan untuk menghasilkan sebuah proyek starter, tetapi Anda juga dapat memberikan Anda sendiri.

Untuk memulai sebuah proyek, jalankan perintah ionic start sample. Itu menghasilkan folder baru dalam direktori saat ini didasarkan pada nama yang Anda berikan (yaitu sample). Sementara menjalankan perintah, ini akan mendownload file dari GitHub yang diperlukan untuk proyek, dan menginisialisasi proyek untuk Anda. Menggunakan default proyek ini, yang memiliki aplikasi dasar dengan antarmuka tab dasar.

Menjalankan cd sample untuk menavigasi ke direktori baru. Ketika Anda memeriksa direktori, Anda akan melihat beberapa file dan direktori. Jangan khawatir diri Anda terlalu banyak dengan file tunggal setiap saat. Berikut adalah beberapa hal yang Anda harus bekerja dengan pada awalnya.

• cordova.xml: File ini berisi konfigurasi untuk Cordova.
• Ionic.project: File ini berisi konfigurasi untuk ionic.
• /plugins: Direktori ini memegang Cordova plugin yang terinstall. Awalnya, ini akan dimuat dengan beberapa plugin default preinstalls ionic untuk Anda.
• /platforms: Direktori ini memegang assets untuk setiap platform yang dikonfigurasi untuk aplikasi Anda ke target, seperti Android dan iOS. Ionik dapat menginstal sebuah platform untuk Anda secara default.
• /scss: Direktori ini berisi file sumber untuk style SASS untuk aplikasi. Anda dapat menyesuaikannya seperti yang Anda akan menemukan ke luar nanti.
• /www: Direktori ini memegang web aplikasi file yang dimuat oleh Cordova. Semua file JavaScript, HTML, dan CSS harus hidup dalam direktori ini.

Untuk tutorial ini, kita akan bekerja dengan proyek Anda hanya dihasilkan dan melihat bagaimana mengembangkan dan pratinjau app.

Langkah 2: Mengembangkan dan Preview App

Anda telah memulai sebuah proyek, sekarang Anda ingin mulai mengembangkan. Selama pengembangan awal, Anda mungkin akan melihat pratinjau pekerjaan Anda dalam browser. Setelah semua, sebuah aplikasi ionic adalah benar-benar hanya aplikasi web. Ionic dilengkapi dengan local development server yang membangun dan menyajikan aplikasi Anda.

Untuk memulai server development, jalankan ionic serve. Segera setelah ini berjalan, buka preview app di browser default Anda. Pada titik ini, Anda dapat menggunakan tool developer browser untuk memeriksa aplikasi, lihat untuk kesalahan, dan tugas lain yang Anda biasanya lakukan ketika membangun aplikasi web.

Server terus berjalan di latar belakang dan melihat perubahan file proyek. Ketika mendeteksi bahwa Anda sudah diedit dan disimpan file, secara otomatis reload peramban untuk Anda.

Saya sarankan menggunakan Chrome sebagai browser karena developer tooling luar biasa. Salah satu fitur yang sangat berguna adalah kemampuan untuk meniru dimensi perangkat, yang membuatnya mudah untuk melihat apa yang tampak seperti aplikasi di perangkat tertentu. Itu bukn emulator asli yang mengeksekusi aplikasi seperti perangkat yang asli, hanya meniru dimensi app.

Langkah 3: Menambahkan sebuah Platform

Cordova mendukung banyak jenis perangkat mobile, yang disebut platform. Anda harus mendaftar platform yang Anda ingin menargetkan dengan aplikasi Anda dan menginstal file proyek yang tepat. Untungnya, ini sebagian besar dikelola melalui CLI ionic. Ionic sepenuhnya mendukung iOS dan Android platform.

Untuk menambahkan sebuah platform, jalankan ionic platfrom add android. Mengganti android dengan ios untuk menambahkan iOS sebaliknya. Setelah ditambahkan, Anda akan melihat folder baru di direktori platform proyek Anda. Folder ini berisi file tertentu platform. Secara umum, Anda perlu untuk menghindari membuat terlalu banyak perubahan ke file dalam direktori ini.

Jika Anda memiliki masalah, Anda dapat menghapus platform dan menambahkannya lagi. Untuk menghapus sebuah platform, ionic platform remove android.

Langkah 4: Meniru App

Di beberapa titik, Anda akan ingin untuk mulai melihat pratinjau aplikasi Anda dalam emulator asli. Emulator yang pada dasarnya versi perangkat lunak perangkat asli. Hal ini benar-benar berguna cepat untuk menguji bagaimana aplikasi seharusnya bersikap pada perangkat asli. Sadarilah bahwa emulator tidak memiliki semua fitur fisik perangkat karena mereka hanya perangkat lunak yang meniru perangkat.

Beberapa kode Anda mungkin tidak bekerja seperti yang diharapkan, misalnya, jika Anda mengharapkan untuk menggunakan daftar kontak perangkat. Biasanya, hanya fitur yang terintegrasi dengan perangkat keras mungkin tidak bekerja seperti yang diharapkan, tetapi untuk kebanyakan hal ini harusnya bekerja dengan baik.

Mengatur emulator dapat menjadi sedikit tugas, tergantung pada jenis komputer apa yang Anda gunakan dan apa yang Anda perlu untuk diuji. Meniru iPhone hanya dapat dilakukan pada komputer yang menjalankan OS X, tetapi Android dapat ditiru di setiap sistem operasi apapun. Untuk mengatur emulator, merujuk pada platform panduan saya terhubung ke sebelumnya.

Setelah semua selesai, Anda bisa meniru menggunakan ionic emulate android -c -l Seperti sebelumnya, menggantikan android dengan ios jika Anda menargetkan iOS. Ini membangun, menginstal, dan meluncurkan app di simulator. Ini dapat menunggu beberapa saat, sehingga Anda mungkin ingin menggunakan beberapa fitur berguna live reload seperti yang Anda lakukan sebelumnya dalam browser.

Anda dapat menggunakan flag opsional -l untuk live reload app di simulator (tanpa perlu untuk membangun kembali dan instal ulang). Ini bagus selama Anda tidak mengubah apapun yang berhubungan dengan bagaimana app dibangun (seperti pengaturan Cordova). Anda juga dapat menggunakan flag opsional -c memiliki pesan konsol yang diteruskan ke terminal log. Saya menggunakannya hampir setiap waktu.

Langkah 5: Deploy aplikasi ke perangkat

Cara terbaik untuk melihat pratinjau app Anda akan benar-benar menginstal dan menjalankannya pada perangkat. Hal ini memerlukan bahwa Anda telah menyiapkan platform dan memiliki perangkat yang terhubung ke komputer Anda. Melakukan hal ini memerlukan beberapa konfigurasi yang bervariasi berdasarkan jenis perangkat yang Anda memiliki. Anda dapat merujuk ke platform panduan di atas dapat menghubungkan perangkat Anda.

Setelah Anda memiliki perangkat yang terhubung, cukup sederhana untuk menjalankan aplikasi di atasnya dari command line. Gunakan ionic run android -c -l dan ionik membangun, deploy, dan meluncurkan app Anda. Sekali lagi, Anda dapat menggantikan ios untuk android. Seperti perintah emulate, Anda dapat menggunakan flag -l dan - c opsional untuk mengaktifkan live reload dan console logging ke terminal.

Setelah app pada perangkat Anda, Anda dapat memutuskan itu dan aplikasi akan tetap diinstal pada perangkat. Hal ini bermanfaat jika Anda ingin menggunakan aplikasi selama jangka waktu untuk menguji bagaimana berperilaku atau hanya memamerkan kepada orang lain.

5. Bagaimana tentang Ionic 2

Saya sering mendapatkan ditanya tentang ionic 2 dan apakah orang-orang harus menggunakannya. Pada saat penulisan, 2016 awal, tidak ada jawaban sederhana namun. Saya telah bekerja dengan itu dan membangun beberapa prototipe, dan saya tahu beberapa orang yang telah membangun aplikasi produksi dengan itu, tapi itu belum siap.

Kabar baiknya adalah bahwa belajar ionic 1 hari ini berarti bahwa belajar ionic 2 akan cukup mudah. Sebagian besar hal-hal khusus ionic yang akan Anda pelajari dalam seri ini tetap cukup konsisten setiap versi. Perubahan terbesar akan terjadi karena ionic 2 sedang dibangun dengan Angular 2.

Jadi sementara Anda bisa membangun aplikasi ionic 2 hari, itu belum resmi dirilis. Anda tidak membuang waktu dengan belajar ionic 1 sekarang. Upgrade harus relatif mudah sekali ionic 2 dirilis secara resmi.

Ringkasan

Dalam tutorial ini, kita membahas banyak tentang ionic.

• Anda belajar tentang kekuatan dan beberapa kelemahan ionic.
• Anda mengatur komputer Anda untuk membangun aplikasi ionic.
• Anda menciptakan proyek pertama Anda dan melihat pratinjau itu dalam browser.
• Anda mengatur sebuah emulator dan perangkat untuk melihat pratinjau app Anda yang terhubung.

Dalam bagian selanjutnya dari seri ini, Anda akan mulai untuk membangun aplikasi yang nyata, fungsional yang menggunakan teknik yang dijelaskan dalam tutorial ini.

Menciptakan Template ionic dan menangkan $1.000

Jika Anda sudah nyaman dengan framework ionic, maka Anda mungkin ingin mempertimbangkan memasuki Envato di paling dicari kontes untuk ionic template. Bagaimana? buatlah template ionic unik dan mengirimkannya ke pasar Envato oleh 27 April 2016.

Lima terbaik template menerima $1000. Tertarik? Baca lebih lanjut di kontes website untuk rincian tentang kontes persyaratan dan panduan.