IBM Mobilefirst V8 - Custom Direct update on hybrid application using Ionic v3.20.0 is not happening - ibm-mobilefirst

I am trying to implement customized direct update in ionic v3.20.0 but while accessing to the below code, am unable to proceed. I can't find any way to do it as the below function is not there in worklight.d.ts file,but can be found at worklight.js file.
The plugin used is cordova-plugin-mfp. The solution provided in the official doc is relevant to only cordova application,that can be done through index.js file which has the function WlCommonInit(). As per the doc the below code is to be called from this function, but unable to do this in ionic-cordova based application.
wl_DirectUpdateChallengeHandler.handleDirectUpdate = function(directUpdateData, directUpdateContext) {
// Implement custom Direct Update logic
};
Pleas refer to the below link for further information.
https://mobilefirstplatform.ibmcloud.com/tutorials/en/foundation/8.0/application-development/direct-update/
Please help me to implement this in ionic v3.20.0 which need to be implemented in typescript. Thanks!.

Presently there is no typescript API for wl_DirectUpdateChallengeHandler in cordova-plugin-mfp to customize direct update in Ionic Applications.
However you can do implementation in the JavaScript and include it in the Ionic Project. Following are the steps :
Create a folder called js inside the path src/assets of the project
Create a new JS file with following code and save it as wldirectudpate.js
function wlCommonInit() {
console.log(">> wlCommonInit() ..." );
wl_DirectUpdateChallengeHandler.handleDirectUpdate = function(directUpdateData, directUpdateContext) {
// Implement custom Direct Update logic
};
};
Add the JS location in index.html file which is located at /src/index.html
<script src="assets/js/wldirectudpate.js"></script>

Related

Unable to Load unload styles in my Aurelia app

I need a solution to load/unload styles in my Aurelia app. This is because I have a special main.css for my 'public' root app and another admin.css for my 'private' (admin) root app. (Yes, 2 roots in my app). These css are not compatible one with each other.
I found a plugin named aurelia-useable-style-loader. I try to integrate it in my Aurelia application as explained in the readme. At runtime, I can see [aurelia-useable-style-loader] begin configure and
[aurelia-useable-style-loader] end configure in my console but css files are not loaded/unloaded. So something go wrong and I don't know what.
One thing I pointed is that my Aurelia app is based on the Aurelia CLI / Typescript / SystemJS as bundler. While the plugin is based on Webpack. Maybe the 2 are not compatible ?
Steps I did:
npm install aurelia-useable-style-loader
then use the plugin in main.ts:
aurelia.use.plugin('aurelia-useable-style-loader');
then added one reference in my aurelia.json:
"aurelia-useable-style-loader",
Tha's all. At runtime, no particular errors, but css are not loaded/unloaded.
Any help is greatly appreciated.
PS: as a workaround, I proceed differently (see below) but I'm curious to do it with the plugin aurelia-useable-style-loader
this.masterStyleSheetLoaded = true;
this.httpClient.fetch('./src/css/main.css')
.then((data) => data.text())
.then((styles) => {
DOM.injectStyles(styles, null, null, 'masterStylesheet');
this.masterStyleSheetLoaded = true;
});

Paytabs payment integration using dart, flutter web and api

