nyaroan.com

  02 JULI
2018  21.39

Mekanisme Login Berbasis REST API Dengan React + Redux dan Laravel

Beberapa mahasiswa masih bingung mengimplementasikan mekanisme login menggunakan React + Redux sebagai front end dan Laravel sebagai back end. Karena itu saya akan membuat sebuah contoh aplikasi sederhana menggunakan React + Redux dan Laravel yang mengimplementasikan mekanisme login dan logout dengan REST API.

Persiapan React + Redux

Kita buat project React baru dilengkapi dengan Redux dan React Router. Bagian desain kita abaikan sementara dan hanya akan ada dua "halaman" yaitu halaman login dan halaman beranda setelah login.

create-react-app loginapp
cd loginapp

Setelah itu kita install beberapa modul tambahan yaitu redux dan router.

npm install --save react-redux react-router-dom redux redux-form redux-thunk

Jalankan aplikasi React Anda dengan perintah

npm start

Hapus beberapa file yang ada di folder src dan sisakan file App.js dan index.js. Selanjutnya modifikasi file src/index.js menjadi seperti berikut:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));

Router

Skenario utama yang akan kita buat adalah sebagai berikut:

  1. Halaman default adalah form login dimana pengguna diminta memasukkan username dan password.

  2. Jika proses login sukses maka pengguna dipindahkan ke halaman beranda.

  3. Di halaman beranda terdapat link untuk logout yang membawa pengguna kembali ke halaman default / login.

Berdasarkan skenario tersebut kita memerlukan route dan component sebagai berikut:

PathFungsi
"/"Menampilkan form login (halaman default)
"/home"Menampilkan halaman setelah login dengan tombol logout

Redux State, Actions dan Reducer

Redux State

Redux adalah salah satu arsitektur dalam pengembangan aplikasi React yang mana terdapat sebuah state tunggal dalam keseluruhan aplikasi. State ini yang akan digunakan oleh semua komponen dalam aplikasi. Rancangan state yang akan digunakan adalah:

{
  isFetching: false,
  user: {
    id: 0,
    nama: ''
  }
}

isFetching digunakan untuk menyatakan kondisi apakah kita sedang meminta data ke server, sedangkan user digunakan untuk menampung data user yang akan dan sedang login.

Action

Action pada umumnya adalah sebuah objek sederhana yang berisi type dan payload yang bersifat opsional. Beberapa actions yang akan kita gunakan adalah:

ActionKeterangan
SET_FETCHINGMengeset status apakah sedang fetching ke server
SET_USERMengeset data pengguna dari hasil proses login
DELETE_USERMenghapus data pengguna dari state saat logout

Action diatas adalah action sederhana, kita akan menggunakan beberapa action tambahan menggunakan redux-thunk. Sekarang kita buat file baru dengan nama actions.js dengan isi seperti berikut:

export const SET_FETCHING = 'SET_FETCHING';
export const SET_USER = 'SET_USER';
export const DELETE_USER = 'DELETE_USER';

export function setFetching(v) {
  return { type: SET_FETCHING, state: v };
}

export function setUser(user) {
  return { type: SET_USER, user };
}

export function deleteUser() {
  return { type: DELETE_USER };
}

export function actionTryLogin(values) {
  // redux thunk ...

}

Reducer

Reducer akan memproses action untuk mengubah nilai state yang ada di Store. Kita buat file dengan nama reducers.js untuk menampung reducer yang kita buat seperti berikut:

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import {
  SET_FETCHING,
  SET_USER,
  DELETE_USER
} from './actions';

const userDefault = {
  id: 0,
  nama: ''
}

function user(state = userDefault, action) {
  switch (action.type) {
    case SET_USER:
      return Object.assign(state, action.user);
    case DELETE_USER:
      return userDefault;
    default:
      return state;
  }
}

function isFetching(state = false, action) {
  switch (action.type) {
    case SET_FETCHING: return action.state;
    default: return state;
  }
}

