80ef1e04df
Summary: Restyle of page, including changes to spelling, grammar, links, and structure (where relevant). Reviewed By: aigoncharov Differential Revision: D36377198 fbshipit-source-id: 99179c9c8132be51e13d9f8ab7d9f84f35b601bf
90 lines
3.8 KiB
Plaintext
90 lines
3.8 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, it's assumed you already have an existing iOS application in which you have a feed or list of items.
|
|
|
|
Part of what makes Flipper so useful is allowing users to inspect the internals of their app. This part of the tutorial is concerned with how to make data available to the Flipper desktop app, which, for the sake of this tutorial, is called 'Sea-mammals' (an app based on sea mammals).
|
|
|
|
:::note
|
|
You can find the source code for this tutorial on [GitHub](https://github.com/facebook/flipper/tree/c55bebd1be545c63dde93e143dd5c341dc2fd20b/iOS/Tutorial/Tutorial).
|
|
:::
|
|
|
|
## Creating a plugin
|
|
|
|
<FbInternalOnly>
|
|
|
|
<div class="warning">
|
|
[FB-Only] Depending on the options selected during scaffolding (see the [introduction](intro.mdx) page), some of the following code might already have been generated by `scarf`.
|
|
</div>
|
|
|
|
</FbInternalOnly>
|
|
|
|
On iOS, a Flipper plugin is a class that implements the [FlipperPlugin](https://github.com/facebook/flipper/blob/main/iOS/FlipperKit/FlipperPlugin.h) interface.
|
|
|
|
The interface consists of 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`, which is examined later in the 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` - sets connection to nil.
|
|
* `(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. The default value used is `false`.
|
|
|
|
The following code shows the implementation of these methods for the Sea-mammals 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;
|
|
}
|
|
}
|
|
```
|
|
|
|
There are two items of interest here: `didConnect` and `connection.send`, which sends a message to the desktop app and is identified with the name `newRow`.
|
|
|
|
For the Sea-mammals app, there is a static data source. However, in real life, you'll likely dynamically receive new data as the user interacts with the app. So, while in the Sea-mammals app, the data is sent all at once with `didConnect`, in real life, you'd set up a listener to call `connection.send("newRow", params)` as the dynamic data arrives.
|
|
|
|
:::note
|
|
In the above code, the `withParams` are just dictionary that contains the data that Sea-mammals sends 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()
|
|
```
|
|
|
|
## Next step
|
|
|
|
When starting your application, Flipper tells the desktop application about the plugin it supports (including 'Sea-mammals'), looks for a corresponding JavaScript plugin by that name.
|
|
Before building it's JavaScript counterpart, the next step in the tutorial is [Building a Plugin in Android](android.mdx).
|