How to add Microsoft's Azure Services to your Swift apps

Let’s see how to integrate an Azure service into your Swift application in Xcode. What I’m about to show you will work with any of Azure’s iOS libraries since they are all written in Objective-C. 

Just head over to Microsoft’s GitHub repo’s and download the service library you need.

In this tutorial, we’ll install Azure Storage Client Library for blob storage. 

Now, there are a couple of ways to install these libraries. You can use CocoaPods, which if you’re using the same point release of Xcode that the library was created with you should be alright, otherwise, you’re sure to be in for an untold quantity of build errors before you’re up and running. Alternatively, you could install the service as a framework provided it was compiled correctly for your current Xcode version. Or, you can do it the fool-proof way, and just include the Objective-C files into your application and add a bridging header. 

(Dear Apple, please see Nuget Package Manager…)

This is my preferred approach because it's timeless. Doesn’t matter which version of Swift you are using or what version of Xcode you’re using. It just works.

So, assuming you’ve got an existing Xcode project and the Azure service you wish to install downloaded to your computer. We can get started.

In the downloaded folder, look for the Objective-C source code. In the case of Azure Storage Client Library, its a folder named after the service. So, find something like this:

1folder.png

Next, create a new Group in your Xcode project and name it whatever you like. I just named mine “Azure Storage”. Once you have the folder created, go ahead and drag all of the Objective-C files from the folder you downloaded to your new Xcode project folder. Select copy if needed and then “Finish”.

Xcode will then ask you if you want to create a bridging header for these Objective-C files, select “Create Bridging Header”, we’ll need this bridging header to expose Azure to our Swift code.

2bridgingheader.png

By default, Xcode will place that bridging header in with off of Azure’s Objective-C files, I personally move this file into my own project hierarchy since I might reuse this file to incorporate other Objective-C libraries.

If we choose to move it, we’ll need to inform Xcode where we moved it to. We can update our bridging header path by editing the location stored under Objective-C Bridging Header in our Build Settings

Since I moved my bridging header into the main project hierarchy, I had to update my path to “AzureStorageExample/AzureStorageExample-Bridging-Header.h”

3buildsettings.png

Once we have that updated, Xcode will, once again, be able to expose Azure’s Objective C code to our Swift code. Of course, this wouldn’t be a day in the life of an Xcode user if there wasn’t a follow-up error.

4filenotfound.png

Looks like Azure has a dependency on `libxml/xmlwriter.h`, which is pretty simple to resolve. We’ll just have to tell Xcode where the file is. 

We’ll go back into our build settings and select “All” and then “Levels” from our build settings and then search for “Search Paths”. Under header search paths, we’ll add a search path of “${SDKROOT}/usr/include/libxml2”.

If we rebuild we’ll get a gang of errors. We’ve got one last step here.

Go to build phases > link library with binaries and add libxml2.tbd to your project.

6libxml2.png

Rebuilding now should result in a successful deployment.

7proof.png

If you run into any issues you can download the example project from GitHub here. You can also feel free to comment below and I'll do my best to help.

 

How to create a Line Chart using ios-charts

This tutorial is part of a series on iso-charts, if you haven't looked over the introduction I'd advise doing so before continuing. In this tutorial we'll be making a single line Line Chart using iOS-charts.

We’ll begin by creating a new single view application, we’ll name it and click create.

Go to the main.storyboard and search for “View” in the Object Library and you’ll see it near the bottom of the list. Drag the view out onto your view controller, position it however you like and add some basic constraints.

In the identity inspector, set your class to “LineChartView”, if you aren’t seeing an option for such a class please make sure you’ve followed the installation steps listed here.

If everything has gone well your main.storyboard should look like this:

20151018043029addLineChartView.png

Setting up our LineChartView object

Click on your Assistant Editor to reveal your ViewController.swift code. We’ll need to add an import statement and adopt a protocol before we can begin wiring up our Line Chart. Modify your class signature to look like this:

    
import Charts
class ViewController: UIViewController, ChartViewDelegate { //...
    

Now we can control drag from our View to our ViewController class and create an outlet named lineChartView with a type of LineChartView.

20151018043325Screenshot 2015-10-17 22.34.21.png
    
@IBOutlet weak var lineChartView: LineChartView!

We can now start setting the properties of our lineChartView object. in your viewDidLoad add the following lines of code:

    
override func viewDidLoad() {
    super.viewDidLoad()    
    // 1
    self.lineChartView.delegate = self
    // 2
    self.lineChartView.descriptionText = "Tap node for details"
    // 3
    self.lineChartView.descriptionTextColor = UIColor.whiteColor()
    self.lineChartView.gridBackgroundColor = UIColor.darkGrayColor()
    // 4
    self.lineChartView.noDataText = "No data provided"
    // 5
    setChartData(months)
        
}

func setChartData() {

}

