CategoriesProgrammingSwift

Reactive Programming dengan Combine Framework

Introduction

Selama ini mungkin kita menggunakan library seperti RxSwift untuk membuat aplikasi kita menjadi reactive. Nah pada tahun 2019, Apple sudah merilis framework bernama Combine. Kelebihan dari framework ini yang pertama ialah ini merupakan library native sehingga tidak perlu lagi melakukan install third library dan untuk syntaxnya sendiri cukup expresif sehingga mudah untuk dipelajari.

Sebelum deep dive lebih dalam mungkin kita perlu mengenal apa itu Reactive Programming?

Reactive Programming secara sederhana adalah ketika terjadi sebuah perubahan pada data, maka aplikasi kita akan update secara sendirinya tanpa kita suruh berulang-ulang. Contohnya pada excel ini ketika ketika melakukan perubahan pada angka, hasil pertambahan akan ter-update tanpa kita hitung secara manual lagi.

Continue reading
CategoriesProgramming

Aplikasi Video Conference dengan Flutter

Pandemi Covid-19 benar-benar mengubah kebiasaan masyarakat. Mulai dari sekolah sampai bekerja yang awalnya kegiatan dilakukan secara tatap muka, sekarang berubah menjadi serba online dengan memanfaatkan teknologi yang bernama Video Conference.

Video Conference memungkinkan kita berkomunikasi dengan lebih dari satu orang dalam waktu yang bersamaan. Kali ini kita akan mencoba membuat aplikasi Video Conference dengan menggunakan Flutter.

Flutter Multi Platform

Sudah tau apa itu Flutter ? jika belum tau, Flutter adalah Software Development Kit (SDK) yang dibuat oleh Google untuk membuat aplikasi multi platform, dengan flutter kita bisa membuat aplikasi Mobile (Android dan Ios), Desktop (Windows, Linux, Mac), dan Web. Flutter menggunakan bahasa pemrograman Dart, untuk mempelajari lebih lanjut tentang Flutter bisa dilihat di flutter.dev

untuk membuat aplikasi video conference kita memerlukan library jitsi_meet. Jitsi meet merupakan platform video conference yang open source dan gratis, kita bisa menggunakan jitsi meet tanpa dipungut biaya apapun, detail dari library jitsi_meet bisa dilihat di https://pub.dev/packages/jitsi_meet . Untuk mempelajari lebih lanjut tentang jitsi meet bisa dilihat di jitsi.org/jitsi-meet/. Library jitsi meet pada flutter hanya support untuk platform mobile saja, jadi tidak bisa digunakan untuk desktop atau web.

Oke langsung saja kita mulai Praktik pembuatan aplikasinya :

1. Buat Project Flutter baru. Buka terminal, lalu ketikkan :

flutter create video_conference_app

maka proses generate file aplikasi akan berjalan.

2. Buka folder project dengan Visual Studio Code yang sudah terinstall Plugin Flutter dengan command :

cd video_conference_app && code .

3. buka file main.dart dari project flutter, file main.dart terdapat pada folder lib

4. Hapus class HomePage, lalu buat satu Stateful Widget dengan nama Dashboard. maka file main.dart menjadi seperti berikut :

5. Buat tampilan untuk mengisi kode join room yang berisi label, textbox, dan. Kita edit class _DashboardState menjadi seperti berikut :

6. Coba kita run dengan mengetikkan command :

flutter run

maka tampilannya akan menjadi seperti berikut :

Tampilan Halaman Dashboard

7. Selanjutnya kita pasang library jitsi_meet nya pada project kita, buka file pubspect.yaml pada root project, tambahkan kode berikut pada dependencies :

jitsi_meet: ^2.0.0

sehingga dependencies akan menjadi seperti berikut :

dependencies:
  flutter:
    sdk: flutter

  jitsi_meet: ^2.0.0

lalu save file pubspect.yaml, maka proses download library akan dimulai. Atau jika tidak otomatis terdownload anda bisa mengetikkan command berikut pada terminal :

flutter pub get

8. setelah library terinstall, selanjutnya kita lakukan konfigurasi agar aplikasi bisa menjalankan library jitsi_meet

