Node js android api

Getting Started: Android native apps¶

Download the library¶

The Android shared libraries are distributed in a zip file, which you can download from the core library release page.

The zip file contains Android binaries for the armabi-v7a , x86 , arm64-v8a and x86_64 architectures.

Creating your First Project¶

The following steps will guide you through creating an Android Studio project that uses the library and is built with Gradle. The complete project can also be downloaded from the samples repo.

This sample runs the Node.js engine in a background thread to start an HTTP server on port 3000 and return the process.versions value. The app’s Main Activity UI has a button to query the server and show the server’s response. Alternatively, it’s also possible to access the server from a browser running on a different device connected to the same local network.

Android SDK Requirements¶

When you build your project, Gradle will automatically try to detect any missing dependencies and prompt you to install them from within the Android Studio event log. Here’s the list of pre-requisites in case you want to download them from the SDK Manager:

• API Level greater or equal to Marshmallow (API Level 23)
• CMake
• Android SDK Platform-Tools greater or equal to Marshmallow (API Level 23)
• Android SDK Build-Tools greater or equal to Marshmallow (API Level 23)
• NDK version 15 or greater

Create an Android Studio Project¶

Using the Android Studio’s New Project wizard, create a new Project with the following settings, by the order the options appear in screens:

1. Include C++ support checked
2. Phone and Tablet with Minimum SDK to API 21: Android 5.0 (Lollipop)
3. Empty activity selected
4. Left the defaults, which were:
   • Activity Name: MainActivity
   • Generate Layout File checked
   • Layout Name: activity_main
   • Backwards Compatibility (AppCompat) checked
5. Left the defaults, which were:
   • C++ Standard: Toolchain Default
   • Exceptions Support (-fexceptions) checked off
   • Runtime TYpe Information Support (-frtti) checked off
6. Finish

Copy libnode’s header files¶

To access libnode’s Start() entrypoint, the libnode’s header files are required.

Create the libnode/ folder inside the project’s app/ folder.

In the downloaded zip file, you can find the header files inside the include/ path. Copy this folder to app/libnode/include . If it’s been done correctly you’ll end with the following path for the node.h header file: app/libnode/include/node/node.h

In app/CMakeLists.txt add the following line to add libnode’s header files to the CMake include paths:

Add native JNI function to start node.js¶

Edit app/src/main/cpp/native-lib.cpp to add the required include files:

Convert the existing stringFromJNI function into the startNodeWithArguments function, which takes a Java String array, converts it into a libuv friendly format and calls node::Start . The function’s signature has to be adapted to the chosen organization/application name. Use the already existing stringFromJNI function as a guide. In this sample’s case, it meant changing from:

The final native-lib.cpp looks like this:

Call startNodeWithArguments from Java¶

A few changes are required in the application’s main file MainActivity.java .

Load libnode.so:¶

Instruct Java to load the libnode.so library by adding System.loadLibrary(«node»); to MainActivity.java after System.loadLibrary(«native-lib»); .

The prefix lib and the suffix .so in libnode.so are omitted.

Remove references to stringFromJNI ¶

Remove the references to the stringFromJNI function (which we have replaced in native-lib.cpp ), by deleting the following snippets:

Start a background thread to run startNodeWithArguments ¶

The app uses a background thread to run the Node.js engine.

Currently, only a single instance of the Node.js runtime can be started within an application. Restarting the engine after it has finished running is also not supported.

The node code is a simple HTTP server on port 3000 that returns process.versions . For semplicity, the node code is embedded in the MainActivity.java file:

Add a reference to the startNodeWithArguments function, the Java signature is public native Integer startNodeWithArguments(String[] arguments); .

The MainActivity class looks like this at this point:

Specify required permissions in the manifest¶

Since the app runs an HTTP server, it requires the right permissions in app/src/main/AndroidManifest.xml . Add the following line under the tag:

Add libnode.so to the project¶

Copy the library files¶

