#Tauri CRUD Tutorial - In 5 Minutes

49 messages · Page 1 of 1 (latest)

vestal mountain
torn forge
#

link?

vestal mountain
#

Coming soon. It's still work in progress but almost there. Just cleaning up some stuff and Have to still add the CRUD.

torn forge
#

what

#

help me understand, what are you actually trying to acomplish? I've just done my own CRUD project myself and don't understand how you haven't "added the CRUD"

vestal mountain
#

There is a bit more to making a tutorial than just making the project. I'm writing my process out at each step, so I'm documenting everything. So far I've added the depenencies, set up all the files and vue-router routes etc. Now I have to add the CRUD functionality. I'm new to Tauri, so this is my first time, but hopefully I can help others just starting to use it as well.

torn forge
#

Oh, I see. Are you explaining why you're using such a stack for the purposes of a todo-app?

vestal mountain
#

Yeah. Tailwind, because it's the best CSS framework, Vue because it's easier than react, Tauri Store because that's what's recommended etc.

#

But I might say, this is only the beginning: I want to re-create a few of these apps I've made in Flask and other stacks using Tauri.

Screenshot_2024-09-04_at_6.29.21_PM.png
#

Oh, and my tutorials go more in depth than the usual. I cover Wireframes, Mockups, UX, Database Schema and Business Logic, so it's actually a little more than just CRUD. With that info, you can rebuild the app in any stack really.

torn forge
#

Oh I mean stuff like Pinia, cors-fetch, rusqlite

#

Oh, and why Vue vs Svelte?

#

including idiosyncratic libs like this is... confusing. like, how did you come to the conclusion that you should use all that stuff vs. using tauri-plugin-store for caching and tauri-plugin-sql fofr more advanced data storage?

#

to say the least it doesn't feel super idiomatic, and at worst it feels like a web 2.0 approach to tutorial and stack design

#

I'm interested in writing tutorials myself, and I constantly seek to improve my craft, please don't take this as offense, I'm just trying to understand why you're doing things the way you are so I can improve myself

vestal mountain
#

