Show Image Stored in Firebase Storage (Google Cloud) In UIImageView?

Question

Iv been working on a game for 6 months now and have a problem that i cant seem to fix. There are some questions similar but none exactly fitting my situation.

Summary

My game has 200 items. Each Item has a Unlocked Image showing the actual Item and an Locked Image just showing it greyed out. I am going to put all 200 Unlocked Images into Firebase Storage and about 15 Locked Images (since each item has about 15 skins, the base is always the same) too.

Problem

The StoreViewController page is a UIViewController with a CollectionView embeded inside of it. When creating the CollectionViewTableCells There is the UIImageView for each cell. Each cell iterates through a Array of Dictionaries like so (normally this Array will have 150 + dictionaries) :

let items : [[String:String]] = [

    [
        "type" : "star",
        "model" : "blackOne",
        "available" : "no",
        "rarity" : "normal",
        "totalOwned" : "1",
        "price" : "9,999",
        "u-image" : "blackone-u",
        "l-image" : "star-l"
    ],
    [
        "type" : "star",
        "model" : "blackTwo",
        "available" : "no",
        "rarity" : "normal",
        "totalOwned" : "1",
        "price" : "10,500",
        "u-image" : "blacktwo-u",
        "l-image" : "star-l"
    ],
    [
        "type" : "square",
        "model" : "black-New",
        "available" : "no",
        "rarity" : "normal",
        "totalOwned" : "1",
        "price" : "12,950",
        "u-image" : "blacknew-u",
        "l-image" : "square-l"
    ]
]

The u-image & l-image holds the name of the appropriate image for that item. Those same images that are uploaded into Firebase Storage.

Question

How should I use the u-image & l-image to grab the Firebase Storage and display the correct image in each UICollectionViewCell's UIImage ? I need to grab ~ 200 images to display each time they user goes to the StoreViewController .

Answer 1

I would strongly consider replacing "u-image" and "l-image" with the public unguessable url (eg "u-image-url") that is automatically generated for your image. This Url can be downloaded without special code so you can follow steps here to add placeholders and leverage local image caching. You can get this public url via the firebase console and also programmatically.

Via the console:

Programmatically:

// Get a reference to the storage service, using the default Firebase App
FIRStorage *storage = [FIRStorage storage];
// Create a storage reference from our storage service
FIRStorageReference *storageRef = [storage referenceForURL:@"gs://<your-firebase-storage-bucket>"];
FIRStorageReference *imagesRef = [storageRef child:<uimageString_from_array + '.png'>];
[imagesRef downloadURLWithCompletion:^(NSURL URL, NSError error){
  if (error != nil) {
    // Handle any errors
  } else {
    [cell.imageView setImageWithURL:URL placeholderImage:[UIImage imageNamed:@"placeholder.png"]];
  }
}];

I would store this url in your database/array instead of decoding it at runtime because its simpler and you'd have a delay setting the placeholder image.