All Posts By

Mark Arteaga

TechUnder 20 Cup 2017 & 2018 Recap

By | Giving Back, RedBit | One Comment

TechUnder 20 is an organization that has the aim of exposing youth to the technology world and has been running since about 2015. It is currently lead by Denys Linkov who is now at UofT in Computer Science but he joined when he was in highschool.

I’m a believer that not everyone should be coding (and yes I’m a coder since 14) and there are a lot of other opportunities available in the tech industry besides coding. That’s why I have been supporting TU20 both personally (when ever I can) and under RedBit by sponsoring, giving presentations on resume building, sharing contacts in industry and mentoring teams competing in TU20 Cup or just giving advice on what to do and how to get into the industry.

TU20 Cup 2017 Edition

In the 2017 TU20 Cup, I had a team called Team NextGen and they built a prototype of a tutoring platform to help in high school students get tutoring. What was great about this idea was tutors would be students helping other students and all would be done via mobile app. They were so eager and enthusiastic to build a mobile app, but with a limited amount of time and no one on the team ever having built a mobile app this presented a slight challenge. What most of them did have was photoshop skills and some did have coding skills but mostly python and PHP which probably would not help in building the app.

My role as a mentor was to help them going on the right track, so what I suggested is come up with an ideal flow of the app, figure out the screens for the app. And this is exactly what they did

I recommended they build it out using a tool like Proto.io. This is exactly what they did and resulted in this video

Once this was completed they needed to come up with a pitch which included a business model or how they would make money. The presented their concept at the Microsoft offices and did a fantastic job in the preliminaries earning a spot in the finals

In the end, the team placed second place behind a web application called StarSpeak which was a working prototype to help people present with confidence.

Amazing job by the team and this year some are off to university or finishing up highschool and continuing their journeys. Here is the 2017 team

  1. Justin Chan
  2. Andy Yang
  3. Eric Lin
  4. Ahmed Elmarsafawi
  5. Mohamed Elmarsafawi
  6. Aaron Chu

This is a perfect example of how you don’t need to be a coder to be in the technology industry and there are so many other fields in the tech industry that new comers can enter from design to coding to marketing/pitching!

TU20 Cup 2018

The 2018 TU Cup was recently held at the Microsoft offices, and thanks to Microsoft for providing the space again! This year I had a team of four highschool students and was excited to help them out. Some of them did have coding experience and the theme for this year was Smart Cities. The team was call Team Road Alerts.

