How to Build a Mobile App with Hyperview

In this blog, we will learn how to build a mobile app using Hyperview.

Introduction

Hyperview is a React Native client for building server-driven mobile apps. It uses a simple XML-like format called HXML to define app screens, allowing the server to control the app’s user interface.

how-to-create-mobile-app-using-hyperview

Components of Hyperview

Hyperview XML (HXML)

HXML is an XML-based format that defines native mobile UIs. It supports common UI elements, styling, and a behavior syntax for user interactions without requiring scripting.

Hyperview Client

This is a cross-platform library in React Native for rendering HXML in mobile apps. It can be used in both new and existing projects to deliver server-driven UIs efficiently.

Explore more about Hyperview on its official documentation.

Implementation

Now we will implement the app, step by step.

Setting Up Your Project with React Native

To set up the environment, check out our previous blog, Getting Started With React Native, where we walk through the entire setup process.

Install dependency

npm i hyperview

1	npm i hyperview

For a detailed understanding of the installation process and to install dependencies for Hyperview, refer to the Instawork Hyperview repository.

Create the App Components

We’ll start by creating a server.js file.

Server File:

This file creates a server that listens for requests on port 3000. It shows the local address where the server can be accessed on your network.

const express = require('express');
const { getLocalIPAddress } = require('./ipHelper');
const mainRoute = require('./mainRoute');

const app = express();
const port = 3000;

// Use the main route
app.use('/', mainRoute);

// Start the server
const ip = '0.0.0.0';
app.listen(port, ip, () => {
  console.log(`Hyperview server running at http://${getLocalIPAddress()}:${port}`);
});

const express = require('express');

const { getLocalIPAddress } = require('./ipHelper');

const mainRoute = require('./mainRoute');

const app = express();

const port = 3000;

// Use the main route

app.use('/', mainRoute);

// Start the server

const ip = '0.0.0.0';

app.listen(port, ip, () => {

console.log(`Hyperview server running at http://${getLocalIPAddress()}:${port}`);

});

Get Local IP Address File:

This code finds your computer’s local IP address to help connect with it on a network. If it can’t find one, it defaults to “localhost”.

const os = require('os');

// Function to get the local IP address
function getLocalIPAddress() {
  const interfaces = os.networkInterfaces();
  for (const iface in interfaces) {
    for (const alias of interfaces[iface]) {
      if (alias.family === 'IPv4' && !alias.internal) {
        return alias.address; // Return the local IP
      }
    }
  }
  return 'localhost'; // Fallback to localhost
}

module.exports = { getLocalIPAddress };

const os = require('os');

// Function to get the local IP address

