software development Archives - SoftUni Global

Making A Sliding Puzzle in Java: Step-by-step Guide [Project Tutorials]

Nikol Ruseva — Mon, 17 Oct 2022 13:05:04 +0000

Sliding puzzles are mechanical devices made of blocks of wood or plastic set into a frame as well as simple but addictive computer games that improve your problem-solving skills. The pieces are usually simple shapes or imprinted with colors, patterns, sections of a bigger picture, numbers, or letters. Sliding puzzles, also known as sliders or sliding-block puzzles, are different from rearrangement puzzles in that the pieces cannot be lifted or removed from the frame. To win, you have to arrange them in a specific pattern by sliding them into certain routes on the board. Each move opens a new path and rearranges the pieces, so you have to plan carefully in order to achieve the end configuration.

Following this tutorial, you will make your own 3×3 sliding puzzle using Java.

Note: To create the game, you can use more advanced implementations like arrays and matrices. The method used in this tutorial is simple and targets absolute beginners.
Let’s begin.

Before You Start

For the user interface, you use Swing. Swing is a GUI (Graphical User Interface) widget toolkit for Java. It is built on top of the AWT (Abstract Windowing Toolkit) API. Unlike AWT, Java Swing provides platform-independent and lightweight components.

The javax.swing package provides classes for the Java Swing API such as JButton, JTextField, JLabel, JMenu, etc. You will use the Main method to start the program, but the programming logic will be written in a separate class.

Preparing Variables

Create a new project and give it a descriptive and meaningful name.

Your Main method should look like this:

				
					public class Main {
   public static void main(String[] args){
       new Puzzle();
   }
}

Right-click on your project folder and create a new Java class – Puzzle. To use the functionalities (methods) of Swing, the class should extend JFrame. To make certain actions happen when you click on the puzzle pieces, you also need an event listener. Make the class implement ActionListener.

				
					import java.awt.*;
import javax.swing.*;
import java.awt.event.*;
public class Puzzle extends JFrame implements ActionListener{
}

Your puzzle will be 3×3 so you need to declare 9 buttons for each of the puzzle pieces, as well as a shuffle button to rearrange them. You can also implement a counter for the number of clicks the user has performed. To make the counter, you need an integer and a label to visualize the number.

				
					JButton b1,b2,b3,b4,b5,b6,b7,b8,b9,shuffle;
int counter = 0;
JLabel counterLabel;

Creating Constructor

When you start the game, the first thing you will see is a new game window. Let’s set it up. Because the Puzzle class inherits (extends) from JFrame, it can call JFrame methods like setSize() and add(element).

				
					Puzzle(){
   setSize(400,400);
   setLayout(null);
   setVisible(true);
   setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

It is 400×400 pixels in size (which you can customize to your preference) and will close when you click the X button on the top right.

Next, you need to initialize all the elements.

				
					b1 = new JButton("1");
b2 = new JButton(" ");
b3 = new JButton("3");
b4 = new JButton("4");
b5 = new JButton("5");
b6 = new JButton("6");
b7 = new JButton("7");
b8 = new JButton("8");
b9 = new JButton("2");
shuffle = new JButton("Shuffle!");
counterLabel = new JLabel("Clicks: 0");

Then add these elements to the window and set proper bounds.

				
					add(b1);add(b2);add(b3);add(b4);add(b5);add(b6);add(b7);add(b8);add(b9); add(shuffle);
Container contentPane = this.getContentPane();
contentPane.add(counterLabel);

b1.setBounds(90,60,50,40);
b2.setBounds(160,60,50,40);
b3.setBounds(230,60,50,40);
b4.setBounds(90,115,50,40);
b5.setBounds(160,115,50,40);
b6.setBounds(230,115,50,40);
b7.setBounds(90,170,50,40);
b8.setBounds(160,170,50,40);
b9.setBounds(230,170,50,40);
shuffle.setBounds(135,245,100,40);
counterLabel.setBounds(145,15,180,40);

Now run the program. It should look like this:

The next step is optional, but it will improve the visual appeal of your game. It involves changing the background color of the puzzle pieces, the font, and the font size. You can select your own or use the ones from this example.

				
					shuffle.setBackground(Color.LIGHT_GRAY);

b1.setBackground(Color.decode("#5adbb5"));
b2.setBackground(Color.decode("#5adbb5"));
b3.setBackground(Color.decode("#5adbb5"));
b4.setBackground(Color.decode("#5adbb5"));
b5.setBackground(Color.decode("#5adbb5"));
b6.setBackground(Color.decode("#5adbb5"));
b7.setBackground(Color.decode("#5adbb5"));
b8.setBackground(Color.decode("#5adbb5"));
b9.setBackground(Color.decode("#5adbb5"));

b1.setFont(new Font(Font.MONOSPACED, Font.PLAIN, 18));
b2.setFont(new Font(Font.MONOSPACED, Font.PLAIN, 18));
b3.setFont(new Font(Font.MONOSPACED, Font.PLAIN, 18));
b4.setFont(new Font(Font.MONOSPACED, Font.PLAIN, 18));
b5.setFont(new Font(Font.MONOSPACED, Font.PLAIN, 18));
b6.setFont(new Font(Font.MONOSPACED, Font.PLAIN, 18));
b7.setFont(new Font(Font.MONOSPACED, Font.PLAIN, 18));
b8.setFont(new Font(Font.MONOSPACED, Font.PLAIN, 18));
b9.setFont(new Font(Font.MONOSPACED, Font.PLAIN, 18));
shuffle.setFont(new Font(Font.DIALOG, Font.PLAIN, 18));
counterLabel.setFont(new Font(Font.DIALOG, Font.PLAIN, 18));

In the end, you get:

Finally, attach an action listener to every button:

				
					b1.addActionListener(this);
b2.addActionListener(this);
b3.addActionListener(this);
b4.addActionListener(this);
b5.addActionListener(this);
b6.addActionListener(this);
b7.addActionListener(this);
b8.addActionListener(this);
b9.addActionListener(this);
shuffle.addActionListener(this);
}

And the Puzzle constructor is done.

Adding Action

