mobilefirst js starts with ionic serve (WL is not defined) - ionic-framework

Objective:
Get mfpjsloaded in document event
way to check: this.renderer.listen('document', 'mfpjsloaded', () => {}); in app.component.ts
Many get WL is not defined reference error using mobilefirst and ionic serve.
And i see no solution out there.
However, i have a project on hand that can start mfp script with ionic serve.
I am sorry that i cannot share code with you.
With a brand new project, i find i cannot start mfp script with ionic serve anymore.
Known workaround:
1. use mfpdev app preview
2. use emulator / device
**Please DO NOT suggest those in your reply
Finding:
To kick start mfp js, it needs worklight js to be run
Hope to see suggestions.
Thank you

This occurs if MFP components are not loaded before your execution starts to use MFP commands. The workaround is to ensure that you use MFP APIs only after MFP load is complete. This can be achieved in 2 ways :
Call MFP functions form within the function wlcommoninit() . Usage of this function would be similar to the usage in this link : https://mobilefirstplatform.ibmcloud.com/tutorials/en/foundation/8.0/application-development/sdk/cordova/
Use the event 'mfpjsloaded'. Only after the trigger of this event, use MFP functionalities. This event can be used this way : document.addEventListener('mfpjsloaded', initWL, false);.
Add your MFP functions in initWL function.

Related

Mobile DApp connecting to Wallet

I've been trying to create simple mobile app prototype (in Flutter) which would allow you to connect to a Wallet and obtains your address(es). I cannot get the connection working, all the clients I could find are written in JS so my initial approach was to get it working using webview. However none of the libraries worked for me:
WalletConnect - the generated wc: link is not recognized (universal links don't seem to work)
Metamask - doesn't inject the provider into the webview browser (I'm serving the scripts locally)
Web3Modal - requires secure server to run
I'm about to try to get local HTTPS server working in the app just to try the Web3Modal but I kind of have a feeling that I'm approaching this wrong.
Any suggestions appreciated.
There is now walletconnect_dart package which supports WC protocol for Flutter. I have created walletconnect_qrcode_modal_dart package which uses walletconnect_dart to emulate functionality of #walletconnect/qrcode-modal npm package.

How to generate / adding new page using command in Ionic-react

ionic g page topic
This command gives following error
[ERROR] Cannot perform generate for React projects.
Since you're using the React project type, this command won't work.
The Ionic CLI doesn't know how to generate framework components for
React projects.
The error message is pretty clear, the Ionic cli doesn't support generating new pages for a project that uses React. That means you'll have to create the files manually.

Undesrscore.js library is not working with Ionic based MobileFirst project

I have created hybrid application with mobilefirst using ionic. I have included underscore.js library in my project. When I try to access methods of underscore, I get errors like underscore is not defined
If you mean that you have created an app using MobileFirst Studio - that is not the recommended path. The recommended path is to create a Cordova application using the MobileFirst CLI. You can then combine this with Ionic. This approach is more fool-proof.
You can follow these guides:
https://www.raymondcamden.com/2015/03/23/working-with-ibm-mobilefirst-and-the-ionic-framework/
https://mobilefirstplatform.ibmcloud.com/blog/2016/01/13/ionic-hybrid-mobile-app-using-mobilefirst-platform-7-1-cli/
Note that you did not mention the actual error you have received. Without this, the question is moot as there can be a number of possibilities. Please actually mention the error you got.

Ionic + IBM MobileFirst

I've found a few post on this topic but have not been able to find the best solution.
Attempted to integrate Ionic into IBM MobileFirst (Worklight).
At the moment - I have built a normal Ionic project and moved the WWW folder in the 'common' folder. Also added in the initOptions, main.js and messages.js.
MobileFirst has an awful build process - I hate having to deploy to a mobilefirst development server + preview app for any code changes. I am hoping to get some type of auto reload working within mobileFirst, or at least develop with ionic normally and hav ea job to bring my changes into my worklight project... something that is better than me current situation.
Does anyone have a sample project that actually auto-builds or picks up code changes automatically?
Any and all help is greatly appreciated.
Not sure what do you mean by "auto-reloading"; if you make any changes to the web resources to your project inside the Studio plug-in (in Eclipse) and reload the preview in the browser, it will show the changes.
You are not required to Run As > Run on MobileFirst Development Server for each change. As long as you work on the resources in your workspace, the "auto-reloading" as you call it, should work (make sure you are using the latest available MobileFirst Studio version from the Eclipse Marketplace).
There is also a rudimentary Starter Application that is based on Ionic.
You can download it from here.
There are also several results on the subject matter when searching in Google.
The need to rebuild in order to see changes in your Web components (CSS, JavaScript, HTML) did used to be an annoyance in early versions of what was then Worklight and is now MobileFirst. I forget when the need for a rebuild was removed but certainly in Worklight 6.2 and beyond you now simply need to refresh in your browser.
UPDATE: If using MobileFirst 6.3 you need to ensure that you are on a
suitable patch level. I find that simple refresh does not work in
6.3.0.00-20150106-1717, but if I update (Help->Check for Updates) to 6.3.0.00-20150214-1702 then edit/save/refresh works as
expected.
My personal practice is always to have Mobile Web environment in my project and then choose that from the Console. This loads the application in the browser-based Mobile Simulator that you can tailor to fit your target form-factor. This has a "Go/Refresh" button that immediately reflects your edits.
Alternatively, some folks these days do not use Studio, instead they use the Command Line Interfacer. Possibly this may be more to your taste. You can download it here.
there is a solution with using staff like ionic-cli serve command + symbolic links that will replace common folder.
check here an example https://www.dropbox.com/s/4pvaulo6yo47kb9/lab_7.2.mp4?dl=0
(you just can disable sound, cause i've recorded it in russian) 7-15 minutes of this video
Other option is to organize live-preview yourself using IDE features and/or nodejs
This will work as long as you are working on front-end (mostly non-worklight api) part.
You need to include this lines in the index.html
<!-- ionic bundle & css -->
<link href="www/ionic/css/ionic.css" rel="stylesheet">
<script src="www/ionic/js/ionic.bundle.js"></script>

Using WebStorm with Parse.com

I'm completely new to web development including WebStorm, but I do know game development, and through that I've used Parse.com a number of times with iOS games. I know Parse has a JS SDK, but how would I use that with WebStorm? The whole web server is a bit unclear to me, does the web server with WebStorm automatically kick in for anything you publish? Or can you turn it off? Do I have to turn it off to work online with the Parse SDK?
If you're on a mac, below steps should work:
WebStorm → Preferences → JavaScript → Libraries → Add
Press on the + button and add the Parse JavaScript SDK.
You should now see the Parse SDK listed in the libraries.
Now to run the application locally:
Run npm install parse to install Node's Parse module.
Include var Parse = require('parse').Parse; in your main.js
Run → Edit Configurations and make sure that Node interpreter is set to /usr/local/bin/node.
Now use Run → Run 'main.js' to run your application.
you need to download the javascript SDK (parse-1.2.17.js) and configure it as a javascript library in WebStorm (Settings/javaScript/Libraries, Add...)
You don't have to use the built-in server if you don't need it. Just configure your own web server is settings/deployment, like it's shown in http://wiki.jetbrains.net/intellij/Remote_JavaScript_debugging_with_WebStorm_and_PHPStorm#Configuring_access_to_the_Web_server