In the Android Studio Project, there should be a libnode/ folder inside the project’s app/ folder, created in a previous instruction. Copy the bin/ folder from inside the downloaded zip file to app/libnode/bin . If it’s been done correctly you’ll end with the following paths for the binaries:

• app/libnode/bin/arm64-v8a/libnode.so
• app/libnode/bin/armeabi-v7a/libnode.so
• app/libnode/bin/x86/libnode.so
• app/libnode/bin/x86_64/libnode.so

Configure CMake¶

In app/CMakeLists.txt specify the native shared library to import and its location:

Add libnode to the already existing target_link_libraries :

Configure the app’s gradle settings¶

In app/build.gradle , some changes have to be made to correctly build and package the application.

We have to instruct gradle to only package native code for the supported architectures, by adding an ndk clause inside defaultConfig :

The shared library was built using the libC++ STL, therefore the ANDROID_STL=c++_shared definition has to be passed inside the cmake clause in defaultConfig with arguments «-DANDROID_STL=c++_shared» :

Configure gradle to override its default sourceSets to include the libnode.so folder path, in the android section:

Add simple UI for testing¶

At this point, it’s already possible to run the app on an Android device and access the HTTP server from any device connected to the same local network. If the Android device’s IP is 192.168.1.100 point the browser at http://192.168.1.100:3000/ .

However, the sample also comes with the UI to query the local HTTP server and show the response.

Источник

How to Create a Mobile App with NodeJS

Last Updated on April 23, 2021 by Jarrett Retz 1 Comment

Table of Contents

What’s a Mobile Backend?

It does not take an expert to determine that the computing power of a server is most likely greater than the computing power of a mobile device.

If an application has a heavy computational load than it becomes more efficient for the mobile device to send parameters to a backend server to do the heavy lifting and then returning the result. A common pattern in React, when communicating between a front-end client and a back end server, is to use JSON.

This can become a simple process: a mobile app outsourcing it’s functionality to APIs with API requests for increased performance.

A mobile backend is simply the server, database, service, etc. that is not local to the mobile device that handles aspects of the processes of the mobile app.

MBaaS

Many companies, or developers, want to increase the functionality of their apps and they want it done quickly. In recent years, companies have been created to help increase the speed that mobile apps are developed and decrease the amount of work that goes into maintaining their architecture.

These companies are known as selling Mobile Backend as a Service (MBaaS). Furthermore, as described on Wikipedia, mobile backend as a service provides developers a, “…way to link their applications to backend cloud storage and APIs exposed by back end applications while also providing features such as user management, push notifications, and integration with social networking services.”

We will not be setting up any accounts with MBaaS providers for our application, but it could be considered in the design of your future mobile applications. Below is a list of popular MBaaS providers:

Express

With a myriad of HTTP utility methods and middleware at your disposal, creating a robust API is quick and easy.

Express is a Node.js framework for creating web application servers or APIs. Express is easy to set up, as you will see later and can be extended to include many features. Also, Express integrates all the benefits of Node.js (i.e asynchronous code).

Although Express can be a web application server, we are going to use it as an API to proxy our interactions with a database API.

Security

Whether developing front-end static websites, or a mobile application, security becomes an issue quickly. Reading from the Expo documentation,

Never put any secret keys inside of your app, there is no secure way to do this! Instead, you should store your secret key(s) on a server and expose an endpoint that makes API calls for your client and passes the data back.

Setting up an Express API on a server to handle the sensitive actions of our app allows us to secure secret keys. Later, we are going to demonstrate this process when we hide the value of our RapidAPI secret key.

Express Alternatives

To reiterate, some of the main advantages of Express are;

• Node.js asynchronous code and performance
• easy setup
• extensible middleware
• security

Considering the advantages, it’s safe to say that we are making a good choice when using Express. However, below is a list of other popular Node.js libraries that share some of the same functionality of Express:

All are reputable and have their advantages! You can read more about each by following the links. Ok, time to get started with the application!