The Action Listener is a simple event handler with only one method – actionPerformed (ActionEvent e). It is used to define what should happen when a user performs a certain operation. It registers the event of clicking a button, for example. The ActionListener is one for all buttons, so you have to make a separate if statement for each one of them in the actionPerformed method. Let’s start with the Shuffle button.

				
					public void actionPerformed(ActionEvent e){
   if(e.getSource() == shuffle){
       String s = b4.getText();
       b4.setText(b9.getText());
       b9.setText(s);
       s = b1.getText();
       b1.setText(b5.getText());
       b5.setText(s);
       s = b2.getText();
       b2.setText(b7.getText());
       b7.setText(s);
       counter = -1;
       counterLabel.setText("Clicks: 0");
   }

The logic of moving puzzle pieces is simple: instead of physically moving the pieces around the board, you simply change their text.

				
					if(e.getSource() == b1){
   String s = b1.getText();
   if(b2.getText().equals(" ")){ b2.setText(s); b1.setText(" ");}
   else if(b4.getText().equals(" ")){ b4.setText(s); b1.setText(" ");}
}

Let’s break the process into a few steps:

Extract the text from the current button;
Determine which of the adjacent buttons has no text;
Substitute the empty text with the extracted one;
Set the text of the current button to an empty string.

Follow this logic for the other pieces as well.

				
					if(e.getSource() == b2){
   String s=b2.getText();
   if(b1.getText().equals(" ")){ b1.setText(s); b2.setText(" ");}
   else if(b3.getText().equals(" ")){ b3.setText(s); b2.setText(" ");}
   else if(b5.getText().equals(" ")){ b5.setText(s); b2.setText(" ");}
}
if(e.getSource() == b3){
   String s=b3.getText();
   if(b2.getText().equals(" ")){ b2.setText(s); b3.setText(" ");}
   else if(b6.getText().equals(" ")){ b6.setText(s); b3.setText(" ");}
}
if(e.getSource() == b4){
   String s=b4.getText();
   if(b1.getText().equals(" ")){ b1.setText(s); b4.setText(" ");}
   else if(b7.getText().equals(" ")){ b7.setText(s); b4.setText(" ");}
   else if(b5.getText().equals(" ")){ b5.setText(s); b4.setText(" ");}
}
if(e.getSource() == b5){
   String s=b5.getText();
   if(b2.getText().equals(" ")){ b2.setText(s); b5.setText(" ");}
   else if(b4.getText().equals(" ")){ b4.setText(s); b5.setText(" ");}
   else if(b6.getText().equals(" ")){ b6.setText(s); b5.setText(" ");}
   else if(b8.getText().equals(" ")){ b8.setText(s); b5.setText(" ");}
}
if(e.getSource() == b6){

   String s=b6.getText();
   if(b9.getText().equals(" ")){ b9.setText(s); b6.setText(" ");}
   else if(b3.getText().equals(" ")){ b3.setText(s); b6.setText(" ");}
   else if(b5.getText().equals(" ")){ b5.setText(s); b6.setText(" ");}

}
if(e.getSource() == b7){
   String s=b7.getText();
   if(b4.getText().equals(" ")){ b4.setText(s); b7.setText(" ");}
   else if(b8.getText().equals(" ")){ b8.setText(s); b7.setText(" ");}

}
if(e.getSource() == b8){
   String s=b8.getText();
   if(b7.getText().equals(" ")){ b7.setText(s); b8.setText(" ");}
   else if(b9.getText().equals(" ")){ b9.setText(s); b8.setText(" ");}
   else if(b5.getText().equals(" ")){ b5.setText(s); b8.setText(" ");}
}

The last button marks the end of the puzzle, so it should also include a statement that checks whether it has been solved. For that to happen, the pieces must be put in the following order:
1 2 3
4 5 6
7 8 empty

Therefore, the simplest way to verify this order is to check the text on each button.

				
					if(e.getSource() == b9){
   String s=b9.getText();
   if(b6.getText().equals(" ")){ b6.setText(s); b9.setText(" ");}
   else if(b8.getText().equals(" ")){ b8.setText(s); b9.setText(" ");}

   if(b1.getText().equals("1")&&b2.getText().equals("2")&&b3.getText()
           .equals("3")&&b4.getText().equals("4")&&b5.getText().equals("5")
           &&b6.getText().equals("6")&&b7.getText().equals("7")&&b8.getText()
           .equals("8")&&b9.getText().equals(" ")){
       JOptionPane.showMessageDialog(Puzzle.this,"YOU WON!\n" + "You clicked: " + counter + " times.");
   }
}

You can add a dialog box with a custom message that will pop up when the puzzle is solved. To do that, use the JOptionPane.showMessageDialog() method.

Finally, increase the counter integer and update the label’s text to the new value at the end of the if statements.

				
					counter++;
counterLabel.setText("Clicks: " + counter);

Your sliding puzzle is ready!

Conclusion

By following this tutorial, you have programmed your own sliding puzzle in Java using simple if statements and some basic functionality of the Swing library. Explore the library’s other features and think of ways to expand your project by adding, for example, a scoreboard, an option to switch between different puzzle sizes, randomization of the shuffle, etc. And don’t forget to upload it to your GitHub profile.

To check out the final code and compare it to yours, click the link below.

If you need any help or advice, leave a comment.

Lesson Topics

In this tutorial we cover the following steps:

Preparing Variables
Creating Constructor
Adding Logic to Action Listener

The post Making A Sliding Puzzle in Java: Step-by-step Guide [Project Tutorials] appeared first on SoftUni Global.

Acing The Web Developer Interview – A Guide [Dev Talks]

Nikol Ruseva — Fri, 30 Sep 2022 14:26:57 +0000

There are a lot of steps you need to take before going to an interview. Even when you complete them all, applying for your first programming job can be an intimidating process, especially when you do not have any professional experience to back up your technical knowledge. A good way to showcase your practical competence is to set up a GitHub profile with all the projects you have completed so far. In addition to assessing your coding skills, an interview serves as an opportunity for the recruiter to get to know you better and determine whether or not you would fit well into the company culture.

Although every organization has a different interviewing policy, the process usually includes the following steps:

Initial Conversation with a hiring manager;
Technical Interview with a software developer;
Coding Challenges.

There are three general groups of questions corresponding to each stage of the interview process – personal, technical, and practical. To give you a better idea of what to expect, we made a list of the most common ones and included hints on how to best answer them.

Personal Questions

In most cases, you will first speak with a hiring manager, who will ask you open-ended questions common to most job interviews, irrespective of the industry:

Tell me about yourself.
Hint: You do not have to go into too many personal details. After all, you are there on a business matter. Share what sparked your interest in programming and what you expect to gain from the role you are applying for. Explain why you are a good fit for this position, and which of your skills and abilities would benefit the company and make you stand out as a candidate.

Where do you see yourself in five (or ten) years time?
Hint: The purpose of this question is to find out if you plan in the long term and whether your goals align with the position you are applying for.

How did you hear about our company?
Hint: Be prepared with specific information about the company. Look for information in forums, blogs, on the company’s Web site, etc. Research their goals and mission and the position you are applying for and mention how they align with your future plans.

What are your greatest strengths and weaknesses?
Hint: Mention actual personal qualities that are relevant to the current position. Give context, details, and an example from your own experience or a potential situation in which you would use these strengths to get through a challenge.
When talking about your weaknesses you want to give a well-thought answer that does not sound too rehearsed. The best way is to give an example of a small shortcoming you are working on overcoming. Share what you have learnt from the process and how you will use the experience in your future work.

What are your hobbies and interests?
Hint: To dig deeper into your character, the hiring manager might ask you about your interests outside of work. Mention hobbies that you are really into, but make sure to clarify that they will not affect your dedication to the job. Sharing your interests outside of work is a genuine way to show your personality and connect with the interviewer.

Technical Questions

The interview will continue with a test of your technical knowledge in the form of some behavioral and theoretical questions. At this stage, you are likely to have a software engineer who will ask you progressively harder theoretical questions. Although the technical part of an interview is highly dependent on the job requirements, there are some general questions at the start, like:

Why did you choose this programming language, and what interests you about it?
Hint: Express your understanding of the technology you chose. Describe its features, advantages, and disadvantages, as well as the applications you can develop with it. To show that you have at least a basic understanding of other languages, you can also draw comparisons with some of them.

Describe the steps you take to develop a program, from getting the assignment or an initial idea to its final execution.
Hint: Explain the actual sequence of steps you take when developing a program. Interviewers are particularly interested in your project planning process, what coding techniques you use, and whether you follow the best practices that guarantee high-quality and readable code.

How do you debug your code and approach problems?
Hint: Since troubleshooting and debugging are crucial components of a software engineer’s work, it is important to describe how you handle issues. This will demonstrate your level of logical and algorithmic thinking and problem-solving skills.

The more in-depth questions are usually theoretical, so it is entirely up to you to be prepared beforehand. This is a sample list of technical questions for four of the most popular programming languages for web development, as well as a separate section about Object Oriented Programming (OOP).

Java

What are the main features of Java?
Why is Java platform-independent?
What is the difference between the JDK, JRE, and JVM?
How do Heap and Stack memory differ?
Explain the access modifiers used in Java.
What is the role of the garbage collector?
What is Final word in Java used for?
What is the difference between Stack and Queue?

What are the main features of C#?
How is C# compiled?
What is the difference between managed and unmanaged code?
Explain the different types of classes.
Explain the access modifiers used in C#.
What are boxing and unboxing in C#?
What are the main differences between Array and ArrayList in C#?
What is the difference between throw exception and throw clause?

Python

What are the main features of Python?
What is the difference between list and tuples?
What are the built-in data types?
What is a namespace?
What is PEP?
How is Python interpreted?
What are local and global variables?

JavaScript

What are the main features of JavaScript?
What are the data types in JS?
What is the difference between ViewState and SessionState?
What are JavaScript Cookies?
What is the difference between pop() and shift() method?
What are the disadvantages of using innerHTML?
What are the different types of errors in JavaScript?
What is the Strict Mode in JavaScript, and how can it be enabled?

OOP

What are the principles of OOP?
What are the features of OOP?
What is the Singleton Class and how to implement it?
What is inheritance?
What is the difference between a class and an object?
Explain superclass and subclass.
What is the difference between method overloading and method overriding?

These questions can be asked specifically about your projects, in case you have any uploaded on your GitHub profile. The interviewer might be interested in discussing the technologies and practices that you used to develop them.

Coding Challenges

In addition to the theoretical questions, you might be given a problem to solve. It can be a take-home assignment or a coding challenge to do live during the interview. Make sure you are familiar with the syntax of the programming language required for the position you are applying for, because a coding challenge may require you to debug a block of code or determine what its result would be. It is possible that the code is intentionally made confusing in order to gauge how you would respond when faced with a challenge or in a stressful situation. In this case, the most important things are to stay calm, fight off any anxiety, and try to find a logical and well-structured solution to the problem. Demonstrating genuine enthusiasm for coding, algorithmic thinking, and a desire to learn is sometimes more important than coming up with the right answer.

Listed below are some basic junior coding challenges and hints on how to resolve them:

Factorial
The factorial of a positive integer is the sum of the multiplication of all the integers smaller than that positive integer. For example:
4! = 4*3*2*1 = 24
5! = 5*4*3*2*1 = 120
Task: Write a program that takes a positive integer as an input and calculates the factorial of that number.
Hint: To solve this problem, use either a loop or recursion.

Palindrome
A palindrome is a sequence of characters which reads the same backward as forward. For example, “radar”, “rotator”, and even longer phrases like “pull up if I pull up”.
Task: Write a program that takes a string as an input and returns if it is a palindrome.
Hint: You can:

1. 1. Check if the input is a string;
  2. Turn it to lower or uppercase;
  3. Reverse it (using a method or a loop);
  4. Check if the reversed string is equal to the input string;
  5. Return the result.

FizzBuzz
Task: Write a program that counts the numbers from 1 to 100 on a new line.
If the number is divisible by 3, print “Fizz”.
If the number is divisible by 5, print “Buzz”.
If the number is divisible by both 3 and 5, print “FizzBuzz”.
Otherwise, print the number.
Hint: Make a loop that iterates over the numbers, and for every number, check the given conditions using the remainder operator. Be careful with the order of conditions because it can be crucial to the end result.
Fibonacci
The Fibonacci sequence is a series of integers (the Fibonacci numbers) like the following one:
0, 1, 1, 2, 3, 5, 8, 13, 21, 34
Every number after the first two (0 and 1) is the sum of the two preceding ones:
2 is the sum of the preceding two numbers – 1+1
0, 1, 1, 2, 3, 5, 8, 13, 21, 34
3 is the sum of the preceding two numbers – 1+2
And so on.
Task: Write a program that takes a positive integer N as an input and returns the N-th element of the Fibonacci sequence.
Hint: The easiest way to solve this is to use recursion, like in this example of Java code:

				
					public int fib(int n){

if (n<2) return n;

return fib(n-1) + fib(n-2);
}

Anagram
Anagrams are words with the same number of letters, but they may be arranged differently. For example, race and care, listen and silent.
Task: Write a program that receives two strings as an input and returns true if they are anagrams.
Hint: Sorting the two words and then comparing them is the quickest way, but it is not the best solution because usually sorting algorithms are time- and memory-consuming.
Another approach is to generate HashMaps of both words and then compare them. Use the HashMaps to check if they contain the same elements and if these elements occurred the same number of times in both maps.

Conclusion

Most people are anxious when going to an interview, especially if it is their first time.
Preparing in advance will always work in your favor giving you a leg up over the other candidates and the chance to make a good impression. Having an idea of the general process will help you come up with the best answers to the most common personal, technical, and practical questions when interviewing for a software engineer position.

The post Acing The Web Developer Interview – A Guide [Dev Talks] appeared first on SoftUni Global.

How To Make A Pong Game in C#: Step-by-step Guide [Project Tutorials]

Nikol Ruseva — Thu, 01 Sep 2022 14:15:30 +0000

Pong is a two-dimensional sports game that is similar to table tennis. It is one of the earliest video games, first released in 1972. Since then, it has been recreated multiple times in different programming languages. Today, you will learn how to make your own version of the game using simple programming concepts in C#.

Let’s begin.

Creating the Field

First, you need to prepare the field with an upper and a lower border and two rackets. Declare two constants of type int that define the dimensions of the field – fieldWidth and fieldLength. To visualize the upper and the lower border, use the string method Repeat on the fieldTile character variable.

				
					const int fieldLength = 50, fieldWidth = 15;
const char fieldTile = '#';
string line = string.Concat(Enumerable.Repeat(fieldTile, fieldLength));

Then create the game loop and print the borders on the console. The first line starts from coordinates 0,0 and the second one – 0, fieldWidth(15).

				
					while(true) 
{ 
    Console.SetCursorPosition(0,0);
    Console.WriteLine(line);

    Console.SetCursorPosition(0,fieldWidth);
    Console.WriteLine(line);
}

Next, make a variable for the rackets’ size – racketLength, for the character used to visualize them – racketTile, and for their positions – leftRacketHeight and rightRacketHeight.

				
					const int racketLength = fieldWidth / 4;
const char racketTile = '|';
            
int leftRacketHeight = 0;
int rightRacketHeight = 0;

To make the rackets appear on the field,add a for loop in the game loop.

				
					for(int i = 0; i < racketLength; i++)
{
    Console.SetCursorPosition(0, i + 1 + leftRacketHeight);
    Console.WriteLine(racketTile);
    Console.SetCursorPosition(fieldLength - 1, i + 1 + rightRacketHeight);
    Console.WriteLine(racketTile);
}

Player Movement

Make a loop that will continue until a key is pressed. After the loop, check which key has been pressed using a switch and update the rackets’ positions based on that. Clear the previous positions with another for loop.

				
					while(!Console.KeyAvailable)
{
    
}
           
//Check which key has been pressed
switch(Console.ReadKey().Key)
{
    case ConsoleKey.UpArrow:
    if(rightRacketHeight > 0)
    {
        rightRacketHeight--;
    }
    break;

    case ConsoleKey.DownArrow:
    if(rightRacketHeight < fieldWidth - racketLength - 1)
    {
        rightRacketHeight++;
    }
    break;

    case ConsoleKey.W:
    if(leftRacketHeight > 0)
    {
        leftRacketHeight--;
    }
    break;
    
    case ConsoleKey.S:
    if(leftRacketHeight < fieldWidth - racketLength - 1)
    {
        leftRacketHeight++;
    }
    break;
}

//Clear the rackets’ previous positions
for(int i = 1; i < fieldWidth; i++)             
{
Console.SetCursorPosition(0,i);
Console.WriteLine(" ");
Console.SetCursorPosition(fieldLength - 1,i);
Console.WriteLine(" ");
}

Adding a Ball

What you need to know about the ball is its coordinates, the character representation on the field, and its direction.

				
					int ballX = fieldLength / 2;
    int ballY = fieldWidth / 2;
    const char ballTile = 'O';

    bool isBallGoingDown = true;
    bool isBallGoingRight = true;

Let’s go back to the empty while loop that waits for a key to be pressed. It has to update the ball’s position.

				
					while(!Console.KeyAvailable)
{
    Console.SetCursorPosition(ballX, ballY);
    Console.WriteLine(ballTile);
    Thread.Sleep(100); //Adds a timer so that the players have time to react
    
    Console.SetCursorPosition(ballX, ballY);
    Console.WriteLine(" "); //Clears the previous position of the ball
    
    //Update position of the ball
    if(isBallGoingDown)
    {
    ballY++;
    } else
    {
    ballY--;
    }
    if(isBallGoingRight)
    {
    ballX++;
    } else
    {
    ballX--;
    }
}

However, this code does not limit the movement of the ball to the borders of the field. You need to add more conditions to the same while loop and declare variables to store the players’ points.

				
					int leftPlayerPoints = 0;
int rightPlayerPoints = 0;

				
					if(ballY == 1 || ballY == fieldWidth - 1)
{
isBallGoingDown = !isBallGoingDown; //Change direction
}

if(ballX == 1)
{
    //Left racket hits the ball and it bounces
   if(ballY >= leftRacketHeight + 1 && ballY <= leftRacketHeight + racketLength) 
   {
       isBallGoingRight = !isBallGoingRight;
   }
   else //Ball goes out of the field; Right player scores
   {
      rightPlayerPoints++;
      ballY = fieldWidth / 2;
      ballX = fieldLength / 2;
      Console.SetCursorPosition(scoreboardX, scoreboardY);
      Console.WriteLine($"{leftPlayerPoints} | {rightPlayerPoints}");
      if(rightPlayerPoints == 10)
      {
          goto outer;
      }
   }
}

if(ballX == fieldLength - 2)
{
    //Right racket hits the ball and it bounces
   if(ballY >= rightRacketHeight + 1 && ballY <= rightRacketHeight + racketLength) 
   {
       isBallGoingRight = !isBallGoingRight;
   }
   else //Ball goes out of the field; Left player scores
   {
      leftPlayerPoints++;
      ballY = fieldWidth / 2;
      ballX = fieldLength / 2;
      Console.SetCursorPosition(scoreboardX, scoreboardY);
      Console.WriteLine($"{leftPlayerPoints} | {rightPlayerPoints}");
      if(leftPlayerPoints == 10)
      {
          goto outer;
      }
       
   }
}

Scoreboard Visualization

To add a scoreboard, you need variables that store its position.

				
					int scoreboardX = fieldLength / 2 -2;
int scoreboardY = fieldWidth + 1;

The scoreboard is printed on the console every time a player increases their score. Let’s say the game ends when one of the players reaches 10 points. You need to break out of the game loop with the goto command.

				
					//Left Player
leftPlayerPoints++;
ballY = fieldWidth / 2;
ballX = fieldLength / 2;
Console.SetCursorPosition(scoreboardX, scoreboardY);
Console.WriteLine("${leftPlayerPoints} | {rightPlayerPoints}")

if(leftPlayerPoints == 10)
{
      goto outer;
}

//Right Player
rightPlayerPoints++;
ballY = fieldWidth / 2;
ballX = fieldLength / 2;
Console.SetCursorPosition(scoreboardX, scoreboardY);
Console.WriteLine("${leftPlayerPoints} | {rightPlayerPoints}")
if(rightPlayerPoints == 10)
{
      goto outer;
}

Outside of the game loop put a marker, clear the console and reset the cursor. Check who the winner is and print the appropriate message.

				
					outer:;
        Console.Clear();
        Console.SetCursorPosition(0,0);
        
        if(rightPlayerPoints == 10)
        {
        Console.WriteLine("Right player won!");
        } 
        else 
        {
        Console.WriteLine("Left player won!");
        }

If you’ve followed all the steps your project should be finished and working now. You can always adjust the values of the variables. For example, you can make the field bigger or smaller or increase the speed of the ball to make the game more challenging.

To check out the final code and compare it to yours click the link below.

Lesson Topics

In this tutorial we cover the following steps:

Creating a Field
Implementing Player Movement
Adding a Ball
Scoreboard Visualization

The post How To Make A Pong Game in C#: Step-by-step Guide [Project Tutorials] appeared first on SoftUni Global.

All The New JavaScript Features Coming Up with ECMAScript 2022

Nikol Ruseva — Thu, 25 Aug 2022 08:48:25 +0000

The thirteenth edition of ECMAScript Language specification was officially approved on June 22, 2022. With its release, new features were added to the JavaScript language:

Method .at();
Object.hasOwn();
RegExp: match indices(‘d’ flag);
Error: .cause;
New members of Classes;
Private Slot Checks;
Top-level Await.

Now let’s find out more about each new feature.

Method .at()

The method .at() is supported by indexable values like Array, String, or TypedArray. It takes a positive or negative integer value and returns the element at the given index.

In this example, there is an array with three elements, which means that its length is 3. The first element is at index 0 and the last is at index array length -1 (in this example at index 2).

To check what the element at a certain index is, use the bracket operator (animals[0]). For indexes out of the range, the program returns “Undefined“.

				
					let animals = ["Cat", "Dog", "Cow"];

console.log(animals[0]);
console.log(animals[animals.length - 1]) 
console.log(animals[animals.length])

//Cat
//Cow
//undefined

The new feature works exactly like the bracket operator but it allows negative indexing of elements. The last element is accessed easily by replacing animals[animals.length – 1] with animals.at(-1)

				
					let animals = ["Cat", "Dog", "Cow"];

console.log(animals.at(0));
console.log(animals.at(-1));

//Cat
//Cow

				
					//Example with a String
let string = "Hello, World!";

console.log(string.at(-1));

//!

Object: .hasOwn()

Object.hasOwn() returns true if the specified object has the indicated property as its own property. If the property is inherited or does not exist, the method returns false.

Object.hasOwn() is intended as a replacement of Object.hasOwnProperty()

Before:

				
					let user = {
name: 'John Doe',
role: 'Admin'
};

console.log(user.hasOwnProperty('role'));
console.log(user.hasOwnProperty('age'));

//true
//false

After:

				
					let user = {
name: 'John Doe',
role: 'Admin'
};

console.log(Object.hasOwn(user, 'role'));
console.log(Object.hasOwn(user, 'age'));

//true
//false

RegExp: match indices(‘d’ flag)

ECMA Script 2022 introduced a new /d flag for Regular Expressions. It provides some additional information about the start and indices position end of each match in the input string.

Without the new feature the following information has been provided:

				
					let string = 'hello1helloAll';
let regEx = /hello(\w)/g;
let result = [...string.matchAll(regEx)];
console.log(result[0]);
//[ 'hello1', '1', index: 0, input: 'hello1helloAll', groups: undefined ]

let string = 'hello1helloAll';
let regEx = /hello(\w)/g;
let result = [...string.matchAll(regEx)];
let regEx2 = /hello(\w)/dg;
let result2 = [...string.matchAll(regEx2)];
console.log(result2[0]);

With the /d flag there is an array with the indices of the different elements that match the regex:

				
					[
  'hello1',
  '1',
  index: 0,
  input: 'hello1helloAll',
  groups: undefined,
  indices: [ [ 0, 6 ], [ 5, 6 ], groups: undefined ]
]

Error: .cause

With the Error .cause, you can add more essential information to the errors you receive. You should specify the error options as a second parameter, and with the “cause“ key you can pass the error that you want to chain.

Before:

				
					const weatherNow = async (city) => {
    try {
      const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=67a20d293903cbcf9aab38633b30fbf9`);
      const info = await response.json();
      const description = info.weather[0].description;
      return description;
    } catch (error) {
throw new Error('Something went wrong')
    }
  }
 
try {
    await weatherNow('');           //Empty string
} catch(error) {
    console.log(error);
}

//Error: Something went wrong
    //at weatherNow (<anonymous>:8:7)
    //at async <anonymous>:13:5

After:

				
					const weatherNow = async (city) => {
    try {
      const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=67a20d293903cbcf9aab38633b30fbf9`);
      const info = await response.json();
      const description = info.weather[0].description;
      return description;
    } catch (error) {
throw new Error('Something went wrong', { cause: error })
    }
  }
 
