How to build native mobile apps with PHP

Build native mobile apps using PHP through the React Native framework, which allows developers to build applications with native look and performance using PHP. In the actual case, a simple counter application was created using React Native and PHP server. When the button is clicked in the app, an API in the PHP server is called to update the count and the updated count is displayed in the app.

How to build native mobile applications with PHP

Introduction

PHP is a A popular server-side scripting language, but less well-known is that it can also be used to build native mobile applications. By using React Native, a popular cross-platform mobile application framework, developers can use PHP to create high-performance applications with a native look and feel.

Practical case: Build a simple counter application

Step 1: Create a React Native project

mkdir counter-app
cd counter-app
npx react-native init CounterApp --template react-native-template-typescript

Step 2: Create api.php file in PHP server

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");

$data = json_decode(file_get_contents("php://input"));

if (isset($data->operation)) {
  switch ($data->operation) {
    case "increment":
      $count = (int) file_get_contents("count.txt") + 1;
      break;
    case "decrement":
      $count = (int) file_get_contents("count.txt") - 1;
      break;
    default:
      $count = (int) file_get_contents("count.txt");
      break;
  }
  file_put_contents("count.txt", $count);
  echo json_encode(["count" => $count]);
}
?>

Step 3: Add call to API in App.tsx

// Import React and useState
import React, { useState } from 'react';

// Create the main app component
const App = () => {
  // Initialize state for count
  const [count, setCount] = useState(0);

  // Handle increment and decrement button clicks
  const handleIncrement = () => {
    fetch('http://localhost:3000/api.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ operation: 'increment' }),
    })
      .then(res => res.json())
      .then(data => setCount(data.count))
      .catch(error => console.error(error));
  };

  const handleDecrement = () => {
    fetch('http://localhost:3000/api.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ operation: 'decrement' }),
    })
      .then(res => res.json())
      .then(data => setCount(data.count))
      .catch(error => console.error(error));
  };

  // Render the main app
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Counter Application</Text>
      <Text style={styles.count}>{count}</Text>
      <TouchableOpacity style={styles.button} onPress={handleIncrement}>
        <Text style={styles.buttonText}>+</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.button} onPress={handleDecrement}>
        <Text style={styles.buttonText}>-</Text>
      </TouchableOpacity>
    </View>
  );
};

export default App;

Step 4: Run the application

npx react-native run-ios

Test the application

While the application is running, click the buttons to increment or decrement the count. You can view the requests to the server by accessing the API route at http://localhost:3000/api.php in a web browser.

The above is the detailed content of How to build native mobile apps with PHP. For more information, please follow other related articles on the PHP Chinese website!