mirror of
https://github.com/openflocon/Flocon.git
synced 2026-04-28 10:29:33 +00:00
refact: doc content (#455)
Co-authored-by: Florent Champigny <florent@bere.al>
This commit is contained in:
Florent CHAMPIGNY
GitHub
parent
8e74ae689a
commit
ce1df58b9f
10 changed files with 320 additions and 105 deletions
|
|
@ -1,3 +1,9 @@
|
|||
# About
|
||||
## 🐶 Why the name "Flocon" ✨ ?
|
||||
|
||||
Flocon is flocon.
|
||||
I was looking for a short, cute animal-inspired name — something in the spirit of "Flipper".
|
||||
I turned my head and saw my golden retriever, Flocon, smiling to me... and that was it.
|
||||
That was all the inspiration I needed.
|
||||
|
||||
No brainstorming, no hesitation — just the perfect name at the perfect time.
|
||||
|
||||
<img width="540" height="501" alt="Flocon - Golden Retriever" src="https://github.com/user-attachments/assets/6ea7acd9-abea-4062-b375-17cb8337ce11" />
|
||||
|
|
|
|||
72
docs/contributors.md
Normal file
72
docs/contributors.md
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
## 🤝 Contributors
|
||||
|
||||
Thanks to these amazing people for making Flocon better every day!
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="https://github.com/florent37">
|
||||
<img src="https://avatars.githubusercontent.com/u/5754972?v=4" width="100px;" alt="Florent Champigny"/><br />
|
||||
<sub><b>florent37</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/doTTTTT">
|
||||
<img src="https://avatars.githubusercontent.com/u/13266870?v=4" width="100px;" alt="Raphael Teyssandier"/><br />
|
||||
<sub><b>rteyssandier</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/Woutervdvelde">
|
||||
<img src="https://github.com/Woutervdvelde.png" width="100px;" alt="Wouter van der Velde"/><br />
|
||||
<sub><b>Woutervdvelde</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/gdesantos">
|
||||
<img src="https://github.com/gdesantos.png" width="100px;" alt="Gustavo de Santos Garcia"/><br />
|
||||
<sub><b>gdesantos</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/Karambar">
|
||||
<img src="https://github.com/Karambar.png" width="100px;" alt="Quentin HUET"/><br />
|
||||
<sub><b>Karambar</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="https://github.com/Flakebi">
|
||||
<img src="https://github.com/Flakebi.png" width="100px;" alt="Sebastian Neubauer"/><br />
|
||||
<sub><b>Flakebi</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/SimonMarquis">
|
||||
<img src="https://github.com/SimonMarquis.png" width="100px;" alt="Simon Marquis"/><br />
|
||||
<sub><b>SimonMarquis</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/StephenVinouze">
|
||||
<img src="https://github.com/StephenVinouze.png" width="100px;" alt="Stephen Vinouze"/><br />
|
||||
<sub><b>StephenVinouze</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/mdabash">
|
||||
<img src="https://github.com/mdabash.png" width="100px;" alt="Mothana Dabash"/><br />
|
||||
<sub><b>mdabash</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## Contributions
|
||||
|
||||
`The project is open to contributions — feel free to submit a pull request!`
|
||||
|
||||
## License
|
||||
|
||||
Flocon is MIT licensed, as found in the [LICENSE](/LICENSE) file.
|
||||
20
docs/graphql.md
Normal file
20
docs/graphql.md
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
### 🛰️ GraphQL Request Inspector
|
||||
|
||||
Flocon also supports **GraphQL** requests via a dedicated Apollo interceptor.
|
||||
|
||||
Just like with REST, all outgoing GraphQL requests made through [Apollo Client](https://www.apollographql.com/docs/android/) are captured and displayed in Flocon’s interface — allowing you to debug your queries and mutations in real time.
|
||||
|
||||
|
||||
For each GraphQL call, you can inspect:
|
||||
|
||||
- Response data or error payload
|
||||
- Headers, status code, and response time
|
||||
- The operation type (query / mutation)
|
||||
|
||||
```kotlin
|
||||
ApolloClient.Builder()
|
||||
// just set your already configured with flocon okhttp interceptor client
|
||||
.okHttpClient(client)
|
||||
// regular builder methods
|
||||
.build()
|
||||
```
|
||||
|
|
@ -31,4 +31,16 @@ and more — without needing root access or tedious ADB commands.
|
|||
|
||||
It’s designed for modern multiplatform development, accelerating debugging, QA, and iteration cycles.
|
||||
|
||||
<img width="1294" height="837" alt="Screenshot 2025-09-12 at 15 39 45" src="https://github.com/user-attachments/assets/3d585adb-6441-4cdb-ad25-69d771ad4ff6" />
|
||||
<img width="1294" height="837" alt="Screenshot 2025-09-12 at 15 39 45" src="https://github.com/user-attachments/assets/3d585adb-6441-4cdb-ad25-69d771ad4ff6" />
|
||||
|
||||
---
|
||||
|
||||
## 🚀 What Can Flocon Do?
|
||||
|
||||
Once your device (Android / iOS / Desktop) is connected and your app includes the Flocon SDK, you can use the desktop companion app to access the following features:
|
||||
|
||||
## ✨ Upcoming features
|
||||
|
||||
Flocon is still evolving, next features :
|
||||
|
||||
- Preview & Download files
|
||||
27
docs/macos-install.md
Normal file
27
docs/macos-install.md
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
## How to install the MacOS app ?
|
||||
|
||||
MacOS may block the first launch of the application because it was not downloaded from the App Store. You'll need to manually authorize it through your system settings.
|
||||
|
||||
1. First, try to launch the app from the Applications folder. macOS will display a message stating that it cannot be opened.
|
||||
|
||||
<img src="https://github.com/user-attachments/assets/5317fa6c-4cdc-4582-bc3d-059e66b0713f" width="300"/>
|
||||
|
||||
2. Click on the `?` on top right of the dialog
|
||||
|
||||
<img src="https://github.com/user-attachments/assets/9d0e2f08-69a1-4510-9228-cdd6f9a77dd4" width="300"/>
|
||||
|
||||
3. On the system help page, click on the link "Open privacy & Security for me"
|
||||
|
||||
<img src="https://github.com/user-attachments/assets/aa2a40f7-2fd8-4243-be5e-8982c9260d1f" width="300"/>
|
||||
|
||||
4. Scroll down to the Security section. You should see a message mentioning the blocked application with an `Open Anyway` button.
|
||||
|
||||
<img src="https://github.com/user-attachments/assets/b5ba299c-4534-449b-9926-4075be8ba351" width="300"/>
|
||||
|
||||
5. Click on this button 😂
|
||||
|
||||
6. It opens again the first dialog, but with an additional button in the middle `Open Anyway`
|
||||
|
||||
<img src="https://github.com/user-attachments/assets/d5fb369d-3301-4489-8fc2-1ef6b0a1f52b" width="300"/>
|
||||
|
||||
7. Click on this button 😂 (it should ask you a password or fingerprint verification)
|
||||
|
|
@ -63,102 +63,3 @@ val httpClient = HttpClient(YourClient) {
|
|||
...
|
||||
}
|
||||
```
|
||||
|
||||
### 💬 Inspect Websockets
|
||||
|
||||
<img width="1442" height="572" alt="Screenshot 2025-10-04 at 23 44 57" src="https://github.com/user-attachments/assets/49cef28f-87c9-4af7-a929-63d428d99f9e" />
|
||||
|
||||
Flocon doesn’t stop at HTTP — it also captures **all WebSocket communications** made by your Android app.
|
||||
This allows you to inspect real-time data exchanges between your app and the server with full visibility.
|
||||
|
||||
For each WebSocket connection, you can inspect:
|
||||
|
||||
- Connection URL
|
||||
- **Sent and received frames** (text, binary, ping/pong)
|
||||
- **Timestamps** and message order
|
||||
- **Payloads**
|
||||
- **Closes**
|
||||
|
||||
With this feature, you can:
|
||||
|
||||
- Debug real-time features like chat, live feeds, or multiplayer updates
|
||||
- Verify the exact content of messages exchanged
|
||||
- Diagnose disconnection or synchronization issues
|
||||
|
||||
#### With OkHttp3 (android only)
|
||||
|
||||
Flocon-Okhttp-Interceptor has built-in websocket methods (⚠️ it's not possible through interceptors ⚠️)
|
||||
|
||||
To log outgoing messages
|
||||
```kotlin
|
||||
webSocket.sendWithFlocon("\"$text\"") // extension method that log to Flocon and performs the send
|
||||
```
|
||||
|
||||
To log incoming messages
|
||||
```kotlin
|
||||
val request = Request.Builder()
|
||||
.url("wss://.......")
|
||||
.build()
|
||||
val listener = object : WebSocketListener() {
|
||||
// your listener
|
||||
}
|
||||
|
||||
webSocket = client.newWebSocket(
|
||||
request,
|
||||
listener.listenWithFlocon(id = "wss://......."), // extension method that wraps an existing WebSocketListener
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
#### 🧰 Manually (kotlin multi platform compatible)
|
||||
|
||||
If you are using other websockets libs than okhttp, you can easily forward events to FloconWebSocket
|
||||
|
||||
To log outgoing messages
|
||||
```kotlin
|
||||
val message = "hello"
|
||||
|
||||
webSocket.send(message)
|
||||
|
||||
floconLogWebSocketEvent(
|
||||
FloconWebSocketEvent(
|
||||
websocketUrl = "ws://...",
|
||||
event = FloconWebSocketEvent.Event.SendMessage,
|
||||
message = message,
|
||||
)
|
||||
)
|
||||
```
|
||||
|
||||
To log incoming messages
|
||||
```kotlin
|
||||
myCustomWebSocket.onReceived {
|
||||
floconLogWebSocketEvent(
|
||||
FloconWebSocketEvent(
|
||||
websocketUrl = "ws://..."
|
||||
event = FloconWebSocketEvent.Event.ReceiveMessage,
|
||||
message = it,
|
||||
)
|
||||
// handle your message
|
||||
)
|
||||
```
|
||||
|
||||
### 🛰️ GraphQL Request Inspector
|
||||
|
||||
Flocon also supports **GraphQL** requests via a dedicated Apollo interceptor.
|
||||
|
||||
Just like with REST, all outgoing GraphQL requests made through [Apollo Client](https://www.apollographql.com/docs/android/) are captured and displayed in Flocon’s interface — allowing you to debug your queries and mutations in real time.
|
||||
|
||||
|
||||
For each GraphQL call, you can inspect:
|
||||
|
||||
- Response data or error payload
|
||||
- Headers, status code, and response time
|
||||
- The operation type (query / mutation)
|
||||
|
||||
```kotlin
|
||||
ApolloClient.Builder()
|
||||
// just set your already configured with flocon okhttp interceptor client
|
||||
.okHttpClient(client)
|
||||
// regular builder methods
|
||||
.build()
|
||||
```
|
||||
|
|
@ -2,6 +2,21 @@
|
|||
|
||||
`This library is lightweight, contributing just 140KB to the overall app size`
|
||||
|
||||
## 🧰 Requirements
|
||||
|
||||
### for android
|
||||
- An Android device with USB debugging enabled
|
||||
- Android Studio or SDK tools installed
|
||||
- ADB (Android Debug Bridge) accessible from your system path
|
||||
|
||||
### for all platforms
|
||||
- Flocon Desktop app (JVM-based)
|
||||
- Flocon SDK integrated into your app
|
||||
- At least `kotlin 2.0.0` in your app
|
||||
- Be aligned between the mobile library version & the desktop app version
|
||||
|
||||
## Installation
|
||||
|
||||
in your module .kts
|
||||
|
||||
[](https://search.maven.org/artifact/io.github.openflocon/flocon)
|
||||
|
|
@ -29,4 +44,7 @@ flocon = { module = "io.github.openflocon:flocon", version.ref = "flocon" }
|
|||
|
||||
Download & install the last `Desktop client`
|
||||
|
||||
https://github.com/openflocon/Flocon/releases
|
||||
https://github.com/openflocon/Flocon/releases
|
||||
|
||||
> [!NOTE]
|
||||
> If you are on MacOS, you might need to follow specific instructions to open the app. See [MacOS Installation](macos-install.md).
|
||||
23
docs/troubleshooting.md
Normal file
23
docs/troubleshooting.md
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
## 🚨 Why Flocon Can’t See Your Device Calls (And How to Fix It) 🚨
|
||||
|
||||
To enable Flocon to intercept and inspect network traffic from your Android app,
|
||||
the app must be allowed to connect to `localhost` (typically `127.0.0.1`), which is where the desktop companion listens for traffic.
|
||||
|
||||
**If you're already using a custom `networkSecurityConfig`, make sure it includes a rule to allow cleartext traffic to `localhost`**
|
||||
|
||||
AndroidManifest.xml
|
||||
```xml
|
||||
<application
|
||||
android:networkSecurityConfig="@xml/network_security_config"/>
|
||||
```
|
||||
|
||||
network_security_config.xml
|
||||
```xml
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<network-security-config>
|
||||
<domain-config cleartextTrafficPermitted="true">
|
||||
<domain includeSubdomains="true">localhost</domain>
|
||||
<domain includeSubdomains="true">127.0.0.1</domain>
|
||||
</domain-config>
|
||||
</network-security-config>
|
||||
```
|
||||
77
docs/websocket.md
Normal file
77
docs/websocket.md
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
### 💬 Inspect Websockets
|
||||
|
||||
<img width="1442" height="572" alt="Screenshot 2025-10-04 at 23 44 57" src="https://github.com/user-attachments/assets/49cef28f-87c9-4af7-a929-63d428d99f9e" />
|
||||
|
||||
Flocon doesn’t stop at HTTP — it also captures **all WebSocket communications** made by your Android app.
|
||||
This allows you to inspect real-time data exchanges between your app and the server with full visibility.
|
||||
|
||||
For each WebSocket connection, you can inspect:
|
||||
|
||||
- Connection URL
|
||||
- **Sent and received frames** (text, binary, ping/pong)
|
||||
- **Timestamps** and message order
|
||||
- **Payloads**
|
||||
- **Closes**
|
||||
|
||||
With this feature, you can:
|
||||
|
||||
- Debug real-time features like chat, live feeds, or multiplayer updates
|
||||
- Verify the exact content of messages exchanged
|
||||
- Diagnose disconnection or synchronization issues
|
||||
|
||||
#### With OkHttp3 (android only)
|
||||
|
||||
Flocon-Okhttp-Interceptor has built-in websocket methods (⚠️ it's not possible through interceptors ⚠️)
|
||||
|
||||
To log outgoing messages
|
||||
```kotlin
|
||||
webSocket.sendWithFlocon("\"$text\"") // extension method that log to Flocon and performs the send
|
||||
```
|
||||
|
||||
To log incoming messages
|
||||
```kotlin
|
||||
val request = Request.Builder()
|
||||
.url("wss://.......")
|
||||
.build()
|
||||
val listener = object : WebSocketListener() {
|
||||
// your listener
|
||||
}
|
||||
|
||||
webSocket = client.newWebSocket(
|
||||
request,
|
||||
listener.listenWithFlocon(id = "wss://......."), // extension method that wraps an existing WebSocketListener
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
#### 🧰 Manually (kotlin multi platform compatible)
|
||||
|
||||
If you are using other websockets libs than okhttp, you can easily forward events to FloconWebSocket
|
||||
|
||||
To log outgoing messages
|
||||
```kotlin
|
||||
val message = "hello"
|
||||
|
||||
webSocket.send(message)
|
||||
|
||||
floconLogWebSocketEvent(
|
||||
FloconWebSocketEvent(
|
||||
websocketUrl = "ws://...",
|
||||
event = FloconWebSocketEvent.Event.SendMessage,
|
||||
message = message,
|
||||
)
|
||||
)
|
||||
```
|
||||
|
||||
To log incoming messages
|
||||
```kotlin
|
||||
myCustomWebSocket.onReceived {
|
||||
floconLogWebSocketEvent(
|
||||
FloconWebSocketEvent(
|
||||
websocketUrl = "ws://..."
|
||||
event = FloconWebSocketEvent.Event.ReceiveMessage,
|
||||
message = it,
|
||||
)
|
||||
// handle your message
|
||||
)
|
||||
```
|
||||
63
mkdocs.yml
63
mkdocs.yml
|
|
@ -1,4 +1,63 @@
|
|||
site_name: My Docs
|
||||
site_name: Flocon
|
||||
site_url: https://github.com/openflocon/Flocon
|
||||
theme:
|
||||
name: material
|
||||
name: material
|
||||
features:
|
||||
- navigation.tabs
|
||||
- navigation.sections
|
||||
- content.code.copy
|
||||
palette:
|
||||
# Palette toggle for light mode
|
||||
- media: "(prefers-color-scheme: light)"
|
||||
scheme: default
|
||||
primary: teal
|
||||
accent: purple
|
||||
toggle:
|
||||
icon: material/brightness-7
|
||||
name: Switch to dark mode
|
||||
|
||||
# Palette toggle for dark mode
|
||||
- media: "(prefers-color-scheme: dark)"
|
||||
scheme: slate
|
||||
primary: teal
|
||||
accent: lime
|
||||
toggle:
|
||||
icon: material/brightness-4
|
||||
name: Switch to light mode
|
||||
|
||||
markdown_extensions:
|
||||
- pymdownx.highlight:
|
||||
anchor_linenums: true
|
||||
line_spans: __span
|
||||
pygments_lang_class: true
|
||||
- pymdownx.inlinehilite
|
||||
- pymdownx.snippets
|
||||
- pymdownx.superfences
|
||||
- admonition
|
||||
- pymdownx.details
|
||||
- attr_list
|
||||
- md_in_html
|
||||
|
||||
nav:
|
||||
- Home: index.md
|
||||
- Starting:
|
||||
- Setup: setup.md
|
||||
- MacOS Install: macos-install.md
|
||||
- Troubleshooting: troubleshooting.md
|
||||
- Features:
|
||||
- Network:
|
||||
- REST: network.md
|
||||
- GraphQL: graphql.md
|
||||
- Websocket: websocket.md
|
||||
- GRPC: grpc.md
|
||||
- Images: image.md
|
||||
- Database: database.md
|
||||
- Analytics: analytics.md
|
||||
- Files: files.md
|
||||
- Shared Preferences: sharedpref.md
|
||||
- Dashboard: dashboard.md
|
||||
- Tables: table.md
|
||||
- Deeplinks: deeplink.md
|
||||
- About:
|
||||
- Story: about.md
|
||||
- Contributors: contributors.md
|
||||
Loading…
Add table
Add a link
Reference in a new issue