I'm glad you mentioned Svelte. I've been wanting to try that.
From what I've seen, several people have used pinia with Tauri store. For cors fetch I built another project that needed it to send HTTP requests: https://discord.com/channels/616186924390023171/1270942358007054418
rusqlite is something I may or may not use (I may need the data to be relational so I'm not decided yet).

vestal mountain
#

Going for this design

Screenshot_2024-09-04_at_6.54.44_PM.png
torn forge
#

I've been using Tauri + Svelte and it's been a dream to work with so far, so i'd encourage you to try it for sure! 😁

torn forge
vestal mountain
#

It will be responsive (not building for any single platform, although I'm preferring desktop currently). One reason I thought about using react is because of react native, but for now I'll use Vue and maybe make alternate tutorials using other stacks for the same app.

torn forge
#

Gotcha. That's a very slow-and-steady was of going about it, but power to you

vestal mountain
vestal mountain
#

Tauri plugin SQL may be the way to go, it looks a lot simpler than rusqlite.

vestal mountain
#

In my mind a Project Management app is just a todo app with an additional model - Projects (which is a collection of todos) - where users are assigned a task and become part of the project the task falls under. Tempted to make a PM app instead of a TODO app. In this case I'd want to use SQL.

vestal mountain
#

The schema I'll be working with

Screenshot_2024-09-05_at_8.31.18_AM.png
vestal mountain
#

Yes! I have data coming back from an sqlite database inside of a vue component! If you are using sqlite @torn forge, does the tauri sql plugin save the physical file somewhere? if so, where? Or how do I find out where?

vestal mountain
#

Creating the prototype.

Screenshot_2024-09-05_at_1.42.33_PM.png
torn forge
#

Hmm. Td, here's the thing I don't quite understand. If you're trying to make a tutorial, why are you starting with something so large? Why are you approaching it without a distinct direction for where you want the tutorial to go? I've looked at your website and your stuff is literally all over the place, and that's not good for people who want to find your stuff easily. E.g. your Stripe clone has the photos and data for a Social Network clone, and has the copy for a Todo application. Your Spotify clone redirects to a vercel page and you say you're using Flask, Vue, Jinja, Tailwind, HTML and CSS, yet is coming soon. Your whole upskil website is designed to look like the Apple App store, but you don't make it clear that you're actually making tutorials that can't be bought. Each tutorial is supposedly $499, deterring everyone off clicking when the links don't actually go anywhere. You have an audio player in your navbar. You have a course offering but you don't actually explain what you're trying to teach.

#

Again, no offense intended whatsoever. These are just the issues I'm seeing after a quick glance over your website, and I'd love to help you work through those issues, it's just that I have to tell you about them before you can work on fixing them. You say that you worked in fintech, did you really? Do you maybe have ADHD?

#

Because if you really did work in the industry, you might be better at coding to requirements than designing and doing product management, which is what your tutorials claim to teach. You're doing so many things at once you're not doing any of it well. And I'm saying that because I suffer from the exact same issues as someone with AuDHD. I feel you, because I've been there.

#

Hit me up in the DMs if you want to chat some more. I'd be happy to be a sounding board for ya.

torn forge
vestal mountain
vestal mountain
#

I guess it would sorta feel like ADHD because I have to give attention to everything (seemingly all at once) because I'm a solo developer working on the site, so I do have to split my attention across multiple things. I'm using an iterative approach because of this though. My typical flow is

  1. Edit course/site copy
  2. Code on an app
  3. Fix dead, missing, incorrect links
  4. As I find new blog ideas or content, add that to the backlog
  5. Work on marketing funnels

and there are other things to do as well.

vestal mountain
#

CRUD is now working. Now to update the Data Models with the actual data (and working out how the relationships will be constructed. I think I may have to split this off into two apps (one that uses this basic crud and another one that adds the more complex relations). This coud be a two-part tutorial.

#

I'm thinking creating a user database over a Todo app is slightly better as it showcases more data types (users can have a numerous amount types of data associated with them). Things like images can also be added as well to showcase how to handle images (which for me, typically I use URLS instead of storing binary files). Then part two can be adding the tasks and other relations

vestal mountain
#

I thought update was working but nah.

Screenshot_2024-09-09_at_5.14.24_PM.png
vestal mountain
#

Working on tasks then I'll be cleaning everything up and working on the tutorial copy!

Screenshot_2024-09-10_at_12.30.20_AM.png
vestal mountain
#

I learned that in order to use tauri fs (file system) to write to a file I had to allow the file in default.json like this (I'm thinking not all of this is neccesary, just the section for identifier and allow

"permissions": [
    ...
    "fs:default",
    "fs:allow-app-write",
    "fs:allow-exists",
    {
      "identifier": "fs:scope",
      "allow": [{ "path": "data.json" }, { "path": "$HOME/**" }]
    }

Now I can write to a file named data.json from the Javascript. The file is created in the src-tauri folder

Also tauri restarts when writing to src-tauri in dev mode because it's built to restart when there are changes in this directory. The app looks to crash but it isn't. A solution is to store the file outside of this directory.

vestal mountain
#

Ran out of harddrive space so I didn't capture the tasks portion, but here is the user creation (this is the built application) I can save the user data to a .JSON file on the computer. Next will be to import it to a new application (used for data backups)

vestal mountain
#

Made another version of the todo app using a MUCH simpler stack:

  • Tauri Store
  • Tailwind CDN
  • Vue
  • Vue Router

This was pretty tough to get CRUD working as I'm just using a list of objects (update was the hardest).

Screenshot_2024-09-11_at_10.52.53_PM.png
vestal mountain
#

Got a little carried away :). One last bug to fix (the completed checkbox doesn't set the state correctly at times)

Screenshot_2024-09-12_at_10.13.14_AM.png
vestal mountain
vestal mountain
#

Working on an extension to this tutorial for Authentication using Tauri Store.

vestal mountain
#

Tauri CRUD Tutorial - In 5 Minutes

vestal mountain
#

This tutorial felt incomplete without showing how to use Pinia, so I tacked on an FYI on how you'd use Pinia if you wanted to. I've moved to using this to have global state (albeit not in the tutorial).