Category

Technology

Adding Basic Animations to React

By | General, RedBit, Technology | No Comments

Hello React developers! As a dev who is still trying to learn and grow every day, here is a “to the point” post about how I’ve been getting animations out of my head and onto the page. This will only cover basic stuff for now, and I intend to put out another post as I improve and develop better ways of adding animations to my components.

For starters, if you’re interested in adding small animations without downloading an entire library, CSS animations are an easy way to do that. I would personally recommend keeping animations fairly small, as CSS has some limitations as to what is possible. For example, while you can easily animate an element to appear when rendering, there is no time to animate that element as it unmounts. While you can get around this by animating elements in from off-screen, it is not helpful to those using screen readers, and it keeps unused elements on the dom.

Places it makes sense to use CSS include color changes, hover effects, and small, decorative animations; like on a logo for example.

In this example, I apply the animation through a className on the logo itself, running it so that It will always be moving, regardless of the state

What I’m currently excited about though happens to be the React Transition Group library (http://reactcommunity.org/react-transition-group/). What it does is apply a state to your component, which can be used to apply specific styles on the component lifecycle, as well as add and remove the component when the animation is complete.

In the Transition example, these states applied to the component include entering, entered, exiting, and exited. The duration of these states can be a set together as milliseconds, or individually as an object (eg. {entering:300, exiting:500}).

The most important quality of it to me is it’s “exiting” state. CSS lacks the ability to animate on unmount without help, and this library gives you that power. With the ability to animate the removal of an element, there is no need to keep unused elements on the DOM, which will actually improve the accessibility of your platform by not confusing screen readers with hidden components. Animating the ‘exiting’ state also creates a more polished animation that CSS alone can rarely accomplish. I found it incredibly easy to follow, just set styles based on the rendered elements state, though this method is probably better for smaller animations as well.

Within the same library is the ability to use CSS transitions. Like transitions it allows you to apply styles when the element is at different states (keeping in mind that these state names are not quite the same as Transitions). What’s different about this is you apply your styles with classes rather than through inline styles. This is ideal for applying more complicated movements, as well as having reusable and consistent animations for your platform. These can be applied as an object (as seen below) or a string, which is interpreted as “animation” = “animation-enter”, “animation-enter-active”, “animation-enter-done” etc.

Finally, TransitionGroup can be used to manage all child transition objects that exist in a list. TransitionGroup does not actually apply any styles to your components; it’s more or less just a wrapping div with some helper props.

Animations are valuable, fairly simple to begin adding, and increasingly necessary when building the web. While these where very simple additions to my code, they instantly made my project look more engaging, and frankly, we’re pretty fun to work on. Hope you learned something! I’m looking forward to seeing where motion design and animation on the web goes next.

Why Animate?

By | RedBit, Technology | No Comments

From GIF’s to Flash to CSS v3, animation has come a long way on the web, and I have no doubt it has a long way to go. Though I’m by no means an expert, here is what I have learned about why we want animations on the web, and how we can keep ourselves from annoying users with them.

For some background, the web is understood to us through two pathways in our brain: the ventral stream and the dorsal stream. The ventral stream is used for understanding static design and content, while the dorsal stream is used for spatial awareness and animation. Because the dorsal stream happens to be relatively faster, we can reduce a user’s cognitive load by subconsciously processing some of our platform’s less important information more quickly, as well as removing change blindness by drawing users eyes to updating elements.

To expand on that a little, some of that “less important information” might include where certain elements might be hidden in your platform. For example, a user might assume a web page’s menu is kept just outside of their field of vision if it happens to slide in from off-screen, or a menu of additional options might be located “inside” the select input if the animation is anchored there. Sliding an element rather than having it simply appear is more natural, and easier to understand to the user

Besides looking good, animating change reduces the chance that your user might miss it (change blindness). This is where that dorsal stream really helps. Movement can signal to your user that something has changed on screen, without derailing their current workflow. Need an example? Think about a point total rising and falling during a video game. It’s likely a small portion of your screen, but it would be important to the player to know if that value is changing. Hence, a small animation would draw the player’s attention when that value changes without interrupting the task at hand.

So why do we want to use animation on the web? While of course, it’s much cheaper to build a static site, animation adds clear value for your client, as well as for the end user. A platform that actively keeps users interested is more valuable than a platform that reads like a newspaper or lets “the product speak for itself”. Like I pointed out before, animation the perfect way to keep users engaged with your platform while creating a smoother or more enriched experience. It makes it easier for users to discover functionality, draws attention to specific points of contact, or simply just add a sense of “delight” to your platform.

As an example of how some of these animations have improved your workflow online, think of mobile devices. Screens may “nudge” in one direction or another to indicate how to access additional content. In the popular design platform Invision, project components that can be interacted with flash blue when a user clicks the page. Animations don’t need to be complicated, they can be as simple as letting the user know that they have interacted with your platform correctly: button text changing from “Click to Pay” to “Payment Completed” for example. The goal here is to use animation to help users complete the task at hand, whether that be filling out a form, editing a photo, or completing a purchase.

So how does purely decorative animation fit into this? Personally, I go with “less is more”, A) because I’m a beginner, and B) because it’s easy to go overboard. A website filled with moving parts and flashing text can confuse users, and functionality can become impossible to discover. Because the eye is always drawn to movement first, it’s best not to keep a flashy ad on your payment page, eh? If something moves, I’m probably going to try to click on it.