const loginApp = combineReducers({
  user,
  isFetching,
  form: formReducer
});

export default loginApp;

Memasukkan Store, Reducer ke App

Setelah membuat action dan reducer kita perlu mengubah file index.js dengan membuat Store dan Provider seperti kode berikut:

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { BrowserRouter } from 'react-router-dom';
import loginApp from './reducers';  
import App from './App';

const store = createStore(loginApp, applyMiddleware(thunk));
ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

Tampilan Page

Sekali lagi kita tidak meng handle masalah tampilan atau styling. Dua komponen "Page" yang akan kita buat adalah "LoginPage" dan "HomePage" dibuat dengan tampilan dasar sederhana. Kita perlu mengubah src/App.js menjadi seperti berikut:

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';

import LoginPage from './components/LoginPage';
import HomePage from './components/HomePage';

class App extends Component {
  render() {
    return (
      <div>
        <Switch>
          <Route exact path="/" component={LoginPage} />
          <Route exact path="/home" component={HomePage} />
        </Switch>
      </div>
    );
  }
}

export default App;

Komponen Switch yang menentukan komponen apa yang akan dirender jika URL sama dengan path yang telah ditentukan.

HomePage

Kita buat komponen yang lebih mudah dahulu dimana page ini hanya berisi teks Beranda. Kita akan modifikasi file ini nanti ketika kita sudah berhasil dan ingin menambahkan fungsi logout.

import React, { Component } from 'react';

class HomePage extends Component {
  
  render() {
    return (
      <div>
        <h1>BERANDA</h1>
      </div>
    );
  }
}

export default HomePage;

LoginPage

Buat file baru dengan nama LoginPage.js dan letakkan di folder components (buat folder ini lebih dahulu). Kita akan membuat form seperti berikut:

