diff --git a/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/AndroidInstallDocs.tsx b/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/AndroidInstallDocs.tsx new file mode 100644 index 000000000..aaadafdba --- /dev/null +++ b/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/AndroidInstallDocs.tsx @@ -0,0 +1,160 @@ +import React from 'react'; +import stl from './installDocs.module.css'; +import cn from 'classnames'; +import Highlight from 'react-highlight'; +import CircleNumber from '../../CircleNumber'; +import {CopyButton} from 'UI'; + +const installationCommand = `// Add it in your root build.gradle at the end of repositories: +dependencyResolutionManagement { + repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS) + repositories { + mavenCentral() + maven { url 'https://jitpack.io' } + } +} + +// Add the dependency in your app build.gradle file: +dependencies { + implementation("com.github.openreplay:android:Tag") +} +`; + +const usageCode = `// MainActivity.kt +import com.openreplay.tracker.OpenReplay + +//... +class MainActivity : TrackingActivity() { + override fun onCreate(savedInstanceState: Bundle?) { + // not required if you're using our SaaS version + OpenReplay.serverURL = "https://your.instance.com/ingest" + // check out our SDK docs to see available options + OpenReplay.start( + applicationContext, + "projectkey", + OpenReplay.Options.defaults(), + onStarted = { + println("OpenReplay Started") + }) + + // ... + } +}`; +const configuration = `let crashs: Bool +let analytics: Bool +let performances: Bool +let logs: Bool +let screen: Bool +let wifiOnly: Bool`; + +const touches = `class MainActivity : ComponentActivity() { + // ... + OpenReplay.setupGestureDetector(this) +}` + +const sensitive = `import com.openreplay.tracker.OpenReplay + +OpenReplay.addIgnoredView(view) +` + +const inputs = `import com.opnereplay.tracker.OpenReplay + +val passwordEditText = binding.password +passwordEditText.trackTextInput(label = "password", masked = true)` + +function AndroidInstallDocs({site}: any) { + const _usageCode = usageCode.replace('PROJECT_KEY', site.projectKey); + + return ( +
+
+
+ + Install the SDK +
+
+
+ +
+ {installationCommand} +
+
+ +
+ + Add to your app +
+
+
+
+
+ +
+ {_usageCode} +
+
+
+ +
+ + Configuration +
+
+
+
+ {configuration} +
By default, all options equals true
+
+
+
+ +
+ + Set up touch events listener +
+
+
+
+
+ +
+ {touches} +
+
+
+ +
+ + Hide sensitive views +
+
+
+
+
+ +
+ {sensitive} +
+
+
+ +
+ + Track inputs +
+
+
+
+
+ +
+ {inputs} +
+
+
+
+ ); +} + +export default AndroidInstallDocs diff --git a/frontend/app/components/Onboarding/components/OnboardingTabs/OnboardingMobileTabs.tsx b/frontend/app/components/Onboarding/components/OnboardingTabs/OnboardingMobileTabs.tsx index 347a30959..abfb00f77 100644 --- a/frontend/app/components/Onboarding/components/OnboardingTabs/OnboardingMobileTabs.tsx +++ b/frontend/app/components/Onboarding/components/OnboardingTabs/OnboardingMobileTabs.tsx @@ -4,10 +4,13 @@ import MobileInstallDocs from './InstallDocs/MobileInstallDocs'; import DocCard from 'Shared/DocCard/DocCard'; import { useModal } from 'App/components/Modal'; import UserForm from 'App/components/Client/Users/components/UserForm/UserForm'; +import AndroidInstallDocs from "Components/Onboarding/components/OnboardingTabs/InstallDocs/AndroidInstallDocs"; const iOS = 'iOS'; +const ANDROID = 'Android'; const TABS = [ { key: iOS, text: iOS }, + { key: ANDROID, text: 'Android' }, ]; interface Props { @@ -32,6 +35,29 @@ const MobileTrackingCodeModal = (props: Props) => { +
+ + + Invite and Collaborate + + + + +
+ {site.projectKey} + +
+ +
+ + ); + case ANDROID: + return ( +
+
+ +
+