Use npm packages in flutter mobile app webview - javascript

I am working on flutter mobile app. I want to use a npm package that is built on top of web3.js and provide some extra custom functionalities. I know in flutter dart is not compiled to js. I have also played with webview plugin that accepts uri. Some of my mates were arguing that using webview we might can use the npm package. I decided to try that but I missing the entry point as I know that webview plugin accepts URI and I don't know how to tweak that to use npm package so any type of help regarding using npm in flutter mobile app is much appreciated?

Use of packages like "FLUTTER NODE" or "FLUTTER CLI" may help with it. Also Flutter has its own pub named "web3dart" and "etherium" which might help you if you have an inclination towards blockchain!

Related

Is there a plugin that will let me communicate with a PocketBase database?

I'm trying to connect with a running PocketBase database. Normally, I would use their Javascript SDK to achieve this, but the package does not get shipped to the mobile device during the build process.
This means I either have to build my own set of functions to mimic the working of the PocketBase Javascript SDK, or use a NativeScript plugin.
I could not find an existing plugin mentioning PocketBase, does anyone know of a plugin that facilitates this?
I tried to install the PocketBase Javascript SDK directly from NPM using npm install pocketbase, but this module does not check shipped to the mobile device during the build process.
For example:
import PocketBase from 'pocketbase'
console.dir(PocketBase)
Running this from a NativeScript app logs "null" to the console.
Using import * as PocketBase from 'pocketbase' ended up working for me.
I installed the pocketbase SDK with npm i --save pocketbase.
For whatever reason using import PocketBase from 'pocketbase' as the PocketBase documentation suggests doesn't work in this case.

How to add Agora.io Android sdk in expo?

I am setting up a new expo application and want a support in my application.
I want to know how to add the android sdk of agora.io into my expo project?
Unfortunately both the iOS and Android SDKs for agora.io require editing of native code. As Expo abstracts native code away from you meaning the only way to access native code is to either create your project using react-native init or by ejecting your Expo project.
Looking at the docs for iOS you can see that it requires you to add the SDK either by using cocoa pods or by inserting it directly into you Xcode project file. https://docs.agora.io/en/Voice/ios_audio?platform=iOS#add-the-agora-sdk-to-your-project
Similarly for Android you have to add the SDK inside the Android folder and make changes to the build.gradle files.
https://docs.agora.io/en/Voice/android_audio?platform=Android#add-the-agora-sdk-to-your-project
However you are in luck. There are a couple of wrappers around the SDKs that can be used with a full react-native project or an ejected Expo project.
https://github.com/AgoraIO/React-Native-SDK
https://github.com/syanbo/react-native-agora
The above answer is out of date now, Agora does offer expo support per the following documentation:
https://www.agora.io/en/blog/building-a-video-calling-app-using-the-agora-sdk-on-expo-react-native/
The above article mentions this, but it should be noted that you will not be able to use Expo Go to test video call functionality since it requires native modules for the microphone and camera. I can speak from first hand experience that I have been able to use Expo Go for other features in the app, just not the Agora portions.

Twilio Client Javascript SDK

I'd like to know why there isn't a npm / yarn package to Twilio Client Javascript SDK 1.4.
I'm trying to use their voice service, following this tutorial, but in React Native.
Is this package for browser usage only? How could I have access to Twilio.Client on react-native?
I already implemented a programmable-chat with success, using the provided packages twilio-chat and twilio-common.
Meanwhile, is there any way of importing a remote file or using a local javascript file (twilio.min.js) to a react-native app?
Thanks in advance.
EDIT:
Further research lead me to believe that this SDK only work for browsers since it has to deal with audio events, connection status etc.
Correct me if I'm wrong.
I'm now trying to implement react-native-twilio-programmable-voice
.

Electron (Atom-Shell) Run unix command from link in page

I am trying to learn Electron (Atom-Shell) but I am finding it pretty tough to find documentation for it...
I am simply trying to figure out how to create a link with in index.html, and have it open a terminal window or run some sort of program.
I learn languages by learning specific tasks as I need them in a program, so that is why I am asking so then I can utilize the technique used in other ways in my programs.
Thank you for helping.
Well, essentially Electron is just a customised version of a Chromium browser that comes packaged with Nodejs and some really cool packages that basically allow you to run the custom browser as if it was a native platform application. Because of that creating an Electron app is very similar to creating a web-app that has a Nodejs back-end.
So to get started with a simple "Hello World!" app, you can just run the following npm...
npm install electron-prebuilt --save-dev
Once the npm is installed you'll need three files to run an Electron app.
A package.json file
A javascript file (default is main.js)
An html file (default is index.html)
See this GitHub repo for a quick copy/paste version of each and more detailed instructions: https://github.com/mafintosh/electron-prebuilt
after that you're ready to simply run your app...
$ electron .
Finally, one way to open a terminal window would be to use an onclick attribute in your html to trigger a child_process, found here, in a function.
That's it! You should be able to edit your html and javascript files as you would for any web-app, and take advantage of the added features that Electron provides.
I'd also check out these resources for more info:
A Quick Start intro to how Electron works -- https://github.com/atom/electron/blob/master/docs/tutorial/quick-start.md
The Atom discussion forum (Because Atom was built with Electron, and is made to be hackable, the community is quite active) -- https://discuss.atom.io/c/electron
A cool repo to keep up with the latest info. It includes links for apps that currently use Electron, tutorials, videos, and more --
https://github.com/sindresorhus/awesome-electron
I hope that helps!

JS build tool without node

I am a fan of grunt. But unfortunately, we do not have node and hence the ability to access npm packages in our work environment. I have been creating a HTML5 application using AngularJS+Bootstrap etc. I have been able to start and develop the app using angular seed.
However, my main problem is the build (obfuscation and minification) process for such a project. Since ours is a protected environment, I cannot leverage help of other tools like coffeescript etc. I need some tool which may be as good as grunt, but would be available for download directly.
Any help is appreciated and thank you in advance.

Categories

Resources