Jump to content
Sign in to follow this  
champ

How to create your first auto-updater using C# and GitHub - Step by Step tutorial

Recommended Posts

Hi folks,

I have seen a few members selling this type of auto updater and decided to write one myself and hopefully help some of you create your very first auto updater from scratch 🙂 To follow this tutorial, you should have basic understanding of C# (or any similar programming language), be familiar with object-oriented programming as well as know how GitHub or any sort of source control works.

 

Problem: the majority of updaters require manual configuration and patches specification, which is error-prone and time-consuming.

Solution: create a GitHub repository with the latest version of game client. Create an updater that will scan through the commits and automatically either update or delete necessary files.

To simplify this tutorial, I have already written a library in C# that integrates with GitHub and does necessary API calls, which we will use later in the tutorial.

 

Prerequisites: Microsoft Visual Studio 2019+, .NET 5.0 framework and some spare time.

 

Part 1: Project set-up and basic UI.

To begin with, open Microsoft Visual Studio and select a .NET WPF application. WPF is a slightly more complicated that Windows Forms, so if you're more familiar with the latter one, then feel free to go for it. I will be using WPF for the sake of performance.

Spoiler

1.PNG.61a1cb5523c7dda3f248c268db98746b.PNG

 

Client "Next", specify the project name and location then choose the latest .NET framework available, in my case that is 4.8.

Spoiler

2.PNG.0e1ca1f0fe133689923c83e4c08381b6.PNG

 

Once that is done, Microsoft Visual Studio will generate the project and load it for you. Our basic structure is ready at this point. Now, it is up to you how you want this updater to work and you do not have to stick to the UI that I will be creating. For this project, I want to create some sort of a splash screen that will be shown while we are updating the client or searching for updates and when that's done, I want to show the main updater application with all the links and images, so I am going to create a loading screen first. To do so, right click on your project name in the right hand side of the screen under "Solution Explorer" tab and select Add -> New Item. After that find an option called "WPF Window", specify a name for it and click "Add":

 

Spoiler

3.PNG.9bafdbec9cf1cd62f2f021a4574c3480.PNG

 

Now that we have created our splash screen window, I would like to modify some of its properties. For instance, on window load I would like it to be rendered in the center of the user's screen. Additionally, I would like to change the title, width and height of the window. To do so, you could either modify the properties directly via XML file or by right clicking on the window file and selecting "Properties" item:

Spoiler

4.PNG.ffb76b18e8c67e458f907b1ab55b93d9.PNG

 

Now that our basic window is done, we need to check the application start up path or in other words the window that will be ran when we execute the application. To do that, go to your App.xaml file and modify StartupUri property to whatever you have called your splash screen, in my case it is LoadingWindow.xaml:

Spoiler

5.PNG.f8682cf8f0989ca1ff9f1525985cb178.PNG

 

Now we can test our loading screen by debugging the application. To debug the application you can either press F5 or click on "Start" button that has a green arrow next to it:

Spoiler

6.PNG.5c94dbce1a6459aaf28b32a08b6531ec.PNG

 

Once the project has finished compiling, you should see our loading window:

Spoiler

7.PNG.d6b0db448269064c5c82e46e646a3ce8.PNG

 

Now we have the loading window it is great and all. However, I would like to make it more informative by adding a status label and a progress bar to it, which will indicate that something is happening. To do that, open your Toolbox tab, which can normally be found on the left hand side of the screen. If you are missing this tab, then you can also find the Toolbox window by finding it in VS View -> Toolbox (or by pressing CTRL + ALT + X):

Spoiler

8.PNG.f8b7546d746281e8db30fe69e5a4f119.PNG

 

Cool, so I am going to drag a label, which will be our status text and a progress bar which will indicate that some sort of a process is happening whilst the window is open. To do that, I am going to use a marquee progress bar, which can be done by setting IsIndeterminate property of the progress bar to true:

Spoiler

9.PNG.51aac6fb751ab7160309feb8439c71ce.PNG

 

Now if we debug our application window again, we will see our loading window with the progress bar and status label:

Spoiler

10.PNG.e0674e9d270075915976489179d3d9ac.PNG

 

  • Like 1
  • Thanks 3

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
Sign in to follow this  

×
×
  • Create New...