import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import { Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { actionTryLogin, setUser } from '../actions';

const renderInput = ({ placeholder, type, input }) => (
  <input
    type={type}
    placeholder={placeholder}
    {...input}
  />
);

class LoginPage extends Component {
  render() {
    const isFetching = this.props.isFetching;
    const user = this.props.user;

    return (
      <div>
        <h1>LOGIN PENGGUNA</h1>
        <form onSubmit={this.props.handleSubmit}>
          <Field name="username" component={renderInput} type="text" placeholder="Username" /><br />
          <Field name="password" component={renderInput} type="password" placeholder="Password" /><br />
          <br />
          { isFetching ? (<p>Loading ...</p>) : (<button type="submit">LOGIN</button>) }
        </form>
      </div>
    );
  }
}

LoginPage = reduxForm({
  form: 'Login'
})(LoginPage);

LoginPage = connect(
  state => ({
    isFetching: state.isFetching,
    user: state.user
  }),
  (dispatch, ownProps) => ({
    onSubmit: values => {
      dispatch(actionTryLogin(values));
    }
  })
)(LoginPage);

export default LoginPage;

Dikarenakan reduxForm menggunakan Field maka kita perlu membungkus input form ke komponen ini dan fungsi yang digunakan adalah fungsi renderInput(). Dibagian bawah class kita menggunakan beberapa fungsi untuk dapat menggunakan reduxForm dan juga menggunakan connect dari react-redux untuk menghubungkan komponen dengan state. Fungsi connect memiliki dua parameter yaitu map state to props dan map dispatch to props. Dengan dua parameter ini kita bisa mendelegasikan state dan dispatch ke komponen sebagai props.

Action actionTryLogin() di file actions.js akan kita ubah agar dapat menangani proses post ke back end dan kemudian menerima data dari server untuk diset ke state. Berikut ini kode fungsi actionTryLogin():

...
export function actionTryLogin(values) {
  return dispatch => {
    dispatch(setFetching(true));
    fetch('http://localhost:8000/api/login', {
      body: JSON.stringify(values),
      method: 'POST',
    })
    .then(response => response.json())
    .then(data => {
      const user = data.data;
      if (user !== null) {
        dispatch(setUser(user));
        localStorage.setItem("user", JSON.stringify(user));
      }
      dispatch(setFetching(false));
    })
    .catch(err => {
      dispatch(setFetching(false));
    });
  };
}

Untuk melakukan request ke server bisa menggunakan beragam cara antara lain menggunakan fetch seperti kode diatas. Anda bisa menggunakan axios atau modul lain jika Anda merasa lebih nyaman menggunakan modul tersebut.

Jika server membalas dengan object kita akan mengeset nilainya ke state dengan menggunakan action __SET_USER dan sekaligus kita juga menyimpan data user ke localStorage__ agar ketika browser dibuka ulang user tidak perlu melakukan login kembali.

Laravel

Kita menggunakan salah framework yang cukup terkenal yaitu Laravel dan kita akan membuat project baru dengan menggunakan perintah berikut:

laravel new webapi
cd webapi

Untuk menjalankan servernya kita gunakan perintah:

php artisan serve

Tabel Admins

Untuk database terserah Anda namun pastikan bahwa pengaturan di file .env sudah benar. Kita membutuhkan sebuah tabel yang berisi data user admin dengan struktur tabel sebagai berikut:

Nama FieldTipeKeyKeterangan
idtinyint(3)Primary (auto increment)id pengguna
usernamevarchar(30)username untuk pengguna
passwordvarchar(40)password dengan md5
namavarchar(60)nama dari pengguna

Beri nama tabel tersebut dengan nama admins dan masukkan insert kan data baru dengan untuk Administrator dengan password "password".

FieldValue
id1
usernameadmin
password5f4dcc3b5aa765d61d8327deb882cf99
namaAdministrator

Model

Kita buat model baru dari tabel admins diatas dengan perintah:

php artisan make:model Admin

dan selanjutnya ubah file app/Admin.php dengan menambahkan properti timestamps dengan nilai false.

<?php
...
class Admin extends Model
{
  public $timestamps = false;
}

Router + Controller

Aplikasi React yang kita buat sebelumnya mengirimkan request ke http://localhost:8000/api/login sehingga kita perlu menambahkan router di file routes/api.php dengan route seperti berikut:

Route::post('/login', 'AdminLoginController@login');

Kita belum membuat controller untuk menangani router tersebut, karena itu kita perlu membaut controller baru dengan menggunakan perintah:

php artisan make:controller AdminLoginController

Kemudian kita edit file app/Http/Controllers/AdminLoginController.php menjadi seperti berikut:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Admin;

class AdminLoginController extends Controller
{
  public function login(Request $request) 
  {
    header("Access-Control-Allow-Origin: *");
    $input = $request->json()->all();
    
    $result = Admin::select('id', 'nama')
    ->where('username', $input['username'])
    ->where('password', md5($input['password']))
    ->get();
    if ( ! isset($result[0])) return ['data' => null];
    return ['data' => $result[0]];
  }
}

Jika sukses maka server akan memberikan respon json dengan bentuk:

{data: { id: 1, nama: "Administrator" }}

namun jika gagal akan memberikan respon data dengan nilai null.

React Redirect

Seharusnya setelah tombol ditekan, request ke server dibalas dengan object dari user yang berhasil login maka halaman berpindah ke Beranda. Karena itu kita perlu menambahkan komponen Redirect di fungsi render komponen LoginPage seperti berikut:

...
  render() {
    const isFetching = this.props.isFetching;
    const user = this.props.user;
    if (user.id) {
      return (<Redirect to="/home" />);
    }
    
    return (
      <div>
        <h1>LOGIN PENGGUNA</h1>
        <form onSubmit={this.props.handleSubmit}>
          ...
        </form>
      </div>
    ); 
  }

Bagian `if (user.id) return (<Redirect...` lah yang akan melakukan tugas memindahkan user ke halaman beranda. Sekarang kita coba menggunakan username admin dengan password password dan jika berhasil maka seharusnya Anda sudah melihat halaman Beranda.

Autologin

Seharusnya kita ketika browser ditutup kita tidak perlu lagi melakukan login dan aplikasi akan langsung menuju halaman beranda. Karena kita sudah menggunakan localStorage maka di LoginPage kita bisa mengecek nilai di localStorage apakah ada data user atau tidak. Jika ada maka kita set ke state dan otomatis pengguna akan di redirect ke halaman beranda.

Cara termudah adalah menambahkan pengecekan di dalam fungsi componentWillMount() di LoginPage. Pastikan URL Anda sedang mengakses LoginPage (default path) dan bukan HomePage (/home).

...
class LoginPage extends Component {
  componentWillMount() {
    this.props.checkUser();
  }
...
LoginPage = connect(
  ...
  (dispatch, ownProps) => ({
    onSubmit: values => {
      dispatch(actionTryLogin(values));
    },
    checkUser: () => {
      const user = localStorage.getItem('user');
      if (user !== null) dispatch(setUser(JSON.parse(user)));
    }
  })
)(LoginPage);
...

Kita membuat fungsi checkUser dalam fungsi connect agar bisa menggunakan dispatch yang menggunakan action setUser. Dengan begini maka aplikasi akan mengecek apakah ada data user di localStorage, jika ada maka pengguna akan di redirect langsung ke beranda.

Logout

Kita perlu mengubah komponen HomePage dengan menambahkan link logout, redirect dan connect. Secara umum kode yang digunakan untuk logout adalah sebagai berikut:

import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { deleteUser } from '../actions';

class HomePage extends Component {
  
  render() {
    const user = this.props.user;
    if ( ! user.id) {
      return (<Redirect to="/" />);
    }
    
    return (
      <div>
        <h1>BERANDA</h1>
        <p><a href="" onClick={() => this.props.logout()}>LOGOUT</a></p>
      </div>
    );
  }
}

HomePage = connect(
  state => ({
    user: state.user
  }),
  (dispatch, ownProps) => ({
    logout: () => {
      localStorage.clear();
      dispatch(deleteUser())
    }
  })
)(HomePage);

export default HomePage;

Maka selesailah aplikasi sederhana implementasi login menggunakan React + Redux dan Laravel REST API. Terima kasih & Happy coding :)

Artikel KOMENTAR

  24 JUNI
2018  12.12

Mengakses Virtual Host Apache di Android Emulator

Mungkin ada yang munggunakan Virtual Host di Apache dan ingin bisa diakses melalui emulator Android. Berikut ini adalah tutorial hasil coba-coba dan artikel ini hanya untuk dokumentasi. Saya menggunakan XAMPP, dan Windows 10.

Virtual Host Apache

Saya mempunyai virtual host untuk API dengan configurasi seperti berikut:

<VirtualHost *:80>
  DocumentRoot "X:/Projects/Api"
  ServerName uapi.me
  <Directory />
    Require all granted
    Options FollowSymLinks
    AllowOverride All
		
    Order allow,deny
    Allow from all
  </Directory>
</VirtualHost>

Dengan nama uapi.me kita ingin server ini dapat diakses oleh emulator. IP komputer server yang saya gunakan di lokal network adalah: 192.168.43.229.

Android Emulator

  • Temukan lokasi Android SDK, sdk/platform-tools dimana Anda bisa menemukan file adb.exe. Ketikkan perintah berikut:
emulator -writable-system -avd NAMA_AVD
  • NAMA_AVD Anda ganti dengan nama emulator yang Anda buat di AVD Manager.

  • Buka command prompt baru di lokasi yang sama sdk/platform-tools dan ketikkan perintah:

adb root
adb remount
adb shell
echo "192.168.43.229 uapi.me" >> /etc/hosts
adb unroot
adb reboot
  • Coba buka browser di emulator dan akses virtual host Anda, contohnya: http://uapi.me.

Langkah-langkah diatas cuma dilakukan sekali, begitu emulator di matikan dan distart lagi maka data hosts akan tetap tersimpan.

android emulator, virtual host

Tutorial KOMENTAR

  11 JUNI
2018  16.03

Menginstall dan Menggunakan React Native Camera

Menggunakan fitur kamera di React Native memang sesuai yang menjanjikan tapi bagaimana cara menginstallnya?

Artikel ini hanya sebagai dokumentasi. Saya menggunakan modul react-native-camera ditambah dengan artikel di Could not find method google for arguments[], com.android.support dan Could not find common.jar untuk mengatasi beberapa permasalahan saat proses build. Berikut ini langkah-langkahnya:

  • Buat project baru dengan react-native init seperti berikut:
react-native init MyCamera
  • Untuk menggunakan fitur kamera kita harus mempunyai ijin akses camera, kita ubah file android/app/src/AndroidManifest.xml dengan menambahkan:
<uses-permission android:name="android.permission.CAMERA" />
  • Setelah masuk folder, install react-native-camera dan link kan seperti berikut:
cd MyCamera

npm install --save react-native-camera

react-native link react-native-camera
  • Ubah versi gradle di file android/gradle/wrapper/gradle-wrapper.properties menjadi seperti berikut:
...
distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip
  • Ubah file android/build.gradle dengan mengubah kode menjadi seperti berikut:
buildscript {
    repositories {
        jcenter()
        google()
    }
...

allprojects {
    repositories {
        maven { url: 'https://maven.google.com' }
        mavenLocal()
        jcenter()
        mave {
            ...
        }
        google() 
...
  • Ubah file android/app/build.gradle dengan menambahkan kode berikut:
...
dependencies {
    compile project(':react-native-camera')
    compile("com.android.support:support-v4:26.0.1") {
        force = true
    }

Penggunaan

  • Secara sederhana berikut ini cara menggunakan react-native-camera:
import {
  ...
  TouchableOpacity
} from 'react-native';
import { RNCamera } from 'react-native-camera';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <RNCamera 
          ref={ref => {
            this.camera = ref;
          }}
          style = {styles.preview}
          type={RNCamera.Constants.Type.back}
          permissionDialogTitle={'Permission to use camera'}
          permissionDialogMessage={'We need your permission to use your camera'}
        >
          <View style={{flex: 0, flexDirection: 'row', justifyContent: 'center'}}>
            <TouchableOpacity
              onPress={this.takePicture.bind(this)}
              style={styles.capture}
            >
              <Text style={{fontSize: 14}}> CAPTURE </Text>
            </TouchableOpacity>
          </View>
        </RNCamera>
      </View>
    )
  }
  
  takePicture = async function() {
    if(this.camera) {
      const options = { quality: 0.5, base64: true };
      const data = await this.camera.takePictureAsync(options)
      console.warn(data.uri);
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  preview: {
    width: '100%',
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    padding: 15,
    paddingHorizontal: 20,
    alignSelf: 'center',
    margin: 20
  }
})

react native camera

Tutorial KOMENTAR

  17 MEI
2018  11.21

Membuat Splash Screen React Native

Setelah beberapa kali mencoba membuat Splash Screen di React Native yang cukup njlimet dibandingkan dengan saat membuat splash screen di Ionic, saya akan mencoba mengulangi langkah-langkah pembuatan splash screen di React Native. Tujuan artikel ini hanya untuk dokumentasi agar tidak lupa karena langkah-langkahnya rumit :D. Sumber utamanya adalah video youtube Perfect React Native Splash Screen (Android) ditambah dengan halaman [ERROR] Build faild after update react native and android sdk build tools dan Error:Execution failed for task ':app:processDebugResources'. > java.io.IOException: Could not delete folder “” in android studio. Dua halaman tadi digunakan saat proses build yang gagal.

Membuat project Baru

Untuk membuat project baru di React Native bisa menggunakan perintah berikut:

react-native init splashscreen
cd splashscreen

dan untuk menjalankan ke emulator atau device bisa menggunakan perintah berikut:

react-native run-android

Gambar Icon

Yang akan dibuat adalah splash screen sederhana dengan background warna dan terdapat gambar icon di tengah layar. Membuat icon bisa dilakukan dengan tool Ape Tools - Image Gorilla yang bisa men-generate beberapa gambar dengan ukuran berbeda-beda dari satu gambar yang kita sediakan. Upload sebuah gambar yang akan dijadikan icon dan setelah itu tekan tombol Kapow!. Download file zip yang berisi file-file icon lalu kita distribusikan ke folder-folder dalam android/app/src/main/rest/minmap-**dpi dan pastikan sesuai dengan dpi nya.

Native code stuff

Kita akan berhubungan dengan kode-kode Java dan XML di Android native sehingga kita bisa menggunakan Android Studio untuk mengedit file-file yang ada dalam folder android.

  • Langkah pertama adalah buat folder baru di android/app/src/main/res dengan nama drawable. Setelah itu buat file baru dalam folder yang baru saja kita buat dengan nama file __background_splash.xml__ dengan isi:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@color/blue" />
  <item
    android:width="200dp"
    android:height="200dp"
    android:drawable="@mipmap/icon"
    android:gravity="center"
  />
</layer-list>
  • Kode diatas menggunakan value @color/blue yang belum didefinisikan, karena itu kita buat file baru di android/app/src/main/res/values dengan nama colors.xml dengan isi:
<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="blue">#4F6D7A</color>
  <color name="primary_dark">#4F6D7A</color>
</resources>
  • Selanjutnya kita edit file android/app/src/main/res/values/styles.xml menjadi seperti berikut:
<resources>

  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <!-- Customize your theme here. -->
      <item name="android:statusBarColor">@color/blue</item>
  </style>

  <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <item name="android:windowBackground">@drawable/background_splash</item>
      <item name="android:statusBarColor">@color/blue</item>
  </style>

</resources>
  • Kita akan mengubah file android/app/src/main/AndroidManifest.xml menjadi seperti berikut ini:
<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" package="com.splashscreen">

  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

  <application
    android:name=".MainApplication"
    android:label="@string/app_name"
    android:icon="@mipmap/ic_launcher"
    android:allowBackup="false"
    android:theme="@style/AppTheme"
    tools:replace="android:allowBackup">
      <activity
        android:name=".SplashActivity"
        android:theme="@style/SplashTheme"
        android:label="@string/app_name">
        <intent-filter>
          <action android:name="android.intent.action.MAIN" />
          <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize"
        android:exported="true">
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>
  • Kemudian kita akan membuat file android/app/src/main/java/com/splashscreen/SplashActivity.java. Bagian pathnya dan nama packagenya mungkin saja berbeda tapi yang pasti harus ada dalam folder kumpulan file .java. Isi file SplashActivity.java adalah sebagai berikut:
...

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    Intent intent = new Intent(this, MainActivity.class);
    startActivity(intent);
    finish();
  }
}
  • Kita buat folder di dengan nama layout di android/app/src/main/res dan kemudian diisi dengan sebuah file bernama __launch_screen.xml__ yang berisi:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@color/blue"
  android:gravity="center">

  <ImageView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_marginTop="24dp"
    android:src="@mipmap/icon"
  />
</LinearLayout>

react-native-splash-screen

Kita akan menggunakan module react-native-splash-screen dengan mengetikkan perintah:

npm install --save react-native-splash-screen

dan dilanjutkan dengan mengetikkan perintah:

react-native link

Setelah itu kita masih berhubungan dengan file java yaitu mengubah file android/app/src/main/java/com/splashscreen/MainActivity.java menjadi seperti berikut:

...

import android.os.Bundle;
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen;

public class MainActivity extends ReactActivity {
  @Override
  protected  void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this);
    super.onCreate(savedInstanceState);
  }

  ...
}

