...
| 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:
|
Prerequisite
| Warning |
|---|
|
Set up Tools and Environment
Following tools / softwares need to be installed on your MacOS machine:
- Install XCode 10+
- Homebrew https://brew.sh/
- CocoaPods https://cocoapods.org/
- Nodejs
Install XCode
Visit https://developer.apple.com/download/ and download stable XCode.
Install Homebrew
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
Download and install latest nodejs version from https://nodejs.org/
Open Terminal and run the following command:
| 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 |
# install reactron
brew update && brew cask install react-native-debugger && brew cask install reactotron
Setup source code
...
cd MobileProject/
yarn install
# install dependencies
cd ios/
pod install
...
- Go to Client Area and download the Premium Mobile Code (in Zip format).
- Extract Zip file to MobileProject folder (We just use the folder name MobileProject for example. You can use another folder name but should update all following commands and paths accordingly)
- Run the following command to install necessary dependencies on the project
| Code Block |
|---|
#install dependencies
cd MobileProject/
yarn install
# install dependencies
cd ios/
pod install |
Configure your Android 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", |
...
"serverUrl": "https://yourphpfoxwebsite.com", |
...
"clientId": "CLIENT_ID", |
...
"clientSecret": "CLIENT_SECRET", |
...
"facebookAppId": "FACEBOOK_APP_ID", |
...
"googlePlacesClientId": "GOOGLE_PLACES_CLIENT_ID", |
...
"googleAdMobAppId": "GOOGLE_ADMOB_APP_ID", |
...
"developmentTeam": "YOUR_DEVELOPMENT_TEAM", |
...
"firebaseEnabledAnalytic": true, |
...
"codeSignStyle": "Automatic", |
...
"versionName": "1.x.x", |
...
"versionBuildNumber": 2, |
...
"theme": { |
...
"primaryColor": "#COLOR", |
...
"splashScreenBackgroundColor": "#COLOR", |
...
"grayBaseColor": "#111" |
...
} |
...
} |
Here is our detailed explanation for items in this file
appName
A short name display on iPhone under app logo, etc: phpFox
bundleId
bundle id you registered in Apple developer site, like com.yourcompany.phpfoxmobile, etc: com.phpfox.phpfoxmobile
serverUrl
Point to your phpFox website, etc: https://mobileapi.phpfox.com
clientId and ClientSecret
Visit your phpFox admincpAdminCP, get these two values in your RestFul app. ( /admincp/app/?id=phpFox_RESTful_API )
facebookAppId
Visit your phpFox admincpAdminCP, get value in facebook settings ( /admincp/setting/edit/?module-id=PHPfox_Facebook )
googlePlacesClientId
Follow instruction at https://developers.google.com/places/ios-sdk/start to get key for ios.
googleAdMobAppId
Follow instruction at https://developers.google.com/admob/android/quick-start to get key for ios.
firebaseEnabledAnalytic
Should enabled firebase analytic, for true OR false. If true, enable Firebase analytic. For further information take a look at https://firebase.google
.com/docs/analytics/
at Google Analytics for Firebase
versionName and versionBuildNumber
These two values control versioning of your app in apple store.
- versionName should follow the format "MAJOR.MINOR.PATCH"
...
- . For further information, please refer to https://semver.org/
- versionBuildNumber must be an integer number.
developmentTeam
Visit https://developer.apple.com/account, access to your development Team and get teamId Team ID value from the address bar.
primaryColor
Primary color of your app, it's value The primary color (in Hex color code, Ex: #2681D5) of your app. This color is applied to links, like button, navigation title, etc.
grayBaseColor
This value color code is used to calculate color of text.RUNNINGfor generating appropriate text color.
Run your iOS app on simulator with XCode
Enter ./MobileProject start server
node ./server.js
Open ios/Mobile.xcworkspace, then start running with Cmd+R