Build A Full Web Chat App with NoCode From Scratch (Step by Step)
HTML-код
- Опубликовано: 29 июн 2024
- View/Clone this FlutterFlow app (and all my other FlutterFlow/NoCode apps), get access to live streams, Q&As and an exclusive behind the scenes content, in-depth masterclasses and support my work!
👍 / jamesnocode
Get My NEW Training - Mastering FlutterFlow
👍 masteringflutterflow.com
👍 FlutterFlow Playlist:
• FlutterFlow Overview a...
👍 Subscribe to channel: bit.ly/3c0q4XT
👍 Bubble.io Playlist:
• Introduction To Bubble...
👍 AppGyver Playlist:
• AppGyver
👍 Thunkable Playlist:
• Thunkable
👍 Adalo Playlist:
• Adalo Tutorial for Beg...
👍 GlideApps Playlist:
• Glide
👍 Apify Playlist:
• Apify
⏱️ Timestamps:
00:00 Start
00:46 Designing the app
02:50 Architecting the app
06:44 Setting up Firestore DB
09:16 Building the app
10:10 Creating login pages
11:56 Setting up firestore rules
12:47 Designing the main page
17:15 Displaying list of chats
22:20 Displaying the messages
48:10 Starting new chats
59:54 Launching the app
01:01:09 Get more content
01:02:43 Outro 
Хобби
![Gunna - back in the a [Official Video]](http://i.ytimg.com/vi/oBrbejOHjLw/mqdefault.jpg)
👍 View/Clone this FlutterFlow app (and all my other FlutterFlow/NoCode apps), get access to live streams, Q&As and an exclusive behind the scenes content, in-depth masterclasses and support my work: www.patreon.com/jamesnocode
👍 Get My NEW Training - Mastering FlutterFlow: masteringflutterflow.com
Hi James, how long is your masterclass ?
I really appreciate your efforts in creating this guide. It was very useful. I would love to see a follow-up episode where you show us how to add friends to a friend list and view the chat feature with friends included. That would be awesome.
Hello, this chat can't be solved a little problem, how is it?
Awesome video. An interesting topic would be that you build a referral app. For example when someone buys something with a certain unique link, the person that created that link gets points or something like that :)
thanks james i have built many apps in flutterflow coz of ur tutorials thanks your the best
What an amazing video. Thanks so much James.
Brother James i am your fun and learning soo much from you. Thank you and God bless u much.
James, keep up the great content. I learned a lot from your videos 👍💪
Can you do a video with custom functions. An NFC tag app that reads and writes would be dope maybe one that does both nfc and barcodes.
Also a project that focuses on projects with members and invites.
Or an IOT project that utilizes BLE.
These are commonly asked about within the community but lack reply’s and tutorials.
What amazing tutorial, thank you James
Your video is amaizing and super helpful, THANKS!
Thanks for this tutorial. The only issue is the warning text - "Pick chat on the right", while actually you have to pick something from the LEFT)))
thank you bro that was really helpful
James, Great video as always, Please do some videos using Supabase!
Hi James, at about 28:20 - 28:50 you create a local state, called activeChat, I followed your steps accurately, Im on V.3 of FlutterFlow I believe thats now called App State, but when I create the query collection on the list view for the chats, and select the variable activeChat, it immediately open another small panel, inside the selection activeChat and I have a red Document ID that cannot be selected here.
Can you please help me out?
Thank you James, I am learning so much from you. Btw, how do we get rid of that "Built in flutterflow" icon at bottom right.
Ok at 30:16 I noticed that you did a conditional visibility on the messages that using "uid" and compared it to auth. user. Is there a reason we used users as a list of strings instead of it being a list(reference doc. users) ?? I feel like the comparison should have been between the users Document > document ref and the Auth user> document reference. I feel like i missed the part where the user list was populated with string values.
thanks James very helpful and clear ! but I have a problem, how can you set the list view of the messages by default scrolled to the bottom ? because when I go into a conversation with a lot of messages I need to scroll a lot to get to the new ones
Nice tutorial, I want to know how flutterflow works though I've been learning bubble, do you think it's okay to master flutterflow as well?
thanks
Thanks James great video. Is it possible to delete all messages in a chat? Becuase when I remove the chat reference, all of the messages are still there.
This is great
I will finish it today
Hye, great video ! I'm one of your subscribers, can you do a video where you setup a firebase database from scratch ?
Please make a video on how to build an image enhancement app
Hi man! Nice tutorial. Only one point. If we have thousand of users chating all day, We will have a problem with Storage in Database of Firebase ,It could cost a lot
Thanks for the video bro, but am facing an issue on my app I need any sent/received messages to automatically scroll the screen to the end. UNLESS, the user is scrolling through messages, in which case it doesn't scroll until user manually goes back to the end of the messages. It's basic functionality of how any messaging app works. How can i fix that pls
Why is your patron link no longer accessible?
I enjoy ur content bring. keep it up
Hi James great video, thanks for sharing it. However I see one small issue which is, when you open the app in two tabs at the same time and chat, the message may not get reflected unless you refresh the list as it is not a realtime database right? How did you deal with that?
Hi James, I have been following your videos and would like to know your insights on how scalable of Flutter Flow app, looking forward to your reply
How to trace domain hardware keeper application, i filling the case because my personal information and account from google is, take out and export authomatic without my consent,
Can you please do a noob friendly step by step tutorial on multi-threaded comments (like facebook/YT/IG) and unique usernames?
one thing that appears to be missing is where a user actually sets up their display_name.. when they create an account it's just email and password, but when you create the app you're constantly referencing display_name.. where is this initially created so it can be stored and referenced?
How. Can we add a qr code pairing option. 2 people scan qr code and start chatting
Tutorial for a building gig platform app please
Pls help me. How to trace
May I ask you which software do you use to make mockups/diagrams in your videos? Thanks. Great tutorials as usual
Unfortunately he won't answer, but it's Whimsical.
@@IspyrGameDev thanks a lot :)
I think it’s Miro.
Its similar to click up and lucid chart.
@@ChrisS-oo6fl Nope, it’s Whimsical, as Yspyr GameDev suggested above.
Is it okay if you give a 1-year discount for students?
Please make an app like netflix
Do you know how to set the focus on the last message sent by an user inside a chat?
When I press the button to send a new message I always have to scroll the list view in order to see the newly created message 😕
Did you figure this out Mikhail ?
I'm stuck at the same problem. Anyone figured that one out?
have you figured out a way to address this yet?
does anyone know how to add a group chat feature
does anyone have any idea how i can do this yet?
James please make the same app by using ai chat
Hello I would like to know if you can tell me what may be wrong with respect to the steps I have followed tututorial, I do not understand why to reach the point of 36 min. and do my test my result is different from yours because nothing is represented, nothing that has to do with the data query because the click on the left sidebar I do not see the users that I have in the Firebase database and what is the chat column either, what I noticed is that what corresponds to the authenticated user at the bottom of the left bar is not seen either, but if I put a default value if it is represented; could you say that could be? is that in my database is similar to the one you represent at the beginning of the tutorial, is there any documentation that you can provide me to consult please. A hug from Colombia - Medellin...
aeiou ☺
can i hire you to build my application in flutterflow? email pls.