How to build a MESSAGING app in Bubble - Flexbox 2022 - Bubble Tutorial

Подписаться 4 тыс.

Просмотров 38 тыс.

50% 1

I’m Jason and I teach non-technical people, like myself, how to build apps without writing one line of code!
This video will show you how to add messaging to your Bubble app (and make it look good!) using Bubble’s new Flexbox responsive design engine.
If you're trying to build a WhatsApp clone, a Facebook Messenger clone, or an iMessage clone, this video will give you step-by-step instructions.
🔔 Subscribe for more no-code tutorials just like this: ru-vid.com...
⚠️ Don't forget to grab the link to this exact project so you can see it live in Bubble! www.buildappswithoutcode.com/...
🚀 Do you need extra help with your no-code project and want to work with me directly? Let's chat! Go to www.buildappswithoutcode.com/....
🎵 Intro music by Mar:One open.spotify.com/artist/1hwPl...
#nocode #bubble #buildwithbubble

Опубликовано:

9 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 100

@BuildAppsWithoutCode 2 года назад

Thanks for watching! Don't forget to grab the link to this exact project so you can see it live in Bubble. Get it here www.buildappswithoutcode.com/bawcchat

@ROImediaGuy Год назад

is this design responsive for basically any device? (newby here. thanks for your videos.. just subscribed.)

@marknikiforov9661 11 месяцев назад

Is this function still in working condition? Have tried twice to input my email, and have not received any access email back.

@patrao3094 Год назад

You really saved me! I was working on a tight deadline, and this is honestly the best tutorial out there for building a messaging app with Bubble! The fact that you spent so much time explaining how to perfect the UI was the cherry on top of the cake. Thank you!

@itsjes3d 7 месяцев назад

jaja loved the bear conversation

@burner918 Год назад

What an amazing tutorial. Thank you so much for this.

@hammedakindunbi Год назад

Thanks for making this great video FREE!!! You are highly appreciated

@YayZ Год назад

Thank you so much. Short and informative. A smart presentation with noise jokes.

@rynardwakefield2637 2 года назад

This was gold! Entertainment and awesome skill, keep them coming mate!

@BuildAppsWithoutCode 2 года назад

Thanks Rynard! More to come! 💪🏻

@UrbanSurferSouthAfrica-rf8yu 5 месяцев назад

Hi Jason, THANK YOU!! This was easy to follow and implement into my app. Well done!

@kipyegonkurgat5615 7 месяцев назад

I have been laughing the whole tutorial due to humour, so informative though.

@lucasguarnieri1877 6 месяцев назад

awesome! thank you

@efozia.o6750 2 года назад

Thank you so much Jason. You Rock!

@BuildAppsWithoutCode 2 года назад

Thanks for watching! 🙌🏻

@standupclips2768 Год назад

This is literally the best Bubble video I've seen

@slavafish Год назад

Great video!

@evg.datsiuk 6 месяцев назад

Awesome!

@wealthyman5420 2 года назад

Thanks man. Much Love!

@BuildAppsWithoutCode 2 года назад

Glad you enjoyed it!

@sanzharainabek272 Год назад

had fun thx

@abdullahazhar3831 2 месяца назад

Amazing!!!!!

@suaultimadieta 2 года назад

thank you so much! You helped me a lot

@BuildAppsWithoutCode 2 года назад

Glad I could help Guilherme! 🚀

@Noasamm 2 года назад

Amazing tutorial, thanks so much, please keep do that :) (from france)

@BuildAppsWithoutCode 2 года назад

Thanks for watching Noa! 🇫🇷

@choongching Год назад

Hey Jason. Thank you for guiding me in creating such chat feature in this video. Appreciate it! Allow me to propose an additional request to show us how to add in an additional feature like showing prefilled answer as choices like "Thank you!", "See you soon", where users can just tap it and send it as a response. :D Thanks again~!

@thedesigndatabase Год назад

THANK YOU SO MUCH FOR THIS!!! Is there a video or can you please make a video about how to notify someone when they have a new message when they're not on this page? Is there a way to send an email to someone or add a little number to an envelope icon on a header?

