Skip to content

emka.web.id

menulis pengetahuan – merekam peradaban

Menu
  • Home
  • Tutorial
  • Makalah
  • Ke-NU-an
  • Kabar
  • Search
Menu

Cara Menginstal Kerangka Ionic di Ubuntu 22.04

Posted on June 29, 2022

Jika Anda seorang pengembang web yang ingin membuat aplikasi seluler lintas platform, Anda harus memeriksa Kerangka Ionic. Kerangka Ionic digunakan oleh lebih dari 4 juta pengembang di seluruh dunia, menjadikannya kerangka kerja pengembangan aplikasi yang tumbuh paling cepat di pasar. Platform pengembangan sumber terbuka ini memungkinkan Anda membuat aplikasi dengan HTML, CSS, dan JavaScript, yang kemudian dapat digunakan di perangkat iOS, Android, dan Windows Phone.

Dalam artikel ini, kami akan menunjukkan cara menginstal Kerangka Ionic di Ubuntu 22.04 menggunakan Node.js dan NPM. Mari kita mulai!

Langkah 1 – Menginstal Node.js

Node.js adalah persyaratan utama untuk menjalankan aplikasi Angular. Anda dapat menginstal Node.js yang diperlukan menggunakan utilitas baris perintah NVM. Masuk ke sistem Ubuntu Anda dan ikuti:
Gunakan perintah berikut untuk menginstal NVM:

curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash ]praSekarang aktifkan lingkungan NVM di sistem Anda.
source ~/.bashrc]praSaat ini, Angular 14 adalah versi terbaru yang mendukung versi Node.js 14 LTS dan 16 LTS. Perintah berikut akan menginstal Node.js 16 di sistem Anda.
nvm install v16

Step 2 – Instal Ionic Framework di Ubuntu

Selanjutnya, Anda perlu menginstal modul Ionic node di sistem Anda. Ionic menyediakan dan memerintahkan utilitas baris untuk membuat paket, membangun, dan memulai aplikasi.

npm install cordova --location=global

Jalankan perintah NPM di bawah ini untuk menginstal kerangka kerja Ionic pada sistem Anda.

npm install @ionic/cli --location=global

Setelah menyelesaikan instalasi kerangka Ionic, gunakan perintah berikut untuk memeriksa versi yang diinstal.

ionic -v 6.20.1

Step 3 – Buat Aplikasi Ionic

Sekarang, Anda dapat membuat aplikasi Ionic baru di sistem Ubuntu Anda menggunakan template starter.
Gunakan perintah berikut untuk melihat template starter yang tersedia

ionic start --list]praPilih template sesuai kebutuhan Anda dan membuat aplikasi Ionic baru. Anda juga dapat memilih template kosong untuk memulai:
ionic start myApp my-first-app

Di sini myApp adalah nama aplikasi baru dan my-first-app adalah nama template starter.

Output Aplikasi Ionic Anda sudah siap! Ikuti langkah-langkah berikut ini: - Buka proyek kloning Anda: cd ./myApp - Jalankan ionic serve dalam direktori aplikasi untuk melihat aplikasi Anda di browser - Jalankan ionic kapasitor add untuk menambahkan proyek iOS atau Android asli menggunakan Capacitor - Hasilkan aplikasi Anda ikon dan layar pembuka menggunakan cordova-res --skip-config --copy - Jelajahi dokumen Ionic untuk komponen, tutorial, dan lainnya: https://ion.link/docs - Membangun aplikasi perusahaan? Ionic memiliki Dukungan dan Fitur Perusahaan: https://ion.link/enterprise-edition

Now, jalankan perintah di bawah ini untuk melayani aplikasi Ionic.

cd ionic-app ionic serve

Ini akan memulai aplikasi Ionic pada port 8100. Anda dapat mengakses aplikasi ionic Anda di browser web menggunakan localhost atau alamat IP sistem.

Menjalankan Aplikasi Ionic di Ubuntu Anda juga dapat menentukan host dan port saat menjalankan aplikasi Ionic seperti di bawah ini:

