jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update getting-started

Browse Source 
Summary:
- Fix some typos.
- Move Objective-C/Swift code blocks under one heading with code tabs.
- Fix hierarchy so that sidebar is actually useful.

Adding a top-level Android/iOS(Swift)/iOS(ObjC) switch is really, really
painful to do right now. What RN does for this is incredibly gross (sorry, but I'm sure they'd agree)
and precarious. It only takes one incorrectly placed newline to break everything.

Let's avoid that for now.

Reviewed By: jknoxville

Differential Revision: D15123871

fbshipit-source-id: b1184dbbaf3e38b09596ce4e0f0d4daa79b8e33f
This commit is contained in:
Pascal Hartig
2019-04-29 15:39:47 -07:00
committed by Facebook Github Bot
parent d41df85ab7
commit a9993ffa52
1 changed files with 72 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
docs/getting-started.md
View File

@@ -1,7 +1,6 @@
--- ---
id: getting-started id: getting-started
title: Getting Started title: Getting Started
sidebar_label: Getting Started
--- ---
Flipper helps you debug Android and iOS apps running in an emulator/simulator or connected physical development devices. Flipper consists of two parts: Flipper helps you debug Android and iOS apps running in an emulator/simulator or connected physical development devices. Flipper consists of two parts:
@@ -23,7 +22,7 @@ Once you start Flipper and launch an emulator/simulator or connect a device, you
### Setup your Android app ### Setup your Android app
Add the following permissions to your AndroidManifest.xml. The SDK needs these to communicate with the desktop app on localhost via adb. It won't make any external internet requests. Add the following permissions to your `AndroidManifest.xml`. The SDK needs these to communicate with the desktop app on localhost via adb. It won't make any external internet requests.
```xml ```xml
<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.INTERNET" />
@@ -53,9 +52,8 @@ dependencies {
} }
``` ```
Now you can initialize Flipper in your Application's `onCreate` method like this: Now you can initialize Flipper in your Application's `onCreate` method, which involves
initializing SoLoader (for loading the C++ part of Flipper) and starting a `FlipperClient`.
It's important that `SoLoader.init(this, false);` is called at some point before the Flipper client is initialized. This allows the c++ part of Flipper to be loaded.
```java ```java
public class MyApplication extends Application { public class MyApplication extends Application {
@@ -92,14 +90,14 @@ dependencies {
} }
``` ```
### Setup your iOS app ## Setup your iOS app
To integrate with an iOS app, you can use [CocoaPods](https://cocoapods.org). Add the mobile Flipper SDK and its dependencies to your `Podfile` We support both Swift and Objective-C for Flipper with CocoaPods as build and distribution mechanism.
### Objective-c ### CocoaPods
Podfile for Objective-C projects will look like the following
<!--DOCUSAURUS_CODE_TABS-->
<!--Objective-C-->
```ruby ```ruby
project 'MyApp.xcodeproj' project 'MyApp.xcodeproj'
source 'https://github.com/facebook/flipper.git' source 'https://github.com/facebook/flipper.git'
@@ -143,38 +141,7 @@ target 'MyApp' do
end end
end end
``` ```
<!--Swift-->
Install the dependencies by running `pod install`.When you open the Xcode workspace file for your app, you now can import and initialize Flipper in your AppDelegate. Before running your app, make sure that the flag `-DFB_SONARKIT_ENABLED=1` is present in the `OTHER_CFLAGS` in your application's build settings.
```objective-c
#import <FlipperKit/FlipperClient.h>
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitLayoutComponentKitSupport/FlipperKitLayoutComponentKitSupport.h>
#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
FlipperClient *client = [FlipperClient sharedClient];
SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
[FlipperKitLayoutComponentKitSupport setUpWithDescriptorMapper: layoutDescriptorMapper];
[client addPlugin: [[FlipperKitLayoutPlugin alloc] initWithRootNode: application
withDescriptorMapper: layoutDescriptorMapper]];
[client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]]; [client start];
[client addPlugin: [[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
[client start];
...
}
@end
```
### Swift
Podfile for the swift projects will look like the following:
```ruby ```ruby
project 'MyApp.xcodeproj' project 'MyApp.xcodeproj'
source 'https://github.com/facebook/flipper.git' source 'https://github.com/facebook/flipper.git'
@@ -210,44 +177,76 @@ target 'MyApp' do
# end # end
# end # end
# This post_install script adds min deployment iOS version to yoga's pod target. # This post_install script adds min deployment iOS version to yoga's pod target.
# It also adds -DFB_SONARKIT_ENABLED flag to OTHER_SWIFT_FLAGS, necessary to build swift target # It also adds -DFB_SONARKIT_ENABLED flag to OTHER_SWIFT_FLAGS, necessary to build swift target
post_install do |installer| post_install do |installer|
file_name = Dir.glob("*.xcodeproj")[0] file_name = Dir.glob("*.xcodeproj")[0]
app_project = Xcodeproj::Project.open(file_name) app_project = Xcodeproj::Project.open(file_name)
installer.pods_project.targets.each do |target| installer.pods_project.targets.each do |target|
if ('Yoga' == target.name) if ('Yoga' == target.name)
target.build_configurations.each do |config| target.build_configurations.each do |config|
config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '8.0' config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '8.0'
end end
end
end
app_project.native_targets.each do |target|
target.build_configurations.each do |config|
if (config.build_settings['OTHER_SWIFT_FLAGS'])
if !(config.build_settings['OTHER_SWIFT_FLAGS'].include? '-DFB_SONARKIT_ENABLED')
puts 'Adding -DFB_SONARKIT_ENABLED ...'
swift_flags = config.build_settings['OTHER_SWIFT_FLAGS']
if swift_flags.split.last != '-Xcc'
config.build_settings['OTHER_SWIFT_FLAGS'] << ' -Xcc'
end
config.build_settings['OTHER_SWIFT_FLAGS'] << ' -DFB_SONARKIT_ENABLED'
end end
else end
puts 'OTHER_SWIFT_FLAGS does not exist thus assigning it to `$(inherited) -Xcc -DFB_SONARKIT_ENABLED`' app_project.native_targets.each do |target|
config.build_settings['OTHER_SWIFT_FLAGS'] = '$(inherited) -Xcc -DFB_SONARKIT_ENABLED' target.build_configurations.each do |config|
if (config.build_settings['OTHER_SWIFT_FLAGS'])
if !(config.build_settings['OTHER_SWIFT_FLAGS'].include? '-DFB_SONARKIT_ENABLED')
puts 'Adding -DFB_SONARKIT_ENABLED ...'
swift_flags = config.build_settings['OTHER_SWIFT_FLAGS']
if swift_flags.split.last != '-Xcc'
config.build_settings['OTHER_SWIFT_FLAGS'] << ' -Xcc'
end
config.build_settings['OTHER_SWIFT_FLAGS'] << ' -DFB_SONARKIT_ENABLED'
end end
app_project.save else
puts 'OTHER_SWIFT_FLAGS does not exist thus assigning it to `$(inherited) -Xcc -DFB_SONARKIT_ENABLED`'
config.build_settings['OTHER_SWIFT_FLAGS'] = '$(inherited) -Xcc -DFB_SONARKIT_ENABLED'
end end
app_project.save
end end
end end
end end
end
``` ```
<!--END_DOCUSAURUS_CODE_TABS-->
Install the dependencies by running `pod install`. When you open the XCode
workspace file of your app, you now can import and initialize Flipper in your
AppDelegate. Before running your app, make sure that the flag
`-DFB_SONARKIT_ENABLED=1` is present in the `OTHER_CFLAGS` of
application's build settings.
Install the dependencies by running `pod install`.When you open the Xcode workspace file for your app, you now can import and initialize Flipper in your AppDelegate by following the below mentioned example. Before running your app, make sure that the flag `-Xcc -DFB_SONARKIT_ENABLED` is present in the `OTHER_SWIFT_FLAGS` in your application's build settings. <!--DOCUSAURUS_CODE_TABS-->
<!--Objective-C-->
```objective-c
#import <FlipperKit/FlipperClient.h>
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitLayoutComponentKitSupport/FlipperKitLayoutComponentKitSupport.h>
#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
FlipperClient *client = [FlipperClient sharedClient];
SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
[FlipperKitLayoutComponentKitSupport setUpWithDescriptorMapper: layoutDescriptorMapper];
[client addPlugin: [[FlipperKitLayoutPlugin alloc] initWithRootNode: application
withDescriptorMapper: layoutDescriptorMapper]];
[client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]]; [client start];
[client addPlugin: [[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
[client start];
...
}
@end
```
<!--Swift-->
```swift ```swift
import UIKit import UIKit
import FlipperKit import FlipperKit
@@ -267,8 +266,8 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
return true return true
} }
} }
``` ```
<!--END_DOCUSAURUS_CODE_TABS-->
<div class="warning"> <div class="warning">
@@ -284,4 +283,4 @@ Finally, you need to add plugins to your Flipper client. Above we have only adde
## Having trouble? ## Having trouble?
See the [troubleshooting page](troubleshooting.html) for help with known problems. See the [troubleshooting page](troubleshooting.html) for help with known problems.