Build an AI Powered React Native ChatGPT Mobile App

سرفصل های دوره

Learn ChatGPT by building an AI powered iOS and Android app using React Native. Includes custom server and REST API!

1. Setup

1. Intro video (from course dashboard)

2. Brief intro to OpenAI and ChatGPT - Important Concepts

3. Installing Visual Studio Code

4. What is Expo

5. Setting up our project

6. Installing the iOS simulator (Mac only)

7. Installing the Android simulator

8. Quick overview of app files

9. Running our app on the simulators

10. Running the app on a physical device

2. Bottom tab navigator

1.1 gptApp-reactNavigation.zip

1. Installing React Native Navigation

2.1 gptApp-bottomTabs.zip

2. Creating our bottom tabs

3.1 gptApp-tabIcons.zip

3. Adding icons to the bottom tabs

4.1 gptApp-tabIconColor.zip

4. Fixing the color of the bottom tab icons

3. Chat screen UI

1.1 gptApp-colorsFile.zip

1. Creating a constant file for our colors

2.1 gptApp-textInput.zip

2. Adding the text input

3.1 gptApp-sendButton.zip

3. Adding the send button

4.1 gptApp-keyboardAvoidingView.zip

4. Using the KeyboardAvoidingView element

5.1 gptApp-keyboardAvoidingViewContainer.zip

5. Adding a container around our keyboardAvoidingView element

4. Calling Chat GPT!

1.1 gptApp-messageText.zip

1. Getting the input text

2.1 gptApp-sendMessage.zip

2. Submit button onPress

3.1 gptApp-useCallback.zip

3. UseCallback

4.1 gptApp-openAi.zip

4. Installing the OpenAI package

5.1 gptApp-openAiApiKey.zip

5. Getting our API key

6.1 gptApp-makeRequest.zip

6. Sending the query

7.1 gptApp-estimateUsage.zip

7. Optional Estimating the cost of the queries

8.1 gptApp-processingResponseText.zip

8. Processing the response text

9.1 gptApp-conversationHistoryUtil.zip

9. Creating the conversation history util

10.1 gptApp-addUserMessage.zip

10. Adding the user message to the conversation

11.1 gptApp-addAssistantMessage.zip

11. Adding the assistants response to the conversation

12.1 gptApp-systemMessage.zip

12. Adding system messages

5. Outputting messages

1.1 gptApp-setConversation.zip

1. Setting the conversation state variable

2.1 gptApp-flatlist.zip

2. Adding our flatlist for outputting the messages

3.1 gptApp-bubble.zip

3. Chat message bubble component

4.1 gptApp-bubbleStyle.zip

4. Styling our chat bubbles

5.1 gptApp-bubbleAlignment.zip

5. Aligning the bubbles correctly

6.1 gptApp-textColor.zip

6. Text color and other finishing touches

7.1 gptApp-fonts.zip

7. Adding custom fonts

8.1 gptApp-applyingFont.zip

8. Applying our new fonts!

6. Adding a clear conversation button

1.1 gptApp-headerButton2.zip

1. Installing react native header buttons

2.1 gptApp-customHeaderButton.zip

2. Creating our custom header button component

3.1 gptApp-showingOurHeaderButton.zip

3. Outputting our header button

4.1 gptApp-clearConversation.zip

4. Clearing the conversation

7. Adding a loading indicator

1.1 gptApp-loading.zip

1. Setting the loading flag

2.1 gptApp-loadingGif.zip

2. Adding a loading gif

3.1 gptApp-loadingGifStyle.zip

3. Styling our loading gif

8. Chat screen finishing touches

1.1 gptApp-scrollToBottom.zip

1. Scrolling to the bottom when a new message is sentreceived

2.1 gptApp-emptyContainer.zip

2. Creating a view for when there are no messages

9. Image generation using DALL-E

1.1 gptApp-refactoring.zip

1. How to refactor our existing code

2.1 gptApp-generatingImages.zip

2. Generating images

3.1 gptApp-imageConversation.zip

3. Storing images to conversation history