try {
    await weatherNow('');        //Empty String
} catch(error) {
    console.log(error.cause);
}

//TypeError: Cannot read properties of undefined (reading '0')
    //at weatherNow (<anonymous>:5:39)
    //at async <anonymous>:13:5

New Members of Classes

Static class fields and methods are not used on instances of a class. Instead, they can be called on the class itself and are declared using the static keyword. Static methods are often utility functions and helpers, whereas static properties are useful for caches, fixed-configuration, or any other data we do not need to be replicated across instances.

Before:

				
					class User {
    firstName = 'Jon';
};
  
console.log(User.firstName); 
  
//undefined

After:

				
					class User {
    static firstName = 'Jon';
};

console.log(User.firstName); 
  
//Jon

Private Slot Checks

EcmaScript 2022 added new features such as private instance fields, methods, and accessors. To initialize a private method or a field before you had to add an underscore at the beginning of its name, but this did not guarantee that the method/field will be private. Now, you just need to add a # at the beginning of the method name to have it declared as private.

It looks like this:

				
					class User {
    firstName = 'John';
    lastName = 'Doe';
    #role = 'Admin';
}
 
const adminUser = new User();
console.log(adminUser.role); 
  
//undefined

				
					class User {
    firstName = 'John';
    lastName = 'Doe';
    role = 'Admin';
    #sayHi() {
        return this.firstName + ' ' + this.lastName + ' with role ' + this.role + ' says Hi!';
    }
}
 
  const adminUser = new User();
  console.log(adminUser.sayHi());      
  
//TypeError: adminUser.sayHi is not a function

Top-level Await

Before ECMAScript 2022 await could only be used in the scope of asynchronous functions. Now the await keyword can be used outside of an async function within a JavaScript module. This means that a module waits for its child modules that use await to execute before it runs itself.

				
					const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=london&appid=67a20d293903cbcf9aab38633b30fbf9`);
const info = await response.json();
const description = info.weather[0].description;
console.log(description);

We will receive an error:

				
					SyntaxError: await is only validin async functions and the top-level bodies of modules

With ECMAScript 2022 it works fine and you will see the following:

				
					//clear sky

Conclusion

Nowadays when technology is rapidly evolving being up to date is an important part of working as a software developer.

The EcmaScript specification for 2022 contains some significant changes that aim to provide convenience and efficiency in programming by allowing you to write more expressive and concise code. After reading this post, you are now familiar with all of the new features and it is up to you to choose which of them to use into your JavaScript programming.

The post All The New JavaScript Features Coming Up with ECMAScript 2022 appeared first on SoftUni Global.

Java or Kotlin – What Is Better for Android Development?

Nikol Ruseva — Fri, 29 Jul 2022 14:24:52 +0000

When it comes to Android development, two of the most popular programming languages are Java and Kotlin. While Kotlin, which was released in 2011, is still being developed, Java has been around since 1995 and is open source, making it one of the most widely used languages. However, Kotlin has been taking off since 2017 when Google included it as an official Android development language along with Java.

If you’re new to Android development, the question of whether to use Kotlin or Java will probably not be on your mind at first. You will most likely opt to use Java until you become more familiar with the platform and decide what language would better suit your needs. But once you start becoming more confident with your Android development skills, choosing between Kotlin and Java will be a bit more difficult as both languages have some advantages and drawbacks, which we will examine in this article.

Java

Java is a versatile and powerful programming language that can be used for a wide range of purposes. It is platform-independent and object-oriented. Platform independency is possible since the language uses byte-code and once compiled, the code can be run on any machine irrespective of its operating system. Also, using the principles of object-oriented programming increases the flexibility and reusability of the code.

Java does not use explicit pointers. This means that developers can not access the memory directly from the code. Also, programs are executed inside the Java Virtual Machine (JVM), providing additional security to the code. If an unauthorized method tries to access a private variable, the program fails to compile and prevents the system from a crash.

Java is widely used and has a large community of developers who are continuously creating new libraries and tools to make development easier. Moreover, Android Studio, the official IDE for Android development, is based on JetBrains’ IntelliJ IDEA, which also supports Java development.

Kotlin

Kotlin is a new language developed by JetBrains. It is a statically typed programming language. Just like Java, it uses byte-code which can be executed on the JVM. It can also be compiled into JavaScript. It has intuitive, easy-to-learn syntax.

Kotlin is compatible with Java and can be used alongside existing Java code. In fact, its purpose is to interoperate with code written in Java and improve it while using Java libraries and frameworks. This leads to reducing the boilerplate code, making it simpler, easier to read and understand, and safer in terms of potential bugs. Moreover, you can write Gradle code in Kotlin, allowing you to build iOS applications.

Kotlin is concise and expressive, meaning that you can write less code to accomplish the same task. This can lead to fewer errors and a faster development process overall. An example of reducing the boilerplate code is using the Data Classes.
You can see a side-by-side comparison of code written in Java and in Kotlin on the graphic below.

Kotlin has null safety built-in, which eliminates the risk of NullPointerException (NPE) errors since it fails to compile whenever an NPE may be thrown. It also supports higher-order functions, lambda expressions, and operator overloading, making the language a combination of functional and procedural programming.

Although it is a new language, it is gaining a lot of popularity in the development community. However, there are still some drawbacks to using Kotlin for Android development. The language is not yet as widely adopted as Java. This means that the learning resources are limited. Also, the community of Kotlin users is smaller so finding help and support, or experienced developers for your business may be more difficult.

Conclusion

Kotlin and Java are both great options for Android development. They each have their own strengths and weaknesses that should be considered. Kotlin is a younger language, but it has many features that make it a great choice for developers. However, the concepts of Android SDK are based on Java so learning the basics might be useful. Moreover, it is still the most popular language for Android development and additional knowledge would definitely will be an advantage to you.

The answer to the question “Java or Kotlin?” depends on your preferences and what you are looking for in a programming language. One thing is certain – learning both will benefit you by expanding your tech stack and improving your coding abilities.

The post Java or Kotlin – What Is Better for Android Development? appeared first on SoftUni Global.

An Insider’s Perspective on the IT Industry

Aleksandar Peev — Thu, 14 Apr 2022 15:00:00 +0000

Meet William Abboud. He is a senior software engineer that decided to talk about his path as a developer so far. We asked William some questions that might help you start your career as a programmer.

How did you get into programming?

As a student, I liked computer networking. In 12th grade, I first had to write programs with C++ and Pascal. The materials were not enough, and I watched a few youtube video tutorials and got hooked. After I graduated, I moved to the United Kingdom and started learning computer science there.

Which language to choose if you are a beginner?

The thing is, after years of programming development, it doesn’t matter. You need to learn Algorithms and Data Structures, and from there, it will be easy. The real question is, what do you want to do with programming? It depends on what you want to do. But still, I will prefer C# and Python.

Would you recommend JavaScript for beginners?

Yes. With JS, you can quickly see results on your screen. You usually program web apps, and you can see your results almost immediately. In C# or Java, your first tasks are mathematical equations, but in JS, the problems are more interesting. For example, you will have to move a box from the left to the right part of your screen. JavaScript is easy to start with, but it is hard to master. There is a great community and good tools. You can debug with chrome and so on. There are a lot of solved problems on the web.

What is the difference between a front and back-end developer?

A front-end developer creates a user interface that the user interacts with. Everything that the user clicks and see is what a front-end dev does. The back-end developer works with data and ensures that the users see the correct data. There is a lot behind the scene logic. You cannot make a site without the two sides.

What are the perks of a programmer's job?

One of the main perks is flexibility. You can work remotely the job from another country. Most companies are ok with you not going to the physical location. The job pays well. It can be a very creative and satisfying job.

Is it true that for each new project, you have to learn something?

Yeah. You have to constantly be on your feet and search for new techniques and tools. It’s a field where things can change very fast in a matter of a year. You always need to learn. You have to be wary of what is trending and the best tools to solve programming problems.

Will Machine Learning replace Software Engineering?

Partly yes. It’s a great tool, but I don’t think it will happen fully. In the next 10-15 years, I don’t believe that it will happen. It will make my job easier but not take my job.

What would you say recruiters look for when hiring?

They always look for experienced people. They don’t want to hire inexperienced, but some companies have to hire junior developers. There is a deficit for junior developers. For me, the most necessary quality is passion and motivation.

How can you best prepare for a job interview?

Every company has a different interview process. What I would say, research a company and the position you apply for. Ask the recruiters questions. Search for typical interview questions on the web, and I believe that you will be ready for the interview.

Do you want to be like him? Become a programmer with comprehensive, up-to-date online classes led by an expert. Study in your own time and at your own pace. Go back any time and rewatch the lessons, if needed. Click the button below, and start your journey today!

Video Topics

In the video, William talks about the following topics:

How did you get into programming?
Which language to choose if you are a beginner?
Would you recommend JavaScript for beginners?
What is the difference between a front and back-end developer?
What are the perks of a programmer’s job?
Is it true that for each new project, you have to learn something?
Will Machine Learning replace Software Engineering?
What would you say recruiters look for when hiring?
How can you best prepare for a job interview?

The post An Insider’s Perspective on the IT Industry appeared first on SoftUni Global.

An Interview with One of Our Graduates – Ani Sarambelieva

Aleksandar Peev — Thu, 07 Apr 2022 15:00:00 +0000

Meet Ani Sarambelieva. She is a software engineer that was brave enough to talk about her path as a developer so far. We asked Ani some questions that might help you start your career as a programmer.

How and when did you start programming?

It was never my dream job. It all started in 11th grade when I went to a programming presentation with my boyfriend. I was wondering where to study from, and the hardest part is to find out which is the best place. It was really interesting, but I didn’t know where to study. The hardest part was finding out, which is the best place to study from.

Why did you choose SoftUni?

I was very insecure and had trouble with the basics. SoftUni starts from the basics, and the community is friendly with novices. There were a lot of colleagues that helped me with my exercises. One of the things that motivated me was the fact that there were a lot of people that found their dream job here.

What is the thing you love most about being a software engineer?

It will sound strange but for me, it was the ability to fall easily into the flow of work. It is the state of, being one with your surrounding. Time passes and you don’t even notice it. For example, at 9 am I start working, and I sometimes forget lunchtime. The work is interesting, and challenging and can bring the best out of you. It is creative and you can add your ideas and logic, for the specific task.

Do you remember your first working experience as a programmer?

I was nervous and anxious. There was that feeling of not being ready for the job. My first tasks were not as hard as I thought that they would be and managed to do them. My work colleagues give me hints and guidelines that helped me later on. As time goes, my tasks become harder, and this is how I developed. The one thing that helped me was asking a lot of questions and communicating with the team.

What is the most important thing you learn in SoftUni?

Consistency. It is one of the most important things. Having regular homeworks, exercise sessions, and having to write code every day. Studying is a never-ending process, even after graduating and starting a job.

Do you have advice for our students?

Never give up when you have a bad day! When you start learning something new, there is the void that you are missing some parts. By studying consistently, you will succeed. You learn by doing, and it will take some time. Give yourself time and be patient.

Where do you recommend for a beginner to start their career path?

Without a doubt, it is at SoftUni. I wish good luck to all of you.

Do you want to be like her? Become a programmer with comprehensive, up-to-date online classes led by an expert. Study in your own time and at your own pace. Go back any time and rewatch the lessons, if needed. Click the button below, and start your journey today!

Video Topics

In the video, Ani talks about the following topics:

Brief Introduction
How and when did you start programming?
Why did you choose SoftUni?
What is the thing you love most about being a software engineer?
Do you remember your first working experience as a programmer?
What is the most important thing you learn in SoftUni?
Do you have advice for our students?
Where should your career begin?

The post An Interview with One of Our Graduates – Ani Sarambelieva appeared first on SoftUni Global.

Starting Your First Job in The Software Industry

Aleksandar Peev — Thu, 17 Mar 2022 06:00:00 +0000

In this blog post, we will talk about starting your first job in the software industry. There are a lot of steps you need to do before you go to an interview and get hired. You need to study hard and educate yourself, to learn concepts like coding, algorithmic thinking, software development, and different frameworks. Even if you are highly skilled, you can lose your opportunity because someone sent a better job application. We will look at all the steps required for a successful start.

Video: How to Start Your First Tech Job? Tips and Tricks from Svetlin Nakov

In this video lesson, we cover the following topics about preparing and starting your first developer job:

Steps to Start a Developer Job
Defining Your Career Goals
Learn the Software Engineering Profession
Prove Your Experience
Your GitHub Portfolio: Tips and Tricks
Find Junior Tech Job Positions
Prepare to Apply for a Dev Job
The Job Application
The Job Interview

How Can You Learn Software Development?

You can learn from many resources such as tutorials, books, video courses, and code camps. Nevertheless your studying material, you need to do your hands-on exercises and projects. You learn nothing with just watching.

It takes from 2 to 3 years if you are learning in parallel with your daily job, and it may take 6 to 12 months if you study 12 hours per day. From 2000 to 3000 hours of practice is enough for starting a junior dev job.

How Do You Prove Your Developer Experience without a Previous Job?

For starting any tech job, you will be required to have experience. Employers will typically ask for 1-2 years of experience for a junior developer. You can build your portfolio on GitHub. You can add your projects there and write good documentation about them. If you have no experience with GitHub, you can read our blog post about it here.

These are a few sample developer portfolios of our students from SoftUni, who have learned programming, created several practical projects in GitHub to prove their skills and started their first dev job in the software industry:

This is how you should document and showcase your portfolio projects (description + tech stack + screenshots + live demo):

Where Can You Find Tech Job Positions?

It is hard to find a junior job that will match your skills. On every job site, you can search:

your skills + “junior” or “intern”

In addition, you can ask your friends, colleague, and social networks. Now is the time to create a good LinkedIn profile. You can add Education, projects, and certificates to your bio and ask for endorsements. LinkedIn allows easy search for jobs.

How Can You Prepare to Apply for a Job?

If you are preparing to apply, your skills need to match the market needs. First, analyze the job market for junior positions. Seek what skills employers require and what you need to learn. Analyze each specific job position you want to apply for.

What Should My Job Application contain?

For a strong job application regarding a tech position your application should consist of:

Email
Portfolio of projects
Resume (CV)
Cover letter (CL)

You should carefully apply for a specific job. The letter should be individual for a specific position. You shouldn’t copy/paste your cover letter, or application message. You need to slightly adjust your CV to match the target position. You need to always write your cover letter from scratch for each position.

Will They Hire Me If I'm Invited to a Job Interview?

You should never rely on the job interview. Only 5% of the candidates are invited to an interview. If you don’t want to be from the 95%, you need to focus on the preparation. Study hard and build an impressive portfolio. Select your job position and apply carefully.

In case you are invited to an interview, you need to be prepared:

Research the company and learn as much as possible
Research the technologies from the job advertisement
Research typical questions for a job interview.

No matter how your applications go, you should not give up. Take note of each failure and prepare for your next interview. If you follow all our recommendations, in the end, you will most likely end up with a good starting job.

Lesson Slides

The post Starting Your First Job in The Software Industry appeared first on SoftUni Global.

URL Shortener Project – Adding Views, Layout + CSS Styling [Part 2]

Aleksandar Peev — Fri, 18 Feb 2022 06:00:00 +0000

In the second part of the tutorial, we will create the user interface for our web application. This will include all the views, CSS, and the layout page. If you haven’t read our previous blog post, where we created our project, you can do it from here.

We start with building the layout page. It allows us to define a common site template that can be inherited in multiple views to provide a consistent look and feel in multiple pages of an application. The layout view eliminates duplicate coding and enhances development speed and easy maintenance.

Inside the views folder, we create a layout.pug.

layout.pug

				
					<!DOCTYPE html>
html(lang='en')
  head
    block head
    link(rel='stylesheet', href='/styles.css')
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  body
    header
      a(href='/') Home
      span  | 
      a(href='/urls') Short URLs
      span  | 
      a(href='/add-url') Add URL

    main
      block content
    
    footer
      div © 2022 - URL Shortener

In the head section, we import the .css file that will include our styling. We will create it later inside the public folder.
For the body part, we have a header with the navigation of our application. Each anchor tag will lead us to another route.
In the main block is the block content that every time will re-render differently depending on our route.
We will create a styles.css in our public folder that we made in our previous part.

styles.css

				
					body {
  font-family: Arial, Helvetica, sans-serif;
}

header, footer {
  background:rgb(212, 233, 164);
  padding: 8px;
  border-radius: 3px; 
}

footer {
  margin-top: 15px;
}

main {
  margin-left: 10px;
}


table {
  width: 100%;
  border-collapse: collapse;
  background-color: #f5fff5;
}

table th, table td {
  border: 1px solid #ddd;
}

table th {
  padding: 12px 8px;
  text-align: left;
  background-color: rgb(107, 182, 109);
  color: white;    
}

table td {
  padding: 8px;
  overflow-wrap: anywhere;
}

table tr:nth-child(even) {
  background-color: #dff0de;
}

table tr:hover {
  background-color: rgb(198, 207, 180);
}


form table {
  width: 100%;
  max-width: 600px;
}

form table td:nth-child(1) {
  width: 10%;
  white-space: nowrap;
}

main form input {
  width: 100%;
  min-width: 100px;
  box-sizing: border-box;
}

If we want to add more pages, we need to set up the routes in our controller. As we did in the previous part, we create different functions for each route. In the mvc-controller.js, we will expand the functionality with new functions.

mvc-controller.js

				
					function setup(app, data) {
  app.get('/', function(req, res) {
        //  Same as before
  });

  app.get('/urls', function(req, res) {
    let model = { urls: data.urls };
    res.render('urls', model);
  });

  app.get('/add-url', function(req, res) {
    let model = { url: "", code: "newCode" };
    res.render('add-url', model);
  });

  app.post('/add-url', function(req, res) {
    res.redirect('/urls');
  });

}

function date2text(inputDate) {
  let date = inputDate.toISOString().split('.')[0];
  date = date.replace('T', ' ');
  return date;
}

module.exports = { setup };

With the first function, we will get the view with all the URLs. It will be the same as the home view functionality.
The second function will load the view for the create page. We will access it with the “/add-url” route.
The next third function will have the same route as the previous but with a different type of request. In the app.get(‘/add-url’, … ) we request the view, but with app.post(‘/add-url, …) we will send data to the server. They are on the same route, but we send different types of requests.
We will add a helping function data2text() that will be outside of the setup() function. It will help us later.
What we need to do next is to create .pug view. First, we will add the urls.pug inside our views folder. We add the following code inside it:

urls.pug

				
					extends layout.pug

block append head
  title='Short URLs'

block content
  h1 Short URLs
  table
    thead
      tr
        th Original URL
        th Short URL
        th Date Created
        th Visits
    tbody
      each url in urls
        tr
          td 
            a(href=`${url.url}` target="_blank") #{url.url}
          td
            a(href=`${url.shortUrl}` target="_blank") #{url.shortUrl}
          td #{url.dateCreated}
          td #{url.visits}

In this view, we will have an HTML table featuring all the records that we request from the server. They are bound to the urls variable. To access each element separately we need to iterate over the collection with a for-each loop. Each row will be with data for a specific record, and every cell with a value for a specific property of the object.

If we start the project and go to the ‘/urls‘ route, this will visualize:

In next part we will add the add-url.pug view. We add it inside the views folder.

add-url.pug

				
					extends layout.pug

block append head
  title='Add Short URL'

block content
  h1 Add Short URL
  form(method='POST' action='/add-url')
    table
      tr
        td
          label(for='url') URL: 
        td
          input#url(type='text', name='url', value=`${url}`)
      tr
        td
          label(for='code') Short Code: 
        td
          input#code(type='text', name='code', value=`${code}`)
      tr
        td(colspan="2")
          button(type='submit') Create

In this view, we add a form that is with a POST method, and an action points to ‘/add-url‘. To explain what this does, after pressing the submit button, the server will request the app.post(‘/add-url’, …) function that we have typed inside our mvc-controller. In the next parts, we will add the functionality that saves the record inside the database.
Inside the form, we have two input fields. Inside each field, the user will type the values for the URL he needs to create.
In the end, it is important for the button to be of type submit. This will submit the form to the server.

If you have done everything correctly, going to the ‘/add-urls‘ route will display you this page:

After completing all the steps, your project will have a user interface that supports different types of screens. If we go to our two new routes ‘/urls‘, and ‘/add-urls‘ you will access the two new pages that we have added. On the ‘/add-urls‘ route, if you submit the form with the required data, you will send a POST request to the server. In the next parts, we will be able to save this information on the server and display it inside the ‘/urls‘ route.

Lesson Topics

In this tutorial we cover the following topics:

Building the Layout Template in Pug
Adding CSS Styles
Implementing the “View Short URLs Table”
Styling the Table
Implementing the “Add URL” Form
CSS Styling for Small Screens

Lesson Slides

The post URL Shortener Project – Adding Views, Layout + CSS Styling [Part 2] appeared first on SoftUni Global.

Software Engineering Overview [Dev Concepts #30]

Aleksandar Peev — Thu, 10 Feb 2022 06:00:00 +0000

For this article, we will make an overview of software engineering concepts like software development lifecycle, software quality assurance, unit testing, source control system, and project trackers. Each concept is essential for your development as a software engineer. You should have a basic knowledge of each area because they are daily used in software companies. Even if the technologies differ, the concept is still the same but with a different GUI and software.

The Software Development Lifecycle is a process used by the software industry to design, develop, and test high-quality software. It aims to produce high-quality software that meets or exceeds customer expectations reaches completion within times and cost estimates. The benefits of using it only exist if the plan is followed faithfully. Read our blog post about them here.

Software Quality Assurance is a term that covers all aspects of guaranteeing a high-quality software product. It includes creating processes for each stage of development to reduce bugs and flaws during the build. Companies need it to measure the quality of the software. At the heart of the QA process is software testing. Read more about them in our separate blog post here.

Unit testing is an important concept and practice in software development. As a term, unit tests are pieces of code that test specific functionality in a certain software component. Unit testing frameworks simplify, structure, and organize the unit testing process. It executes the test and generates reports. Examples of unit testing frameworks are JUnit for Java and Mocha for JavaScript. Read more here.

Git is the most popular source control system in modern software development. It is a powerful tool for version control and team collaboration at the source code level. In our article, we work with Git and GitHub by showing a few examples. We clone the repository, edit a local file, commit the local changes, and then publish the commit. You can read it here.

Project trackers, as a term, are a simple tool that manages the project schedule, plan, assign, arrange, track and visualize project tasks. They are a great way to make your tasks come to life and visualize your upcoming week or month’s tasks. You can read more about them in our blog post here.

All of these concepts are important for your future development as a software engineer. Each topic can be separated into a course and studied in detail. Even if you are indifferent to all the concepts, you should know at least the basics about each topic. In almost every interview for a software developer, you will be asked if you are familiar with these areas. Each software company uses different technologies, but the concepts are the same.

Lesson Topics

In this tutorial we cover the following topics:

Software Development LifeCycle
Software Quality Assurance (QA)
Unit Testing and Testing Frameworks
Overview of Git and GitHub
Project Trackers, Kanban Boards, and Trello

Lesson Slides

The post Software Engineering Overview [Dev Concepts #30] appeared first on SoftUni Global.

URL Shortener Project – Creating the App Structure [Part 1]

Aleksandar Peev — Thu, 10 Feb 2022 06:00:00 +0000

In this tutorial, we will create our URL Shortener using JavaScript. We will be using Expres.JS for creating the server-side web application and Pug as a template engine. This tutorial will be split into several parts, and in each part, we will further develop our project. In the end, we will have a fully working Multi Page Application (MPA).

After we initialize our project, we need to split our code logic into different folders. We create folders for:

data
controllers
views
public

In our main directory we have an index.js file that is automatically generated by repl.it. You don’t need to install manually any libraries because they will be added automatically when you start the project.

First, in our index.js we need to add the following code:

index.js

				
					const express = require('express');
const app = express();
app.use(express.static('public'))
app.set('view engine', 'pug');

const data = require("./data/app-data");
data.seedSampleData();

const mvcController = require(
  "./controllers/mvc-controller");
mvcController.setup(app, data);

let port = process.argv[2];
if (!port) port = process.env['PORT'];
if (!port) port = 8080;

app.listen(port, () => {
  console.log(`App started. Listening at http://localhost:${port}`);
})
.on('error', function(err) {
  if (err.errno === 'EADDRINUSE')
    console.error(`Port ${port} busy.`);
  else 
    throw err;
});

