Mobile App Setup

This YouTube playlist shows how to set up a local development environment for the D.T. Mobile App and contains more information about the environment than this guide.

However, the playlist uses Docker for the local Wordpress server and executes the mobile app setup slightly differently. There are links in the steps below to pertinent sections in the video, although they are not necessarily in the same order.

Where the details differ please follow these instructions instead.

Contents

1. Install Mobile App Plugin

Download the latest mobile app plugin zip file, and install the plugin, by following these instructions: https://wordpress.org/support/article/managing-plugins/#manual-upload-via-wordpress-admin

2. Configure WordPress Address

Changes need to be made to the Wordpress configuration for the mobile app to connect to it.

If you are using LocalWP Setup, then there are two choices: Local Live Link address, or change the D.T site’s domain to an address reachable from your mobile device. The latter is the only choice if you are using Docker

  1. Enable ngrok.io Live Link from the centre of the bottom line of the D.T’s Local Sites in the Local app.
  2. “Enable” button’s text will change to “Copy”
  3. Transfer address to mobile device – it will look like: http://0f0f0f0f0f0f.ngrok.io

OR Change Site Domain to Your Server’s IP Address

Warning: With Docker, if your local Wordpress site has NOT been setup to use http (i.e. NOT https) then you will need to reinitialize it.

  1. Discover the IP address of your local server

    There are multiple commands to do this, and your computer may have multiple network interfaces and it will depend if it uses a wired or wireless connection.

    • The address would likely be of the form “192.168.1.2” (as an example)
      • On Linux you can use: ifconfig
      • On Windows you can use: ipconfig

  2. If you are using LocalWP,

    • In the D.T’s Local Sites in the Local app, change the Site Domain to your IP address

    If you are using Docker,

    • login to wp-admin and go to Settings > General and update the WordPress and Site Addresses to your servers IP address.

    • As examples, if your address is 192.168.1.2 and no port number, then:

      • WordPress Address (URL): http://192.168.1.2
      • Site Address (URL): http://192.168.1.2

      NOTE: This YouTube video shows the basic procedure.

3. Setup Source Code

Clone the development or master branch of https://github.com/DiscipleTools/disciple-tools-mobile-app to the folder where you want the source code to be stored.

This YouTube video goes into much more detail.

> git clone https://github.com/DiscipleTools/disciple-tools-mobile-app.git
> cd ./disciple-tools-mobile-app/
> git checkout development

Https Workaround

Your local copy of DT does not have the correct https certificates so the mobile app will not be able to connect to it. To work around this, use the http connection instead.

This is shown in this YouTube video.

NOTE: The app code is able to connect to the official demo server if you have an account, but will no longer be able to after these changes.

For Windows: These are Linux commands. You will need execute these commands from the git bash shell, or another Linux shell

From within the disciple-tools-mobile-app folder:

> cd store/sagas
> grep -rl https: . | xargs sed -i "s/https:/http:/g"

WARNING: Do not include these changes with any pull requests to the main repository! They will be rejected.

Install Expo

See https://expo.io/learn

  1. Expo requires NPM to be installed. Download and setup from https://nodejs.org/

  2. Use NPM to install expo:

    > npm install expo-cli -–global
  3. Create an account if you do not have one (You do not have to create a project)
  4. Install the Expo client on your mobile device (iOS or Android app stores)

Install Dependencies

From within the disciple-tools-mobile-app cloned folder install project dependencies based on the package.json file

This is shown in this YouTube video

Use the NPM install command:

   > npm install

This may take a while

4. Run the Development Environment

Use the NPM start command:

    > npm start
  1. Wait for the GUI to display a QR code and then on your mobile device:
    • Again, this may take a while
    • From iOS: take picture of QR code
    • From Android: launch Expo app and take a picture of the QR code.
  2. Wait for the DT android app to start and ask for you to connect to the server.
    • This may a while as well, but the main Expo GUI will provide a status, as will the terminal you started it on.
    • Log into the mobile app using the local DT Wordpress server ip address you set the server to previously.

NOTE: The end of Part 5 as well as part 6 of the YouTube videos give additional information about using the mobile development environment:

Part 7 shows you what is happening on the phone while this is taking place: