Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This article will guide you to build your iOS app with Premium Mobile Code

The article contains the following parts:


Note

The Premium Mobile Code is only available on phpFox ULTIMATE license. In case you are holding other license types, please upgrade to phpFox ULTIMATE license first.

In this article, we assume that you already got the following knowledge:

  • How to use XCode to set up and build an Android app
  • How to create necessary iOS certifications to build an iOS app
  • How to configure a Firebase project for push notification on an iOS app.
 

Now, let's start.

Prerequisite

Warning

...

Following tools / softwares need to be installed on your MacOS machine:

  • Install XCode 10+
    • In particular, for Mobile Code 1.4 or newer:
      • MacOS >= 10.14.4
      • XCode >= 10.2.0
  • Homebrew https://brew.sh/ (for Mobile code 1.3 only)
  • CocoaPods https://cocoapods.org/
  • NodejsNodejs 

Install XCode

Visit https://developer.apple.com/download/ and download stable XCode.

Install Homebrew

Info
titleUpdate

If you are using Mobile code version 1.4 or newer, you no longer need to install Homebrew. This step can be bypassed.

Open Terminal and run the following commands:

Code Block
# Checking brew is already
which brew


# if not, run this command to install
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Install Cocoapods

Open Terminal and run the following commands:

Code Block
# Checking Cocoapods is already
which pod

#if not installed, run below command to install 
sudo gem install cocoapods

Install Nodejs & dependencies

Info
titleUpdate

If you are using Mobile code version 1.4 or newer, you no longer need to install Nodejs & Dependencies. This step can be bypassed.

  • Download and install latest

...

Code Block
# support eslint 
npm install -g @babel/core@^7 @babel/cli@^7 eslint eslint-plugin-jest babel-eslint eslint-config-airbnb eslint-config-google eslint-plugin-flow-vars \
eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-node eslint-plugin-promise eslint-plugin-react \
eslint-plugin-standard eslint-plugin-mocha eslint-plugin-jasmine babel-plugin-react-intl babel-plugin-transform-remove-console \
yarn react-native-cli create-react-native-app

...

Code Block
#install dependencies. For the mobile code version 1.3 only.
cd MobileProject/
yarn install


Code Block
# install dependencies 
cd MobileProject/ios/
pod install

Configure your

...

iOS app

Configure Push Notification with Firebase

  • Visit https://console.firebase.google.com/, create a project (You can use one Firebase project for both iOS and Android apps)
  • Download GoogleService-Info.plist  and overwrite the default file at MobileProject/ios/GoogleService-Info.plist

Configure configuration.json under MobileProject/ios folder

Default file configuration.json will be as below:

Code Block
{
  "appName": "YourAppName",
  "bundleId": "com.yourcompany.phpfoxmobile",
  "shareExtensionId": "com.yourcompany.phpfoxmobile.ShareExtension",
  "groupId": "group.com.yourcompany.phpfoxmobile",
  "serverUrl": "https://yourphpfoxwebsite.com",
  "clientId": "CLIENT_ID",
  "clientSecret": "CLIENT_SECRET",
  "versionName": "1.xx",
  "versionBuildNumber": xx,
  "facebookAppId": "FACEBOOK_APP_ID",
  "googlePlacesClientId": "GOOGLE_PLACES_CLIENT_ID",
  "googleAdMobAppIdstringKeyCodePush": "",
  "react-native-google-mobile-ads": {
    "ios_app_id": "GOOGLE_ADMOB_APP_ID,
    "delay_app_measurement_init": false
  },
  "developmentTeam": "YOUR_DEVELOPMENT_TEAM",
  "firebaseEnabledAnalyticpingServerUrl": true"",
  "codeSignStyle": "AutomaticManual",
  "versionNamecodeSignIdentity": "1.x.x",
"versionBuildNumber": 2,
IOS_DISTRIBUTION_CERTIFICATE",
  "provisioningProfileSpecifier": "MAIN_PROVISIONING_PROFILE_NAME",
  "shareExtensionProvisioningProfileSpecifier": "SHAREEXT_PROVISIONING_PROFILE_NAME",
  "targetedDeviceFamily": "1",
  "firebaseEnabledAnalytic": true,
  "theme": {
    "primaryColorsplashScreenBackgroundColor": "#COLOR",
    "splashScreenBackgroundColorprimaryColor": "#COLOR",
    "grayBaseColor": "#111",
    "welcomeText": {
      "fontSize": 24,
      "color": "#FFF",
      "fontWeight": 400
    },
    "welcomeImage": {
      "height": 48,
      "resizeMode": "contain"
    }
  },
  "enableAssociatedDomains": true,
  "associatedDomains": [
    "yourphpfoxwebsite.com",
    "www.yourphpfoxwebsite.com"
  ],
  "enableLiveStream": false,
  "enableRocketChat": true,
  "enableInAppPurchase": false,
  "enableAdmob": false,
  "enableAudio": false,
  "enableLog": false,
  "expose": {
    "NSAppleMusicUsageDescription": "$(APP_DISPLAY_NAME) would like to use your apple music.",
    "NSBluetoothPeripheralUsageDescription": "$(APP_DISPLAY_NAME) would like to use your bluetooth.",
    "NSCalendarsUsageDescription": "$(APP_DISPLAY_NAME) would like to use your calendar.",
    "NSCameraUsageDescription": "$(APP_DISPLAY_NAME) would like to use your camera. Without permission to use your camera, you could not take a photo or take a video while posting a photo or video in the status, profile, photo or video modules.",
    "NSLocationWhenInUseUsageDescription": "$(APP_DISPLAY_NAME) would like to use your location address.",
    "NSMicrophoneUsageDescription": "$(APP_DISPLAY_NAME) would like to your microphone (for videos). Without permission to use your microphone, people could not hear you while watching a video you have taken.",
    "NSMotionUsageDescription": "$(APP_DISPLAY_NAME) would like to use your motion.",
    "NSPhotoLibraryAddUsageDescription": "$(APP_DISPLAY_NAME) would like to save photos to your gallery. Without this permission, you could not save a photo into your local storage.",
    "NSPhotoLibraryUsageDescription": "$(APP_DISPLAY_NAME) would like access to your gallery to upload photos or videos from your local storage while using some functions.",
    "NSSpeechRecognitionUsageDescription": "$(APP_DISPLAY_NAME) would like to recognize your speech.",
    "NSLocationAlwaysUsageDescription": "$(APP_DISPLAY_NAME) would like to use your location data. Without permission to use your location data, the Check-In feature or location sharing feature may not work.",
    "NSContactsUsageDescription": "$(APP_DISPLAY_NAME) would like to use your contacts data. Without permission to use your contacts data, the Audio/Video call feature may not work.",
    "NSUserTrackingUsageDescription": "This allows the $(APP_DISPLAY_NAME) app to provide you with the most relevant ads and content possible."
  }
}

Here is our detailed explanation for items in this file

...

googlePlacesClientId
Follow the instruction at https://developers.google.com/places/ios-sdk/start to get key for ios.

googleAdMobAppIdios_app_id
Follow the instruction at https://developers.google.com/admob/android/quick-start to get key for ios.

...

grayBaseColor
This color code is used for generating appropriate text color.

Run

...

Nodejs

Info
titleUpdate

If you are using Mobile code version 1.4 or newer, you no longer need to run Nodejs. This step can be bypassed.

  • Open Terminal, go to MobileProject folder
  • Run the following command to start
Code Block
node ./server.js

Start your iOS app on a simulator with XCode

  • Open XCode, start the iOS project at ios/Mobile.xcworkspace
  • Start running iOS on Simulator

...