In the first row, we import the ExpressJS node module. Then we bind it to a constant and use it to make static our public folder. Doing this will allow us to use the public folder from any part of our application.
We will also set our view engine to pug. This will render all .pug files we set as views.
We define constant named data and invoke the function. seedSampleData() inside it. We will create them later. Every time our project is started this function will be initialized.
Our next task is to tell the index.js that our MVC-controller exists and set up it.
We set our virtual port for repl.it to 8080, and tell the program to listen to this port.
If there is an error, it will be automatically displayed on the server’s console.

app-data.js

				
					let urls = [];

function seedSampleData() {
  urls.length = 0; // cleanup
  urls.push({
    url: "https://softuni.org",
    shortCode: "su",
    dateCreated: new Date("2022-02-19T16:41:56"),
    visits: 86
  });
  urls.push({
    url: "https://nakov.com",
    shortCode: "nak", 
    dateCreated: new Date("2022-02-17T14:41:33"), 
    visits: 160
  });
}

module.exports = {
  urls,
  seedSampleData
};

In our data folder we create an app-data.js file. In it is we create our seed of data. We add an empty array that we fill with the seedSampleData() function.
In our function we have 2 different objects {} that we push into the urls array.
This is a temporary solution and in our next parts will be changed with a real database.

mvc-controller.js

				
					function setup(app, data) {
  app.get('/', function(req, res) {
    let visitors = 0;
    for (const url of data.urls) {
      console.log(url);
      visitors += url.visits;
    }
    let model = { urls: data.urls, visitors };
    res.render('home', model);
  });
}

