Simple React Native API Status Maintenance, Version & Update

Terkadang terdapat beberapa fitur di aplikasi mobile kita agar dapat berjalan dengan lancar, fitur-fitur ini akan diletakan pada saat user melakukan login ke aplikasi, contoh fitur tersebut adalah

1. Fitur pemeliharaan untuk menampilkan informasi status server apabila sedang dilakukan pemeliharaan atau maintenance. Fitur ini berguna apabila terdapat kendala di aplikasi kita, entah itu dari server, masalah database, dan lain sebagainya, sehingga kita dapat memblok user untuk sementara waktu
2. Fitur Versi untuk mengecek apa versi dari aplikasi yang dipakai user dengan versi di server kita (API), versi ini berguna untuk fitur ketiga.
3. Fitur Update untuk memaksa user melakukan update aplikasi atau tidak, terkadang saat kita mengupdate aplikasi terdapat berbagai perubahan agar aplikasi berjalan dengan baik, maka user harus menggunakan versi terbaru, dengan fitur ini maka user mau tidak mau harus mengupdate aplikasinya.

Kita hanya menggunakan api simple menggunakan PHP, langsung saja berikut adalah contoh source code:

App.js

import * as React from 'react';
import { Text, View, StyleSheet, Alert, Button, Linking } from 'react-native';
import Constants from 'expo-constants';

const localVersion = '1.0.0'; // can be retrieve from app.json or package.json

export default function App() {
  const handleLogin = async () => {
    let valueversion;

    // change with your app link
    const playstoreappURL =
      'https://play.google.com/store/apps/details?id=com.google.android.googlequicksearchbox';

    try {
      let response = await fetch('https://www.bagi2info.com/sample/login.php', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email: 'test',
          password: 'test',
        }),
      });

      let json = await response.json();

      if (json.maintenance) {
        Alert.alert(
          'Info',
          'Server is currently down for emergency maintenance. Please try again after sometimes'
        );
        return true;
      }

      if (json.forceversion) {
        if (json.version != localVersion) {
          Alert.alert(
            'Info',
            "There is new version available on the app. It's recommended to use the newest version",
            [
              {
                text: 'YES',
                onPress: () => Linking.openURL(playstoreappURL),
              },
              {
                text: 'CANCEL',
                onPress: () => {
                  console.log('OK Pressed');
                  // stop the login process not allow if forceversion n different ver
                  return;
                },
              },
            ]
          );

          valueversion = json.forceversion;
        }
      } else {
        if (json.version != localVersion) {
          Alert.alert(
            'Info',
            "There is new version available on the app. It's recommended to use the newest version",
            [
              {
                text: 'YES, INSTALL',
                onPress: () => Linking.openURL(playstoreappURL),
              },

              {
                text: 'CANCEL',
                onPress: () => {
                  console.log('OK Pressed');
                },
              },
            ]
          );
        }
      }
      // stop the login process not allow if forceversion n different ver
      if (valueversion) {
        return false;
      }

      // if all checking pass
      // successfull login to dashboard
      // props.navigation.navigate('Home');
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        {`React Native Sample Code
         - Check Maintenance 
         - Version 
         - Update app `}
      </Text>
      <Button title="Login" onPress={handleLogin} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Login.php

<?php

$maintenance = true;
$forceversion = true;
$version = '1.0.1';

$err = array(
    'err' => true,
    'msg' => 'Incorrect username or password',
    'maintenance' => $maintenance,
    'forceversion' => $forceversion,
    'version' => $version,
);

if ($successlogin) {

    echo json_encode(array(
        'err' => false,
        'msg' => 'Login success',
        'maintenance' => $maintenance,
        'forceversion' => $forceversion,
        'version' => $version,
    ));
} else {

    echo json_encode($err);
}

?>

Login.php JSON

{
  "err": true,
  "msg": "Incorrect username or password",
  "maintenance": true,
  "forceversion": true,
  "version": "1.0.1"
}

Snack Link

https://snack.expo.dev/@rudiahmad/react-native—check-maintenance—version—force-update-api