5f1a0548f5
Summary: Docusaurus 2 is quite a lot more powerful than docu 1 it turns out. This should convert the website fully. * [done] Go through migration guide https://v2.docusaurus.io/docs/migrating-from-v1-to-v2 * [done] Convert landing page html * [done] Convert all images to img tags * [done] Convert all .md files to .mdx * [done] Make sure ui-doc generation and including still works * [done] Scan every page visually for sanity check * [done] Make sure footer still works * [done] Make sure search still works * [done] Change all links/ to links/index * [done] Change all links.md to links * [done] Add some custom css to make the navbar look like the old one and darken the footer. Reviewed By: passy Differential Revision: D21158717 fbshipit-source-id: 5f45b711b1b6fd5ece4c5c15c55635c7ebbfb568
87 lines
3.5 KiB
Plaintext
87 lines
3.5 KiB
Plaintext
---
|
|
id: ios
|
|
title: Building an iOS Plugin
|
|
---
|
|
import useBaseUrl from '@docusaurus/useBaseUrl';
|
|
|
|
<img alt="iOS Tutorial App" src={useBaseUrl("img/ios-tutorial-app.png")} />
|
|
|
|
For the purpose of the tutorial, we will assume you already have an existing iOS application in
|
|
which you have a feed or list of items. As the Flipper team, we obviously concern ourselves mostly
|
|
with sea mammals, so this is what our app displays. The actual display logic is not what's interesting
|
|
here, but how we can make this data available in our Flipper desktop app.
|
|
|
|
You can find the source code of the project [on GitHub](https://github.com/facebook/flipper/tree/c55bebd1be545c63dde93e143dd5c341dc2fd20b/iOS/Tutorial/Tutorial).
|
|
|
|
## Creating a Plugin
|
|
|
|
On iOS, a Flipper plugin is a class that implements the
|
|
[`FlipperPlugin`](https://github.com/facebook/flipper/blob/master/iOS/FlipperKit/FlipperPlugin.h)
|
|
interface.
|
|
|
|
The interface is rather small and only comprises four methods:
|
|
|
|
- `(NSString *)identifier`: Specify a unique string so the JavaScript side knows where to talk to. This must match the name attribute in the `package.json` we will look into later in this tutorial.
|
|
- `(void)didConnect:(id<FlipperConnection>)connection`: This method is called when the desktop client connects and is ready to receive or send data.
|
|
- `(void)didDisconnect`: We're sure you can figure this one out.
|
|
- `(BOOL)runInBackground`: Unless this is true, only the currently selected plugin in the Flipper UI can communicate with the device. Its an optional method which you can override. Default value used is `false`.
|
|
|
|
Let's implement these methods for our sealife app:
|
|
|
|
```swift
|
|
import Foundation
|
|
import FlipperKit
|
|
|
|
class SeaMammalsPlugin: NSObject, FlipperPlugin {
|
|
var connection: FlipperConnection? = nil
|
|
let mammals: [MarineMammal]
|
|
|
|
init(_ marineMammals: [MarineMammal]) {
|
|
mammals = marineMammals
|
|
}
|
|
|
|
func identifier() -> String! {
|
|
return "sea-mammals"
|
|
}
|
|
|
|
func didConnect(_ connection: FlipperConnection!) {
|
|
self.connection = connection
|
|
for (index, mammal) in mammals.enumerated() {
|
|
connection.send("newRow", withParams: ["id": index, "title": mammal.name, "url": mammal.image.absoluteString])
|
|
}
|
|
}
|
|
|
|
func didDisconnect() {
|
|
connection = nil;
|
|
}
|
|
}
|
|
```
|
|
|
|
The two interesting bits here are `didConnect` and `connection.send`. `connection.send` sends a message
|
|
to the desktop app and is identified with the name "newRow".
|
|
|
|
For our sample app, we're dealing with a static data source. However, in real
|
|
life, you will likely dynamically receive new data as the user interacts with
|
|
the app. So while we just send all the data we have at once in `didConnect`,
|
|
you would normally set up a listener here to instead call `connection.send("newRow", params)` as new data
|
|
arrives. `params` are nothing but a dictionary which contains the data which you want to send over the wire to the desktop app.
|
|
|
|
## Registering your Plugin
|
|
|
|
Now all you need to do is let Flipper know about your new plugin. You do this
|
|
by calling `add` on your `FlipperClient`, which is normally created
|
|
at application startup.
|
|
|
|
```swift
|
|
let client = FlipperClient.shared()
|
|
// Add all sorts of other amazing plugins here ...
|
|
client?.add(SeaMammalsPlugin(MarineMammal.defaultList))
|
|
client?.start()
|
|
```
|
|
|
|
## What next
|
|
|
|
When starting your application now, Flipper will tell the desktop application
|
|
about the plugin it supports, including "sea-mammals" and will look for a
|
|
corresponding JavaScript plugin by that name. Before building it's JavaScript counterpart, first lets build a Flipper Plugin in Android.
|