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

Поделиться
HTML-код
  • Опубликовано: 23 дек 2024

Комментарии • 110

  • @BuildAppsWithoutCode
    @BuildAppsWithoutCode  2 года назад +8

    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
      @ROImediaGuy Год назад

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

    • @marknikiforov9661
      @marknikiforov9661 Год назад

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

  • @patrao3094
    @patrao3094 Год назад +9

    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!

  • @rod.mackinnon
    @rod.mackinnon 7 дней назад

    This was one of my favourite messaging walkthroughs.

  • @chikiwawa
    @chikiwawa День назад

    that was a detailed presentation I'm very happy to see it. Hope you do more coz I'm having a hard time understanding bubble LOL!

  • @rynardwakefield2637
    @rynardwakefield2637 2 года назад +3

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

  • @thedesigndatabase
    @thedesigndatabase Год назад +1

    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?

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

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

  • @choongching
    @choongching Год назад +1

    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~!

  • @MrRalebgd
    @MrRalebgd 16 дней назад

    Great tutorial, super easy to follow! Keep it up!

  • @mohamedfarid7499
    @mohamedfarid7499 2 года назад +1

    Best No code channel

  • @standupclips2768
    @standupclips2768 Год назад +1

    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?

  • @standupclips2768
    @standupclips2768 2 года назад

    This is literally the best Bubble video I've seen

  • @yutahamaguchi8876
    @yutahamaguchi8876 2 года назад

    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
      @yutahamaguchi8876 2 года назад

      Solved by make it as list :)

    • @BuildAppsWithoutCode
      @BuildAppsWithoutCode  2 года назад +1

      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. 💪🏻

  • @hammedakindunbi
    @hammedakindunbi 2 года назад

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

  • @nickoconnell3335
    @nickoconnell3335 2 года назад +2

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

    • @BuildAppsWithoutCode
      @BuildAppsWithoutCode  2 года назад +1

      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!

  • @RobertoArauz-h7v
    @RobertoArauz-h7v 4 месяца назад

    Hi Jason. awesome video thanks so much. I was able to pull it all together and it works like a charm. The only issue am facing is that on the index page, I still see the name of the user as an option to chat to? So if Stewie is the user, in the index page, he also appears as an option to chat with. Any idea on how to solve this? Cheers!

  • @shauna1306
    @shauna1306 6 месяцев назад +1

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

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

      same question

  • @RicardoGuedes
    @RicardoGuedes 2 года назад +1

    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

  • @lizmarshall1573
    @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
      @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!

  • @wealthyman5420
    @wealthyman5420 2 года назад +1

    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
      @BuildAppsWithoutCode  2 года назад

      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.

  • @user-pf9th5dy1t
    @user-pf9th5dy1t Год назад +1

    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!

  • @mazenammar3795
    @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?

  • @CrossSword
    @CrossSword 2 года назад +2

    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
      @BuildAppsWithoutCode  2 года назад +2

      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

  • @YayZ
    @YayZ Год назад

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

  • @andriygrygorenko2622
    @andriygrygorenko2622 2 года назад +1

    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
      @gianlucabiancardi4962 Год назад +1

      hei man did you arrive to a conclusion?

    • @patrao3094
      @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.

  • @burner918
    @burner918 Год назад +1

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

  • @magomeda.4576
    @magomeda.4576 2 года назад +1

    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
      @BuildAppsWithoutCode  2 года назад

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

  • @VOSTE1000
    @VOSTE1000 4 дня назад

    HELLO! I have problem with chats. When i want to send another message, a new chat i created again with that person...it is not just continue in the same chat, but it create new one.Chatting in that chat is ok, but when i exit, and than i want to send another message (from some book ad i made) it creates another chat with the same person...any help/advice? THANKS IN ADVANCE!! This was exreamly helpful anyway!!

  • @ivanrossi8622
    @ivanrossi8622 2 года назад +1

    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?

  • @efozia.o6750
    @efozia.o6750 2 года назад +1

    Thank you so much Jason. You Rock!

  • @SomeOne-ke4fz
    @SomeOne-ke4fz 2 года назад +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
      @BuildAppsWithoutCode  2 года назад +1

      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
    @howai1942 2 года назад +1

    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
      @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
      @keppet24 Год назад

      @@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

  • @itsjes3d
    @itsjes3d Год назад +2

    jaja loved the bear conversation

  • @sundarapandim1104
    @sundarapandim1104 Год назад +1

    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

  • @kipyegonkurgat5615
    @kipyegonkurgat5615 Год назад +1

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

  • @AlessaP
    @AlessaP Год назад

    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?

    • @moimoia1432
      @moimoia1432 4 месяца назад

      Hey I'm getting the exact same problem, did you ever work out a solution?

  • @wealthyman5420
    @wealthyman5420 2 года назад +1

    Thanks man. Much Love!

  • @Me-ew6wz
    @Me-ew6wz 2 года назад +1

    how to put emoji in input?

  • @Jeevanmn
    @Jeevanmn Год назад +1

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

  • @Noasamm
    @Noasamm 2 года назад +1

    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
      @BuildAppsWithoutCode  2 года назад +1

      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.

  • @Noasamm
    @Noasamm 2 года назад +1

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

  • @thedesigndatabase
    @thedesigndatabase Год назад

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

  • @KuldeepVerma-ex7ek
    @KuldeepVerma-ex7ek 2 года назад +1

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

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

      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

  • @jossdiim
    @jossdiim Месяц назад

    I would do it in reverse, cos you have to search all the database in order to find first the Chat and then the Messages. If you will connect it, starting from User, that will have Chats lists he involved in and then Chats that has messages. That way it will be more effective.

  • @Lamejorap
    @Lamejorap Год назад

    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?

  • @massimoraschella601
    @massimoraschella601 4 месяца назад

    Great job!

  • @TMBingo
    @TMBingo 2 года назад +1

    Good job! 🤓

  • @raamasf
    @raamasf 2 года назад +1

    Amazing content!

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

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

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

      This is the latest video in the Airbnb series ruclips.net/video/yN3vLdOIfXw/видео.html

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

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

  • @suaultimadieta
    @suaultimadieta 2 года назад +1

    thank you so much! You helped me a lot

  • @guyblueoceans9072
    @guyblueoceans9072 2 года назад

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

    • @BuildAppsWithoutCode
      @BuildAppsWithoutCode  2 года назад +1

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

    • @guyblueoceans9072
      @guyblueoceans9072 2 года назад

      ​@@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?

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

    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
      @nickcrus766 6 месяцев назад

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

  • @muhammadzeeshaniqbal1533
    @muhammadzeeshaniqbal1533 Год назад

    how you use emojis ?

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

    awesome! thank you

  • @noumanm235
    @noumanm235 2 года назад

    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
      @BuildAppsWithoutCode  2 года назад +1

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

    • @noumanm235
      @noumanm235 2 года назад +1

      @@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
      @BuildAppsWithoutCode  2 года назад +1

      @@noumanm235 awesome! Glad that worked! 🥳

  • @chlins
    @chlins 2 года назад +1

    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
      @BuildAppsWithoutCode  2 года назад

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

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

    Amazing!!!!!

  • @Nir.London
    @Nir.London 2 месяца назад

    thanks man!

  • @evg.datsiuk
    @evg.datsiuk Год назад

    Awesome!

  • @sanzharainabek272
    @sanzharainabek272 Год назад

    had fun thx

  • @petar4253
    @petar4253 Год назад

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

  • @northwolf2408
    @northwolf2408 2 года назад +1

    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

  • @Nduk123
    @Nduk123 2 года назад +1

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

  • @vamosfalarde3d
    @vamosfalarde3d 2 года назад +1

    Só tenho a agradecer, obrigado :)

  • @shabatidjani1354
    @shabatidjani1354 2 года назад +1

    nice tutorial but kind of complex

  • @MaxSmm_business
    @MaxSmm_business 2 года назад +1

    I think Lauren doesn't like your salt joke 😅

  • @madjazz4743
    @madjazz4743 Год назад

    Ahh, i see you are a man of culture.. "Identity theft is not a joke! Millions of families suffer every year!"

  • @slavafish
    @slavafish Год назад

    Great video!