module.exports = { setup };

Inside our controller folder we create the mvc-controller.js file. Inside it, we add the function setup() that receives the app and data.
When our server recieves a GET request with a URL that equals ‘/’, it will invoke the following function.
We iterate over the collection of data and bind it into the model variable.
Then, we render the following view with the data attached to it.
After we are done, we export the function so that the index.js can run it correctly.

home.pug

				
					h1 URL Shortener
ul
  li Short URLs: <b>#{urls.length}</b>
  li URL visitors: <b>#{visitors}</b>

Finally, we create our home.pug view inside the views folder. That is the html page that will load when the user goes to the ‘/’ URL, that we defined in our controller.
We have an unordered list( ul ), in which we have two rows( li ). The first is for the count of our URLs, and the next is the total sum of all visitors summed from all 2 records.
If we want to print the data bound to the variable visitors, we must add hashtag # and braces { } around it so that our compiler knows that this isn’t a regular HTML text.

After completing all the steps you will have a simple working Multi Page Application. If you start your project, you will see that everything that we have done is working correctly. We are using the MVC architecture, and we have split the project into different folders and functions for better understanding. This way you can clearly see where each part is located. Keep up with our parts and see how our project grows more.

Lesson Topics

In this tutorial we cover the following topics:

URL Shortener: App Walkthrough
Project Structure
Creating the App Structure