This year, [GEOTAB](https://www.geotab.com] was involved as a sponsor and opened up their big data pool to be used. With over 900,000+ devices on the road, they collect 2billion records per day and can use AI and Machine learning to predict certain scenarios.

The idea that the team came up with is notifying people and municipalities when there are potholes recognized in the system. So users would sign up for the server and provide proactive maintenance instead of being reactive and waiting for citizens to report. Now because the GEOTAB devices have an accelerometer, they can ‘predict’ if the pothole is a major one or a minor one which means the system can notify at certain levels only.

This year they did get a working prototype going but did not get everything done for the competition and considering they were juggling school and everything else, I think that is fine!

And in the end all the hard work paid off and they came in third place overall and came in first place for the highschool division.

Here is the 2018 participating team
1. Angela Efremova
2. Dimitry Linkov
3. Alexander Tingling
4. Cameron Humes

Giving Back

As technology leaders, we should always give back for the next generation. I expose my kids to technology (and I’m sure they are tired of hearing me!) but I think we should do what we can to help and guide the future generation and get down the right path, even if that path is not being a developer. Definitely looking forward to TU20 Cup 2019!

Optimizing Images for Mobile Devices

By | RedBit, Technology | No Comments

The RedBit team was developing a software system for a customer that consisted of a REST API, Web Application and mobile apps for iOS & Android. The mobile app was using Xamarin Forms was to show images to the user and these images are delivered via the REST API. There was a backend web application where images could be uploaded and these images were being served to iOS and Android devices as required.

The Problem

These images were being served to devices in their raw uploaded size and resolution. Although we limited the file sizes to 2MB, users took full advantage of that and uploaded 2MB images. Sometimes a collection of 15-20 images would be downloaded so a user could potentially download 30-40MB of just images.

This caused two main issues

  1. The application was using a lot more data than it needed to
  2. Low end devices were crashing from out of memory exceptions because of large images

With some images being upwords of 2MB in size and 3 times the resolution of the device, it was pointless for the device showing a hi-res image if it’s pixel density as 1x.

The Solution

We needed to resize images and instead of serving just one image, we would serve a set of images with a range of sizes. Devices can then pick which size is appropriate for their device. The architecture would be as follows

Resizing Images With Azure Functions

Visual Studio Azure Functions SDK has a built in template called Image Resize that worked perfectly for our needs. When you create a new function, you will get a dialog box as follows

NOTE: Make sure you are on .NET Functions v1, to get the dialog box above as v2 does not provide the Image Resizer template. Doesn’t mean you can’t use V2, just means you will have to manually hook things up.

When you fill in the dialog you set your parameters and you will get a file similar to the following

We modified a bit as we needed 3 image sizes. Our images were being uploaded to a blob storage container named Images. The Image Resize Function triggers every time a new image is added to that container.

The function creates three new images and places them into their respective folders:

  • Images-Small
  • Images-Medium
  • Images-Large

Note that this function uses the ImageResizer nuget package.

Serving Multiple Images

Now our REST API was built using ASP.NET Web APIs so to update this we added a new property to send not only the original image, but also the other three images sizes so the consumers of the API (iOS, Android and web app) could chose which one fits their specifications.

We’ll send down a JSON object that is defined by the following class which contains links to each of our new image sizes along with the original image link:

This C# class was used on both ASP.NET to serialize to JSON and then on iOS and Android to deserialize from JSON to object form. The JSON object would look like the following

The Xamarin Client

The mobile clients used to just display the original image that was uploaded. Now with multiple images, the client can be updated to download and show based on the devices DPI. This is similar to how Android use different image sizes based on the devices DPI with iOS doing the same. We will create our own way of utilizing DPI to server appropriate images on mobile.

On Android we had the following helper method


For iOS, we did not have any crashing issues, but these tend to be higher end devices but since we are sharing code across platforms for iOS we had the following

We had an enum to define the image size as follows

Based on your projects needs you can include a wider range of image sizes. You may also include a a set of images for tablets. We won’t get into how to display an image for Xamarin Forms as you can find documentation here

The Conclusion

As with any software, you try to think of scenarios and try to optimize things as much as you can and the RedBit team thought we were doing that by limiting the image upload size to 2MB. But of course, users took full advantage of that. This resulted in users uploading 2MB images but then 15-20 images would need to be downloaded to mobile devices, this obviously became a problem.

By refactoring some code we were able to reduce the footprint on devices drastically and reduce the crash rate on android to almost 0 compared to previous versions, and previous versions were not too bad!

One of the cases we observed was and image size going from 2MB to 50KB. That’s a huge reduction in data costs and memory usage especially on low end devices and can be seen in the crash reports. Users are being served hundreds of images from the application and reducing and providing multiple image options was a relatively easy adjustment with a huge impact.

Microsoft Connect 2017 – Announcement Highlights

By | Events | No Comments

Microsoft had their Connect 2017 event last week and there were lots of great announcements that I get excited about. To see the entire keynote go here https://www.microsoft.com/en-us/connectevent/default.aspx but announcements range from From AI to DevOps to iOS and Android development, the key theme for Microsoft is Any Developer, Any App, Any Platform.

Any platform, app, dev

As a developer you are spending a lot of your time in an IDE (Integrated Development Environment), whether it’s XCode, Android Studio, Visual Studio, Visual Studio Code or anything else out there. For myself, my time is spent in Visual Studio, Visual Studio for Mac and Visual Studio Code which works on Mac or Windows. Goal for Visual Studio is to provide best in class tools for every developer.

The next few sections go over some of the announcement highlights and the technology we can use to build great solutions for our customers at RedBit. If you want to skip to sections in keynote, I have included the approximate start time for the feature.

Visual Studio Live Share

One of the new features that I think is fantastic for Visual Studio is the new “Live Share” feature. The demo was showing a NodeJS app built and deployed using docker, developed on a mac, using a linux backend … like I said, any developer, any platform, any app!

Think of this as a screen sharing and ‘pair programming’ on steriods. Imagine a pair programming session with developers being at remote locations and from within an IDE of choice (VS Code and Visual Studio) both devs can see exactly the same break points, see live debug variables and not just doing ‘console.log’ to debug for a NodeJS web app.

Watch the section of the keynote starting at 9:35 for a demo by Chris Dias and Amanda Silver.

Xamarin & Mobile

I’ve been a mobile dev for a long time and also been using Xamarin for a while so when I see new features I always get excited. There a lot of features announced for mobile devs and you can see a full list by Joseph Hill on the Xamarin Blog. There are two main things described below, but to see the keynote section done by James Montemagno skip to 25:18 to watch Xamarin updates.

Xamarin Live Player

I’ve been using Live Player in the preview with some production Xamarin apps and some proof of concepts. What it does is really accelerate the time to build out user interfaces using XAML. The great thing is it runs on on actual device and is not emulated. So as you type, it will compile, push to the device and you have a ‘remote view’ of the device on your desktop. It’s pretty much the same as ‘live updating’ when building out web apps but this is native code running on a device not in a browser.

Xamarin Forms 2.5 & Layout Compression

Xamarin Forms 2.5 is finally released, again used in preview for some POCs but happy it’s finally out. The feature I look forward to is Layout Compression. On mobile, ever second counts especially when delay on mobile apps cause more stress than horror movies! Layout compression helps optimize user interface rendering speed. Just imagine the stress you are reducing by using Layout Compression!

Visual Studio App Center

Visual Studio App Center is the combination of Hockey App and Xamarin Insights and it’s now generally available. To view the keynote video start at 39:25

With App center you can test, deploy, monitor your applications. You can setup a CI environment, automate UI Tests in the cloud on real devices, setup continuous delivery to testers, capture crash reports and real time analytics.

One interesting feature is being able to segment your users into particular groups and sending out push notifications to them. See an example of push notifications in the keynote go to 46:27. Here a push notification is sent to users based in the US for Thanksgiving Holiday. Great way to use data to keep users engaged in your apps!

DevOps & Visual Studio Team Services

Start watching from 1:03:35 to see Donovan Brown show the different features. Basically this is how you want to manage your software projects form development to production to gathering feedback from users and iterating on your software. If you are manually FTPing code to servers or using ZIP files as your source control strategy (I have seen this) then watch this section of the keynote. This is how RedBit runs all our customer projects and our own software products.

Artificial Intelligence and Machine Learning on Azure

Lots of new things coming with AI and Machine Learning and you can view the second part of the keynote here. The message that I get is Microsoft is trying to bring AI and ML to all developers as usually you have to have a PHD or Masters to make and train models. I don’t have a PHD (or a CS degree) but to be able to train a machine to learn what an apple is (skip to 6:38 to view) by looking at a picture is amazing!

Then taking that model and exporting to CoreML( see how to export at around 14:03) and run it on an iPhone using Xamarin and identify an Apple without a connection to Azure is incredible (see around 17:16)! The amount of power we have in our pockets is amazing!

Exploring AI with Azure

Two things to look at to ramp up and these are Visual Studio Code Tools for AI and the new Microsoft AI School to start training yourself!

I would say do yourself a favor and just explore this, bring it into your software projects, start small, then explore how you can further customize and take advantage of AI and ML. I wrote a ‘skunk works’ project to do handwriting recognition form an image captured from a Xamarin forms app, sent to a .NET Core API which saved the image in Azure blob storage, sent the image to Azure cognitive services vision API, stored the results in SQL Azure and sent back the recognized text.

So in the end, lots of great announcements in the keynote. Now to bring some of these things into customer software projects and our software projects!

Coding Standards with JavaScript & Visual Studio Code

By | Technology | No Comments

At RedBit, we have teams of people working on projects at one time. One of the key items to practice in any software development project is coding standards.

Now you can go all crazy with coding standards and you can write hundreds of pages of coding standards that developers on teams should follow, and believe me I’ve seen it! Problem with this is developers are more concerned with following these standards than solving real customer problems.

You can also just use the default ‘standards’ that Visual Studio or Visual Studio Code but sometimes developers change the default settings which causes some issues and primarily deal with developers having preferences such as ‘curly brace on same line or next line’ as follows


function(value)
{
  // do something
}

as opposed to


function(value){
  // do something
}

When developers have different settings in their IDEs consider the following scenario. If developer A implements the first function, then Developer B has goes in the same file and modifies a different part of the file and the IDE formats the file to their local workstation standards, then GIT will not only take the code changes, but will also take the formatting changes. These are really superficial changes in my opinion.

JavaScript and StandardJS

For the web applications we build at RedBit we use React and sometimes NodeJS so if you don’t have standards in place, things could get a bit messy. Some developers like spaces instead of tabs, curly braces on the first line like above but everyone has differences.

We have implemented StandardJS because it’s simple and allows the team to focus on developing code, not worrying about standards.

The following are the ‘The Rules’ in place out of the box

  • 2 spaces – for indentation
  • Single quotes for strings – except to avoid escaping
  • No unused variables – this one catches tons of bugs!
  • No semicolons – It’s fine. Really!
  • Never start a line with (, [, or `
  • This is the only gotcha with omitting semicolons – automatically checked for you!
  • Space after keywords if (condition) { … }
  • Space after function name function name (arg) { … }
  • Always use === instead of == – but obj == null is allowed to check null || undefined.
  • Always handle the node.js err function parameter
  • Always prefix browser globals with window – except document and navigator are okay
  • Prevents accidental use of poorly-named browser globals like open, length, event, and name.

This was taken directly from StandardJS website but make sure you read more for a complete list of all the rules.

Installing StandardJS

To get everything installed you need to have NodeJS installed which will give ‘npm’. There are two ways to install StandardJS. First is locally for your project and it’s as simple as running the following for saving in your local project


npm install standard –save-dev


Second is globally so you can run it from anywhere in the command line on your files.


npm install standard –global


Recommend still running the local one, so your ‘package.json’ gets updated to show StandardJS within ‘devDependencies’ section.

Updating package.json

When you do an ‘npm init’ to initialize a new ‘package.json’ you will get something similar to the following


{
  "name": "standardjs-testing",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Mark Arteaga",
  "license": "MIT"
}

Now you can change the ‘scripts’ section to something as follows


"scripts": {
  "test": "standard"
},

If you have a ‘start’ script you can do something along the lines of


"scripts": {
  "start": "standard && react-scripts start"
},

Let’s assume I had the following


const t = '';

class App extends Component {
  render () {
    return
      <div>my div</div>
    }
  }

ReactDOM.render(
  <App/>,
  document.getElementById('root')
)

StandardJS would give the following warning:


Compiled with warnings.

./src/index.js
  Line 22: 't' is assigned a value but never used no-unused-vars

Search for the keywords to learn more about each warning.
  To ignore, add // eslint-disable-next-line to the line before.

Developers Committing with Warnings

One thing that we try to avoid is committing code with active warnings in the code base. This is not always possible but we try to avoid as much as possible.

To circumvent this we do two things

Git Pre-commit Local Hooks

The StandardJS site has a perfect example on ‘pre-commit’ hook and you can find it here but here is the pre-commit hook for reference


#!/bin/bash

# Ensure all JavaScript files staged for commit pass standard code style
function xargs-r() {
# Portable version of "xargs -r". The -r flag is a GNU extension that
# prevents xargs from running if there are no input files.
#!/bin/bash 

# Ensure all JavaScript files staged for commit pass standard code style 
function xargs-r() {
  # Portable version of "xargs -r". The -r flag is a GNU extension that 
  # prevents xargs from running if there are no input files. 
  if IFS= read -r -d '' path; then
    { echo -n "$path"; echo -ne "\0"; cat; } | xargs $@
  fi
}
git diff -z --name-only --cached --relative | grep -z '\.jsx\?$' | xargs-r -0 -t standard
if [[ $? -ne 0 ]]; then
  echo 'JavaScript Standard Style errors were detected. Aborting commit.'
  exit 1
fi

If you don’t know what a ‘pre-commit’ hook is see Git Hooks on Atlassian site.

Automated Builds

We have a process where we go through a code review on every PR, but our PR process also attempts to build the code that is included in the PR and runs tests and runs StandardJS as part of the build process.

In our ‘package.json’ we usually have something as follows


"scripts": {
    "build": "standard && react-scripts build",
  }

which will run StandardJS when we build the React project.

Fixing the Code

The two above solutions tend to work fairly well except when someone removes their pre-commit hooks or never sets them up. The automated builds we have in VSTS are acting like a ‘gateway’ for our PR process before we even start reviewing code, so if the committed code does not comply with standards, the developer will get notified.

If StandardJS ever brings back a warning or an error you have two options. First is go to every line that has the error or warning and manually fix it. If you are new to JavaScript or still learning the standards, I recommend this.

Second options is to just run a simple command and that is


standard –fix


Standard will then go in and fix and spacing issues, tabbing issues etc.

Visual Studio Code and StandardJS

If you use Visual Studio Code, you have the ability to set StandardJS as your default formatter. I use JavaScript Standard Style and have set it up to automatically fix issues when I save a file so I don’t have to think about ‘space before a curly’ type issues. To set this up do the following

  1. In VSCode open the Extensions tab (CTRL-SHIFT-X)
  2. Search for ‘Javascript Standard Style’
  3. Install and then reload VS Code
  4. Click ‘File – Settings’
  5. In the user settings add “javascript.validate.enable”: false and “standard.autoFixOnSave”: true

Your settings should look something like the following


{
    "javascript.validate.enable": false,
    "standard.autoFixOnSave": true
}

Now whenever you save a file, it will make sure you are adhering to ‘standardjs’ standards and life is good!

Wrap Up

So as developers we all have our different styles of writing code, but when working with a team you should definitely look at putting some standards in place and making it as easy as possible for developers to follow those standards. This will allow developers to focus on solving customer problem and not worry so much about code formatting.

Our Summer with a High School Intern

By | Giving Back, RedBit | No Comments

This summer 2017, we decided to hire a student, Jeff Awobodu, to help us out on RedBit customer projects. I meet him from a presentation I did at Tech Under 20 event where I tried to answer the question on ‘What are the Kinds of questions I need to prepare for if I am having an interview at a tech company’.

I was one of about 5 presenters and I was quoted as saying the following

And that’s how I truly feel. Even as an intern, if you work at RedBit you will be asked to work on real life projects and that is what we did with Jeff. If you are curious, you can download the presentation from slideshare.

Jeff’s Background

Jeff was not a developer but did take a few programming classes in high school. I noticed he did like art and when he sat at my table after the presentation we talked about his work. One of the projects that intrigued me was he build a motorized longboard that was connected to a remote, same type of remote you use for a RC Car.

I decided to hire Jeff for the summer, to help out on customer projects because of his enthusiasm. Here is a pic of Jeff and his long board and love how it was held by duct-tape

Design Sessions

At RedBit, when building software products, we hold design sessions to try and envision what the customer might want as usually they come with a vision but not really knowing what they need from a design perspective (UX or UI design) or from a technology perspective, sometimes we just get ‘I need an app!’. We decided to include Jeff in a project for one of our startup customers.

The design sprint included working with the customer, our designer, developer and Product Manager, to determine what was required for the software. This was a real life project affecting real customer outcomes and went great and the project is well under development now.

Testing

A great way to learn the software development process if you don’t really know how to code is to test software and work with QA. As a next step, we decided to put Jeff as part of the functional QA team to make sure developers are meeting functional requirements of software being delivered. The software being built was a React web application for an insurance company.

Using VSTS we had an existing board and explained the process of when a card should be picked up and sent back to dev with comments. That process was great, and he was efficient at communicating with dev team and pushing back ‘PR Bugs’ when something was not quite right.

At one point there was one bug card that was a small bug and since Jeff did do some HTML and JavaScript I asked him to spend the morning doing a fix for the bug. By the end he resolved the bug, committed code using git and the code ended up in dev branch. His comment :

I can’t believe I just created some code that is going to be on a company’s web application!

Giving Back

This is truly a great feeling to inspire someone to get into this industry, whether it’s as a developer, designer or anything else. As leaders in our field and in our community we need to expose kids and give them the opportunity to succeed. This includes interns where they are paid to work on real world projects and this is beneficial to everyone involved. Jeff is now in his first year studying Computer Science at Queens University, hoping we do another summer with Jeff!

Xamarin Experience Event Toronto

By | Events | No Comments

NOTE: THIS EVENT IS NOW SOLD OUT

If you are into Xamarin like our team at RedBit is you will definitely want to head out to this event to talk about mobile apps, cloud connected apps, DevOps – RedBit will be there!

Microsoft teams will be presenting a half day session on how and why you should take advantage of mobile in your business and how to use the tooling provided from Microsoft such as the new Visual Studio 2017. Spaces are limited so to register you will have to email Catherine Kerr to get a limited spot.

Here is the agenda on what will be discussed

Xamarin-experience-event-agenda

Here is an overview of the half day session

We live in a world of rich, immersive mobile experiences that are powered by the cloud. Mobile has been the most rapidly adopted technology in history and with the increasing prominence of the cloud, the rate of technological change continues to accelerate.

Following the launch of Visual Studio 2017, we are welcoming the Xamarin team to Toronto to show you how to enhance your mobile strategy through Microsoft Azure, Visual Studio and the Xamarin Mobile Lifecycle Solution.

With thousands of organizations already using Microsoft and Xamarin to achieve remarkable results in their mobile and digital transformation strategies, let us show you how you can build, test, distribute and monitor your mobile apps and easily add backend cloud services to scale your app on demand. The new Visual Studio Mobile Center also brings together multiple services, commonly used by mobile developers, into a single integrated solution.

With over 1 million developers using Xamarin solutions in more than 120 countries, building rich, immersive, high-quality mobile applications has never been easier!

Here are all the details of the event

Date: Thursday 13th April 2017
Time: 10:00AM to 1:00PM (EST)
Event Location: Microsoft Toronto Office, Suite 1201*, 222 Bay Street, Toronto, ON, M5K 1E7
Registration: Spaces are limited, so please email Catherine Kerr with your name and contact details at your earliest*Ernst & Young TowerPlease take the elevator to the 12th floor.

Hacking for Missing Kids – Hockey App, Push Notifications & Wrap Up

By | Events, RedBit, Technology | No Comments

This is the last post in a series on how to get the Xamarin based code for a hackathon we did with Missing Children’s Society of Canada up and running on iOS, Windows & Android. This article will focus on how to distribute the app.

For reference here is the series of articles available

  1. Technology for Good
  2. Technology Overview
  3. Cloning the Project
  4. Running Xamarin App on iOS
  5. Running Xamarin App on Android
  6. Running Xamarin App on Windows
  7. Hockey App, Push Notifications & Wrap up

Hockey App

Although we used Hockey App to distribute the Android application, unfortunately due to time, we did could not complete a full Develop – Test – Build – Distribute pipeline built out for the Xamarin application.

image26

We did end up just manually uploading APKs, but you definitely want to automate your mobile app lifecycle process!image27

Here is an example of a customer app we did at RedBit in Visual Studio Team Services where we have API, Web App, iOS and Android build and release pipelines setup

image28image29

Definitely worth the time to set this up when building out full software products!

Read More

Hacking for Missing Kids – Running Windows Version

By | Events, RedBit, Technology | No Comments

In the previous article on Hacking for Missing Kids – Running Android Version we looked at how to get the Xamarin app running on Android. Next, is running the application on Windows using our Xamarin based code

For reference here is the series of articles available

  1. Technology for Good
  2. Technology Overview
  3. Cloning the Project
  4. Running Xamarin App on iOS
  5. Running Xamarin App on Android
  6. Running Xamarin App on Windows
  7. Hockey App, Push Notifications & Wrap up

Do the following to run the application on Windows

  1. Right click on the IRIS.Windows project and click Set As Default
    image11
  2. Change the Solution Platform to Any CPU
    image17
  3. Tap F5 or click the debug button in the tool bar to start debugging on Windows. You can also change the OS version and emulator to run it on from here
    image22

When the application runs, you should get the following if running on the

image23

Type in the following for credentials

  1. Username: Admin
  2. Password: password
  3. Tap login to see the available cases

You should end up with a list and then be able to navigate to a case details page.

image24image25

As you can see, we can literally use almost all the same C# code using Xamarin reducing the time to target all platforms. By no means are these polished apps, but you can get up and running pretty quickly using a Xamarin code base.  Next up, we’ll look at using Hockey App and how it was leveraged to distribute the application as well as push notifications.

Hacking for Missing Kids – Running Android Version

By | Events, RedBit, Technology | No Comments

In the previous article on Hacking for Missing Kids – Running iOS Version we looked at how to get the Xamarin app running on iOS. Next, is running the application on Android.

For reference here is the series of articles available

  1. Technology for Good
  2. Technology Overview
  3. Cloning the Project
  4. Running Xamarin App on iOS
  5. Running Xamarin App on Android
  6. Running Xamarin App on Windows
  7. Hockey App, Push Notifications & Wrap up

Do the following to run the application on Android

  1. Right click on the IRIS.Droid project and click Set As Default
    image11
  2. Change the Solution Platform to Any CPU
    image17
  3. Tap F5 or click the debug button in the tool bar to start debugging on Android. You can also change the OS version and emulator to run it on from here
    image18

When the application runs, you should get the following if running on the Visual Studio Android emulator.
image19

Type in the following for credentials

  1. Username: Admin
  2. Password: password
  3. Tap login to see the available cases

You should end up with a list and then be able to navigate to a case details page.

image20image21

Some things to note:

  1. If you are using an emulator, use the Visual Studio Android Emulator as it will make life easy for you
  2. If you get some errors compiling for Android make sure you have appropriate Android SDKs installed. For this project you need minimum API Level 19, but recommend you just install all of them.

For android SDKs, the following links will be helpful

  1. Overview of the Visual Studio Android Emulator – https://developer.xamarin.com/guides/android/deployment,_testing,_and_metrics/debug-on-emulator/visual-studio-android-emulator/
  2. Launching the Android SDK Manager from Visual Studio – https://developer.xamarin.com/recipes/cross-platform/ide/launch_sdk_manager/#Launch_SDK_Manager_from_Visual_Studio

In the Android SDK Manager you should install the following

  1. Under Tools – All SDK Build-Tools
  2. Different Android API Levels for example API 24 install SDK Platform and Google APIs. You can install other options but these options will be enough
  3. Under Extra – Google USB Driver

Next up we’ll look at how to get the code base deployed and working on the Windows Platform.

Hacking for Missing Kids – Running iOS Version

By | Events, RedBit, Technology | No Comments

In the previous article on Hacking for Missing Kids – Cloning the Project we looked cloning the project from GitHub. Now that we have gone through an overview of the structure of the Xamarin app and cloning the project, we can go ahead and try to run it.

For reference here is the series of articles available

  1. Technology for Good
  2. Technology Overview
  3. Cloning the Project
  4. Running Xamarin App on iOS
  5. Running Xamarin App on Android
  6. Running Xamarin App on Windows
  7. Hockey App, Push Notifications & Wrap up

To run the Xamarin iOS version perform the following steps

  1. Right click on the IRIS.iOS project and click Set As Default
    image11
  2. Change the Solution Platform to iPhone Simulator
    image12
  3. Tap F5 or click the debug button in the tool bar to start debugging on iOS. You can also change the OS version and emulator to run it on from here
    image13

When the application runs, you should get the following

image14

Type in the following for credentials

  1. Username: Admin
  2. Password: password
  3. Tap login to see the available cases

Once you login, you will be presented with the following list page and then details page

image15image16

Some things to note:

  1. You need have a Mac setup with XCode and Xamarin on it to compile the iOS application
  2. You can use the simulator for iOS on Windows by seeing here https://developer.xamarin.com/guides/cross-platform/windows/ios-simulator/

Next up we’ll look at how to get the code base deployed and running Android.