easy site builder

Sticky Code

Programming is an art

🏆 Winner of Apple WWDC 2019 Scholarship

Watch Sticky Code in Action

Sticky Code combines the idea and concept of design thinking with programming by allowing users to design basic flowcharts using sticky notes of different shapes and colours. The flowchart is then converted into Swift code. In this video, I have demonstrated it by implementing the flowchart for printing fibonacci series of length 15.

Click to Watch...

The Idea

Craft your logic with beautiful flowcharts and get Swift code in return. My ultimate goal with this project is to direclty execute the logic of the flowchart, eliminating the part of coding. With such a user interface, programming will be more like solving a puzzle with visual interpretation of your idea. Sticky Code, with the current state, will be available soon for iPad and Mac.

With Sticky Code, one can create flowcharts using imaginary sticky shapes on a plain area called Canvas. Instructions are to be written inside each sticky shape in a natural syntax-free language (English). After creating a desired flowchart, just click the compile button. The created flowchart will be processed and a Swift code for the same will be generated.
Sticky code is something that beginners can use to start learning algorithms while at the same time learning Swift code and having visual perception of their program logic in an enjoyable way.

Stickies + Coding = Limitless Creativity

Sticky Note - a traditional tool with this concept is being used since long by many people around the world to implement some of the most creative ideas. Programming is no less than art. In this modern age, programming is going to be the biggest playground, it is going to be a plain canvas where incredible artists come and craft their code. I would describe programming to be indeed a "Modern Art".

How it works?

I have used various technologies, frameworks and my custom algorithm to build this. First, I've written an algorithm which determines the structure and flow of the whole code from the flow specified in the flowchart. The flowchart is basically a directed graph with different shapes (or nodes), each containing syntax-free text. I've trained a Core ML model using my custom dataset for classifying the text into various categories of programming statements, like, I/O, Expression, etc. After the category is predicted, those texts are processed individually to convert it into Swift statements with the help of various Natural Language Processing APIs from Foundation and NaturalLanguage framework. The processed texts are placed according to the determined structure from the algorithm mentioned formerly. This will generate a whole Swift program from the designed flowchart.

On the top of using all technologies mentioned above, I've used frameworks that's generally used for 2D Game Development, SpriteKit and AppKit to design and develop the UI. As a result, there are amazing graphics, animations and sfx which makes it even more fun to use.

For whom it is?

The way flowcharts are implemented here is fun and easy to use. That's why, new programmers, particularly kids in school can use it and have a visual perception of their program logic as they implement it. The experience will be more like solving a puzzle.

How to use it?

There's a video above that you can check out which will give you a clear idea on how it is being used. Though, here's everything you might want to know more about it...

The plain area where all the sticky shapes are to be arranged is called "Canvas". To the right, there is a something called "Side Pane" where all options are located. Side Pane also contains all three basic sticky shapes, which are of same shapes that we use in flowcharts, named: Process Sticky (rectangle shape); Decision Sticky (diamond shape) and I/O Sticky (parallelogram).

To draw a flowchart...

● Drag and drop the appropriate sticky shape on the canvas.

● Double click the dropped sticky shape on the canvas to bring up a textbox. Write the instructions in it. For example, in case of proess sticky an equation like "a = b + 2" or "a = 12" or anything like that in a plain language. For I/O stickies as well you can write something like "print hello world" or something. It will automatically format those natural language text properly into a Swift code. It will detect whether the text is the part of string or a variable and will format a print statement accordingly.

● To connect the sticky shapes and define the flow between them, click on the "Define Flow" icon from the Side Pane. All the sticky shapes on the canvas will start to jiggle. Click on the first one from where the flowline begins and another one to where the flowline ends. If you clicked decision sticky for the first time, you need to select two other stickies, one if the condition is true. Another one if the condition is false. The flowline will be of green color for the true condition path and red otherwise.

● There should be one sticky connected with the start shape to determine the beginning of the program and there should be at least one sticky connected with the end shape. There should be no sticky that's hanging at the end of the flowchart. If it's the last sticky to be executed, it should be connected with the "End" shape.

● After creating a colourful flowchart of stickies, just click on the "Compile" icon from the Side Pane. This will process the flowchart and will open a code editor. Here, you can copy the code just with a click, paste it somewhere else and use it! Else, if you find something missing or just want to change it, you can edit it right there.

© Copyright 2021 Neel Makhecha - All Rights Reserved