Kemudian terakhir kita edit file App.js menjadi seperti berikut:

...
import SplashScreen from 'react-native-splash-screen';
...

export default class App extends Component<Props> {
  componentDidMount() {
    SplashScreen.hide();
  }

  render() {
...

Jalankan di emulator ataupun di device dengan perintah:

react-native run-android

Terima kasih dan Happy Coding :D

react native, splash screen

Tutorial KOMENTAR

  02 NOVEMBER
2017  09.37

UNIRA API (Authentification)

Universitas Madura saat ini sedang mengembangkan dan membangun sistem data tunggal terpusat dengan memanfaatkan REST API.

Authentifikasi

REST API Universitas Madura memiliki empat method yaitu:

  1. GET: Mendapatkan resource yang ada di API.
  2. POST: Menambahkan resource baru untuk disimpan diserver.
  3. PUT: Mengubah atau memodifikasi resource yang sudah tersimpan.
  4. DELETE: Menghapus resource yang tersimpan

Hampir semua method GET tidak perlu menggunakan autentifikasi kecuali untuk data-data tertentu yang bersifat penting. Sedangkan method POST, PUT dan DELETE semua dilindungi authentifikasi berupa token yang dikirimkan lewat header yang dikirimkan oleh klien.

Skema URL

Semua request yang dilakukan ke API Unira memiliki skema sebagai berikut:

-- GET/POST --

https://api.unira.ac.id/v1/<resource>[/<subresource>]
-- PUT/DELETE --

https://api.unira.ac.id/v1/<resource>[/<id>]

** karakter v1 menunjukkan versi dari API, akan ada perubahan jika memang telah dibuat versi berikutnya.

JWT (JSON Web Tokens)

Menurut deskripsi sekilas di situs jwt.io, JSON Web Token (JWT) adalah standar terbuka yang mendefinisikan sebuah cara yang ringkas dan self contained untuk secara aman mentransmisikan informasi antarpihak dalam bentuk object JSON. Informasi ini dapat diverifikasi dan dipercaya karena ditandatangani secara digital.

JSON Web Tokens terdiri dari tiga bagian yang dipisahkan oleh karakter dot/titik (.) yang merupakan:

  1. Header
  2. Payload
  3. Signature

Implementasi JWT di API Unira

API Universitas Madura menggunakan dua macam token yaitu:

  • Refresh Token: Token permanen yang harus disimpan oleh klien yang digunakan untuk memperbarui access token. Token dapat disimpan di penyimpanan yang umum dan permanen seperti localStorage, ataupun sqlite.
  • Access Token: Token yang dikirimkan dalam Bearer Authorization dengan bentuk `Authorization: Bearer ` yang dijadikan sebagai Header dari setiap request yang dikirim ke API endpoint.

Untuk mendapatkan Refresh Token adalah dengan menggunakan endpoint:

-- POST --
https://api.unira.ac.id/v1/token

dengan mengirimkan variabel POST: username dan password dimana untuk sementara username adalah NIS (Nomor Induk Staf) untuk pegawai dan dosen, dan NIM (Nomor Induk Mahasiswa) untuk mahasiswa Universitas Madura.

Jika pemeriksaan akun berhasil dilakukan maka API akan menghasilkan respon berupa JSON dengan properti refresh token dan access token. Refresh token harus disimpan oleh klien dan Access token harus diperbaharui setiap 10 menit dengan mengirimkan request:

-- PUT --
https://api.unira.ac.id/v1/token

dengan mengirimkan variabel PUT: refresh yang berisi nilai dari Refresh token. Menjadi tanggung jawab klien untuk memperbarui Access token bila masa aktifnya berakhir agar request berikutnya tidak ditolak oleh server.

Respon API

Berikut ini adalah beberapa respon yang mungkin saja diperoleh ketika melakukan request ke API endpoint:

  1. (200 OK). Respon untuk GET/PUT yang berhasil (bisa memiliki data maupun tidak)
  2. (201 Created). Respon untuk POST yang berhasil menyimpan resource
  3. (204 Deleted). Respon untuk DELETE yang berhasil menghapus resource
  4. (400 Bad Request). Respon untuk request yang tidak sesuai ketentuan
  5. (401 Unauthorized). Respon untuk authentifikasi yang gagal
  6. (404 Not Found). Respon untuk resource yang tidak dapat ditemukan
  7. (422 Unprocessable Entity). Respon GET/POST/PUT/DELETE untuk parameter yang dikirimkan tidak dapat diproses karena tidak lengkap ataupun tidak sesuai)

Artikel KOMENTAR