I have a flutter web project and I was trying to implement a payment solution. I found out that paytabs is a good choice for my situation. I wanted to add their api but I kept getting the CORS erorr over my flutter website. So I tried their ready payment page but I am also unable to implement since I have no previous knowledge about web development. I only use dart and flutter. But I would like to implement the api since it gives higher control. This is the url used for post requests https://www.paytabs.com/apiv2/create_pay_page Using the http package I always have the CORS appearing as an error. Documentation for the paytab service: https://dev.paytabs.com/docs/paypage/ Hope you can help
There are not payment plugins available for flutter.
but we can integrate PayTabs by using flutter platform channel.
step 1-> Create the Flutter platform client final Map result = await methodChannel.invokeMethod('getPayTabs');
Exemple :`
Future<void> _getPayTabs() async {
String batteryLevel;
try {
debugPrint("this is dart getPayTabs");
final Map result = await methodChannel.invokeMethod('getPayTabs');
debugPrint("trasiction data $result");
} on PlatformException {
debugPrint("trasiction data Failed");
}
step 2-> Importing the SDK android project
In Android Studio, Right click on the app choose New > Module
Choose the Downloaded paytabs_sdk-v4.0.1.aar. If not, download here
Right click on your App and choose Open Module Settings
Add the Module dependency
Choose the: paytabs_sdk-v4.0.1 module to be included
Confirm the Module import by changing the Android view to Project view in the sidebar
Add below dependencies.
You can start with code changes.
You have to include the following dependencies:
allprojects {
repositories {
...
maven {
url 'https://jitpack.io'
}
}
}
implementation 'com.android.support:design:28.0.0'
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.squareup.retrofit2:retrofit:2.4.0'
implementation 'com.google.code.gson:gson:2.8.5'
implementation 'com.squareup.retrofit2:converter-gson:2.4.0'
implementation 'com.github.dbachelder:CreditCardEntry:1.4.9'
step 3-> Add an Android platform-specific implementation
Start by opening the Android host portion of your Flutter app in Android Studio:
Open the file MainActivity.kt located in the kotlin folder in the Project view. (Note: If editing with Android Studio 2.3, note that the kotlin folder is shown as if named java.)
Inside the configureFlutterEngine() method, create a MethodChannel and call setMethodCallHandler(). Make sure to use the same channel name as was used on the Flutter client side.
You need to override your Activity’s onActivityResult

Cannot find name 'SFAuthSession'

I am new to ionic and cordova plugins and I'm trying to implement the sharing of cookies using the cordova-plugin-sfauthenticationsession in my ionic app.
Here is my code based on the documentation provided in this link:
SFAuthSession.start("myScheme://","https://www.facebook.com/",
function(data){
console.log(data);
},function(error){
console.log(error);
}
);
The problem is whenever I try to build my app, the terminal shows an error that it cannot find SFAuthSession. I don't have any idea what I need to import (if any) since it is not included in the documentation. Hope somebody can help me with this.
P.S.
I also tried the safari view controller following this documentation and it is working fine since it provides what is to be imported.
This is a common error. The docs tell you how to install that specific plugin but they don't tell you that you also need to update your module file to include it.
Look at this page:
Ionic Native Community Edition - Ionic Documentation
It explains that you need to import the plugin in a #NgModule and add it to the list of Providers. For Angular, the import path should end with /ngx. Angular's change detection is automatically handled.
To do this you do:
// app.module.ts
import { Camera } from '#ionic-native/camera/ngx';
...
#NgModule({
...
providers: [
...
Camera
...
]
...
})
export class AppModule { }
So just import your Ionic Native module using that technique and you it should work.
When there is no Ionic Native wrapper
However, based on your comments below it is now clear that there isn't an Ionic Native wrapper for this Cordova plugin.
This means that you will have to either:
Access it without Ionic Native
OR write your own Ionic Native wrapper
It seems like this article on Medium has a great introduction to this:
Build your first Cordova plugin for Ionic Native – Sangkhim Khun – Medium
You have passed beyond my personal experience here but I'm trying to figure it out with you.
Part three of the tutorial has an interesting snippet for accessing a Cordova plugin directly:
declare var cordova: any;
var success = function(result) {
alert(JSON.stringify(result, undefined, 2));
}
var failure = function(result) {
alert(JSON.stringify(result, undefined, 2));
}
cordova.plugins.HelloWorld.coolMethod({
_sMessage: "Hello World"
}, success, failure);
You would have to compare the documentation of your Cordova plugin to adapt this yourself to get it working.
Alternatively, if you continue reading that tutorial it explains how to create an Ionic Native wrapper which you could even contribute back to the project so that everyone can use this feature.

After bundling my aurelia app I get a: No PLATFORM.Loader error

After bundling a simple aurelia application with jspm bundle-sfx I get the following error:
No PLATFORM.Loader is defined and there is neither a System API (ES6) or a Require API (AMD) globally available to load your app.
An example application: https://github.com/Baudin999/jspm-bundling-test
You can use: npm run setup:dev in a non windows env to switch back to the dev settings (which is just a comment/uncomment in the ./src/client/index.html) and you can use npm run setup:prod to switch back to the production environment, bundling will automatically be triggered. all other scripts can be found in the package.json.
I can't link to other questions because I haven't found any questions which relate to this problem. I "think" (which means absolutely nothing) that this might be related to the fact that aurelia needs a full loader even when bundling with bundle-sfx but I haven't found any ways to solve the error.
EDIT (25/01/2017 17:16): I've found out that the error is because I import the aurelia-bootstrapper.
As soon as I add: import * as bootstrapper from 'aurelia-bootstrapper'; I get the error
Please add the code how do you bootstrap your aurelia app.
There is nothing actually to import from bootstrapper apart from bootstrap function.
Which you would use in case of custom manual bootstrapping.
like in
import { bootstrap } from 'aurelia-bootstrapper'
const configure: (au: Aurelia) => {} = async function (au: Aurelia) {
au.use
.standardConfiguration();
await au.start()
au.setRoot() // or au.enchance()
})
bootstrap(configure)
in a happy path scenario with jspm - you System.import('aurelia-bootstrapper')
and it takes over finding the root node of your app and the script to configure Aurelia (main by default)
Have a look at Bootstrapping Aurelia in the docs
Oh.. and bundle-sfx is not supported there are other means to bundle aurelia apps using jspm

Mobile First Platform 6.3: Direct Update service JSON Error on Android

I am getting the following error on android when using the direct update service.
WL_DIRECT_UPDATE_MANAGER startUpdate error JSON error
I am using the default listener of worklight.js. The same code works fine on iOS and updates are successfully deployed. Would really appreciate any pointers.
I have not defined wl_directUpdateRealm in an customSecurity or mobileSecurity test. Do I need this?
Reason for this last question is it works fine on iOS without the realm added.
Something is very wrong in this sample application that you have provided.
This is not a sample app - it's the full app.
If I create a new application and test Direct Update, it is working out-of-the-box
common\js\main.js - this file is not the original main.js. That is, it appears to me you have copied the main.js from the native folder into the common folder. The evidence to that is the following comment lines in the file:
/* JavaScript content from js/main.js in folder common */
/* JavaScript content from js/main.js in folder android */
// This method is invoked after loading the main HTML and successful initialization of the Worklight runtime.
/* JavaScript content from js/main.js in folder iphone */
// This method is invoked after loading the main HTML and successful initialization of the Worklight runtime.
Something in your development flow is Wrong.
Correct it and try again.