Install Ionic on Windows

Install Ionic on Windows. Ionic menyediakan banyak komponen untuk UI (User Interface). Berbagai komponen tersebut merupakan wrapper dari frontend framework yang digunakan. Materi pada kegiatan belajar ini lebih menekankan pada pengenenalan serta petunjuk untuk menggunakan komponen UI lebih lanjut karena tidak memungkinkan membahas semua komponen UI beserta properties maupun method dari komponen — komponen tersebut.

Persyaratan

Untuk mengerjakan pratikum ini selain sudah menyiapkan perangkat keras dan perangkat lunak diperlukan beberapa hali berikut ini.

1. Penggunaan command line/shell untuk operasi biasa
2. Cara mengelola paket JavaScript/TypeScript menggunakan npm
3. Pengetahuan tentang TypeScript
4. Cara menggunakan dan mengelola extensions di Visual Studio Code.
5. Cara menggunakan Visual Studio Code untuk proses pembangunan Aplikasi.

Berikut tools yang digunakan untuk Installasi Ionic

1. Ionic
2. Java JDK
3. Android SDK

Langkah 1 — Download Node JS ( Install Ionic on Windows)

Kunjungi Website atau klik link berikut https://nodejs.org/en/download untuk di Installers Windows dapat klik Windows Installer. Saat install NodeJS ini akan disertakan dengan paket NPM.

Langkah 2 — Install NodeJS and NPM

1. Tunggu hingga proses Download selesai, klik tautan yang selesai di download, dan Klik file yang telah selesai di Download. Atau dapat telusuri tempat penyimpanan hasil Download lalu double klik pada file tersebut.
2. Sistem akan menampilakan notifikas pertanyaan, apakah yakin menjalanakan Aplikasi klik > RUN
3. Setelah itu akan tampil “Welcome to the Node.js Setup Wizard” > Next
4. End-User License Agreement centang pada > I accept the term in the license Agreement > Next
5. Destination Folder tetap pada lokasi Default > Next
6. Custome Setup > Next
7. Tool for Native Module, pada Layar ini Select Componet untuk install atau tidak. Untuk pengaturan Default kilik > Next
8. Terakhir klik Install dan tunggu proses install lalu klik button Finish.

Langkah 3 : Verifikasi Installation Node JS ( Install Ionic on Windows)

Setelah proses install selesai, kita perlu pastikan bahwa Node JS dan NPM sudah terinstall.

Buka CMD ketikan

node -v

--- Output ---
v18.12.1

setelah itu verfikasi NPM, lalukan hal yang sama

npm -v

--- Output ---
8.10.0

Langkah 4 : Install Ionic on Windows

Sesudah kita selesai melakukan install NodeJS, NPM kita akan mulai untuk langkah install Install Ionic Windows. Untuk cara intall sangat mudah, ketikan perintah berikut ini.

npm install -g @ionic/cli

Tunggu hingga proses selesai. lalu ketikan perintah

ionic

--- Output ---
ionic

   _             _
  (_) ___  _ __ (_) ___
  | |/ _ \| '_ \| |/ __|
  | | (_) | | | | | (__
  |_|\___/|_| |_|_|\___| CLI 5.4.16

  Usage:
    $ ionic <command> [<args>] [--help] [--verbose] [--quiet] [--no-interactive] [--no-color] [--confirm] [options]
  Global Commands:
    completion ...................... (experimental) Enables tab-completion for Ionic CLI commands.
    config <subcommand> ............. Manage CLI and project config values (subcommands: get, set, unset)
    docs ............................ Open the Ionic documentation website
    info ............................ Print project, system, and environment information
    init ............................ (beta) Initialize existing projects with Ionic
    login ........................... Log in to Ionic
    logout .......................... Log out of Ionic
    signup .......................... Create an Ionic account
    ssh <subcommand> ................ Commands for configuring SSH keys (subcommands: add, delete, generate, list,
                                      setup, use)
    start ........................... Create a new project
  Project Commands:
    You are not in a project directory.

Langkah 5 : Create First App

Selajutkan kita akan mulai dengan membuat sebuah Aplikasi menggunakan Ionic. Buka kembali CMD Anda, dan ketikan perintah berikut

ionic start first app

Akan tampil pilihan Framework yang akan kita gunakan.

Pick a framework!

Please select the JavaScript framework to use for your new app. To bypass this prompt next time, supply a value for the
--type option.
? Framework: (Use arrow keys)
   Angular | https://angular.io
   React   | https://reactjs.org
 > Vue     | https://vuejs.org

Pada Framework kami menggunakan VueJS, disini Anda dapat memilih Framerwork sesuai yang anda inginkan sesuai dengan keahlian. Enter

System akan menanyakan untuk Starter template, ada beberapa pilihan seperti tabs, sidemenu, blank, list. pilih sesuai dengan kebutuhan. Disini kami menggunakan sidemenu

Let's pick the perfect starter template!

Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass this
prompt next time, supply template, the second argument to ionic start.
? Starter template:
  tabs     | A starting project with a simple tabbed interface
> sidemenu | A starting project with a side menu with navigation in the content area
  blank    | A blank starter project
  list     | A starting project with a list

Jika sudah, selesai tampil Output seperti berikut ini

Your Ionic app is ready! Follow these next steps:

- Go to your new project: cd .\firstapp
- Run ionic serve within the app directory to see your app in the browser
- Run ionic capacitor add to add a native iOS or Android project using Capacitor
- Generate your app icon and splash screens using cordova-res --skip-config --copy
- Explore the Ionic docs for components, tutorials, and more: https://ion.link/docs
- Building an enterprise app? Ionic has Enterprise Support and Features: https://ion.link/enterprise-edition

Masuk ke dalam folder Project yang telah kita buat tadi yaiut firstapp

cd .\ firstapp

Jalankan Ionic dengan menggunakan perintah

ionic serve

Jika berhasil makan akan tampil Output

> vue-cli-service.cmd serve
[vue-cli-service]  INFO  Starting development server...
Build finished at 09:52:37 by 0.000s

[vue-cli-service]   App running at:
[vue-cli-service]   - Local:   http://localhost:8100/
[vue-cli-service]   - Network: http://172.23.10.225:8100/
[vue-cli-service]   Note that the development build is not optimized.
[vue-cli-service]   To create a production build, run npm run build.
No issues found.

Buka Browser Anda, lalu ketikan URL Local atau Network

http://localhost:8100/

BACA JUGA : Install VueJS | Dixmata Studio

Source : Install Ionic on Windows | Dixmata Studio