BUILDING THE FOUNDATION FOR AN AI-INTEGRATED CAREER COACHING APPLICATION WITH FLUTTERFLOW PDF Free Download
1 / 42
/42
100%
BUILDING THE FOUNDATION FOR AN AI-
INTEGRATED CAREER COACHING APPLICATION
WITH FLUTTERFLOW
Bachelor’s Thesis
Electrical and Automation Engineering
Spring 2024
Mohsen Fadaee
Degree Programme in Electrical and Automation Engineering Abstract
Author Mohsen Fadaee Year 2024
Subject BUILDING THE FOUNDATION FOR AN AI-INTEGRATED CAREER
COACHING APPLICATION WITH FLUTTER FLOW
Supervisor Jussi Horelli
This thesis explores integrating artificial intelligence (AI) into coaching services,
focusing on developing a career coaching application for Consult For Growth. It
aims to enhance coaching effectiveness through AI technology.
The research examines software selection, implementation procedures, and
required tools for AI integration. It compares Bubble and FlutterFlow platforms for
developing the app and details the app framework construction in FlutterFlow,
including user authentication, profile page design, course enrolment, and
payment integration.
It discusses FlutterFlow's use in creating an AI-integrated app, focusing on Dust
API integration and AI-based course search.
Additionally, it addresses essential software tools for AI integration and provides
recommendations for future development and enhancing Consult For Growth’s
website.
The findings of this research contribute to the advancement of coaching
practices, offering valuable insights for Consult For Growth and the broader
coaching community.
Keywords: Artificial Intelligence, Career Coaching, Mobile App Development,
FlutterFlow.
Pages: 28 pages and appendices 10 pages
Content
1 Introduction ............................................................................................................ 1
2 Exploring Software ................................................................................................. 2
2.1 Selecting software for an AI-integrated coaching App .................................... 2
2.2 Bubble vs FlutterFlow .................................................................................... 4
3 Building app framework in FlutterFlow .................................................................... 7
3.1 Initial FlutterFlow development ...................................................................... 7
3.2 User Authentication and sign-up method using Firebase ............................... 8
3.2.1 User authentication mechanisms ....................................................... 9
3.2.2 Email verification and password reset .............................................. 10
3.3 Setting up Firebase for project integration ................................................... 11
3.4 Designing dynamic profile pages in FlutterFlow ........................................... 14
3.5 Course enrolment ........................................................................................ 15
3.6 Integration of payment processing in FlutterFlow ......................................... 16
3.6.1 Online Transactions ......................................................................... 17
4 Utilising FlutterFlow to create an AI-integrated career coaching App ..................... 17
4.1 Integration with Dust API ............................................................................. 18
4.2 Implementing course search functionality with AI ......................................... 19
5 Software tools for AI integration in FlutterFlow ...................................................... 20
6 Research findings and practical implementation! .................................................. 21
6.1 Knowledge base .......................................................................................... 21
6.2 Practical implementation.............................................................................. 21
6.3 Project implementation process ................................................................... 22
7 Conclusion ........................................................................................................... 22
8 Recommendations for future development ............................................................ 24
8.1 Recommendations for Consult For Growth Website .................................... 25
References .................................................................................................................. 27
Figures, tables and equations
Table 1. Comparison of software aspects ........................................................................ 4
Table 2. FlutterFlow and Bubble Comparison .................................................................. 6
Figure 1. FlutterFlow starting page ................................................................................... 8
Figure 2. Firebase authentication page ............................................................................ 9
Figure 3. The authentication in Firebase ........................................................................ 14
Figure 4. FlutterFlow profile page ....................................................................................15
Figure 5. Widgets of success booking ............................................................................ 16
Figure 6. Dust API calls in FlutterFlow ............................................................................ 18
Figure 7. The AI page of the App ...................................................................................19
Figure 8. Firebase Cloud………………………………………………………………....App1/1
Figure 9. Firebase storage .................................................................................... App1/2
Figure 10. Firebase Authentication. ....................................................................... App1/3
Figure 11. Firebase Cloud Rules. ........................................................................... App1/4
Figure 12. Stripe Documentation page .................................................................... App2/2
Figure 13. The Dust API setup page ...................................................................... App2/2
Figure 14. Stripe page in FlutterFlow ...................................................................... App2/2
Figure 15. Set up Strip key in FlutterFlow ....................................................................... App2/2
Figure 16. Transaction pages in FlutterFlow .................................................................. App2/2
Appendices
Appendix 1. Detailed FlutterFlow Setup Guide
Appendix 2. Creating a Firebase Project
Appendix 3. A Comprehensive Guide to Set Up Payment Process
1
1 Introduction
The coaching industry is undergoing significant transformations in response to the integration
of AI tools. This stream in AI technologies has led to a fundamental shift in coaching models,
necessitating that coaching businesses adapt. Rather than viewing AI as a replacement for
human coaching, it should be adopted as a tool. To remain, coaching companies need to
advance their practices by integrating AI-integrated applications alongside traditional
coaching methods. This adaptation to advancements in AI technology ensures that coaching
services stay effective and competitive in the evolving landscape. (Technology in Coaching,
n.d.)
The integration of AI into coaching holds promise in various aspects, including skill
development, personalised assessments, real-time assistance, and data-driven insights.
(Terblanche, N. 2020, p. 152-165)
This thesis is conducted for Consult For Growth, a coaching business. It aims to develop an
AI-integrated app to enhance traditional coaching programs with AI support. The objective is
to lay the groundwork for an AI-Integrated Career Coaching App, which has the potential to
transform how Consult For Growth delivers coaching services and expands its business
reach.
This thesis explores the following research question:
1. What is the most suitable software for developing an AI-integrated career coaching
app?
2. What steps are required to use the most suitable software to make the app?
3. What software tools are needed to add AI features?
This thesis acknowledges the rapid evolution of technology and software tools, which
presents challenges and opportunities. While FlutterFlow was strategically chosen as the
platform, the dynamic nature of the tech landscape suggests that newer, more advanced
options may arise in the future. Additionally, the limited availability of comparable
applications poses another challenge for exploration. Integrating AI into the app adds
complexity, requiring continuous evaluation of emerging AI tools and technologies.
2
2 Exploring Software
This section examines and compares various software options that can integrate AI. This is
to answer the first research question “What is the most suitable software for creating an AI-
integrated career coaching app?”
When exploring suitable software for developing an AI-integrated coaching app, the theory of
AI and machine learning (ML) in mobile app development becomes relevant. As articulated
by (Ke Zhang & Ayse Begum Aslan, 2021), AI and ML technologies have revolutionised the
landscape of mobile app development, enabling developers to create highly interactive,
personalised, and engaging apps that adapt based on user feedback and behaviour.
These technologies enable apps to learn from user input, make informed decisions, and
predict user behaviour, thus transforming the traditional app development process.
AI improves mobile apps by optimising search results, facilitating natural language
processing, and detecting anomalies. Therefore, when seeking to develop an AI-integrated
coaching app, understanding the capabilities and implications of AI and ML in mobile app
development is important.
Additionally, the challenges associated with AI-integrated apps, such as high development
costs and data security concerns, underscore the importance of selecting the most suitable
software that can effectively leverage AI while addressing these challenges. As AI and ML
technologies continue to evolve, their adoption in mobile app development is expected to
increase, promising more powerful, engaging, and personalised apps.
2.1
Selecting software for an AI-integrated coaching App
The following section provides a comparative analysis of several software platforms for
building AI-integrated career coaching apps. Each software's unique features, strengths, and
limitations will be explored, focusing on FlutterFlow, Bubble, MIT App Inventor, Thunkable,
and Kodular. Through this analysis, we aim to understand the suitability of each software for
the requirements of this project, facilitating an informed decision-making process.
3
FlutterFlow is a platform known for its visual design capabilities, aiding in app development.
Its integration with AI components enhances functionality, allowing for a blend of design and
technology. Additionally, FlutterFlow supports cross-platform development, increasing
versatility in deploying applications. (Flutterflow Doc, n.d.)
However, beginners may face difficulties due to a steep learning curve, and native feature
support limitations could hinder their suitability for specific projects.
Bubble is known for its no-code development capabilities and provides a practical solution for
rapid prototyping with its user-friendly interface. The platform supports AI integration through
plugins, which enhances its functionality. However, Bubble's scalability is limited when
handling complex applications, and its reliance on third-party plugins may raise concerns
about overall reliability. (Bubble, n.d.)
MIT App Inventor features a drag-and-drop interface that is simple and well-suited for
educational purposes and basic AI integration. However, there are concerns about its lack of
flexibility with advanced features and its limitations in scalability for larger and more complex
applications. (MIT App Inventor, n.d.)
Thunkable uses a no-code, visual programming approach, facilitating AI integration and
cross-platform development. However, Thunkable may have limited customisation options,
and some advanced features may require coding proficiency. (Thunkable, n.d.)
Kodular is known for its drag-and-drop functionality, it is suitable for educational app
prototyping and offers AI integration capabilities. Even so, its limitations become evident with
complex app requirements, potentially resulting in reduced performance when handling
intricate AI functionalities. (Kodular, n.d.)
The key aspects of the different software are highlighted in Table 1.
4
Table 1. Comparison of software aspects.
Aspect
FlutterFlow
Bubble
MIT App
Inventor
Thunkable
Kodular
Ease of Use
Steep learning
curve for
beginners
User-friendly
interface
Simple drag-and-
drop
No-code
approach
Drag-and-
drop
AI Integration
Robust
integration
Supports AI
integration
Basic AI
integration
Supports AI
integration
Offers AI
integration
Cross-platform
Development
Yes
Not specified
Not specified
Yes
Not specified
Scalability
Concerns about
limitations
Limitations in
scalability
Scalability
limitations
Limited
customisation
Potential
performance
issues
Reliability
Challenges with
limitations
Potential impact
on reliability
Concerns about
scalability
Limited
customisation
options
Concerns
about
performance
After evaluating the available software options, MIT App Inventor and Thunkable appear as
beginner-friendly choices, with potential scalability and customisation limitations for
advanced AI functionalities. Similarly, Kodular, while suitable for basic coaching apps with AI
integration, may encounter scalability challenges for more intricate projects.
Considering these factors, the options have been narrowed down to Bubble and FlutterFlow.
FlutterFlow stands out for its AI integration capabilities, cross-platform capabilities, and
scalability, making it a strong contender for the project. However, it comes with a steep
learning curve. On the other hand, Bubble offers a user-friendly interface and rapid
development, but there may be concerns regarding scalability for intricate AI features. In the
subsequent section, a detailed comparison between Bubble and FlutterFlow will be
conducted to make a final informed decision.
2.2
Bubble vs FlutterFlow
When comparing FlutterFlow and Bubble for this project, various factors must be considered,
such as their underlying frameworks, flexibility, learning curve, target users, advantages, and
suitability for specific project requirements. These factors provide insights into the
comparative strengths and weaknesses of each platform, aiding in the selection process.
5
• Framework and Functionality
FlutterFlow is built on the Flutter framework, providing developers with a strong foundation for
app development. In comparison, Bubble runs its functionality from web to mobile app
development, highlighting simplicity and ease of use. (Flutterflow, n.d.)
• Flexibility and Customization
FlutterFlow offers large customisation options through Flutter's widget library, appealing to
developers who select control over user interface design. On the other hand, Bubble selects
accessibility, catering to users with minimal coding proficiency through its no-code/low-code
approach. (Flutterflow, n.d.)
• Learning Curve
To operate FlutterFlow well, ability in Dart programming language and Flutter notions is
necessary, making it more suitable for experienced developers. On the other hand, Bubble is
available to users with diverse backgrounds, including those without programming expertise.
• Advantages and Target Users
FlutterFlow advances from Flutter's native performance capabilities and the active Flutter
community, making it suitable for developers seeking performance and community support.
Bubble, on the other hand, is preferred by entrepreneurs and business users seeking rapid
development without deep technical skills. (Flutterflow, n.d.)
Table 2. FlutterFlow and Bubble Comparison
6
Aspect
FlutterFlow Overview
Bubble Overview
Built on top of Flutter, an open-source
UI software development toolkit.
Visual web development platform that
extends to mobile app development.
Framework
Flexibility
Leverages Flutter's extensive widget
library, offering considerable flexibility.
Known for its no-code/low-code
approach, enabling development with
minimal coding proficiency.
Learning
Curve
Requires proficiency in Dart
programming language and Flutter
concepts.
Tailored for users with varied
backgrounds, including those lacking
programming expertise.
- Harnesses Flutter's native
performance capabilities.
- Ideal for entrepreneurs and business
users seeking to prototype and develop
apps without deep technical skills.
Advantages
- Extensive customization options
through Flutter widgets.
- Facilitates swift app development
through a visual interface, reducing time-
to-market for simpler applications.
- Benefits from the active Flutter
community, ensuring continual
enhancements.
- Geared towards simplicity and ease of
use over extensive customization options.
• Conclusion
When determining the most suitable software for creating an AI-integrated career coaching
app between FlutterFlow and Bubble, several considerations come into play.
Firstly, FlutterFlow is built on the Flutter framework, which provides a solid foundation with
extensive customisation options through Flutter's widget library. This flexibility allows
developers to tailor interfaces precisely to meet the specific needs of a career coaching app.
In contrast, Bubble's reliance on a no-code/low-code approach may limit customisation
options and scalability, especially for more intricate applications. (Flutterflow, n.d.)
Secondly, while FlutterFlow requires proficiency in the Dart programming language and
Flutter concepts, its learning curve is manageable for developers with intermediate to
advanced skill levels. In contrast, Bubble targets users with varied backgrounds but may face
challenges due to its reliance on third-party plugins and potential scalability limitations,
particularly for those lacking programming expertise.
7
Additionally, FlutterFlow's native performance capabilities ensure optimal app performance
across various devices and platforms. Alternatively, Bubble's visual web development
platform may not provide the same level of native performance, potentially impacting app
responsiveness. (Flutterflow, n.d.)
FlutterFlow's integration with AI components enhances its functionality, enabling seamless
integration of design and technology. This, coupled with its cross-platform development
ability, positions FlutterFlow favourably for entrepreneurs and business users seeking to
prototype and develop apps without strong technical skills.
In summary, FlutterFlow appears as the most suitable software for creating a scalable career
coaching AI-integrated app due to its robust framework, flexibility, manageable learning
curve, native performance capabilities, and distinct advantages over Bubble. Leveraging
FlutterFlow's capabilities, developers can craft a highly customisable, efficient, and reliable
app that meets the evolving needs of Consult For Growth. This conclusion addresses the
question, "What is the most suitable software for creating an AI-integrated career coaching
app?"
3 Building app framework in FlutterFlow
This section provides an overview of how to build the framework of a career coaching app on
FlutterFlow addressing the research question “What steps are required to use the most
suitable software to make the app?”
3.1
Initial FlutterFlow development
During the initial stages of developing the AI-integrated career coaching app with FlutterFlow
the process started by following a structured guide provided on the official FlutterFlow
website. This guide directed developers to register, navigate the user dashboard, and
commence a new project, specifying platform preferences and templates.
The platform's interface integrated visual design tools with development capabilities,
fostering a dynamic development experience. Drag-and-drop components streamlined UI
design, while a code view facilitated advanced customisations. (Flutterflow, n.d.)
8
For a comprehensive understanding of these procedures, please refer to the detailed guide
provided in Appendix 1.
Figure 1 illustrates the FlutterFlow starting page, showing its user-friendly interface and
navigation options.
Figure 1. FlutterFlow starting page.
3.2
User Authentication and sign-up method using Firebase.
User authentication functions as a fundamental component within the architecture of the
career coaching app developed using FlutterFlow. This authentication mechanism
establishes a barrier, permitting access exclusively to registered users, thereby safeguarding
sensitive information such as personalised profiles and course details. Beyond its primary
function of privacy protection, user authentication plays an important role in fostering trust
and reliability in the application. Figure 2 illustrates the Firebase authentication page,
showing navigation options.
Figure 2. Firebase authentication page.
9
To implement secure user authentication mechanisms, the development process integrates
Firebase, a comprehensive platform offering a suite of authentication tools. Firebase's
authentication services allow the career coaching app to deploy a variety of authentication
protocols, including email and password authentication, phone verification, and third-party
account authentication through platforms such as Google, Facebook, and Apple. This
diversity ensures a broad and accessible sign-in experience for users with different
preferences. (Flutterflow, n.d.)
Furthermore, Firebase provides templates for essential security features, such as email
address verification, password reset, and SMS verification. The inclusion of these templates
simplifies the implementation process, while their customisation ensures smooth integration
with the overall user experience. (Flutterflow, n.d.)
3.2.1 User authentication mechanisms
User authentication mechanisms within the career coaching app are designed to provide an
easy and secure sign-in experience for users. These mechanisms leverage Firebase's
10
authentication services to implement various protocols, each tailored to specific user needs
and preferences.
• Email and password authentication: This authentication method allows users to
sign in using their email address and a password chosen during the registration
process. Upon successful authentication, users gain access to their personalised
profiles and course information securely stored within the app. (Flutterflow, n.d.)
• Phone verification: Phone verification offers an additional layer of security by
requiring users to verify their phone numbers during the registration process. This
method helps prevent unauthorised access to user accounts and ensures that only
verified users can access sensitive information within the app.
• Third-Party account authentication: In addition to traditional email and password
authentication, users can also sign in using their existing accounts from popular
platforms such as Google, Facebook, and Apple. This approach streamlines the sign-
in process for users who prefer to use their existing credentials from these platforms,
enhancing convenience and user experience.
• Customisation and integration: Firebase's authentication services offer flexibility in
customisation, allowing developers to tailor the authentication process to fit the
specific requirements of the career coaching app. Whether it is customising the sign-
in flow or implementing additional security measures, Firebase provides the tools and
resources needed to create a secure and user-friendly authentication experience.
3.2.2 Email verification and password reset
Email verification and password reset are essential security features implemented within the
career coaching app to enhance user security and prevent unauthorised access to user
accounts.
• Email Verification: Upon user registration, the app sends a verification email to the
user's registered email address. The email contains a unique verification link which
the user must click to verify their email address and activate their account. This
verification process ensures that only users with a valid email address can access the
app's features and services, enhancing security and preventing spam accounts.
(Flutterflow, n.d.)
11
• Password Reset: If a user forgets their password or needs to reset it for security
reasons, the app provides a password reset mechanism. This mechanism allows
users to request a password reset link via email, which they can use to reset their
password securely. By following this process, users can regain access to their
accounts without compromising security or privacy.
• Integration with Firebase authentication: Both email verification and password
reset functionalities are seamlessly integrated with Firebase Authentication,
leveraging its robust infrastructure and security features. Firebase provides APIs and
SDKs that developers can use to implement these features easily, ensuring a smooth
and reliable user experience.
• Customization and personalization: The email verification and password reset
processes can be customised and personalised to align with the app's branding and
user experience guidelines. Developers can customise email templates, branding
elements, and user messaging to create a cohesive and user-friendly experience for
users.
3.3
Setting up Firebase for project integration
Setting up Firebase for app development or data management purposes involves a
systematic and well-documented process. Firebase offers a comprehensive platform that
includes a range of services, from real-time databases to cloud functions and authentication.
The setup process includes several steps, starting with the creation of a Firebase project and
culminating in the configuration and integration of Firebase services with the application or
project. (FlutterFlow., 2024)
• Creating a Firebase project: The first step in setting up Firebase is to create a new
Firebase project through the Firebase console. This involves providing basic project
information such as project name and region and agreeing to the Firebase terms of
service. Once the project is created, developers gain access to the Firebase
dashboard, where they can manage project settings, access project resources, and
configure Firebase services. (Flutterflow, 2024)
12
• Configuring Firebase services: After creating the Firebase project, the next step is
to configure Firebase services according to the requirements of the application or
project. Firebase offers a variety of services, including Firestore for database
management, Authentication for user authentication, Cloud Functions for serverless
computing, and Hosting for web hosting. Developers can enable and configure these
services through the Firebase console, specifying parameters such as database
rules, authentication methods, and cloud function triggers.
• Integrating Firebase with the Application: Once Firebase services are configured,
developers can integrate Firebase with the application or project using Firebase
SDKs and APIs. Firebase provides SDKs for various platforms, including iOS,
Android, and web, as well as REST APIs for server-side integration. Developers can
install Firebase SDKs, initialise Firebase in their applications, and use Firebase APIs
to interact with Firebase services programmatically. (Flutterflow, 2024)
• Authentication setup: As part of the Firebase setup process, developers can
configure authentication settings to enable user authentication in the application.
Firebase Authentication offers a range of authentication methods, including email and
password authentication, phone authentication, and third-party authentication
providers such as Google, Facebook, and Apple. Developers can customise
authentication settings, set up sign-in methods, and manage user accounts through
the Firebase console. (Flutterflow, 2024)
• Database configuration: Another crucial aspect of Firebase setup is configuring the
database for data storage and retrieval. Firebase offers Firestore, a flexible and
scalable NoSQL database, for storing and syncing data across devices and
platforms. Developers can define data models, set up database rules, and manage
data collections and documents through the Firestore console. Firestore provides
powerful querying and indexing capabilities, allowing developers to efficiently retrieve
and manipulate data in real time. (Flutterflow, 2024)
• Cloud function deployment: In addition to database setup, developers can deploy
cloud functions to implement server-side logic and automate tasks in the application.
Firebase Cloud Functions allow developers to write backend code in JavaScript or
TypeScript, deploy functions to Google Cloud Platform, and trigger functions in
response to events such as database changes, HTTP requests, or authentication
13
events. Developers can use the Firebase CLI to deploy and manage cloud functions,
monitor function logs, and debug function errors. (Flutterflow, 2024)
• Testing and monitoring: Throughout the Firebase setup process, developers can
test and monitor Firebase services to ensure they are functioning correctly and
meeting application requirements. Firebase offers tools for testing and monitoring,
including Firebase Test Lab for app testing, Firebase Performance Monitoring for app
performance monitoring, and Firebase Crashlytics for crash reporting and analysis.
Developers can use these tools to identify and fix issues, optimise app performance,
and ensure a seamless user experience. (Flutterflow, 2024)
• Documentation and resources: Finally, developers can refer to Firebase
documentation and resources for guidance and support during the setup process.
Firebase provides comprehensive documentation, code samples, tutorials, and
community forums to help developers get started with Firebase, troubleshoot issues,
and learn best practices. Developers can access Firebase documentation online or
through the Firebase console, where they can find detailed information about
Firebase services, API reference guides, and integration instructions.
Setting up Firebase for project integration involves a systematic and well-documented
process that includes creating a Firebase project, configuring Firebase services, integrating
Firebase with the application, and testing and monitoring Firebase services. By following best
practices and leveraging Firebase's infrastructure and tools, developers can create powerful
and scalable applications that meet the needs of users and businesses. Firebase offers a
comprehensive platform with a range of services, including Firestore for database
management, Authentication for user authentication, Cloud Functions for serverless
computing, and Hosting for web hosting. With Firebase, developers can build high-quality
apps quickly and efficiently, driving innovation and success in the digital landscape.
(Flutterflow, n.d.). Figure 3 below shows the authentication is set up.
Figure 3. The authentication in Firebase.
14
3.4
Designing dynamic profile pages in FlutterFlow
The development of interactive profile pages in FlutterFlow can enhance the user
experience. Allowing users to personalise their profiles by uploading a profile picture, editing
personal details, and showcasing their interests and preferences adds a personal touch for
users and facilitates interaction with AI. Utilising FlutterFlow's features simplifies the creation
of a user-friendly interface for easy information updates. Additionally, integrating live updates
and real-time data synchronisation can further enhance the dynamic nature of the profile
pages.
The effectiveness of course search functionality is not only on the underlying data but also on
the design of the interface. FlutterFlow offers an array of design components that can be
integrated to enhance the user experience, from cards displaying course details to simplified
navigation that ensures effortless movement between search results. (Flutterflow, 2024).
Figure 4 below shows an interactive profile page.
Figure 4. FlutterFlow profile page.
15
3.5
Course enrolment
Enrolling in a course should be a simple and efficient process that encourages
users to start their course. The app's course enrolment strategy rotates around
user-friendly design principles that select ease of use and clear navigation.
Once a course is chosen, users are given the option to either directly enrol or
'Add to Cart' for later consideration. This cart feature allows users to curate a
collection of courses before finalising their enrolment, to the overall user
experience. The cart also presents opportunities for cross-selling, where related
courses can be suggested to users based on their selections.
Accessing course information is essential for users, encompassing details such
as course descriptions, instructor profiles, outlines, prices, timelines, and
rankings. A prominent "Enrol Now" button serves as a guide for users to initiate
16
the enrolment process. Figure 5 illustrates the widgets, showing to user the
process its success and navigation options.
Figure 5. Widgets of success booking.
The enrolment process is streamlined, requiring minimal user input to reduce
interaction. Existing users can swiftly enrol with a single click, while new users
are guided through a direct sign-up process.
3.6
Integration of payment processing in FlutterFlow
The implementation of payment processing mechanisms was crucial for this project to create
a smooth user experience. Among the options available, the four top payment gateways are
Stripe, Braintree, Razorpay, and RevenueCat.
Stripe stands out as a frontrunner in the scope of payment processing. It offers developers a
comprehensive toolkit for handling transactions securely. With its flexibility and developer-
friendly API, Stripe is a preferred choice for FlutterFlow applications requiring diverse
payment functionalities. Its extensive documentation facilitates a smooth integration process
ensuring a secure and reliable payment ecosystem. (Stripe., 2024)
Owned by PayPal, Braintree provides a unified and customisable payment solution suitable
for FlutterFlow applications. With support for multiple currencies and various payment
17
methods, Braintree offers versatility to developers. Integration with Braintree is well-
documented, guiding developers through the process and ensuring a good payment
infrastructure. (Braintree., 2024)
Razorpay offers a wide range of payment options and local currency support, Razorpay is
well-suited for FlutterFlow applications catering to diverse user bases. The integration
process is clearly outlined in Razorpay's documentation, providing a reliable reference for
developers. (Razorpay., 2023)
Tailored for managing in-app subscriptions and purchases, RevenueCat plays a critical role
in FlutterFlow applications focusing on monetisation. Its features include subscription
management, analytics, and user insights. The integration process is thoroughly detailed in
RevenueCat's documentation, ensuring effective implementation and management of
revenue-related features. (RevenueCat., 2023)
For this project, Stripe was chosen for its comprehensive toolkit and developer-friendly API.
Refer to Appendix 3 for a step-by-step guide on integrating Stripe into the project.
3.6.1 Online Transactions
In the scope of online transactions, it's necessary to provide a variety of payment
preferences. Recognising this, the app presents multiple payment methods, covering equally
traditional and modern approaches. Users can select to pay with credit or debit cards,
accepting those who prefer standard methods.
4 Utilising FlutterFlow to create an AI-integrated career coaching
App.
This section details the process of developing an AI-integrated career coaching app using
FlutterFlow, based on information from FlutterFlow's and relevant AI-integrated official
websites. The focus is on the question: How can FlutterFlow be utilised to create an AI-
integrated career coaching app?
18
4.1
Integration with Dust API
In this project, the Dust platform is used to integrate AI functionalities into FlutterFlow. The
documentation provided by the Dust developer platform contains useful examples for
each endpoint. These examples include curl commands for making requests and sample
responses in JSON format. These practical illustrations offer a straightforward
understanding of how to utilise the API. (Dust., 2024)
• Authentication: Authentication is crucial for interacting with the Dust API. Ensure
all requests to the Dust API include a Bearer token, obtained using your API key.
This token acts as a secure authentication measure, providing authorised access
to the API. (Dust., 2024)
• Models: The Dust API incorporates specific models for representing and
managing data. Notable models include the Chunk model, representing a discrete
portion of a document, and the Document model, representing a document within
a data source. (Dust., 2024)
• Endpoints: The Dust API provides various endpoints for different operations on
data sources. Key endpoints include creating, recovering, and deleting
documents, as well as listing and searching documents within a data source.
(Dust., 2024)
Figure 6 below shows how AI is connected to the FlutterFlow API call page.
Figure 6. Dust API calls in FlutterFlow.
19
4.2
Implementing course search functionality with AI
Integrating APIs into the mobile app can significantly enhance the user experience by
offering accurate and current information about available courses. API integration enables
developers to fetch data from external sources, such as the Consult For Growth website or
online course from the app, ensuring that users have access to comprehensive and relevant
course options. Additionally, using APIs allows for the smooth integration of extra features
such as filtering and sorting, making it easier for users to find courses based on their
preferences.
Within the Dust platform, options for configuring the Learning Management Module (LLM) to
gather user interests and facilitate course searches are available. (Dust, 2024). Users can
interact with an AI interface, where they respond to a series of questions. The AI then
analyses these responses subsequently, based on the user profile data, the system
searches Consult For Growth's course database to identify the most relevant courses.
Finally, the system presents the user with the top five suitable courses for their consideration
as a visual of this functionality is shown in Figure 7 below.
Figure 7. The AI page of the App
20
5 Software tools for AI integration in FlutterFlow
In this section, the focus is to answer the question: "What software tools are needed in
FlutterFlow to enable AI integration?". Enabling AI integration in FlutterFlow applications
requires several essential software tools. Here's a detailed list:
• AI/ML libraries and frameworks: utilise AI and ML libraries and frameworks to
implement various AI functionalities within the FlutterFlow app. Examples include
TensorFlow Lite, PyTorch, and scikit-learn for machine learning tasks, and
TensorFlow.js or TensorFlow Lite. (FlutterFlow, 2023)
• APIs and SDKs: integrate AI-related APIs and SDKs to access pre-trained models,
natural language processing (NLP) capabilities, computer vision functionalities, or
other AI services. (FlutterFlow, 2023) Examples include Google Cloud AI, IBM
Watson, Microsoft Azure AI, and Amazon AI services.
• Data management tools: use tools for managing and processing data required for AI
tasks. (FlutterFlow, 2023) This includes databases, data preprocessing libraries, and
data visualisation tools. Examples include Firebase for real-time database
management, Pandas and NumPy for data manipulation and Matplotlib or Seaborn
for data visualisation.
• Authentication and authorisation services: implement authentication and
authorisation services to access AI-related APIs and services. This ensures that only
authorised users can interact with AI functionalities within the app. Firebase
Authentication is a common choice for user authentication in FlutterFlow applications.
(FlutterFlow, 2023)
• Model training and deployment platforms: utilise platforms for training and
deploying AI models. This includes cloud-based services that offer scalable
infrastructure for training models and deploying them as APIs or mobile-friendly
formats. (FlutterFlow, 2023) Examples include Google Cloud AI Platform, Amazon
SageMaker, or TensorFlow Serving.
21
• Development environment: set up a development environment conducive to AI
development within FlutterFlow. (FlutterFlow, 2023) This includes installing IDEs
(Integrated Development Environments) or code editors with support for AI-related
workflows, such as TensorFlow.js for web-based AI development or Jupyter
Notebooks for data exploration and experimentation.
6 Research findings and practical implementation!
The research problems and questions addressed in this study revolved around the selection
of suitable software for creating an AI-integrated career coaching application.
The key questions explored were:
• Identifying the most suitable software for creating the AI-integrated career
coaching application.
• Implementing AI integration in FlutterFlow.
• Determining the necessary software tools within FlutterFlow for effective AI
integration.
6.1
Knowledge base
The knowledge base established for this thesis draws on a diverse set of skills acquired
from various engineering courses. These include programming, data security, software
testing, data analysis, modern technology applications, robotics, TensorFlow, and AI and
ML. The integration of these knowledge areas was essential for the successful
development of the AI-integrated coaching app. Additionally, the thesis relied on
continuous learning through various resources, including online courses, journals, blogs,
books, podcasts, and training videos.
6.2
Practical implementation
The concrete output of this thesis is the development of an AI-integrated career coaching
application using FlutterFlow. The app incorporates features such as user authentication,
22
dynamic profile pages, course search functionality with AI, integration with Dust API,
establishment of a course review and feedback system, and payment processing using
Stripe. The tangible outcome is a functioning app that aligns with the goals of Consult For
Growth.
6.3
Project implementation process
The project implementation process involved several steps. Firstly, a comprehensive
evaluation of various mobile app development platforms was conducted, resulting in the
selection of FlutterFlow due to its strong AI integration capabilities and scalability.
Following the selection of FlutterFlow, the next step was to initiate a new project and
familiarise oneself with the user dashboard. This involved using visual design tools for
efficient cross-platform app development.
User authentication was a crucial aspect of the project, necessitating the integration of
Firebase. This ensured a secure gateway for registered users to access personalised
profiles, course information, and sensitive data.
Profile pages were created using FlutterFlow's dynamic features. This allows users to
personalise their profiles and showcase their interests effectively.
The integration of AI into the app was facilitated through the Dust API. This enabled
accurate and real-time course information retrieval, increasing the user experience.
Finally, payment processing was integrated with the Stripe payment gateway to provide a
secure transaction process. This accommodated various payment preferences, enhancing
the overall user experience.
7 Conclusion
This thesis set out to lay the foundation for an AI-integrated coaching app for Consult For
Growth, a career coaching business. Motivated by the rapid rise of AI and the desire to
bring a tech-savvy twist to coaching practices, the goal was to enhance the product
offering and create a scalable platform.
23
The coaching industry is undergoing a revolution with the integration of AI, offering
coaches valuable tools to enhance practices and improve client outcomes. The AI in
career coaching represents a fundamental shift in how individuals approach their
professional development.
The justification for AI integration lies in its potential to enhance skill development,
provide tailored roleplay scenarios, derive data-driven insights, offer individualised
assessments, provide on-demand support, analyse coaching styles, ensure ongoing skill
refreshment, generate custom activities, summarise lessons, and assess client
sentiment.
This research aimed to find the most suitable software for making a career coaching app
with AI, figure out how to use that software and identify the tools needed to add AI
features.
It wasn't just about theory; the goal was to solve real-world problems and improve
Consult For Growth's coaching services. The research covered a range of topics,
including programming, data security, software testing, data analysis, modern
technology, robotics, TensorFlow, and AI.
The blend of these skills was crucial for developing an app that integrated AI into a career
coaching app. The evaluation of software options led to the selection of FlutterFlow, a
platform with intuitive visual design tools, strong AI integration capabilities, and cross-
platform development support.
FlutterFlow stood out as the most suitable choice for building a scalable AI-integrated
coaching app for Consult For Growth.
The practical implementation involved a step-by-step project implementation process,
from selecting FlutterFlow and initiating the project to integrating user authentication,
dynamic profile pages, course search functionality with AI, establishing a course review
system, and enabling payment processing using Stripe. Each step in the process added
valuable features to the application, aligning it with Consult For Growth's goals.
The integration of knowledge areas resulted in the successful implementation of various
functionalities in the app. The practical implications extend beyond Consult For Growth,
24
highlighting the developed app as a transformative platform for coaching practices with
AI.
In conclusion, this thesis achieved its objectives by successfully creating an AI-integrated
career coaching app. The developed app not only enhances Consult For Growth's
coaching practices but also sets the stage for a scalable solution for other coaches,
emphasising the transformative potential of AI in the coaching industry.
8 Recommendations for future development
As this thesis set out to lay the foundation for an AI-integrated career coaching app for
Consult For Growth to take the product to launch and to ensure its competitiveness in the
market here are some recommendations for future developments:
• Stay informed and adapted: continuously update the app to incorporate the
latest AI advancements, ensuring it remains at the forefront of innovation.
Adaptation to emerging technologies is vital for sustained relevance.
• Research and user feedback: regularly research the impact of AI in coaching,
closely monitor user feedback, and conduct surveys. This will provide valuable
insights for refining the application and ensuring it aligns with the needs of
coaches and clients.
• Collaborate with coaches and users: Foster collaboration with coaches and
end-users through feedback sessions. This collaborative approach will enhance
the application based on real-world coaching scenarios, making it more user-
centric.
• Integrate advanced AI features: explore the integration of advanced AI features,
such as natural language processing and sentiment analysis. These additions can
make the AI components more intuitive and tailored to individual coaching
journeys.
• Optimise for scalability: optimise the application for scalability to accommodate
a growing user base and multiple coaches. This will open opportunities for the
app to serve a broader audience.
25
• Explore LMS integration: consider integrating with Learning Management
Systems (LMS) to enhance the educational aspect of career coaching.
Partnerships with educational platforms can offer a seamless transition between
coaching and skill development.
• Invest in marketing: invest in effective marketing strategies to increase
awareness and outreach. Utilise digital marketing channels, social media, and
industry partnerships to promote the AI-integrated career coaching app.
• Prioritise accessibility and inclusivity: ensure the application is designed with
accessibility and inclusivity in mind. Implement features such as multilingual
support and accessibility features for diverse user needs.
• Ensure data protection compliance: maintain compliance with data protection
regulations to safeguard user data. Regularly update privacy policies and ensure
robust data security measures are in place.
• Consider global expansion: explore opportunities for global expansion by
localising the app for different languages and cultural nuances. This can extend
the app's reach on an international scale.
8.1
Recommendations for Consult For Growth Website
To maximise the benefits and success of the AI-integrated coaching app, Consult For Growth
should consider implementing the following recommendations for its website:
• Prioritise user experience: ensure a user-friendly design with an intuitive layout and
navigation structure to facilitate seamless transitions between the website and the
app. This enhances user engagement and encourages exploration of the app's
features.
• Optimise for mobile responsiveness: ensure the website functions effectively across
all screen sizes and resolutions to accommodate users accessing the app from
mobile devices. This accessibility supports on-the-go career coaching and enhances
the user experience.
26
• Expand course offerings: diversify the range of coaching courses to cater to a broader
audience with diverse career aspirations and goals. This expansion increases the
app's appeal and relevance, driving growth in user adoption and engagement.
• Incorporate interactive elements: integrate interactive features such as live chat
support or virtual tours to enhance user engagement and provide immediate
assistance to users exploring the app. This fosters a sense of connection and
support, encouraging active participation in the coaching process.
By implementing these recommendations, Consult For Growth can optimise its website to
complement the AI-integrated coaching app, maximising its benefits and ensuring its
success in supporting users' career development journeys.
27
References
Bubble. (n.d.). Bubble | Build Powerful Full-Stack Apps Without Code.
https://bubble.io
Braintree. (n.d.). FlutterFlow Docs. Braintree - FlutterFlow Docs.
https://docs.flutterflow.io/settings-and-integrations/in-app-
purchases-and-subscriptions/braintree
Dust Developer Platform Doc. (n.d.). Dust Documentation.
https://docs.dust.tt
Dust AI. (n.d.). Artificial Intelligence Lab - Dust AI.
https://dust.tt
Firebase Authentication (google.com). (n.d.). Firebase Docs.
https://firebase.google.com/docs
Flutter documentation. (n.d.). Flutter Documentation | Flutter.
https://docs.flutterflow.io
FlutterFlow. (n.d.). FlutterFlow - Build beautiful, modern apps incredibly fast.
https://docs.flutterflow.io/getting-started/ui-builder
International Coaching Federation (ICF). (n.d.). Technology in Coaching.
https://coachingfederation.org/about/coalition-technology-in-
coaching
Ke Zhang & Ayse Begum Aslan, (2021). Computers and Education: Artificial
Intelligence, volume 2, 2021. AI technologies for education: Recent research &
future directions
https://doi.org/10.1016/j.caeai.2021.100025
MIT App Inventor. (n.d.). MIT App Inventor.
https://appinventor.mit.edu
Razorpay Payment. (n.d.). Razorpay Payment – FlutterFlow Docs.
https://docs.flutterflow.io/settings-and-integrations/in-app-purchases-and-
subscriptions/razorpay
RevenueCat. (n.d.). RevenueCat – FlutterFlow Docs.
https://docs.flutterflow.io/settings-and-integrations/in-app-
purchases-and-subscriptions/revenuecat
Terblanche, N., (2020). A design framework to create artificial intelligence
coaches. International Journal of Evidence Based Coaching and Mentoring, 18(2),
152–165. https://psycnet.apa.org/record/2020-60649-010
Thunkable. (n.d.). Thunkable: Best no code app builder | No code app creation.
https://docs.thunkable.com
Flutter Essential Training: Build for Multiple Platforms in Learning LinkedIn
Appendix 1 / 1
Appendix 1. Detailed FlutterFlow Setup Guide
This setup guide is based on the information provided on the FlutterFlow Website.
1. Register for a FlutterFlow Account
To start working with FlutterFlow, you need to create an account. I followed these
steps to register:
1. Visit the official FlutterFlow website - https://flutterflow.io/
2. Click the "Sign Up" or "Register" button on the homepage.
3. Fill out the registration form with my full name, email address, and password.
4. Verify your email address following the instructions sent to you.
2. Explore the User Dashboard
Upon successful registration and login, I was directed to the user dashboard. Here I
was able to see the available features, including project management, development
templates, tutorials, support documentation, and community forums.
3. Create a New Project
To start building the app, I then follow these steps:
1. Select "Create New Project" on the dashboard.
2. Name your project – Career Coaching
3. Choose the platform (iOS, Android, or both). I chose both.
4. Pick a starting template that aligns with the app's vision.
The project is now created, and you can start developing the user interface using
FlutterFlow.
4. Navigate the Interface
FlutterFlow's interface combines visual design tools with integrated development
capabilities. Drag-and-drop components, such as buttons and text fields, onto the
canvas for a user-friendly experience. For advanced customisations, a code view is
available for direct manipulation of the underlying code.
Appendix 1 / 2
5. Build your App.
To begin building the app:
1. Design your app's user interface using drag-and-drop components.
2. Configure interactions and transitions to define how elements interact with users.
3. Test your app using FlutterFlow's built-in testing tools.
Following these steps helped me to gradually build and refine the app's design and
functionality within the FlutterFlow environment.
Appendix 2 / 1
Appendix 2. Creating a Firebase project
Setting up Firebase for a project, whether for app development or data management
purposes, follows a straightforward and well-documented process. Firebase offers a robust
platform encompassing a range of services, from real-time databases to cloud functions and
authentication.
The process begins with creating a Firebase project, configuring it, and establishing
connections with your application or project. An essential requirement is having a Google
account to initiate the setup process. Once the Firebase project is set up, users can enable
various services, including Firestore for database management. Additionally, Firebase offers
authentication options, enabling the implementation of secure login systems for users.
Moreover, users can deploy cloud functions to incorporate advanced functionalities into their
applications.
Figure 8. Firebase Cloud.
The step-by-step guide in the documentation ensures comprehensive coverage of all
essential aspects of Firebase setup, from project creation to the generation of necessary
configuration files. Whether new to Firebase or seeking to broaden their understanding, this
resource is a valuable reference for facilitating a smooth setup process.
• Personalised user experiences
Appendix 2 / 2
In an era defined by user-centric design, profile pages stand as the virtual face of everyone
within the app. These pages are not mere repositories of information, they encapsulate a
user's learning curve, preferences, and aspirations. By customising each profile page to
reflect the user's identity, the app cultivates a sense of belonging and ownership.
Figure 9. Firebase storage.
Employing Flutter Flow's versatile tools, developers can create visually attractive profile
pages that mirror the user's uniqueness. From profile pictures and personal information to
achievement showcases and individualised aesthetics, every facet can be converted to
create a profound connection between the user and the app.
• Secure user authentication and data management via Firebase
In today's digital landscape, user authentication, and data security have become paramount
concerns for any application handling sensitive user information. As technology continues to
trust and maintain user engagement. This chapter explores the complex process of
implementing user authentication and data management through the utilisation of the
Firebase platform.
Appendix 2 / 3
Figure 10. Firebase Authentication.
Data management is important, but given the nature of the Career Coaching application,
data protection is critical to ensure user trust and compliance with data protection measures.
• User sign-up and login processes
The chapter delves into the practices of user sign-up and login, focusing on the integration of
Firebase's authentication services into the app's user interface. The app's registration
process involves collecting user authorisation securely and utilising Firebase's email
verification for added security layers. Once registered, users can log in using their chosen
authentication methods, and Firebase facilitates token-based sessions to ensure a secure
and uninterrupted user experience.
Figure11. Firebase Cloud Rules.
Appendix 2 / 4
Appendix 2 / 5
Appendix 3. A Comprehensive guide to set up the payment process.
Fundamentals:
Before diving into Stripe integration, ensure the following prerequisites are met:
• Active Stripe account and API keys
• Basic understanding of JavaScript and FlutterFlow
• Functional app built on FlutterFlow
Figure 12. Stripe Documentation page.
Stripe integration steps:
• Acquire keys from your Stripe account.
• Enable Test Mode for development.
• Copy API keys to FlutterFlow settings.
• Specify additional settings like Merchant Display Name, Merchant Country Code, and
Apple Merchant ID if applicable.
• Deploy the configuration.
Appendix 2 / 6
Figure13. The Dust API setup page.
6. Developing Payment User Interface:
• Create an intuitive and user-friendly payment page.
• Include a payment form, billing information fields, and clear options for item
selection.
• Implement visual indicators for progress tracking.
• Prioritize security with encryption and tokenization.
Figure 14. Stripe page in FlutterFlow.
Appendix 2 / 7
7. Select payment trigger button:
• Choose a clear and intuitive trigger button labelled with a call-to-action.
• Incorporate visual cues for clickability.
• Provide options for various payment methods.
• Ensure functionality is linked to backend processes, communicating with the Stripe
API.
Figure 15. Set up the Strip key in FlutterFlow.
8. APIs in mobile payment applications:
• APIs play a crucial role in mobile payment app development.
• Enable integration of payment gateways, real-time verification, fraud detection, and
transactional data tracking.
Appendix 2 / 8
• Leverage APIs to enhance security and streamline development processes.
Figure 16. Transaction pages in FlutterFlow.
Integrating Stripe Payments into FlutterFlow applications not only enhances
functionality but also provides a convenient and reliable payment experience for
users. By following these steps, even beginners can successfully navigate the
integration process, fostering a seamless transaction experience within their
applications.
Note: To optimize the user experience, consider factors like an excellent user
interface, clear information presentation, and the strategic use of APIs. This ensures
not only ease of use but also encourages user adoption and continued engagement
with mobile payment services.
![[“Anything Was Possible”: Gaps, Hypotheses, and Multiple Meanings in Alice Munro’s “The Bear Came Over the Mountain”]](https://s3.us-east-1.amazonaws.com/outstation.idea/pdf-mt/2043600363819532288/pdf/04406e6d-7416-41d3-8220-f76d19a3e47e/imgs/page1.png)
