Build A Ride Share App: Full Stack Tutorial with Laravel and Vue
Vložit
- čas přidán 1. 06. 2024
- Learn how to build a fully functional ride share application using PHP and JavaScript with the Laravel and Vue frameworks.
By the end of this video, you'll have a basic app that lets you choose between being a driver or passenger, map routes to destinations, send real-time notifications to users, and track driver and passenger locations with GPS!
This is best viewed at 1.25x or 1.5x speed!
Course contents:
- 00:00 What we're building
- 02:06 Setting up the backend
- 16:38 Building the API
- 1:08:47 Adding websockets events
- 1:21:02 Setting up the frontend
- 1:30:58 Adding login and authentication
- 2:05:00 Passenger flow
- 2:49:15 Driver flow
- 3:33:40 Connecting everything together
- 4:10:50 All done!
Notice any bugs? Have questions about the code? Feel free to leave them in the comments or open up an issue on the GitHub repo!
Send me new video ideas and vote on what's coming next: suggest.gg/aschmelyun
Follow me on Twitter! / aschmelyun
Join my newsletter, where I send out new information about twice each month in the PHP, JavaScript, and Docker realms: aschmelyun.substack.com - Věda a technologie
Forgot to link the source code, check it out here: github.com/aschmelyun/andrewber
thankx
and you forgot the links in 1:10:04
Having a CZcams channel myself, I can relate to the monumental task of creating a tutorial like this. Thank you for your contribution the Laravel community.
youre both awesome
Opened CZcams, saw you dropped this video, put the laptop in a backpack, and came to the neighborhood park to enjoy it with a late evening spring sun 👌
You don't know how useful was this course for me. Thank u so much men!
Hey I'm glad you liked it! Appreciate the kind words, it means a lot.
A fascinating window into your thought process, thank you!
Good stuff man!!! I like your comment “2 modern and popular web frameworks” sick man!
Your content is very interesting, and your explanation style is quite good. I'm really enjoying building this app following the tutorial. I never thought a newbie like me could build an app like this, and I've understood all the concepts very clearly. Thank you so much for providing such premium content for free! I truly appreciate it
laravel 10 in windows, how did you solve all the version issues with websocket that is abandoned and with that fruitcake that is also abandoned. i manage to get HTTpie up and running after much trouble but im stuck now because of packages laravel 7+ are not using anymore...
Edit: manage to fix it by fixing the cors.php file in laravel 10
Still watching but had to press F to pay my respects for the smooth transition at 0.30 🫡
Glad you're back to regular uploads
My favorite stack ! Thank you for sharing !
I thoroughly enjoyed this tutorial. Very good, it's like watching an interesting movie. Man! You know your onions.
This is an awesome tutorial. Subscribed. Thank you for sharing.
Fantastic ❤, your voice is soothing. ☺️
More Vue projects.
More Laravel projects.
This is awesome. Thank you so much Andrew.
Wow, nice tutorial! I would like to see a tutorial in which you use TDD, the app doesn't have to be anything big like this tutorial :) Most of new laravel users are struggle with TDD including me and i can't find any up to date TDD tutorials.
Very awesome and highly appreciate this!!
The only thing i will say is about the accept, start, end, location... Those should be their own controllers to follow proper Laravel standards and shouldnt have its own method. The method would just be update for all of them, but different controllers (UpdateTripController, etc)
Thank you for the amazing vid!
I really Love, Thanks for the Tutorial
Thank you very much for this tutorial video!
great tutorial, thank you! Had one problem with Laravel websockets which is depreciated, so I replaced it with Laravel Reverb!
I am a seasoned Laravel developer myself, but I learned a thing or two here, so great job Andrew :)
I enjoy this kind of tutorial, where you build an actual app from a-z.
pls do you have any study material recommendations for beginners? there are not many online
@@width19 what's wrong with laracast?
The amount of time it must've taken, considering the fact it's very well edited & explained, is insane.
Thank you for all your efforts, subscribed!
Thanks so much for the kind words! It definitely does take a decent amount of time to plan, record, and edit everything, but I enjoy building these kinds of practical apps and showing how others can do it, too!
I'm glad you enjoyed the video, appreciate it!
wow thank you! that tutorial is so Valuable.
FYI. If the TripCreated in standbyview not show after you created trip, you should mention "implements ShouldBroadcast"
So the line is, "class TripCreated implements ShouldBroadcast"
Thanks for that head's up, some shoddy editing probably left that out
Thanks for the amazing tutorial
Awesome video, thanks for sharing!
Thanks for watching!
Wonderful video, thanks a lot.
A quick question, is there a reason why the car is not a separate entity? Or was it just for simplicity?
Thank you for this.
You just got yourself a subscriber
Best tutorial 🎉
Awesome content 😊😊
Great Video Andrew! I learnt a lot from this well-packed course. Please what VSCode theme do you use? I notice the syntax highlighting is really good
Thank you so much, I'm glad you liked it! I use a theme called Ace Palenight and the font is JetBrains Mono.
It would be good to learn how to set up Doker in separate sides how in this project. (frontend, beackend)
good work brother!
Thanks, I appreciate it!
Great job, Andrew, thanks for your contribution! Any plans for a similar Livewire demo?
I didn't have anything in mind, I'm not super well versed in Livewire. But, if there's enough community demand I can start thinking and planning it out!
i second this
Hey Andrew - I'm about halfway through the video so far and I see in the description that we can open issues on the GH repo but I don't actually see it linked. Are you able to do that?
Content-wise: I'm loving this! Great work, brother! ❤
Thanks so much for the support and kind words! I forgot to put a link to the source code originally, but you can check out the repo here: github.com/aschmelyun/andrewber
It's good for me because I want to learn how api works
Hi Andrew, I am having some issues with Twilio. I am unable to receive the text message on my phone, what do I need to do?
looking simple and easy 🙂
Of course... Laravel. ❤
Oh believe me, that's a ton of editing haha
@@aschmelyun that made it easy for us 😇
When i make a request to api/login, the user is created, then the sms notification fails with this error: "Driver [App\\Notifications\\TwilioChannel] not supported." did anyone encounter this? I can't seem to find any info on a workaround.
Thank you
router.push not working to go to landing page after putting login_code. route changes to landing but the page details shows loginview page on time 1:56:49. give some ideas
Thanks for all
please i have this pb: SSL certificate problem: unable to get local issuer certificate, when i try to login the user
Hi, your video is super helpful and detailed! I can tell you put a lot of effort into this. Is there a Laravel starter kit (Laravel Breeze, Jetstream, etc) you would recommend if I wanted to authenticate users through email instead phone number for this project? Thanks and I look forward to your upcoming content!
Laravel Breeze is the absolute best starter kit for email validation. Includes register/login routes, forgotten password, email verification, etc.
What is the theme that you are using for vscode
Amazing!!
Thanks!!
Hello my teacher I want to use laravel api and vue in the same project I do not want to use blade file please could you shoot a video about it
Thanks❤
Hey Andrew, I've got a couple of questions. Here's one of 'em: Can we use auth()->user() instead of Injecting the Request $request and accessing the auth user through it? Or as we're working with APIs now, so we should use the $request->user()?
Correct, you can use auth()->user(), or Auth::user(), or $request->user(). Kind of just depends on your style and what's applicable to your code base. I was constantly working with requests, so I like going through the request object.
@@aschmelyun Thanks for the clarification, Andrew. However, we demand more contents like this one!
Keep them coming 😀
intent-script.js:2 Geolocation permission has been blocked as the user has dismissed the permission prompt several times.
Thanks
for the accept method, you should probably verify if the user is actually a driver
is there any reason you made $trip public in the events? but user is private?
Great! Laravel Backend & Vue Spa as a Frontend❤. Could you maybe do a Video with Quasar as frontend? Maybe a chat app? Perhaps you could also implement Push notifications? Send by Laravel? A mobile app build from quasar would also be great. Thank you Andrew! 😊
That's a good suggestion! I already have creating a chat app with Vue + Laravel on my to-do list, I'll have to look into Quasar and see if I can add that to it as well.
Fantastic. Thank you so much
@@aschmelyunHi... Any progress /decition for this topic?
I'm not sure if my twilio setup is correct because Im not receiving any login_code when I use the api, but it updating my DB. is there a link you can point that you follow to configure your account?
I emailed the support and they said shortly "you need to upgrade account to make it work."
ooh 😂 isn't totally free 🤦
you leaked your phone number when calling api through console
Hi Andrew - Great information so far .. but it seems websockets is no longer supported and I could not get it to load on laravel10.
Thank you so much for this
I also had the same issue but I saw a post that says you should add -W in front of the installation command it worked for me. I did that because I wanted to finish this course waiting for 'Laravel Reverb' to be released.
@@mackshonayi943 worked for me too but the next issue is blocked authentication when sending the phone number. I get response with HTTpie and backend seem to work but i get [HTTP 401] Unable to create record: Authenticate and 500 status on the response....
nice
[02:22:27] Only the sad part about the video is that, you don't show the full HTML code when you paste it from your existing codebase. For someone like me who is more of a backend developer and have very limited CSS knowledge it is very difficult. 😣
Great video, can u share ur vscode config? Its so clean.
what is the token for twilio installations
Gracias Mister Adress emocionado con el curso
Uncaught SyntaxError: ambiguous indirect export: default
whenever I tried to use google map package that you have used, I am getting that error. Just to see I have installed new vue project and still getting same error. Any suggestions?
add this to your vite.config.js
optimizeDeps: {
include: [
"@fawmi/vue-google-maps",
"fast-deep-equal",
],
},
have you solved this error?
please make a program to see employee locations in the dashboard for admin management
Awesome, is there anyway to buy ready script like this?
It's up on GitHub for free if you want something that's ready-to-go. See the pinned comment for the repo! If you want something more customized, feel free to reach out to me directly.
Hi Andrew, Thanks for the video. I get this error "InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number" and have been stuck with it for a while now.
is it when you use HTTpie? i got that too. i had to make a request.json file with
{
"destination_name": "Starbucks",
"destination": {
"lat": 12.235235,
"lng": 23.43535
},
"origin": {
"lat": 35.2352,
"lng": 13.325235
}
}
then i called the json data with
http POST localhost:8000/api/trip 'Authorization: Bearer 1|YOUR_KEY_HERE' --json
Can you do Laravel-websockets AND React Native tutorial for this pleasee?
Please tutorial deploy on ubuntu, with docker, nginx and kubernetes
So many bugs at the end of the video.... i don't know either vue nor laravel...but watched anyway, very nice, might watch some more...
very nice. i have been working with Larvel for a year now and i didn't know that you can do a foreign key with a model class.
I learn new things with this framework on an almost weekly basis, and I've been working with it for like 6 years!
Hi Andrew, at 1:38:20 you say you don't want semicolons. May I ask why?
It's part of the default style guide when creating a new Vue app through their cli app. Me personally, I like semicolons...
Thanks!@@aschmelyun
What is that VS code theme?
[01:21:33] Yes please make some more videos on Typescript with vue
You got it! There's a few in the backlog coming up
@@aschmelyun wow happy to hear it🎉
Can you please share your vscode profile with us, it's looking cleaner!
i want that too :D
can you please make video to Upload and run project on Live Server ?😀
"...or open up an issue on the GitHub repo!" What Repo? o.0
What is your vscode font?
It's JetBrains Mono! You don't need a license to use it, either: www.jetbrains.com/lp/mono/
laravel-websocket event has not fired from my side and also not catch at 3:07:18
@@gaurangpatel7762 Thanks it is working now.
@@akmalkhan3075 I am having this same issue, how were you able to resolve it.
link for the source code please
🥰🥰🥰
It is amazing ❤ can you put the source code link please 🙏 ?
Whoops, forgot to put it in a pinned comment. Here you go: github.com/aschmelyun/andrewber
You know you didnt cut out the multiple takes at the end right lol ?
i have a proplems with vue Google map
is it Uncaught SyntaxError: import not found: default index.esm.js:1:8? or
Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/@fawmi_vue-google-maps.js?v=8cea8584' does not provide an export named 'GMapAutocomplete' (at LocationView.vue:5:10) ?
try add this to the locationView.vue file; import GMapAutocomplete from '@fawmi/vue-google-maps';
or run npm install -S @fawmi/vue-google-maps@0.9.67 then npm ls @fawmi/vue-google-maps
not sure what made it work for me. he uses old libraries with tons of bugs so its really hard to finish this.....
51:00 -- wondering about the Origin Name.
Hey doesn-t this need microservices?
And now to convince some people to Mule I mean drive and you’re rich. Ish.
You forgot to remove your map key .
1:18:44 Uh oh, your twilio credentials can be seen here 😥
Thanks for the head's up! Just as a precaution, all creds from this video were wiped.
@@aschmelyun Is your Phone number also wiped? It can be seen when you test the API request to verify your phone number
@@aschmelyun 36:34
This is a bad example as you've included a twilio api integration and most of the developers don't have a twilio account. a bit dumb to do a tutorial where in a lot of developers will have a blocker because of twilio integration.
php 🤮
Don't knock it til you try it ;)
I know, just joking ;)@@aschmelyun
@aschmelyun please how do I get a "From Number" if I'm using a Twilio trial account?
Thank you so much for the amazing content 👋👍🤝👏🎉👌🫡🙏🏻🥳😎✌️🫡🫡, immediately subscribed and liked as well
Hey man getting errors when installing beyondcode/laravel-websockets
That's not good, what kind of errors?
error
caught SyntaxError: The requested module '/node_modules/fast-deep-equal/index.js?v=16fde89a' does not provide an export named 'default' (a
have you solved that problem??
Add this to vite defineConfig in vite.config.js:
optimizeDeps: {
include: [
"@fawmi/vue-google-maps",
"fast-deep-equal",
],
},
Save and restart Vite server.
Open node_modules -> @googlemaps -> markerclusterer -> index.esm.js -> commen the // import equal from 'fast-deep-equal';
Open node_modules -> @googlemaps -> markerclusterer -> index.esm.js -> commen the // import equal from 'fast-deep-equal';@@lamhehe99
@@adamyordan3301Thanks this worked for me
HTTP/1.1 404 Not Found
Connection: Keep-Alive
Content-Length: 295
Content-Type: text/html; charset=iso-8859-1
Date: Mon, 25 Dec 2023 10:52:04 GMT
Keep-Alive: timeout=5, max=100
Server: Apache/2.4.56 (Win64) OpenSSL/1.1.1t PHP/8.2.4
404 Not Found
Not Found
The requested URL was not found on this server.
Apache/2.4.56 (Win64) OpenSSL/1.1.1t PHP/8.2.4 Server at localhost Port 80
this is the output when i type http POST localhost/api/login phone=. 35:36
Hmm, that's weird. Judging from the error, maybe an issue with your local Apache configuration not being able to handle the url rewrites that Laravel needs?