ionic serve --host 0.0.0.0 --port 3005

Untuk detail lebih lanjut kunjungi http://ionicframework.com/docs/guide/installation.html

Dalam tutorial ini, Anda telah belajar menginstal kerangka kerja Ionic CLI di Ubuntu sistem. Juga, memberi Anda petunjuk untuk membuat dan menjalankan aplikasi Ionic baru.

Referensi tecadmin.com

Terbaru

  • Kebocoran Galaxy Buds 4 Mengungkap Desain dan Fitur Baru, Mirip Apple?
  • (no title)
  • Cara Menonaktifkan Fitur AI Actions (Tindakan AI) di Menu Windows Explorer
  • Microsoft Edge AI vs. OpenAI’s Atlas Browser: Perbandingan dan Perbedaan Utama
  • Cara Memasang Folder Sebagai Drive di Windows 11
  • Cara Memperbaiki Error 0xC1900101 0x40021 pada Update Windows 11
  • Malware Glassworm Serang Lagi VSCode, Hati-hati!
  • Walmart dan Google Bermitra untuk Kamera Rumah Google Home: Pengalaman Langsung
  • Gemini Dapat Bisa Atur Perangkat Rumah Melalui Home Assistant Pakai Suara, Desember 2025
  • Asahi, Produsen Bir Jepang, Akui Kebocoran Data 15 Juta Pelanggan
  • Google Messages Ada Fitur Baru: Pesan Grup, Mode Gelap dan Integrasi dengan Google Duo
  • 5 Laptop ASUS Terbaik dengan Tampilan Mewah dan Build Quality Premium
  • Pria di Balik Serangan ‘Twin Wifi’ Mencuri Wifi, Dikenakan Hukuman 7 Tahun Penjara
  • Google Kembangkan Fitur Baru untuk Tugas di Keep, Lebih Terintegrasi dengan Kalender
  • Google Akan Luncurkan Laptop dan Ponsel Android Baru di Tahun 2025: Murah & Spesifikasi Tinggi
  • Samsung Galaxy Z-Fold Tri-Fold: Harga dan Spesifikasi Resmi Terungkap
  • Federasi Sepak Bola Prancis (FFF) Mengungkap Pelanggaran Data Setelah Serangan Siber
  • Google Perbarui Desain Akun Google Web, Fokus pada Kemudahan Penggunaan dan Integrasi
  • Google Tingkatkan Batas Gratis Gemini 3 Pro untuk Pengembang dan Bisnis
  • Google Perkenalkan ‘Circle to Search’: Cara Baru Menggunakan AI untuk Pencarian
  • OpenAI Terpapar Data Pelanggan Melalui Pelanggaran Vendor Mixpanel, API Terpengaruh
  • Error External Drive Extraction Tidak Terdeteksi di VM Virtual Hyper-V
  • Ringkasan Notifikasi Pixel Google Lebih Baik dari iPhone, Tapi Apa Tujuannya?
  • ShadowV2 Botnet Digunakan Uji Coba Setelah Penyebab Gangguan AWS
  • YouTube TV Segera Kembali Menawarkan Saluran Univision Setelah Penangguhan Dua Bulan
  • YouTube TV dan Disney Meluncurkan Penawaran Paket Bundel dengan Harga Menarik
  • Error Microsoft .NET Framework: Unhandled Exception – Not Enough Space On The Disk
  • Qualcomm Snapdragon 8 Gen 5: Chipset Flagship Baru yang Lebih Cepat dan Efisien
  • Serangan ONSolve Terus Mengganggu Sistem Peringatan Darurat di Seluruh Amerika Serikat
  • Android 16 Akan Membawa QPR2 untuk Launcher Pixel, Fokus pada Pengalaman Pengguna yang Ditingkatkan
  • Kebocoran Galaxy Buds 4 Mengungkap Desain dan Fitur Baru, Mirip Apple?
  • (no title)
  • Cara Menonaktifkan Fitur AI Actions (Tindakan AI) di Menu Windows Explorer

©2025 emka.web.id | Design: Newspaperly WordPress Theme