How To Merge Source Code Generated by AppStudio

Scope

The purpose of this article is to show how to merge source code from a generated application created by Windows App Studio.

Introduction

Windows App Studio is a service that allows any person without programming skills to create applications for Windows Phone and Windows. In just the 4 steps: have an idea, add content, choose the style and use the application. The service provides a set of templates to help the users in creating various applications, theses templates are great starting points for specific uses that are more frequently used.

When a Windows App Studio application is generated it is possible to get the source code to change it in Visual Studio and then run the application in the emulator or in a Windows 8.1 device. But if the application is changed in the Windows App Studio website, then the source code is changed and the new source code needs to be merged. Windows App Studio does not support the re-upload of the source code that has been changed.

This article we will show a solution to merge the source code using a tool called Source Tree that provides a graphical interface to manage source repositories.

Description

Suppose we create an application in a Windows App Studio website, let's choose the Empty App template and let's generate the application without making changes.

To help in the process, let's set the build version to 1.0.0.0 as in the following:

generate universal app

We then need to download the source code.

empty app

To the local computer.

local computer

Now download the application Source Tree that allows creation of source control repositories bases in GIT and install it. At the end open the application.

Source Tree

Then click in “Clone/New” and choose “Create new repository”.

Clone

After defining the destination path and the name, click on “Create” and the result will be:

Create

Click on “Open in Explorer” and when the folder is opened, move the application generated to this folder, something like the following:

Open in Explorer
Note: the “.git” is a hidden folder that cannot be deleted, it is required to track the changes.

Returning to the Source Tree application, we will have:

Tree application

That means, in “Unstaged files” are all files added to the folder, that can be passed to the “Staged file” to then apply a commit (to save the current version).

Passing all the files to “Staged files” the aspect will be:

Staged files

And now it is possible to save this version of the source code by doing a commit, as in the following:

commit

For each version it is important to add a comment, as in the following:

comment

Click in the “Commit” button and we will have:

Commit button

Now, let's open the source code in Visual Studio and let's change the code. For example, the following is the Application Name and the Application Title in App.xaml.

App xaml

Let's define it as MyAppStudioSample in both resources and then in Source Tree we will have:

MyAppStudioSample

In the right, we can see the changes that were made, in Red is the old values and in Green the new values, that we will commit like we did in the first version. And the result will be:

result

Now, let's return to the Windows App Studio and let's do some change:

    - Add a new application title: “Microsoft Band News”.

    - Add the Facebook feed from the Facebook feed.

main section

And let's generate a new source code from the application, let's say it is the version 2.0.0.0. For more information about set different version see the Semantic Versioning.

generate a new source code

After the new version is generated it is necessry to override the source code in the “Sample” folder. In the Source Tree it's now possible to see the differences among the versions:

Sample

In the “Unstaged files” the Yellow circle will say that the file was changed and the Blue circle will say the file is new. Selecting a file will show the differences, the Green row means the new version and the Red one is the last version.

For example, the changes made in the Application Title can be found by selecting the App.xaml as in the following:

Application

In the right it is possible to accept the change or revert it, to help it is possible to use the buttons “Stage hunk” to accept and “Discard hunk” to discard the changes

Discard hunk

Or selecting the line is possible accept or reject each line, as in the following

selecting the line

In this way, each change can be tracked, file by file or even line by line, depending on the requirements.

Conclusion

In conclusion, using a tool like Source Tree it is possible to easily merge source code from Windows App Studio without knowledge of source controls.