@standupclips2768 Год назад

How would you design the notification system now that it's best to avoid "do a search for" with the new work unit measurement? Could you make another video?

@mohamedfarid7499 Год назад

Best No code channel

@BuildAppsWithoutCode Год назад

No - you're the best!

@raamasf Год назад

Amazing content!

@BuildAppsWithoutCode Год назад

Glad you enjoyed it!

@RicardoGuedes Год назад

Amazing tutorial, thanks a lot! I Only miss a page to users can input yours Propertys, have some video that shows that feature? Thansk again

@Me-ew6wz Год назад

how to put emoji in input?

@TMBingo Год назад

Good job! 🤓

@BuildAppsWithoutCode Год назад

Thank you! Cheers! 🍻

@cornhub576 Год назад

Back when bubble was not yet using flexbox, creating these messaging function was a bit tricky because of the messaging bubble design. LOL!!

@BuildAppsWithoutCode Год назад

Truth!

@magomeda.4576 2 года назад

you could make just one message in the repeating group line, assign a column type, and change the alignment in the condition. This will reduce the load by half, but visually nothing will change.

@BuildAppsWithoutCode 2 года назад

Hi Magomed, that's a great idea! I'm going to try it out, thanks! 💪🏻

@Jeevanmn Год назад

This is great content- can you please do a video showing how to make this mobile responsive?

@AlessaP 9 месяцев назад

Hi :) this has been so helpful! I implemented this a few months ago and it worked well, however now if I open the messages it just says "loading" for time element and also clicking on the chat to open the messages does not seem to work anymore. Any idea why that could be? Or any incopatible Bubble updates?

@sundarapandim1104 Год назад

Kindly Post Video about ChatGPT-4 API & How to use on bubble to build app. By using chatgpt how can we improve app building in bubble

@mazenammar3795 Год назад

Hi and thank you for your great video. One question regarding changing the message to read="yes". Your solution is to trigger workflows with chat click and page load. What if the user have the page open with the chat active and another user sends a message. The new message will show but both events will not be triggered and the message will remain read="no". What are your thoughts?

@ivanrossi8622 Год назад

Hi, this is a very helpful video! I tried to do it, and I did it! But I want to make a change to your model and add a search box above the repeating group chat. I want to let users search for users' chats or messages sent. I tried a different way, but when I find for example a user and I click on it (from the search box) the repeating group shows me always the same chats and not only that filtered for the search value. Can u help me?

@user-pf9th5dy1t Год назад

Hi there! I followed your video to the T and the chat works perfectly, however, now I have 15 error messages that say "Search for Messages value should be chat but right now it's a different chat". It's a very strange error message and I don't know what it means nor how to fix it. I would be eternally grateful if you could provide some advice on this please!

@chlins 2 года назад

Pena ser o último vídeo. Este é o melhor tutorial de clone Airbnb que encontrei, mas falta muito ainda para tornar-se um projeto completo. Espero que vocês continuem a incrementar este clone. Parabéns.

@BuildAppsWithoutCode 2 года назад

Thank you! It won't be the last Airbnb video, more to come! 😉

@CrossSword Год назад

Hi there Jason, I love your tutorials but I am trying to combine what you teach in the messaging app with the instagram app. When you set up the new message feature the workflow relies on going to a new page but in the instagram app you say to stay on just the index page using parameters etc.. How do I set the new chat when it goes to the index page and not a new page? Thanks so much and please keep releasing videos, they are clear and humorous!

@BuildAppsWithoutCode Год назад

Thanks for your kind words! More videos are to come definitely. 🖤 These are two different ways to achieve the same goal. If you're building for mobile, a single page application is usually the better bet because it's faster. You could have a page parameter, similar to how I did it in the Instagram videos, that displays the correct group. Then, instead of sending the data on the go to page action, you could use the 'Display data in group' action. Just make sure your group has the correct type of content (probably 'Chat'). Hope this help! - Jason

@vamosfalarde3d 2 года назад

