Ionic + IBM MobileFirst

2019-09-21 21:35发布

问题:

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.

回答1:

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.



回答2:

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.



回答3:

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.



回答4:

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>