in

IDEIDE Loving ItLoving It

What is an IDE[Latest] with Pictorial explanation

Pictorial explanation for what is an IDE using Microsoft Visual Studio 2019. The updated explanation for beginner/experts with Images and interactive guide

What is an IDE?

In this article, we will learn about IDEs.  An IDE is an integrated development environment. An IDE is a software that helps a developer write programs and software.  If we think about Microsoft Word, Paint, PowerPoint, and more we know it helps us achieve different goals.  Similarly, an IDE will help us to develop computer software.

IDE stands for Integrated Development Environment.  

It has a text editor, debugger and compiler at the same time.   An IDE is a text editor is an editor where we can edit the code.  An integrated development environment is a tool that makes developing software much easier.

Yes, we could use a basic text editor for writing the code but we have no means of debugging or compiling the code.

For this tutorial, we are going to use Visual Studio 2019 as the demo. Let us create a program in Visual studio.

If you want to know how to install Visual Studio please refer to our earlier post on What is Visual Studio 2019.

Jump to:

Once you have installed the latest version of Visual Studio.  Please follow the given steps to understand what is an IDE.

  • Open Visual Studio 2019.
Launching Visual Studio
Launching Visual Studio
  • Now press the keyboard short cut given below for opening the new project dialog box.
alt+n
  • Start typing the following text as it will automatically enter into the search box.
asp net core web app
  • Please ensure that you have the result that says ASP.NET Core Web Application.
asp net core web app
asp net core web app
  • Now press the below keyboard shortcut.
alt+n
  • Give an appropriate name for your project as shown.
name the project
name the project
  • And then press the keyboard shortcut.
alt+n
  • Click on the Web Application (Model-View-Controller) option as shown.
model view controller
model view controller
  • Use the following keyboard short cut to disable https.
alt+c
disable https
disable https8
  • Now press enter.
  • You will see a dialog box that says that the project is being created.
project is being created
project is being created
  • When it has done creating, you will see the page as shown in the image.
project created
project created
  • Press the keyboard shortcut for building and running the application.
f5
  • You should see a similar page as shown in the image.
project running
project running
  • Stop the application by pressing the following keyboard shortcut.
shift+f5

If you have been able to follow along with the above steps so far,  you have successfully installed all the necessary components to understand what is an IDE.  Please follow along to understand the different parts of the IDE to understand what is an IDE.

What is an IDE – Understand using Visual Studio 2019.

To understand what is an IDE we need to understand different parts of application development.  For developing an application, we need to write the source code for the application.  We need a compiler or an interpreter for converting the source code to the machine level language for the processor to execute it.

So let us see where is the editor in Visual Studio:

  • On the right side, as shown in the image, there is a small window called the solution explorer.
  • It is used to keep track of all the files in our program.
  • Click on Views>Home>Index.cshtml as shown in the image.
solution explorer
solution explorer
  • It will open the code inside the file as shown in the image.
contents of the file
contents of the file
initial contents
initial contents
  • Now add your name as we add our name inside the code.
Final Content
Final Content
  • Press the below keyboard short cut for saving the file.
ctrl+s
  • Press the keyboard shortcut to run the program.
f5
  • This change should reflect on the program.
changed output
changed output

The above steps demonstrate to you how to use the code editor part in the IDE.

  • The editor is used for editing the source code.
  • Of course, the editing can be done using notepad also but the editor of the IDE is very powerful.
  • To get an idea, start entering the following text into the IDE.
<a
anchor tag
anchor tag
  • Choose the anchor tag from the drop-down and press enter.
  • Press tab.
  • This will complete the tag for us.
press tab to complete
Press tab to complete
  • Now copy the following text and go to Visual Studio and press paste.
https://teckangaroo.com
href value
href value
  • Press tab again and the cursor will move on the text content of the anchor tag.
  • And copy-paste the following text in visual studio.
Tec Kangaroo
anchor tag content
anchor tag content
  • Save the file using the keyboard shortcut.
ctrl+s
  • Run the program.
f5
click on the anchor tag
click on the anchor tag
  • In the output, click on the anchor tag and navigate to the site.

We can see that the text editor will help us write code faster.  The text editor for Visual Studio is very customizable.  We can edit in any programming language with it.

Every time we press f5 there is several steps that take place.  The IDE checks for errors.  The errors can be in any form.  The errors can be a syntax error or logic error.  We can see the errors in the error box if there are any.

If there are no errors at this step, the IDE goes ahead and tries to compile the source code.  If there are any errors during this step, the errors will be listed on the error box as well.

When the compilation is over, the output files are obtained as machine code.  The type of machine code depends on the programming language being used and also the framework and SDK.

These output files will not execute itself.  The IDE takes these files and deploys them appropriately.  For example, if the source code belongs to the web application, it makes sense to launch the browser and try to run the web application and if the source code belongs to the android project, it makes sense to launch the emulator and try to run the app inside the emulator

  • The web application gets deployed and displayed in the browser.
  • The android project is deployed inside the android emulator.
  • The console application is run in the Windows desktop itself.
  • A Windows application will also run in the Windows desktop itself.

So a single button press takes care of so many complicated tasks that the developer must do on his own if not for the IDE.  This shows how we use the IDE without even know how to use the IDE.

There is also an output window that shows the status of each task.  If the compiling of the application is successful, we do not know until the application is actually running in the browser.  But we can use the output window to see the build success message to know that the application has compiled without any compile-time exceptions.

output box
output box

The IDE is also good at adding other people’s projects to our code.  We use the Nuget Package manager to add and remove different projects to our solution.

Use the following steps to go to Nuget Package Manager.

  • Right-click on Dependencies.
  • Now select the Manage Nuget Packages.
Manage nuget packages
Manage NuGet packages
  • Click on Browse.
Browse Nuget Package library
Browse Nuget Package library
  • You can search for the type of code you want and add it to the project.

For example, we will try to give the QR code reading functionality to our project.

  • Search for QR code.
  • You can see the results, and if you are sure about the package, click on the package.
  • Now click on the install button.
click on the install button
Click on the install button
  • Go to Dependencies.
  • Packages.
  • You should be able to see the newly added project here.
nuget package in the dependencies
NuGet package in the dependencies
  • Thus we have added the ability to use the QR code without even writing a single line of code.
  • These kinds of techniques that make the development process easier.

Verdict:

The IDE has tons of features that make the development of even complex applications just a breeze.  In this post, we used Microsoft Visual Studio which is easily the best IDE in the world, to see what an IDE can do.  The IDE provides us with a code editor where we can edit the code.  With an IDE we can Build and execute the program automatically.  Check for errors constantly with the help of code linters. The output window to see the output that we can not generally see.  The error window to see the errors.  The solution explorer to manage all the source code files and much much more.

The full scope of an IDE is extremely beyond the scope of this post.  If you want to know more about IDEs, please refer to all other posts on IDEs.  For more such awesome posts, stay tuned to TecKangaroo.

What is an IDE
  • Author Rating
  • Content Clarity
  • Content Relevance
  • Article Rating
4.6

Leave a Reply

Your email address will not be published. Required fields are marked *

Loading…

0

Comments

0 comments