DAY 11 - 12 Of #100DaysOfFlutter - iOS, Android & Firebase Setup

For days 11 and 12, I did some "basic" stuff; I will explain some of it and the valuable lessons I picked up in performing these tasks.

Application Certificates & Profiles

Upon setting up my iPhone for Flutter development, I learned all apps in the App Store need to be signed using a certificate to identify who the developer(s) is/are. Certificates are usually owned by the developer or organization developing an app and are used for signing any app they develop.

Application profiles act as IDs used in your app and its different flavours/versions. These versions are the development and production versions of your app, and each of them is signed with its profile. The profiles determine what a flavour can and cannot do.

To send your app to the App Store, one needs to ensure the app is signed with their certificate and their production profile, which is hooked up to their production certificate identifying them as the developer.

Bundle ID & App ID

A Bundle Identifier is a unique id that differentiates your app from others in the Apple ecosystem. Apple advises developers to use a reverse domain name notation com.tsmakaay for choosing an app's bundle id. You don't have to own the domain name to use it since it only ensures the uniqueness of your bundle id. After, you're advised to append the name of your app to the reversed domain name to complete your bundle id.

An App ID Apple uses your app id to enable app services such as iCloud, push notifications, and other functions in your app. App ids are generated by Apple generating a team id and prepending it to your bundle id. abcy283.com.tsmakaay.your_app_name

Since I do not have an android phone, I didn't go through the android setup, but I learned a couple of things, ADB and the difference between an iOS simulator and an Android emulator;

ADB - Android Debug Bridge The ADB allows the developer to communicate with and perform specific tasks with the Android phone straight from the command line.

iOS Simulator & Android Emulator The iOS simulator imitates how your app will work on an iPhone when you run your Flutter app, an Android emulator does the same but with a different approach. The emulator takes into consideration the phone emulator selected (Samsung S6) and mimics your application and exactly how it will function on an S6, factoring in the phone's capabilities and limitations, i.e., if your app runs slowly on a real S6, then it will run slowly in the S6 emulator.

Firebase Backend Setup

1. To form my firebase backend, I had to install the FlutterFire CLI using the dart pub global activate flutterfire_cli command. FlutterFire is a set of plugins for connecting flutter to firebase.

2. Log into my preferred google account in Vs Code using firebase login for my firebase project to be tied to an account.

3. Issue flutterfire configure and create a project using a unique project id.

4. Select my preferred platforms (iOS and Android).

5. Enter my iOS bundle id.

6. The setup is done, and you're provided with firebase ids for both platforms.

Challenges

I faced two primary challenges during this process.

1. Upon setting up my iPhone to run my app, it wasn't launching, and the reason was that I had to run my app in Xcode first before I could run it from flutter onto my phone. Running the app in Xcode also gave an error stating firebase core wasn't added to my project, which wasn't so. The solution was to open my flutter iOS folder with Xcode for it to access all my dependencies.

2. I was faced with an error firebase cli v11.25.1 is incompatible with node.js v12.18.3 please upgrade node.js to version ^14.18.0 || >=16.4.0 when I ran the firebase login command. I tried uninstalling and installing new node versions in different ways, but it resets to 12 the moment I restart the terminal. After 5+hrs, the solution was to deactivate nvm nvm deactivate before node uninstall