Step by step process to develop an app in MATLAB using App Designer

An app is a self-contained MATLAB program that provides a simple click interface to your code. You don’t require to show your codes to others. You don’t require to know C/C++, java or any other kind of complicated language to design an app.

Apps contain interactive app components such as menus, input and output fields, buttons, calendar, sliders etc. that execute specific instructions based on your codes, when anyone interacts with them. Apps can also contain plots and graphs option for data visualization.

We are going to design a normal (or Gaussian) distribution equation in the app.

• The parameter mu is the mean or expectation of the distribution.
• Sigma is its standard deviation.
• The variance of the distribution is sigma ^2.

We are going to create a simple app so everyone can understand it. Based on the variation of means and variance values of the function we can visualize the variation in the curve of a normal distribution function.

Steps to create an app

Step1 :- You can open the app designer by giving the command appdesigner in MATLAB, a GUI will be opened as shown below.

Click on Blank App

As you see in the above figure, circled in red, there are two view modes: Design View and Code View.
In the design view we add components from component library, and in the code view we write codes to execute.

Step2 :- Choose components from the library and drag them in the design view window. In our case we require one push button, two numeric edit fields and one axes for visualization.

Step3 :- Customise all the components in the design view, like name of the components, colour, font, width, etc. To customise any component, just click on it and change its properties in the left sidebar. Check the figure below.

The same way you can customise all the components according to your need. In my case it looks like below.

Step4 :- Create a Call back function for the push button and write codes under the push button callback as we want my codes to be executed when we click the push button. Select click button and right click. Further see the figure below.

When you click on Add ButtonPushedFcn callback then it will be redirected to the Code View, as shown in the figure below.

Step5 :- Now we have to write a code in the push button callback function.

Before writing the code remember some points:

• All data of your app will be saved as a structure in app.
• For example, a numeric value of Mu edit field will be saved as app.MuEditField.Value and of Sigma in app.SigmaEditField.Value.

• To plot we have to select axes where we have to plot. In this case there is only one axes that is app.UIAxes

Now write your codes under the push button callback as given below.

We assign random variable x, mean and standard deviation in callback as given below.

 mu=app.MuEditField.Value;  % Mean
sigma=app.SigmaEditField.Value; % Standard deviation
x= -5:.01:5; % random variable

Mathematical model and plot command in the push button callback.

f= 1/(sigma*sqrt(2*pi))*exp(-1/2*...
    ((x-mu)/sigma).^2) % 3 dots we use to complete code in next line
plot(app.UIAxes,x,f)  % plot command

Step6 :- Now we can run the app to check if there is any error or it is good to go.

Click to run as shown in the figure below.

When you click Run your app will be opened. Provide some values and click on the green tab. Let’s say mean is 0 and the standard deviation is 0.5.

Now the app is ready and we haven’t found any error. The next step is to create an .exe file (standalone app) , web app or MATLAB app.

Step7 :- We can create different kinds of apps. (Check the figure below).

• MATLAB App :- Create an app installation file to share your app with MATLAB users.

• Web App :- Create a deployed web app using MATLAB Compiler. You can use this app to host on web.
• Standalone Desktop App :- Create a standalone desktop app using MATLAB Compiler. It will create an .exe file and you can run it on any machine without MATLAB installed. You require a MATLAB Compiler Runtime (MCR) to run the .exe file. MCR is free to download, you can get it here . You can create an app for MAC OS and Linux, too, using the MATLAB Compiler.

Now, to create a standalone app follow the figure below.

We have two choices as shown in the figure below:

• Runtime downloaded from the web (chose this option when you have already installed MCR or you want to download later during running the .exe file);
• Runtime included in package (choose when you want MCR will be included in your standalone app).

If you want to do some modifications in the settings before creating an .exe file, like path of your all output files, you can click on settings and modify.

After clicking on Package as shown above in 4, it will start performing some a task to create your standalone app. When it is done open the output folder.

Three folders will be generated:

• for_redistribution (if you want to install app);
• for_redistribution_files_only (if you don’t want to install but you want to run the app);
• for_testing (just for testing).

Open the folder for_redistribution_files_only , run the app, use the app ans share with our colleagues.

Done.

Some Points to remember for advance app designing

• You can create multiple axes for different kinds of plots and multiple push buttons.

• Every function in the apps has its own workspace where variables are saved. So you can’t use same variables from one function in another one. To access any variable in any function just create a private function and mention all the variables which you are going to use. You can use a private function to read some files, it will be executed before running the app.

• You can create a callback for the startup function, to write some startup codes.

If you want to watch a recorded webinar on creating an app using MATLAB visit here .
Don’t forget to subscribe to the channel for more tutorials.