Now that you’re adding animation, you get to really add some personality to your platform. Talking about what characteristics a company holds or wants to portray are excellent starting points for designing what movements your components may have. A law firm, for example, may use animations that feel “strong” or “weighty”. A spa might animate using gradients and opacity to portray a sense of calm. An educational site for children could use cartoonish movements, such as “bounce”, “squash”, or “stretch”. The motions themselves should feel natural, the way they might occur if a user was interacting with them in the real world. Something I was told when thinking about movement, is it can be nice to have a touchstone object to come back to when designing (for example, a bouncy ball or marble). Think about how this object may exist in nature, and base your movements on that.

From my experience so far, animations are fairly easy to start and are actually fun to work on. They add value to the platforms I have contributed to, and are a skill that I’m glad I will get to work on as I improve as a developer. In my follow up post (link to Adding Basic animations to react), I will outline how I’ve been working with animations so far, and hopefully, it will be helpful to you too. Hope you enjoyed learning about animations as much as I have

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.

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.

Polyfill with Create React App

By | RedBit, Technology | No Comments

Preamble

As the front end development world continues revolving and evolving into a fully fledged platform, and as javascript continues to make headway in all facets of the tech stack, more and more functionality is being added almost every day.

While this should be a fantastic development, here comes that giant black cloud that we all know too well: Customers.

If you’ve been in front end development for any time at all, you have been through this scenario: After building your latest and greatest new feature that performs just right, you dust off that ugly step sibling known as Internet Explorer, and……nothing. Something you’ve written has offended the browser that won’t die so deeply that all you see is a blank white page.

After cursing Barb from accounting, and remembering her insistence on using IE8 even though Microsoft ended support for IE in January 2016, brewing another cup of coffee, and calming down a bit, you open up the console to see just what IE could be throwing a fit about now:

It seems that this time, IE doesn’t support Array.find

Introducing Polyfills

A Polyfill is a piece of code that adds functionality to older (or just less compliant) browsers so that you can use the latest and greatest features from the W3C specification

Before we go any further, I should explain what Transpiling is and how it differs from Polyfills.

Transpiling is the process of compiling code from one “language” to another. If you are using React through create-react-app then you are already using the transpiler Babel which converts all of your fancy classes, arrow functions, const and let variables from ES2015 (and above) into code that browsers understand.

If you are wondering which functionalities will require a polyfill, one of the easiest ways to check is to take the list of minimum browser versions you will be supporting and search the fantastic site Can I Use to your heart’s content.

Once you’ve determined which polyfills are required, one good resource which may have pre-made open source polyfills that suit your needs is MDN

Create React App built in Polyfills

Luckily, those of us using create-react-app already have two rather useful polyfills included upon creation of our application.

  • Promise to handle the ECMA6 Promise proposal
  • fetch that has replaced the old XMLHttpRequest

While these two polyfills are great… this begs the question, why not more? Why not Array.find or Array.includes???

Well the answer is: it’s not all about you, now is it?

Actually, the create-react-app developers have only included what they deem absolutely necessary in order keep the size of the library to a minimum. (for a far more thorough discussion, check out this link here)

So for now, we are on our own…

Solution

