Journey towards launching: Follow My Church Mobile App - (iOS & Android)

At the start of 2023 I wanted to work on a pet project to implement Cloud Native App. 
Following a series of brainstorming sessions, I reached the decision to develop an application specifically designed for churches. 

The primary objective is to create a multi-tenant app that enables each individual church to independently manage its own content, while allowing users to access and view the relevant content for their respective churches through a mobile app.

I will attempt to guide you through the entire process of implementing this pet project.

***As this project was undertaken as a personal endeavor, the objective was to minimize costs by predominantly utilizing open source technologies and free tier products***


Follow My Church - High Level Components 


Phase 1: Develop Prototype with App Features for feasibility study

Created a prototype which will help visualize the To-Be product and its features.   

    .....

Tools & Languages: Figma


Phase 2: Find approach to implement a multi-tenant backend system to allow Church Admin/Editor to manage its own contents.

In this scenario, I had to devise an approach for developing a backend web application that functions as a Software-as-a-Service (SaaS) product. This application enables individual churches to onboard and independently manage their own content, such as articles, announcements, events, and donation links.

After extensive research and trials, I selected PayloadCMS an open source headless Content Management System. 

I very much impressed with PayloadCMS, it allowed me to implement the multi-tenant backend app with in a month time. It also comes with out of the box REST & GraphQL API's. 

PayloadCMS support NoSQL MongoDB. Thus, selected MongoDB Atlas with Serverless version which was much cost effective and easy to setup.

Tools & Languages: React JS, PayloadCMS, MongoDB Atlas
Production Site: Follow My Church Backend


Phase 3: Theming - Logo's, Fonts, Color's Etc.

To achieve a more polished and professional appearance for my app, I initially chose my own themes, but the results were not as impressive as I had hoped. 

Consequently, I made the decision to seek assistance from a freelancer who aided me in designing logos, selecting fonts, colors, and other visual elements for both the backend and mobile app. 

Credit: @AnjuTuscano - Please visit her blog for more information.
UI Elements for Follow My Church App


Phase 4: Selecting the Cloud Platform - Google Cloud Platform

It is obvious I will need the cloud platform to host the backend/Frontend apps and services. For years, I have been experimenting with Google Cloud Platform and since I was pretty comfortable using GCP products, I decided to implement it on GCP.

Below are the key GCP services used in this project:

  • Cloud Run - A fully managed platform for containerized Apps. 
    • Service Hosted: 
      • PayloadCMS as a web and backend services
      • Tagged with Custom Domain Name
    • Reasons for selection:
      • It allow to host your docker container in serverless mode, and pricing is based on the number of transactions. Since, I am not expecting much traffic at the start, I didn't wanted to pay for dedicated server and using Kubernetes was overkill. 
  • Cloud Storage - To store uploaded Documents & Images
    • All the content i.e. uploaded by Church's are saved with applied security on Cloud Storage. 
  • Cloud Artifact - The Docker build generated via GitHub is pushed and maintained in GCP Artifact storage for versioning. 
  • Cloud Functions - To host serverless functions. 
    • Service Hosted:
      • Church Middleware Service which is implemented in NodeJS to orchestrated calls from Mobile App to Backend CMS services with API security etc.
    • Reasons for Selection:
      • The middleware was implemented using Node JS Framework and it was very simple to host it as a API using Cloud Functions.

***Approaches taken are towards using as serverless services as much possible, as it is easy to scale on demand and incur no cost if you are a startup.

Tools & Languages: Node JS, Cloud Run, Cloud Function, Docker, Github


Phase 4: Selecting technology for implementing mobile app

I want to use the framework which will allow me build app for all platform i.e. Android, IOS, Web. 

After exploring, React Native, Ionic, Flutter, I decided to implement it in Flutter because of the wide community support, cool widgets, animation etc. 

Tools & Languages: Flutter


Phase 5: Selecting Mobile App Backed Services

To implement any scalable mobile app, we need a mobile app backend service platform which will help us implement and scale on need basis. 

After researching and trying, AWS Amplify and Google Firebase, I decided to go with Google Firebase for its simplicity, examples, use cases and my familiarity with GCP platform. I also wanted to keep infra limited to single cloud provider. 

Tools & Languages: Firebase - Authentication, NoSQL DB,  Functions, Analytics, App Notifications etc.


Phase 6: Implementing a Middleware Service between Mobile App and Headless CMS

The Scenario was that the Church Admin's/Editor's will use the backend System to publish the Articles. This Articles will have Fonts, Lists, Images.

In order for Mobile app to render the Articles & Events, we needed a Middleware service. Also, it was bit tricky to add the JWT Validation on PayloadCMS, thus implemented the JWT validation in Middleware API.


Phase 7: Implementing Actual Mobile App and its Features

The mobile app implemented has below features:

  • List and View Articles
  • List and View Events
  • List and View Announcements 
  • List and View Mass Timings
  • Donation Options
  • Search Churches
  • About My Church Info
  • App Notifications using Firebase Messaging
  • App Analytics using Firebase Analytics
  • Sign in with Google using Firebase Authentication

Phase 8: Implementing CI/CD for Flutter Mobile App using Code Magic

I wanted an approach to build and publish the App in draft release on Google Play. CodeMagic is the cool tool to set it up with your Github Repo.

You can configure it either start on Git Check in or initiate it manually.


Phase 9: Creating Marketing materials for publishing the App - Canva

In Order to publish app on Play Store, I needed to create the marketing video. Canva was a quick option to create demo videos.


Phase 10: Signing up for Google Play and releasing beta version and sharing it with Friends and Family


Phase 11: Submitting the App for approval on Play Store and publishing it. 


Phase 12: Implementing the web site for users to know about the app. 

Hosted the simple ReactJS Site to provide details about the App. The site is hosted on Firebase Hosting.

Tools & Languages: Firebase - Hosting


Code Repo & Development tools:

  • Github
  • Github Codespace with Visual Studio
  • Android Studio for Flutter


You can view the App by downloading it from Play Store. 

Follow My Church Google Play App 


If you want to check demo videos on App and Backend check below site.

https://followmychurch.org/


P.S: iOS Version will launch soon..


Popular posts from this blog

JAVA embedding in Oracle SOA 12c

Image
In this post we will explore how to EMBED Java or call Java API from Oracle SOA BPEL process. In order to demonstrated this, I have created a simple JAVA project with 3 classes. 1.        Account.java -> This class represent Account DTO       2.       Party.java -> This class represent a party (customer) DTO       3.       GetNumber.java -> This class contains the method that takes Party DTO as input and apply some business logic and return party’s AccountDTO in response. public Account getNumber(Party party) The above classes are created to simulate the calling of actual business logic API’s. Account.java Party.java GetNumber.java public class Account {     public Account() {         super();     }     String account;     public void setAccount(String account) {         this.account = account;     }     public String getAccount() {         return account;     } } public class Party {     public Part
Read more

Passing/Receiving HTTP header in SOA BPEL

Image
In this example we will explore how to pass or receive the parameters from HTTP header. We will explore below two scenarios, To receive the HTTP header from SOAP request. To pass the HTTP header while calling soap service. SOA version used: 12.1.3c To receive the HTTP header from SOAP request: First we need to add the property “oracle.webservices.http.headers” under binding.ws in Service element in composite.xml. This property contains the comma separated parameters that we are expecting in request. Example,  ENV,VERSION. <binding.ws port="http://xmlns.oracle.com/SOA_Learning/HTTPHeader/HTTPHeaderTest#wsdl.endpoint(httpheadertest_client_ep/HTTPHeaderTest_pt)">          <property name="oracle.webservices.http.headers">ENV,VERSION</property> </binding.ws> Now in BPEL source under receive activity, we need add <fromProperties> element which will copy the parameters from HTTP header to BPEL variable.
Read more

Integrating Weblogic with IBM MQ over JMS

Image
We can integrate weblogic with IBM MQ over JMS by creating Foreign JMS server with Links in weblogic server. We need to create .binding file which will acts as file based JNDI provider to create JMS binding to MQ resources. Will first explain how to create .binding file and then will configure weblogic to use the same. Steps to create .binding file: Firstly we need to add below jar’s in CLASSPATH jms.jar com.ibm.mq.jar com.ibm.mqjms.jar jta.jar connector.jar jndi.jar providerutil.jar fscontext.jar Create JMSProperties.config file with below properties INITIAL_CONTEXT_FACTORY=com.sun.jndi.fscontext.RefFSContextFactory PROVIDER_URL=file:/tmp/mqm/jndi SECURITY_AUTHENTICATION=none Run below command ./JMSAdmin -v JMSProperties . config InitCtx> def qcf(ForeignCF) TRANSPORT(CLIENT) HOST(localhost) PORT(1414) CHANNEL(MQCHANNEL) QMGR(MQMRG) def q(MQ1) qmgr(MQMRG) queue(MQ1) def q(MQR1) qmgr(MQMRG) queue(MQR1) display ctx
Read more