Technologies I used to Code My Backendless App
2023 ж. 13 Нау.
144 147 Рет қаралды
voidpet.com/
I'm reviving my Discord and will be talking in it: / discord
#benawad #voidpet #VoidLog
----
Follow me online: voidpet.com/benawad
voidpet.com/
I'm reviving my Discord and will be talking in it: / discord
#benawad #voidpet #VoidLog
----
Follow me online: voidpet.com/benawad
Hi Ben, thank you for sharing this. I am an ex-product manager aspiring to break into software engineering / web dev. I've spent my first year full time learning how to code with Harvard CS50 and The Odin Project. Thank you for sharing this project and how you are going about building it. I want to build a similar app, so this video gave me a lot of direction on how and where to start. Wishing you continued success!
Backendles???? Okay let’s start throwing books out the window
I give it 1 day before a hack comes out
@@theairaccumulator7144 I think its been online for a couple months now
@@simplyzetax I’m guessing he meant local hacks, but unlike GTA I don’t think this will get the attention of giga chad developers to figure out hacks. Although I admit, a change in the svgs to a giga chad path would be kinda funny to see.
It's not literal, backendless / serverless is a misnomer
You've never heard of cache?
Really great Ben! I've thought about using React Native for a project before, and it's great to see your experience and get a peak at some of the underlying code with your thoughts!
Hey Ben, at a first glance your SVGs looks quite compact but I'm pretty sure you can shrink the file size even more, I personally recommend the svgo library. You can also think about doing some SVG sprite strategies if needed. I noticed that the background/garden have most elements repeated, you can also think about something to optimize down this path.
SVGs are great. I have recently been working on an industrial scada system and ended up using SVGs to render live LIDAR data in the HMI for sensor calibration. It works surprisingly well.
If encryption is done client side it sounds like every state can be edited if you just locate the private key.
🤫
API called datetime can also be cheated with a proxy
@@geeshta 🤫
Hello from my rooted android :)
Loved following this process Ben! Looking forward to trying the game out
Great work Ben! Love the insight you provided, really inspirational. ❤
Ben! Thank you for sharing the process and the tech. 🙏
@bawad, two optimizations on concurrent display of SVG-s on screen: 1. Render blank components in place of SVG when it is outside of viewport. With grid item lists you don't have to check every item, using math should do the trick. 2. If you would still need to convert to images, I am sure you could generate PNG assets from SVG-s at runtime with some library when you know the device screen dimensions (so that PNG-s are of an appropriate resolution for every device). You could do this on first load and cache the images to the device storage.
I would save the PNG rendering for absolute worst case scenario. Caching images is a huge pain because it makes separate network requests and he looses flexibility to manipulate svg paths. Selectively rendering content and manual garbage collection is the way to go.
@@wadecodez Why should caching (storing) the images to the device (local) storage make any network requests at all? I agree with you on SVG paths manipulation though.
There are a few strategies you can use optimize your SVGs. For example, plotting the vertices that define the paths of your keyframes on a grid so that their coordinate values fall on whole numbers actually speeds up rendering. You could probably reduce the number of points your SVGs use as well. There are programs that do a good job of optimization, but if you can get a vector artist that knows how to do that manually they are likely to do a better job (for example, vector tools typically create circles using a cubic bezier curve with 12 control points, a vector artist with an eye for optimization can create near perfect circles using 9 control points). If you ultimately opt to migrate from vector to raster graphics go with PNGs. If you're clever about it, you don't have to generate thousands of variants of a Void pet. Break each Void pet design into component sprites that group/isolate shapes with the same color (think layers in Photoshop), then whip up some logic to apply palette swaps to each grouping (pretty easy to do, just change the R,G,B color channels and leave the Alpha channel alone) and then make a composite for a given variant.
For the pet svg problem and the issue with having too many color combinations: you could export different-colored elements in a separate image, rendering them in layers. There should be some way to tint them. So you only have a handful of images in your app package, the only issue is that when you render a sprite you are actually rendering 4/5 images one on top of the others, but that might bet not that big of a problem
I came across this problem as well in a unity project recently. The way i solved it was to use a single image/sprite and put every element i wanted to adjust in realtime either in the red, green, blue or alpha channel of the image. That way i could just tint each channel to a different color in a simple shader. Don't know if that approach would work in react but it's a pretty clean solution!
CSS allows you to hue rotate the images very easily.
@@traniel123456789 but react native doesnt uses css and thats the problem
The problem is probably happening because he’s trying to persist too much data at once. He should remove objects and dom elements when they are not visible. Baking images would not only make it harder to update the layout but it adds a whole layer of complexity because images make separate network requests.
Yep react native does have tint - doing it in layers would also mean you still have individual pieces to animate too.
really love hearing about the behind the scenes of development of VoidPet Ben can't wait to hear more in future vids :)
Thanks you for this Angular/Ionic tutorial. I had no idea you could write Angular apps in this way.
I love how half of these comments are legitimate suggestions / improvements. Building in public can attract so many helpful people! Great video covering your development/process regarding your app!
I have had void pet for a month now and have enjoyed it so far, however I have a few suggestions. 1. Don't force the player to name aver pet they find, it gets annoying fast and players will eventually run out of good names. Naming your pet should be an optional thing instead. 2. Display the users void matter somewhere on the screen.
There is a random name generator on top right corner on name screen. I agree with the second one.
Yeah im tired of calling them things like "hydrogen monoxide poisoning"
i think the idea is make it more deliberate..
random name generator for sure
I just name them whatever the emotion is
Great project ben! A request, could you please create a react native playlist with advance topics like RecyclerListView, Reanimated, Skia and other advance stuff, it would really help us out here! Anyway great job!!!
Funfact: "zustand" is just german for "state". Same for "werkzeug" which is "tool-box". Idk why it is a thing but I'm always impressed how many names are just german in the end
War halt wieder einer super kreativ haha.
Pls more insight videos Ben 😊 I really like that you show production code. You should be proud! What about the business behind voidpet?
Ben, thanks for this video and all your great content. I made an app also with RN and expo called "TriviaLinked" and your discussion of animations/sounds is going to be really helpful as I try to improve the game! Thank you thank you thank you!
Thanks for sharing. Inspiring me to get back to my side projects
Thanks for the video Ben, I recently fiddled with expo and had the same conclusion. Much better than it was in 2019!
The let go button looks like a positive action rather than a negative one with the star ball icon, to the point where I misread it as "let's go" and took it to mean they spend a while at a park or something and then come back. Permanently releasing pets should require more of a deliberate action, and be framed negatively
Looks great! The SVGs definitely look crisp. Downloaded the app and works well on a Pixel 6!
Nice, coding an app with Expo and React right now, glad to see you recommend the same things I'm using 👍
Can we have a firebase notification with expo cli app ?
Hey Ben, awesome as ever! Can you post a video with your though proccess of your design ideas and implementations? That would be super cool! Liked as always, keep it up!
Super cool. Thanks for sharing ,love it
Damn... that node_modules directory must have its own gravity well.
Thanks for info. What tool did you use to draw the SVGs (output in svg format)
Projet looks great ben! Why you choose not to use react-lottie for all the SVG animations? With help of after effects you can create even complicated animations for the pets. Also you can manipulate pet colors at runtime so that you can create even more variations by just looping them with different color values.
I like this idea
Yup you can just have a base PNG and then overlay colors on it. Also unity would've handled this super basic game extremely easily while running on even the shittiest phone, classic web dev trying to make everything web moment.
@@theairaccumulator7144 I enjoy the concept of re-inventing the wheel! Your comment is reminiscent of soviet era logic *slips off sassy pants*
@@ShighetariVlogs you single?
@@rake1840 nope, dating a data science queen 💜 I am lucky & blessed 🥹 maybe if she sees my KZhead comment history I’ll become single tho 😂
I love watching these log videos even though I don't understand the techy stuff
"zustand" is a german word and my brain had to double check when you pronounced it - thanks for the insight into your stack btw :)
Damn, great to see React Native has been utilized for this project which I wasn't expecting since its a game, huge fan of react native and this inspires me soon to make more apps using react native
So Impressed by how React Native can be used to build project like this
I think discord on phone is react native too
@@lolnein7216 and it sucks ... maybe i just hate the ui and how not smooth it is
and tesla app
This is just great. One small issue I had with the app is when I wanna close a menu (like the main menu or the one for nourishing the plants) I instinctively tap outside the menu (on the dark overlay behind it) but that doesn't close it.
Adding this now
That's amazing work!
Highly recommend react-native-skia instead of svg's for animations and vectors in general. Sure, it's not officially production ready but it's damn stable, stays away from the js thread and it's relatively easy to convert svg's to it.
Great video Ben.. I saw you made used of the `tw` package. What the difference between using that and the default tailwind setup a d config for react-natjve app? Isn't it the same, or is there any difference towards using that package?
thank you for sharing this!
please make a video on how you build measurable optimized mobile applications and how you would improve or apply measures/logging and optimizations to existing applications
Thinking about how tool like RPG maker handles animations could you create a sprite map for the pets this single image would house all movements?
Very cool man! Just downloaded it!!
The radial menu is a nice touch.
stupid idea... could you not have a local build step on first launch that exports all the svg's at the correct scale to a texture atlas or something?
Can't you store some data in the Google Play / Game Center account? I Never used it but seems that some games use it to store state between devices. App is looking great!
Amazing work Ben. I am doing closed testing on my startup app with React Native. Just curious, what did you use for the notifications?
What did you use to style the UI? I starting a new large React native project and was wondering what is the best way to style in react native expo. I've seen people use tailwind with native wind?
Given that the data users store can be sensitive, if you had stored the data in a database /cloud service, do you know which service/setup you would have chosen?
Am I correct in assuming the graphics are all done with UI elements? If so, why did you opt for this instead of using a graphics library?
Thanks for the video, really cool stuff... How did you / expoert the animations for the SVGS?
Congratz on the project ! Looks pretty dope ! Think you will be making tutorial in the future, or no time? hahah Greetings from Chile!
yup I took the same choices regarding cheating some aspects of my game, if it becomes a massive hit you can still correct the weak parts (if you keep track of them, or just know which part is weak). Most of the users won't try to cheat the system
Thank you Ben
You could use the api call to tell the UTC time on game launch so you cant cheat and go to the future in any part of the app, not only the battle pass
i was thinking similarly, like on launch just check if the device time is around the API time, if it is, then Date.now() can be trusted, otherwise use the api.
but he said that he does not care if people cheat, he only cares about the battle pass
This works if progressing while offline isn't a feature. It kind of sounded like from the video that offline was though.
I suggest u to set the paths and baseUrl options in the tsconfig file in order to have a clean import inside the component
For the colours and pets, what about using a PNG and then creating a layering algorithm to apply the separate colours to specific areas? Idk, maybe it's less efficient, I guess you lose the possibility to scale the image
Ver Helpful. Thanks 🎉
Hey Ben, just wanted to say however data is being stored locally, if the app data is transferred to a new device. All user data is transferred as well. My girlfriend got a new phone and was happily surprised when she saw that all her pets saved transferring her data to her new device.
Oh sweet, didn't realize this
Is it possible to render SVG to image buffers on the fly for menus where the pets are static?
Thanks for the video, I enjoy watching it Ben. Just a quick question, why you say backendless, which part I need to store information? I don't think I got this part. You mean registration?
Instead of Async Storage you could have used react-native-mmkv, which is faster. Any reason why you choose Async Storage over mmkv or other packages?
You could make use of Lottie files for the smoking animation
I got a couple of questions, Did you look into Flutter before you decided on the framework? Have you tried Rive for animations?
Yes, it would be interesting to know if you looked at Flutter at all.
How do you test on different devices? Do you have your own device lab or do you use emulators/simulators
It sounds like you are using the Adobe voice enhance ai thingy. Nice! Much better then being stuck with a roomy recording
Hi! What did you use to create the UI layout for the app website?
You can try reducing windowSize to 3 or 2 to improve performance on terrain screen
I missed watching your devlogs
Man.. And me that was naming my pets in SQL statements hoping they would align up in the void somewhere to drop your table.
How's the build experience on expo? Have they made local builds possible yet?
Nice cover!! Can you explain how do you track on errors users get and monitoring in general? (Since there is no backend)
Check out RN Sentry
Really great Ben
Amazing content!
Ben can you talk about how to get into backend . If I were to build my own website and host it somewhere
What about FlashList by shopify instead of recycler list view?
Pretty awesome, this is a professional game, you did a great job 👍😘😀😍
I'm curious what happens if someone buys the in-app bundle but then deletes the app at a later date, does the user lose the in-app purchase benefits when they reinstall the app?
What about a way to connect the apps to the web browser game so you can do all the functionalities you could do in the web game with the pets from the app and vice-versa? 👀
Love it thanks
You could use flashlist instead of recycler list view
couldn't the time API thing be easily circumvented by using a local DNS and installing self-signed TLS certs on the device?
What have you used for designing UI/UX?
How do you design the SVG animations?
lol the steam effect is like a default particle system in unity. would take 5 minutes and no code
For the trusted time source, someone could still cheat by having their own DNS server point to an IP they own. So you could make the time return whatever you want still.
Can you make the haptic feedback less aggressive. My phone practically jumps out of my hand every time I click a button. If you could just make the strength of the vibrations weaker on Android, that would be great.
7:10 The SVB joke about SVGs is gold.
"They're lookin like Silicon Valley Bank" 😂 Too soon dude
There is no framer-motion equivalent for react native. So yeah, I guess reanimated is the go-to for react native.
not the silicon valley bank dis at 7:10 lmao
10:09 Couldn’t you bypass this by spoofing this API server? like you could install a custom DNS server on your phone that redirects the API traffic to a server you control. Then you could issue a certificate for it and then manually install that Certificate on your phone as well.
Wouldn't decompiling the app reveal your encryption key though?
Do you have any specific reason to use relative paths?
For animations maybe OpenGL is a good candidate?
how is the navigation done between different screen
Is the end goal to match the app’s gameplay with the web app version?
Did you consider a JS game library like Phaser 3?
You can make 1 png that supports as many colors as you want. Instead of drawing with visible colors you draw color id for specific region and then you can have a separate color palette that reassigns each color id with a particular color. Also the whole svg thing seems like a mess, of course that's the tool that you or your team is most familiar with, or more suitable for web. But giving an example that the device cannot render/animate more than 3 at once is like a joke, the average phone has capabilities to render hundreds of thousands of animated sprites at acceptable framerate (even inside a web browser when using something like WebGL).
A piece of advice that helped me in my React Native projects: use a module resolver.
Why dont use something like rive for the animations?