GitBook: [master] 601 pages and 37 assets modified

RocketChat · Jul 30, 2020 · 6de0984 · 6de0984
1 parent 3bb3c1d
commit 6de0984
Show file tree

Hide file tree

Showing 40 changed files with 188 additions and 0 deletions.
diff --git a/.gitbook/assets/0.png b/.gitbook/assets/0.png
diff --git a/.gitbook/assets/1.png b/.gitbook/assets/1.png
diff --git a/.gitbook/assets/10.png b/.gitbook/assets/10.png
diff --git a/.gitbook/assets/11.png b/.gitbook/assets/11.png
diff --git a/.gitbook/assets/12.png b/.gitbook/assets/12.png
diff --git a/.gitbook/assets/13.png b/.gitbook/assets/13.png
diff --git a/.gitbook/assets/14.png b/.gitbook/assets/14.png
diff --git a/.gitbook/assets/15.png b/.gitbook/assets/15.png
diff --git a/.gitbook/assets/16.png b/.gitbook/assets/16.png
diff --git a/.gitbook/assets/17.png b/.gitbook/assets/17.png
diff --git a/.gitbook/assets/18.png b/.gitbook/assets/18.png
diff --git a/.gitbook/assets/19.png b/.gitbook/assets/19.png
diff --git a/.gitbook/assets/2.png b/.gitbook/assets/2.png
diff --git a/.gitbook/assets/20.png b/.gitbook/assets/20.png
diff --git a/.gitbook/assets/21.png b/.gitbook/assets/21.png
diff --git a/.gitbook/assets/22.png b/.gitbook/assets/22.png
diff --git a/.gitbook/assets/23.png b/.gitbook/assets/23.png
diff --git a/.gitbook/assets/24.png b/.gitbook/assets/24.png
diff --git a/.gitbook/assets/25.png b/.gitbook/assets/25.png
diff --git a/.gitbook/assets/26.png b/.gitbook/assets/26.png
diff --git a/.gitbook/assets/27.png b/.gitbook/assets/27.png
diff --git a/.gitbook/assets/28.png b/.gitbook/assets/28.png
diff --git a/.gitbook/assets/29.png b/.gitbook/assets/29.png
diff --git a/.gitbook/assets/3.png b/.gitbook/assets/3.png
diff --git a/.gitbook/assets/30.png b/.gitbook/assets/30.png
diff --git a/.gitbook/assets/31.png b/.gitbook/assets/31.png
diff --git a/.gitbook/assets/32.png b/.gitbook/assets/32.png
diff --git a/.gitbook/assets/33.png b/.gitbook/assets/33.png
diff --git a/.gitbook/assets/34.png b/.gitbook/assets/34.png
diff --git a/.gitbook/assets/35.png b/.gitbook/assets/35.png
diff --git a/.gitbook/assets/36.png b/.gitbook/assets/36.png
diff --git a/.gitbook/assets/4.png b/.gitbook/assets/4.png
diff --git a/.gitbook/assets/5.png b/.gitbook/assets/5.png
diff --git a/.gitbook/assets/6.png b/.gitbook/assets/6.png
diff --git a/.gitbook/assets/7.png b/.gitbook/assets/7.png
diff --git a/.gitbook/assets/8.png b/.gitbook/assets/8.png
diff --git a/.gitbook/assets/9.png b/.gitbook/assets/9.png
diff --git a/SUMMARY.md b/SUMMARY.md
@@ -69,6 +69,8 @@
 
 ## Guides
 
+* [Mobile Apps](guides/mobile-apps/README.md)
+  * [Whitelabeling mobile apps](guides/mobile-apps/whitelabeling-mobile-apps.md)
 * [User Guides](guides/user-guides/README.md)
   * [Channel Actions](guides/user-guides/channel-actions.md)
   * [Channels](guides/user-guides/channels.md)

