How to set up the Development Environment

[nordkapp]

Hi Mario,

just bought and installed IMatch 2017. I want to try the new Scripting language. I don't know anything about Javascript and only little about html.

Prior to IMatch I installed Microsoft Visual Studio Code as one of the Editors you mentioned in the Development Center.

I expect that the Editor gives me Code completion not only for Javascript but also for IMatch. But thats not happen. If I type in "Imatch." no Methods for this class are displayed, so I have to type in the whole names and get no hint to the parameters.

Also if I Ctrl-Klick on the .js includes in the html Header Visual Studio displays a message that it cannot find the linked file.

Is this behavior normal? Or went something wrong with the installation of IMatch or Visual Studio Code? Or do I have to use another editor for that funtion?

Thanks and greetings
Ralph

[Mario]

Start by opening the webroot folder via the Open folder command.
All IMatch WebServices endpoints are documented via the Documentation App in IMatch.

The IMatch JavaScript class library is documented in the Developer Center:

https://www.photools.com/developer-center/

bit blue button on the top right.

[nordkapp]

Opening the webroot folder (http://127.0.0.1:50519) in Visual Studio Code helps. It display no files but the Ctrl-Klick on the included files works now.

For the Imatch*.js files the code is well formatted, but for the jquery.mis.js File and the .css files I get an unformatted output. I get a warning that something with  type Infos for Javasrcipt could not be installed and when I click on the help for that warning I get to this page: https://code.visualstudio.com/docs/languages/javascript#_automatic-type-acquisition but after reading it several times I have no clue what to do.

What Editor do you use or can you give us a recommendation what Setup will easily work for the "old basic programmers" ? As I said I don't know Javascript but I bought a learning DVD and I never had something to do with webservices. I thought I can learn Javascript by playing around with the new IMatch but it seems there a some "stones in the way"

[Mario]

I meant the real webroot folder: C:\ProgramData\photools.com\IMatch6\webroot

IMatch ships jQuery in minimized form (this is the meaning of the .min. in the file name).
If you want to study jQuery code, you can download the non-minified form from the jQuery web site. But usually you never need that.

The easiest way to get into JavaScript programming is to the excellent tutorials I link to in the Developer center.
Visual Studio Code is great for HTML and JavaScript experiments.

As usual, don't expect to make progress in hours. It will take some time to learn the basics, and then it goes fast.

WebServices are just fancy functions you can call in your script to get data from somewhere. But start simple, with some plain JavaScript and maybe a bit of HTML.
The "Info" app uses the IMWS to get some info, and then produces a table from it. Very nice to start with that, after you have learned how to use Visual Studio Code.

[afengler]

The following are some tips based on my experiments.

1. As Mario suggested, running VS Code and selecting 'File' -> 'Open Folder' (or shortcut ctrl-K, ctrl-O) and then selecting 'webroot'
(as in C:\Program data\photools.com\imatch6\webroot) shows you all apps and samples. Typically the 'index.html' file contains the
code that you want to study or modify. Of course you work only on copies in appropriately named sub-folders of 'user'.

2. VS Code is a great code editor but I have not been able to use it also as a debugger. Both start commands (F5 debug, ctrl-F5 run)
result in an error "Cannot launch program 'c:\ProgramData\photools.com\imatch6\...\...\...\index.html'; setting the 'outFiles' attribute might help."
Opening the 'launch.json' file shows that it seems to be a default file with only the "type", "request", "name", and "program" attributes.
Perhaps we need some additional attributes in that file like "outfiles" and/or "sourceMaps", but I gave up on that after some Google
research.

3. Instead I am using Chrome for debugging. My workflow here is as follows:
     - Open VS Code on monitor 1 and select the app under development, typically you work on 'index.html'.
     - Open Chrome on monitor 2, select Developer tools (via main menu or F12 or ctrl-shift-I)
     - "Synchronize" VS Code and Chrome by right-clicking anywhere on the Chrome 'Sources' tab and selecting "Add folder to workspace"
        and browsing to the 'webroot' folder. Click on it and you can now edit any source file either in VS Code or the Chrome debugger
        when selected 'Sources'. Make sure to hit ctrl-s in either editor to save any changes made there.
     - Run the app under development (here named 'test') by entering its URL 'http://localhost:50519/user/test/index.html'
       in the Chrome address bar and hitting 'enter'.
     - I work mostly with the 'Elements', 'Sources', and 'Network' tabs of the Chrome debugger. In 'Sources' you can set breakpoints
       by left-clicking on the line number (toggle). You then can inspect the value of variables etc.
     - After modifying the source code (don't forget ctrl-s!) using either editor, you can rerun the app by clicking on the Chrome
       'reload' icon.
     - Optionally you can open another instance of Chrome as a remote debugging port with the same URL except using port 50520.
       As Mario has shown, you can then monitor very nicely the traffic between your app and the IMWS server.

If somebody has figured out how to use VS Code for debugging, I would be grateful for any hints.

IMatch 2017.8.2 (64-bit )
VS Code Version 1.13.1
Node.js v6.11.0

P.S. These messages probably should be moved to 'IMatch 2017 Scripts and Apps'.

[Mario]

Thanks for sharing your workflow!

2. The debugger in VS Code is not designed to debug JavaScript running in a browser. It can debug Node apps, Python scripts, even C# or PHP, with the right extensions.

Using the built-in debugger in your browser (Chrome or FF) is the proper way to debug IMatch apps. Thanks to Chromium you can even 'remote debug' the app while it is running in IMatch (which may be required, if your app uses functions which only work when an app runs in an App Panel).

[ubacher]

Mario says:

Thanks to Chromium you can even 'remote debug' the app while it is running in IMatch (which may be required, if your app uses functions which only work when an app runs in an App Panel).

Mario: could you please expand on this:
What does it mean an app runs only in a App Panel?

Please explain the difference between local and remote debugging.

I thought IMWS functions are designed to be callable from remote browsers i.e. via IM Anywhere, via a network,
while IMatch calls work only if I run the browser on the same machine as Imatch runs on. Have I got that right?

And the difference would be that calls via the network have to be authenticated (checked if they are allowed access to Imatch)
and that Imatch needs to be able to differentiate between multiple possible callers/users.

[Mario]

I thought IMWS functions are designed to be callable from remote browsers i.e. via IM Anywhere, via a network,
while IMatch calls work only if I run the browser on the same machine as Imatch runs on. Have I got that right?

Yes. BUT, the App panel "adds" some functions to the Chromium browser, e.g. the function which allows you to determine the app id or the IMWS port. These functions are added by IMatch to the Chromium browser running in the App Panel.

They extensions don't exist when you open your app in an external browser, which is why there is always some extra code to allow an app to speak to IMWS or open a web socket even whether or not the app runs in an App Panel or Browser. For example, if the app runs in the App Panel, the app can determine the port used by IMWS automatically by calling an extension. If the app runs in a browser, it just assumes the default port IMatch uses.

Mario: could you please expand on this:
What does it mean an app runs only in a App Panel?

I did. In the documentation: https://www.photools.com/dev-center/doc/imatch/IMatch.html

If a function in the IMatch JavaScript class has the embedded badge, it only works when the app runs embedded in IMatch (in an App Panel). The meaning of this and the badge is explained near the top, in the isEmbedded function documentation.


The IMWS embedded in IMatch only allows access from the local machine. This is a courtesy by me, to allow app developers to use their web browser on the same machine to comfortably debug their apps. It would be easy to prevent IMWS from accepting connections from the 'outside', only allowing apps to run in App Panels.

Please explain the difference between local and remote debugging.

I did. In the documentation: https://www.photools.com/dev-center/doc/imatch/IMatch.html
Remote debugging in this context means that you connect the Google Chrome browser with the app running in the IMatch App Panel.