  1. We set the ChartViewDelegate to our ViewController.
  2. We change the `descriptionText` that will appear at the bottom of our chart.
  3. Here, we set our description text color to white and our grid background color to dark grey.
  4. We make sure our user get feedback if there is not data provided.
  5. Finally, we call / create a custom function that will add data to our chart.

Setting Data

Of course, a very common thing to chart is money over time, and that what we’ll do in this example. So we’ll modify the signature of our setChartData method call to take an array of strings for our months.

    
setChartData(months) // in viewDidLoad
func setChartData(months : [String]) { }
	

And we’ll have to create an array of months as a class level object. While we’re at it, lets go ahead and add three variables that hold our month-to-month dollar amount.

    
let months = ["Jan" , "Feb", "Mar", "Apr", "May", "June", "July", "August", "Sept", "Oct", "Nov", "Dec"]
    
let dollars1 = [1453.0,2352,5431,1442,5451,6486,1173,5678,9234,1345,9411,2212]

For this part of the tutorial, we'll set our chart up with just one set of data, which will create a single red line across our graph. First the code, then the explanation.

    
func setChartData(months : [String]) {
    // 1 - creating an array of data entries
    var yVals1 : [ChartDataEntry] = [ChartDataEntry]()
    for var i = 0; i < months.count; i++ {
        yVals1.append(ChartDataEntry(value: dollars1[i], xIndex: i))
    }
        
    // 2 - create a data set with our array
    let set1: LineChartDataSet = LineChartDataSet(yVals: yVals1, label: "First Set")
    set1.axisDependency = .Left // Line will correlate with left axis values
    set1.setColor(UIColor.redColor().colorWithAlphaComponent(0.5)) // our line's opacity is 50%
    set1.setCircleColor(UIColor.redColor()) // our circle will be dark red
    set1.lineWidth = 2.0 
    set1.circleRadius = 6.0 // the radius of the node circle
    set1.fillAlpha = 65 / 255.0
    set1.fillColor = UIColor.redColor()
    set1.highlightColor = UIColor.whiteColor()
    set1.drawCircleHoleEnabled = true
        
    //3 - create an array to store our LineChartDataSets
    var dataSets : [LineChartDataSet] = [LineChartDataSet]()
    dataSets.append(set1)
        
    //4 - pass our months in for our x-axis label value along with our dataSets
    let data: LineChartData = LineChartData(xVals: months, dataSets: dataSets)
    data.setValueTextColor(UIColor.whiteColor())
        
    //5 - finally set our data
    self.lineChartView.data = data            
}
  1. We start by creating an array of ChartDataEntry items, to which we'll create and append one item for every value stored in our dollars array.
  2. We create a LineChartDataSet that take our array as its first parameter and a label for its second, this dataset represents the line we'll be creating. We continue by setting the attributes that belong to this class object.
  3. Since we're ultimately on a path to create a multi-lined array, we'll create a data set array that will just hold our single set.
  4. Create a data object that takes our months and our single data set.
  5. Set it as our lineCharView objects data 

Build and run

Build and run and you should see your first chart, congratulations, it gets better from here so move on to part II, where we augment this chart with multiple lines.

20151018050325Screen Shot 2015-10-18 at 12.02.56 AM.png

How to create beautiful iOS-charts by example

68747470733a2f2f7261772e6769746875622e636f6d2f64616e69656c67696e64692f696f732d6368617274732f6d61737465722f4173736574732f666561747572655f677261706869632e706e67.png

Welcome to an 8-part series on iOS-charts. ios-charts is a charting library by Daniel Cohen Gindi that was inspired by Philip Jahoda's Android charting library named MPAndroidChart.

In this series I'll introduce you to each of the 8 different types of charts you can make using iso-charts. Before we get started we'll need to install cocoa pods and install the iso-charts library. 

Below are the available and upcoming tutorials, if you'd like to request a tutorial, please do so in the comments below.

If you don't have iOS Charts installed in your application yet, you can follow this quick installation guide video.

 Installation Video Guide

  1. Line Chart
  2. Bar Chart (upcoming)
  3. Bubble Chart (upcoming)
  4. Candle Stick Chart (upcoming)
  5. Combined Chart
  6. Pie Chart
    • Pie Chart (in progress! example files ready)
  7. Radar Chart (upcoming)
  8. Scatter Chart (upcoming)