diff --git a/guides/mobile-apps/README.md b/guides/mobile-apps/README.md
@@ -0,0 +1,6 @@
+---
+description: Here you will find guides for Rocket.Chat's Mobile Apps
+---
+
+# Mobile Apps
+
diff --git a/guides/mobile-apps/whitelabeling-mobile-apps.md b/guides/mobile-apps/whitelabeling-mobile-apps.md
@@ -0,0 +1,180 @@
+# Whitelabeling mobile apps
+
+
+
+In this guide we will cover how to rebrand Rocket.Chat Mobile Apps to suit your styling.
+
+Here we will show you how to customize:
+
+* The App Icons
+* Splash Screens
+* App Name
+* Some colors
+
+Before starting, keep in mind that you will need an intermediate knowledge of Android/iOS development and basic Javascript knowledge.
+
+## 
+
+## Repo
+
+* Make sure you have both iOS and Google developer accounts and the respective development environments working
+  * You can follow this guide: [https://reactnative.dev/docs/getting-started](https://reactnative.dev/docs/getting-started)
+* Clone [https://github.com/RocketChat/Rocket.Chat.ReactNative](https://github.com/RocketChat/Rocket.Chat.ReactNative)
+* Checkout \`single-server\` branch
+
+## General
+
+* Create an account on [https://www.bugsnag.com/](https://www.bugsnag.com/)
+* Set \`BUGSNAG\_API\_KEY\` on [config.js](https://github.com/RocketChat/Rocket.Chat.ReactNative/blob/single-server/config.js#L2)
+* Set \`server\`, \`appGroup\` and \`appStoreId\` on [app.json](https://github.com/RocketChat/Rocket.Chat.ReactNative/blob/single-server/app.json#L5)
+  * \`appGroup\` must be the same App Group created for the iOS app
+* Change app colors on [colors.js](https://github.com/RocketChat/Rocket.Chat.ReactNative/blob/single-server/app/constants/colors.js)
+
+## Firebase
+
+### Creating a new project on Google Cloud Platform
+
+* Visit [https://console.cloud.google.com/home/dashboard](https://console.cloud.google.com/home/dashboard)
+* By the text Google Cloud Platform there is a dropdown, open and then “Create project”
+* In the dialog give an project name then “Create”
+* Wait the creating process, you can follow in notifications by your avatar
+* You will be redirected to the project page after creation
+
+### Creating new Firebase project
+
+* Visit [https://console.firebase.google.com/](https://console.firebase.google.com/)
+* Click on “Add Project”
+* Enter the project name you created on previous step
+* Follow the wizard until Firebase project is created
+* We’re going to create the apps later on the tutorial
+
+## iOS
+
+### General setup
+
+### Generating iOS app on Firebase
+
+### Running the app
+
+* Execute the following on project terminal
+  * yarn
+  * cd ios
+  * pod install
+  * cd ..
+  * react-native run-ios
+
+## Android
+
+### General setup
+
+### Generate upload key
+
+* This step will generate the keystore that is going to verify your app on Google Play
+  * You can use this guide as reference: [https://reactnative.dev/docs/signed-apk-android\#generating-an-upload-key](https://reactnative.dev/docs/signed-apk-android#generating-an-upload-key)
+* Execute the following on terminal
+  * cd android/app
+  * keytool -genkeypair -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
+* Credentials will be prompted
+  * ![](../../.gitbook/assets/15.png)
+* Set \`KEYSTORE\_PASSWORD\` and \`KEY\_PASSWORD\` on [./android/gradle.properties](https://github.com/RocketChat/Rocket.Chat.ReactNative/blob/single-server/android/gradle.properties) with the passwords you were prompted
+
+### Generating Android app on Firebase
+
+### Running the app
+
+* Execute the following on project terminal
+  * yarn
+  * react-native run-android
+* The app will build on the simulator or device, but it won’t start automatically
+
+### Optional: Start the app automatically after build
+
+* Android starts the app based on package’s Activity, but we changed the application id, so it won’t work
+* For it to work, you have to change all references to \`chat.rocket.reactnative\` on .java files and on manifest
+* Change all references as on this commit: [https://github.com/RocketChat/Rocket.Chat.ReactNative/commit/518e56379d88937d7f9a572c7bd61716a4d0b7fe](https://github.com/RocketChat/Rocket.Chat.ReactNative/commit/518e56379d88937d7f9a572c7bd61716a4d0b7fe)
+
+## Push notification
+
+### Configuring gateway
+
+* Go to your Rocket.Chat admin page &gt; Push
+* Disable “Gateway” and press “Save changes”
+  * ![](../../.gitbook/assets/21.png)
+* Also disable “Production”, if you’re trying in debug mode
+* Expand “Credentials and Keys” section
+
+### Configuring Android
+
+* Go to Cloud Messaging on Firebase settings
+* Copy “Server Key” token from Firebase into “GCM API Key”
+* Copy “Sender ID” into “GCM Project Number”
+* ![](../../.gitbook/assets/22.png)
+
+### Configuring iOS
+
+* Make sure you’ve done “Creating Push Notifications certificates” first
+* In your terminal, go to the folder which contains your push files \(CSR, .cer, .p12\).
+
+#### Generating PEM files \(Development\)
+
+* Execute
+  * openssl x509 -in aps\_development.cer -inform der -out DevPushCert.pem
+  * openssl pkcs12 -nocerts -out DevPushKey.pem -in yourP12File.p12
+* You **must** set a password for your PEM file
+
+#### Generating PEM files \(Production\)
+
+* Execute
+  * openssl x509 -in aps.cer -inform der -out PushCert.pem
+  * openssl pkcs12 -nocerts -out PushKey.pem -in yourP12File.p12
+* You **must** set a password for your PEM file
+
+#### Copying PEM files to Rocket.Chat
+
+* Copy the contents of your development PEM files and password into APN Dev Key, APN Dev Cert and APN Dev Passphrase
+* Copy the contents of your production PEM files and password into APN Key, APN Cert and APN Passphrase
+* You can use \`cat\` on terminal to get the content of your PEM files
+  * cat PushKey.pem
+* Save and restart your server
+* Log into the server as the same user on your mobile device and close it \(it won’t receive push notification, if it’s open\)
+* Open Push settings on admin from desktop and click “Send a test push to my user”
+
+## Developer Apple
+
+### Login to Apple Developer
+
+* Visit [https://developer.apple.com/account](https://developer.apple.com/account/resources/certificates/list)
+* Enter your credentials
+* Click on Certificates, Identifiers & Profiles
+  * ![](../../.gitbook/assets/23.png)
+
+### Creating an App Identifier
+
+### Creating an App Identifier for our Share Extension
+
+### Creating an App Group
+
+### Applying App Group
+
+* Visit [https://developer.apple.com/account/resources/identifiers/list](https://developer.apple.com/account/resources/identifiers/list)
+* Click on the first identifier you created
+* On “App Groups”, click “Configure”
+* Select the App Group you created and click “Continue”
+* Click “Save”
+* Repeat these steps for the second identifier you created for the Share Extension
+
+### Creating Push Notifications certificates
+
+* Visit [https://developer.apple.com/account/resources/identifiers/list](https://developer.apple.com/account/resources/identifiers/list)
+* Click on the first identifier you created
+* On “Push Notifications”, click “Configure”
+* ![](../../.gitbook/assets/30.png)
+
+#### 
+
+#### Development SSL Certificate
+
+* 
+#### Production SSL Certificate
+
+*