Bebbo - an interactive mobile application for parenting

Table of Contents

• Introduction
• Technology stack
• Getting started
• Install Bebbo in localhost
• How to run
• License

Introduction

Bebbo is a multi-platform mobile application available on both iOS and Android. Discover the most comprehensive parenting app that provides you with all the tools and expert advice you need, all in one app, to support your child's growth and development from birth to age 6! Personalize this app to access daily toddler games, parenting advice, and tips on taking care of both your child and your own well-being. Navigate easily between multiple child profiles and receive advice tailored to each child's developmental needs.

Bebbo offers:

• Expert advice and parenting articles covering early learning, health, nutrition, caregiving, and safety, tailored to both your questions and your child’s age.
• Personalized 'learning through play' activities and games that support various critical areas of development, including cognition, language, motor skills, and social-emotional skills.
• Brief instructional videos and evidence-based support for each stage of your child’s development.
• The ability to search Bebbo’s collection of hundreds of activities and articles by topic, age, or area of development.
• The ability to save and share your favorite content.

Bebbo provides you with an interactive set of tools such as:

• Development milestones tracker
• Baby growth tracker
• Vaccination child immunization tracker
• Child health check-up tracker

The app can also operate in an offline mode in environments with limited internet connectivity. It is offered in several languages and is free to use. There are no internal advertisements, and you can share it with a partner.

Technology stack

• React Native
  • Project is set with Latest version of react native:
    • React native - 0.72.5
  • Several React Native modules have been incorporated in order to speed up the development.
  • Refer to package.json for more details.
• TypeScript
  • TypeScript was used as a programming language.
  • The same source code compiles into iOS and Android applications.
• NPM
  • NPM (Node Package Manager) was used to install third party packages and to run various scripts necessary during development.
    • Node version - 21.2.0
    • NPM version - 10.3.0

Getting started

• Either Mac or Windows can be used for development.
• Follow these instructions in order to prepare machine for development, specifically “React Native CLI Quickstart”.

Install Bebbo in localhost

1. Clone the repo via GitBash

git clone https://github.com/UNICEFECAR/parenting-app-bebbo-mobile.git

2. Install NPM packages (DO NOT USE yarn!)

npm install

3. Only on Mac, go to "ios" folder, and run

pod install

Before running iOS App on Device, necessary certificate setup from Apple developer account is required. After each time pod install, copy [CP-User] [RNFB] Core Configuration && [CP-User] [RNFB] Crashlytics Configuration in each target’s build phases if missing from main target (ParentBuddyApp). In Project use below targets.

Project Target:

1. ParentBuddyApp - Bebbo Production target
2. ParentBuddyAppDev - Bebbo Development target
3. ParentBuddyAppXk - Foleja Production target
4. ParentBuddyAppXkDev - Foleja Development target

Steps to add script:

• Click on target’s build phases add on + sign.

• Add new run script phase.

  

• Rename it to [CP-User] [RNFB] Core Configuration

  

• Copy script from ParentBuddyApp target’s “[CP-User] [RNFB] Core Configuration” script to other selected target’s “[CP-User] [RNFB] Core Configuration” script in “ParentBuddyAppXk”,“ParentBuddyAppXkDev”,“ParentBuddyAppDev” targets.

  

• Copy files path from input files from ParentBuddyApp target and paste to other targets “[CP-User] [RNFB] Core Configuration” script input files in “ParentBuddyAppXk”,“ParentBuddyAppXkDev”,“ParentBuddyAppDev” targets.

  

• Click on target’s build phases add on + sign.

• Add new run script

  

• Rename it to “[CP-User] [RNFB] Crashlytics Configuration”.

  

• Copy script from ParentBuddyApp target’s “[CP-User] [RNFB] Crashlytics Configuration” script to other selected target’s “[CP-User] [RNFB] Crashlytics Configuration” script in “ParentBuddyAppXk”,“ParentBuddyAppXkDev”,“ParentBuddyAppDev” targets.

  

• Copy files path from input files from ParentBuddyApp target and paste to other targets “[CP-User] [RNFB] Crashlytics Configuration” script input files in “ParentBuddyAppXk”,“ParentBuddyAppXkDev”,“ParentBuddyAppDev” targets.

  

4. Copy fontello.ttf file from https://github.com/UNICEFECAR/parenting-app-bebbo-mobile/blob/main/app/assets/fonts/fontello.ttf to node_modules/react-native-vector-icons/Fonts
   Refer this library for custom fonts: https://github.com/oblador/react-native-vector-icons

