KISSmetrics - React Native iOS - javascript

I am using React native to create an iOS app; So my code is in javascript and some objective-c.
Now i wan't to implement KISSmetrics in my project, i have done the proper setup based on kissmetrics documentation, but when it comes to create events and user identifications etc… i have to use data from my javascript code.
Does anyone knows how to do that? for example:
the objective-c code to identify the user is this: [[KISSmetricsAPI sharedAPI] identify:#"name#email.com"]; but how can i get the code that gets the identity of the user and replace the name#email.com from my javascript code?

I would look here to find out how to build a native module bridge. The way it works is that you create an iOS native module with methods that you can actually call from JavaScript by which you can send your data from JS to Obj-C.
Here's an example project that does this:
https://github.com/idehub/react-native-google-analytics-bridge
You don't need to turn it into a full-fledged NPM library, you can just simply create the necessary native files and JS files on the fly in your project.
Also, if you don't know already, remember to rebuild the iOS project (hit the Play button) to see your changes because the native side doesn't have Live Reloading.

Related

How to handle live updates to your mobile app using capacitor?

I have a react-js app and I use capacitor to leverage with native mobile API's (eg: BLE). My objective is to live update the app upon a minor change (eg: adding a new label) without going through the whole appstore submission process. I know Ionic has AppFlow that could work well with Capacitor, but it is way too expensive for me. Thus, I saw some are suggesting writing a script that pulls in the JS perfectly from somewhere like the S3 bucket, and when you build the app you build in all of the native code and replace the HTML scripts with one that comes from a remote source (But I have no idea how to do it)
Is this how most people handle live-updating webview apps or is there a better way ?
If so what are the steps to achieve this objective using scripts and so on (with code examples)?
Hey I'm the Maker of Capacitor-updater, the only alternative to ionic AppFlow.
The updater allows you to manage update by yourself, store your zip update where you want and use the download method.
How to start
npm install #capgo/capacitor-updater
npx cap sync
Then in your main JS, this is required to let the updater know the update is valid
import { CapacitorUpdater } from '#capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()
And lately after checking yourself the current version need update:
const version = await CapacitorUpdater.download({
url: 'https://github.com/Cap-go/demo-app/releases/download/0.0.4/dist.zip',
})
await CapacitorUpdater.set(version); // sets the new version, and reloads the app
After many request of people didn't want to do that themselves, I started Capgo a business to manage all the update process for you.
All is open source and can be replicate on your own as well.
Doing things for Capacitor is now my main activity, I produce open-source plugin as my main channel of Marketing, I'm solo founder and bootstrapped.
Hope my tool will help you !
You need a subscription to Ionic's AppFlow, as of yet ionic is the only company that offers live updates.

How to integrate React Native KeyEvent with Expo?

I am looking for a way to get input data from device's hardware barcode scanner. I found a library that reportedly can get the job done, which is React Native KeyEvent.
However, the instructions mostly lead me to edit the gradle files inside android folder. Since I am using Expo, I do not have the android folder to follow the document.
Without Ejecting to ExpoKit, is there any other way to integrate them?
You would need to write an expo plugin for it. Fortunately, somebody seems to already have done just that. See:
expo plugin for react-native-keyevent

Best practice: Typescript: Let a customer extend an application with custom code

we have an angular 9 based application framework, which gives a customer the possibility to configurate an application with fields and layouts. This works pretty nice.
But now we get to the point, where a customer wants to implement special features, like "He enters a value into a textfield and a request to a 3rd party software should be fired to load new data and autofill other values".
We could implement every possible interaction or allow to create custom snippets in javascript.
But in the past i have had a lot of bad experience with these base javascript snippets because they didn't have the needed standard functionality like typescript provides me.
1) Is there a way how a user can create custom code during runtime with typescript rather than plane javascript?
Yes i know typecript needs to be compiled before running, but I ask because I want to know if there is another way?
2) Alternative question:
Can a user develop an angular application and add it as plugin during runtime? Something like an extension or a custom functionality which will be added to the portal for the customer which is not part of the base framework?
Thanks for your help.
I don't know if I understand your question well but from my point of view the only way that an other user want to interact with the main Angular project is that he create a library by using the command ng generate library my-lib. (https://angular.io/guide/creating-libraries)
From there he can create a new module and then someone else import this new lib into the main project and that's it.
The new lib can be maintained by the "customer" and he can release new version of it if the lib is hosted in npm repository and from the main application just need to npm i customer-lib#latest
Did I answerd to your question ?
The thing is we have a hosted cloud application, where we have a standard implementation which is already compiled and deployed in a docker container.
Now a customer should have the possibility to extend the functionality by adding scripts and modules. Like it is common for example in wordpress. Where you have a standard implementation and if you want another wysiwyg Editor you install a plugin.
I know the only way of injecting code is via javascript but I just wanted to ask if there is another solution for this which will not lead to redploy the whole application.

How to download and run code using eval on React Native?

Context:
We are already using a framework to develop our mobile app which is pretty similar to React Native (We write everything in JS and it runs on Android and iOS).
Our framework provides some built-in APIs to display things on the screen and do other stuff.
Example:
function homePage() {
List.addTitle("Welcome");
List.addButton("Next", "goToNextPage()") // List.addButton(label, onclick)
List.show() // will display currently what is in the buffer or List
}
On Android, when a user logs in, they will download the latest code and run it (via eval). On iOS, we need to make a new build and submit to Apple everytime we need to release a new version
Goal
The goal is to migrate to React Native and only reimplement the basic APIs of the old platform (like List) so that we can keep using the code that we already wrote.
I've seen solutions like CodePush / AppCenter but our code is not in ReactNative yet so I don't think it will work for us.
This question and this one are related but do not have concrete answers.
I've written a small Snack to give you an idea of how I hope it would work.
The Login component handles the login
The SignIn component evals the code and renders whatever is in that code
Question
I had to reimplement the List API in the same file as SignIn.js.
If I try to import it, then List will be undefined in the eval.
Why?
With this method, the downloaded code will have to be eval'd everytime we refresh the page or navigate to another screen. I'm worried about the performances, is there a better way to do this?
Thanks a lot for your help

Optical Mark Recognition in javascript for cross plateform mobile app

I'd like to build an exam correction app. From a paper multiple choice question (mcq) I'd like to use my camera to analyse it and get a score.
This exist in python https://www.pyimagesearch.com/2016/10/03/bubble-sheet-multiple-choice-scanner-and-test-grader-using-omr-python-and-opencv/
Does someone know a lib in javascript for this ?
I am doing the same thing. As I found out, you should not use Javascript due to performance reason.
You should do the following steps:
Write a native module for Android or iOS or C++ for both to handle image
Write a native module to process frames from camera to get appropriate frame and pass it to the image handling module.
Bridge all them to React Native side, handle them like other native libraries
Read more about native module: https://reactnative.dev/docs/0.60/native-modules-android
You may need OpenCV library to handle your images

Categories