Placeholder Image

字幕表 動画を再生する

  • All right.

  • So welcome back, Thio.

  • My streams.

  • I haven't been streaming for a while, and, uh so now I'm getting back into it.

  • I think it's been, like three months or something like that, because last time I street with sometime in June, I'm not sure when, but I'm getting back into it now.

  • And if you don't know what we're gonna be doing today, I figured I will show you.

  • So I created kind of a, uh a little overview of what we're gonna be doing today, So let's have a look.

  • Right.

  • So what we're going to build is a productivity app, and this is gonna be a Siri's called building An app from scratch that I'm also gonna upload on YouTube.

  • And what I'm gonna do is I'm gonna stream every Monday between 2 p.m. And 3 p.m. And we're gonna basically build this app riel time.

  • I'm gonna build it live, and kind of what it's gonna be is a productivity out.

  • I recently listened to a podcast with Tim Ferriss and he had or the Tim Fair show his podcasts, and he had a guest called David Allen, which has a book called getting things done, which is kind of a productivity system.

  • And so, uh, when I heard about that, I figured I kind of realized that the system is similar to what I do.

  • And what I do is I basically write down all the things that I come up with, that I want to dio want to get done, and then I kind of sort that into what do I need to do tomorrow?

  • And I kind of tried Teoh right down on, like Post it notes.

  • So you can see here I have a little post it note with a couple to do so for today, and I try to limit it to about 2 to 3 things that I need to get done.

  • And this after is essentially going to be kind of a way for me to do that with my phone instead of using all these post it notes and random like on Va Lopes and things that I use.

  • So the way that Hiss system works is that you kind of have like, an entry where you just put all the things that you come up with, all the things that you are on your mind and basically you just write down all the things that you can think of that are on your mind.

  • And then you put that in your in tray, so to speak.

  • And then you kind of schedule times to go through that entry and sort through the things and kind of pick the things that you like set kind of deadlines for different things.

  • I haven't read the entire book yet.

  • I've kind of flipped through it.

  • I just got it like a couple days ago.

  • But that's kind of the the ideas you make it.

  • You have a place where you can just write down tons of notes or like, uh, tasks that you come up with.

  • And then you get kind of can go back to that list and sort through it and set like days when you want to be finished with that or deadlines for the things.

  • And right now, I currently used mostly like ever note.

  • I've tried to use every note for these sort of things, but what I find is that it's it's a little bit too unstructured, so it's not like it's not very easy to just go into every note and start typing out things that you can you think of.

  • So what I want to do is I want to build an app where I can just open up the app and write down anything.

  • As soon as I come come up with an idea or a thought.

  • I just want to be able to write it down straight away.

  • And then I want to be able to also in that up have a list of all the things or I want to have and easily over viewable lists of all those things that I've come up with that I can then sort through and kind of categorized into different projects and then set deadlines for those different tasks.

  • Uh, so this is the kind of an overview image of what we're gonna build.

  • We're gonna build a productivity app, and we're gonna build the front and using flutter and what we're going to go through in all of these different videos in the Siri's is gonna be after sign and then also turning the act or turning the design into an actual app within flutter.

  • And then we're also going to build out the back end for this because I feel like this might be a good idea or a good chance to actually build out back and for this kind of that.

  • So what we're gonna do is we're gonna build a wrist, a p I using python and flask, and we're also going to create an SQL dollar base.

  • And we're also gonna kind of figure out how Thio then actually publish this thing, which I don't really know how.

  • Like I don't know the details of how to get it online so that you can actually use it for rial.

  • I just know sort of how to build a rest a p i and also a little bit about SQL daughter basis.

  • And then we're also going to go through account of so safely storing the difference safely storing use of daughter.

  • So that means like storing the past words, storing like kind of what would you call it, uh, sensitive information of your users.

  • Essentially.

  • So that's kind of the over you what we're gonna do and what we're gonna do today is gonna be app design.

  • So we're gonna focus on just kind of building out a design for this.

  • I already have, like, the first screen, so I kind of have.

  • So what I do is I usually go to Pinterest.

  • And then I look at different after signs and try to kind of come up with different ideas for how to make the different components that I want to make within the app and then also try to find a color theme.

  • So the color theme that I picked, it's going to be this kind of red and dark, dark gray and then the wife.

  • So, yeah, we're gonna go ahead and open up Adobe XY, and then we're gonna get to actually designing the app.

  • All right, so I've also created a notes here and ever note where I have kind of built A or written up a general structure for what I think the app is gonna be.

  • So I want one screen is gonna be the entry, and that's where you should be able to ask add tasks.

  • And that should be the first screen that opens up so and it should be really simple toe add a task it should be super like should be very clear how to add a new task and, uh, then This should just basically be a entire giant list where you can just write down more and more tasks.

  • And as soon as you add like deadlines or categorized the different tasks, they should be removed from that list.

  • So you kind of clear them by setting a deadline or a date for that task, or you clear them by adding them to another project.

  • And then maybe that project is in that list.

  • And, uh, let's have a look at the other things.

  • So the second screen that that I want is gonna be the today view.

  • So one of them is gonna be the entry where you have all the tests, and then the next three screen is going to be today, and that's going to default to today.

  • So then you see the test that you planned to do today, and here I want you also to be able to actually see the entire week so you can choose between either the day, week, month or year to kind of get an overview.

  • Because maybe you set like, 10 tasks to do tomorrow, and then you wake up tomorrow and be like, Oh my God, I have 10 tests today.

  • Ah, good thing would be if you can get an overview of your entire week so you can kind of see Okay, I've planned way too many things for tomorrow, So I might have to postpone some of those things or do them today or something like that.

  • So that's gonna be the second screen and the third screen.

  • There's gonna be projects.

  • And I want you to essentially be able to just make as many projects as you want and sub projects as well.

  • So it could be a main project within that you could have a sub project and then within that you can have a sub project.

  • And I want that to kind of be like an infinite list so that you can just keep adding new sub projects essentially, because I feel like that's one of the things that are missing from some of the other APs that I've looked at.

  • Uh, usually you can have, like, sub tasks to a task, but you can't keep adding subtext and sub tests.

  • Um, yeah, and then also I want to be able to see the completed tasks because I feel like that could be both kind of satisfying to be able to see the tacit you've actually completed.

  • And also, it might be actually helpful to see the ones that you've completed so that you can go back and see, like if you want to redo something or fix something that you thought you were completed with.

  • But you actually weren't there something like that.

  • And then we also want the profile page, which is basically gonna be just like any other profile page, I think.

  • Yeah.

  • And then I also created a list of classes, so I kind of sort of what I think a class might look like or classes might look like.

  • So we have a Projects class which is going to contain a list of tasks, and then we have a technique class, cold tasks, and that's gonna contain list that can contain, then lists of tests as well.

  • And that is something that I want to do so that we can just keep adding tasks to sub tests, two tasks and then a kind of just and this is just very rough and, uh, kind of on the fly.

  • I just made this up Ah, pretty quickly.

  • So I might have to add certain extra things Or maybe take away some things I'm not sure, but we have some dates and some strings for, like, the i d.

  • And also for a note, if you for the actual task.

  • So maybe you want to write something down a little bit more on then we have a class called support file, and that's something that I got from the book.

  • And that is essentially maybe you want to add something like a website or something like that, or maybe a document where you want to write down things that you might need for that task to be able to complete it.

  • I think this is going to be a really good thing to have.

  • All right.

  • But that's that's kind of just a quick little overview of what the APP is gonna be able to d'oh.

  • And now we'll get into actually designing the So I have this tool here called City.

  • I think s I p, and that basically has something where you can just press any color and then you copy that color or the hex code for that color, which is really useful when you're kind of building these sort of things.

  • So what we want to do is we want to set the background here to be That's dark gray.

  • And then we want to add a wife square.

  • Look.

  • So So this first screen have already kind of decided side?

  • No.

  • Kind of what?

  • I want this to look like.

  • Um, what's actually open up over lead to sun that some might know.

  • Really?

  • Do it.

  • Uh, okay, security.

  • Go.

  • All right.

  • So that's kind of what what I wanted to look like, Um, let's also change this for me.

  • So and then that color I don't really like this.

  • This color was the one that turned into this color when you when I added it to the app or in flutter, turned into this kind of a little bit less distinct red.

  • All right, so that's gonna be our first really nothing.

  • And what I want you to toe also be able to do is swipe between different screen so that it's not just so that each screen is a little bit more accessible.

  • Um, now we're gonna play around a little bit with what kind of navigation bar we want.

  • We could have a navigation bar up here or we could have one down here.

  • Um, because I kind of want some either at the top or at the bottom and navigation bar.

  • You could have it in other places as well, of course, So you could have something like this, but we might actually want it up top.

  • I like the I like this where it's like it just goes straight down into the end of the screen.

  • Basically, that the list goes all the way down, like so and one other things that I would like this, that when you press one of these tasks that it would open up something like, Let's cook that paste it open up to something like this so that you get get an overview off.

  • Um, all right, let's go with this, Ciro.

  • So something like that, so that when you press the task, it would open up like this and you would get a more detailed view of, like, maybe the sub tasks or some like that, Um, maybe also the deadline for the task.

  • So that's kind of why I like it when it's when there's no navigation bar at the bottom.

  • But also that having a navigation bar at the top kind of this is a little bit less use of friendly if you like, because having it's usually difficult to reach the top of the screen to press so having things that the bottom is usually going to be a little bit better because it's easier to press there.

  • But since we're gonna have the swiping function, I think I think we can still get get away with a navigation screen or navigation bar.

  • So we're off course, gonna have to also design the icons for this.

  • So we're just gonna go 10.

  • So I'm just gonna add something that is gonna look close to what we wanted to look like.

  • That it's not gonna look like the final icon Ryan on DDE Cherry.

  • All right, Something is something like this.

  • I don't like the icons.

  • Don't look that great right now, but I think this is sort of what I want for it.

  • Um, Yep.

  • So and then also, let's actually that Jenny.

  • Thank you.

  • All right.

  • So this would then be the page where you see the specific day.

  • So today then.

  • And this would be the page where you see things like that different projects that you've created.

  • And, uh, yeah, so that's that's essentially gonna be our navigation bar.

  • We're going off course, go into actually how to design the different icons, and we're not going to use the sort of Hans, But right now, this doesn't matter too much.

  • We just want to get an overview and kind of an idea of what the APP is gonna end up looking like.

  • So there we go.

  • Now we need to design the today or week or month page.

  • So that's gonna be this page, right?

  • Right there.

  • Um all right, maybe we should just go to Pinterest and see if we can find some, some nights, the signs for this.

  • I like that.

  • So this thing where you see So you see, like it says 25th of March and then I'm guessing you compress the 24th book 26th and maybe you can even scroll that list.

  • I think that looks really good because it's, uh And it would work really well for this because we I want to show the date of today, and then you also want to be able to go back and force that you can go to yesterday.

  • Or you can go to tomorrow and check what task you have planned for tomorrow.

  • So I think that's I think that is a good idea, actually.

  • Okay, so you kind of need to figure out.

  • So if you look at this thing, we can see that harder, because I don't know where we'll end up right now, but yeah, so you can see that there's like, this thing up here, and then there's another one down below it.

  • So essentially, we want to create something like that for we need to pick.

  • It's really difficult to speak and to think at the same time when you, like, try to think of how to build these different things.

  • So that's kind of why I get lost sometimes, anyway.

  • What?

  • We need to figure out this what color to use.

  • So we know that we have these three colors to kind of work with the red, the gray and the white.

  • So I think either we go with red or whites, of course.

  • But the question is, so we're just going to try it.

  • Usually what I do is I do one version of each.

  • So we'll do one word version where it's white.

  • And then one version where it's red, and then we'll kind of compare them.

  • And maybe you guys could give me some suggestions on which one you like the best.

  • So I think we're gonna go with something like that, and then we're gonna another one.

  • No border, but shadow.

  • Good.

  • Okay.

  • So I think that's kind of what it should look like.

  • Something like five and then at shadows.

  • This is Well, okay, make that a little bit car, right?

  • I don't know.

  • That shows.

  • Okay, there we go.

  • And then let's add some dates, probably seven.

  • All right, so, like that, maybe even a little bit bigger and maybe have it be thin.

  • A swell.

  • We're basically just copying what they've done here already.

  • But that's kind of what I do usually, Uh, I find something that I like, and then I copy some of it, and then I add some of my own things to it as well.

  • So we'll go with 90.

  • Gonna have a big, really big Okay.

  • 24 26.

  • And this one should be a little lower on the capacity way go 30%.

  • All right.

  • 30% here as well.

  • And then we want to make this size a little bit smaller.

  • So maybe 60 said too small.

  • No, I think that looks good.

  • Uh, what sort of 60?

  • All right, so something like that, I think, is what it's gonna look like.

  • Yeah, And then we have even more so we can go copy this paste on.

  • We're gonna go 23 and that we're gonna make maybe 40.

  • Yeah, and then we're gonna make it even less so maybe 50.

  • All right, that's pretty good.

  • 20.

  • Okay.

  • Yeah, I kind of like that.

  • I think it looks Looks really good.

  • Um okay, so that's that's that thing done for more?

  • Um, maybe we should have sex.

  • Well, all right.

  • We won't.

  • We're gonna add text right now, so we're gonna do We're gonna copy all these things.

  • We don't need to call me that right now.

  • Um, okay.

  • And then within here is where we're gonna have the list of all the tests for that day.

  • So something like this And then the question is whether we wanted to look exactly the same because I feel like that's going to be kind of boring.

  • Have it look exactly the same as this list.

  • It's gonna make it not really stand out.

  • We're not gonna use it.

  • Might not even realize that they're on a different page.

  • So I want to make it a little bit different, but I'm not sure exactly what we're gonna do to make it difference.

  • Uh, what we could do is have it be something like this where that is in the middle, and then we have, like, a list of sub test or something.

  • Or we could do something like similar to what this one did as well.

  • And just have it be, like, kind of this sort of list where there's just a look like a little divider between all the different tasks.

  • Um Okay, so let's Let's go.

  • Yeah, well, in the meantime, while we're also thinking about that, we can try this thing with the red, uh, with red instead of white.

  • For the top part here, they were gonna paste.

  • All right, let's take coffee.

  • The background color pace.

  • That here.

  • Alright, there we go.

  • So that all right?

  • Yeah, I just I forget what?

  • Where I'm going with it.

  • Why?

  • Why?

  • I'm doing certain things.

  • All right, Copy that.

  • Set this to be that color.

  • That would be that color as well.

  • I mean, that looks pretty good, too.

  • And that kind of makes this page stand out a little bit.

  • Maura's Well, I'm not sure whether we're gonna I don't know which one.

  • Which one do you guys think is the best one?

  • I'd love to know.

  • Just so that I can I wonder if you can make like, a vote.

  • Does anyone know if you can make a vote sort of thing in twitch in the chat?

  • So I think that would be really cool if I could just like posts either one or two.

  • And then you guys invoked on which one?

  • You think it's the best.

  • But if you just write in the chats, one one is gonna be this screen.

  • And two, it's this screen.

  • If you just write down one or two in the chat, then I can see which one you feel like It's the better.

  • All right.

  • And let's go for Let's go home.

  • Hey, look at what This Waas.

  • Okay, two What?

  • Carrie Two.

  • Most people seem to think too.

  • And then one of you were asking whether What about with just white?

  • So we're gonna try it with just white this Well, because that's think that might be a good idea to All right, face that.

  • So that is what white looks like.

  • Let's make this shadow just a little bit less harsh.

  • Something like that.

  • All right, Some hope most people seem to think that number two said this one is the better looking one.

  • That's kind of what I was thinking, too.

  • This I think this looks pretty good too.

  • But I feel like this is also more consistent with the other screening.

  • Maybe so.

  • I think we're for right now on lists.

  • Something else happened.

  • Unless something crazy happens, we're gonna go with this one, I think.

  • Oh, all right.

  • And let's try white here.

  • I think that looks pretty good too.

  • Actually, the thing is, I don't like what's going for Or I was gonna go form or of like, uh, bluish on kind of life life green colors because I was googling like, what are calm colors?

  • Because I wanted to this to be something where when you go into it, you don't feel like you're behind on things that you don't feel stressed when you go into it.

  • So you want to have, like, kind of calm colors.

  • I don't know how much that actually effects people, but I felt that might be a little bit of a nice touch to it.

  • But I was trying different colors in different color schemes and I didn't really like the green and blue and that sort of stuff.

  • It didn't really look the way that I wanted it to look.

  • So I feel like this looks better and, yeah, I don't know where he's going with this but us.

  • I think about this being white compared to being black.

  • Um, having it be white makes it stand out a little bit more.

  • Eso depends on, like which one makes it less like screaming.

  • If that makes sense, because I wanted to be toe have that sort of calm feeling so that you feel like you want to go into the act.

  • I don't know if that makes any sense.

  • I'm not.

  • I'm just, like, rambling on right now.

  • Anyway, let's see if we can figure out a way to make this look good.

  • Oh, Okay, So shopping lists were probably so that's the title of the to do.

  • Okay, Um, what's that color?

  • No, Phil.

  • And the size should be okay.

  • Shopping list.

  • There we go.

  • We have that.

  • And then we probably want, like, a subtitle under that That could be, like, some tests or something like that.

  • Or maybe you have a note.

  • Not sure exactly what we're gonna have to display here, but this I think we could have something.

  • Maybe to display this'll is okay.

  • Have the light 15 and also be red.

  • We're probably gonna have to have it be a little bit less so that it kind of because we want the title to stand out.

  • It's similar to what they've done here.

  • They make the title stand out really quite well.

  • And then the subtitle or whatever it's beneath it is a little bit blurred out or a little bit less.

  • What would you call it?

  • Weightless.

  • It doesn't stand out as much.

  • Maybe we just go with sliced door.

  • All right.

  • Something like that.

  • I think that's gonna be kind of what It's kind of quickly, um, and then we want a divider.

  • So the divider between each task something like this and the color of this Should that be white, Like I'm just trying different things to see which one?

  • I kind of think looks good.

  • I do like this.

  • I think that did look kind of good.

  • Yeah.

  • So maybe I'm actually pretty happy with for that.

  • So we're gonna copy that, paste it, and then we're gonna put this one below faced puts up.

  • All right, so I think that does look pretty good.

  • Um, okay, Uh, Joe, it's a pick up, geo.

  • Um, all right for sure.

  • Okay.

  • So that I think that looks pretty good, actually, for, uh, the for a list.

  • And then maybe in here is actually where you when you press one of the items on that list, you can then get kind of a view off a little bit more detailed view of that task.

  • So that would look again something like, uh what I just showed you before with the pop up screen kind of coming from below.

  • So if you press one of the tests, it would show up like this and you would get the title of the task.

  • And then some of the sub test.

  • Maybe you can even scroll here.

  • You can see all the sub test for that list or for that task.

  • Um, I'm not sure how to make that as nice as possible because we want.

  • I want to make it super simple.

  • That's kind of what I always try to do when I build a nap, I want to make its there's I don't know this some sort of quote that's like the product or whatever idea was is finished when there's no nothing else to take away.

  • And that's kind of what I like to think of when I build second APs as well.

  • Yes, I want to have as little as possible.

  • It's actually help you get the job that you want to get done.

  • Done.

  • So, for instance, here you want to have you want to show us little as possible to get sort of an idea of what that task ISS.

  • And then when you press the task, you want that to be really like simple way and intuitive way to show.

  • What a swell, Because let's say that we have this thing here, and when you press that it turns into something like this when it's done.

  • So this is gonna take me a while.

  • Toe explain.

  • Maybe Maybe I'm putting too much effort into explaining this.

  • Um, okay, let's copy this color, all right?

  • And no border.

  • Okay, so that's what I'm thinking that it's gonna look like when you pressed.

  • When you've completed a task, you press it and this circle fills in, and then I I think it should get removed from the list.

  • Or it should get moved into a, uh, something down here that where it says, like, completed or something like that, so that you don't I have to actually see so that you don't have to ciel the things that you've already done.

  • So they don't have to clog up your list essentially.

  • But that also means that you need to be ableto press this to make sure that it's done.

  • But then you also need to be able to press this to get to the sub test of that list off that task on DDE.

  • That is something I'm not sure how to do properly.

  • Because if you use something like this, then it's pretty intuitive that this whole red area is gonna be a button that you compress.

  • So if you press that, then you or if you tap on that you know that we're pretty used to the fact that when we tap something like that, it's gonna be a button, and it's gonna do something.

  • And, uh, compared to this thing, which is not, it's not super intuitive that this is actually a button.

  • So even if this entire area is the button, it's not super intuitive, so people might not think of actually pressing it.

  • So what?

  • You could do it.

  • You could add something like a button here on the side where you can if you tough that then you get to the specific task.

  • Or you could just hope that people understand that they can just press this as a task or we could do something.

  • L's We could do this And, mate, something like that have that be the same color as the background.

  • Maybe.

  • Okay, and then we need to add a shadow to it on some orders.

  • 20.

  • Okay, so that doesn't really show up at all.

  • Yes.

  • So this is one of those problems that we're gonna I need to be able to figure out how to make this really intuitive because what I want to be able to do as well is to be ableto hold.

  • Like if you long press on this, I wanted to be able to actually move the different tasks and switch them.

  • So you switch the order of the tests because what I want to be able to do is add some sort of priority variable.

  • So you could have so that this list with envy ordered by priority said the thing that you think is most important should be at the tough, and the things are less important, should be at the bottom.

  • And then I want you to, Like I said, also be able to actually move these tests like so just by tapping it on moving it.

  • Um, and I don't know how to do all of this in the best way, because I really like I really like the dividers here.

  • The wife.

  • I think that the list just ends up looking really good, but it also becomes very un intuitive how to move different things and that you can move different things compared to like this thing where you feel like you compress that and move it.

  • Maybe so we need to come up with something for that.

  • But I think maybe we should just leave this for now and move on to another screen.

  • So that's then gonna be our view off the day for now.

  • Now, we also want to be able to view the week, So, uh, that should probably look very similar.

  • So something like this.

  • But maybe instead of these numbers corresponding thio days, it should correspond to a week.

  • So that could be weak.

  • 43 or any way it could be weeks 25 26 27.

  • But that's going to be an entire week.

  • So now the things the what we need to figure out essentially is how do we display an entire week's worth of tasks in a way that we can in the way that this again intuitive and is really easily over viewable.

  • So I think we're gonna have something like these lists.

  • But if you maybe make them even smaller so that you make them, like, really tiny maybe only that they don't get smaller.

  • Okay, so let's think Oh, Thursday, Friday.

  • I don't know if this is, like, super boring to watch or whether it is somewhat interesting.

  • I'm hoping that it's kind of a little bit of both.

  • I feel like this should be something.

  • I want the streams to be kind of like we're hanging out and coding or building things, and you can just have this on in the background or it could be coding at the same time.

  • And it should just be kind of relaxed little thing anyway.

  • All right, let's say 20 honey.

  • All right, Middle.

  • Okay, so there's something like that.

  • Maybe.

  • And I like, I like that The colors are a little bit faded so that they're not popping us much.

  • But I'm gonna try it with the sharper color just to see kind of what that looks like.

  • Yes.

  • Maybe we should Maybe we should go with the Sharper color, actually.

  • Um, all right, there we go.

  • Now, we need to figure out a nice way to kind of display all the days because the thing is right now, what I'm thinking in my head, I'm tryingto I'm going to try to explain all the things that I think of as I do this.

  • What I'm thinking is that we have a lot of real estate here on the screen that we're not gonna use or that doing this method.

  • We're not gonna use it that much because that would mean that the entire Monday list would be this long, which, if it's gonna fit within this space, it's unlikely to be that long.

  • If that makes sense, because all the tests are going to be, like super small.

  • So you would have to have, like, 1000 tests to be ableto use up all the space.

  • We're just gonna be a likely so this looks really good.

  • But I feel like there's so little space under here that we can actually use for each day.

  • That's it really makes it difficult.

  • Cal, Hold on.

  • Will you do a video tutorial about the program she used to create a program into face programs interface?

  • Yeah, So, uh, I don't know.

  • Bhola 12 if you you might not have been watching since the start, but this I don't know if that was what you were asking for, but this so far that I'm using Thio design.

  • The APP is called Adobe Ex d uh, which is this program here.

  • And that's essentially what I used all the time.

  • When I decide maps, I hope that answers your question and also regarding, like, doing a complete tutorial on this.

  • I'm not even that great at it.

  • I just basically pick these different objects.

  • And then that's what I use to create the You are essentially.

  • All right.

  • So the question is, what kind of way can we display the week?

  • So my thoughts right now or this we could do something like this where you have a little card or something for each day.

  • If that would even fit on the screen, I don't think it will.

  • Uh, okay, so we could have something like that for each day where you have just a very, very tiny list of all the test.

  • But that's not very useful, because then I mean, the reason for having an overview of your week is to see how many tests do I have for each day on kind of what those tests are.

  • So the way that we could do it and still have this interface would be if this is the view you see, and then if you press one of these days, then you get also something like this.

  • So an entire list of all the tasks for that day, Um so something like that, Like that.

  • So that could be a way to do it so that we get that way.

  • All right, let me just finish this the way that I wanted.

  • So something like this, so that when you press the specific day, you then see the entire list of all the task for that day, and then you can go through all the days.

  • But then you also see a tiny list here of all the tests.

  • Ah, not sure.

  • War, if that is really that great.

  • Because what you want to do is you want essentially what we want, like I said, is to see how many tests did I have for each day so that we can so that we know then whether we can postpone something for another day or whether we need to do something that we've planned to do tomorrow, whether we need to take something that we plan to do tomorrow and do it today because we have way too much stuff to do tomorrow.

  • So, uh, in order for that kind of interaction with this list to work, you would have to actually be able to see, uh, probably all, if not just most of the tasks for each day.

  • So I think maybe a better way would be to divided in some way.

  • So maybe having Monday, Tuesday, Wednesday, up here on get a little bit more space for them and then you can have Friday Saturday over Thursday, Friday, Saturday, on or down below.

  • So let's see here.

  • How big do we need the cards to be?

  • Probably something like, uh okay, So now I just came up with another thing that might work, which would be to have it be like a scrolling list to get scroll through the days.

  • Um, which might not be that that important Or which may feel a little bit like we're doing the same thing twice.

  • Because if we have a scrolling list here where you can scroll through the different days, then that would be pretty similar to this scrolling list here where you can scroll through the different days.

  • So because what I was thinking that you could have just something like that, and you would just be able to scroll through the entire week by that probably isn't useful enough for it to be worth doing.

  • Okay.

  • All right, so now it's in the middle.

  • This all right?

  • So something like that, maybe I think this might work, but the thing is, that shit we would still way would still not safe the entire week.

  • I think this this is one of those really interesting problems that I think iss Whoa, that I think it's something that all really great APS and really great.

  • Like if you think of the iPhone when that came out, kind of the way that they did things in the way that you interacted with the phone eyes.

  • A big part of why everyone life to the iPhone compared to previous phones or previous touch phones and other things.

  • Andi, I think that's still something that a lot of people like about iPhone in particular is kind of the user interface.

  • And how?

  • How Thought out some of the the interactions are.

  • So, uh, that's why I kind of like the sober problems, because I feel like this is where if you work on this really hard, you can come up with something that's really quite useful and it's also the great experience tohave when you're using the app.

  • So you kind of wanna.

  • I want to sort of focus on this to make it, make sure that it's even though it's a really simple thing to just display a week.

  • It's something that I don't see really very well done in many places.

  • Even if you look a like Google Calendar, I don't think that is done very well.

  • I think it's done okay, but it's like you can probably do it better, But maybe I can't do it better.

  • I don't know.

  • We'll see.

  • Okay, so we have Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, and then Sunday would end up down here, which I don't really like, because then we would have just one lone day here with nothing on the side and fitting Maur than this, some fitting, like four on one.

  • A thing like this, I think it's gonna be too much as well.

  • It's gonna make the cards too small.

  • I think I wish it was just like six days.

  • It would have been so much better.

  • Um, Monday, Tuesday, Wednesday, I think, using some like lips Crow will be good for 30 days appear on talk Monday.

  • Shoe state, Wednesday, Thursday, Friday.

  • So the question is, if we scrap this thing for the top part, whether we can actually fit seven days cards.

  • But that's no super useful either.

  • Something what I'm thinking.

  • It's like, What if we made it?

  • I think one of you guys suggests that something may be similar to what I'm doing now.

  • Um, they scroll herbal list essentially, with all the days something like this is very basic, where you just would scroll through and you'd see like this is Monday, Tuesday, Wednesday.

  • But this doesn't really give that overview that I want.

  • I really want overview so that you can just see.

  • Okay, this is what this week looks like.

  • Um, what about a full with card for Sunday?

  • That might not be a hole.

  • Yeah, you could use a full with cars.

  • The only thing is that even this sort of with for the cards, I feel like the text for each card.

  • Like, let's say that you have 10 past or something for that day.

  • It would be it wouldn't really fit on the 10 on the card.

  • Very well.

  • I feel like and it wouldn't.

  • It also wouldn't really take up.

  • If let's say you made 10 tests fit on this card, then all the tests would be really That text would have to be really small.

  • So that would mean that the text would probably only fill up like a really small part of the card.

  • So, really, the real estate that you want is gonna be down.

  • I feel like and to the side.

  • I don't think it matters.

  • Like if you made it like super thin into the side, you could fit, like, entire year almost on one page.

  • But then you wouldn't really be able to see the tasks.

  • I mean, this, of course, is super small as well as he would hardly be able to see the test either.

  • But I don't know.

  • It's difficult for sure.

  • Um, okay.

  • Okay.

  • One Marco said, What about a list like today's page dividing my days?

  • I'm not sure what you mean by that.

  • A list like today's page dividing by days.

  • Ah, you You mean something like this.

  • And, uh, than each thing like that would be a week day.

  • So this would be Monday containing all of the the tax for Monday.

  • Yeah, I was thinking about that too.

  • So something like this.

  • Essentially, then, um what if we made it even thinner?

  • So all the question is really how thin can we make these cards?

  • Because if we essentially, if we made them this thing, then we would be able to fit all the days on one, uh, screen, Uh, or on one in one row, Essentially.

  • But if we make them too too thin, then there really won't be able to fit any text on there that would be a readable to a user.

  • So it's kind of this balance between what's, like, how small could we make it and still have the use or be able to read it?

  • Um, so we'll see.

  • Maybe we can fit four days.

  • Okay.

  • The thing is also that for what we're gonna build first it's gonna be like this after I'm gonna publish this app when we're done with it to the school play and the APP store.

  • And what I want to do is I want to work through it and kind of create a minimum viable product.

  • So essentially, the simplest thing that I can make that still has all the things that I want and then we can generate on that and make it even more even better.

  • But hopefully what I want is for you guys to actually be able Thio, have some input into this and help make this even better.

  • Not sure whether this is actually going to be a good app or anything, but, uh, I think it might be a fun thing to do.

  • Have to just build it and show the entire process of building it and then also keep working on it and iterating and making changes and having the input from you guys to make it something that we all can use.

  • Hopefully, maybe.

  • I don't know.

  • Okay, so this Monday, Tuesday, once the first I think this size is going to be Okay.

  • So, uh, let's copy this.

  • Paste it and then what we want to do.

  • It's one set that color to be this one.

  • Okay.

  • And then make that super small start with 10.

  • Okay.

  • Yeah, that seems when 10 isn't super small.

  • I don't think it's a pretty small for a person to be able to read it on that on the screen but I think it's okay.

  • So if you have, like, several items I wanted to look something like that, and then way would have something like this.

  • Turn that into a one and we're in thickness.

  • Oh, that's so stupid.

  • Something like that, right?

  • Leave the leads.

  • So then you would have just a bunch off these items on each card, which is gonna be the title off each test that you have, And that's then going to give you kind of an overview of what you need to get done that week.

  • Um, I don't really like that it's separated and that the bottom ones are different sizes.

  • Even if I made them the same size, that would mean that we would have some sort of space in here, which I don't really like, either.

  • That's try to do this, actually, just to see whether that might work whether that makes it look better.

  • Okay, because I feel like when you look at this and you see this thing, I mean, if it was just that it would be a super clear overview of your week s.

  • So if that was seven days, that would be super clear.

  • But I mean this.

  • This is I think this is good enough for a minimum viable product.

  • But in the end, I would probably want to come up with some way of making this even more detailed.

  • Uh, I mean, you could d'oh the laced where it's like it just continues here Friday, Saturday, Sunday, Why don't I like?

  • I don't like that because you don't see the entire week.

  • But I don't like this because you kind of I don't know.

  • I don't know how to put it in a way, that's kind of understandable, but I feel like this would be your kind of used to seeing weeks looking something like this.

  • So in calendars, in, like, really calendars and not secure legal calendar, anything like that.

  • Ah, that usually looks something like this.

  • They're, like, lined up and you can see each day of the week.

  • So seeing some days up here and then some days down here kind of makes it a little bit like I feel like you're No, I'm not at least used to seeing that, so it kind of makes it look a little bit strange.

  • Um, one thing that could be done as Well, could be have like, but that I think this this what I'm gonna share you now is gonna be, like way too different to make it work.

  • You have, like, one in the middle and then three up top three down the bottom.

  • Okay, that's no, that's not a good idea.

  • That is way, way too out there actually work.

  • I think so.

  • Now I'm just like, populating the screen with some titles just so that I can see what that might end up looking like so that we can get even Maur or understand even Maur, whether this is actually gonna look good or whether it's gonna not work.

  • It'll I mean, this looks okay.

  • Yeah, but it feels like it just looks okay.

  • Doesn't look great.

  • Um, yeah, I'm not sure to be honest, but it's been about one hour and 30 minutes.

  • I was just gonna stream for one hour today, Uh, so gone a little bit over the time, But I feel like we've got a lot of stuff done, and I think that this is good enough to get started on some of the the actual design or, like building the apple mean so uh, I think we're going to call it a day right now.

  • And then we're gonna be back next Monday and we're gonna actually build this out.

  • We're going to start by building this screen out, and then we'll hopefully, I think we're probably just gonna be able to build that screen out for the first stream, Um, and then move on to the other screens as well.

  • And within, like, during the weeks I'm gonna try to come up with, Ah, design that I like more than this.

  • But right now, I feel like this is, uh, the best that I can come up with for displaying an entire week.

  • So, yeah, I think that's gonna be what we what would what would go with what will will go with, But yeah, it's pretty exciting.

  • I'm really excited to actually be able to use this up because I feel like this is something that I've been waiting for for a while, and I've been looking for it as well, really good to essentially.

  • It's a to do list after, which is like, pretty funny, I think, because it's usually the kind of thing that you build the first thing that you build when you learn a new like when you want to learn how to build APS Essentially one of the first APS to build is usually a to do list app.

  • So this is gonna be essentially to do it, but maybe a little bit more advanced than that.

  • But anyway, this I think this pretty happy with where we're at.

  • So the next next stream, I think we're gonna start actually building the screens out.

  • And then we might do another stream when we keep designing it and making like the other screens that we're gonna have like it like the alert window or some like that for adding a new ah task for adding some tests and those sort of things.

  • But yeah, I I hope it was interesting to watch this.

  • And I hope you I kind of enjoyed it, that it was kind of nice to see how I go about designing these things and, like you probably saw, there's not much thought or there's a lot of thought that goes into it, but it's kind of just winging it.

  • In a sense, I just make something up that I think looks good and Hopefully, it ends up working out well for this app.

  • So, uh, I guess I will see you next Monday.

  • And, uh, if you're watching this on you too, then I'll see you on Tuesday.

  • All right, so that's it for the stream.

All right.

字幕と単語

ワンタップで英和辞典検索 単語をクリックすると、意味が表示されます

A2 初級

スクラッチからアプリを作る。アプリをデザインする (Building An App From Scratch: Designing the app | #1)

  • 2 1
    林宜悉 に公開 2021 年 01 月 14 日
動画の中の単語