function getLocalIPAddress() {

const interfaces = os.networkInterfaces();

for (const iface in interfaces) {

for (const alias of interfaces[iface]) {

if (alias.family === 'IPv4' && !alias.internal) {

return alias.address; // Return the local IP

}

return 'localhost'; // Fallback to localhost

}

module.exports = { getLocalIPAddress };

Main Route File

Loads data from the API and creates the XML response using generateXml.js. It sends this response when the app accesses the main route (/).

const express = require('express');
const { fetchData } = require('../helpers/apiService');
const { generateXml } = require('./generateXml');
const router = express.Router();

router.get('/', async (req, res) => {
  try {
    const apiData = await fetchData();
    const xmlResponse = generateXml(apiData);

    res.set('Content-Type', 'application/xml');
    res.send(xmlResponse);
  } catch (error) {
    res.status(500).send('Error generating XML.');
  }
});

module.exports = router;

const express = require('express');

const { fetchData } = require('../helpers/apiService');

const { generateXml } = require('./generateXml');

const router = express.Router();

router.get('/', async (req, res) => {

try {

const apiData = await fetchData();

const xmlResponse = generateXml(apiData);

res.set('Content-Type', 'application/xml');

res.send(xmlResponse);

} catch (error) {

res.status(500).send('Error generating XML.');

}

});

module.exports = router;

Generate XML File

Generates the XML structure for the app, combining API data and styles. It ensures the XML content is dynamic and ready for the Hyperview client.

const { getStyles } = require('./styles');

function generateXml(apiData) {
  const items = apiData.map((item, index) => {
    return `
      <item key="${index + 1}" style="Item">
        <text style="Item__Number">${index + 1}.</text>
        <text style="Item__Label">${item.title}</text>
      </item>
    `;
  }).join('');

  const styles = getStyles();

  return `
    <doc xmlns="https://hyperview.org/hyperview">
      <screen>
        ${styles}
        <body style="Main">
          <text style="Header">Hyperview List</text>
          <list
            trigger="refresh"
            href="/case_studies/pull_to_refresh/refresh.xml"
            action="replace"
          >
            ${items}
          </list>
        </body>
      </screen>
    </doc>
  `;
}

module.exports = { generateXml };

const { getStyles } = require('./styles');

function generateXml(apiData) {

const items = apiData.map((item, index) => {

return `

<text style="Item__Number">${index + 1}.</text>

<text style="Item__Label">${item.title}</text>

</item>

}).join('');

const styles = getStyles();

return `

${styles}

<text style="Header">Hyperview List</text>

<list

trigger="refresh"

href="/case_studies/pull_to_refresh/refresh.xml"

action="replace"

${items}

</list>

</body>

</screen>

</doc>

}

module.exports = { generateXml };

Styles File

Defines the design settings (like colors, padding, and fonts) for the app’s UI in one place. These styles are reused in the XML to keep the design consistent.

function getStyles() {
  return `
    <styles>
      <style id="Main" flex="1" paddingTop="48" paddingLeft="24" paddingRight="24" backgroundColor="white" />
      <style id="Header" fontSize="20" fontWeight="bold" marginBottom="16" textAlign="center" color="black" />
      <style id="Item" flexDirection="row" alignItems="center" justifyContent="flex-start" height="48" borderBottomWidth="1" borderBottomColor="#eee" paddingLeft="8" />
      <style id="Item__Number" fontSize="16" fontWeight="bold" marginRight="8" color="black" />
      <style id="Item__Label" fontSize="16" color="black" />
    </styles>
  `;
}

module.exports = { getStyles };

function getStyles() {

return `

</styles>

}

module.exports = { getStyles };

API Service File:

This code fetches data from an external website and returns it. If something goes wrong, it shows an error message and returns an empty list.

const axios = require('axios');

// Function to fetch data from the external API
async function fetchData() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    return response.data; // Return API data
  } catch (error) {
    console.error('Error fetching data:', error.message);
    return []; // Return an empty array in case of an error
  }
}

module.exports = { fetchData };

const axios = require('axios');

// Function to fetch data from the external API

async function fetchData() {

try {

const response = await axios.get('https://jsonplaceholder.typicode.com/posts');

return response.data; // Return API data

} catch (error) {

console.error('Error fetching data:', error.message);

return []; // Return an empty array in case of an error

}

module.exports = { fetchData };

App File

This code build a mobile app using Hyperview that connects to a server at a specific address. It also includes a function to format dates, though it’s not yet implemented.

import Hyperview from 'hyperview/src/core/components/hv-root';
import React from 'react';

export default function App() {
  return (
    <Hyperview
      entrypointUrl={'http://your device ip address:3000'}
      fetch={fetch} formatDate={function (date: Date | null | undefined, format: string | undefined): string | undefined {
        throw new Error('Function not implemented.');
      } }  />
  );
}

import Hyperview from 'hyperview/src/core/components/hv-root';

import React from 'react';

export default function App() {

return (

<Hyperview

entrypointUrl={'http://your device ip address:3000'}

fetch={fetch} formatDate={function (date: Date | null | undefined, format: string | undefined): string | undefined {

throw new Error('Function not implemented.');

} } />

);

}

Run Your App

To run your app, follow these steps:

Run the server

Open the terminal where your server.js file is located and run the following command

node server.js

1	node server.js

This will start your server.

Run the React Native App

Open your project in VSCode and open the terminal. Then, run the appropriate command

For Android

npx react-native run-android

1	npx react-native run-android

For IOS

npx react-native run-ios

1	npx react-native run-ios

Here is the Output of the project

Create Mobile App Using Hyperview

Use the Hyperview framework to build apps where the design and content are sent from the server, making it easy to update the app without changing the code.

Conclusion

Hyperview revolutionizes mobile app development by enabling server-driven UIs. Its integration with React Native ensures flexibility, dynamic content delivery, and simplified updates.

Thanks for reading this blog.

Please check my other blogs here.

How to Build a Mobile App with Hyperview

Introduction

Components of Hyperview

Hyperview XML (HXML)

Hyperview Client

Implementation

Setting Up Your Project with React Native

Install dependency

Create the App Components

Server File:

Get Local IP Address File:

Main Route File

Generate XML File

Styles File

API Service File:

App File

Run Your App

Run the server

Run the React Native App

Here is the Output of the project

Create Mobile App Using Hyperview

Conclusion

Leave a Comment Cancel Reply

Message Sent!