Skip to content

Commit 4e6b60e

Browse files
pinkeshmarspinkeshmars
committed
Merge branch 'main' of https://github.com/FlutterFlow/dreamflow-documentation into feature/supabase-integration
2 parents 76258c1 + c6b6bda commit 4e6b60e

File tree

7 files changed

+261
-4
lines changed

7 files changed

+261
-4
lines changed

‎docs/integrations/firebase.md‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ keywords: [Firebase, Integration, Dreamflow, Backend]
1010

1111
# Firebase
1212

13-
Dreamflow makes it easy to integrate Firebase into your app with a guided, step-by-step setup. This process connects your project to Firebase, generates all necessary configuration, and even creates ready-to-use client code and database rules with AI.
13+
Dreamflow makes it easy to integrate [Firebase](https://firebase.google.com/) into your app with a guided, step-by-step setup. This process connects your project to Firebase, generates all necessary configuration, and even creates ready-to-use client code and database rules with AI.
14+
15+
By integrating Firebase, you gain access to services such as Authentication, Firestore Database, Cloud Storage, Hosting and more, giving your app a secure backend for managing users, data, and serverless logic.
1416

1517
## 1. Connection
1618

@@ -52,11 +54,15 @@ Once complete, Dreamflow will confirm the connection with a **Connected** status
5254
After connecting your Google account, the next step is to set up a Firebase project, which will serve as the backend for your app. You can do this in two ways:
5355

5456
- **Select an existing Firebase project:** Choose from the list of your existing Firebase projects.
57+
58+
![select-from-existing-project](imgs/select-from-existing-project.avif)
5559
- **Create a new Firebase project:** Let Dreamflow automatically create and configure a new Firebase project for you.
5660

61+
![create-new-project](imgs/create-new-project.avif)
62+
5763
Once the project is linked, you need to specify the following:
5864

59-
- **Target Platforms:** Choose every platform you want to support (Web, iOS, Android, macOS, Linux, Windows). Web is always enabled by default, so your app can be previewed inside Dreamflow. Selecting the right platforms ensures Firebase generates configs for each build target.
65+
- **Target Platforms:** Choose the platforms you want to support (Web, iOS, Android, macOS, Linux, Windows). Web is always enabled by default, so your app can be previewed inside Dreamflow. Selecting the right platforms ensures Firebase generates configs for each build target.
6066
- **Bundle ID:** Enter a unique **Bundle ID** (e.g., `com.yourcompany.appname`). This must match the app identifier in your platform-specific builds (iOS bundle ID, Android package name). If you skip this, Firebase cannot configure services for mobile apps.
6167

6268
When these details are set, click **Configure Firebase** to complete the setup.
@@ -113,7 +119,7 @@ Once your Firebase project is linked and configured, click **Generate with Agent
113119

114120
![generate-client-code.avif](imgs/generate-client-code.avif)
115121

116-
### What happens during code generation
122+
### Code Generation Breakdown
117123

118124
When you click **Generate with Agent**, Dreamflow performs several background steps, including (but not limited to):
119125

‎docs/integrations/imgs/create-new-project.avif‎

60.1 KB
Binary file not shown.

‎docs/integrations/imgs/select-from-existing-project.avif‎

96.2 KB
Binary file not shown.

‎docs/test-and-publish/publish/apple-app-store-deployment.md‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
---
2+
slug: /deployment/apple-app-store-deployment
3+
title: Apple App Store Deployment
4+
description: Learn how to deploy your apps to the Apple App Store using Dreamflow.
5+
tags: [Apple App Store, Deployment, Dreamflow, iOS]
6+
sidebar_position: 3
7+
toc_max_heading_level: 4
8+
keywords: [Apple App Store, Deployment, Dreamflow, iOS]
9+
---
10+
11+
# Apple App Store Deployment
12+
13+
Dreamflow allows you to deploy your apps directly to the Apple App Store from within the platform. This guide covers all the necessary prerequisites, a step-by-step deployment process, and common troubleshooting tips.
14+
15+
:::info[Prerequisites]
16+
17+
- Create an [**Apple account**](https://appleid.apple.com/account?appId=632&returnUrl=https%3A//developer.apple.com/account/).
18+
- [**Purchase an Apple Developer membership**](https://developer.apple.com/programs/enroll/). Learn more about the program and enrollment process [**here**](https://developer.apple.com/programs/).
19+
- Ensure you have set an app launcher icon. If not, add an app icon to the Dreamflow assets, then use the [**flutter_launcher_icons**](https://pub.dev/packages/flutter_launcher_icons) package or ask the AI agent to set it up for you.
20+
- Ensure your app bundle identifier is correct, as it cannot be changed after publishing. To update the bundle identifier, you can use the [**change_app_package_name**](https://pub.dev/packages/change_app_package_name) package or simply ask the AI agent.
21+
- It's recommended to [**test your app on a real device**](../test/test-on-mobile-device.md) before deployment.
22+
23+
:::
24+
25+
## 1. Create a Bundle Identifier
26+
27+
A **Bundle Identifier (ID)** is a unique string that identifies your app within the Apple ecosystem, typically formatted in reverse domain name notation like `com.example.myapp`.
28+
29+
To create a Bundle ID, visit the [**Certificates, IDs & Profiles**](https://developer.apple.com/account/resources/identifiers/list) page, add a new **App ID**, and provide these details:
30+
31+
1. **Bundle ID:** Define any name in the reverse domain notation.
32+
2. **Description:** Add a brief description of your app.
33+
3. **Capabilities:** Select the necessary app capabilities. Ensure you select **Push Notifications** if your app uses them, and **Sign In with Apple** if your app includes that feature.
34+
35+
<div style={{
36+
position: 'relative',
37+
paddingBottom: 'calc(52.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
38+
height: 0,
39+
width: '100%'}}>
40+
<iframe
41+
src="https://demo.arcade.software/wwXpmj4dWdkSmWizMORd?embed&show_copy_link=true"
42+
title=""
43+
style={{
44+
position: 'absolute',
45+
top: 0,
46+
left: 0,
47+
width: '100%',
48+
height: '100%',
49+
colorScheme: 'light'
50+
}}
51+
frameborder="0"
52+
loading="lazy"
53+
webkitAllowFullScreen
54+
mozAllowFullScreen
55+
allowFullScreen
56+
allow="clipboard-write">
57+
</iframe>
58+
</div>
59+
<p></p>
60+
61+
## 2. Add new app
62+
63+
App Store Connect is the platform used for submitting apps, managing app metadata, and much more. To add a new app, open the [App Store Connect](https://appstoreconnect.apple.com/) and then follow the official steps outlined [here](https://developer.apple.com/help/app-store-connect/create-an-app-record/add-a-new-app).
64+
65+
<div style={{
66+
position: 'relative',
67+
paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
68+
height: 0,
69+
width: '100%'}}>
70+
<iframe
71+
src="https://demo.arcade.software/En7WfaghJEomWPuNzwaq?embed&show_copy_link=true"
72+
title=""
73+
style={{
74+
position: 'absolute',
75+
top: 0,
76+
left: 0,
77+
width: '100%',
78+
height: '100%',
79+
colorScheme: 'light'
80+
}}
81+
frameborder="0"
82+
loading="lazy"
83+
webkitAllowFullScreen
84+
mozAllowFullScreen
85+
allowFullScreen
86+
allow="clipboard-write">
87+
</iframe>
88+
</div>
89+
<p></p>
90+
91+
## 3. Add Apple App ID to Dreamflow
92+
93+
An App ID is used by Apple to identify your app and associate it with your development team.
94+
95+
To add your App ID in Dreamflow, open [App Store Connect](https://appstoreconnect.apple.com/) > My Apps, copy the **Apple ID** from the **App Information** section, then go to **Dreamflow > Publish > iOS** and paste it into the **App Store App ID** field.
96+
97+
<div style={{
98+
position: 'relative',
99+
paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
100+
height: 0,
101+
width: '100%'}}>
102+
<iframe
103+
src="https://demo.arcade.software/A4dmkvttUV5um4d7zR1y?embed&show_copy_link=true"
104+
title=""
105+
style={{
106+
position: 'absolute',
107+
top: 0,
108+
left: 0,
109+
width: '100%',
110+
height: '100%',
111+
colorScheme: 'light'
112+
}}
113+
frameborder="0"
114+
loading="lazy"
115+
webkitAllowFullScreen
116+
mozAllowFullScreen
117+
allowFullScreen
118+
allow="clipboard-write">
119+
</iframe>
120+
</div>
121+
<p></p>
122+
123+
## 4. Generate API key and add to Dreamflow
124+
125+
To generate your API Key, go to [**App Store Connect**](https://appstoreconnect.apple.com/) > **Users and Access** > **Integrations > [Team Keys](https://appstoreconnect.apple.com/access/integrations/api)**. If you haven't added a key before, you will see a **Request Access** button. For further details, watch a [demo](https://youtu.be/L2BpgVog4so?si=yS9r_PBeORgd6Uhp&t=240) here.
126+
127+
Generate a new API key by selecting **Add (+)**, entering a name, and assigning the **App Manager** role. Once the key is generated, download it and upload it to **Dreamflow** **> Publish > iOS > ASC Private Key (.p8)**.
128+
129+
<div style={{
130+
position: 'relative',
131+
paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
132+
height: 0,
133+
width: '100%'}}>
134+
<iframe
135+
src="https://demo.arcade.software/1NjbxSUW1IPpYHiVoiNK?embed&show_copy_link=true"
136+
title=""
137+
style={{
138+
position: 'absolute',
139+
top: 0,
140+
left: 0,
141+
width: '100%',
142+
height: '100%',
143+
colorScheme: 'light'
144+
}}
145+
frameborder="0"
146+
loading="lazy"
147+
webkitAllowFullScreen
148+
mozAllowFullScreen
149+
allowFullScreen
150+
allow="clipboard-write">
151+
</iframe>
152+
</div>
153+
<p></p>
154+
155+
## 5. Add issuer ID to Dreamflow
156+
157+
Copy the **Issuer ID** from [**App Store Connect**](https://appstoreconnect.apple.com/) by navigating to **Users and Access** > **Integrations > [Team Keys](https://appstoreconnect.apple.com/access/integrations/api)**, and then paste it into **Dreamflow** **> Publish > iOS > ASC Issuer ID**.
158+
159+
160+
<div style={{
161+
position: 'relative',
162+
paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
163+
height: 0,
164+
width: '100%'}}>
165+
<iframe
166+
src="https://demo.arcade.software/thInLV2e3oSn0ZVY6bAV?embed&show_copy_link=true"
167+
title=""
168+
style={{
169+
position: 'absolute',
170+
top: 0,
171+
left: 0,
172+
width: '100%',
173+
height: '100%',
174+
colorScheme: 'light'
175+
}}
176+
frameborder="0"
177+
loading="lazy"
178+
webkitAllowFullScreen
179+
mozAllowFullScreen
180+
allowFullScreen
181+
allow="clipboard-write">
182+
</iframe>
183+
</div>
184+
<p></p>
185+
186+
## 6. Add Key ID to Dreamflow
187+
188+
Open the [App Store Connect](https://appstoreconnect.apple.com/) > **Users and Access** > **Integrations > [Team Keys](https://appstoreconnect.apple.com/access/integrations/api)**. Find the row for the API Key you generated [here](#4-generate-api-key-and-add-to-dreamflow), select **Copy Key ID,** and then paste it into **Dreamflow** **> Publish > iOS > ASC Key ID**.
189+
190+
191+
<div style={{
192+
position: 'relative',
193+
paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
194+
height: 0,
195+
width: '100%'}}>
196+
<iframe
197+
src="https://demo.arcade.software/cAgczPgrJSuirZJswsdn?embed&show_copy_link=true"
198+
title=""
199+
style={{
200+
position: 'absolute',
201+
top: 0,
202+
left: 0,
203+
width: '100%',
204+
height: '100%',
205+
colorScheme: 'light'
206+
}}
207+
frameborder="0"
208+
loading="lazy"
209+
webkitAllowFullScreen
210+
mozAllowFullScreen
211+
allowFullScreen
212+
allow="clipboard-write">
213+
</iframe>
214+
</div>
215+
<p></p>
216+
217+
## 7. Deploy
218+
219+
To deploy your app from Dreamflow, navigate to **Publish > iOS**, specify the **Bundle ID** and **Version Code**, and then click **Submit Build to App Store**.
220+
221+
Once deployed, you will receive an email from App Store Connect that a new build has been added to your app.
222+
223+
![app-store-deployment.avif](imgs/app-store-deployment.avif)
224+
225+
226+
:::info
227+
228+
- If another deployment is already in progress, deploying a new build will cancel the previous one.
229+
- It may take a few minutes for the request to process. Once completed, the status will be updated to **Submitted**.
230+
231+
:::
232+
233+
## 8. Submit your app for App Store approval
234+
235+
From [**App Store Connect**](https://appstoreconnect.apple.com/), select **My Apps** and choose your app. Select **Prepare for Submission**, add the app assets and metadata, and then click **Add for Review**.
236+
237+
![add-for-review.avif](imgs/add-for-review.avif)
238+
239+
Your app will now be reviewed by Apple. For additional information on Apple's review guidelines, please see [this link](https://developer.apple.com/app-store/review/guidelines/).
240+
241+
## FAQs
242+
243+
244+
<details>
245+
<summary>
246+
Invalid App Store Icon. The App Store Icon in the asset catalog in 'Runner.app' can't be transparent nor contain an alpha channel.
247+
</summary>
248+
<p>
249+
You need to update your App Launcher Icon (under Settings & Integrations --> General) with an image that isn't transparent and/or doesn't contain an alpha channel.
250+
</p>
251+
</details>

‎docs/test-and-publish/publish/google-playstore-deployment.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ slug: /deployment/google-playstore-deployment
33
title: Google Play Store Deployment
44
description: Learn how to deploy your apps to the Google Play Store using Dreamflow.
55
tags: [Google Play Store, Deployment, Dreamflow, Android]
6-
sidebar_position: 3
6+
sidebar_position: 2
77
toc_max_heading_level: 4
88
keywords: [Google Play Store, Deployment, Dreamflow, Android]
99
---

‎docs/test-and-publish/publish/imgs/add-for-review.avif‎

52.7 KB
Binary file not shown.

‎docs/test-and-publish/publish/imgs/app-store-deployment.avif‎

61 KB
Binary file not shown.

0 commit comments

Comments
 (0)