How to Create a Mobile App with NodeJS

The application is bootstrapped with Expo. Expo allows us to quickly set up a React Native project while providing a project structure so we can quickly get into coding out the components.

Furthermore, Expo is the nicest way to get started without being too picky about the type of operating system that you are using on your desktop or smartphone.

The application will use an Express server running locally to handle the database requests that are made using the FaiRESTdb API on RapidAPI as our database.

In addition to the individual use of React Native, Expo, and Express, this tutorial will show you how we can combine the three to create a secure mobile application that can store and retrieve data.

Prerequisites

• Wireless internet connection that both your phone and laptop/desktop can connect to
  • You will not be able to use Expo if they are connected to different wireless networks
• NodeJS 12 LTS or greater installed locally. There are installation instructions on NodeJS.org.
• Expo requires Git. You can download Git from here.
• The minimum operating system requirements for smartphones are:
  • Android version is Lollipop (5)
  • iOS version 10.0
• Basic understanding of ReactJS or Javascript
• Expo client application downloaded on your smartphone

  • 1. Express and React Native Project Set-Up

    Open up a new terminal and run the following commands

    You are then prompted for the type of project to initialize by the Expo-CLI. Choose the managed workflow, tabs.

    Change directories into the new project, cd expo-client .

    In the apps root directory, run the command npm start and grab your smartphone.

    Check to make sure that both your smartphone and computer are connected to the same wireless network.

    If you are using Android, use the Expo client app to scan the QR-code that appears in the terminal (or the Qr-code in the web browser). If you are using iOS, you can use the camera’s built-in QR-code scanner. Select the camera app and point it at the QR-code.

    

    After scanning, the Expo app opens and the Javascript bundle starts to build. This can take a couple of minutes. When it finishes, our app should appear on the smartphone with the template code. Your smartphone should now show the template code for our project!

    It can take a few tries for the connection to stabilize

    

    Observing the new project can be a little intimidating. However, it’s important to remember that many of the time-consuming aspects of setting up a mobile React Native project are handled with Expo.

    To observe how we are going to develop the app, open up a text editor in the rapidapi-mobile-app-node folder, and make an edit to the file expo-client/screens/HomeScreen.js (make an edit to one of the

    components). This change will be reflected in the application running on your smartphone.

    You do not need to have an Expo account to use the client app on your smartphone. After opening the app and scanning the QR-code, navigate to the Projects tab to open (or reopen) your project.

    If you want to learn more about Expo, you can check out their documentation by following this link.

    2. Code Express Server Routes

    In your terminal, navigate to the root project directory: rapidapi-mobile-app-node .

    In this directory execute the commands below.

    The commands create a new NPM project and download some of the packages that we are going to use.

    Nodemon is a development tool library that detects file changes in the project and restarts the development server. Add the below dev script to the package.json file in the express-server folder.

    Next, we can create the Express server. Create a new file in express-server named server.js and add the code,

    Above is a basic Express server setup. After we add the /notes routes this server will be ready for use. Express is widely used because—with the code above—we have almost completely set up a working server.

    Create Routes

    Currently, server.js is importing a file that does not exist. Let’s create that file. In express-server , create the folder routes with the file notes.js .

    Next, inside of the notes.js , add the code:

    This file defines three routes:

    • / returns all of our stored notes
    • /add adds a note
    • /delete deletes a note

    Back in the server.js file, we imported the routes and gave them all a base URL of /notes . Therefore, the true URL for these routes is /notes , /notes/add , and /notes/delete .

    The file currently does not call the FaiRESTdb. We will add that later. For now, we are focusing on connecting the mobile front-end to the server.

    Test Server Setup

    In the terminal, checking to make sure that you are in the express-server folder, run npm run dev .

    If Listening on port 3001 is logged to the terminal then the server has been set up correctly.

    Keep the server running.

    3. Connect React Native to Express Server

    We can now start working on the user interface of our app.

    Navigation

    The first thing to change in the Expo app is the navigation labels. Our app will have two screens, and they will be titled ‘View Notes’ and ‘Add Note’.

    Change the INITIAL_ROUTE_NAME variable to equal ‘Notes’ .

    Next, change the string values for each of the components to match the code below:

    Then, make similar changes to the switch statement in the getHeaderTitle function.

    Finally, open expo-client/navigation/LinkingConfiguration.js and change the screens object to,

    Our navigation is now representative of our apps subject matter.

    Homescreen.js

    The Homescreen.js has a lot of code that we don’t need. Replace the code with the following simple components and accessory code.

    At the top of the file, we are making the necessary imports from react-native . Also, we are importing icons from Expo.

    Next, we are defining our Homescreen React component function. Inside the function, we immediately use React hooks to create two state variables ( notes , activeNote ).

    After the state variables we declare two functions:

    1. getNotes will be used to retrieve the notes from the server
    2. createTwoButtonAlert is used to generate an alert popup when a note is selected to provide actions to be executed on the note

    Finally, we create React Native components, which are currently not utilized (because we have no notes). The app on your phone should now look like this.

    

    Add the getNotes Function

    The getNotes function is a simple fetch API call to the Node server that is running on our computer. This function is also going to be run when the app loads, and we are going to use the React useEffect hook to accomplish that.

    We could have put the fetch function inside the useEffect hook, but we wanted to expose the function to be used outside of the hook (i.e to refresh the notes).

    Complete the getNotes function and add the useEffect hook to our component with the code below.

    This will almost work (if your Node server is still running). We can’t use localhost in this situation because the Expo app is running on a different device than our computer. However, they are using the same WiFi network. This means that we can find the local IP address of our computer (that is running the Express server) and enter that IP address into the URL of the fetch function.

    Find Your Local IP Address

    On Mac, open up your Network Preferences.

    

    My local IP address 192.168.0.110. Therefore, my Express server is running at http://192.168.0.110:3001. We added :3001 to the end of the address because that’s the port that we chose to expose the Express app on.

    This IP address is also referred to as your private IP address.

    On Windows, open up the Command Prompt and enter ipconfig .

    The terminal will display network information. Your private IP address is the IP address with the label IPv4 address:

    Once you have this information, replace the localIPaddress part of the fetch function with your private IP address.

    The application is now able to fetch the placeholderData from the default /notes route on the server. You should see the placeholder notes after you reload your app.

    We now have communication between our mobile app and backend server!

    Add the deleteNote Function

    When you select a note there is an alert pop-up that asks if you want to delete the note. Unfortunately, we have not added this function to the app.

    Underneath the React.useEffect hook add:

    The function sends the activeNote ID to the server for deletion. Also, it filters the current notes array and saves a new array without the note that was deleted.

    Again, you need to add your IP address to the fetch URL.

    LinksScreen.js

    This file is used for adding a note to the database. Therefore, replace the current code with the code below.

    It looks likes a lot of code, but the bottom section is mostly styling. The screen is an input component with a submit button and a modal informing the user that the note was added successfully. The LinksScreen , or Add Note screen now looks like the image below.

    

    Test the Routes

    We can now use the app and make sure that our data is being passed between the server and the application properly.

    First, we can assume that the /notes route is working because we can render the placeholder data.

    Next, try to delete one of the notes by selecting it and choosing Delete. The terminal running our Express server should log the note’s ID and the note should temporarily disappear from the home screen of the application.

    Finally, try adding a note. The note content should be logged to the server terminal and the success modal should appear!

    

    Perfect! We are now ready to hook up the backend to an API database service.

    4. Add FaiRESTdb API Calls to Server

    Sign Up For a Free Account on RapidAPI

    To use the FaiRESTdb API in the next section, you will need an account. Visit RapidAPI to get signed up!

    Источник

    Читайте также:  Как сбросить все настройки с android xiaomi