Só tenho a agradecer, obrigado :)

@BuildAppsWithoutCode 2 года назад

de nada!

@andriygrygorenko2622 Год назад

Great video! Just one question: how do you get the chats to sort by whichever has the most recent message? (Kind of how the iPhone will put your conversation with the most recent new message at the top)

@gianlucabiancardi4962 Год назад

hei man did you arrive to a conclusion?

@patrao3094 Год назад

@@gianlucabiancardi4962 I found a p easy solution. Just add a "Last Message Timestamp" field to Chat in the database. Update that whenever a new message is created with the 'Current date/time' of when the message is created. Sort the repeating group showing the users by Last Message Timestamp in descending order. Voila.

@thedesigndatabase Год назад

Also can you please tell me how the user can delete messages?

@wealthyman5420 Год назад

Hey Jason, how to I make "messages" repeating group scroll to the last item on the receipt side. For instance, if someone sends me a message and the senders chat is currently open... how do I make repeating group scroll to the most recent messages?

@BuildAppsWithoutCode Год назад

You might be able to do this by using the "Scroll to entry of a repeating group" action. Just find the 'last item' message to scroll to.

@nickoconnell3335 Год назад

Hello! Great Video! How can we sort the repeating group so the most recent message/chat goes to the top?

@BuildAppsWithoutCode Год назад

Hi Nick, in the video I don't think we added a 'Sort By' in the Messages'repeating group, so the default sorting is top to bottom. If you click on the Data Source of the repeating group you can sort by Creation Date (Descending = Yes). You might also need a 'Scroll to entry in repeating group' action to make sure it's scrolled to the latest message. Hope that helps!

@lizmarshall1573 Год назад

Amazingly helpful video! Thank you so much! I'm a total novice, and I followed you all the way through to 43:19. At that point, in setting the conditional for the Shape Unread, it looks like you first set up a search for a chat within a search dialogue window, close it, then set up a search for a message within another search dialogue window. But how do you attach both searches to the conditional? Did you replace the chat search with the message search? But then how do you know which chat you are searching for the message in?

@lizmarshall1573 Год назад

Scratch that--I figured out how to do the nested search. Phew. I couldn't figure out how to do it by defining the chat search first, as you show, but perhaps I'll figure out the trick with a little more playing. Thank you again for an INCREDIBLY helpful video!

@Noasamm 2 года назад

I can't add the name of the recipient to the right of "Messages" in the upper right corner. So that you know with whom you are in conversation even without sending a message

@BuildAppsWithoutCode 2 года назад

The way I did it was 'Current Page Chat's Users:filtered:first item's Username'. The 'filtered' constraint is 'Username Current User's Username' so your own user doesn't show up there. I might not have covered this in the video, but it's on the Bubble project now, so if you're still having trouble go to www.buildappswithoutcode.com/bawcchat to get the project URL and you can copy what I did.

@muhammadzeeshaniqbal1533 Год назад

how you use emojis ?

@Lamejorap 8 месяцев назад

Te falto explicar algo, como hacer para cuando aprietas en la foto cree un chat con esa persona y no solo habrá la se dirija a la página?

@yutahamaguchi8876 Год назад

Hello. thank you for the amazing tutorial. just a question. there was no letcture to set up chat user screen. so I lost around 10:00 when you start to explain "go to chat page" there was no choise if "contains" as i couldn't set "type of content" , it would be great if you can add to tutorial. thank you!

@yutahamaguchi8876 Год назад

Solved by make it as list :)

@BuildAppsWithoutCode Год назад

Hi Yuta, glad you figured it out! Don't forget you can get access to the Bubble project from the video if you get stuck again. 💪🏻

@shauna1306 Месяц назад

Great video! Does in app messaging significantly drive up costs on Bubble?

@lorruee Месяц назад

same question

@SomeOne-ke4fz 2 года назад

What about payment? The renter needs to pay (credit card) when they book, the website has to hold the money until renter leaves, then distribute that money to the renter (minus commission for the website owner)

