Panduan langkah demi langkah dalam membuat aplikasi "Hello World!" menggunakan Ionic

Sebelum kita mulai, pastikan Anda telah menginstal Node.js dan Ionic CLI di sistem Anda. Jika tidak, Anda dapat menginstalnya dengan mengikuti dokumentasi resmi dari situs mereka.

1. Membuat proyek Ionic baru

Buka terminal atau command prompt Anda dan navigasikan ke direktori tempat Anda ingin membuat proyek. Kemudian, jalankan perintah berikut:

ionic start helloWorld blank

Perintah ini membuat sebuah proyek Ionic baru bernama "helloWorld" menggunakan template "blank".


2. Masuk ke direktori proyek

Setelah proyek dibuat, navigasikan ke direktori proyek dengan menjalankan perintah berikut:

cd helloWorld


3. Buat halaman baru

Di Ionic, halaman digunakan untuk menampilkan konten. Mari buat halaman baru bernama "halo" dengan menjalankan perintah berikut:

ionic generate page hello

Perintah ini membuat halaman baru dengan file dan konfigurasi yang diperlukan.


4. Ubah konten halaman yang baru dibuat

Buka file yang baru dibuat hello.page.html yang terletak di direktori src/app/hello. Ganti konten yang ada dengan kode berikut:

<ion-header>

  <ion-toolbar>

    <ion-title>

      Hello World

    </ion-title>

  </ion-toolbar>

</ion-header>

<ion-content>

  <ion-card>

    <ion-card-header>

      <ion-card-title>

        Welcome to Ionic!

      </ion-card-title>

    </ion-card-header>

    <ion-card-content>

      <p>Hello World!</p>

    </ion-card-content>

  </ion-card>

</ion-content>

Kode ini menentukan struktur dan konten halaman "Hello World".


5. Ubah konfigurasi routing

Buka file app-routing.module.ts yang terletak di direktori src/app. Impor HelloPage dan tambahkan rute baru untuk HelloPage di array Rute:

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

import { HelloPage } from './hello/hello.page'; // Import the HelloPage


const routes: Routes = [

  {

    path: '',

    redirectTo: 'hello',

    pathMatch: 'full'

  },

  {

    path: 'hello',

    component: HelloPage // Add the route for HelloPage

  }

];


@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

Konfigurasi ini memastikan bahwa HelloPage dimuat saat mengakses URL root.


6. Jalankan aplikasi

Sekarang saatnya menjalankan aplikasi yang sudah kita buat. Di terminal, jalankan perintah berikut:

ionic serve

Perintah ini memulai server pengembangan lokal dan membuka aplikasi di browser web default Anda.


7. Lihat halaman "Hello World"

Secara default, aplikasi akan berjalan di alamat berikut: http://localhost:8100. Anda akan melihat aplikasi Ionic berjalan di browser Anda. Untuk melihat halaman "Hello World", tambahkan /hello ke URL dan tekan Enter. Misalnya, http://localhost:8100/hello.

Selamat! Anda telah berhasil membuat aplikasi "Hello World" menggunakan Ionic.

Panduan langkah demi langkah untuk membuat aplikasi "Hello World!" menggunakan Angular

Berikut panduan langkah demi langkah untuk membuat aplikasi Hello World menggunakan Angular. Pada artikel ini penulis berasumsi Anda telah men-install nodejs dan sudah familiar menggunakan console.

  1. Instal Angular CLI secara global menggunakan perintah berikut:
    npm install -g @angular/cli
  2. Buat proyek Angular baru menggunakan perintah:
    ng new hello-world
  3. Ubah direktori ke proyek yang baru dibuat:
    cd hello-world
  4. Jalankan aplikasi menggunakan perintah:
    ng serve

Ini akan memulai server pengembangan Angular pada port 4200. Buka browser web dan arahkan ke http://localhost:4200 untuk melihat aplikasi.

Aplikasi awalnya akan memiliki halaman kosong. Untuk menambahkan pesan "Hello World!", buka file app.component.html dan tambahkan kode berikut:

<h1>Hello World!</h1>

Simpan file dan segarkan browser web. Sekarang Anda akan melihat pesan "Hello World!".

Mentransfer file melalui SFTP menggunakan java.

Dalam tutorial ini, kita akan membahas cara mengunggah dan mengunduh file dari server jarak jauh menggunakan SFTP di Java.

1. Konfigurasi Maven

<dependency>

    <groupId>com.jcraft</groupId>

    <artifactId>jsch</artifactId>

    <version>0.1.55</version>

</dependency>

2. Konfigurasi JSch

JSch memungkinkan kita menggunakan Otentikasi Kata Sandi atau Otentikasi Kunci Publik untuk mengakses server jarak jauh. Dalam contoh ini, kami akan menggunakan autentikasi kata sandi.

private ChannelSftp setupJsch() throws JSchException {

    JSch jsch = new JSch();

    jsch.setKnownHosts("/Users/john/.ssh/known_hosts");

    Session jschSession = jsch.getSession(username, remoteHost);

    jschSession.setPassword(password);

    jschSession.connect();

    return (ChannelSftp) jschSession.openChannel("sftp");

}

Dalam contoh di atas, remoteHost mewakili nama atau alamat IP server jarak jauh (mis. example.com). Kita dapat mendefinisikan variabel yang digunakan dalam pengujian sebagai:

private String remoteHost = "HOST_NAME_HERE";

private String username = "USERNAME_HERE";

private String password = "PASSWORD_HERE";

Kita juga dapat membuat file known_hosts menggunakan perintah berikut:

ssh-keyscan -H -t rsa REMOTE_HOSTNAME >> known_hosts

3. Upload file

Untuk mengunggah file ke server jarak jauh, kita akan menggunakan metode ChannelSftp.put():

public void whenUploadFileUsingJsch_thenSuccess() throws JSchException, SftpException {

    ChannelSftp channelSftp = setupJsch();

    channelSftp.connect();

 

    String localFile = "src/main/resources/sample.txt";

    String remoteDir = "remote_sftp_test/";

 

    channelSftp.put(localFile, remoteDir + "jschFile.txt");

 

    channelSftp.exit();

}

Dalam contoh ini, parameter pertama dari metode mewakili file lokal yang akan ditransfer, src/main/resources/sample.txt, sedangkan remoteDir adalah jalur direktori target di server jarak jauh.

4. Download file

Kita juga dapat mengunduh file dari server jarak jauh menggunakan ChannelSftp.get():

public void whenDownloadFileUsingJsch_thenSuccess() throws JSchException, SftpException {

    ChannelSftp channelSftp = setupJsch();

    channelSftp.connect();

 

    String remoteFile = "welcome.txt";

    String localDir = "src/main/resources/";

 

    channelSftp.get(remoteFile, localDir + "jschFile.txt");

 

    channelSftp.exit();

}

remoteFile adalah jalur file yang akan diunduh, dan localDir mewakili jalur direktori lokal target.