- Видео 116
- Просмотров 109 974
Habibi Coding
Австрия
Добавлен 17 сен 2022
Learn Full Stack Development Habibi!
Vuetify 3 TypeScript Tutorial Series - Part 27
In this video, we created a Dockerfile and deployed the Docker image on an web server.
▬▬▬▬▬▬ C H E C K O U T 📚 ▬▬▬▬▬▬
Part 12 on medium.com ► medium.com/nerd-for-tech/vuetify-3-typescript-tutorial-series-part-2-8465beabd280
GitHub repo ► github.com/habibicoding/task-app-vuetify-youtube
Playlist ► ruclips.net/video/YajNE5-gg1E/видео.html
#vue3 #vuetify #typescript #vitest
▬▬▬▬▬▬ Arabic to English vocab ▬▬▬▬▬▬
hello guys and gals / marhaba ya shabaab / مرحبا يا شباب
bye / ila liqa / إِلَى اللِّقَاء
#pinia #axios #docker #habibicoding
▬▬▬▬▬▬ L I N K S to social media accounts 🔗 ▬▬▬▬▬▬
medium.com ► medium.com/@habibicoding
INSTAGRAM ► habibicoding
TWITTER ► habibi_coding
FAC...
▬▬▬▬▬▬ C H E C K O U T 📚 ▬▬▬▬▬▬
Part 12 on medium.com ► medium.com/nerd-for-tech/vuetify-3-typescript-tutorial-series-part-2-8465beabd280
GitHub repo ► github.com/habibicoding/task-app-vuetify-youtube
Playlist ► ruclips.net/video/YajNE5-gg1E/видео.html
#vue3 #vuetify #typescript #vitest
▬▬▬▬▬▬ Arabic to English vocab ▬▬▬▬▬▬
hello guys and gals / marhaba ya shabaab / مرحبا يا شباب
bye / ila liqa / إِلَى اللِّقَاء
#pinia #axios #docker #habibicoding
▬▬▬▬▬▬ L I N K S to social media accounts 🔗 ▬▬▬▬▬▬
medium.com ► medium.com/@habibicoding
INSTAGRAM ► habibicoding
TWITTER ► habibi_coding
FAC...
Просмотров: 783
Видео
Vuetify 3 TypeScript Tutorial Series - Part 26
Просмотров 7325 месяцев назад
In this video, we went through the shortcut commands in package.json ▬▬▬▬▬▬ C H E C K O U T 📚 ▬▬▬▬▬▬ Part 11 on medium.com ► medium.com/nerd-for-tech/vuetify-3-typescript-tutorial-series-part-2-8465beabd280 GitHub repo ► github.com/habibicoding/task-app-vuetify-youtube Playlist ► ruclips.net/video/YajNE5-gg1E/видео.html #vue3 #vuetify #typescript #vitest ▬▬▬▬▬▬ Arabic to English vocab ▬▬▬▬▬▬ he...
Vuetify 3 TypeScript Tutorial Series - Part 25
Просмотров 7456 месяцев назад
In this video, we wrote Unit Tests for removing a task. ▬▬▬▬▬▬ C H E C K O U T 📚 ▬▬▬▬▬▬ Part 11 on medium.com ► medium.com/nerd-for-tech/vuetify-3-typescript-tutorial-series-part-2-8465beabd280 GitHub repo ► github.com/habibicoding/task-app-vuetify-youtube Playlist ► ruclips.net/video/YajNE5-gg1E/видео.html #vue3 #vuetify #typescript #vitest ▬▬▬▬▬▬ Arabic to English vocab ▬▬▬▬▬▬ hello guys and ...
Vuetify 3 TypeScript Tutorial Series - Part 24
Просмотров 7306 месяцев назад
In this video, we wrote Unit Tests for creating and fetching tasks. ▬▬▬▬▬▬ C H E C K O U T 📚 ▬▬▬▬▬▬ Part 10 on medium.com ► medium.com/nerd-for-tech/vuetify-3-typescript-tutorial-series-part-2-8465beabd280 GitHub repo ► github.com/habibicoding/task-app-vuetify-youtube Playlist ► ruclips.net/video/YajNE5-gg1E/видео.html #vue3 #vuetify #typescript #vitest ▬▬▬▬▬▬ Arabic to English vocab ▬▬▬▬▬▬ hel...
Vuetify 3 TypeScript Tutorial Series - Part 23
Просмотров 7346 месяцев назад
In this video, we wrote more Unit Tests for taskApi.ts. ▬▬▬▬▬▬ C H E C K O U T 📚 ▬▬▬▬▬▬ Part 10 on medium.com ► medium.com/nerd-for-tech/vuetify-3-typescript-tutorial-series-part-2-8465beabd280 GitHub repo ► github.com/habibicoding/task-app-vuetify-youtube Playlist ► ruclips.net/video/YajNE5-gg1E/видео.html #vue3 #vuetify #typescript #vitest ▬▬▬▬▬▬ Arabic to English vocab ▬▬▬▬▬▬ hello guys and ...
Vuetify 3 TypeScript Tutorial Series - Part 22
Просмотров 7106 месяцев назад
In this video, we wrote an Unit Test for taskApi.ts ▬▬▬▬▬▬ C H E C K O U T 📚 ▬▬▬▬▬▬ Part 9 on medium.com ► medium.com/nerd-for-tech/vuetify-3-typescript-tutorial-series-part-2-8465beabd280 GitHub repo ► github.com/habibicoding/task-app-vuetify-youtube Playlist ► ruclips.net/video/YajNE5-gg1E/видео.html #vue3 #vuetify #typescript #vitest ▬▬▬▬▬▬ Arabic to English vocab ▬▬▬▬▬▬ hello guys and gals ...
Vuetify 3 TypeScript Tutorial Series - Part 21
Просмотров 8026 месяцев назад
In this video, we wrote our first Unit Test. ▬▬▬▬▬▬ C H E C K O U T 📚 ▬▬▬▬▬▬ Part 9 on medium.com ► medium.com/nerd-for-tech/vuetify-3-typescript-tutorial-series-part-2-8465beabd280 GitHub repo ► github.com/habibicoding/task-app-vuetify-youtube Playlist ► ruclips.net/video/YajNE5-gg1E/видео.html #vue3 #vuetify #typescript #vitest ▬▬▬▬▬▬ Arabic to English vocab ▬▬▬▬▬▬ hello guys and gals / marha...
Vuetify 3 TypeScript Tutorial Series - Part 20
Просмотров 7696 месяцев назад
In this video, we started to enable testing in our project. ▬▬▬▬▬▬ C H E C K O U T 📚 ▬▬▬▬▬▬ Part 8 on medium.com ► medium.com/nerd-for-tech/vuetify-3-typescript-tutorial-series-part-2-8465beabd280 GitHub repo ► github.com/habibicoding/task-app-vuetify-youtube Playlist ► ruclips.net/video/YajNE5-gg1E/видео.html #vue3 #vuetify #typescript #vitest ▬▬▬▬▬▬ Arabic to English vocab ▬▬▬▬▬▬ hello guys a...
Vuetify 3 TypeScript Tutorial Series - Part 19
Просмотров 8186 месяцев назад
In this video, we implemented all the necessary logic to delete a task. ▬▬▬▬▬▬ C H E C K O U T 📚 ▬▬▬▬▬▬ Part 8 on medium.com ► medium.com/nerd-for-tech/vuetify-3-typescript-tutorial-series-part-2-8465beabd280 GitHub repo ► github.com/habibicoding/task-app-vuetify-youtube Playlist ► ruclips.net/video/YajNE5-gg1E/видео.html #vue3 #vuetify #typescript #vitest ▬▬▬▬▬▬ Arabic to English vocab ▬▬▬▬▬▬ ...
Vuetify 3 TypeScript Tutorial Series - Part 18
Просмотров 7326 месяцев назад
In this video, we implemented all the necessary logic to edit a task. ▬▬▬▬▬▬ C H E C K O U T 📚 ▬▬▬▬▬▬ Part 7 on medium.com ► medium.com/nerd-for-tech/vuetify-3-typescript-tutorial-series-part-2-8465beabd280 GitHub repo ► github.com/habibicoding/task-app-vuetify-youtube Playlist ► ruclips.net/video/YajNE5-gg1E/видео.html #vue3 #vuetify #typescript #vitest ▬▬▬▬▬▬ Arabic to English vocab ▬▬▬▬▬▬ he...
Vuetify 3 TypeScript Tutorial Series - Part 17
Просмотров 7996 месяцев назад
In this video, we implemented all the logic for showing task details and creating a task. ▬▬▬▬▬▬ C H E C K O U T 📚 ▬▬▬▬▬▬ Part 7 on medium.com ► medium.com/nerd-for-tech/vuetify-3-typescript-tutorial-series-part-2-8465beabd280 GitHub repo ► github.com/habibicoding/task-app-vuetify-youtube Playlist ► ruclips.net/video/YajNE5-gg1E/видео.html #vue3 #vuetify #typescript #vitest ▬▬▬▬▬▬ Arabic to Eng...
Vuetify 3 TypeScript Tutorial Series - Part 16
Просмотров 8086 месяцев назад
In this video, we started to implement the logic for showing task details. ▬▬▬▬▬▬ C H E C K O U T 📚 ▬▬▬▬▬▬ Part 6 on medium.com ► medium.com/nerd-for-tech/vuetify-3-typescript-tutorial-series-part-2-8465beabd280 GitHub repo ► github.com/habibicoding/task-app-vuetify-youtube Playlist ► ruclips.net/video/YajNE5-gg1E/видео.html #vue3 #vuetify #typescript #vitest ▬▬▬▬▬▬ Arabic to English vocab ▬▬▬▬...
Vuetify 3 TypeScript Tutorial Series - Part 15
Просмотров 7406 месяцев назад
In this video, we implemented the composable and page for creating a task. ▬▬▬▬▬▬ C H E C K O U T 📚 ▬▬▬▬▬▬ Part 5 on medium.com ► medium.com/nerd-for-tech/vuetify-3-typescript-tutorial-series-part-2-8465beabd280 GitHub repo ► github.com/habibicoding/task-app-vuetify-youtube Playlist ► ruclips.net/video/YajNE5-gg1E/видео.html #vue3 #vuetify #typescript #vitest ▬▬▬▬▬▬ Arabic to English vocab ▬▬▬▬...
Vuetify 3 TypeScript Tutorial Series - Part 14
Просмотров 7336 месяцев назад
In this video, we implemented the logic for the component to create tasks. ▬▬▬▬▬▬ C H E C K O U T 📚 ▬▬▬▬▬▬ Part 5 on medium.com ► medium.com/nerd-for-tech/vuetify-3-typescript-tutorial-series-part-2-8465beabd280 GitHub repo ► github.com/habibicoding/task-app-vuetify-youtube Playlist ► ruclips.net/video/YajNE5-gg1E/видео.html #vue3 #vuetify #typescript #vitest ▬▬▬▬▬▬ Arabic to English vocab ▬▬▬▬...
Vuetify 3 TypeScript Tutorial Series - Part 13
Просмотров 7526 месяцев назад
In this video, we implemented the necessary logic to show tasks in the web browser. ▬▬▬▬▬▬ C H E C K O U T 📚 ▬▬▬▬▬▬ Part 5 on medium.com ► medium.com/nerd-for-tech/vuetify-3-typescript-tutorial-series-part-2-8465beabd280 GitHub repo ► github.com/habibicoding/task-app-vuetify-youtube Playlist ► ruclips.net/video/YajNE5-gg1E/видео.html #vue3 #vuetify #typescript #vitest ▬▬▬▬▬▬ Arabic to English v...
Vuetify 3 TypeScript Tutorial Series - Part 12
Просмотров 7447 месяцев назад
Vuetify 3 TypeScript Tutorial Series - Part 12
Vuetify 3 TypeScript Tutorial Series - Part 11
Просмотров 7507 месяцев назад
Vuetify 3 TypeScript Tutorial Series - Part 11
Vuetify 3 TypeScript Tutorial Series - Part 10
Просмотров 7647 месяцев назад
Vuetify 3 TypeScript Tutorial Series - Part 10
Vuetify 3 TypeScript Tutorial Series - Part 9
Просмотров 7677 месяцев назад
Vuetify 3 TypeScript Tutorial Series - Part 9
Vuetify 3 TypeScript Tutorial Series - Part 8
Просмотров 7817 месяцев назад
Vuetify 3 TypeScript Tutorial Series - Part 8
Vuetify 3 TypeScript Tutorial Series - Part 7
Просмотров 8047 месяцев назад
Vuetify 3 TypeScript Tutorial Series - Part 7
Vuetify 3 TypeScript Tutorial Series - Part 6
Просмотров 8387 месяцев назад
Vuetify 3 TypeScript Tutorial Series - Part 6
Vuetify 3 TypeScript Tutorial Series - Part 5
Просмотров 7907 месяцев назад
Vuetify 3 TypeScript Tutorial Series - Part 5
Vuetify 3 TypeScript Tutorial Series - Part 4
Просмотров 8327 месяцев назад
Vuetify 3 TypeScript Tutorial Series - Part 4
Vuetify 3 TypeScript Tutorial Series - Part 3
Просмотров 8227 месяцев назад
Vuetify 3 TypeScript Tutorial Series - Part 3
Vuetify 3 TypeScript Tutorial Series - Part 2
Просмотров 8437 месяцев назад
Vuetify 3 TypeScript Tutorial Series - Part 2
Vuetify 3 TypeScript Tutorial Series - Part 1
Просмотров 8677 месяцев назад
Vuetify 3 TypeScript Tutorial Series - Part 1
Vuetify 3 TypeScript Tutorial Series - Overview
Просмотров 1,3 тыс.7 месяцев назад
Vuetify 3 TypeScript Tutorial Series - Overview
Android MVVM CRUD Tutorial Series - PART 29 | OUTLOOK
Просмотров 613Год назад
Android MVVM CRUD Tutorial Series - PART 29 | OUTLOOK
Android MVVM CRUD Tutorial Series - PART 28 | ViewState Unit Test for creating a task
Просмотров 547Год назад
Android MVVM CRUD Tutorial Series - PART 28 | ViewState Unit Test for creating a task
Is it possible to replace the database to H2 so that we don't need the external database service?
You can try but the data will get lost when a new instance of the API gets started
@@habibicodingOK thank you, I just wondered whether it is possible to store the h2 database file permanently by setting the URL like jdbc:h2:file...
Hello thanks ,very insightful tuto but i did not understand how thsi part - name: Deploy to Droplet run: | ssh -o StrictHostKeyChecking=no -p ${{ secrets.DROPLET_PORT }} ${{ secrets.DEPLOYMENT_USER }}@${{ secrets.DEPLOYMENT_HOST }} "\ docker-compose pull && \ docker-compose up -d && \ docker system prune -af" because the docker compose file is in the repo not the remote server ? is thre any prior configuration ?
Yes, on the server there is a `docker-compose.yml` file on the server and these commands are for connecting to the server first then to use the `docker-compose.yml` file to start the Docker containers
Is there any video or document regarding how to create DB on the supabase? Thanks.
Here: medium.com/nerd-for-tech/vuetify-3-typescript-tutorial-series-part-1-e6504cd460c6
Habibi I have a question you didn't used the data class for entity?.
Using normal classes allows for better compliance with JPA requirements and provides more flexibility for managing entity state and behavior.
@@habibicoding Ahh thanks 🙏🏻
How can I import database if I use IntelliJ IDEA Community?
Not sure, if you can use a database with IntelliJ IDEA Community edition, you can create a new account start the trial version or you could use VS Studio code instead of IntelliJ IDEA
لغتك العربيه بدها شغل good video man ur arabic sucks lol
HI, first of all, thanks for this amazing series, I was just curios, when do you plan to release a more updated version, also please do include more tables such that we can also see how to create relationships between those tables.
Hi, thanks for the nice words, I appreciate it! I will soon release a Vue 3 Frontend series. After my Vue 3 series, I will release a new Kotlin Spring Boot series with user registration and log-in for a shopping API. This tutorial series will include approximately four tables or so. In the meanwhile happy learning 🙂
@habibicoding Will you also include Spring Security? Please do. It would give a much better understanding we as an audience could actually use what we learned here in real life projects, thanks again!
@@xhurish Yes, I will include Spring Security, so some endpoints will not be available for not logged-in users. Sign-In will be handled by JWT-Token (Access Token & Refresh Token) etc. so you user can create their own grocery shopping list. The grocery shopping list will be the real world project.
@habibicoding Totally awesome, you're great, can't wait for it, any ideas on how soon it might release? Also, do you plan to create any fully fledged courses on kotlin + spring boot that I could buy in say udemy, would really love to support you and learn more at the same time, again you're awesome keep it up! Edit *: please also include debugging with the IDE
@@xhurish Great to hear :) I can't tell when the new Kotlin Spring Boot series will be released, because on 1st of February my Vuetify 3 Frontend series is coming. After the Vuetify 3 Frontend series I might need a few weeks of break. I plan to release the Kotlin Spring Boot series on udem.com, only the introduction on RUclips, because it will be a 5 to 10 hours course for sure.
Can you explain this chunk of code please? val field: Field? = ReflectionUtils.findField(Task::class.java, prop.name) field?.let { it.isAccessible = true ReflectionUtils.setField(it, existingTask, prop.get(request)) }
Hi, sorry did not get a notification about your comment. Sure, I'd be happy to explain. It's using Java's Reflection API to manipulate the properties of an object at runtime. Here's a step-by-step breakdown: 1. `val field: Field? = ReflectionUtils.findField(Task::class.java, prop.name)`: This line is trying to find a `Field` in the `Task` class that matches the name of `prop.name`. The `findField` method of `ReflectionUtils` is used for this purpose. If such a field is found, it is returned; otherwise, `null` is returned. 2. `field?.let { ... }`: This is a Kotlin idiom that executes the block of code inside the `let` function if `field` is not `null`. If `field` is `null`, this block is skipped. 3. `it.isAccessible = true`: Inside the `let` block, `it` refers to `field`. This line makes the `field` accessible, even if it's originally private or protected. This is necessary because the Reflection API cannot access such fields by default. 4. `ReflectionUtils.setField(it, existingTask, prop.get(request))`: This line sets the value of the `field` in the `existingTask` object to the value obtained from `prop.get(request)`. Essentially, it's updating the value of a field in `existingTask` with a new value from `request`. In summary, this code is updating a field in an existing `Task` object with a new value. The field to be updated and the new value are both determined at runtime. This is a common use case for the Reflection API. However, please note this code snippet is not the best way to update fields. I will soon release a new Kotlin Spring Boot Series, where I will show a better way.
Thanks my friend, I was having problems with cors but your video helped me!
Great to hear 😁
Videos are great but they would be even better if sound is louder
Thanks and I agree, this was my first tutorial series, I made besides the sound and other mistakes, but my other tutorials are better
Like to ask. Why can't i use TaskDTO for create and update request? why do i need to create separate data classes, which looks so repetitive?
Good question, it is considered best practice to create different data classes for CRUD operations. For instance for the GET request I want to see all the data for my task. But when I update I for sure will never update the ID or the timestamp I have created my task. Some requirements might change over time, when your project gets bigger you will be thankful that you have created separate data classes. I hope this answer helps.
@@habibicoding Nice, thanks for sharing. Any idea why the TaskDto (suffix with Dto), while the create and update ones don't suffix with Dto?
@@ericchua3492 yeah actually it would have been better if I have named it `TaskFetchResponse` instead of `TaskDto` so purpose of the class would be more clearer
@@habibicoding noted, thanks for sharing.
hello, thanks for awesome series! Question: why do we need to have id in TaskCreateRequest, isn't it supposed to be generated?
Yes, good question, it gets generated. There should be no ID field in TaskCreateRequest. It was my mistake to add it.
Ugly AF Work on UI first. And yes UI does matter as much as the logic
💥 'promosm'
I hope you liked the video
I wonder how would deploying a Spring Boot app look like... e.g. the app from the 'Kotlin Spring Boot series' playlist.
I deploy it in this CI/CD tutorial series: ruclips.net/video/6bTNKgKk-uY/видео.html
Ooh, nice! I'll go check it out!
Oh man, you rock
thanks
Awesome!😍😍😍😍
thanks
Too hot! 🔥🔥🔥
thanks
Very nice 🎤🔥✅💪🏽
thanks
Yeah! Love it 😍😍
thanks
I like #habibiFunk channel too l
this is not my channel haha
@@habibicoding I'm pretty sure you gone like it. Thanks for your content.
@@Talaria.School ah nice I see there are old classics like from Fairuz, shukran!
My account keeps getting suspended, what's causing it
Which account do you mean? Your Linode account?
👍
great you like it
Your tutorial helps me in every programing
Thanks / شكرًا /Shukran
Great tutorial
Thanks / شكرًا /Shukran
All videos are very informative
Thanks / شكرًا /Shukran
Love you so much really very good
Thanks / شكرًا /Shukran
Love from Pakistan
Thanks / شكرًا /Shukran & and I love Pakistani cuisine
Easy way of teaching ❤️
Thanks / شكرًا /Shukran
Love from India ❤️
very much appreciated :)
what does mena asef in arabic ? :D you cna teach each vıdeo one arabıc word too
Asif / آسف means "sorry" in Arabic. Yeah, I try to introduce each video a new Arabic word :D
when i gotaskappyoutubeconfiguratıon there seems no configuration and there is only add configuration what would you advise me ?
Not quite sure what do you mean? Did you follow the instructions in the video?
@@habibicoding i mean there is no configuration on my file
@@NHikmetK check out the description of this video, there I have posted the config for the YAML file or copy it from my GitHub repo: github.com/habibicoding/task_app_be_youtube/blob/part_twelve/src/main/resources/application.yml
can i ask a question that what is the stream ( ) functıon and what does it do here ? thanks in advance
Sure, basically `stream()` is needed to iterate through the list of tasks and without it we can not manipulate the Tasks and transform them with `map()` from Task to TaskDto. Basically it is a new way to avoid loops. Here is the officially documentation: docs.oracle.com/javase/8/docs/api/java/util/stream/package-summary.html Also read this article: medium.com/@resengupta/java-vs-kotlin-streams-15d50fa41b37
i also follow you from medium . i m also android developer and want to use kotlin for back end development and i will see if i will use angular react or flutter for front end development
Thanks, there is also VueJS for web frontend. I will also drop a tutorial series about Android development and I will use this backend for the endpoints. Same as for my upcoming VueJS tutorial.
@@habibicoding oo great bro
Assalamualikom ya habibi, I am really enjoying your teaching. And very excited to learn this awsome things.
وَعَلَيْكُمُ ٱلسَّلَامُ تسلم حبيبي / Wa Alaikum salam, tislam habibi / And peace be upon you thank you Habibi
Really very clear explanation. Thanks for your good work.
Shukran / شكراً / Thank you Yusuf
Great work Ya habibi. Keep it on.
Thank you Yusuf, I appreciate all your nice comments!
جزاك الله خيراya Habibi
تسلم يوسف
ıt ıs very benefıcıal content, i apreciate your effort . thanks for everything
Thank you / Shukran / شكراً
Completed this one. Very nice explanation. Thank you ya habibi.
Thank you Yusuf / Shukran / شكراً
Like it ya habibi.
Thank you / Shukran / شكراً
Assalamualikum ya habibi. I am very much interested to this course. I just started watching it & looking forward until the end. Thanks for such kind of course.
Wa Alaikum salam, Shukran and thank your for those nice words. I hope you like it.
println("THANK YOU")
bravo
"How did you know I was palestinian" 😅
Would just using @Column(unique=true) on the column be enough for a uniqueness constraint? Why is it necessary to define additional uniqueConstraints on class level?
If you mean "[UniqueConstraint(name = "uk_task_description", columnNames = ["description"])]" because to have a better overview of the table. Also to name your constraint, instead of having a random string.
What is the theme name? Bdw, nice creation. 🔥
Do you mean the scheme in the IntelliJ IDE ? or do you mean the Thumbnail ?
Will there also be a part about adding frontend?
Hi, of course the Web Frontend will be in Vue 3. But first I will release the tutorial series about cloud infrastructure, CICD GithUb Actions pipeline, Android app and then Web Frontend with Vue 3 with TypeScript. Watch this video to get a better overview: ruclips.net/video/DuACsfISWkY/видео.html
Ya habibi , thank you we are waiting all your videos
You are welcome/Afwan/عَفْوًا , everyday a new video will be released
Also check out the written tutorial on medium.com here is the link: medium.com/@habibicoding/kotlin-spring-boot-tutorial-part-2-creating-rest-endpoints-for-a-task-app-645e13950aa0