Pada Android :
– buka folder android/app, lalu buka file build.gradle. tambahkan kode berikut pada bagian android

compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
}

lalu pada bagian android.defaultConfig, ubah minSdkVersion menjadi 23

defaultConfig {
        applicationId "com.example.video_conference_app"
        minSdkVersion 23
        targetSdkVersion 30
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
}

Lalu pada bagian android.buildTypes.release tambahkan kode untuk membuat proguard, sehingga menjadi seperti berikut :

 buildTypes {
        release {
  
            signingConfig signingConfigs.debug

            minifyEnabled true
            useProguard true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
}

sehingga build.gradle menjadi seperti berikut :

...
android {
    compileSdkVersion 30

    sourceSets {
        main.java.srcDirs += 'src/main/kotlin'
    }

    defaultConfig {
        applicationId "com.example.video_conference_app"
        minSdkVersion 23
        targetSdkVersion 30
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }

    buildTypes {
        release {
            // TODO: Add your own signing config for the release build.
            // Signing with the debug keys for now, so `flutter run --release` works.
            signingConfig signingConfigs.debug

            minifyEnabled true
            useProguard true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}
...

– setelah itu buka folder android/app/src/main lalu buka file AndroidManifest.xml. lalu tambahkan kode berikut pada tag Application

tools:replace="android:label"

Tambahkan juga kode berikut pada tag manifest

xmlns:tools="http://schemas.android.com/tools"
sehingga menjadi seperti berikut
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.video_conference_app">
   <application
        tools:replace="android:label" 
        android:label="video_conference_app"
        android:icon="@mipmap/ic_launcher">
    ...
   </application>
 ...
</manifest>

 Pada Ios :
– Buka folder ios lalu buka file Podfile. Uncomment global platform, lalu ubah menjadi versi 11.

platform :ios, '11.0'

– Buka folder ios/Runner lalu edit file info.plist. tambahkan kode untuk mengakses Camera dan Microphone :

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) MyApp needs access to your camera for meetings.</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) MyApp needs access to your microphone for meetings.</string>

9. Setelah konfigurasi selesai, Kembali ke file main.dart. import library jitsi meet dengan menambahkan kode berikut

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:jitsi_meet/feature_flag/feature_flag_enum.dart';
import 'package:jitsi_meet/jitsi_meet.dart';
import 'package:jitsi_meet/jitsi_meeting_listener.dart';

10. buat function untuk join room, kode nya adalah sebagai berikut :

11. setelah itu kita masukkan _joinRoom ke onPressed yang ada pada button join

ElevatedButton(
 child: Text("Join"),
 onPressed: _joinRoom,
),

12. Setelah itu run aplikasi. isi form Nama dan Meeting ID, lalu klik Join

Tampilan Form yang telah terisi

maka akan muncul tampilan loading proses penyambungan ke room

Tampilan Loading Room

Jika ada dialog permintaan permission microphone dan camera, klik allow agar aplikasi bisa berjalan

Permintaan Permission

Jika sudah maka tampilan Video Conference akan muncul

Tampilan Video Conference

13. Selamat aplikasi Video Conference sudah berhasil dibuat. Jika ingin ada orang lain yang join di room, masukkan Meeting ID yang sama.
Berikut tampilannya jika ada orang lain yang join ke room :

Tampilan Video Conference

Terdapat juga fitur chat bawaan dari library jitsi dengan klik icon chat di pojok kiri bawah

Chat Bawaan Jitsi Meet

library jitsi meet hanya bisa digunakan untuk video conference / voice conference saja, belum bisa digunakan untuk presentasi / sharescreen. Jika ingin menggunakan Video Conference untuk kebutuhan aplikasi Production disarankan menggunakan server sendiri, karena pada tutorial ini secara default kita terhubung ke server public dari jitsi. Untuk mengetahui cara setup jitsi ke server bisa dilihat di : https://jitsi.github.io/handbook/docs/devops-guide/devops-guide-quickstart

Bagaimana, cukup mudah bukan ?
Cukup simple dan tidak memerlukan banyak kode, dengan Flutter kita bisa membuat aplikasi video conference sederhana untuk ios dan android hanya dengan satu bahasa pemrograman yaitu Dart.

Untuk melihat kode pada tutorial ini secara lengkap bisa ke link dibawah ini :

https://github.com/asyarialmuslimin/SimpleVideoConferenceApp

sekian artikel dari saya, semoga bermanfaat untuk para pembaca sekalian

Wassalamu’alaikum, Salam sejahtera untuk kita semua.

CategoriesInternetProgramming

Capture API Endpoint yang jalan di Aplikasi Smart Phone menggunakan Postman

API Endpoint hampir pasti digunakan di Aplikasi Android maupun IOS, tentunya misal pembaca adalah program akan penasaran apakah API yang dibuat kita aman dan apakah mungkin ter ekspose. Jawabannya iya sangat mungkin untuk di capture. Kali ini kita akan membahas tuntas salah satu cara untuk Capture atau sniffing API yang jalan di Aplikasi Smart Phone menggunakan Postman. Cara ini bisa dilakukan untuk Optimasi API yang kita Buat untuk menghindari data leaks. Di akhir akan saya jelaskan bagaimana cara untuk menghindari data leaks.

Berikut pengetahuan Dasar sebelum kita Bermain main lebih dalam:

1.  API Endpoint.

API(Application Programming Interface) merupakan sekumpulan (method, fungsi atau URL endpoint) yang digunakan untuk mengembangkan aplikasi lebih dari satu platform yang berbeda. Lalu apa kegunaan API ini? dengan menggunakan API maka kita dapat mengunakan sumber daya dari aplikasi lain tanpa perlu mengetahui bagaimana aplikasi itu dibuat. 

2. Postman.

POSTMAN adalah sebuah aplikasi (berupa plugin) untuk browser chrome, fungsinya adalah sebagai REST Client atau istilahnya adalah aplikasi yang digunakan untuk melakukan uji coba REST API yang telah kita buat. silakan download di link berikut: https://www.postman.com/downloads/

3. Proxy.

Proxy server (peladen proxy) adalah sebuah komputer server atau program komputer yang dapat bertindak sebagai komputer lainnya untuk melakukan request terhadap content dari Internet atau intranet. disini yang akan kita gunaan sebagai proxy server adalah PC.

 

Ayo kita Praktikan untuk lebih mudahnya:

Keterangan :  Pastikan menyiapkan PC dan Smart Phone.  PC dan Smart Phone harus dalam satu Jaringan. PC sebagai alat Capture sedangkan Smart Phone yang di Capture.

  1. Setting Postman klik tombol Capture Request and Cookies.
    Menu untuk Capture Request and Cookies
    Setting seperti Gambar berikut:
    Setting Capture requests an cookies Postman
  2.  Cek terlebih dahulu IP Address PC kita berapa, IP ini yang akan digunakan sebagai Hostname di proxy Smart Phone saya yaitu : 192.168.53.234
    IP Address PC
  3.   Setting Proxy di Smart Phone dengan menggunakan Hostname / IP PC kita dan masukan Port yang sudah kita setting di Postman(saya menggunakan Smart Phone Vivo Y31).
    Setting Proxy di Smart Phone
  4. Setting selesai. Sekarang waktunya Capture API, saya ingin Capture API dari Aplikasi KAI Access, buka aplikasi KAI access.
    Aplikasi KAI Access
  5.            Setelah dibuka dan melakukan beberapa proses di Aplikasi KAI Access, maka semua request akan ter Capture di Postman lengkap dengan URL, Header, Request dan response.

    Hasil Capture API saya taruh di History.
    Salah satu API Endpoint yang saya dapat dari Capturing.

Kesimpulan:

Ini adalah salah satu cara yang saya  gunakan untuk mencari celah / bug dari suatu aplikasi karena kebanyakan aplikasi API tidak ter bundle atau tidak double encrypt dan tidak ada ssl security sehingga sangat mudah data leaks atau rusak, tentu environment dasar dari sisi backend diperlukan untuk memperkuat suatu system. Salah satu cara preventif dasar adalah pastikan URL End Point API menggunakan ssl security dan pastikan data public dan private dibedakan dengan auth.

Semoga Bermanfaat

Wasallamualaikum.