Application development – when you hear this you imagine some IDE where you can write code and build your app. Nowadays it looks different (and should look like this). When starting mobile app project, not only with Xamarin, you have to do some analysis, development plan, design research. There is one more important thing – have good tools to help maintain development.
That is why I decided to write this post. I would like to show you how to plan your project and use two great tools to make it easier – Visual Studio Team Services and Visual Studio Mobile Center.
What do I need to start?
3) Visual Studio 2017 Community (for free or choose higher version)
Let’s start from saying how we will use these tools:
- VSTS (Visual Studio Team Services) – for product backlog and code repository
- VSMC (Visual Studio Mobile Center) – for tests, builds and releases
- VS (Visual Studio) – for Xamarin app development
Setup your project in Visual Studio Team Services
First of all create new free account on VSTS (Visual Studio Team Services) website – once you do it, you can sign in and should see screen like below:
On this site you can create new project – so click “New Project” button. You should see page like below:
You have to fill following fields:
a. Project name – so the name of your app
b. Description – few words about your mobile app
c. Version control – here you can choose repository for your code – GIT or Team Foundation Vesrion Control
d. Work item process – here you can select in which methodology you run your project – Agile, Scrum or CMMI
I would like to stop here for some time and shortly discuss each methodology option.
VSTS documentation has great explanation for each:
- Scrum – ” this process works great if you want to track product backlog items (PBIs) and bugs on the Kanban board, or break PBIs and bugs down into tasks on the task board.”
- Agile – “Choose Agile when your team uses Agile planning methods, including Scrum, and tracks development and test activities separately. This process works great if you want to track user stories and (optionally) bugs on the Kanban board, or track bugs and tasks on the task board.”
- Capability Maturity Model Integration (CMMI) – “Choose CMMI when your team follows more formal project methods that require a framework for process improvement and an auditable record of decisions. With this process, you can track requirements, change requests, risks, and reviews.”
You can read more on the official VSTS documentation website.
In this example select GIT for “Version control” and Scrum as a “Work item process”. Click “Create” button.
Once your project is created you should see below page:
Create Product Backlog
From the bar at the top select “Work” and then click “Backlogs”:
This is the place where you can plan work for you and other developers to deliver high quality app. You should know that working with Scrum requires Sprints (so time units when developers implementing selected functionalities). That is why on the left side you see “Sprint 1”, “Sprint 2″… You can set start date and end date for each Sprint.
You can add two types of items:
- Product backlog item – single functionality of your app, for instance: “Login page”
- Bug – single bug found in you app, for instance: “App freezing when clicking login button”
Once you click add when “Type” is set to “Product Backlog Item” window will appear where you can provide more information:
When you enlarge above image you can see that I provided information about my backlog item:
- Assigned to – I assigned this PBI (Product Backlog Item) to me, so I am responsible for development of this item
- State is set to “New” so I did not started working on this PBI yet
- TAG – you can add tags to your PBI just to make it more clear (or instance when you plan to add more PBI for your backend)
- Description – short description of your PBI – to provide clear information what exactly will be developed
- Acceptance Criteria – short description when selected PBI is considered as done.
- Iteration – you can decide in which sprint you will develop selected PBI
There are some other fields (I left them empty for now).
Once you click “Save&Close” PBI will be added to list:
You can do the same for bug:
Below you can find sample bug information (click on the image to enlarge it):
- Assigned to – I assigned this bug to me, so I am responsible for resolving the issue
- State is set to “New” so I did not started working on this bug yet
- TAG – you can add tags to your bugs just to make it more clear
- Iteration – you can decide in which sprint you will resolve this bug
- Repro Steps – information how to reproduce selected bug
- System info – in this case on which mobile system this bug was discovered
- Acceptance Criteria – information when selected bug can be closed
Now on my list I have one PBI and one Bug (notice that for PBI there is blue color and for bugs there is red assigned):
Now if you decided that you will handle PBI and bug in Sprint 1, you should see them in this selected Sprint:
Great – now you know how to start configuring your backlog.
Configure GIT repository for your source code
Click “Code” from the tab:
As you can see our repository is empty now. We need to do initial commit to move code here. Let’s do it.
1. Open Visual Studio and select “Team” from the top bar and then select “Manage Connections”:
2. You will see below window – you should sign in with the same account you signed to VSTS:
As you can see my repository “XamarinApp” is visible. Expand your repo and click it as shown below:
Pase path where you would like to clone you repository.
Once you do it we are ready to add some Xamarin application project.
Create Xamarin Forms app project
1. Click “File” then “New project” in Visual Studio
2. Select “Cross-platform” from the left pane. Remember to change “Location” to folder where you cloned your GIT repository:
3. Once you create project we can add login page UI. Open “MainPage.xaml” file and replace “Label” default control with below code:
<StackLayout Orientation= "Vertical" HorizontalOptions="Center"> <Entry Placeholder="Username..."/> <Entry Placeholder="Password..." IsPassword="true"/> <Button Text="Sign in" Margin="0,10,0,0" BorderWidth="1" BorderColor="Silver"/> </StackLayout>
Now it is time to do our first commit and move code from the disc to VSTS GIT repository.
1. Rebuild solution and check if you do not have any errors
2. Select “Team Explorer” from the right pane in Visual Studio:
3. Select “Changes” – as you can see here you can provide short information about this commit – let’s type “Initial commit”:
Once you click “Commit All” button all changes will be saved to local repository. If you want to move them to VSTS you have to also click “Sync”:
Once sync is ready, you should see confirmation:
Now open VSTS “Code” tab again. You should see that whole code it here!
There is also good practice to create “develop” branch and commit code there.
1. Click “master” drop down and select “New branch”:
2. Type the name of the branch – “develop” and then click “Create” button:
3. “Develop” branch is created:
4. Set “develop” branch as default – click on the repository drop down and select “Manage repositories”:
5. Click on the repository and then on the three dots opposite develop branch. Select “Set as default branch”:
Done. Now you have your backlog and repository configured! It is time to integrate with Visual Studio Mobile Center.
Sign in to Visual Studio Mobile Center here.
This is great place where you can configure automatic builds, tests and distribution for your Xamarin apps.
1. Click “Add new” on the right side and select “Add new app”:
2. Now you need to provide information about the app:
- Short description
- Mobile Os (currently Android and iOS)
- Platform – in our case Xamarin
In this sample I will configure Android app.
3. Select “Build” from the left pane:
4. Now select repository – in our case this is Visual Studio Team Services we used before in this article:
5. Once you authorize application Mobile Center will connect to your VSTS repositories (in our case “XamarinApp”):
Select your repository.
6. You should see your two branches – “develop” and “master”:
7. Now click ” Set up branch” to configure automatic builds for this branch:
8. As you can see Mobile Center automatically selected Android app project from repository.
You can configure below functionality:
- Build on push – it means that your app will be built each time you commit some chnages to the repository
- Sign builds – you can provide keystore file to sign each app package
- Distribute builds – you can decide if you want to distribute your app to testers automatically after each build
In this case I will not sign my app. Then click “Finish setup”. Once you do it you should see that your app is being built:
If everything went good you should see result:
Now you know how to configure automatic builds. But what about releases? If you commit some important changes you would like to send the new version of your app to testers. It is also possible with VS Mobile Center. Let’s see how to do it.
1. Open builds settings:
2. You have to provide keystore information or your Android app (and certificate for iOS). There are two toggle buttons turned on:
- Run a launch test on device – VSMC will automatically test our app startup
- Distribute builds – we can automatically send information about new build to our testers
3. Once you click “Apply changes” Mobile Center will automatically build your app:
4. If you switch to “Test” tab you will notice that app startup test is launched also:
5. Once build is ready and all tests passed collaborators will receive e-mail with new release available to download and install:
You can open this message on Android device and install an app. The same process is for iOS applications.
If you go to “Test” tab you can see app startup test result with screenshot:
Of course you can write more UI Tests and run them in Mobile Center. Check below two links to learn more:
Configure collaborators list
You can set different distributions lists for your mobile applications.
1. Go to “Distribute” tab:
As you can see there is only one tester – it is your Mobile Center account.
2. You can either create new group or distribute new release ad-hoc:
3. Click “New Group”:
You can type the name of the group and testers e-mails. Once you do it you will have choice to which group you would like to distribute selected build:
That’s it! There is more in Mobile Center – you can collect information about crashes of your app or just some analytics data to see how users use your app.
You have to add SDK to your app that will automatically connect with Mobile Center – this will not be described in this post.
I know that topic connected with DevOps and Continuous Integration is huge but I just wanted to make it easier for you to start. With Visual Studio Team Services and Visual Studio Mobile Center tools it is much more easier to configure everything. It is worth to spend some time especially when you want to manage your apps efficiently. Try do it yourself and good luck!