Adding your own polyfills is actually quite easy, especially for those already written and hosted on MDN :). Simply create a new javascript file for the polyfill, and copy in the code (we tend to store these files in an aptly named polyfill folder. As an example, our ArrayFind.js file looks like this:

You’ll notice that this has come directly from the MDN site, with the small addition at the top of the file:

/* eslint no-extend-native: “off” */ which will prevent the linter from complaining and spitting out warnings in the console:

 

You may find it easiest to create a central file which calls each of the polyfills you’re using. We make use of an index.js file that looks similar to the following:

This way, there is only one file to import via the base index.js file.

Final Thoughts

With a little bit of preparation, you should be able to use most of the Javascript world’s latest and greatest features, while still keeping your customers happy by supporting Barb from accounting’s, umm….. interesting browser preference.

Getting Started with React Flexbox Grid

By | RedBit, Technology | One Comment

Web development technology is fast moving and constantly evolving and seems every time you blink, some new framework has been created. In this article I’ll focus on getting started with React Flexbox Grid. Note that this is not a full fledged tutorial nor a description of flexbox; if that’s what you are looking for then you should check out Chris Coyier’s fantastic write-up: A Complete Guid to Flexbox. The goal of this article is to allow you to quickly get up to speed with react-flexbox-grid and then explore more on your own, or join the RedBit team and we’ll help you!

The code for this tutorial can be found here, while a working copy of the final result can be found here.

Introduction

If you’ve been a front end developer for any time at all on a team with a designer, you’ve inevitably been handed an image like the one below and told to make it come to life for the web.
react-flexbox-grid-intro

Easy, right? … a couple floats here, maybe a media query here and there… and soon you’ve got a few hundred lines of css, thinking: there has to be an easier way.

Well, if you’re already using react, there is…

react-flexbox-grid

From the react-flexbox-grid site, the library is described as “a set of React components that implement flexboxgrid.css” In this tutorial, we will use this library to implement the example design above.

Coding the Design

To help things along, I’ve created two sample components for us to place around the screen for different screen sizes:

Field:

react-flexbox-grid-field

Hero: 

react-flexbox-grid-hero

Understanding the Basics

When using react-flexbox-grid, you will deal with three components:

Grid: The base component that will wrap everything else.

Row: Rows within the grid.

Col: Columns within the grid.

The simplest example would be a one row, one column grid:

Column Sizing

In this (overly) simple example, notice the attribute on the Col element: xs={12}. This determines how many columns (out of twelve) that this column should take up on extra small (xs) screens. The four supported screen sizes are:

lg – 75em (most often 1200px) and up

md – 64em (most often 1024px) to 74em

sm – 48em (most often 768px) to 63em

xs – up to 47em

Mobile First

While this may come across as a bit of a buzz phrase, we will be starting with mobile and moving our way up. Due to the way that the library is written (and more specifically the way that media queries are based on a minimum width), starting with desktop will cause nothing but headaches.

So given that, let’s finally get down to coding, beginning with the mobile page.

react-flexbox-grid-mobile

The code for the mobile page is actually quite simple: we wrap each Card in a Row component, then wrap the Hero and six Field components in Col components. Since we are only dealing with mobile, we can set only the xs attribute and be on our way. The code would look like this:

Tablet Size

Notice that the code in the previous section does not respond to different screen sizes at all, indicating that the layout will be of terrible quality on larger displays. We’ll update the code to match the design for Tablet-sized screens first. Looking at the design, the fields should be arranged in two rows of three columns, with the Hero component off to the right.

react-flexbox-grid-tablet

Since we are dealing with a 12 column grid, we should be able to set the column size to 4 (12/3 = 4) and it the library will take care of the rest for the fields.

If you run it now, you’ll notice that we didn’t handle the hero image. In order to do this, we will have to nest the Rows and Cols. Let’s divide the Card into two sections, one for the Hero component and one for the rows of Field components. The resulting code should look like this:

While this looks much closer to the design, you should notice a visual bug right away, the Hero Image is on the wrong side. We could fix the issue by simply moving the image to the end of the parent row… but then the Hero would be at the bottom of the mobile view.

Reordering attributes to the rescue!

react-flexbox-grid has more than the basic column width attributes to help with your layout needs. The one that we’ll use here is Reordering. What this feature allows us to do is specify that the first column of the parent row should be first on mobile, but last for all other page sizes. Unsurprisingly, these attributes are named first and last, respectively. The updated code should look like this:

Desktop

Finally, let’s implement the layout for Desktop. You’ll see that the only true difference is that we now have a row of four columns, with the second row containing two columns aligned with the first and last columns in the first row:

react-flexbox-grid-desktop

First we’ll update the Field rows to use three as the value for lg (12/4=3). While the first row properly has the four Field components lined up, notice that the second row’s columns are aligned incorrectly per our design.
Another feature of react-flexbox-grid – distribution attributes – allows us to specify how to distribute the contents of a Row or Column within the available space. This, too, can be defined per screen size so that the layout on smaller displays is unaffected.

In our case we want to use the between attribute on the Row containing the Field components so that the final two (on the second row) are distributed with the superfluous screen real estate left between them. The final code should look like this:

Final Thoughts

We have only scratched the surface of what can be accomplished with react-flexbox-grid. To read more, check out the GitHub repos for both react-flexbox-grid and the underlyling css framework: flexboxgrid.css.

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.