Chào mừng bạn đến với TUTUAPP

Learning to code on your mobile?

can you learn to code on your mobile we will try using the grasshopper app today you’re watching dev tips and I’m David [Music] in the last video I talked about learning to program using configuration or modifying an existing code base in this video we’ll experiment with a different approach we will be starting from scratch without knowing anything about code and then step by step and build up our knowledge with an app I’ve never taught programming per se but I have been an educator in digital marketing and Google Analytics especially and it’s a difficult balance to find what is too little information for a student and what is like too much information like information overload for a student each student is unique in how they learn some people will want to start with theory like reading a pamphlet on yoga how to learn yoga others they just want to start practicing like do the backflip plan and then after that after that go to the theory part starting with practice and a real project is what we talked about in the last video and what is good with that is that you buy by modifying very small small tweaks you will see results right away like changing the background color of an HTML document the key essence of starting a real project and modifying it through configuration or modifying the code instance very quick to actually see a result you will make modifications and then see the changes directly if you start from theory it’s a longer way before you actually see you results and some people want to see the results straight away others are fine with just learning the foundation first and the fundamentals in the theory before they actually apply it to practice a grasshopper is using a step-by-step approach sort of like configuration or modifying the code but with very very very small examples and this is very common in the code learn how to code space then they mix it up with small quizzes to check on you to see if you’ve actually learned anything if you’ve understood the concept it is accessible to a lot of people because it’s a mobile app and that’s awesome but the problem is that using the mode but to to type it’s not at all as good as using their old keyboard you have a small screen as well so you’re very limited in getting an overview of everything but this is what we’re gonna find out how it works it’s not sponsored by grasshopper or anything it’s it’s just an approach of the teaching code on the mobile that I’m very excited about all right let’s hop into the grasshopper app let’s check out the fundamentals yes I have done them already mm-hmm start with the French flag welcome to first puzzle each puzzle has a set of instructions at the top you go to create something that looks like this I love this how they are showing me the expected result and then here is my code this is what I need to configure so what I can do now is edit the code and this is what I find pretty neat I have the code here draw a box blue and robots white robust red new line tap to get started tap below the last line to create a new line okay now this is the first exercise so it giving is giving it’s a it’s very helpful draw box use blue so you see here that I don’t have to write the function name I don’t have to write the variable name I just follow along here and tap my way to the correct answer and then we run it yay congratulations let’s go to next lesson it gives me a small introduction now that you’ve drawn let’s try another similar to the one before you draw color boxes and create the line break this time however the flag stripes are horizontal rather than vertical okay instructions use the draw box function to sign the appropriate colors to each box and then use newline function to separate two rows of boxes that data and it’s given me some starting points here so let’s add a new line here oh I love this that you I don’t have to draw I have don’t have to write anything I just tap draw box I draw a box yellow draw box yellow new line I can add other things here and then I run it and I see the result and it tells me some info used to draw a box from here to create the Gabonese berrykins creates all sorts of shapes using draw was perfect then they also have quizzes so now i learned how to draw a box with a color that I wrote quiz time how many blue boxes will be drawn from this code so now they forced me to actually think of it of what I’ve just learnt how many blue boxes would be drawn from this code draw a box orange robots blue that’s one and it’s orange statement then it’s new 9 station and draw a box orange and then it’s a blue statement so is that one or two boxes let’s say I think it’s two blue boxes check not quite but they just they don’t just fail me they give me a small example of what to do here to draw a blue blocks blue box draw a box blue is needed then there’s only one drawback blue only one blue box will be drawn okay and I just want to get this correct so let’s just put the number one there yay then I get a small star that I used a function with some information about that and that is how it’s progressing these are pretty basic we’ve done some loopings band name generator’ no I don’t want okay so we generate some names with some for loops so here you have some code I’m just iterating through an array and then I’m iterating through a different array within each iteration these are the fundamentals these are the fundamentals I have done them so let’s try the animations and see what it’s like when I’m actually trying to solve something here’s a puzzle ahead of your time in this puzzle you rotate the hour hand of a clock using transform attribute the value of the transfer matter attribute will be a string that describes how to rotate the shape rotate mm-hmm degrees X&Y okay first number is how many degrees to rotate the shape clockwise the next pair numbers are the X&Y coordinates of a point to rotate around okay so how many degrees and then where is it located instructions so they give me the background and now is the to do instructions it’s daylight saving time that means you will need to set the clock forward by one hour edit the value of the transform attributes so that the hour hand is rotated 30 degrees further clockwise so I want to move the hours mm-hmm clockface minute an hour hand so that our hand has a transform is rotating 60 around the hundred hundred point I want to edit this string to rotate 90 around the hundred a hundred point let’s try that uh uh that was not correct okay should it wrote it down the other way oh I don’t know thirty done use the reset button to get a fresh start what do you mean how do i reset the hour and it’s already wrote in six days you want to change to 90 degrees didn’t I just do that our hand oh oh okay it wants me to put rotate 90 around 100 hundred points sorry guys and girls BAM yes whoo-hoo it’s difficult when someone’s watching so I did that now it’s quiz time to check on me to see if I did that correctly what do i what to do a or two a x and y representing the code below transform would a is the degrees x and y are the position of the center of the circle pivoting point okay I want to get this correct okay the position to rotate around that’s what I’m that that is what I meant all right we have the robot prepared let’s not do that let’s do that so here we have functions you’re doing great the next topic is function so we’re now starting on a new function of a new topic called functions I think this is a neat way of to learn but the problem with on to tourists means of learning is that say I’m doing this tetra normal thing reset ok I just skim this I don’t even read it I just see two bullet points here change at X 120 change at Y 150 X 120 num 120 why y 150 run it yay congratulations I solved it ok let’s go to the next look to the left yes reset it I just look at the bullets in the to do in the instructions change left eye at CY 50 and then right pupil see X 125 okay left I see why 50 left I see why 50 and then right pupil see X 125 right pupil see x 125 yes I solved it but the problem is now let’s go to quiz time how would you move the circle upward so it has something to do with see why because that is the y-axis but because I just ran through their exercises and didn’t really think about them I didn’t I didn’t read the background I didn’t experiment with the code I just followed I saw this pattern and then just wanted to complete the exercise I didn’t actually learn anything so here I don’t know which way the coordinate system is running in in this d3 that we’re using I have no idea so this is a problem with unsupervised learning that I can run through the whole grasshopper app and get so like a diploma yes I passed it but did I actually learn something maybe not if there were a teacher there the teacher so this is what the quiz is doing is actually checking on me did I learn so see why I think that I think it probably begins top left like it often does on like a CRT TV and whatever it’s often starts in the top-left when you’re programming I just know that but if I came from a math background I thought I would probably think it starts from the bottom left like that kind of coordinate system what I think is from the top left and then when we add numbers it goes downwards so we have to subtract numbers together to go upwards so here we have CY 150 we wanted to go up so we need to subtract numbers and this is the only option we subtract yes so now I first I complete the two exercises not knowing what I did but now thanks to the quiz the tutor I actually learned something let’s do another quiz where will this rectangle be positioned on the screen so here we have where does the coordinate system start X is zero and Y is zero we learned from the past quiz that it’s the top-left corner yeah boom so this thing with the quiz time is pretty huge for this app and I’m sure other online and app education softwares are doing the same thing and I totally endorse it because you need that you can’t just have exercises that people can run through and then not learn anything then just they are just wasting their time to get a diploma and that’s it okay we did some exploration on grasshoppers attempt to teach how to code on the mobile so I can do it forever I love it to me it seems like a pretty good way to get from zero knowledge up to like a grasp of JavaScript and how it works but what if I want to take the next step after I’ve done after I’ve done the fundamentals and the animations and the animations too and perhaps grasshopper will release more classes what is the next step I don’t know you guys please help me write in comments and suggest what other services there are that are good that you have tried that you can vouch for and if there are bad ones please write that as well because that is very good for someone that wants to learn to know which ones aren’t good or at least what are the pros and cons with them that was it for this week yeah you’re watching dev tips with me Dave Ian and I hope to see you in the next video bye

Leave a Reply

Your email address will not be published.