So you’ve purchased our Premium Firebase Ecommerce App Template (download here) and now you want to get it up and running. Follow the next steps in order to build and customize your own app. This tutorial assumes this is the first time you’re creating an iOS app, so depending on your iOS experience, you might be able to skip a few steps. Also, this document gets into all the details, so many of the steps won’t apply to you. We’re just trying to cover all the possible corner cases so that you won’t spend more than 10 minutes to use the downloaded iPhone theme.
Run the app in Xcode
In order to compile the Swift template in Xcode, you’ll need to do these steps:
- Download and install the latest version of Xcode, from the App Store. This might take a while since Xcode’s size is pretty large.
- Download Cocoapods (only if you do not have it already), by running:
gem install cocoapods
If you can’t run this, please download and install Ruby first. Check Ruby’s installation guide, to see proper instructions for your operating system.
- Unpack the downloaded archive with the Firebase Ecommerce App Template
- Fire up a terminal (or iTerm, if you’re using it) and navigate to the unarchived folder:
Install the pods dependencies (listed in Podfile), by executing the following instruction in the command line:
You should this output in your terminal:
- Open the ShoppingApp.xcworkspace file in Xcode (by double clicking on it, or by running “open ShoppingApp.xcworkspace” in your terminal)
- Build and run the Swift code (by pressing “Cmd + R” or by clicking the “Run” button, in the top-left bar). You should see a simulator firing and loading the app template you’ve seen in the screenshots.
As you can see, by default, the app template loads a few sample products from our test Firebase database. We used those products and categories for our demos as well. In order for you to load your own product, you’ll need to link your Firebase Database to the downloaded source code. To achieve this, read on.
Connect your own Firebase Database
First of all, you need to import all your products and e-commerce categories into Firebase Database. To do that:
- Go to Firebase Console and create an account if you don’t have one yet.
- Click on “Add a project” and create your own project (name it as you please)
- Go to Firebase Console -> Database. This is where you should add your data (products and categories). In order for your data to be compatible with our iOS app template, you need to structure your data in two different tables (“products” and “categories”). Each of those tables will contain the data with all the information needed. See our example below to understand how the code expects the data to be structured:
Feel free to download our mock database json file and import it into your Firebase Database, using the “Import JSON” option pictured below:
- Once you have the data in your Firebase Database, with the correct structure, you’ll need to download the GoogleService-Info.plist file by following these steps. Go to the ShoppingApp folder (where you downloaded the purchased archive) and replace the existing GoogleService-Info.plist file, with the one you’ve just downloaded. This basically configures the iOS template to use your own Firebase Database, rather than our Demo data store.
- Run the app again! That’s it. You’re now seeing your own products and categories featured in the app.
Reskin the Firebase Ecommerce App Template
In order to reskin the theme, please locate UIConfiguration.swift file. This file contains the colors and dimensions of all the UI elements displayed across the template, as well as the titles and icons used in menus. Their names are self-explanatory, so it’s really easy for you to change them. For instance, if you want to change the main theme color from blue to green, just replace
static let mainThemeColor = UIColor(hexString: "#2C80E1", alpha: 0.9)
static let mainThemeColor = UIColor(hexString: "#A7C51A", alpha: 0.9)
Build and execute the app again, and the template just turned from blue to green. Mindblowing, isn’t it? Now you have your own Firebase Ecommerce App! Wonderful!
If you want to customize the theme even more, just take a look at the ViewControllers folder. Each screen you see is represented by a file there (a UIViewController class). Just modify those files, in order to modify the screens in the app.
Please don’t hesitate to contact us, if you have any questions or ideas. We love to hear from our customers! Enjoy!