How do I get started with scripting?

ubacher · May 31, 2017, 07:28:14 AM

Step 1: I create a new app using the Imatch AppWizard.

Step 2: I work/change ("program") the code using a text editor on the file index.html
I use notepad++ but I understand the free Microsoft editor would be better.

Now what? How do I "run" the script? When and how do I work in the browser? Use the debugger?
I know how to get index.html into the browser (:http://127.0.0.1:50519/user/NAME OF MY APP/index.html)

Debugging IMatch Apps in the Dev center has not helped me. I configured the debugging port 49777 and
I enter localhost:49777 in the browser.
This shows me App Manager but clicking on it produces an empty page.

I am using the Firefox browser.

Help please! I am keen to get started.

Ger · May 31, 2017, 08:10:10 AM

I indeed use the Microsoft Visual Studio Code editor and it works great with IMatch.

Creating a new app using the App Wizard works perfectly fine: the new app is added to the App Manager panel and clicking the app will automatically launch the app in the App Panel 1.
The Output Panel (Apps tab) works as console, so your console.log output is immediately visible.

Once I want to edit the script (html/javascript), I open the html file(s) in VSCode and start coding (mostly unsuccessful in my case

).
In Imatch you then have the following important panels:
- App Panel 1
- Output Panel (Apps)

The moment you save the html file in VSCode, App Panel 1 will automatically refresh (in other words: the script will re-run). Alternatively, you click the refresh button (top right in App Panel 1).

Debugging can be done using the Output Panel (console.log output). In Firefox you can open the html file as well, and using the debug option (F12) you will have the debugger available.

Ger

Mario · May 31, 2017, 10:46:13 AM

It's basically as Ger described.

1. After creating your App in the App Wizard, it shows up in the App Manager.
2. Click on it to load it into an App Panel. This "runs" your script.
3. When you make changes in your editor, the App Panel recognizes this and reloads the app to show your changes.
TEST: Add some text in the <body> of the index.html.

To debug your scripts, you usually open it in your web browser instead of in the app panel. This gives you immediate access to all the developer tools, the debugger etc. I explicitly designed the IMWS embedded in IMatch to allow this. Easiest way.

1. Load your app in the browser.
2. Press <F12> to open the developer tools (FF and Chrome have the best tools, Edge comes close)
3. Press <F5> to reload your app in the browser after you made changes.

This gives you a super fast workflow and a lot of fun.

TIP: Load one of the sample apps I have provided in your browser. Read the comments in the source code to understand what it does. Lean how to use the debugger in your browser. It may seem all a bit strange for a day or two, but then you'll see how fast and powerful development with JS and HTML is.

There are literally tons of tutorials and videos out there which explain how to use HTML5 and JavaScript. How to write simple and complicated apps. How to use the debugger in your browser. Start with the links I've provided in the Developer Center. Mozilla has very good HTML and JS documentation, tutorials and videos. YouTube is your friend as well. Google has very good documentation about how to use Chrome for development.

Notepad++ is a fine general purpose editor. For JS and HTML development I would prefer Visual Studio Code. I used several other editors before, including Sublime and Atom. But Visual Studio Code is so much loved by the web developer community for very good reasons.

Tip: After installing Visual Studio Code, use the "Open Folder" command. Open C:\ProgramData\photools.com\IMatch6\webroot and you will see all apps shipped with IMatch and you can drive right in. Your own apps will show up under "user".

ubacher · June 01, 2017, 08:40:37 AM

Thank you both: I am up and running.
I'll post my struggles in a separate posting.

How do I get started with scripting?

ubacher

Ger

Mario

ubacher