Remember that coding is a skill, which should be practiced. To learn to code, you should write code every day for a long time. Watching tutorials is not enough. You should code!

We would love to hear from you, so leave a comment below saying what topics you would like to see next.

Register now and take your free resources right away! Become a member of the SoftUni Global Community and communicate with other students and mentors and get help for FREE.

After registering, you will get access to thе project code.

Lesson Slides

The post URL Shortener Project – Creating the App Structure [Part 1] appeared first on SoftUni Global.

How to Make Our Own Flappy Bird in Unity [Project Tutorials]

Aleksandar Peev — Tue, 08 Feb 2022 04:58:00 +0000

In this demo, we will create our own Flappy Bird game using Unity and C#.

Unity is, essentially, a well-rounded game engine that truly does simplify game development. While there may be better engines to choose from, learning Unity will only help you grow as a game developer.

For this project, we are using the 2020.3 LTS table release. To create this project you will need to have Unity and Unity Hub installed. You can download them from here. To get the completed project, you can download it from the link below. (Link is available after successful registration)

First, we open the Unity Hub and Create a 2D Project.
We create a Sprites folder in the game directory, and we import all the needed images for the game.
After we import the needed images, you can see that you have more than one bird. We slice it save it in a new folder called Animations.
We set it on the scheme, we can start the application and see if the bird will fall.
What we need to do next is create a script for our bird. We create a Bird.cs file in the Assets/Scripts folder. We create methods for the Bird to fly and set boundaries so it cannot fly outside our screen.

				
					using System;