@BuildAppsWithoutCode 2 года назад

This can definitely be done in Bubble! I haven't made a video on payments yet, but will add it to my list of future videos to do.

@howai1942 2 года назад

Hello, I am a beginner on Bubble. This video is very good for me. However, I failed to build an add friends system like you as Peter and Meg. Can you tell me more about how to connect these users together? Thanks

@BuildAppsWithoutCode 2 года назад

Hi! I'm not sure exactly what you're asking. Are you asking how to create a new chat between two users? In the video it goes over this starting at 10:16. Is this the part you are struggling with?

@keppet24 7 месяцев назад

@@BuildAppsWithoutCode hey thanks for ur content! But the thing is i don’t quite understqnd how u built the index page ? because u did it off screen so it’s hard to follow from there

@guyblueoceans9072 Год назад

Does the above build render correct on mobile devices? My instincts tell me it would not but want to check

@BuildAppsWithoutCode Год назад

Hi Guy, you’re right - this build is not responsive for mobile. It could be with a little more work though!

@guyblueoceans9072 Год назад

@@BuildAppsWithoutCode makes sense. the only reason I ask is I'm currently figuring out how to properly setup 100% viewport scaling/height in order for the message reply section of chat to be at bottom of phone screens without a need for scrolling. Def multiple methods out there but setting a page to column & then dropping a new group inside that set to Align To Parent seems to work bc the ATP group always seems to scale correctly on mobile. Curious how you would approach it?

@petar4253 Год назад

Awesome tutorial bro, but please volume up a bit your voice

@KuldeepVerma-ex7ek Год назад

awesome video. how can we achieve lazy loading of messages????

@BuildAppsWithoutCode Год назад

Hi Kuldeep, I found this post on the Bubble forum which explains lazy loading on repeating groups pretty well! Hope it helps! forum.bubble.io/t/repeating-group-performance-by-showing-only-last-50-records-initially/218308

@nickcrus766 Месяц назад

Great video series, thanks. I'm trying to recreate the user list in my own app and have copied the BAWC list which you provided in the link but the repeating group is not displaying anything. I removed the constraint to see what would happen but that only shows the current logged in user. Do you know what might be the issue? Thanks

@nickcrus766 29 дней назад

its ok I solved the issue. It was because I had previously set up a privacy rule in the User's data table

@forzabike 2 года назад

When are you going to revisit the Airbnb clone series? It's been too long

@BuildAppsWithoutCode 2 года назад

This is the latest video in the Airbnb series ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-yN3vLdOIfXw.html

@forzabike 2 года назад

@@BuildAppsWithoutCode Keep them coming! Amazing work as usual 🎉

@shabatidjani1354 2 года назад

nice tutorial but kind of complex

@noumanm235 Год назад

Hi! I've followed all steps but my app didn't show users profiles and names Group Users at index page, I've same four entries in Database. Similarly no users under chat section at bawc-chat page. Anyone who could help me to resolve that issue. Thanks 🙏

@BuildAppsWithoutCode Год назад

Hi Nouman, check your privacy rules. You might have a privacy rule on Users that is causing this issue!

@noumanm235 Год назад

@@BuildAppsWithoutCode Thank you so much for help. This resolves the issue. I just check mark all the options under Everyone else (default permissions) and, Boom! Users are displayed in app. Thanks, once again.

@BuildAppsWithoutCode Год назад

@@noumanm235 awesome! Glad that worked! 🥳

@Nduk123 Год назад

Great Tutorial but you could slow it down a bit. Struggling to keep up and digest what the constraints and workflows are doing.

@BuildAppsWithoutCode Год назад

Noted! Thanks for the feedback.

@MaxSmm_business 2 года назад

I think Lauren doesn't like your salt joke 😅

@northwolf2408 Год назад

This video is great helper but I didnt like that you cut some parts off to solve some problems and left us to figure out the soliution ourselfs. Not so nice 27:03

@northwolf2408 Год назад

Nevermind

@BuildAppsWithoutCode Год назад

Glad you were able to figure it out! 🙌🏻