5. Configure Firebase services

   • Create Firebase project

   • Add iOS and Android apps to Firebase project the standard way

   • Use Firebase wizards to create these:

     • google-services.json
     • GoogleService-Info.plist

   • Copy google-services.json files for Android for various flavours at different locations as mentioned here:

     Prod

         https://github.com/UNICEFECAR/parenting-app-bebbo-mobile/tree/main/android/app/src/prod 
     

     Prodstaging

     https://github.com/UNICEFECAR/parenting-app-bebbo-mobile/tree/main/android/app/src/prodstaging 
     

     Xk

     https://github.com/UNICEFECAR/parenting-app-bebbo-mobile/tree/main/android/app/src/xk
     

     xkstaging

     https://github.com/UNICEFECAR/parenting-app-bebbo-mobile/tree/main/android/app/src/xkstaging 
     

   • Copy GoogleService-Info.plist files for iOS for various flavours at different locations as mentioned here:

     Prod

     https://github.com/UNICEFECAR/parenting-app-bebbo-mobile/tree/main/ios/GoogleServices/Production
     

     Prodstaging

     https://github.com/UNICEFECAR/parenting-app-bebbo-mobile/tree/main/ios/GoogleServices/Development
     

     Xk

     https://github.com/UNICEFECAR/parenting-app-bebbo-mobile/tree/main/ios/GoogleServices/Xk
     

     xkstaging

     https://github.com/UNICEFECAR/parenting-app-bebbo-mobile/tree/main/ios/GoogleServices/XkDevelopment
     

6. Configure google Signin and GDrive Import/Export

   • Configure Google Signin and GDrive Import/Export
   • Enable Google Drive API from Cloud Console.
   • Choose Scope For Drive Access
   • Copy details of REVERSED_CLIENT_ID as in the below example from GoogleService-Info.plist and add in .env file as projectNumber and clientIdKey.
     • Format in GoogleService-Info.plist will be like com.googleusercontent.apps.${projectNumber}-${clientIdKey}

7. Steps required while creating Flavour builds for both Bebbo and Foleja.

   1. Follow below steps for Bebbo Prod and ProdStaging:

   • In apiConstants.ts change buildFor const value to buildForBebbo as follows :

     export const buildFor = buildForBebbo;
     

   • In tsconfig.json keep dynamicImportsClass value to ./app/bebbo/* as follows :

      "@dynamicImportsClass/*": ["./app/bebbo/*"]
     

   • In metro.config.js keep blacklistRe value to /xk/.*/ as follows :

     blacklistRE: blacklist([/xk\/.*/])
     

   • In babel.config.js keep dynamicImportsClass value to ./app/bebbo as follows :

     '@dynamicImportsClass': './app/bebbo'
     

   • Run below command to generate vector images based on flavour folders :

     npx react-native-vector-image generate
     

   • Create .env file at project root and add below 6 variables in it :

     apiUrlDevelop = 'https://hostname.com/api' (server api endPoint)
     facebookAppDisplayName=XXXXXXXXXXXX (For Facebook Analytics.Get these details from Facebook developer console)
     facebookAppId=XXXXXXXXXXXX (For Facebook Analytics.Get these details from Facebook developer console)
     facebookClientToken=XXXXXXXXXXXX (For Facebook Analytics.Get these details from Facebook developer console)
     projectNumber=XXXXXXXXXXXX (For Google SignIn. Get it from step 5)
     clientIdKey=XXXXXXXXXXXX (For Google SignIn. Get it from step 5)
     

   2. Follow below steps for Foleja Prod and ProdStaging:

   • In apiConstants.ts change buildFor const value to buildForFoleja as follows :

     export const buildFor = buildForFoleja;
     

   • In tsconfig.json keep dynamicImportsClass value to ./app/xk/* as follows :

      "@dynamicImportsClass/*": ["./app/xk/*"]
     

   • In metro.config.js keep blacklistRe value to /bebbo/.*/ as follows :

     blacklistRE: blacklist([/bebbo\/.*/])
     

   • In babel.config.js keep dynamicImportsClass value to ./app/xk as follows :

     '@dynamicImportsClass': './app/xk'
     

   • Run below command to generate vector images based on flavour folders :

     npx react-native-vector-image generate
     

   • Create .env file at project root and add below 6 variables in it :

     apiUrlDevelop = 'https://hostname.com/api' (server api endPoint)
     facebookAppDisplayName=XXXXXXXXXXXX (For Facebook Analytics.Get these details from Facebook developer console)
     facebookAppId=XXXXXXXXXXXX (For Facebook Analytics.Get these details from Facebook developer console)
     facebookClientToken=XXXXXXXXXXXX (For Facebook Analytics.Get these details from Facebook developer console)
     projectNumber=XXXXXXXXXXXX (For Google SignIn. Get it from step 5)
     clientIdKey=XXXXXXXXXXXX (For Google SignIn. Get it from step 5)
     

How to run

After you install the application you can create build files for various flavors with below npx commands.

Prod

npx react-native run-android --variant=prodRelease --appId org.unicef.ecar.bebbo (apk)
cd android && ./gradlew bundleProdRelease (aab)
npx react-native run-ios --scheme ParentBuddyApp (ipa)

Prodstaging

npx react-native run-android --variant=prodstagingRelease --appId com.datamatics.bebbo (apk)
cd android && ./gradlew bundleProdstagingRelease (aab)
npx react-native run-ios --scheme ParentBuddyAppDev (ipa)

xk

npx react-native run-android --variant=xkRelease --appId org.unicef.kosovo.foleja (apk)
cd android && ./gradlew bundleXkRelease (aab)
npx react-native run-ios --scheme ParentBuddyAppXk (ipa)

xkstaging

npx react-native run-android --variant=xkstagingRelease --appId com.datamatics.foleja (apk)
cd android && ./gradlew bundleXkstagingRelease (aab)
npx react-native run-ios --scheme ParentBuddyAppXkDev (ipa)

License

Distributed under the GPL-3.0 license. See LICENSE for more information.