4.1 gptApp-outputImages.zip

4. Outputting images

10. Settings screen UI

1.1 gptApp-stackNavigator.zip

1. Installing the stack navigator

2.1 gptApp-settingsNavigator.zip

2. Creating our settings navigator

3.1 gptApp-settingsTitle.zip

3. Settings page title

4.1 gptApp-dataItem.zip

4. Creating the data item

5.1 gptApp-dataItemText.zip

5. Styling the data item text

6.1 gptApp-dataItemIcon.zip

6. Adding an icon to our data item

11. Outputting settings

1.1 gptApp-dataListScreen.zip

1. Creating the data list screen

2.1 gptApp-dataListScreenNav.zip

2. Navigating to the data list screen

3.1 gptApp-passDataIntoDataListScreen.zip

3. Passing data into our data list screen

4.1 gptApp-dataListScreenTitle.zip

4. Setting the title of the data list screen

12. Updating settings

1.1 gptApp-installingReactRedux.mov.zip

1. Installing React Redux

2.1 gptApp-store.zip

2. Configuring our store

3.1 gptApp-settingsSlice2.zip

3. Creating our settings slice

4.1 gptApp-accessingSettings.zip

4. Accessing stored settings

5.1 gptApp-gettingSelectedValue.zip

5. Getting the selected setting value

6.1 gptApp-settingSettings.zip

6. Setting the clicked option

7.1 gptApp-logbox.zip

7. Addressing the warning in the console

8.1 gptApp-settingsNavigateBack.zip

8. Going back when a setting is selected

9.1 gptApp-isChecked.zip

9. Showing which value is currently selected

10.1 gptApp-usingPersonality.zip

10. Setting the personality in the conversation

13. Saving settings values between app refreshes

1.1 gptApp-asyncStorage.zip

1. Installing the AsyncStorage package

2.1 gptApp-startUpScreen.zip

2. Creating a start up screen

3.1 gptApp-gettingSettings.zip

3. Applying settings on app start up

14. Adding some more settings!

1.1 gptApp-mood.zip

1. Assistant mood

2.1 gptApp-applyMood.zip

2. Applying the mood setting

3.1 gptApp-responseSize.zip

3. Response size

4.1 gptApp-refactoringSettings.zip

4. [Optional video] Refactoring suggestions

5.1 gptApp-applyResponseSize.zip

5. Applying the response size

15. Advanced settings

1.1 gptApp-advancedSettings.zip

1. Creating the advanced settings page

2.1 gptApp-advancedSettingData.zip

2. Advanced settings data structure

3.1 gptApp-additionalAdvancedSettings.zip

3. Adding additional advanced settings

4.1 gptApp-outputtingAdvancedSettings.zip

4. Outputting the advanced settings

5.1 gptApp-advancedSettingSlice.zip

5. Accessing the advanced setting value

6.1 gptApp-inputScreen.zip

6. Creating the input screen

7.1 gptApp-inputScreenStyle.zip

7. Styling the input screen

8.1 gptApp-inputScreenProps.zip

8. Adding remaining input screen props

9.1 gptApp-isNan.zip

9. Checking if input is a number

10.1 gptApp-errorText.zip

10. Showing the error text when input is invalid

11.1 gptApp-remainingChecks.zip

11. Handling remaining number checks

12.1 gptApp-saveDisabled.zip

12. Disabling the save button on error

13.1 gptApp-saveAdvancedSettings.zip

13. Saving advanced settings

14.1 gptApp-initAdvancedSettings.zip

14. Initialising the advanced settings on start up

15.1 gptApp-preProcessChatOptions.zip

15. Pre processing the settings before using them

16.1 gptApp-usingChatOptions.zip

16. Using the settings in our chat request

16. [Optional] Creating a server for your API call

1. Setting up a server project

2. Creating an endpoint on our server

3. Moving GPT request code to our server

4. Calling our server endpoint from the app

5. Moving image generation code to the server

6. Calling the image endpoint from our app

7. Publishinghosting your server

139,000 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy