Getting Started with Software Development

by | Jun 13, 2018

Getting Started with Software Development

by | Jun 13, 2018 | Coding, ZRecent1, zshikhar

Hi! Last month, I completed my first open source project! This post is for you if you’re getting started with software development or ask questions like “How to make a software ?”, or “How do I make a window and GUI stuff through code ?”. This article will give you an idea of how to approach a project and a glimpse of how I built my project. On the way, I’ll be sharing stuff like how to choose a programming language, resources to get started with, cool tips and tricks to speed-up the process.

Well, what was my project? It’s a lightweight IDE for competitive programming. Yes, source code editors like Sublime Text and VS Code exist. However, I needed minimalism, with just the right tools and shortcuts so I focus only on problem-solving. This project is a combination of Windows TextPad and Sublime Text. You can find its source code on my GitHub.

 

BREAKING DOWN THE TASK

Before beginning with the “How to create the window and a button ?”, I’ll broadly separate the components of the application and choose the languages and frameworks accordingly. What do we need during a competitive programming contest:

  • Source Code Editor (example Notepad++, Sublime Text)
  • File Manager
  • Execute terminal commands
  • GUI to wrap all the above in a window

CHOOSING THE RIGHT TOOLS

Next, research about each of the components. You have 2 broad choices:

  1. Reinvent the wheel: Build everything from scratch and take full control.
  2. Use Open Source Code: You can modify other’s code based on their license/permissions on the use of their code.

Let’s tabulate the data and see what you need to build from scratch. This is what I found…

 

MY  OPTIONSSource Code EditorGUIBack-End / File Manager ToolsCompile / Execute Tools
REINVENT THE WHEEL
  • Use HTML, CSS, JS
  • Any good framework
  • Make .exe / .sh files to run terminal commands
  • Use NodeJS
  • Make .exe / .sh files to run terminal commands
  • Use NodeJs
USE OPEN SOURCENo need.Couldn’t find relevant stuff

Graphical User Interface

Initially, I chose Java to build the GUI. Why not C++? Although it’s closer to the machine, is faster than Java and all, Java already has plenty of inbuilt methods that I can use and the project didn’t need much processing power. I never tried the Qt Library for C++ as I knew Java already. If you can handle pointers and manage memory well, go give it a try.

Now, Swing or JavaFX? Swing, in my opinion, is not needed when you don’t want access to every pixel on the screen. With JavaFX, animations and transitions are a lot easier now. Besides, we can use CSS to design the components. You can even use Web Engine class to load the webpage as a GUI-component and create your other components using Java as needed.

Moving to Electron, the key feature is that it gives you a ‘Browser Window’ to display HTML files. What’s so special about it? It comes with built-in Chrome Developer Tools. That means you have access to all your favorite web frameworks and the most famous webpage debugging tool on your fingertips!  So, if you’re familiar with web development, you know how easy it has become to build the GUI.

Aaand I got an additional advantage… Electron uses NodeJS. This gave me access to NodeJS File System module. File Handling and Execution of terminal commands are easy now(for compilation, execution of code). The choice is very clear now, what to choose for GUI.

 

CHOSEN OPTIONSSource Code EditorGUIBack-End / File Manager Tools,
I/O Tools
The Chosen OneUsed Ace-Editor. Here, I made a mistake.  I should have chosen Monaco Editor. It has quite a lot pre-built in features, like (Goto Line which Ace-Editor didn’t have at the time I built).

Codemirror was difficult to modify, couldn’t follow up with its documentation, so, I had to rule it out.

Used Electron Framework. Initially, I built using JavaFX. However, it seemed there are infinite exceptions and interfaces!

Electron made it easy to use NodeJS and allowed me to use web technologies.

Used NodeJS as it already has the required built-in functions.
Why am I The Chosen One ?;_;Used open-source:

No point in rewriting the source code editor. Instead, integrate it into your own ‘Components’.

HTML is easy? xDThis depends on your project. I plan to add some more features to the file manager. Tinkering would only make the code difficult to edit.

WIREFRAMING

Draw multiple layouts, even if you think that layout won’t work, look at others’ projects. I felt that my first layout was the best one, however, it was the worst 🙁  After you’re done with layouts, identify any common attributes among the components drawn. This helps immensely in the coding phase.

Connecting with the project… I’m building a File Manager inside Side-Menu. There are multiple Tabs, some are static tabs(title), while others are expandable(folder), movable(files and folders). All of them have one thing in common: Text inside a Rectangle, an optional button beside the text and do something on being clicked. What’s different in them? I see font decoration, border, the background color on my first thought.  Creating a Class with these attributes will be useful. As far as behavior is concerned, the onClick of a button is the only thing that varies. Takes some time to decide the attributes and methods.

LEARN THE LANGUAGES

Electron Tutorial: David Cameroon – Youtube

HTML, CSS, JS Tutorial: w3schools

NodeJS File System Module: Docs

Web Frameworks(if needed): Angular, Vue, Bootstrap, React JS

Hopefully, wireframing will help you decide which framework to use.

 

CODING PHASE

Once you’re familiar with the languages, the coding phase is really smooth. Just in case you’re stuck: StackOverflow is who you call for help. Before asking a question, do a thorough search on the site, most probably, someone has already encountered the problem that you’re facing.

PS: Use GitHub or any other Version Control System (VCS). It’s a backup of every saved instance of your code.

How much time did the coding phase take? …1 month :). Before writing the code, have an image of what you are actually building. Have you used those lines of code before? Why not make a function. Is the code cumbersome or has too many attributes? Why not make a class?

That’s all folks.

BoiBoi

0 Comments

More from this Category