  10 SEPTEMBER
2017  14.06

harus cepat lulus, insyaAllah

Status KOMENTAR

  01 SEPTEMBER
2017  21.38

Selamat Hari Raya Idul Adha 1438 H {camel} {bumblebee}

Status KOMENTAR

  30 AGUSTUS
2017  11.12

menunggu dosen wali, sendiri.. {:(}

Status KOMENTAR

  28 AGUSTUS
2017  21.44

Jadikanlah sabar dan shalat sebagai penolongmu. [Al Baqarah/2 : 45]

Status KOMENTAR

  25 AGUSTUS
2017  21.12

Hosting Gratisan PHP di HEROKU

Jika kamu ingin mencoba-coba menggunakan hosting menggunakan git dan otomatis mendukung HTTPS sekaligus gratis, maka kamu bisa menggunakan hosting gratis dengan HEROKU.

Tahap Persiapan

Pastikan Anda sudah terdaftar di heroku.com dengan mengakses halaman daftar. Isi inputan dan daftar dan CREATE FREE ACCOUNT. Setelah itu, Install heroku toolbelt yang mana berisi heroku CLI, dan git. Sesuaikan dengan sistem operasi serta arsitektur komputer / laptopmu. Setelah heroku toolbelt ter-install, buka command prompt dan ketikkan perintah berikut:

heroku login

Kemudian masukkan email dan password yang Anda gunakan saat mendaftar di heroku.

Langkah berikut ini adalah Install composer untuk manajemen dependencies di PHP. Instalasi composer sebenarnya opsional karena sebenarnya yang kita butuhkan adalah adanya file composer.json. Heroku akan mengenali aplikasi PHP dengan mendeteksi keberadaan file composer.json ini.

PHP Hello World

Buat folder baru untuk aplikasi yang akan dikerjakan lalu ketikkan perintah di git bash:

$ git init

Langkah berikut ini jika kamu sudah menginstall composer: buat file composer.json dengan menggunakan perintah:

$ composer init

Kemudian ikuti perintah yang muncul saat perintah diatas dihasilkan. Untuk dependency dan dev dependency dapat diabaikan (jawab no). Pastikan bagian yang memasukkan folder vendor ke .gitignore Anda jawab yes.

Setelah file composer.json terbuat, maka buat file index.php dengan mengetikkan perintah

$ touch index.php

Edit file index.php dengan teks editor kesayanganmu dan masukkan kode berikut: (hanya untuk contoh)

<?php

echo 'Hello World';

?>

** Pastikan terdapat tiga file yaitu composer.json, .gitignore, dan index.php di dalam folder kerja.

Heroku Create

Ketikkan perintah untuk membuat aplikasi di heroku:

$ heroku create

Heroku akan meng-generate nama acak sebagai lokasi / url aplikasi Anda sekaligus memasukkan git remote ke dalam git.

Git Add, Commit, Push

Lakukan update git terhadap beberapa file yang kita buat dengan perintah berikut:

$ git add .
$ git commit -m "tambah file index, composer"

Jika sudah, lakukan push untuk mengupload file local ke aplikasi di heroku dengan perintah:

$ git push heroku master

Tunggu beberapa saat, heroku sedang men-deploy aplikasi.

Membuka dan Mengakses Aplikasi

Untuk melihat hasilnya aplikasi yang kita buat, Anda dapat mengetikkan manual di address bar browser Anda alamat URL yang dihasilkan oleh heroku (contoh: https://dry-taiga-84751) atau dengan mengetikkan perintah berikut di console:

$ heroku open

Tutorial KOMENTAR

CARI ARTIKEL

×