{"id":3903,"date":"2023-01-31T14:17:06","date_gmt":"2023-01-31T07:17:06","guid":{"rendered":"https:\/\/www.bagi2info.com\/?p=3903"},"modified":"2023-01-31T14:24:51","modified_gmt":"2023-01-31T07:24:51","slug":"simple-react-native-api-status-maintenance-version-update","status":"publish","type":"post","link":"https:\/\/www.bagi2info.com\/en\/simple-react-native-api-status-maintenance-version-and-update\/","title":{"rendered":"Simple React Native API Status Maintenance, Version and Update"},"content":{"rendered":"\r\n<p>Sometimes there are several features in our mobile application so that it can run smoothly, these features will be placed when the user logs into the application, an example of these features is <\/p>\r\n\r\n\r\n\r\n<ol class=\"wp-block-list\">\r\n<li><strong>Maintenance feature<\/strong> to display server status information when maintenance is being carried out. This feature is useful if there are problems in our application, whether it&#8217;s from the server, database problems, and so on, so we can temporarily block the user<\/li>\r\n\r\n\r\n\r\n<li>Version feature to check what version of the application the user is using with the version on our server (API), this version is useful for the third feature. <\/li>\r\n\r\n\r\n\r\n<li>Update feature to force the user to update the application or not, sometimes when we update the application there are various changes so that the application runs properly, so the user must use the latest version, with this feature the user inevitably has to update the application. <\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n<p>We only use simple api using PHP, here is an example of source code:<\/p>\r\n\r\n\r\n\r\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n\r\n\r\n\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.bagi2info.com\/en\/simple-react-native-api-status-maintenance-version-and-update\/#App_js\" >App. js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.bagi2info.com\/en\/simple-react-native-api-status-maintenance-version-and-update\/#Login_php\" >Login. php<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.bagi2info.com\/en\/simple-react-native-api-status-maintenance-version-and-update\/#Loginphp_JSON\" >Login.php JSON<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"App_js\"><\/span>App. js<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<pre title=\"App.js\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx line-numbers\">import * as React from 'react';\r\nimport { Text, View, StyleSheet, Alert, Button, Linking } from 'react-native';\r\nimport Constants from 'expo-constants';\r\n\r\nconst localVersion = '1.0.0'; \/\/ can be retrieve from app.json or package.json\r\n\r\nexport default function App() {\r\n  const handleLogin = async () => {\r\n    let valueversion;\r\n\r\n    \/\/ change with your app link\r\n    const playstoreappURL =\r\n      'https:\/\/play.google.com\/store\/apps\/details?id=com.google.android.googlequicksearchbox';\r\n\r\n    try {\r\n      let response = await fetch('https:\/\/www.bagi2info.com\/sample\/login.php', {\r\n        method: 'POST',\r\n        headers: {\r\n          Accept: 'application\/json',\r\n          'Content-Type': 'application\/json',\r\n        },\r\n        body: JSON.stringify({\r\n          email: 'test',\r\n          password: 'test',\r\n        }),\r\n      });\r\n\r\n      let json = await response.json();\r\n\r\n      if (json.maintenance) {\r\n        Alert.alert(\r\n          'Info',\r\n          'Server is currently down for emergency maintenance. Please try again after sometimes'\r\n        );\r\n        return true;\r\n      }\r\n\r\n      if (json.forceversion) {\r\n        if (json.version != localVersion) {\r\n          Alert.alert(\r\n            'Info',\r\n            \"There is new version available on the app. It's recommended to use the newest version\",\r\n            [\r\n              {\r\n                text: 'YES',\r\n                onPress: () => Linking.openURL(playstoreappURL),\r\n              },\r\n              {\r\n                text: 'CANCEL',\r\n                onPress: () => {\r\n                  console.log('OK Pressed');\r\n                  \/\/ stop the login process not allow if forceversion n different ver\r\n                  return;\r\n                },\r\n              },\r\n            ]\r\n          );\r\n\r\n          valueversion = json.forceversion;\r\n        }\r\n      } else {\r\n        if (json.version != localVersion) {\r\n          Alert.alert(\r\n            'Info',\r\n            \"There is new version available on the app. It's recommended to use the newest version\",\r\n            [\r\n              {\r\n                text: 'YES, INSTALL',\r\n                onPress: () => Linking.openURL(playstoreappURL),\r\n              },\r\n\r\n              {\r\n                text: 'CANCEL',\r\n                onPress: () => {\r\n                  console.log('OK Pressed');\r\n                },\r\n              },\r\n            ]\r\n          );\r\n        }\r\n      }\r\n      \/\/ stop the login process not allow if forceversion n different ver\r\n      if (valueversion) {\r\n        return false;\r\n      }\r\n\r\n      \/\/ if all checking pass\r\n      \/\/ successfull login to dashboard\r\n      \/\/ props.navigation.navigate('Home');\r\n    } catch (error) {\r\n      console.error(error);\r\n    }\r\n  };\r\n\r\n  return (\r\n    &lt;View style={styles.container}>\r\n      &lt;Text style={styles.paragraph}>\r\n        {`React Native Sample Code\r\n         - Check Maintenance \r\n         - Version \r\n         - Update app `}\r\n      &lt;\/Text>\r\n      &lt;Button title=\"Login\" onPress={handleLogin} \/>\r\n    &lt;\/View>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    flex: 1,\r\n    justifyContent: 'center',\r\n    paddingTop: Constants.statusBarHeight,\r\n    backgroundColor: '#ecf0f1',\r\n    padding: 8,\r\n  },\r\n  paragraph: {\r\n    margin: 24,\r\n    fontSize: 18,\r\n    fontWeight: 'bold',\r\n    textAlign: 'center',\r\n  },\r\n});\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Login_php\"><\/span>Login. php<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<pre title=\"login.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php line-numbers\">&lt;?php\r\n\r\n$maintenance = true;\r\n$forceversion = true;\r\n$version = '1.0.1';\r\n\r\n$err = array(\r\n     'errr' => true,\r\n     'msg' => 'Incorrect username or password',\r\n     'maintenance' => $maintenance,\r\n     'forceversion' => $forceversion,\r\n     'version' => $version,\r\n);\r\n\r\nif ($successlogin) {\r\n\r\n     echo json_encode(array(\r\n         'errr' => false,\r\n         'msg' => 'Login success',\r\n         'maintenance' => $maintenance,\r\n         'forceversion' => $forceversion,\r\n         'version' => $version,\r\n     ));\r\n} else {\r\n\r\n     echo json_encode($err);\r\n}\r\n\r\n?><\/code><\/pre>\r\n\r\n\r\n\r\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Loginphp_JSON\"><\/span>Login.php JSON<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<pre title=\"JSON example login.php\" class=\"wp-block-code\"><code lang=\"json\" class=\"language-json line-numbers\">{\r\n   \"errr\": true,\r\n   \"msg\": \"Incorrect username or password\",\r\n   \"maintenance\": true,\r\n   \"forceversion\": true,\r\n   \"version\": \"1.0.1\"\r\n}\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<p>Snack Links<\/p>\r\n\r\n\r\n\r\n<p><a href=\"https:\/\/snack.expo.dev\/@rudiahmad\/react-native---check-maintenance---version---force-update-api\">https:\/\/snack. expo.dev\/@rudiahmad\/react-native&#8212;check-maintenance&#8212;version&#8212;force-update-api<\/a><\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>Sometimes there are several features in our mobile application so that it can run smoothly, these features will be placed when the user logs into the application, an example of these features is Maintenance&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":3910,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[173],"tags":[],"class_list":["post-3903","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/3903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/comments?post=3903"}],"version-history":[{"count":8,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/3903\/revisions"}],"predecessor-version":[{"id":3914,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/3903\/revisions\/3914"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media\/3910"}],"wp:attachment":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media?parent=3903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/categories?post=3903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/tags?post=3903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}