Merge pull request #1341 from lnbits/exampleupdate
Adds some more examples to the example extension
This commit is contained in:
Arc
GitHub
commit
63b00d46ee
|
|
@ -28,7 +28,9 @@ Going over the example extension's structure:
|
|||
Adding new dependencies
|
||||
-----------------------
|
||||
|
||||
If for some reason your extensions needs a new python package to work, you can add a new package using `venv`, or `poerty`:
|
||||
DO NOT ADD NEW DEPENDENCIES. Try to use the dependencies that are availabe in `pyproject.toml`. Getting the LNbits project to accept a new dependency is time consuming and uncertain, and may result in your extension NOT being made available to others.
|
||||
|
||||
If for some reason your extensions must have a new python package to work, and its nees are not met in `pyproject.toml`, you can add a new package using `venv`, or `poerty`:
|
||||
|
||||
```sh
|
||||
$ poetry add <package>
|
||||
|
|
@ -37,8 +39,7 @@ $ ./venv/bin/pip install <package>
|
|||
```
|
||||
|
||||
**But we need an extra step to make sure LNbits doesn't break in production.**
|
||||
Dependencies need to be added to `pyproject.toml` and `requirements.txt`, then tested by running on `venv` and `poetry`.
|
||||
`nix` compatability can be tested with `nix build .#checks.x86_64-linux.vmTest`.
|
||||
Dependencies need to be added to `pyproject.toml` and `requirements.txt`, then tested by running on `venv` and `poetry` compatability can be tested with `nix build .#checks.x86_64-linux.vmTest`.
|
||||
|
||||
|
||||
SQLite to PostgreSQL migration
|
||||
|
|
|
|||
BIN
lnbits/extensions/example/static/qrcode-example.png
Normal file
BIN
lnbits/extensions/example/static/qrcode-example.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
BIN
lnbits/extensions/example/static/qrcode-example1.png
Normal file
BIN
lnbits/extensions/example/static/qrcode-example1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
lnbits/extensions/example/static/websocket-example.png
Normal file
BIN
lnbits/extensions/example/static/websocket-example.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
|
|
@ -51,8 +51,15 @@
|
|||
<q-card flat>
|
||||
<q-card-section>
|
||||
<div class="text-h5 q-mb-md">
|
||||
{{SITE_TITLE}} Extension Development Guide
|
||||
<small>(Collection of resources for extension developers)</small>
|
||||
Extension Development Guide
|
||||
<small
|
||||
>(also check the
|
||||
<a
|
||||
class="text-primary"
|
||||
href="http://docs.lnbits.org/devs/development.html"
|
||||
>docs</a
|
||||
>)</small
|
||||
>
|
||||
</div>
|
||||
|
||||
<q-card unelevated flat>
|
||||
|
|
@ -188,8 +195,8 @@
|
|||
<p>
|
||||
LNbits uses
|
||||
<a href="https://vuejs.org/" class="text-primary">Vue</a>
|
||||
components for best-in-class high-performance and responsive
|
||||
performance.
|
||||
for best-in-class, responsive and high-performance
|
||||
components.
|
||||
</p>
|
||||
|
||||
<p>Typical example of Vue components in a frontend script:</p>
|
||||
|
|
@ -199,8 +206,7 @@
|
|||
/><br /><br />
|
||||
|
||||
<p>
|
||||
In a page body, models can be called. <br />Content can be
|
||||
conditionally rendered using Vue's
|
||||
Content can be conditionally rendered using Vue's
|
||||
<code class="bg-grey-3 text-black">v-if</code>:
|
||||
</p>
|
||||
<img
|
||||
|
|
@ -220,6 +226,8 @@
|
|||
<q-tabs v-model="usefultab" align="left">
|
||||
<q-tab name="magicalg">MAGICAL G</q-tab>
|
||||
<q-tab name="exchange">EXCHANGE RATES</q-tab>
|
||||
<q-tab name="qrcodes">QR CODES</q-tab>
|
||||
<q-tab name="websockets">WEBSOCKETS</q-tab>
|
||||
</q-tabs>
|
||||
</template>
|
||||
|
||||
|
|
@ -255,6 +263,85 @@
|
|||
>:<br />
|
||||
<img src="./static/conversion-example2.png" />
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="qrcodes" class="text-body1">
|
||||
<div class="text-h5 q-mb-md">QR Codes</div>
|
||||
<p>
|
||||
For most purposes use Quasar's inbuilt VueQrcode library:
|
||||
</p>
|
||||
<img src="./static/qrcode-example1.png" />
|
||||
<p>
|
||||
LNbits does also include a handy
|
||||
<a
|
||||
href="../docs#/default/img_api_v1_qrcode__data__get"
|
||||
class="text-primary"
|
||||
>
|
||||
QR code enpoint</a
|
||||
>
|
||||
</p>
|
||||
{% raw %} You can use via
|
||||
<a
|
||||
href="/api/v1/qrcode/some-data-you-want-in-a-qrcode"
|
||||
class="text-primary"
|
||||
>{{protocol + location}}{% endraw
|
||||
%}/api/v1/qrcode/some-data-you-want-in-a-qrcode:</a
|
||||
><br />
|
||||
<br />
|
||||
<img src="./static/qrcode-example.png" />
|
||||
<br />
|
||||
<img
|
||||
class="bg-white"
|
||||
width="300px"
|
||||
src="/api/v1/qrcode/some-data-you-want-in-a-qrcode"
|
||||
/>
|
||||
|
||||
<br />
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="websockets" class="text-body1">
|
||||
<div class="text-h5 q-mb-md">Websockets</div>
|
||||
<p>
|
||||
Fastapi includes a great
|
||||
<a
|
||||
class="text-primary"
|
||||
href="https://fastapi.tiangolo.com/advanced/websockets/#websockets-client"
|
||||
>websocket tool</a
|
||||
>
|
||||
</p>
|
||||
{% raw %}
|
||||
<p>
|
||||
A few LNbits extensions also make use of a weird and useful
|
||||
websocket/GET tool built into LNbits, such as extensions
|
||||
Copilot and LNURLDevices<br />
|
||||
You can subscribe to websocket with
|
||||
<code class="bg-grey-3 text-black"
|
||||
>wss:{{location}}/api/v1/ws/{SOME-ID}</code
|
||||
><br />
|
||||
You can post to any clients subscribed to the endpoint with
|
||||
<code class="bg-grey-3 text-black"
|
||||
>{{protocol +
|
||||
location}}/api/v1/ws/{SOME-ID}/{THE-DATA-YOU-WANT-TO-POST}</code
|
||||
><br />
|
||||
<br />
|
||||
<strong
|
||||
><div id="text-to-change">
|
||||
DEMO: Hit
|
||||
<a
|
||||
target="_blank"
|
||||
href="/api/v1/ws/32872r23g29/blah%20blah%20blah"
|
||||
class="text-primary"
|
||||
>{{protocol +
|
||||
location}}/api/v1/ws/32872r23g29/blah%20blah%20blah</a
|
||||
>
|
||||
in a different browser window to change this text to
|
||||
`blah blah blah`.
|
||||
</div></strong
|
||||
>
|
||||
<br />
|
||||
Function used in this demo:<br />
|
||||
<img src="./static/websocket-example.png" /></p
|
||||
></q-tab-panel>
|
||||
|
||||
{% endraw %}
|
||||
</q-tab-panels>
|
||||
</template>
|
||||
</div>
|
||||
|
|
@ -296,6 +383,8 @@
|
|||
data: function () {
|
||||
return {
|
||||
///// Declare models/variables /////
|
||||
protocol: window.location.protocol,
|
||||
location: '//' + window.location.hostname,
|
||||
thingDialog: {
|
||||
show: false,
|
||||
data: {}
|
||||
|
|
@ -310,7 +399,7 @@
|
|||
},
|
||||
///// Where functions live /////
|
||||
methods: {
|
||||
exampleFunction(data) {
|
||||
exampleFunction: function (data) {
|
||||
var theData = data
|
||||
LNbits.api
|
||||
.request(
|
||||
|
|
@ -325,6 +414,28 @@
|
|||
LNbits.utils.notifyApiError(error) // Error will be passed to the frontend
|
||||
})
|
||||
},
|
||||
initWs: async function () {
|
||||
if (location.protocol !== 'http:') {
|
||||
localUrl =
|
||||
'wss://' +
|
||||
document.domain +
|
||||
':' +
|
||||
location.port +
|
||||
'/api/v1/ws/32872r23g29'
|
||||
} else {
|
||||
localUrl =
|
||||
'ws://' +
|
||||
document.domain +
|
||||
':' +
|
||||
location.port +
|
||||
'/api/v1/ws/32872r23g29'
|
||||
}
|
||||
this.ws = new WebSocket(localUrl)
|
||||
this.ws.addEventListener('message', async ({data}) => {
|
||||
const res = data.toString()
|
||||
document.getElementById('text-to-change').innerHTML = res
|
||||
})
|
||||
},
|
||||
sendThingDialog() {
|
||||
console.log(this.thingDialog)
|
||||
}
|
||||
|
|
@ -333,6 +444,7 @@
|
|||
created: function () {
|
||||
self = this // Often used to run a real object, rather than the event (all a bit confusing really)
|
||||
self.exampleFunction('lorum')
|
||||
self.initWs()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user