using UnityEngine;

public class Bird : MonoBehaviour
{
    [SerializeField] private Rigidbody2D _rigidbody;
    [SerializeField] private float _force;
    [SerializeField] private float _yBound;

    private void Update()
    {
        if (Input.GetMouseButtonDown(0) && _rigidbody.position.y < _yBound)
        {
            Flap();
        }
    }

    private void Flap()
    {
        _rigidbody.velocity = Vector2.zero;
        _rigidbody.AddForce(Vector2.up * _force);
    }
}

Now we need to create pipes. We create Upper and Lower pipes. If the bird hits them the game will be over.
After we are done we create a MovingObject infinity runner. We need to constantly move the objects to the left. The speed increased by one, for every second that passes. We set boundaries for when the object is destroyed. We attach the script to the pipe. We can check if our scripts work.

				
					using UnityEngine;

public class MovingObject : MonoBehaviour
{
    [SerializeField] private float _speed;
    [SerializeField] private float _xBound;

    private void Update()
    {
        this.transform.position -= Vector3.right * _speed * Time.deltaTime;

        if (this.transform.position.x < _xBound)
        {
            Destroy(this.gameObject);
        }
    }
}

We can move to the spawner script. We create the class in the same scripts folder. We need a prefab to be spawned, and a time interval arrange by 1 axis with a name – _yClamp. If enough time has elapsed, the object will spawn, and the elapsed time will reset.

				
					using System;
using UnityEngine;

public class Spawner : MonoBehaviour
{
    [SerializeField] private GameObject _prefab;
    [SerializeField] private float _time;
    [SerializeField] private float _yClamp;

    private float _elapsedTime;

    private void Update()
    {
        _elapsedTime += Time.deltaTime;

        if (_elapsedTime > _time)
        {
            SpawnObject();

            _elapsedTime = 0f;
        }
    }

    private void SpawnObject()
    {
        float offsetY = UnityEngine.Random.Range(-_yClamp, _yClamp);

        Vector2 pos = new Vector2(this.transform.position.x, this.transform.position.y + offsetY);

        Instantiate(_prefab, pos, Quaternion.identity, this.transform);
    }
}

After we are done we can put the spawner into action. We create a spawner to spawn pipes, evey 2 seconds in the y-axis.
We add the functionality to the ground as well. If we hit play we can see the pipes and ground spawning infinitely.
In our next step, we need to make the game end. We add events to the Bird inside the Bird.cs class. As a bonus you can add sounds for different events. With OnCollisionEnter2D, our bird dies and we freeze the time.

				
					    [SerializeField] private AudioSource _audioSource;
    [SerializeField] private AudioClip _flapSound;
    [SerializeField] private AudioClip _hitSound;
    [SerializeField] private AudioClip _scoreSound;
    public static event Action OnDeath;

    private void OnCollisionEnter2D()
    {
        OnDeath?.Invoke();

        _audioSource.PlayOneShot(_hitSound);

        Time.timeScale = 0f;
    }
    
    private void Start()
    {
        Time.timeScale = 1f;
    }

We need to create a button, which starts our game.
We use the Observer Design Pattern and it’s commonly used in game development.
We create a new class called UIManager. In our class we add the following play button logic:

				
					    [SerializeField] private GameObject _playButton;
    [SerializeField] private TMP_Text _score;

    private void Awake()
    {
        Bird.OnDeath += OnGameOver;
    }
    
    
    private void OnDestroy()
    {
        Bird.OnDeath -= OnGameOver;
    }

    public void RestartGame() => SceneManager.LoadScene(SceneManager.GetActiveScene().buildIndex);

    private void OnGameOver() => _playButton.SetActive(true);

What we need to do is create a text mesh for the score on our screen. In the Bird class, we add functionality so that the score will change. The OnTrigger event will trigger and play a sound.

				
					public static event Action OnScore;

    private void OnTriggerEnter2D()
    {
        OnScore?.Invoke();

        _audioSource.PlayOneShot(_scoreSound);
    }

In the UI Manager we also need to add the functionality for the score. Each time the bird passes a pipe depending on the state we will get Awake() or OnDestroy() event. We increment the current number of the score when the score increases.

				
					private void Awake()
{
    Bird.OnDeath += OnGameOver;
    Bird.OnScore += OnScore;
}
    
private void OnDestroy()
{
    Bird.OnDeath -= OnGameOver;
    Bird.OnScore -= OnScore;
}
private void OnScore() => _score.text = (int.Parse(_score.text) + 1).ToString();

If we followed all the steps as shown in the video tutorial, our project should be working. What you learned in this tutorial will work for most of your projects in any engine. Unity‘s pipeline is smooth, yet complex. Unity is, simply put, the world’s most popular game engine. It packs a lot of features together and is flexible enough to make almost any game you can imagine. Unity packs tools for 2D and 3D game development.

Lesson Topics

In this tutorial we cover the following steps:

Project Creation
Project Setup
Creating a Bird
Adding the Bird Script
Prefabs
Adding Moving Object
Defining Spawner
Setup Spawners Usage
Implementing Game Over Feature
Adding Score
Adding SFX
Testing Project

The post How to Make Our Own Flappy Bird in Unity [Project Tutorials] appeared first on SoftUni Global.