- AppStudio for ArcGIS is a ground-breaking tool in the GIS app revolution. With AppStudio, you can convert your maps into beautiful, consumer-friendly mobile apps that are ready for Mac, iOS, Android, Windows, and Linux operating systems and publish them to all the popular app stores using your own brand—no developer skills required.
- Download Podcast Studio for macOS 10.14 or later and enjoy it on your Mac. Podcast Studio is the all-in-one way to record, edit, and publish your podcasts. Instead of managing “tracks”, “effects”, and spending time with repetitive editing, Podcast Studio can do all the.
Studio is a plug-in for Adobe Illustrator that puts interactive 3D packaging creation in your hands. Studio offers a 3D viewing environment where you can see your artwork applied instantly on the.
Node Package Manager
AppStudio now supports the use of some of the most important new technologies in the web development world.
npm is a repository of code which can be used with Node.js. It's included when you download Node. There is a huge number of packages available - over 750,000 at last count. You can include these packages in your Node project to add functionality. It might be for convenience: there are a lot of libraries which are much easier to include in your project than to write yourself. It might be for functionality: the modules can implement features which would not be available in the browser.
How is this compare to PhoneGap?
PhoneGap (Cordova) is used to package apps for iOS and Android. Electron is used to package apps for Windows, MacOS and Linux. It's quite reasonable to have one AppStudio project that you use with both PhoneGap and Electron, letting you build for all 5 platforms.
Nodejs/npm modules are similar to PhoneGap Plugins. Since they are operating system specific, PhoneGap Plugins will not work with Electron (and vice versa).
Tutorial: Make an Electron app
In this tutorial, we're going to use a module from npm called weather-js to create an app which gets weather data from weather.service.msn.com. It's very convenient: we don't have to figure out the MSN API to use it.
We recommend using AppStudio 8 (or later) with this tutorial.
Set up the project
1. Download and install Node. (This also installs npm.)
2. Using AppStudio, create a new project called ElectronWeather and save it. (You can also use the ElectronWeather sample with comes with AppStudio by opening it and doing a 'Save As' elsewhere, to create a fresh copy. If you do this, several steps below can be skipped - follow the instructions)
3. Enter 'Weather App' into description in Project Properties.
4. In Project Properties, go to the Electron section and open package.json. Modify the 'dependancies' line as follows: (Skip this step if you're using the sample).
This includes the Weather-js Node library from npm.
5. To add your own icon, follow these steps. (Skip this step if you're using the sample).
- Put an png file at least 512x512 in your project directory.
- Set PhoneGap icon(1024) to that icon in Project Properties.
Add the Weather Code
1. Add a button to Form1.
2. In the Code Window for Form1, paste the following code. You'll notice there is a new function called 'require' in the first line. This function is part of Node.js: it loads the module of that name.
Run the App
Now we're ready to run the app. On the Run menu, choose 'Run Desktop App using Electron'
- The Chrome Dev Tools window opens by default. We'll need this if we are going to debug the app.
- To turn off the Chrome Dev Tools, set 'Chrome Dev Tools' to false in Project Properties.
- The 'Electron Security Warning' in the console can be ignored.
Distributing the App
We now have a running app. The next step is to package it for distribution. We can make regular executables for distribution on MacOS, Windows and Linux. The packaging has to done on a computer running the OS we are targeting: the MacOS version needs to be build on a Mac, etc.
There is more documentation on packaging at https://www.electron.build/. You'll need to pay special attention to code signing requirements.
On the Run menu, choose 'Make Desktop App for Distribution using Electron'. If the build fails, look at the log in 'About AppStudio' for more information.
When the build is complete, you will find the executable in your project folder, in
Setting Electron Runtime Options
The operation of Electron apps at runtime can be changed by modifying the electronMain.js module. It's in the Electron section of Project Properties.
You can learn more about the options in ElectronMain.js.
How to tell if you are running Electron at runtime
How to tell if you are running Windows or MacOS at runtime
- Check the AppStudio Log in 'About AppStudio'. It will have more info.
- To reset the Electron environment, simply delete the electron folder in your project. It will be recreated next time you start your app.
- To start your Electron app in a console, open it in the electron folder of your project directory and enter:
Visual Studio For Mac Docs
- To build your Electron distributable in a console, open it in the electron folder of your project directory and enter: