## Introduction ### Why You Need a Knowledge Base In today's world, you can get information about almost anything online. As a product developer, you want to control the quality of your product's information, and the best way to do this is by creating a Knowledge Base. This is a place where users can seek information regarding your project. ### What We’ll Build In this article, you will learn how to create a Knowledge Base using React Native and Strapi 5, as well as how to create a search functionality using AI. # **Prerequisites** * Basic knowledge of [React Native ](https://reactnative.dev/) * [Node.js](https://nodejs.org/en/download/package-manager) * [Visual studio code](https://code.visualstudio.com/Download) * Basic Knowledge of [Strapi](https://docs.strapi.io/) - [get started here!](https://strapi.io/documentation/developer-docs/latest/getting-started/introduction.html) * Knowledge of [LangChain](https://python.langchain.com/v0.2/docs/introduction/) * Basic knowledge of [Python](https://docs.python.org/3/) ## Application Architecture Given that we want to create an application that spans multiple applications, we should ideally have an architecture to guide us when building the application. So, we have to decouple all the applications that ultimately make up our application and also point out how they communicate. Here is an overview of the application's architecture: ![Application Architecture.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Application_Architecture_0e01741a16.png) ### Strapi 5 API This application will use [Strapi's REST API](https://docs.strapi.io/dev-docs/api/rest) to expose the Data stored by the user utilizing Strapi CMS. In our case, we will be using local development, but you can easily exchange the endpoints to suit your requirements. Once a user publishes entries to Strapi, it creates [custom APIs](https://strapi.io/blog/how-to-create-a-custom-api-endpoint-in-strapi) and exposes the items via it's API. This API will serve our React Native application with **Article** data published by the user, and which in turn serves filtered and transfomed data to Flask + LangChain application. ### React Native App We will use [React Native](https://strapi.io/integrations/reactnative) to create the frontend application. React Native is a framework used to develop cross-platform mobile applications. The Knowledge Base app needs to render Strapi's API data on its user interface using React Native. ### Flask and LangChain App The Knowledge Base app uses [LangChain](https://python.langchain.com/v0.2/docs/how_to/), which is a framework to develop applications powered by Large Language Models (LLMs) to retrieve data from Strapi and transform the data before it is stored in vector stores. A vector store is a database that can store vectors (fixed-length lists of numbers) along with other data items. The Knowledge Base app also retrieves data from the user's input on the React Native App and uses similarity search and the chat model to give responses and refer to original sources. Flask is used to add routing to LangChain and makes it possible for the other applications to communicate with LangChain reliably and fast. ## Setting Up Strapi 5 Backend ### Install Strapi 5 To start creating your [Strapi 5](https://strapi.io/five) application using NPM, open your terminal and add the following code: ```bash npx create-strapi@latest # 'npx' runs a command from an npm package # 'create-strapi' is the Strapi package # '@latest' indicates that the latest version of Strapi is used # note that the --quick-start flag has been deprecated in Strapi5 ``` During installation process, you will have the following prompts: | Prompt | Choose option | Explanation | | --------------------------------------- | ------------- | ------------------------------------------------------- | | do you want to use the default database | Yes | initializing the app with a sqlite database. | | start with an example structure & data | Yes | this will pre-populate your app with content-types data. | | install dependencies with npm | Yes | installs all dependencies. | | Please log in or sign up. | Skip | not deploying to cloud. development stage. |
When the installation is done, you can start up a Strapi 5 development server using the following npm command: ```bash npm run develop ``` Strapi will also redirect you to a browser sign-in page as an admin: ![Signin page.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Signin_page_99b6f79028.png) After logging in, follow the next steps to set up your backend. ### Creating Article Content-type Strapi 5's admin panel offers sample data structures if you agreed to the "**start with an example structure and data**" prompt we set previously and we will use these provided collections to build our application. You can learn how to [create custom content types](//https://docs.strapi.io/user-docs/content-type-builder/creating-new-content-type) using Strapi 5's admin content-type builder. These content types or any custom collections you create automatically get a default [api endpoint](https://docs.strapi.io/dev-docs/api/rest#endpoints). > **NOTE :** During Strapi installation we said **Yes** to "start with an example structure & data". This means we have already automatically created the Article content type. ### Publish Article Entries Since we created our app with the example data, you should be able to navigate to your **Article** collection and see the data that was created for us. ![005-strapi-5.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/005_strapi_5_dc3a4a7540.png) Now, let's make sure that all of the data is **published**. If not, you can select all items via the checkbox and then click the **Publish** button. ![Strapi Articles Published](https://delicate-dawn-ac25646e6d.media.strapiapp.com/006_strapi_5_9c6055ac59.png) ### Generate Strapi API Token for Authentication Navigate to **Settings** on the sidebar, click on **API tokens** on the settings menu, and click on the **Add new API Token** button: [Strapi API tokens](https://docs.strapi.io/dev-docs/configurations/api-tokens) allow executing a request on REST API or GraphQL API endpoints as an authenticated user. ![Navigate to Strapi API Token.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Navigate_to_Strapi_API_Token_dee34cac98.png) This will lead you to a page where you can add your API name, duration, and type: ![Create Strapi API Token.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Create_Strapi_API_Token_0b1337e174.png) ## Building the React Native Frontend In this section, you will setup an environment for the React Native application and build the application following the next steps. ### Step 1: Create a React Native Application Start by creating your React Native application. Create a new folder outside your Strapi root folder and run the following command to create a new React Native application: ```bash npx create-expo-app kb-react-native --template blank ``` After that, install the following dependencies on your application's root folder in order to run the application on your web browser: * [React-DOM](https://www.npmjs.com/package/react-dom): This is a React package that serves as a bridge between React Native components and the DOM (Document Object Model), and you can install it using the following npm command: ```bash npx expo install react-dom react-native-web @expo/metro-runtime ``` * [React-navigation/native and stack](https://www.npmjs.com/package/@react-navigation/native-stack): This manages the application's navigation, and you can install it using the following npm command: ```bash npm install @react-navigation/native @react-navigation/stack ``` * [Axios](https://www.npmjs.com/package/axios): This package is used to make API requests using the HTTP/HTTPS protocol. you can install it using the following npm command: ```bash npm install axios ``` * [React Native Modal](https://www.npmjs.com/package/react-native-modal): This is an extension of the original [React Native's Modal](https://reactnative.dev/docs/modal.html). ```bash npm i react-native-modal ``` ### Step 2: Run the React Native Application After the installation process above, run the following command to run your application: ```bash npx expo start ``` This will open a page on `http://localhost/8081` by default. ### Step 3: Creating the Main API File Now that you have confirmed your expo React Native application is running, it's time to do some editing. First, create a file named `api.js` in the root folder or React Native application to handle your API calls: ```javascript import axios from 'axios'; const API_URL = 'http://localhost:1337/api'; const API_KEY = ''; const headers = { Authorization: `Bearer ${API_KEY}`, }; // Fetch all articles const getArticles = async () => { try { const response = await axios.get(`${API_URL}/articles?populate=*`, { headers }); return response.data.data; // Direct access to flattened data } catch (error) { console.error('Error fetching articles:', error); throw error; } }; // Fetch all authors const getAuthors = async () => { try { const response = await axios.get(`${API_URL}/authors?populate=*`, { headers }); return response.data.data; } catch (error) { console.error('Error fetching authors:', error); throw error; } }; // Fetch all categories const getCategories = async () => { try { const response = await axios.get(`${API_URL}/categories?populate=*`, { headers }); return response.data.data; } catch (error) { console.error('Error fetching categories:', error); throw error; } }; // Fetch a specific article by ID const getArticleById = async (id) => { try { const response = await axios.get(`${API_URL}/articles/${id}?populate=*`, { headers }); return response.data.data; } catch (error) { console.error(`Error fetching article with ID ${id}:`, error); throw error; } }; // Fetch a specific author by ID const getAuthorById = async (id) => { try { const response = await axios.get(`${API_URL}/authors/${id}?populate=*`, { headers }); return response.data.data; } catch (error) { console.error(`Error fetching author with ID ${id}:`, error); throw error; } }; // Fetch a specific category by ID const getCategoryById = async (id) => { try { const response = await axios.get(`${API_URL}/categories/${id}?populate=*`, { headers }); return response.data.data; } catch (error) { console.error(`Error fetching category with ID ${id}:`, error); throw error; } }; export { getArticles, getAuthors, getCategories, getArticleById, getAuthorById, getCategoryById }; ``` The code above is resposible for making the main API request from Strapi API. It uses Axios to make the request and returns the `getArticles` function which contains the API's response. ### Step 4: Create Components Now, we have to create components that we will use as guides or templates to manage the individual application component's state, data flow, and user interface. **Article Card Component** In your root folder, create a folder named `components` . Inside the new folder `components`, create a file `article_card.js` and add the following code: ```javascript // ./components/full_article.js import React, { useState } from 'react'; import { View, Text, StyleSheet, Image, Pressable } from 'react-native'; import { useNavigation } from '@react-navigation/native'; const ArticleCard = ({ article }) => { const navigation = useNavigation(); const API_URL = 'http://localhost:1337'; console.log(article); return ( navigation.navigate('FullArticle', { article:article })}> {article.title} {article.description} ); }; const styles = StyleSheet.create({ card: { padding: 20, flexGrow: 1, margin: 10, backgroundColor: '#fff', borderRadius: 10, shadowColor: '#000', shadowOffset: { width: 0, height: 2, }, shadowOpacity: 0.25, shadowRadius: 3.84, elevation: 5, width: '40%', alignSelf:'center' }, title: { fontSize: 18, fontWeight: 'bold', width: '90%', textAlign:'center' }, summary:{ fontSize: 14, width: '90%', padding:10, textAlign:'center' }, cover: { width: 250, height:150, backgroundColor:'black', alignSelf:'center', margin:10 } }); export default ArticleCard; ``` The code above provides a structure for the article's clickable modal, which shows users the article's important attributes and summary before they opt to open the full article. **Full Article Component** Create another file named `full_article.js` inside the `components` folder and add the following code: ```javascript // ./components/full_article.js import React from 'react'; import { View, Text, ScrollView, StyleSheet, Image } from 'react-native'; const FullArticle = ({ route }) => { const { article } = route.params; const API_URL = 'http://localhost:1337'; if (!article) { return ( Article details not available. ); } const title = article.title; const cover = article.cover; const body = article.blocks[0].body; const description = article.description; return ( {title} {description} {body} ); }; const styles = StyleSheet.create({ container: { flexGrow: 1, backgroundColor: '#fff', padding: 15, width:'65%', textAlign:'center', alignSelf:'center', height:1500, }, title: { fontSize: 44, fontWeight: 'bold', marginBottom: 16, textAlign:'center' }, description:{ fontSize: 16, margin: 16, textAlign:'center' }, cover: { width: '90%', height:500, borderRadius: 8, marginBottom: 16, textAlign:'center', alignSelf:'center' }, heading1: { fontSize: 22, fontWeight: 'bold', marginBottom: 8, }, heading2: { fontSize: 20, fontWeight: 'bold', marginBottom: 8, }, heading3: { fontSize: 18, fontWeight: 'bold', marginBottom: 8, }, heading4: { fontSize: 16, fontWeight: 'bold', marginBottom: 8, }, heading5: { fontSize: 14, fontWeight: 'bold', marginBottom: 8, }, heading6: { fontSize: 12, fontWeight: 'bold', marginBottom: 8, }, body: { fontSize: 16, lineHeight: 24, marginBottom: 10, }, list: { marginBottom: 10, }, listItem: { fontSize: 16, lineHeight: 24, marginLeft: 20, }, }); export default FullArticle; ``` The code above creates a **FullArticle** component which will render the full article for the user. This component is triggered wwhen the user clicking on the article modal from the **ArticleCard** component. This trigger is accompanied by the route parameter, which passes the selected article's data. ### Step 4: Creating React Native screens After creating the components, you need to create the screens for your application. By default, React Native references its `app.js` file for the App's screens. So, navigate to the `app.js` file of your React Native application folder and add the following code: ```javascript // ./app.js import React, { useEffect, useState } from 'react'; import { Button, View, FlatList, StyleSheet, ScrollView } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import { getArticles } from './api'; import ArticleCard from './components/article_card'; import FullArticle from './components/full_article'; import Modal from "react-native-modal"; import Searchbox from './components/search_box'; const Stack = createStackNavigator(); const ArticleList = () => { const [articles, setArticles] = useState([]); const [isModalVisible, setModalVisible] = useState(false); const toggleModal = () => { setModalVisible(!isModalVisible); }; useEffect(() => { const fetchArticles = async () => { try { const data = await getArticles(); setArticles(data); console.log(data); console.log('reloaded'); } catch (error) { console.error('Error fetching articles:', error); } }; fetchArticles(); }, []); return (

No results