- 00:00:00 [Music]
- 00:00:07 so what is native script native script
- 00:00:11 is a set of tools you could say which we
- 00:00:13 use to build real mobile apps for
- 00:00:16 Android and iOS we use technologies for
- 00:00:20 that which we typically use to build web
- 00:00:22 apps with that I mean typescript XML and
- 00:00:25 CSS now we don't use typescript of
- 00:00:29 course to build web apps we use
- 00:00:30 JavaScript but typescript is just a
- 00:00:33 super set to that it's compiled down to
- 00:00:35 JavaScript and angular for example uses
- 00:00:38 typescript heavily and we don't use XML
- 00:00:41 to build web apps but HTML and that's a
- 00:00:43 tiny difference XML is basically HTML
- 00:00:46 you could say here in native script apps
- 00:00:49 we'll use different elements will not
- 00:00:51 use default HTML elements simply because
- 00:00:54 native script does not wrap a web app
- 00:00:56 and put it into a native app but it
- 00:00:58 really compiles it's down to native code
- 00:01:00 so a button placed in your native script
- 00:01:03 template will be a widget button on
- 00:01:06 Android and a UI button on iOS so really
- 00:01:10 the native elements you could use when
- 00:01:12 you build the apps with these native
- 00:01:13 languages and that gives you the best
- 00:01:15 possible performance but other than that
- 00:01:18 it's just the same text sack and native
- 00:01:21 script does not only give us a tool to
- 00:01:23 create such a project and bundle and
- 00:01:25 build it and run it and package it up it
- 00:01:29 also gives us a way of interacting
- 00:01:32 between our JavaScript code our angular
- 00:01:34 code specifically and the mobile
- 00:01:37 platform it gives us a bridge so to say
- 00:01:40 which is a code base running in every
- 00:01:43 applet which is included in every app
- 00:01:45 that basically translates certain
- 00:01:48 commands we write in angular and
- 00:01:50 therefore in JavaScript in the end into
- 00:01:52 commands the native platforms understand
- 00:01:55 for example for switching a page loading
- 00:01:57 a new tab or getting the user location
- 00:02:00 now and whilst we have all of that and
- 00:02:03 therefore have a way of tapping into
- 00:02:05 native api's like using the camera and
- 00:02:07 so on
- 00:02:08 we can do that by using technologies we
- 00:02:10 know we could use vanilla JavaScript or
- 00:02:13 types
- 00:02:13 for that but never script all the
- 00:02:15 supports angular and view and we will
- 00:02:17 use angular in this course now angular
- 00:02:20 normally uses HTML templates to build a
- 00:02:23 web app as you know and that is the part
- 00:02:25 where we will now use XML instead but
- 00:02:28 for all the logic so for the non HTML
- 00:02:31 and partly CSS part of the app we will
- 00:02:34 write all the angular code as we know it
- 00:02:37 will use services we'll use a property
- 00:02:40 binding all the features you know from
- 00:02:42 angular we will use them here and that
- 00:02:44 of course is amazing because that allows
- 00:02:47 us to use our existing knowledge to get
- 00:02:49 a new kind of app out of it
- 00:02:55 so what exactly is happening under the
- 00:02:57 hood of NATO script then well we write
- 00:03:00 our app code and we do that with angular
- 00:03:03 in this course and our goal of course is
- 00:03:05 to get these native mobile apps for iOS
- 00:03:07 and Android now as I mentioned we could
- 00:03:10 write the code in JavaScript or
- 00:03:12 typescript or an angular or in view but
- 00:03:14 we'll use angular in this course but
- 00:03:17 this flexibility already is great to
- 00:03:19 have because it means certain concepts
- 00:03:21 that you'll learn about native script
- 00:03:22 can be reused even if you would use a
- 00:03:25 different framework at a later point of
- 00:03:28 time now native script of course
- 00:03:30 provides your way of getting from your
- 00:03:32 angular code to this native mobile app
- 00:03:35 and therefore it offers us certain core
- 00:03:38 modules which we can import into your
- 00:03:41 app so here I'm really talking about
- 00:03:42 modules written in typescript partly or
- 00:03:46 written in an angular so to say which we
- 00:03:49 import into our typescript code into our
- 00:03:51 angular app queue directly access
- 00:03:53 certain device features from inside our
- 00:03:56 typescript code from inside our angular
- 00:03:58 code word to interact with our user
- 00:04:01 interfaces which use these native widget
- 00:04:04 XML code as I mentioned so we get these
- 00:04:07 tools to well use features we can't use
- 00:04:11 on the web in our angular code and still
- 00:04:14 write normal angular code with that we
- 00:04:17 can also install certain plugins which
- 00:04:19 could be developed by the native script
- 00:04:21 team or by the community and these have
- 00:04:24 to be installed in addition they're not
- 00:04:26 baked into the core of native script but
- 00:04:29 this still is a great part of native
- 00:04:31 script it's highly extensible we can get
- 00:04:34 a lot of value out of it and there is
- 00:04:36 almost no problem we can't solve now and
- 00:04:40 in the end there is this runtime which
- 00:04:41 is embedded into every app which is
- 00:04:43 important for talking to the native
- 00:04:46 api's for doing things like getting the
- 00:04:48 user location using GPS and so on this
- 00:04:52 is basically the code which wraps
- 00:04:54 everything together which you will not
- 00:04:56 see and which you will not write on your
- 00:04:58 own but which is there which ensures
- 00:05:00 that in the end your angular code which
- 00:05:03 doesn't know too much about the platform
- 00:05:06 it's running on runs fine on both
- 00:05:08 Android and I
- 00:05:09 yes well and in the end having a
- 00:05:11 codebase isn't any good we also get the
- 00:05:14 native script CLI which we used to
- 00:05:16 create new projects to test them to run
- 00:05:19 a development server which automatically
- 00:05:21 loads the app on our connected device
- 00:05:24 and reloads it whenever we change our
- 00:05:26 code and which also in the end allows us
- 00:05:29 to package our wrap up and get an apk or
- 00:05:32 an IPA file to deploy it on to Android
- 00:05:35 and iOS and by the end of the course you
- 00:05:38 will learn how to ship your app to the
- 00:05:40 App Store's
- 00:05:45 now what is angular to be honest you
- 00:05:48 should be able to answer that question
- 00:05:50 because it really is a prerequisite of
- 00:05:52 this course I do have an angle a
- 00:05:55 refresher module in this course which
- 00:05:57 you should take to get on the same page
- 00:05:59 as I am basically or to refresh these
- 00:06:02 basics about angular but I will not
- 00:06:05 explain every single concept angular has
- 00:06:08 or offers or how it works so if you feel
- 00:06:12 like I'm moving too fast through angular
- 00:06:14 stuff in this course if I'm writing
- 00:06:16 angular code too fast for you really
- 00:06:20 pick up a dedicated angular course like
- 00:06:22 my complete guide here on udemy for
- 00:06:24 example simply because this is not an
- 00:06:26 angular course it's a native script with
- 00:06:29 angular course and if I teach both then
- 00:06:31 this course would have 60 hours and
- 00:06:33 would be well basically not suited for
- 00:06:35 anyone because it would not be teaching
- 00:06:38 native script and F and not be teaching
- 00:06:40 angular in depth so I rather focus on
- 00:06:43 native script here and give you a brief
- 00:06:45 refresher on angular but I rely on you
- 00:06:47 being able to follow along in all the
- 00:06:49 angular related code so therefore just
- 00:06:53 as a quick refresher angular is a
- 00:06:55 JavaScript framework which we use to
- 00:06:58 build highly interactive and reactive
- 00:07:00 web applications typically or web
- 00:07:02 application user interfaces mostly it
- 00:07:06 uses typescript which is a superset to
- 00:07:08 JavaScript which in the end compiles
- 00:07:10 down to JavaScript but which makes
- 00:07:12 development with JavaScript a bit easier
- 00:07:14 we use it to create single page
- 00:07:16 applications typically in the web which
- 00:07:18 are applications that don't need to
- 00:07:20 reload the page on every click but
- 00:07:23 rather fetch data behind the scenes and
- 00:07:25 rerender what we see on the screen with
- 00:07:27 javascript and therefore we basically
- 00:07:30 use tools like angular to build web
- 00:07:32 applications that are very close to the
- 00:07:34 behavior of native mobile applications
- 00:07:37 hence it makes sense that we also use
- 00:07:39 angular to well create real mobile
- 00:07:42 applications with the help of native
- 00:07:44 script
- 00:07:48 let's get our hands dirty let's start
- 00:07:50 with native script actually before we
- 00:07:52 leave this first introductory module now
- 00:07:55 for that you can visit native script
- 00:07:57 auric which is the official web page of
- 00:07:59 native script and always a great place
- 00:08:02 to dive deeper to go into the official
- 00:08:04 Docs to look up a concept which I only
- 00:08:07 touch on may be or which you need for
- 00:08:09 your next app and on that page if you
- 00:08:13 click on the docs you can basically
- 00:08:15 choose your flavor of native script and
- 00:08:17 we're going with native script with
- 00:08:18 angular in this course and there if you
- 00:08:21 click on getting started you will
- 00:08:23 actually find detailed instructions on
- 00:08:25 how to get started and in the third
- 00:08:28 module of this course so the first
- 00:08:30 module after the angular refresher I
- 00:08:33 will walk you through a full setup on
- 00:08:35 your local machine in depth so you don't
- 00:08:38 need to do that right now
- 00:08:39 instead what you can do is you can go to
- 00:08:41 developers here and then click on
- 00:08:43 playground and that's really cool
- 00:08:45 because that is a interactive playground
- 00:08:47 interactive development environment you
- 00:08:50 could say running in the browser and
- 00:08:52 there you can choose your language and
- 00:08:55 we'll go with angular here and now you
- 00:08:57 get this bar code here this QR code and
- 00:09:00 you can download the native script
- 00:09:02 playground app for your Android or iOS
- 00:09:05 device and scan this code to see the app
- 00:09:09 you're building here in the web browser
- 00:09:11 live on your real device which is
- 00:09:14 amazing now the downside of this is
- 00:09:16 basically this playground app is a
- 00:09:19 wrapper which only has a limited set of
- 00:09:21 features it supports which you can use
- 00:09:22 in here which is actually quite broad
- 00:09:25 but not everything we might want and
- 00:09:27 therefore we will use a different set up
- 00:09:29 for the rest of this course but to get
- 00:09:31 started this is great so make sure to
- 00:09:33 download this playground app and then
- 00:09:36 scan this code
- 00:09:43 now once you scanned this QR code you
- 00:09:46 might be prompted to download the
- 00:09:49 preview app on the App Store and if that
- 00:09:52 should be the case make sure to do that
- 00:09:54 and thereafter it should open the
- 00:09:58 preview app and open that starting app
- 00:10:02 on your Android or iOS device and here
- 00:10:05 it is running on my device now the cool
- 00:10:08 thing is that you can now build that
- 00:10:11 project here in that web editor so here
- 00:10:14 on the left you see your simplified
- 00:10:17 angular project with the app folder with
- 00:10:19 a routing module with some components
- 00:10:22 and you will notice that that basically
- 00:10:25 looks like an angular for the web
- 00:10:26 project one important difference can be
- 00:10:29 found in the components what you see
- 00:10:30 here is this XML code I was talking
- 00:10:33 about because these elements like these
- 00:10:35 labels are really compiled down to their
- 00:10:38 native equivalents so to a label on
- 00:10:41 Android or a label on iOS so that you
- 00:10:44 get a real native user interface and not
- 00:10:46 that HTML user face wrapped into some
- 00:10:49 webview and therefore now if you change
- 00:10:51 something here let's say here on home I
- 00:10:54 say this is amazing and I also add a
- 00:10:58 button which I can do by dragging and
- 00:11:01 dropping it here into my interface and I
- 00:11:04 say tap me we can really build a nice
- 00:11:07 little first app here and as I said the
- 00:11:11 amount of features you can use here is a
- 00:11:12 bit limited because the preview app is
- 00:11:15 essentially a native app wrapping your
- 00:11:17 well demo app here and therefore you can
- 00:11:20 only use features and able to buy that
- 00:11:22 preview app which is a lot for example
- 00:11:24 accessing the device camera should be
- 00:11:27 possible but some things might not be
- 00:11:29 possible and you probably want to learn
- 00:11:31 how to develop locally on your machine
- 00:11:33 anyways so this is a great way to well
- 00:11:36 play around it is called playground
- 00:11:38 after all but for a real full
- 00:11:40 development environment we'll dive into
- 00:11:42 this in section free so right after the
- 00:11:44 angular refresher but here let's say we
- 00:11:47 want to change this this is amazing text
- 00:11:50 up here when we tap that button so I'll
- 00:11:53 call this on change the
- 00:11:55 what we could do is we could go into our
- 00:11:57 home component and they're all named us
- 00:12:00 on change because I renamed it in the
- 00:12:03 template too and then we have a property
- 00:12:05 here which is my label text which is by
- 00:12:09 default this is amazing and when we tap
- 00:12:13 this button well then just as we do it
- 00:12:15 in angular for web app we say this label
- 00:12:17 text and you see you even get some auto
- 00:12:19 completion here this was tapped and this
- 00:12:25 is some code we can execute here in the
- 00:12:27 typescript file then in HTML we now can
- 00:12:29 just bind this with property bindings so
- 00:12:32 using a default angular feature here on
- 00:12:34 this first label we can bind this to the
- 00:12:37 label text so to the property which we
- 00:12:40 define in home component and this is all
- 00:12:42 just angular logic here the only
- 00:12:45 difference really is that we don't use
- 00:12:47 HTML here but other than that we use
- 00:12:49 property binding we use event binding
- 00:12:52 down there with the tap the tap of
- 00:12:55 course also is an event we don't know
- 00:12:56 from the web so these are the tiny
- 00:12:58 differences you will learn about in this
- 00:13:00 course but other than that it's just
- 00:13:01 angular and now once you're done you can
- 00:13:04 hit save here and it should restart the
- 00:13:07 app automatically on your preview app
- 00:13:09 and there you will see that now you have
- 00:13:13 this button and if you tap it this
- 00:13:14 topmost text here changed this was tap
- 00:13:17 text so that is a great way and I can
- 00:13:21 only encourage you to play around with
- 00:13:23 that here play around with some of these
- 00:13:25 widgets until you feel like you have had
- 00:13:27 enough and then you can continue and in
- 00:13:30 the next module we'll actually have a
- 00:13:32 refresher on angular and thereafter
- 00:13:34 we'll have a full set up on our local
- 00:13:36 machine and I will teach you native
- 00:13:38 script step by step so you don't need to
- 00:13:40 understand everything that's going on
- 00:13:41 and this template here right now that's
- 00:13:43 just a tiny example to show you how
- 00:13:46 quick and easy it can be to get started
- 00:13:49 and feel free to follow along here in
- 00:13:51 the playground right at the beginning of
- 00:13:52 the course if you prefer that but
- 00:13:54 definitely also explore the local setup
- 00:13:57 I will teach you because there you can
- 00:13:59 use everything and you can build and
- 00:14:01 ship your apps without any issues so
- 00:14:04 with that let's see what else is in the
- 00:14:06 course before we dive right into our
- 00:14:08 local setup
- 00:14:09 and learn native script from scratch
- 00:14:15 so now that we had a look at our first
- 00:14:18 native script app let's see what else is
- 00:14:20 in the course we're almost done getting
- 00:14:23 started in the next module you will get
- 00:14:25 that angular refresher I was talking
- 00:14:28 about and this is an optional module
- 00:14:30 definitely skip it if you already know
- 00:14:33 angular and you feel like you need no
- 00:14:35 refresher it's purely optional the
- 00:14:38 module after that will be the first real
- 00:14:40 module of this course where we dive into
- 00:14:43 the NATO's core basics how it generally
- 00:14:45 works and where we also set it up
- 00:14:47 locally on our machine there after we'll
- 00:14:49 have a look at navigation and native
- 00:14:52 script so how we can go back and forth
- 00:14:54 how we can add tabs how we can add a
- 00:14:56 side drawer so all that fun stuff
- 00:14:59 thereafter we'll have a look at styling
- 00:15:01 and theming so how we can make our app
- 00:15:03 look good how we can add different
- 00:15:06 colored buttons implement our own
- 00:15:09 general theme and the app and so on
- 00:15:11 right before we then dive into forms and
- 00:15:14 user input which is of course a crucial
- 00:15:15 part of most apps so you will learn how
- 00:15:18 to use angle or form stare how to
- 00:15:20 validate forms and how to use that user
- 00:15:23 input you're getting there after we'll
- 00:15:25 have a look at managing state so how we
- 00:15:27 can work with all the data we gather and
- 00:15:30 we have in the app right before we then
- 00:15:32 have a look at HTTP interactions which
- 00:15:35 basically means how can we also
- 00:15:37 communicate with a back-end server to
- 00:15:39 store our data there or to fetch it from
- 00:15:42 there
- 00:15:42 now a related concept then is
- 00:15:45 authentication because we certainly also
- 00:15:48 want to protect our data we want to
- 00:15:49 protect our app and user authentication
- 00:15:52 is something you need in a lot of apps
- 00:15:54 therefore in this course you will also
- 00:15:56 learn how you would implement that in a
- 00:15:57 native script app we're nearing the end
- 00:16:00 of this course and therefore will then
- 00:16:02 publish our app to the App Store's
- 00:16:04 and you will learn how that publishing
- 00:16:05 process works now thereafter we'll have
- 00:16:09 a look at code sharing and see how we
- 00:16:11 can actually use that native app code we
- 00:16:15 wrote throughout this course to adjust
- 00:16:17 it such that we get a web app out of
- 00:16:20 this as well so that's a tiny bonus you
- 00:16:22 could say but still not a short module
- 00:16:25 actually quite long because that is a
- 00:16:27 pretty cool
- 00:16:28 native script and not something to look
- 00:16:31 it over whilst you of course do use
- 00:16:33 native script to build native apps being
- 00:16:36 able to then not just build native apps
- 00:16:38 but build web apps as well is of course
- 00:16:41 an amazing asset and an amazing feature
- 00:16:43 offered by native script with angular
- 00:16:46 and therefore in this module we will
- 00:16:48 have a look at how you can use one code
- 00:16:50 base to get free apps Android iOS and
- 00:16:53 the web well and thereafter I will
- 00:16:57 basically give you some next steps you
- 00:16:59 could look into you round up the scores
- 00:17:01 and you will have learned a lot about
- 00:17:03 native script
- 00:17:08 so right before we get started with the
- 00:17:11 refresher and then with the first real
- 00:17:13 content modules it's important that you
- 00:17:15 also know how to get the most out of the
- 00:17:17 course because whilst it might look
- 00:17:19 trivial just watch the videos right it
- 00:17:22 actually isn't and I want to ensure that
- 00:17:24 you're getting as much value for your
- 00:17:26 money as possible so obviously you want
- 00:17:29 to watch the videos it's a video on the
- 00:17:31 mont course watching the videos also
- 00:17:34 means that you should watch them at your
- 00:17:35 speed so feel free to slow me down or
- 00:17:39 speed me up with the udemy video player
- 00:17:41 controls if I'm going too fast or too
- 00:17:43 slow pause the videos and occasionally
- 00:17:46 go back to older videos that is okay
- 00:17:49 that's a normal process of learning you
- 00:17:51 will not understand everything at the
- 00:17:53 first time and then it's absolutely fine
- 00:17:56 to go back to an older lecture to
- 00:17:58 reiterate a certain concept or to go
- 00:18:00 through a certain sequence of concepts
- 00:18:03 again but watching the videos isn't
- 00:18:06 everything you also want to code along
- 00:18:08 at least that is what I recommend if you
- 00:18:11 code along if you pause the video and
- 00:18:14 write some code on your own and then see
- 00:18:15 how I implement this this really makes
- 00:18:18 you a programmer you need to get your
- 00:18:21 hands dirty you need to code on your own
- 00:18:23 there are a few assignments of this
- 00:18:26 course and I recommend that you do these
- 00:18:28 as well but other than the assignments
- 00:18:30 definitely just code along and all the
- 00:18:32 normal code you write because the whole
- 00:18:35 course is one assignment if you want to
- 00:18:37 look at it like this so take this
- 00:18:39 opportunity and code along and whilst
- 00:18:42 you're coding along you will face errors
- 00:18:44 that's a normal process during
- 00:18:46 development I face errors all the time
- 00:18:49 as well and your first step should
- 00:18:52 always be to try and fix them on your
- 00:18:55 own Google the error message or as a
- 00:18:57 quick starter read the error message
- 00:18:59 some error messages are quite
- 00:19:02 understandable so read the error message
- 00:19:05 google it if you don't understand it
- 00:19:06 because you will find many threats on
- 00:19:08 Stack Overflow and blog posts which
- 00:19:11 might discuss this exact error and how
- 00:19:13 to solve it also download and compare my
- 00:19:16 code which is attached to many lectures
- 00:19:18 throughout the course and always to the
- 00:19:20 last lecture of every module
- 00:19:22 because by comparing your code to mine
- 00:19:24 you will be able to find out where your
- 00:19:26 code differs and what could be causing
- 00:19:28 the problem now this really is a crucial
- 00:19:32 part and it's often overlooked you got
- 00:19:34 resources like Google and Stack Overflow
- 00:19:36 so you use them because if you're able
- 00:19:39 to fix your own errors then you've made
- 00:19:41 a huge step forward you need to be able
- 00:19:44 to solve problems as a programmer now
- 00:19:47 also use the official Docs I will point
- 00:19:51 at them a couple of times throughout
- 00:19:52 this course and that's not because I'm
- 00:19:54 too lazy to teach you the concepts I
- 00:19:57 will teach them but there's so much more
- 00:20:00 than what I can teach and there might be
- 00:20:02 variations of certain concepts or extra
- 00:20:06 configurations you can set up for
- 00:20:08 certain objects we might be using so you
- 00:20:10 will basically have ways of using
- 00:20:12 certain things differently than I use
- 00:20:14 them in the course or in your next app
- 00:20:16 you might need a certain tool or a
- 00:20:19 certain module which I didn't use here
- 00:20:22 and the official Docs are then a great
- 00:20:24 place to learn about all the features
- 00:20:26 exposed by native script now and last
- 00:20:29 but not least there is the Q&A section
- 00:20:31 and the Q&A section should not be your
- 00:20:34 oh I got an error I don't even look at
- 00:20:36 it I asked a question place to go that's
- 00:20:39 not the idea behind it the idea behind
- 00:20:42 the Q&A section is that you ask if you
- 00:20:44 absolutely are stuck and you can't find
- 00:20:47 any solution anywhere or if something is
- 00:20:50 unclear or if you want to pass back some
- 00:20:53 feedback and also don't just ask in
- 00:20:55 their answer help your fellow students
- 00:20:58 because if you're forced to think about
- 00:21:00 a problem and solve it you of course
- 00:21:03 also get way better at programming and I
- 00:21:06 guess that ultimately is your goal when
- 00:21:08 you're taking a course like this right
- 00:21:10 so these are my hints on how you get the
- 00:21:12 most out of this course and with that
- 00:21:14 let's just get started let's dive into
- 00:21:17 the optional angular refresher before we
- 00:21:20 then have a detailed look at native
- 00:21:21 script
- 00:21:26 so let's now set up a real development
- 00:21:28 environment as we will use it for the
- 00:21:30 rest of this course on Mac OS and also
- 00:21:33 on Linux the steps are pretty much the
- 00:21:35 same now for that you can dive into the
- 00:21:37 official box here under the angular
- 00:21:40 Doc's getting started see lies setup and
- 00:21:42 will basically walk through all these
- 00:21:44 steps where the first step is to install
- 00:21:46 node.js now no js' is required because
- 00:21:50 the built tool uses it behind the scenes
- 00:21:52 and we will also use its package manager
- 00:21:55 npm with which it ships now on node.js
- 00:21:58 or you can download no chess and there
- 00:22:01 make sure to pick the LTS version 10.15
- 00:22:04 and only if you're facing issues with
- 00:22:05 death try the latest version so this is
- 00:22:08 pretty straightforward
- 00:22:09 clicking the error gives you a default
- 00:22:10 downloader which you can install and for
- 00:22:13 which you can walk thereafter and this
- 00:22:15 will now install node and also NPM that
- 00:22:18 package manager which will also use on
- 00:22:20 your system simply walk through that and
- 00:22:24 wait for it is set up to finish once it
- 00:22:27 is finished we can continue with the
- 00:22:31 next step off the set up already now the
- 00:22:33 next step is to install the native
- 00:22:35 script CLI and there we will already use
- 00:22:37 that NPM command which no J's unlocked
- 00:22:40 for us for dad open your normal terminal
- 00:22:43 or a bash and in there
- 00:22:45 you can simply run npm install – g
- 00:22:48 native script but this might fail and if
- 00:22:51 it fails due to a permission error at
- 00:22:54 sudo in front of this you're then
- 00:22:56 prompted to enter your password but
- 00:22:59 after entering this it should install
- 00:23:00 native script so d native script CLI
- 00:23:03 it's globally on your system
- 00:23:05 successfully now don't worry if you're
- 00:23:07 getting an error in between as long as
- 00:23:10 it finishes successfully without an
- 00:23:12 error so without quitting with an error
- 00:23:14 which you can see by the fact that it
- 00:23:17 shows you what it installed here and
- 00:23:19 mentions something like updated a number
- 00:23:22 of packages if it finishes like this it
- 00:23:24 was successful and you can continue now
- 00:23:27 to continue we will not use the
- 00:23:29 playground app but instead will now use
- 00:23:31 the full setup to setup the full
- 00:23:33 development environment we need on Mac
- 00:23:36 OS now if you're facing any
- 00:23:39 shoes during the next step definitely
- 00:23:42 dive into the advanced setup guide for
- 00:23:44 mac OS or linux and there you will find
- 00:23:47 a step by step guide of all the steps
- 00:23:49 you need to execute and you can do a lot
- 00:23:52 of copy and pasting here to set up all
- 00:23:54 the things you need on your environment
- 00:23:56 on your machine to develop iOS and
- 00:23:59 Android apps there now will not use this
- 00:24:02 as a default though because the native
- 00:24:04 script team gives us utility scripts
- 00:24:06 which you find here that you can run
- 00:24:08 which will do all these setup steps for
- 00:24:10 you so only if Dad fails try it manually
- 00:24:13 so choose your system here I'm using Mac
- 00:24:16 OS and copy that here and then simply
- 00:24:20 execute this in your normal terminal now
- 00:24:23 important before you hit Enter
- 00:24:25 make sure to add sudo in front of this
- 00:24:27 to give it the right access permissions
- 00:24:30 and not get any permission denied errors
- 00:24:32 you might be required to enter your
- 00:24:34 password again now this will ask you a
- 00:24:37 couple of questions and the first one is
- 00:24:39 whether you have Xcode installed
- 00:24:41 Xcode is the ited native app development
- 00:24:44 IDE offered by Apple for building iOS
- 00:24:47 apps and you need to have that installed
- 00:24:50 the script can't install it for you
- 00:24:52 instead you can install it from the
- 00:24:54 normal app store so make sure to open
- 00:24:57 that app store and search for Xcode
- 00:24:59 there and install it in case you don't
- 00:25:01 have it installed yet I do but if you
- 00:25:03 don't have it yet install it here it is
- 00:25:05 free so thereafter in the terminal type
- 00:25:09 yes here and if you type no it will quit
- 00:25:11 so you need to have that installed now
- 00:25:14 thereafter you need to agree here you
- 00:25:16 can scroll down by hitting space and
- 00:25:18 then simply type agree and now you'll be
- 00:25:21 asked a couple of other questions
- 00:25:22 basically you should answer all of them
- 00:25:25 with Y which stands for yes like for
- 00:25:27 example if you need homebrew now all
- 00:25:29 these different tools which are getting
- 00:25:31 installed are different pieces of
- 00:25:33 software that in the end all work
- 00:25:35 together behind the scenes for
- 00:25:37 installing all the penalties you need
- 00:25:39 for your development and then for the
- 00:25:42 development itself so for building your
- 00:25:44 application for the different platforms
- 00:25:47 so for Android and iOS for optimizing
- 00:25:50 these apps and so on that is what we
- 00:25:52 need this setup
- 00:25:53 for now it will take a while this whole
- 00:25:56 setup will take a while and I will fast
- 00:25:58 forward whenever to whenever I'm getting
- 00:26:00 ass again like here if we need chrome I
- 00:26:03 don't need it because I have it already
- 00:26:04 if you don't please add it because it
- 00:26:07 will help us with debugging at some
- 00:26:09 point I will choose n4 now here because
- 00:26:12 though because I have it now I want to
- 00:26:14 install the Java development kit version
- 00:26:16 8 and the worsen 8 is important if you
- 00:26:18 have version 10 still install version 8
- 00:26:21 you need that now if I want to install
- 00:26:24 Android SDK is the next question I will
- 00:26:26 and I will type a here to answer yes for
- 00:26:29 all subsequent questions as well so that
- 00:26:31 I'm not prompted every time and now it
- 00:26:34 will install a bunch of stuff and this
- 00:26:36 can take very long so I will now simply
- 00:26:38 skip to the point where this is finished
- 00:26:41 but don't worry if this takes a couple
- 00:26:43 of minutes this is totally normal it
- 00:26:46 downloads a lot of things and installs
- 00:26:47 all these things so let me now fast
- 00:26:50 forward to when I'm done now I'm now ask
- 00:26:53 whoever I want to install the Android
- 00:26:54 emulator system image I will choose yes
- 00:26:56 and the same for hardware acceleration
- 00:26:59 now we need dad to spin up Foreman
- 00:27:03 Android emulators because obviously on
- 00:27:05 Mac OS thankfully we can do both iOS and
- 00:27:09 Android development on Windows and Linux
- 00:27:11 only Android development is possible so
- 00:27:14 you still need to the Android setup
- 00:27:15 there but not Xcode ends on now I'm
- 00:27:19 getting asked whether I want to create
- 00:27:20 an Android emulator and I'll choose yes
- 00:27:22 here too though you could do that
- 00:27:24 through Android studio as well and now
- 00:27:27 with that we're done here now we can
- 00:27:30 execute this command to make sure all
- 00:27:32 these changes which were done behind the
- 00:27:34 scenes have an effect in the terminal as
- 00:27:36 well and the next step is that we should
- 00:27:38 run T and s dr. you also find that step
- 00:27:42 and your official Doc's here under
- 00:27:43 verify it D setup this will now analyze
- 00:27:46 your system and highlight any issues
- 00:27:48 that might still exist if any and
- 00:27:50 therefore tell you if you are ready to
- 00:27:52 bold your first native script project
- 00:27:54 now you should see a bunch of green
- 00:27:56 check marks here if you don't go back to
- 00:27:59 the installation and have a look at this
- 00:28:01 advanced setup guide for Mac OS or Linux
- 00:28:03 and walk through that to make sure that
- 00:28:06 you don't miss
- 00:28:07 step or that you can manually fix any
- 00:28:09 step that is marked here now one thing I
- 00:28:12 will also do is I will install the
- 00:28:14 Android studio which is the official
- 00:28:17 development IDE for Android apps
- 00:28:19 theoretically we don't need that will
- 00:28:21 not use it for writing code but this
- 00:28:24 will make launching emulators easier so
- 00:28:27 I will simply agree here and then
- 00:28:29 download Android studio for Mac here
- 00:28:31 which is quite a big download but once
- 00:28:34 this is done I will walk through the
- 00:28:35 installer here to to install Android
- 00:28:38 studio on this system again because it
- 00:28:41 will help me launch an emulator
- 00:28:43 thereafter and gives us a nice user
- 00:28:46 interface for doing so and whilst as its
- 00:28:49 downloading we can already install the
- 00:28:51 IDE we will actually use for dad you can
- 00:28:54 search for Visual Studio code that is a
- 00:28:57 free IDE which you can install from code
- 00:28:59 that Visual Studio comm which has great
- 00:29:02 native script support and is generally a
- 00:29:04 great development environment and
- 00:29:06 therefore will use that you can simply
- 00:29:08 download it here and then walk through
- 00:29:10 the installer that gives you it's a
- 00:29:12 straightforward installer installing
- 00:29:14 that ID on your system now I already
- 00:29:17 have that so I will not walk through it
- 00:29:18 in detail here but you'll simply install
- 00:29:20 it and we'll launch it later so you
- 00:29:22 don't need to launch it right now we'll
- 00:29:24 launch it later but this will then help
- 00:29:26 us work with native script and write our
- 00:29:29 code now the download did finish here so
- 00:29:32 let me now run this installer and go
- 00:29:34 through it on Mac OS it's really simple
- 00:29:37 you just drag that into your
- 00:29:38 Applications folder and we'll use
- 00:29:40 Android studio a little bit later where
- 00:29:42 I will show you how you can configure
- 00:29:44 different emulators there again you
- 00:29:47 wouldn't need it the script we executed
- 00:29:48 gave us everything to launch an emulator
- 00:29:51 automatically and so on but this will
- 00:29:53 give us a graphical user interface for
- 00:29:55 configuring different emulators as well
- 00:29:58 now with all that setup finished we can
- 00:30:02 go back to the command line here and
- 00:30:03 navigate into a folder with the CD
- 00:30:06 command where you want to create your
- 00:30:08 native script projects where you want to
- 00:30:11 store all the code files and so on
- 00:30:13 now I navigate it into such a folder
- 00:30:16 here and then you can simply run TNS
- 00:30:18 create which is a command that is now
- 00:30:20 available
- 00:30:21 which uses the native script seal eye
- 00:30:23 and first you have to choose a name I
- 00:30:25 will use NS ng course here because it's
- 00:30:28 a native script angular course I guess
- 00:30:30 and you're then asked what style of
- 00:30:32 native script you want to use now it's a
- 00:30:34 native script angular course so we'll
- 00:30:36 choose angular here and let's go with
- 00:30:38 that
- 00:30:38 starting HelloWorld template you could
- 00:30:41 use different templates but we'll add
- 00:30:42 all these fancy features manually so
- 00:30:45 that sounds like a good template to
- 00:30:46 start now this will generate a new
- 00:30:49 native script project for you create all
- 00:30:51 these files you need and store them in a
- 00:30:53 folder in that location you picked here
- 00:30:56 and once it is done it will also show us
- 00:30:59 the command we could execute to run this
- 00:31:02 so here we are now we can navigate into
- 00:31:05 that created folder and will not use TNS
- 00:31:08 preview you could and you would get a
- 00:31:10 barcode you can scan to use your preview
- 00:31:12 app but I will use TNS run and now here
- 00:31:16 on Mac OS you can choose between iOS or
- 00:31:18 Android both should wear work on Linux
- 00:31:21 and Windows you will only be able to
- 00:31:24 work with Android so I will run an iOS
- 00:31:26 simulator here and I will add – – bundle
- 00:31:31 and the future this might not be
- 00:31:32 required anymore but right now whilst it
- 00:31:34 will work without that this gives you
- 00:31:36 additional optimizations and is
- 00:31:37 therefore recommended now this will
- 00:31:40 search for a running iOS emulator or for
- 00:31:44 a connected iOS device and if it doesn't
- 00:31:46 find one it should spin up a new
- 00:31:48 emulator for you so a new virtual device
- 00:31:51 on your machine automatically once it
- 00:31:54 did that it will actually build this
- 00:31:56 demo project which is a fully functional
- 00:31:58 basic project you get out of the box and
- 00:32:00 run it on that emulator so that you have
- 00:32:03 something to play around with right from
- 00:32:05 the start
- 00:32:05 now this can take a while um as you see
- 00:32:08 it's still searching because this hasn't
- 00:32:10 booted up yet and once this has finished
- 00:32:13 booting it will start the build process
- 00:32:15 now important the first time you run
- 00:32:17 this this can take longer subsequent
- 00:32:20 build processes will be faster now
- 00:32:22 important you want to keep that TNS run
- 00:32:24 iOS or Android process running as long
- 00:32:27 as you are working on the code because
- 00:32:29 it will watch your code and
- 00:32:30 automatically detect changes you saved
- 00:32:32 and then read the
- 00:32:34 the project and reinstall it on the
- 00:32:36 device for you which speeds up your
- 00:32:37 development experience so keep that
- 00:32:40 process running as long as you're
- 00:32:41 working on the code thereafter once
- 00:32:43 you're done you can hit ctrl C to quit
- 00:32:46 that process and that's the same on
- 00:32:48 Windows by the way now here it's done
- 00:32:50 building and it's installing the app on
- 00:32:52 the device here you can see it getting
- 00:32:54 installed here it starts and this is our
- 00:32:59 first little demo app which we can use
- 00:33:01 which we get out of the box nothing too
- 00:33:04 fancy but it works and that is the app
- 00:33:06 we'll build up on now for completeness
- 00:33:09 sake let me open a new terminal window
- 00:33:11 the old one is still running in a
- 00:33:13 separate window the old process but now
- 00:33:15 here navigated into that same folder
- 00:33:18 I'll run Tina's Android – – bundle –
- 00:33:21 also search for running Android
- 00:33:23 emulators or connected devices and if
- 00:33:25 nan are found a new emulator will be
- 00:33:28 spun up here and then it will also build
- 00:33:31 the project for Android and install it
- 00:33:33 on that emulator so here it is launching
- 00:33:37 an emulator for me and the emulator it's
- 00:33:40 launching for you might be a different
- 00:33:41 one and this is one I used before
- 00:33:43 because I already had Android studio
- 00:33:46 installed so don't worry if yours looks
- 00:33:48 a bit different in the end it will be an
- 00:33:50 Android emulator with the latest version
- 00:33:53 of Android running on it and once this
- 00:33:55 is done booting up it will also build
- 00:33:57 the project for Android and as you see
- 00:33:59 you can't even have both processes iOS
- 00:34:02 and Android up and running at the same
- 00:34:05 time as long as your system supports
- 00:34:07 dead and you're not facing performance
- 00:34:09 issues and therefore you can preview the
- 00:34:11 app on both devices at the same time and
- 00:34:13 that is also something I'll do
- 00:34:14 throughout the course so that we can
- 00:34:16 always see it on both types of operating
- 00:34:18 systems now here it's still booting up
- 00:34:21 but soon enough it should be done and
- 00:34:23 should be starting the Android build
- 00:34:25 process now as with iOS that first run
- 00:34:29 of the build process can take a bit
- 00:34:30 longer
- 00:34:31 subsequent rebuilds will be much faster
- 00:34:34 now it's done building here and it's now
- 00:34:37 installing it on the emulator and
- 00:34:39 therefore there it will start
- 00:34:42 momentarily
- 00:34:44 here it is and thereafter you'll also
- 00:34:47 have the application running on your
- 00:34:49 Android emulator this starting
- 00:34:51 application here at least now this is
- 00:34:55 nothing too fancy but you can navigate
- 00:34:57 around here on the right you got your
- 00:34:58 physical buttons by the way the back
- 00:35:00 button the home button and the task
- 00:35:01 switcher and feel free to play around
- 00:35:04 with it a bit not too fancy obviously
- 00:35:07 will do way more in this course but this
- 00:35:09 is our finished setup regarding building
- 00:35:12 the app and seeing the app now for
- 00:35:14 working on the code we did install
- 00:35:16 whistles do you code if you remember so
- 00:35:18 start this application now and this
- 00:35:21 should look something like this you
- 00:35:23 might have an extra sidebar when you
- 00:35:24 launch it for the first time but in the
- 00:35:27 end it should look something like this
- 00:35:28 and you can open a folder here or from
- 00:35:31 file open folder and there you want to
- 00:35:34 open that folder you just created with
- 00:35:36 d2 native script CLI so in my case that
- 00:35:39 is the NS ng course folder here now if
- 00:35:43 you hit open here you open your project
- 00:35:46 in Visual Studio code and this is now
- 00:35:49 the setup we'll use for the rest of the
- 00:35:51 course this is now how we will work on
- 00:35:53 our code here in the source folder
- 00:35:55 mainly dad is where all the typescript
- 00:35:57 and angular code will live now just a
- 00:36:00 couple of extensions you should have
- 00:36:02 here to get a similar view to what I
- 00:36:04 have here and a similar behavior you can
- 00:36:07 go to view extensions here or use that
- 00:36:09 shortcut to open the extensions menu and
- 00:36:11 there one thing which is totally
- 00:36:14 optional our material icons you can
- 00:36:17 search for material icon and then
- 00:36:19 install the material icon theme I
- 00:36:21 already have it installed and that just
- 00:36:23 changes some file icons but if you want
- 00:36:26 to have the same file icons as I do well
- 00:36:28 you can install this not optional but
- 00:36:31 absolutely recommend it is the native
- 00:36:33 script extension which I also already
- 00:36:36 have installed but you should install
- 00:36:37 this it will help you with debugging and
- 00:36:40 also give you better Auto completion and
- 00:36:42 general IDE support and for angular
- 00:36:45 development I recommend using the
- 00:36:47 angular essentials package this one here
- 00:36:51 but John Papa I also got this installed
- 00:36:54 already this comprises a couple of
- 00:36:56 extensions which help with a
- 00:36:58 development and simply make debt easier
- 00:37:01 now with these free extensions installed
- 00:37:03 you can go back to that Explorer view
- 00:37:07 here and then you got everything set up
- 00:37:09 as I do in case you don't have that the
- 00:37:12 dark look and you like to have it you
- 00:37:14 can hit command shift P and simply go to
- 00:37:17 color theme and choose the dark
- 00:37:19 blaspheme here and that is the theme I'm
- 00:37:21 using but with that we're all set to
- 00:37:24 continue in the next lecture we'll do
- 00:37:26 the setup on Windows and you can
- 00:37:28 therefore skip that if you're not using
- 00:37:29 Windows and then we're pretty much done
- 00:37:32 to get started writing some code
- 00:37:38 so now that we set everything up on Mac
- 00:37:41 let's all do it on Windows obviously you
- 00:37:43 can skip this window if you're not
- 00:37:45 developing on Windows so on Windows we
- 00:37:48 also want to install node.js and we do
- 00:37:51 that from node.js ORAC just as we did it
- 00:37:54 on a Mac of course generally the
- 00:37:56 installation process for dad will be
- 00:37:58 exactly the same so basically on noce
- 00:38:01 historic we download the LTS version
- 00:38:03 this one and after its downloaded you
- 00:38:06 simply walk through dead node.js
- 00:38:07 installer to install it on your system
- 00:38:10 and you can basically just follow
- 00:38:12 through all these paths and it installed
- 00:38:15 thereafter now once that is installed we
- 00:38:20 finished the first step here and we can
- 00:38:22 confirm that it is installed by starting
- 00:38:25 your a normal command prompt and their
- 00:38:27 type note and if this does not throw an
- 00:38:30 error it succeeded and press ctrl C
- 00:38:33 thereafter twice to exit out of this
- 00:38:35 note input mode which we won't need here
- 00:38:36 now we can continue with our setup so
- 00:38:39 the next step now is that we install the
- 00:38:41 native script C line windows T with the
- 00:38:43 NPM install – G native script command so
- 00:38:46 NPM install – G native script is to
- 00:38:50 command and this will now install this
- 00:38:51 native script seal I globally on our
- 00:38:54 machine so that we can then create
- 00:38:56 projects anywhere on our machine now
- 00:39:00 let's wait for that to finish when
- 00:39:02 prompted for whether you want to share
- 00:39:05 statistics about your usage you can
- 00:39:07 choose wherever you want to do that or
- 00:39:09 not you can also enable command line
- 00:39:11 completion on certain terminals by
- 00:39:13 pressing yes there when asked and you
- 00:39:17 can also here opt into a newsletter
- 00:39:21 basically and you can just hit enter
- 00:39:23 without entering anything to not do that
- 00:39:26 now with that the CLI is installed and
- 00:39:29 as a next step we now could use the
- 00:39:33 playground app on our device and use the
- 00:39:37 cloud playground but we'll now dive into
- 00:39:39 the full setup for Windows now as with
- 00:39:43 Mac OS in case you watch that video to
- 00:39:45 you if you're facing any issues during
- 00:39:47 that setup check that advanced setup
- 00:39:49 windows link here we
- 00:39:51 will list all the setup steps one by one
- 00:39:54 and you can follow through these here
- 00:39:56 mostly with copy and paste if you want
- 00:39:59 to do that manually
- 00:40:00 now hopefully and as a default you
- 00:40:04 should not need to go through that
- 00:40:06 though because you can use this script
- 00:40:09 prepared by the native script team which
- 00:40:12 will set up everything for you
- 00:40:14 automatically so you can clip click that
- 00:40:16 copy button here and then go back to
- 00:40:20 your command prompt but not your normal
- 00:40:22 one but instead open your windows menu
- 00:40:26 and then right-click on your command
- 00:40:28 prompt and choose run as administrator
- 00:40:31 now with that command prompt here opened
- 00:40:33 an administrator mode paste in that
- 00:40:36 command you can copy here and hit enter
- 00:40:40 and this will now download this script
- 00:40:44 from this address you are seeing here
- 00:40:46 for you and execute it for you and it
- 00:40:48 will ask you a couple of questions
- 00:40:49 whilst it does that now as you see this
- 00:40:52 first question is basically something we
- 00:40:54 have to answer it yes since it is
- 00:40:55 required for the rest of the script so
- 00:40:57 let's enter why it hit and hit enter and
- 00:40:59 now this will download a bunch of stuff
- 00:41:01 and stahl it and we'll walk you through
- 00:41:03 several steps that you need to go
- 00:41:05 through to make sure that you can
- 00:41:07 basically start developing with native
- 00:41:09 script and native apps in general on
- 00:41:12 your device now the next question is
- 00:41:15 where ever you want to install Google
- 00:41:16 Chrome now this will be required for
- 00:41:18 some debugging so you should have it
- 00:41:21 installed I already do so I will type
- 00:41:23 and Forno here because I got it already
- 00:41:25 I want to have the Java development kit
- 00:41:28 we need that so let's choose yes there
- 00:41:30 and it will automatically install that
- 00:41:32 kit in the right version which is
- 00:41:34 version 8 as of now now I may ask
- 00:41:37 whether I want to run another script
- 00:41:38 here and I will choose yes here since it
- 00:41:41 is also required to run and this will
- 00:41:44 now download T JDK and install that on
- 00:41:47 my machine as well now I'm getting asked
- 00:41:50 if I want install the Android SDK and
- 00:41:52 basically asked for all these questions
- 00:41:54 I'll choose yes here because we
- 00:41:55 definitely need that to develop Android
- 00:41:57 apps by the way be aware that some of
- 00:42:00 these downloads are pretty big and
- 00:42:01 therefore can take a while as can the
- 00:42:03 subsequent installation steps
- 00:42:05 after now this step can take very long
- 00:42:10 because it's installing a lot of stuff
- 00:42:11 so just let's wait for that to finish
- 00:42:15 now after this very long taking step I'm
- 00:42:18 asked if I want to install the Android
- 00:42:21 emulator and I will choose yes there
- 00:42:23 because we'll need that you create
- 00:42:26 virtual Android devices on which we can
- 00:42:28 test our application we can also test on
- 00:42:31 a real Android device but you might not
- 00:42:34 have one to begin with maybe you don't
- 00:42:36 want to use it for that or you do want
- 00:42:38 to use it and do you do have one but you
- 00:42:40 also want to test on different devices
- 00:42:43 smaller ones bigger ones older ones so
- 00:42:46 having an emulator makes a lot of sense
- 00:42:49 and this is now getting a set up for us
- 00:42:51 here now in between if you're getting
- 00:42:54 this failed to install hexam in silent
- 00:42:57 mode hacks em that is hardware
- 00:42:58 acceleration for the emulator and if
- 00:43:00 that fails as it does for me
- 00:43:02 you should get an installer when they
- 00:43:04 open up which you can now use to install
- 00:43:06 that hardware acceleration thing and
- 00:43:09 that is simply required to well make
- 00:43:11 your emulator more performant now let's
- 00:43:14 press any key to continue
- 00:43:16 and with dead we should be done now as
- 00:43:19 it says here this script has modified
- 00:43:21 your environment you need to log off and
- 00:43:23 log back on for changes to take effect
- 00:43:25 now I will do that but before we do that
- 00:43:28 lets actually also Google for Android
- 00:43:31 studio and download that because we
- 00:43:34 haven't installed that through that
- 00:43:35 script this is the official IDE provided
- 00:43:38 by Google for developing Android
- 00:43:40 applications and we will not use that
- 00:43:42 IDE in this course we'll use a different
- 00:43:45 one which is faster and actually better
- 00:43:47 for native script development but we
- 00:43:50 should still download and install that
- 00:43:52 because it will make certain things like
- 00:43:54 debugging or mainly launching emulators
- 00:43:57 and so on much easier so agree here and
- 00:44:00 download Android studio for Windows and
- 00:44:02 that is quite a big download it's one
- 00:44:04 gigabyte almost so let's now wait for a
- 00:44:07 dad to finish and walk through dad
- 00:44:08 installer together too before we then
- 00:44:11 log off and restart our system for all
- 00:44:14 changes to have an effect
- 00:44:15 now with the download finished execute
- 00:44:18 the downloaded file
- 00:44:19 and this should fire up an installer for
- 00:44:22 Android studio and in that installer
- 00:44:25 let's go through it now here regarding
- 00:44:28 these components we could install it but
- 00:44:31 we should already have that so let's
- 00:44:32 just install Android studio you can pick
- 00:44:34 any location you want of course and hit
- 00:44:37 install here and now this again can take
- 00:44:40 a while but it will now install that IDE
- 00:44:42 and all the related tools on your system
- 00:44:46 and now with this finished you don't
- 00:44:50 have to start it you can just finish
- 00:44:52 like this and now i will restart my
- 00:44:54 system basically and then continue with
- 00:44:56 the rest of the setup and create our
- 00:44:58 first project with all these installed
- 00:45:00 tools here so I did restart my system
- 00:45:04 now and we walked through the
- 00:45:06 installation step with the script here
- 00:45:08 if you faced any issues try to step by
- 00:45:10 step guide you find your tube and now
- 00:45:13 with that all setup we can verify our
- 00:45:15 setup with the command mentioned here
- 00:45:17 with TNS doctor so let's now run this
- 00:45:21 command in the command prompt anywhere
- 00:45:24 on your machine TNS doctor and this
- 00:45:28 shirt now give you hopefully the
- 00:45:30 information that everything is set up
- 00:45:32 correctly so let's gather the
- 00:45:34 information here and that is looking
- 00:45:36 good you should see a bunch of green
- 00:45:38 checkmarks here if you don't see what
- 00:45:41 went wrong there and try the manual
- 00:45:44 steps I mentioned before here to make
- 00:45:46 sure you do add all these components
- 00:45:48 which are essentially required here now
- 00:45:51 with everything set up correctly we can
- 00:45:53 continue and we can now create our first
- 00:45:56 simple project just as we did it in the
- 00:45:58 Mac OS and Linux setup in the last video
- 00:46:01 now and for this we can actually go up
- 00:46:05 in the docs and here under seal I basics
- 00:46:08 you can learn how to create a project
- 00:46:10 but it's actually really simple what you
- 00:46:14 can do here is you can navigate into a
- 00:46:17 folder where you want to create your
- 00:46:19 project and that's really important
- 00:46:20 choose a folder where you want to have
- 00:46:22 your development projects you can
- 00:46:25 navigate around with the CD command you
- 00:46:26 can switch the folder with the drive
- 00:46:28 name and then I : so here I'll stay on C
- 00:46:31 and I will simply do that on the day
- 00:46:33 but you might of course have your
- 00:46:35 dedicated development folder and in the
- 00:46:37 place where you want to create your
- 00:46:38 project run T&S create and this will
- 00:46:41 give you an interactive wizard for
- 00:46:44 creating your project so first of all
- 00:46:45 you should choose your name and I will
- 00:46:47 name this NS ng for a native script
- 00:46:51 angular course then you are prompted for
- 00:46:55 which style of native script you want to
- 00:46:58 use and this is a native script an
- 00:46:59 angular course so we'll pick angular
- 00:47:01 here and we'll go with T hallo world
- 00:47:03 setup there and simply hit enter and now
- 00:47:06 this behind-the-scenes will create a new
- 00:47:08 folder for us in my case here on the
- 00:47:10 desktop since I chose that as my place
- 00:47:13 for running the TNS create command and
- 00:47:16 this folder will have our full native
- 00:47:19 script project inside of it now with
- 00:47:22 that all finished here we see some
- 00:47:25 commands you could run for while
- 00:47:27 launching our project but will not use
- 00:47:29 this preview app instead I will go in
- 00:47:32 there and I will use a different command
- 00:47:34 I will run TNS run Android – – bundle
- 00:47:38 now – – bundle might not be required in
- 00:47:41 the future anymore right now you should
- 00:47:43 run this to have additional
- 00:47:44 optimizations being used with this
- 00:47:47 command being executed it should try to
- 00:47:49 automatically launch an emulator an
- 00:47:52 Android emulator on your system in case
- 00:47:55 you have no connected Android device or
- 00:47:58 running Android emulator now important
- 00:48:02 iOS development is not possible on
- 00:48:04 Windows so you can't run an iOS emulator
- 00:48:08 here that will not work that is simply
- 00:48:10 not supported by Apple unfortunately now
- 00:48:13 here it did launch the emulator and now
- 00:48:15 it's building the app in the background
- 00:48:16 this starting app we get and once it's
- 00:48:18 done building it will automatically
- 00:48:20 launch it on that emulator here now that
- 00:48:23 first launch can take a while by the way
- 00:48:25 because it does a lot of initial setup
- 00:48:27 during that first launch subsequent
- 00:48:29 launches will be faster now here it
- 00:48:31 built the project successfully and then
- 00:48:33 launches it after installing it on the
- 00:48:35 device by the way if your firewall
- 00:48:38 should be asking you for access during
- 00:48:40 all that launching definitely granted to
- 00:48:42 it and here we got our first native
- 00:48:45 script app running on and
- 00:48:47 emulator and that is of course awesome
- 00:48:50 and a great first step here now
- 00:48:53 obviously we don't just want to see it
- 00:48:54 run we also want to be able to edit the
- 00:48:56 code so as a last step of this video
- 00:48:59 we'll set up our development environment
- 00:49:01 to make sure that we have all the setup
- 00:49:04 we need to well work on our app for that
- 00:49:07 I can only recommend using visual studio
- 00:49:08 code which is a free IDE for which an
- 00:49:11 official native script plug-in exists
- 00:49:13 which makes working with native script
- 00:49:15 really simple and fun now you can
- 00:49:18 download that from code visual studio
- 00:49:20 comm you can use it for all platforms
- 00:49:23 and once that download finished just as
- 00:49:27 always you simply walk through the
- 00:49:29 Installer that gives you pretty
- 00:49:32 straightforward there nothing special to
- 00:49:34 setup install it anywhere you want and
- 00:49:37 with it installed we can launch it right
- 00:49:39 away and now here in Visual Studio code
- 00:49:42 um I will actually not use that side bar
- 00:49:45 you can play around with these settings
- 00:49:47 and make sure it appears in the way you
- 00:49:49 want it to appear you like that to look
- 00:49:52 I will basically just open a folder here
- 00:49:56 you can also of course open a folder
- 00:49:58 with file open folder and open that
- 00:50:01 folder which are just created which is
- 00:50:02 this NS ngi chords folder here select
- 00:50:06 the folder and now you have your project
- 00:50:07 in your editor here now these are all
- 00:50:12 the files and folders with which will
- 00:50:14 work now to get great IDE support and
- 00:50:17 exactly the look I will have throughout
- 00:50:19 the rest of this course
- 00:50:20 regarding the files is on you should go
- 00:50:22 to this extensions area here on left or
- 00:50:25 under view extensions or with that
- 00:50:28 shortcut and then the extensions here I
- 00:50:30 will be using the material I can theme
- 00:50:32 which is 100% optional but I like that
- 00:50:35 look a lot so I will install that the
- 00:50:37 material I can theme here now again you
- 00:50:39 don't need that for native script
- 00:50:41 development just to get the same look as
- 00:50:42 I do but what you should install is here
- 00:50:45 native script search for that and
- 00:50:48 install this official plugin which will
- 00:50:50 help you with debugging and also with
- 00:50:52 auto completion and general IDE support
- 00:50:55 for native script and with that
- 00:50:57 installed all the search for angular
- 00:50:59 essentials which is a general angular
- 00:51:02 extension or a package of extensions
- 00:51:05 actually this one which is all to
- 00:51:07 install to speed up your angular
- 00:51:08 development in case you don't have that
- 00:51:10 already now with all these extensions
- 00:51:12 installed you can now hit reload here to
- 00:51:15 have them all be enabled and now you can
- 00:51:18 continue here activate that material
- 00:51:21 icon theme here to change your icons to
- 00:51:23 the way you'll see them in my course
- 00:51:24 here and you're now ready to continue
- 00:51:28 ready to work on angular and native
- 00:51:31 script and build amazing apps so let's
- 00:51:33 move on
- 00:51:37 so we learned how to set up our
- 00:51:40 application how to create a new one and
- 00:51:42 we get the whole development environment
- 00:51:44 set up to start working on our native
- 00:51:47 script apps now you learned how to
- 00:51:49 launch your app on both Android and iOS
- 00:51:53 even simultaneously if your machine
- 00:51:55 supports it but what if you actually
- 00:51:57 want to use a different device than the
- 00:51:59 one it chose for you what if you want to
- 00:52:01 use a iPhone X or a different Android
- 00:52:05 device well you can quit the emulators
- 00:52:08 which it started for you and you can
- 00:52:10 manually choose different ones let's
- 00:52:12 start with iOS but don't quit the video
- 00:52:16 because I'll show Android in a second
- 00:52:17 queue and open Xcode on Mac OS you can't
- 00:52:22 do that on Windows but on Mac OS you can
- 00:52:24 there choose open another project and
- 00:52:27 then navigate into the project folder
- 00:52:31 you created so in my case that's DNS ng
- 00:52:35 course folder in that NS ng course
- 00:52:38 folder choose the platforms folder and
- 00:52:40 then iOS and that is the folder you want
- 00:52:42 to open now this opens Xcode with your
- 00:52:46 iOS app folder in your project folder
- 00:52:50 and that indeed is inside of your code
- 00:52:53 here that folder it is it opens that
- 00:52:56 folder in Xcode now we will not write
- 00:52:58 our code here but here you can actually
- 00:53:01 choose different emulators different
- 00:53:04 virtual devices and you can also start
- 00:53:07 your application from inside here by
- 00:53:09 hitting that play button and this will
- 00:53:11 now start the app here on this device
- 00:53:15 and even if you dare after quit this
- 00:53:18 process here it will keep the emulator
- 00:53:20 up and running or it should at least and
- 00:53:22 you can therefore continue to use that
- 00:53:24 emulator even if you then use the TNS
- 00:53:27 run iOS command again so now it's
- 00:53:30 starting my iOS emulator here as you can
- 00:53:35 see it's the iPhone X we have two knotch
- 00:53:38 at the top here and it boots our
- 00:53:40 application there as well here it is you
- 00:53:44 can also quit this process here it keeps
- 00:53:47 the emulator up and running and you can
- 00:53:50 then go to your kernel
- 00:53:51 and rerun the TNS run iOS a bundle
- 00:53:54 command – – bumble and now it will
- 00:53:56 automatically again search for emulators
- 00:53:58 find you're running one and use dad to
- 00:54:01 launch the app on it so that's a
- 00:54:03 convenient and easy way of switching the
- 00:54:05 emulator so let's quickly see if that
- 00:54:09 works it's searching for devices and it
- 00:54:13 did find my device here and therefore
- 00:54:15 now rebuilds the app and will then
- 00:54:17 launch it on that device as I mentioned
- 00:54:20 here it is getting installed and here it
- 00:54:24 is launching for us that's the same app
- 00:54:27 as before but now running on our iPhone
- 00:54:29 X so that is how you can use Xcode to
- 00:54:34 run your app on a different emulator
- 00:54:36 as a side note here when you click on
- 00:54:39 your project name you might want to fix
- 00:54:41 any team issues you see here I actually
- 00:54:44 got one and it should work without that
- 00:54:45 but if you're facing issues make sure
- 00:54:47 you choose a development team login with
- 00:54:50 your Apple ID and resolve any errors
- 00:54:53 that might show you here though
- 00:54:54 important you will not need a paid apple
- 00:54:57 developer account for building iPhone
- 00:54:59 apps right now
- 00:55:00 only when you later want to deploy them
- 00:55:01 so don't pay anything here just fix that
- 00:55:04 in case you get any errors related to
- 00:55:06 that now that is the iPhone what about
- 00:55:08 Android well we can start Android studio
- 00:55:11 because we did install it after all and
- 00:55:13 when this starts for the very first time
- 00:55:16 it might actually walk you through a
- 00:55:19 setup wizard I will use my previous
- 00:55:23 settings though because I already had it
- 00:55:26 installed and you don't need to install
- 00:55:27 anything in it wizard because all the
- 00:55:29 SDKs and emulators all that stuff was
- 00:55:32 already installed so you can basically
- 00:55:34 skip all of that or install the latest
- 00:55:37 versions and so on but in general you
- 00:55:39 shouldn't need to install anything there
- 00:55:41 now once that completed you should see
- 00:55:44 something like this or maybe the hole ID
- 00:55:46 you already open and forced you to
- 00:55:47 create a new project anyway you should
- 00:55:49 be able to use file open or here open an
- 00:55:52 existing Android studio project and then
- 00:55:55 just as with Xcode go into the project
- 00:55:58 folder of the Nazca project into
- 00:56:00 platforms and there now choose the
- 00:56:02 Android folder and this will now
- 00:56:05 that project inside of Android studio
- 00:56:07 now just as with Xcode will not do any
- 00:56:10 development here that's not the plan but
- 00:56:13 just as with Xcode we are able to launch
- 00:56:16 our Android project why Xcode and we can
- 00:56:21 also set up a different emulator in here
- 00:56:23 now let's wait for this initialization
- 00:56:25 process to finish here real quick
- 00:56:27 because you'll not be able to do
- 00:56:29 anything before that is done you can
- 00:56:32 ignore any warnings you might be getting
- 00:56:33 here once this is done you can go to
- 00:56:35 tools AVD manager with just a manager
- 00:56:38 for setting up emulators in the end and
- 00:56:40 open that tool and here I already got a
- 00:56:44 bunch of virtual devices you can add a
- 00:56:46 new one with this plus button in the
- 00:56:48 bottom left corner and there you can
- 00:56:51 configure any virtual device you want
- 00:56:53 based on any pluie print you want let's
- 00:56:55 say a pixel – here for example click
- 00:56:58 Next then choose an Android version I'll
- 00:57:03 actually download the latest 128 here
- 00:57:06 even but you can take the default one it
- 00:57:10 selects and definitely use that in case
- 00:57:11 you're facing any problems during
- 00:57:14 development for me it will quickly
- 00:57:16 download that SDK version in general
- 00:57:19 using these cutting-edge versions so the
- 00:57:22 versions which are not stable or final
- 00:57:25 yet which is not recommended because
- 00:57:27 this one as you can see is recommended
- 00:57:29 you should take these especially facing
- 00:57:32 issues using the cutting-edge ones the
- 00:57:34 latest ones can definitely lead to
- 00:57:36 issues which you can then easily solve
- 00:57:38 by falling back to an emulator which
- 00:57:40 uses the stable Android API level
- 00:57:47 now you can experiment with these
- 00:57:49 settings and generally configure your
- 00:57:51 virtual device just as you want it and
- 00:57:53 then finish this and launch it with this
- 00:57:55 play button here now this launch is just
- 00:57:57 the emulator not the app yet now here it
- 00:58:01 is and now you can again go back to your
- 00:58:05 terminal and rerun TNS run Android
- 00:58:08 bundle it will again search for an
- 00:58:10 emulator but since you now have one up
- 00:58:12 and running and that is exactly the one
- 00:58:14 you launch therefore you configure in
- 00:58:16 the way you want it we'll take that
- 00:58:18 emulator and build the app and install
- 00:58:20 the app on this emulator so here it
- 00:58:23 already started that build process
- 00:58:27 and here is the app running on our
- 00:58:30 custom emulator so that is how you can
- 00:58:34 switch emulators you can also connect
- 00:58:36 your real devices and quit any emulators
- 00:58:38 to force the run process to TNS run
- 00:58:41 process to build the app and ship it to
- 00:58:43 your real device and test it there you
- 00:58:45 just need to make sure that when you
- 00:58:47 connect a real iPhone you trust your
- 00:58:50 computer when asked on the iPhone and
- 00:58:52 for an Android device when you connect
- 00:58:54 it you need to enable USB debugging more
- 00:58:57 information can be found in the lecture
- 00:58:59 after this one so with that let's
- 00:59:02 continue and in the next section let's
- 00:59:04 finally get our hands dirty and write
- 00:59:06 some code
- 00:59:11 now maybe you also want to run your
- 00:59:14 project on a real phone and not just on
- 00:59:16 a simulator now for that let me show you
- 00:59:19 how this works and for iOS you should
- 00:59:23 open your platform folder in your
- 00:59:26 project with Xcode basically what I
- 00:59:28 already showed you in the last video for
- 00:59:30 the emulators now there select your
- 00:59:32 project here in the left corner top left
- 00:59:35 corner and under general choose a team
- 00:59:38 and if you don't have one add an account
- 00:59:40 you need an Apple ID for that and you
- 00:59:42 also will need to sign up for an Apple
- 00:59:45 Developer account there is a paid and a
- 00:59:47 free version and for development the
- 00:59:49 free version is enough only for
- 00:59:51 deploying your app later down this
- 00:59:53 course you'll need a paid version so
- 00:59:55 here I will just choose the team I
- 00:59:57 already have which I can select there
- 00:59:59 and if you see any warnings or errors
- 01:00:02 down there next to provisioning profile
- 01:00:04 or signing certificate simply read them
- 01:00:08 and do as they tell you typically these
- 01:00:10 are steps like you need to agree to some
- 01:00:12 updated Terms of Use or here next to
- 01:00:16 signing certificate you might need to
- 01:00:18 add your iPhone now for this to add make
- 01:00:22 sure you connect your iPhone to your Mac
- 01:00:24 if you never did this before for
- 01:00:26 development and on your iPhone you
- 01:00:29 should then be prompted whether you want
- 01:00:32 you trust this computer or not and of
- 01:00:35 course you should choose yes there
- 01:00:37 please note this is only required if you
- 01:00:40 connected the first time to this Mac
- 01:00:41 subsequent connect should not ask you
- 01:00:44 again
- 01:00:45 now once your phone is connected and
- 01:00:47 this part here in the middle is resolved
- 01:00:50 without errors so you got a team
- 01:00:51 connected you got an Apple Developer
- 01:00:53 account you can choose your phone here
- 01:00:55 from this drop-down typically at the top
- 01:00:57 here is my iPhone and you should be able
- 01:00:59 to find your stare too now you can run
- 01:01:02 your app here with this play button and
- 01:01:05 alternatively of course you can still in
- 01:01:08 your project run TNS run iOS – – bundle
- 01:01:13 and if you have no running iOS emulator
- 01:01:16 and shut it down if you do have one this
- 01:01:19 should now automatically recognize your
- 01:01:21 iPhone and then build the app for that
- 01:01:25 and for this you will need to have this
- 01:01:26 development team thing resolved
- 01:01:28 otherwise this will not work so if
- 01:01:30 you've got any errors here regarding
- 01:01:32 your development team building for a
- 01:01:34 real device is not possible building for
- 01:01:36 an emulator is but not for a real device
- 01:01:41 and now with all that setup you should
- 01:01:44 have the app running on your device so
- 01:01:46 this is a live stream capturing from my
- 01:01:48 iPhone and this is the app running there
- 01:01:51 after adding this important setup here
- 01:01:54 in Xcode for the provisioning profile
- 01:01:57 and the signing certificate thereafter
- 01:01:59 you should be able to run it with TNS
- 01:02:01 run iOS dash dash bundle and now it's up
- 01:02:04 to you whether you want to develop on an
- 01:02:06 emulator or a real device typically an
- 01:02:09 emulator is is faster and you don't need
- 01:02:11 to have your device around all the time
- 01:02:14 and I will use an emulator for the rest
- 01:02:15 of the course but occasionally testing
- 01:02:18 the app on a real device makes a lot of
- 01:02:20 sense of course now running the app on
- 01:02:22 an iPhone is nice but what about Android
- 01:02:24 well for Android it's even simpler than
- 01:02:27 for iOS you don't need to worry about
- 01:02:29 any certificates or signing there for
- 01:02:33 Android just make sure that you connect
- 01:02:35 your Android phone to your machine with
- 01:02:38 a USB cable Wireless will not work and
- 01:02:42 turn on USB debugging in your developer
- 01:02:45 options on your device now where do you
- 01:02:48 find these developer options though in
- 01:02:50 your options towards the bottom there
- 01:02:53 should be your about phone section and
- 01:02:56 this is now a no-joke in that section
- 01:03:00 tap your build number seven times and
- 01:03:04 you'll see some help pop-up come up at
- 01:03:06 some point once you tap the Det often
- 01:03:08 enter your PIN
- 01:03:11 and you're now enabled as a developer on
- 01:03:15 your phone and you should have these
- 01:03:16 developer options available now any
- 01:03:19 developer options you should now turn on
- 01:03:26 USB debugging down there and with the
- 01:03:30 turned on and your device connected to
- 01:03:32 your machine in your project folder in a
- 01:03:35 terminal or a command prompt you can run
- 01:03:38 TNS run Android – – bundle just make
- 01:03:41 sure you don't have any emulators up and
- 01:03:44 running or your app might get installed
- 01:03:46 there but with no emulators up and
- 01:03:48 running and just your phone connected
- 01:03:50 this should now build the Android app
- 01:03:52 and ship it on to your Android phone
- 01:03:57 so let's wait for this build process to
- 01:04:00 finish here and here the app starts on
- 01:04:03 my phone and this is now the app running
- 01:04:05 on my Android device so this is how you
- 01:04:08 can run the app on both Android and
- 01:04:09 iPhone devices as I mentioned for
- 01:04:12 development I will use the emulators
- 01:04:14 here also because that is easier to
- 01:04:17 record for me but also because it can be
- 01:04:19 faster and you can run it there on
- 01:04:21 devices which you might not own but
- 01:04:23 occasionally having a look at your app
- 01:04:26 running on a real device obviously is
- 01:04:28 important to see if everything is
- 01:04:30 working correctly there too
- 01:04:36 now there is one thing about the project
- 01:04:39 setup that can actually be confusing
- 01:04:42 which is why I want to talk about it you
- 01:04:44 might be seeing a lot of JavaScript
- 01:04:46 files in your project like the app
- 01:04:48 routing module javascript file the app
- 01:04:51 component javascript file and if you
- 01:04:54 look into them this is clearly not the
- 01:04:56 code will work on and indeed we won't
- 01:04:58 the typescript setup just works such
- 01:05:02 that there is a extra build step so to
- 01:05:05 say which compiles your typescript code
- 01:05:08 to JavaScript code which is why you see
- 01:05:10 these extra files here now you don't see
- 01:05:13 this in a regular angular project
- 01:05:15 because the angular CLI does that behind
- 01:05:18 the scenes there here it happens well in
- 01:05:20 front of the scenes so to say you can
- 01:05:23 just ignore these javascript files you
- 01:05:25 can even delete them they will be
- 01:05:27 recreated automatically but you can also
- 01:05:30 just leave them be if you're using
- 01:05:31 source control there is no need to check
- 01:05:34 them in you can well as I said you can
- 01:05:37 or them treat them as if they were in
- 01:05:39 here you'll see them throughout the
- 01:05:40 course and therefore it looks like we'll
- 01:05:42 work with a lot of files
- 01:05:44 well actually keep in mind that for
- 01:05:47 every TS file there is an extra J's file
- 01:05:49 in which will never work
- 01:05:55 now with the project set up for this
- 01:05:59 course
- 01:05:59 let's now finally dive into native
- 01:06:02 script into its core basics and into how
- 01:06:05 we work with native script how we can
- 01:06:07 build native apps with native script and
- 01:06:10 angular and in this module we will dive
- 01:06:12 into the fundamentals you need to know
- 01:06:15 you need to be aware of the basics of
- 01:06:17 native script precisely we'll dive into
- 01:06:21 how the native script app actually
- 01:06:23 starts and kind of works behind the
- 01:06:26 scenes and with debt I specifically mean
- 01:06:28 how the angular app which is kind of
- 01:06:32 combined with native script starts and
- 01:06:34 works will thereafter have a look at the
- 01:06:38 core UI elements we can use to build our
- 01:06:41 user interface with native script
- 01:06:43 because as you will see will not use
- 01:06:46 HTML for that but something which is
- 01:06:48 very similar well then have a look at
- 01:06:51 how we can build our user interfaces
- 01:06:53 regarding the positioning of the items
- 01:06:56 on them so how we can make sure that
- 01:06:58 items are positioned correctly on our
- 01:07:01 app screens and we'll dive into a
- 01:07:03 concept called layouts for that and I
- 01:07:07 will introduce you to the different
- 01:07:08 layouts native script supports and how
- 01:07:11 we use these now it is of course nice if
- 01:07:14 we then have elements on the screen and
- 01:07:17 they are positioned correctly but we
- 01:07:19 also need to know how we can style them
- 01:07:21 to make them look good have the right
- 01:07:23 colors and so on and therefore styling
- 01:07:26 native script elements is another
- 01:07:27 important aspect we'll dive into in this
- 01:07:30 module and last but not least there will
- 01:07:33 be errors or there will be things which
- 01:07:36 you want to double check in your
- 01:07:38 applications and therefore we'll have a
- 01:07:40 look at debugging native script apps in
- 01:07:42 this module too so lots of ground to
- 01:07:45 cover let's dive in
- 01:07:51 this is the project we created in the
- 01:07:53 last course section and I haven't
- 01:07:56 changed anything there except for the
- 01:07:58 get ignore file which I add because I'll
- 01:08:00 use git for versioning by the way in
- 01:08:03 case you want to have that file you find
- 01:08:05 it attached to this lecture now I want
- 01:08:07 to spin up my virtual devices again and
- 01:08:10 I want to build and run my app for them
- 01:08:13 and I could do this in the terminal as I
- 01:08:15 did in the last section and it will
- 01:08:17 actually but I will use the terminal
- 01:08:19 which is integrated into Visual Studio
- 01:08:21 code and you can open that with the
- 01:08:24 terminal or here under terminal new
- 01:08:27 terminal and this will open that
- 01:08:29 terminal portion here at the bottom of
- 01:08:32 your screen and that will be your normal
- 01:08:34 system command prompt or terminal just
- 01:08:37 integrated into this IDE and already
- 01:08:39 navigated into this project folder so
- 01:08:42 any command you run here will be run in
- 01:08:45 the scope of this project now in there I
- 01:08:48 want to build my app for Android and run
- 01:08:51 it on an Android emulator and therefore
- 01:08:53 just as before we can run TNS run
- 01:08:56 Android – – bundle and of course I want
- 01:09:00 to do the same for iOS so in a new
- 01:09:02 terminal window which you can open here
- 01:09:04 with the plus I will run TNS run iOS – –
- 01:09:08 bundle and now I got two terminal
- 01:09:11 windows open here and I will keep them
- 01:09:15 both open and the processes in there
- 01:09:17 running because as I already mentioned
- 01:09:18 in the last section you should keep
- 01:09:21 these TNS run commands running as they
- 01:09:26 will watch your source code and
- 01:09:27 automatically rebuild and reinstall your
- 01:09:30 app whenever your code changes which of
- 01:09:34 course speeds up your development flow
- 01:09:36 so here the iOS emulator already opened
- 01:09:40 up and here I also got the Android
- 01:09:45 emulator which already loaded the app
- 01:09:47 even so these are the two applications
- 01:09:51 or the two emulators I will use for
- 01:09:52 testing here and I do have them both up
- 01:09:55 and running in my integrated terminal
- 01:09:57 windows here and that is basically it
- 01:10:00 for now now with that we can continue
- 01:10:03 working on the code but
- 01:10:05 first of all I want to explore how the
- 01:10:07 application actually starts and with
- 01:10:10 that I mean what happens in angular
- 01:10:12 because you might be aware of how an
- 01:10:15 angular application basically works that
- 01:10:18 you do embed a certain route element in
- 01:10:21 your index.html file and then you add
- 01:10:24 that your app module and angular
- 01:10:27 therefore bootstraps itself into that
- 01:10:30 place in the index.html file but we got
- 01:10:33 no index.html file here though we do
- 01:10:37 have a module so how does this work that
- 01:10:40 is what we'll explore in the next
- 01:10:42 lecture
- 01:10:46 so how does the angular native script
- 01:10:49 app actually start now it is important
- 01:10:53 to keep in mind that behind the scenes
- 01:10:55 native script essentially builds a real
- 01:10:58 native app a real native app package
- 01:11:01 which gets shipped to the device to the
- 01:11:03 emulator here and gets installed and
- 01:11:06 executed there and this native package
- 01:11:09 contains a lot of native code so Android
- 01:11:12 Java code for Android and Swift
- 01:11:15 objective-c code for iOS your
- 01:11:18 application logic the angular code you
- 01:11:22 write basically gets hosted in that
- 01:11:25 native package and gets executed there
- 01:11:27 on a JavaScript runtime check the first
- 01:11:30 module of this course again if you want
- 01:11:32 to learn more about these internals and
- 01:11:34 what's happening behind the scenes still
- 01:11:36 the question is how is our angular app
- 01:11:39 booted up then well we got this main T
- 01:11:42 as file in your source folder here and
- 01:11:44 that main TS file is your core entry
- 01:11:48 point for the application and that is
- 01:11:51 the same for Android for web projects
- 01:11:53 too if you remember now in here we have
- 01:11:56 code that actually also looks similar to
- 01:11:59 what you would see in an angular 4 web
- 01:12:01 project we do import something but we
- 01:12:03 don't import this from at angular
- 01:12:06 platform browser as we would do for
- 01:12:09 angular web project but we do import
- 01:12:11 this platform native script dynamic from
- 01:12:14 native script angular slash platform so
- 01:12:17 this is clearly coming from the native
- 01:12:19 script ecosystem from a package
- 01:12:21 distributed by the native script team we
- 01:12:25 then import our app module and at the
- 01:12:27 bottom we do call disco euro where we do
- 01:12:30 execute this code and again this looks
- 01:12:32 similar to what you would see in an
- 01:12:34 angular 4 web project but we are using
- 01:12:37 this bootstrap module method provided by
- 01:12:41 the object returned by platform native
- 01:12:43 script dynamic so essentially what we're
- 01:12:45 doing here is we are executing some
- 01:12:48 bootstrapping code provided by native
- 01:12:51 script and behind the scenes this will
- 01:12:53 actually mount our angular application
- 01:12:57 and the view is created there into
- 01:13:00 native app you could say or in our
- 01:13:02 native app it starts executing our
- 01:13:04 angular code it starts loading the right
- 01:13:07 user interfaces and starts rendering
- 01:13:09 them to the screen and all that heavy
- 01:13:11 lifting off communicating between the
- 01:13:14 native code and the native elements
- 01:13:16 which we create in our user interfaces
- 01:13:18 and our angular application logic that
- 01:13:21 heavy lifting is handled by native
- 01:13:23 script and therefore native script needs
- 01:13:25 to do that set up and that mounting
- 01:13:27 because it needs to establish all these
- 01:13:29 connections and so on behind the scenes
- 01:13:31 in a nutshell what we do though is we do
- 01:13:34 load our app module to start our app
- 01:13:38 just as we do it in a web app so let's
- 01:13:40 have a look at this app module then
- 01:13:42 which we find in this app dot module TS
- 01:13:44 file in the source app folder now in
- 01:13:48 there again we see a lot of code that
- 01:13:50 looks familiar to us most importantly we
- 01:13:52 got this exported app module with the at
- 01:13:55 ng module decorator and I do expect that
- 01:13:58 you have the basic angular knowledge to
- 01:14:00 understand what this exactly is and how
- 01:14:03 that works definitely dive in the
- 01:14:05 refresher module in this course if your
- 01:14:08 last time you worked with angular was a
- 01:14:11 couple of months ago so in the end this
- 01:14:13 is how we would create our app module in
- 01:14:16 angular and angular for web I should say
- 01:14:18 too we then do you have this bootstrap
- 01:14:22 array here where we define the root
- 01:14:24 component of our application just as we
- 01:14:27 do it in angular for web and this is a
- 01:14:29 normal angular component basically as I
- 01:14:32 will show you in a second in imports we
- 01:14:35 didn't see the first important
- 01:14:37 difference though we're not importing
- 01:14:39 the browser module here as we would do
- 01:14:42 in an angular for web project but
- 01:14:44 instead we import the native script
- 01:14:46 module and that is a module imported
- 01:14:49 from the native script angular package
- 01:14:51 so essentially again this is a package
- 01:14:54 at dependency imported from a package
- 01:14:57 distributed by the native script team
- 01:14:59 this again does setup a lot of crucial
- 01:15:02 stuff behind the scenes that allows our
- 01:15:05 application to run and allows our
- 01:15:07 angular code to function in the context
- 01:15:10 of this native app which has this
- 01:15:12 communicate
- 01:15:13 going on between native views real
- 01:15:16 native UI elements as you will learn
- 01:15:18 throughout this module and our
- 01:15:20 JavaScript angler logic now the app
- 01:15:23 routing module sets up the routing for
- 01:15:26 this application here and there again if
- 01:15:29 we dive into this we see that we use the
- 01:15:32 angular routing logic we register routes
- 01:15:34 just as we would do it in an angular 4
- 01:15:37 web project again with the exception
- 01:15:39 that we use specific modules the native
- 01:15:43 script or router module instead of the
- 01:15:45 default angular router module which we
- 01:15:48 would use in a web project and that is
- 01:15:51 related to how navigation works in a
- 01:15:53 native app it works differently than in
- 01:15:55 a web app and we'll dive deeply into
- 01:15:57 navigation and our different options in
- 01:15:59 a separate module in this course but
- 01:16:02 back to the app module for now we then
- 01:16:04 declare a bunch of components nothing
- 01:16:06 special here we got no providers and
- 01:16:08 then we get this interesting schema
- 01:16:10 thing here and this interesting schema
- 01:16:13 thing here is related to how we actually
- 01:16:15 create our templates our views of our
- 01:16:18 components and that is what I'll dive
- 01:16:20 into in the next lecture for this
- 01:16:23 lecture I want you to take away that the
- 01:16:25 general flow of starting your app is
- 01:16:27 similar to an angular for web app we got
- 01:16:30 the main TS file where we bootstrap the
- 01:16:32 app module where we have a regular
- 01:16:34 angular module but that the important
- 01:16:37 difference is to an angular for web app
- 01:16:39 are basically how you load the things
- 01:16:44 that you use certain packages provided
- 01:16:46 by native script like this one here or
- 01:16:48 the native script module to wire up your
- 01:16:51 angular logic and your angular app to
- 01:16:54 the native app which gets handled and
- 01:16:56 created by a native script behind the
- 01:16:58 scenes with dead let's explore how we
- 01:17:00 build our views and why this schema here
- 01:17:02 is important
- 01:17:07 we learned that our angular app
- 01:17:10 basically gets loaded and mounted by
- 01:17:12 native script with some specific code
- 01:17:15 that is provided by native script and
- 01:17:16 that therefore we have no index.html
- 01:17:19 file because the loading is done well by
- 01:17:21 native script behind the scenes and the
- 01:17:23 mounting into our views into what we see
- 01:17:25 on the screen is also handled by native
- 01:17:28 script and it does connect our angular
- 01:17:30 logic to our reduce speaking of these
- 01:17:33 views let's have a look at our app
- 01:17:35 component here this is a regular angular
- 01:17:38 component with the component decorator a
- 01:17:41 selector template URL and the only
- 01:17:43 special thing is this module ID here
- 01:17:45 well that is required by native script
- 01:17:48 and the native script build process you
- 01:17:50 could say to essentially connect your
- 01:17:53 templates and your angular logic
- 01:17:55 correctly and bundle everything
- 01:17:56 correctly so every component needs to
- 01:17:59 have this module ID and it always is
- 01:18:01 module ID which has a value of modulite
- 01:18:05 e and that essentially is a globally
- 01:18:07 available object injected by the native
- 01:18:10 script build process you could say
- 01:18:11 besides that it's a regular angular
- 01:18:13 component but it is interesting to look
- 01:18:17 at the component HTML file please note
- 01:18:20 that it is a file ending with dot HTML
- 01:18:23 but actually if we look into this file
- 01:18:25 we find no HTML in there well here we
- 01:18:29 got the page router outlet and please
- 01:18:32 note that this is not the normal router
- 01:18:34 outlet but again a specific directive
- 01:18:36 provided by a native script because
- 01:18:38 regarding routing we always use the
- 01:18:40 native script router module to cope for
- 01:18:43 how routing works and how navigation
- 01:18:45 works in native apps it's different it's
- 01:18:48 a stack based navigation different to
- 01:18:50 the web but more on that later but if we
- 01:18:52 have a look at another component like
- 01:18:54 here our item component this item detail
- 01:18:57 component to be precise if we have a
- 01:18:59 look at this HTML code then we see that
- 01:19:02 there is no HTML in there even though
- 01:19:04 the file ends with dot HTML well it ends
- 01:19:08 with dot HTML to basically be close to
- 01:19:11 how we would build an angular for web
- 01:19:13 project but this is not HTML this is
- 01:19:16 just XML and what we were using here are
- 01:19:18 a certain native script elements
- 01:19:21 which well native script provides to us
- 01:19:23 and which will be translated to their
- 01:19:26 native equivalents so the equivalents we
- 01:19:29 would use if we would create our app
- 01:19:31 with just Android and Java or just
- 01:19:34 Objective C and Swift
- 01:19:36 now what exactly do I mean with it and
- 01:19:39 what is generally up with this view here
- 01:19:42 how does a view in native could work in
- 01:19:45 native script we create our user
- 01:19:47 interfaces with components and so-called
- 01:19:49 layouts and components does not really
- 01:19:52 just mean angular components it also
- 01:19:55 includes these built-in elements you saw
- 01:19:58 a second ago so imagine this is what we
- 01:20:01 see in on the screen of our native
- 01:20:03 device now we could build this in the
- 01:20:06 web cube in native script as I mentioned
- 01:20:10 we have two important portions we have
- 01:20:11 to layout in part where we use built-in
- 01:20:15 layouts to control how the elements on
- 01:20:18 this screen are positioned and
- 01:20:20 distributed this would be an example for
- 01:20:24 a layout we have a row here where we
- 01:20:26 essentially controlled that bananas this
- 01:20:28 text here is on the far left and this
- 01:20:31 badge with the value of one is on the
- 01:20:34 far right the whole page content here is
- 01:20:38 all the wrapped in a layout you could
- 01:20:40 say and here we basically control that
- 01:20:42 this input field with the button next to
- 01:20:44 it is on the top of the page then we
- 01:20:47 have our rows of items and so on now
- 01:20:50 that positioning related part is
- 01:20:54 controlled with layout elements provided
- 01:20:57 by native script the input and output of
- 01:21:00 data is controlled with components you
- 01:21:02 could say so things like this button
- 01:21:04 here but also this badge so basically
- 01:21:07 the parts of the UI with which the user
- 01:21:10 interacts or which outputs information
- 01:21:13 to the user these parts are the
- 01:21:16 components or also the UI widgets or
- 01:21:19 elements provided by a native script and
- 01:21:22 you can also build your own angular
- 01:21:24 components on these layouts and built-in
- 01:21:27 components and if we go back to our HTML
- 01:21:32 code here we got a couple of layout
- 01:21:34 elements in there
- 01:21:35 indeed the flexbox layout here and then
- 01:21:38 this label here would be an example for
- 01:21:40 a UI widget provided by native script
- 01:21:43 and a label basically is your way or
- 01:21:47 your possibility for outputting text in
- 01:21:50 a native script application and in the
- 01:21:53 official native script Doc's if you go
- 01:21:55 to native script angular and click on UI
- 01:21:57 widgets you can actually find a list of
- 01:22:00 the UI widgets or elements or components
- 01:22:03 whatever you want to call them that are
- 01:22:04 built into native script and there you
- 01:22:07 see we got a bunch of them but it's not
- 01:22:09 that many as you maybe would have
- 01:22:10 expected but it turns out that with this
- 01:22:13 set of UI widgets we can basically build
- 01:22:16 any UI we want and as we do it here for
- 01:22:19 example in this starting setup you can
- 01:22:21 build your own angular components by
- 01:22:24 mixing and matching these built-in
- 01:22:26 widgets so here we get a component that
- 01:22:28 is one element of a list essentially
- 01:22:32 which in turn uses layouts and labels to
- 01:22:35 output text and position these different
- 01:22:37 text snippets correctly and speaking of
- 01:22:40 layouts you might have already seen this
- 01:22:42 layouts part here well there you see the
- 01:22:44 available layout elements here called
- 01:22:47 layout containers but I'll dive deeply
- 01:22:49 into them throughout this module so no
- 01:22:51 need to do this right now now what's the
- 01:22:53 idea behind these core widgets elements
- 01:22:58 or components as we might call them in
- 01:23:00 native script well let's have a look at
- 01:23:03 how we build user interfaces on the web
- 01:23:05 with HTML and then it really becomes
- 01:23:08 clear that there we use one element a
- 01:23:11 button for example and this HTML tag
- 01:23:14 which we use is the same no matter if
- 01:23:16 the web page gets loaded on Firefox or
- 01:23:18 Chrome or if it gets loaded on a Mac or
- 01:23:21 a Windows machine and the reason for
- 01:23:22 data is that hTML is standardized and
- 01:23:25 all browser's adhere to that now it's
- 01:23:28 different for native apps when we build
- 01:23:30 an app with native script then we have
- 01:23:33 to target Android and iOS and these are
- 01:23:35 independent platforms which have no user
- 01:23:38 interface standard they have their own
- 01:23:40 programming languages and they have
- 01:23:42 their own available user interface
- 01:23:44 elements therefore so where we use a
- 01:23:46 button on the web and it works every
- 01:23:48 on native script we kind of want to use
- 01:23:51 a globally available button and this is
- 01:23:53 how a button element would look like in
- 01:23:55 a script please notice the capital B all
- 01:23:57 the built-in widgets start with capital
- 01:23:59 characters and this gets translated to
- 01:24:03 the native equivalents so – for example
- 01:24:05 a widget dot view dot button that is the
- 01:24:07 element or the namespace of the element
- 01:24:11 in Android and a UI button on iOS and
- 01:24:14 the important part to keep in mind here
- 01:24:16 is that your user interfaces your
- 01:24:19 component templates really are compiled
- 01:24:22 qts native elements by native script you
- 01:24:26 don't have HTML wrapped in a native app
- 01:24:28 or anything like that you get compiled
- 01:24:31 user interfaces and therefore you need
- 01:24:33 one element with which you can work in
- 01:24:35 your native script code because you
- 01:24:37 don't want to write different interfaces
- 01:24:39 for the different platforms
- 01:24:40 that would defeat the purpose of using a
- 01:24:43 cross-platform solution like native
- 01:24:45 script but you want to get that native
- 01:24:47 output and therefore a native script
- 01:24:48 dusty compilation and therefore native
- 01:24:51 script needs to give you a list of
- 01:24:52 elements it knows to compile it knows
- 01:24:55 how to compile them and you can check
- 01:24:57 the official Doc's which I just showed
- 01:24:59 you to find a list of the available
- 01:25:01 elements regarding the web I'll dive
- 01:25:04 into this a little bit later on how we
- 01:25:06 can alter build a web page with our
- 01:25:09 native script project so here are the
- 01:25:11 official Doc's if you for example I have
- 01:25:13 a look at this button widget you not
- 01:25:15 only find instructions on how to use it
- 01:25:17 if you scroll down you also find to
- 01:25:20 which native components this gets
- 01:25:23 compiled and that is what I just showed
- 01:25:25 you on the slide so that is why we use
- 01:25:27 HTML because we use the native script
- 01:25:29 elements so that native script knows how
- 01:25:32 to compile them to the native
- 01:25:34 equivalents when it builds the apps for
- 01:25:37 Android and iOS and there was a lot of
- 01:25:40 talking about this but it is the
- 01:25:42 foundation of your native script app and
- 01:25:44 it is so important to understand this to
- 01:25:47 build user interfaces and to understand
- 01:25:49 what's going on behind the scenes here
- 01:25:56 now with that out of the way let's
- 01:25:59 finally write some code and for that
- 01:26:01 I'll delete that item folder I'll also
- 01:26:04 delete the app routing file because will
- 01:26:06 not use routing for now and in the app
- 01:26:08 module we therefore can delete the
- 01:26:12 declarations of items component and item
- 01:26:14 detail component the import of app
- 01:26:16 routing module here because I deleted
- 01:26:18 that and also the typescript import
- 01:26:21 statements here at the top let's get rid
- 01:26:24 of them since I deleted all these files
- 01:26:27 now we can get started and now to come
- 01:26:32 back to that no error schema by the way
- 01:26:34 we need this to be able to use all these
- 01:26:37 native script elements in our HTML files
- 01:26:40 otherwise angular would basically throw
- 01:26:42 an error because we're not using angular
- 01:26:46 components or normal HTML elements and
- 01:26:49 this basically disables angular's
- 01:26:52 template checks now with that let's
- 01:26:55 build our own component and also use
- 01:26:59 some native script elements now in this
- 01:27:02 course we want to build an app where we
- 01:27:04 can manage our personal monthly
- 01:27:07 challenge like take a walk every day and
- 01:27:10 to get started with that I will create a
- 01:27:13 new folder here to build my first own
- 01:27:15 component and I'll name this challenges
- 01:27:18 and in there I'll build a new subfolder
- 01:27:23 current challenge and why these two
- 01:27:25 folders because later we'll add more and
- 01:27:27 more components and I want to keep them
- 01:27:29 organized so in there I'll add my
- 01:27:31 current challenge dot component dot TS
- 01:27:35 file and my current challenge dot
- 01:27:39 component dot HTML file these two pieces
- 01:27:42 which should make up my component for
- 01:27:45 now and also a current challenge dot
- 01:27:48 component dot CSS file so that we can
- 01:27:51 add styling now let's start in the types
- 01:27:54 could file in the current challenge
- 01:27:55 component typescript file there we
- 01:27:57 create a component by exporting a class
- 01:28:00 which we named current challenge
- 01:28:02 component just as we would do it in an
- 01:28:04 angular for a web app and just in a
- 01:28:06 normal angular app and I don't really
- 01:28:09 like
- 01:28:09 differentiation because we have a normal
- 01:28:11 angular app here after all we can add at
- 01:28:15 component decorator or we have to add it
- 01:28:17 actually to tell angular how to well
- 01:28:20 what to do with this class and how to
- 01:28:22 build that component how to connect
- 01:28:24 template and logic a native script will
- 01:28:28 help us with that since the template
- 01:28:30 gets compiled to a native template so we
- 01:28:32 should add a selector here so that we
- 01:28:34 can embed this as an element and your
- 01:28:37 selector doesn't start with a capital
- 01:28:38 character like two built-in elements
- 01:28:40 instead you would name this how you do
- 01:28:43 indeed name it for any angular app you
- 01:28:45 can add your own prefix could be an S
- 01:28:47 could be app I'll go with NS and then
- 01:28:50 your component name so here NS current
- 01:28:53 challenge makes a lot of sense I think
- 01:28:55 next I want to let angular know where my
- 01:28:58 template lives so I will add the
- 01:29:00 template URL property here and point at
- 01:29:03 my current – challenge dot component or
- 01:29:07 HTML file and for the Styles I'll add
- 01:29:10 style URLs and here this takes an array
- 01:29:13 where I also point at current challenge
- 01:29:16 component dot CSS here
- 01:29:19 now there's one extra thing which I
- 01:29:21 mentioned in the last lecture every
- 01:29:23 angular component needs to have that
- 01:29:26 module ID property which has a value of
- 01:29:29 module ID that is required for native
- 01:29:32 script to be able to build your app
- 01:29:34 correctly now to be able to use this
- 01:29:37 component we need to declare it in an
- 01:29:39 angular module and I'll do it here in
- 01:29:42 the app module I will declare my current
- 01:29:44 challenge component here and I use the
- 01:29:47 auto import functionality of my IDE you
- 01:29:49 need to make sure that this import is
- 01:29:51 added where we import current challenge
- 01:29:53 component from and then the path to the
- 01:29:55 file slash dot slash challenges slash
- 01:29:58 current challenge slash current
- 01:30:00 challenge dot component without dot TS
- 01:30:03 at the end that has to be omitted it is
- 01:30:05 added automatically by the build process
- 01:30:08 so with that we declared it we can now
- 01:30:12 use it and let's now use it by using
- 01:30:15 such a layout and I'll dive into all the
- 01:30:18 weight of layouts in a second and let's
- 01:30:20 of course also make sure that
- 01:30:22 you have some other output or input
- 01:30:25 elements in there so I will add a stack
- 01:30:28 layout here which is amongst the simple
- 01:30:30 slay outs you can use and by default the
- 01:30:32 stack layout simply organizes the
- 01:30:34 elements you put inside of it from top
- 01:30:36 to bottom now let's say we want to be
- 01:30:40 able to set a current challenge and then
- 01:30:43 simply output our challenge name now
- 01:30:46 let's start by outputting the name with
- 01:30:48 a label and that is important you can't
- 01:30:50 type challenge name like take a walk
- 01:30:54 every day like this because there is no
- 01:30:57 implicit text element in native script
- 01:31:00 so just outputting text without adding
- 01:31:03 it to an element doesn't work instead if
- 01:31:05 you want output text you will use a
- 01:31:07 label and that label then has a text
- 01:31:10 property so text doesn't go between the
- 01:31:12 opening and closing tag here but into
- 01:31:14 that text property where you can now
- 01:31:16 have take a walk every day now if we
- 01:31:21 want to see that in action let's
- 01:31:23 actually just go to the app component
- 01:31:25 and replace page router outlet with our
- 01:31:28 own NS current challenge here and we
- 01:31:31 include our own components just as we
- 01:31:33 include them in a web app for it is to
- 01:31:36 work we also have to wrap it here into a
- 01:31:39 layout like a stack layout because you
- 01:31:41 always have to have such a layout as
- 01:31:43 your root component and now after saving
- 01:31:46 this the application should rebuild
- 01:31:48 thanks to these processes TNS run
- 01:31:51 Android and TNS run iOS still running
- 01:31:53 and it will now reload the app on our
- 01:31:58 emulators as soon as it's done building
- 01:32:00 and it should output our new user
- 01:32:04 interface and here it is take a walk
- 01:32:06 everyday on both emulators a little bit
- 01:32:09 hard to see on Android because of the
- 01:32:10 default style Android applies pretty
- 01:32:12 easy to see here on iOS I guess so this
- 01:32:15 is how we can build our own angular
- 01:32:16 components nothing too fancy about this
- 01:32:18 and more importantly this is how we use
- 01:32:21 these built-in UI widgets and layouts
- 01:32:23 now I mentioned that I want to be able
- 01:32:25 to set my own text here basically so
- 01:32:29 let's work on that in the next lecture
- 01:32:36 now that we saw that we can build normal
- 01:32:38 angular components and that we work with
- 01:32:41 these built-in widgets let's use
- 01:32:42 Morissette widgets
- 01:32:43 I want to be able to set that text on my
- 01:32:45 own and for this we can add a text field
- 01:32:48 widget here and this will allow us to
- 01:32:50 input something and in case you're
- 01:32:51 wondering how I know this don't forget
- 01:32:53 that there is this documentation and
- 01:32:55 there you can simply click through them
- 01:32:57 and see what they do it's not that many
- 01:32:59 and you will see there's a text field
- 01:33:01 widget so the text field which it allows
- 01:33:06 us to enter something if I save this and
- 01:33:08 let it rebuild we can see this real
- 01:33:11 quick
- 01:33:12 here it is really is to see on Android
- 01:33:15 because it's underlined by default it's
- 01:33:17 not on iOS it is there you can type here
- 01:33:20 but it's not so easy to see I will dive
- 01:33:22 into styling later this is how we can
- 01:33:26 enter text but of course we're also
- 01:33:28 interested in while getting access to
- 01:33:30 that text and you get access to this
- 01:33:33 text we can actually use a technique we
- 01:33:36 also use an angular for web we can use
- 01:33:38 two-way binding so we can use ng model
- 01:33:41 here with this syntax and again that is
- 01:33:45 something you should know from normal
- 01:33:47 angular and we can bind this to a
- 01:33:50 property of our component class here
- 01:33:52 like challenge description by default
- 01:33:58 let's say that's an empty string and now
- 01:34:00 we can bind this here in our template by
- 01:34:02 simply pointing at challenge description
- 01:34:05 here just like that now on these
- 01:34:09 elements we can also set some attributes
- 01:34:11 like we set the text attributes here for
- 01:34:13 example a text field supports a hint
- 01:34:16 attribute and again if you want to know
- 01:34:18 which attributes are supported for one
- 01:34:20 year fishel docks here might be helpful
- 01:34:22 here you see some examples but if you
- 01:34:24 want to see everything you can always
- 01:34:26 scroll down to that class definition
- 01:34:28 here and have a look at that now that's
- 01:34:31 more technical to read but here if you
- 01:34:33 click on the text view for example you
- 01:34:36 see a list of all the properties this
- 01:34:38 has and you can essentially set all
- 01:34:40 these properties as attributes on your
- 01:34:43 XML element and for example here you
- 01:34:46 also see two hint and you can click on
- 01:34:48 that and get a short
- 01:34:50 description on what you can do with that
- 01:34:52 so dad is the deep dive the docks here a
- 01:34:55 great first place at this course of
- 01:34:57 course tries to teach you as much about
- 01:34:59 this as possible so here we could enter
- 01:35:01 challenge title to give a hint about
- 01:35:04 what this text field wants as an input
- 01:35:07 and with dad if we let this update again
- 01:35:12 we see challenge Tyler here on both okay
- 01:35:16 so we get this and we're binding to the
- 01:35:17 challenge description property now of
- 01:35:20 course we now when I use that property
- 01:35:22 value to which we're binding here and to
- 01:35:25 use it let's add a button here and on
- 01:35:29 that button let's say set challenge
- 01:35:33 because we now want to set our challenge
- 01:35:35 to whatever we entered here and
- 01:35:36 obviously we'll get more sophisticated
- 01:35:37 than that throughout the course now
- 01:35:40 let's try a first way of setting this by
- 01:35:42 binding the text here with property
- 01:35:44 bindings indicated by the square
- 01:35:45 brackets which is how you can set a
- 01:35:47 dynamic value to this attribute and you
- 01:35:49 can do this with any attribute you could
- 01:35:51 also bind D hint here dynamically and
- 01:35:54 there I want to set this to that
- 01:35:56 challenge description property which I'm
- 01:35:58 binding to you with ng mall here well if
- 01:36:01 I now save this we wouldn't even need
- 01:36:03 the button for this by the way if I now
- 01:36:04 save this you will see that as this
- 01:36:07 reloads if I type here we see the button
- 01:36:11 without a text because I have that it
- 01:36:12 any but we also see there's no output
- 01:36:15 below that and the reason for that is
- 01:36:17 that for ng model to work we actually
- 01:36:20 just as an angular for web need to
- 01:36:22 import an extra module here in our app
- 01:36:26 module and that would be the native
- 01:36:28 script forums module now we need to
- 01:36:32 import that and we do import that we do
- 01:36:36 import the native script forms module
- 01:36:37 from and actually it's already hinted
- 01:36:40 here from native script angular slash
- 01:36:45 forms so this now imports native could
- 01:36:49 forms module and this unlocks the usage
- 01:36:52 of ng module in our component here
- 01:36:55 so with that import added in the app
- 01:36:58 module we can wait for this to reload
- 01:37:01 and you will now actually see that as I
- 01:37:05 type here output gets added at the
- 01:37:08 bottom this works so now we got this
- 01:37:11 output working but we added this button
- 01:37:14 I want to use that button to output my
- 01:37:16 content and for this we can use
- 01:37:20 something which we also know from
- 01:37:21 angular for web we can use event binding
- 01:37:23 with normal parentheses
- 01:37:26 now on the web you would listen to click
- 01:37:27 this does not exist on a native script
- 01:37:30 element there you have tap instead and
- 01:37:32 just as before the official Doc's are of
- 01:37:35 help if you want to find all available
- 01:37:38 events you can click on gestures here
- 01:37:40 and that gives you an overview over the
- 01:37:43 gestures the user input events basically
- 01:37:46 which native script supports here they
- 01:37:49 are and here you find examples on how to
- 01:37:51 listen to them for example a double tap
- 01:37:53 here or also a long press well we are
- 01:37:57 using a normal tap here and we can now
- 01:38:00 bind us to a method which should get
- 01:38:02 executed or have some inline code here
- 01:38:05 that should be executed so here we could
- 01:38:08 execute on set challenged name is up to
- 01:38:11 you copy that and add a method off that
- 01:38:16 name here
- 01:38:17 and now in that method we can define
- 01:38:18 which logic we want to have in here to
- 01:38:21 set our challenge and here I'll simply
- 01:38:25 add a current challenge property which
- 01:38:26 is empty by default and I will then set
- 01:38:29 this current challenge equal to
- 01:38:32 challenge description so to what the
- 01:38:33 user entered here in onset challenge and
- 01:38:37 now the last thing we need to do is we
- 01:38:40 need to use current challenge and bind
- 01:38:42 this to our text here because now with
- 01:38:45 two properties which are set upon a tap
- 01:38:47 here we make sure that we have no life
- 01:38:49 output here in the label but only after
- 01:38:51 we confirmed on the button now on the
- 01:38:54 button it also doesn't hurt to set a
- 01:38:56 text attribute which it supports to have
- 01:38:58 some text on the button which should be
- 01:39:01 set challenge because a little mistake
- 01:39:04 here on my side of course set challenge
- 01:39:06 like this doesn't work I did mention
- 01:39:08 that there is no implicit text widget
- 01:39:10 it's easy to forget this if you work on
- 01:39:13 the web for a lot but on native script
- 01:39:16 you add all output text always on
- 01:39:19 properties of your widgets so that's
- 01:39:22 also why I left this error in there it
- 01:39:23 is a common error you need to set the
- 01:39:26 text attribute here so with that if it
- 01:39:29 now reloads now we see the button here
- 01:39:32 and now if I add take a walk every day
- 01:39:35 here only when I click this button it
- 01:39:39 occurs down
- 01:39:39 there take a walk every day on iOS it
- 01:39:45 works the same on iOS of course so what
- 01:39:48 you can clearly see here is that you
- 01:39:51 still use these general angular features
- 01:39:53 like property binding or event binding
- 01:39:56 or two-way binding just not string
- 01:39:59 interpolation because you have no
- 01:40:01 implicit text you could output here
- 01:40:02 right that's not supported but you use
- 01:40:04 these other elements just as you use
- 01:40:06 them in angular you have the general
- 01:40:08 flow of data as you can set it up at an
- 01:40:11 angular web app but we are using this
- 01:40:13 special widgets and by the way this
- 01:40:15 should be a button with a capital P it
- 01:40:17 worked with a lowercase B too but best
- 01:40:20 practice is to use capital characters to
- 01:40:22 make it really clear that this is not
- 01:40:24 HTML and with that we get our first very
- 01:40:28 basic user interface built of course not
- 01:40:31 that beautiful though so let's dive into
- 01:40:33 styling next before we thereafter have a
- 01:40:36 deeper look and all the built-in layouts
- 01:40:38 that are supported
- 01:40:43 so we can set our current challenge here
- 01:40:48 this is the challenge but beautiful is
- 01:40:52 different I'd say so let's learn how we
- 01:40:55 can actually style in native script and
- 01:40:58 as always and I'm just mentioning this
- 01:41:01 to make you sure that you can do as much
- 01:41:02 as possible on your own in your own
- 01:41:04 projects too as always the official
- 01:41:07 Doc's are of help here you can check
- 01:41:10 this styling part here to learn more
- 01:41:13 about how styling works in native script
- 01:41:15 and which possibilities you have there
- 01:41:18 because the good thing is you can use
- 01:41:20 CSS with the same rules you use on the
- 01:41:24 web but actually not all properties are
- 01:41:27 supported but only this list of
- 01:41:29 supported properties which you find here
- 01:41:31 and you should check this regularly if
- 01:41:33 you're working on native script because
- 01:41:35 this list is always up to date and new
- 01:41:37 properties are getting added all the
- 01:41:39 time and you have a supported list of
- 01:41:41 selectors you can use so you can use
- 01:41:44 things like the type selector a class
- 01:41:46 selector and so on but for example
- 01:41:48 regarding pseudo selectors only a bunch
- 01:41:50 of pseudo selectors are supported it's
- 01:41:52 actually not just highlighted as it says
- 01:41:54 here they're also is disabled but you
- 01:41:56 don't have hover for example because you
- 01:41:59 can't really hover on native apps so
- 01:42:02 this is how styling works we use a sub
- 01:42:06 selection of CSS you could say and we
- 01:42:10 can use our CSS files for the components
- 01:42:15 just as we do it on an angular app you
- 01:42:17 can also set inline styles though so for
- 01:42:20 example on my label here I could set a
- 01:42:23 font size important you have attributes
- 01:42:26 which are in camel case lower case
- 01:42:29 starting character every character of a
- 01:42:31 word inside the word then starts with a
- 01:42:34 capital character you could set this to
- 01:42:37 let's say 20 all's important here for
- 01:42:39 units you don't have pixels or Ram you
- 01:42:44 have just a number and these will
- 01:42:45 automatically be device-independent
- 01:42:47 pixels so adjust it to the resolution of
- 01:42:50 the device the only alternative are
- 01:42:52 percentages but here I want to use an
- 01:42:54 absolute size and we can set in line
- 01:42:58 like this and asked us for loads if I
- 01:43:03 add my challenge here you see it's a bit
- 01:43:06 bigger than before because the default
- 01:43:08 size was not 20
- 01:43:10 you can also set inline styles with the
- 01:43:13 style tag here just as you would do it
- 01:43:16 on the web
- 01:43:17 now with the CSS property font size
- 01:43:19 which is supported if you check your
- 01:43:21 little Doc's which you again set not two
- 01:43:23 pixels but also to a unit-less
- 01:43:26 value here and this will have the same
- 01:43:29 effect as before let's now try it on iOS
- 01:43:34 this works here it is bigger than before
- 01:43:38 and in a lot of occasions setting inline
- 01:43:42 styles is okay or might be easier to
- 01:43:44 understand for other developers working
- 01:43:47 on your code but for more complex
- 01:43:48 stylings or reusable stylings you want
- 01:43:51 to use these CSS files now important the
- 01:43:54 CSS file of a component sets up stalls
- 01:43:57 which are then scoped to that component
- 01:43:59 so whichever CSS rules you adhere only
- 01:44:03 apply to elements in this component so
- 01:44:05 if I for example style my stack layout
- 01:44:09 here to have a border color of red and a
- 01:44:16 border width of 5 if I do that here in
- 01:44:19 my current challenge component you will
- 01:44:22 see that ass's updates I do have my red
- 01:44:27 border and you don't need to set the
- 01:44:30 type of order to solve it I do have my
- 01:44:33 red border around this stack layout but
- 01:44:36 remember that an app component we also
- 01:44:39 had a stack layout around the overall
- 01:44:41 page you could say and there is no red
- 01:44:43 border around Det
- 01:44:45 because your styles are scoped to your
- 01:44:47 component Everett than the component CSS
- 01:44:50 files on the other hand you can set up
- 01:44:53 global styles in the app CSS file if you
- 01:44:55 want to do that here by the way we are
- 01:44:57 importing a default theme more about
- 01:44:59 theming in a separate module but here I
- 01:45:02 could Staal my stack layout to have a
- 01:45:05 border color of green and a border width
- 01:45:09 of
- 01:45:11 eight for example now if I do that here
- 01:45:14 in app CSS you will see that Aster's
- 01:45:17 reloads we do at that green border here
- 01:45:21 around the overall page which is T is
- 01:45:23 stack layout we have here an app
- 01:45:25 component but please note we're not
- 01:45:27 adding this in the app component CSS
- 01:45:29 file so this is not scope to app
- 01:45:31 component
- 01:45:32 it's just overwritten for the current
- 01:45:34 challenge stack layout because we have
- 01:45:38 separate a separate rule here if I would
- 01:45:42 actually comment out this rule here in
- 01:45:44 the current challenge component CSS file
- 01:45:46 you will see that both stack layouts
- 01:45:49 will have the green border because that
- 01:45:51 green border rule is set up in the app
- 01:45:54 CSS file which is our global CSS file
- 01:45:58 here you can see it so any CSS code set
- 01:46:02 up an app CSS it's applied application
- 01:46:05 wide which can be very useful for
- 01:46:07 setting up some general styling whereas
- 01:46:09 here you can style what only should
- 01:46:11 apply in a given component now with
- 01:46:14 these basics out of the way let's dive
- 01:46:16 into styling and let's make our simple
- 01:46:18 user interface here a little bit more
- 01:46:21 pretty in the next lecture
- 01:46:27 so now that we understood how styling
- 01:46:29 generally works and that it's awesome
- 01:46:32 let's actually prove the styling here
- 01:46:34 and I want to have a mix of app wide
- 01:46:37 styles for example for the button in the
- 01:46:39 text field where I want to have a
- 01:46:41 general yeah you could call it theme in
- 01:46:43 my app and component specific styles for
- 01:46:47 the text here for example for my current
- 01:46:49 challenge so let's start with that
- 01:46:52 current challenge text here I got this
- 01:46:55 label and I could select it with the
- 01:46:58 label type so it could simply style
- 01:47:00 label here or just as in web sees as we
- 01:47:04 can add an ID and select by that with
- 01:47:07 the hashtag selector or add a class and
- 01:47:09 select by this so here I will give this
- 01:47:12 a class of title and in our CSS file I
- 01:47:15 can then add a title class selector here
- 01:47:19 and here I want to now set a font size
- 01:47:22 of let's say 26 and I want to align the
- 01:47:25 text in the center which I can do a text
- 01:47:27 align Center and again that is something
- 01:47:29 you know from the web both properties
- 01:47:31 are available in the web here the unit
- 01:47:33 is different because we have no UNIX
- 01:47:36 units like pixel here but just a number
- 01:47:39 but that is it now let's also add a root
- 01:47:42 color and for that I want to pick some
- 01:47:47 purplish color maybe maybe here in this
- 01:47:51 area yeah I like that tone and let's
- 01:47:54 give it a font weight of bold now with
- 01:47:59 these four properties added which are
- 01:48:02 all support that you can of course check
- 01:48:04 the official docs as does I have Roo
- 01:48:08 loads we can set our challenge here and
- 01:48:13 that looks a lot better than it did
- 01:48:16 before now let's also add some distance
- 01:48:19 between our text here and the button by
- 01:48:21 adding a margin and justice on the web
- 01:48:24 you can set a general margin with the
- 01:48:26 shorthand notation you know from the web
- 01:48:28 or you said something like margin top
- 01:48:31 and there we could set this to 10 for
- 01:48:35 example again device-independent pixels
- 01:48:37 if we save this now
- 01:48:40 we can take a walk here on iOS and we
- 01:48:43 see there is some distance between the
- 01:48:45 button and our text okay perfect so this
- 01:48:48 is the text is this good for now now let
- 01:48:51 me also set some global stalls and as I
- 01:48:55 mentioned there I wanna style the button
- 01:48:58 and I want a stalled text field so our
- 01:49:03 input element which we have here now
- 01:49:08 let's say we start with the button you
- 01:49:10 can absolutely have different styles for
- 01:49:12 iOS and Android and it will dive into
- 01:49:15 how you set up different stalls in that
- 01:49:18 styling and theming module a little bit
- 01:49:19 later where we dive deeper into
- 01:49:21 everything you can do with styling and
- 01:49:23 so on for now I will set one style for
- 01:49:25 both platforms
- 01:49:26 by going to the button and there I'll
- 01:49:28 set a background of this same purple I
- 01:49:33 used before here so let me copy that hex
- 01:49:36 code I'll set a border width and you
- 01:49:44 need to set that to make sure that you
- 01:49:46 really get a nice-looking button in the
- 01:49:49 end otherwise you might end up with a
- 01:49:50 button where the background is not
- 01:49:52 applied because it doesn't have a border
- 01:49:53 that is because of how the compilation
- 01:49:57 to native widgets works so I'll set up
- 01:49:59 border width of 1 and a border color of
- 01:50:02 that well same color and a text color of
- 01:50:06 white let's say now let me save that and
- 01:50:10 let's see if that looks something like I
- 01:50:14 want it to look yeah doesn't look too
- 01:50:17 shabby certainly or Android a little bit
- 01:50:20 of improvement is needed here on iOS but
- 01:50:23 I like the direction to which we're
- 01:50:24 heading now I don't want to have a
- 01:50:26 button which spans to full width off the
- 01:50:28 page and in general we can control this
- 01:50:31 with the layout that surrounds it but we
- 01:50:33 can also set a width property and for
- 01:50:36 example we could say that the button
- 01:50:38 should have with off let's say 100 now
- 01:50:41 this is not really what you want to have
- 01:50:43 as a global setting because that means
- 01:50:45 today if you have longer texts in your
- 01:50:47 buttons then they will get cut off so in
- 01:50:50 reality you would want to have our
- 01:50:52 percentage of let's say
- 01:50:53 100% and then control the width of the
- 01:50:56 button with the surrounding layout yeah
- 01:50:59 here we can actually see what I meant
- 01:51:00 it's getting cut off doesn't really look
- 01:51:02 pretty so what I will do here for now is
- 01:51:05 all increase this to 400 which should be
- 01:51:08 enough space and I'll add some padding
- 01:51:10 here and I want to have padding top and
- 01:51:12 bottom off let's say five and left and
- 01:51:15 right 10 and if we now save this we
- 01:51:18 should have a prettier button in the
- 01:51:20 application yeah this looks better a
- 01:51:23 little bit too wide now so maybe 250 and
- 01:51:26 I also want to have rounded corners
- 01:51:28 which we can set with border radius
- 01:51:31 which is also supported by native script
- 01:51:32 so you see it supports a lot of core CSS
- 01:51:35 properties and I'll set this to 30% here
- 01:51:38 so you could also set an absolute value
- 01:51:41 but I want to use a percentage value and
- 01:51:43 now we should get a nice button with
- 01:51:46 rounded corners
- 01:51:49 yeah I like that style now last change
- 01:51:52 is that I want to add a margin top and
- 01:51:55 bottom off let's say 5 and 0 left and
- 01:51:58 right by default and I'll change the
- 01:52:01 selector from button which should start
- 01:52:03 with the capital B by the way was just
- 01:52:05 Auto formatted by my IDE you can used
- 01:52:08 with a lowercase B 2 as you saw but I
- 01:52:11 will change this to a class selector for
- 01:52:13 dot button so that I can actually
- 01:52:15 control which buttons should get this
- 01:52:17 default style and which buttons not
- 01:52:18 because maybe I don't want to have this
- 01:52:20 default cell for every single button
- 01:52:22 element on the page so here we'll add
- 01:52:24 this class BTN which I just set up
- 01:52:26 globally so that this button will get
- 01:52:29 this style which is a setup here in app
- 01:52:31 CSS and with that that looks quite
- 01:52:34 decent
- 01:52:40 now the button is set up I now want you
- 01:52:43 to practice styling a little bit by also
- 01:52:46 styling that text field now doesn't look
- 01:52:49 too bad like this but we can certainly
- 01:52:51 improve it a little bit now simply play
- 01:52:54 around and dive into the official docks
- 01:52:56 and see which rules are available there
- 01:52:58 these up or dead CSS properties here and
- 01:53:01 feel free to style the way you want I
- 01:53:04 will style it in a way where I will set
- 01:53:07 this border at the bottom on both
- 01:53:09 platforms so I will add it as a rule and
- 01:53:12 I will color it in the same way I
- 01:53:13 colored this buttons are using that same
- 01:53:15 purplish color that is something I will
- 01:53:18 set and I will probably add some spacing
- 01:53:21 on the top and bottom of it but feel
- 01:53:23 free to use different styles this is
- 01:53:25 what I will use in a solution and
- 01:53:27 definitely compare your approach to my
- 01:53:29 solution video to see how I solve this
- 01:53:32 especially in case you get stuck or
- 01:53:34 you're not sure how you can target the
- 01:53:36 text field or how you do apply these
- 01:53:38 properties though it really just works
- 01:53:40 as we did it here so good luck with that
- 01:53:47 were you successful I will now work on
- 01:53:50 that text field and just as before I
- 01:53:53 will actually set this up with a class
- 01:53:55 which I then can add to any text field
- 01:53:57 which should get these styles and I will
- 01:54:00 have a class off form control here but
- 01:54:03 you can use any night class and you want
- 01:54:05 you could name this input whatever you
- 01:54:07 want now there I want to have a border
- 01:54:11 bottom color as I mentioned of this
- 01:54:14 purplish style here and a border bottom
- 01:54:18 width of two maybe so that we can
- 01:54:20 clearly see this border now I also want
- 01:54:24 to add a margin top and bottom off let's
- 01:54:27 say five and zero left and right and
- 01:54:32 didn't mention this in the tasks but I
- 01:54:36 also decided to set a font size here and
- 01:54:39 I'll set a font size of 20 of course
- 01:54:43 this is optional if you didn't do this
- 01:54:44 no problem at all I didn't mention it
- 01:54:46 now let's have a look at how this looks
- 01:54:49 like and for this we of course need to
- 01:54:51 add this class to this text field here
- 01:54:53 so there let's add class attribute and
- 01:54:56 set this to form control which is the
- 01:54:58 class name I chose and after saving this
- 01:55:02 it should automatically recompile and
- 01:55:04 restart the application so that we see
- 01:55:07 this style in action here it is now it
- 01:55:10 still takes the full width just as the
- 01:55:13 button this is actually default for all
- 01:55:15 these UI widgets they take to full width
- 01:55:17 and you will soon learn how to control
- 01:55:19 this with layouts for now let's accept
- 01:55:22 it as it is but this does look quite
- 01:55:24 nice now I want to have some padding
- 01:55:28 which I do have by default on Android
- 01:55:30 but not on iOS so let me actually go
- 01:55:33 back to app CSS and let's add a padding
- 01:55:36 here and the padding could be maybe
- 01:55:39 eight pixels top and bottom and four
- 01:55:42 pixels left and right we'll have to play
- 01:55:44 around with that a little bit to see how
- 01:55:47 that works yeah that looks quite good so
- 01:55:50 now we have the same style on both
- 01:55:52 platforms here and that already is it
- 01:55:55 this looks nice as it is and that
- 01:55:58 concludes our first exploration of the
- 01:56:01 Eiling world native script offers to us
- 01:56:04 now it's time to dive into the layouts
- 01:56:06 so that we got more control and more
- 01:56:09 power over how we can lay our elements
- 01:56:13 out on the screen and we can actually do
- 01:56:16 more than just top to bottom as we're
- 01:56:18 currently doing
- 01:56:22 enough styling for now let's dive into
- 01:56:25 layouts as mentioned before layouts is
- 01:56:28 really just a term for these core UI
- 01:56:31 elements native script offers you which
- 01:56:33 you wrap around your Averell ament's
- 01:56:35 like the stack layout we used which
- 01:56:37 control how the children inside the
- 01:56:40 layout are laid out on the page how they
- 01:56:43 are distributed how they are positioned
- 01:56:45 and there are four core layout elements
- 01:56:48 you need to know in native script
- 01:56:50 because you'll use these a lot and these
- 01:56:52 four typically cover everything you
- 01:56:55 would want to do there also are two
- 01:56:57 additional ones stock layout and rap
- 01:56:59 layout and I will not dive deeply into
- 01:57:01 them in this course because in my
- 01:57:02 experience you don't really use them
- 01:57:04 that often
- 01:57:05 of course you find explanations on all
- 01:57:07 of these in your facial docks now one
- 01:57:10 important note right away layouts can
- 01:57:13 also be nested into each other and that
- 01:57:15 is important because you could think
- 01:57:17 that a stack layout is there to hold
- 01:57:19 buttons and text fields and labels and
- 01:57:22 it is but a stack layout could also hold
- 01:57:25 an average stack layout and implicitly
- 01:57:27 we are already doing this in our demo
- 01:57:29 app here we built thus far because we
- 01:57:32 had a stack layout in the app component
- 01:57:34 HTML file and then also in our custom
- 01:57:37 angular component the current challenge
- 01:57:39 component which you as an app component
- 01:57:41 but before we dive too much into nesting
- 01:57:44 what do these four core layouts actually
- 01:57:47 do how do they differ a stacked layout
- 01:57:50 is pretty easy to grasp I guess it's
- 01:57:53 there to position items next to each
- 01:57:55 other or on top of each other vertically
- 01:57:57 or horizontally so you can achieve
- 01:57:59 layouts like this where elements are
- 01:58:01 sitting on top of each other or next to
- 01:58:03 each other and this little preview
- 01:58:05 picture here actually would be achieved
- 01:58:07 by already nesting stack layouts because
- 01:58:10 you would have an overall stack layout
- 01:58:12 which has a stack layout with the free
- 01:58:14 rows which has then to our stack layouts
- 01:58:17 with the free columns you could say
- 01:58:18 speaking of rows and columns if you want
- 01:58:21 to build such a gritty interface you
- 01:58:24 could also explore the grid layout which
- 01:58:26 allows you to position items in well a
- 01:58:28 grid of rows and columns with which you
- 01:58:31 can achieve very flexible layouts like
- 01:58:33 this one and I'll of course give you
- 01:58:35 example
- 01:58:36 and show you how to use these layouts in
- 01:58:38 detail over the next lectures now when
- 01:58:42 you don't need a full grid but you want
- 01:58:44 to position elements in one dimension so
- 01:58:47 in a row or in a column then you can
- 01:58:49 always use the flexbox layout which
- 01:58:51 follows these CSS flexbox specification
- 01:58:54 you might know from web development and
- 01:58:58 there you can do things like distribute
- 01:59:00 items in a row to have a lot of space
- 01:59:03 between them or have them sit very close
- 01:59:05 to each other things like that now
- 01:59:08 sometimes you don't want to position
- 01:59:10 items relative to each other or in a
- 01:59:13 grid but on like a coordinate system and
- 01:59:16 here the absolute layout can help you it
- 01:59:18 positions elements absolutely using
- 01:59:21 coordinates and with that you can have
- 01:59:23 overlapping elements and anything like
- 01:59:25 that so let's explore these layouts then
- 01:59:28 one by one over the next lectures
- 01:59:34 I want to start with the stack layout
- 01:59:36 which we already saw in action
- 01:59:38 now the stacked layout has two forums
- 01:59:42 you can set it up to have an orientation
- 01:59:44 of vertical which is to default actually
- 01:59:46 and therefore does need to be set
- 01:59:48 separately or orientation horizontal now
- 01:59:52 in the vertical orientation elements are
- 01:59:55 simply added top to bottom on top of
- 01:59:58 each other here and that is all to what
- 02:00:00 we used in our demo app where we had the
- 02:00:02 text input at the top then the button
- 02:00:05 then the label with horizontal you
- 02:00:08 guessed it items sit next to Java in a
- 02:00:11 row now you cannot just configure the
- 02:00:14 layout element you can also configure
- 02:00:17 the children in such a layout and that
- 02:00:20 is now not limited to stack layout for
- 02:00:22 this specific property here you can set
- 02:00:25 horizontal and vertical alignment to
- 02:00:27 control how child elements lay
- 02:00:30 themselves out or position themselves in
- 02:00:32 the layout container again horizontal
- 02:00:34 and vertical alignment can not just be
- 02:00:37 used in a stack layout but you often use
- 02:00:41 them there because other layouts like
- 02:00:42 flexbox layout for example have
- 02:00:44 different means of positioning children
- 02:00:46 but more on that when we reach that
- 02:00:48 layout so let's actually see it in
- 02:00:51 action then I guess we already do is see
- 02:00:54 it in action in our app of course but I
- 02:00:56 want to see it in more action and for
- 02:00:58 this I'll create a new component now
- 02:01:01 here we'll also explore something new we
- 02:01:03 can use the angular seal I to create a
- 02:01:06 component and for that you should just
- 02:01:08 make sure that you have the angular CLI
- 02:01:10 installed you can get it on seal i dot
- 02:01:13 angular dot IO by simply running this
- 02:01:16 command here npm install – g– angular
- 02:01:19 CLI you don't need the other ones just
- 02:01:20 this one and this will install the
- 02:01:23 angular c-like globally on your machine
- 02:01:24 and with that you can run commands with
- 02:01:27 the ng command and in the angular
- 02:01:30 project which this turns out to be at
- 02:01:32 least partly you can run ng generate
- 02:01:36 component or a shorter form ng g c to
- 02:01:41 create a new component automatically and
- 02:01:43 then you can just enter a name and here
- 02:01:47 all named as layouts or to be precise I
- 02:01:50 want to create a folder named layouts
- 02:01:52 and in there I want to have my stack
- 02:01:54 layout so by running ng GC layouts slash
- 02:01:58 stack a new stack component will be
- 02:02:01 created in a layouts folder now this
- 02:02:03 command takes a while in a native script
- 02:02:05 project so I will fast forward to this
- 02:02:07 being finished might be faster at the
- 02:02:10 point of time you're viewing this and
- 02:02:11 let's dive into this component once it's
- 02:02:13 done so it is done and in layouts I got
- 02:02:16 my stack layout here by the way will
- 02:02:19 later delete this folder it's here for
- 02:02:21 practicing and we get a component
- 02:02:23 created with that module IDE and
- 02:02:25 basically a very basic initialization
- 02:02:28 here now in that stack layout let's
- 02:02:30 practice it using it and let's add a
- 02:02:33 stack layout as we did before and in
- 02:02:36 there I want to have a label with the
- 02:02:39 text off just maybe item 1 any text you
- 02:02:42 want now one item alone is boring let's
- 02:02:45 add more items so I'll add two and three
- 02:02:48 here as well now to make sure we can see
- 02:02:51 them in a CSS file
- 02:02:53 I will style my label and keep in mind
- 02:02:55 that is scoped to this component so only
- 02:02:58 labels in this component will receive
- 02:02:59 that styling and I will add a background
- 02:03:02 color or could add background color but
- 02:03:05 also just background works of let's say
- 02:03:08 red and then a width of 50 and a height
- 02:03:10 of 50 so that we can see this now
- 02:03:14 actually may let's make it even easier
- 02:03:15 to see them by giving these labels IDs
- 02:03:18 by one and so on so that we can target
- 02:03:21 them separately and give them different
- 02:03:23 colors I guess I free so now back in the
- 02:03:27 CSS file with these IDs added I want to
- 02:03:29 have width and height be equal on all
- 02:03:32 labels but I will target hash tag I 1
- 02:03:35 for the element with ID 1 and give that
- 02:03:37 background one and then the other one
- 02:03:40 here I'd you will get a background of
- 02:03:42 let's say blue and I three will get a
- 02:03:45 background off anything you want I'll
- 02:03:48 take orange now with that set up let me
- 02:03:51 save that and let's go back into app
- 02:03:54 component HTML and I will comment out my
- 02:03:58 demo app and for now I will sum
- 02:04:01 we use the NS stack component now by
- 02:04:05 running the ng generate command this
- 02:04:07 received a selector by default and it
- 02:04:09 was also added to the app module to
- 02:04:12 declarations they're automatically here
- 02:04:14 it is the stack component so that is why
- 02:04:17 I can start using it immediately and if
- 02:04:20 I now save that keep in mind my TNS run
- 02:04:23 processes are still running this app
- 02:04:26 will reload and will not see the text
- 02:04:28 field anymore because I commented that
- 02:04:29 out but instead we see the stack layout
- 02:04:33 in action or well what's yo if important
- 02:04:37 as I mentioned we would have wrapped
- 02:04:39 this in a stack layout here because you
- 02:04:42 need to have a route layout around your
- 02:04:45 well topmost component which happens to
- 02:04:48 be this one here so let's try this again
- 02:04:50 after wrapping it in stack layout here
- 02:04:53 in app component HTML and now as this
- 02:04:56 restarts here we see the result these
- 02:05:00 free elements are positioned on top of
- 02:05:03 each other as you can clearly see
- 02:05:04 vertically because the default is
- 02:05:07 orientation vertical now let's explore
- 02:05:11 the horizontal case by going back to our
- 02:05:15 stack component HTML file and there we
- 02:05:18 can set orientation horizontal now again
- 02:05:23 it was set to vertical by default if we
- 02:05:27 do that you see now they're positioned
- 02:05:30 left to right now let's make it a bit
- 02:05:34 easier to see that stack layout here by
- 02:05:37 going to Det CSS file and I'll add a new
- 02:05:40 rule here the stack layout selector and
- 02:05:44 there I want to select my well stack
- 02:05:47 layout which wraps these elements and
- 02:05:49 I'll give it a border color of green
- 02:05:54 we're not using that down there no and a
- 02:05:57 border width of 5 so that we can clearly
- 02:06:00 see that and I'll also give it a padding
- 02:06:02 of 10 so there there is some distance
- 02:06:05 between that border and the elements
- 02:06:06 inside of it now as this reloads we will
- 02:06:09 clearly see the stack layout there it is
- 02:06:12 and of course you also see they're all
- 02:06:14 poor
- 02:06:15 to the left we're just a default they
- 02:06:17 simply start at left
- 02:06:18 now you can't override this with
- 02:06:20 horizontal alignment which has showed on
- 02:06:22 the slide because Dad only positions an
- 02:06:25 individual label now to show you these
- 02:06:28 child properties which I mentioned let
- 02:06:31 me give this stack layout and height
- 02:06:34 here which is not just the height of the
- 02:06:36 children but more than that let's say of
- 02:06:38 300 if I give it that height you will
- 02:06:41 see that the green border expands to the
- 02:06:43 bottom of course and you see that by
- 02:06:47 default all the labels are centered
- 02:06:50 vertically in there now we can't control
- 02:06:54 the horizontal alignment off the items
- 02:06:56 because well if we would try to Center
- 02:06:59 item 1 horizontally here well item Q and
- 02:07:03 free logically come after it though we
- 02:07:05 don't say anything about their
- 02:07:07 positioning so you can't push item 1
- 02:07:09 well beyond item free basically by
- 02:07:12 trying to Center it horizontally but
- 02:07:15 vertically it's a different thing we can
- 02:07:17 position each item separately vertically
- 02:07:20 and we can easily do so by going to our
- 02:07:23 labels let's say label 2 and giving this
- 02:07:26 a vertical alignment of top and as the
- 02:07:32 name suggests disposition set at the top
- 02:07:34 alternatives would be bottom and stretch
- 02:07:37 now bottom should be really clear
- 02:07:39 stretch will actually make the elements
- 02:07:41 stretch out from top to bottom so it
- 02:07:44 will ensure that the element is actually
- 02:07:45 higher than it would be by default so
- 02:07:48 here you see the top positioning and
- 02:07:50 only item 2 is now pushed to the top now
- 02:07:53 if you want to see the horizontal
- 02:07:54 alignment in action then we have to
- 02:07:58 change the orientation back to word it
- 02:08:01 which was default if you remember and
- 02:08:03 then let's add horizontal alignment off
- 02:08:08 right here on the first label and for
- 02:08:12 horizontal alignment you can choose
- 02:08:14 between left center right and also
- 02:08:17 stretch now as this reloads you see if
- 02:08:21 the vertical alignment of the blue item
- 02:08:24 has no effect anymore for the same
- 02:08:26 reason as previously d horas on
- 02:08:28 alignment on the red item would have
- 02:08:30 have no effect we can't push this to the
- 02:08:32 top because that's the place of the red
- 02:08:33 block but this is pushed all the way to
- 02:08:36 the right because of horizontal
- 02:08:38 alignment right now this can be a bit
- 02:08:42 hard to understand when you first dive
- 02:08:45 into this as always dive into the
- 02:08:48 official docks and their layouts layout
- 02:08:50 containers and then dive into the layout
- 02:08:53 container you want to play around with
- 02:08:54 like stack layout here to learn more
- 02:08:56 about it and learn more about the
- 02:08:58 configurations you can set up there and
- 02:08:59 what you can do with it they're actually
- 02:09:01 also using that trick of using colored
- 02:09:03 labels to make it really easy to see
- 02:09:05 what gets positioned where now there's
- 02:09:08 the stack layout already though it's
- 02:09:10 basically all you need to know about it
- 02:09:12 and it's a great choice if you simply
- 02:09:14 want to position items well after each
- 02:09:16 other as we did previously in our demo
- 02:09:18 app here with a text field a button and
- 02:09:20 the output or next to each other
- 02:09:27 now the stack layout is pretty nice but
- 02:09:29 it's also pretty simple which is
- 02:09:31 generally good in a lot of cases it
- 02:09:33 offers all we need but sometimes you
- 02:09:35 need more control over how the elements
- 02:09:39 in your layout are distributed if there
- 02:09:41 should be more space between them and so
- 02:09:44 on and that is where the flexbox layout
- 02:09:46 can help you and if you know the Flex
- 02:09:49 box for web specification attached you
- 02:09:51 find some useful links regarding that
- 02:09:53 keep in mind these links are for web
- 02:09:55 development not native development if
- 02:09:57 you know that then using the Flex box
- 02:09:59 lab will be really easy just as with the
- 02:10:03 stack layout there are two important
- 02:10:06 core ways of using flexbox layout you
- 02:10:09 can set a so-called flex direction which
- 02:10:11 is Evol row or column and the default
- 02:10:14 would be row now their elements are
- 02:10:17 distributed like this you could say
- 02:10:18 that's not the default that there is
- 02:10:20 some space between but that space here
- 02:10:23 really highlights where flexbox differs
- 02:10:25 to the stack layout on the stack layout
- 02:10:28 elements would come after each other and
- 02:10:30 you could use some positioning with
- 02:10:32 horizontal and vertical alignment but
- 02:10:34 you were pretty restricted there with
- 02:10:36 the flexbox layout you got a lot of
- 02:10:38 properties you can set both in CSS and
- 02:10:42 directly on the element to control how
- 02:10:44 the child elements are laid out and how
- 02:10:47 they are distributed in the layout
- 02:10:49 container and you can do that both for
- 02:10:51 Rho and of course for a column and here
- 02:10:54 would be an example for where there is
- 02:10:56 no space between them or not so much but
- 02:10:58 where they are all pushed to the start
- 02:11:01 of the layout container now there are
- 02:11:02 tons of positioning possibilities and
- 02:11:04 we'll dive into a lot of them here but
- 02:11:07 as always always dive into the official
- 02:11:10 docks and their into the flexbox layout
- 02:11:12 to learn all about it because there are
- 02:11:14 so many combinations it's impossible to
- 02:11:17 show them all here and playing around
- 02:11:18 with it really is the best way of
- 02:11:20 mastering it nonetheless let's now dive
- 02:11:23 in and let's see what we can do with it
- 02:11:25 I'll create a new component for that
- 02:11:26 with ng GC also in the layouts folder
- 02:11:30 but this will now be flexbox because
- 02:11:32 will now play around of the flexbox
- 02:11:34 layout and let's wait for this to finish
- 02:11:37 here it is finished and let's go into
- 02:11:39 that newly created flex
- 02:11:41 component and in there I'll add my
- 02:11:44 flexbox layout opening and closing tag
- 02:11:48 and I will repeat the setup I had in my
- 02:11:52 stack layout so I'll quickly copy these
- 02:11:55 free labels with their IDs and dad text
- 02:11:58 and added here and I'll also copy the
- 02:12:01 CSS code I had for in a stack layout and
- 02:12:04 added here with the difference that I of
- 02:12:08 course will style my flexbox layout here
- 02:12:12 and not my stack layout that should be a
- 02:12:15 capital L Auto formatting here overrides
- 02:12:17 this all the time so now with that I got
- 02:12:21 that added we can now use it in our app
- 02:12:23 component instead of that stack layout
- 02:12:26 here I'll now use NS flexbox here it is
- 02:12:31 and let's now save this and therefore
- 02:12:33 reload the app on these devices there it
- 02:12:37 is and here we can see how flexbox works
- 02:12:41 by the way we can also see that there's
- 02:12:43 a tiny difference between iOS and
- 02:12:45 Android the text in these boxes is
- 02:12:49 centered vertically by default on iOS
- 02:12:53 and on the top on Android you can change
- 02:12:56 this with different CSS rules check the
- 02:12:58 CSS talks it's not related to the layout
- 02:13:01 the layout here the flexbox layout is
- 02:13:03 responsible for distributing these boxes
- 02:13:07 by the way in case you're wondering
- 02:13:09 where this extra spacer is coming from
- 02:13:11 on iOS that is basically some space
- 02:13:13 reserved for the main navigation bar
- 02:13:16 which we don't have here by default we
- 02:13:19 can see that the behavior is the same
- 02:13:20 regarding the fact that it seems to be
- 02:13:23 left to right and all the elements
- 02:13:25 stretch top to bottom because the
- 02:13:28 default for the flexbox layout is
- 02:13:30 actually a flex direction of Rho and you
- 02:13:35 can set this here just as all your other
- 02:13:37 properties I'm about to show you you can
- 02:13:39 set it here on this layout or in the CSS
- 02:13:42 code there it would be flex – direction
- 02:13:45 though so whatever is camelcase
- 02:13:48 on the as a property becomes caleb case
- 02:13:52 here so with a dash between the words
- 02:13:54 and this is as I mentioned row by
- 02:13:57 default now you can also change this to
- 02:14:02 column and it will not change it in here
- 02:14:05 but actually here because I think that's
- 02:14:07 a bit easier to see right now so I can
- 02:14:10 set Flex direction to column here all my
- 02:14:14 flexbox layout now let's see how this
- 02:14:16 changes things you probably can guess it
- 02:14:18 already what will happen column of
- 02:14:20 course now distributes the items
- 02:14:22 vertically from top to bottom as a
- 02:14:24 default now there although is row
- 02:14:28 reverse and column reverse and that
- 02:14:32 keeps it vertically or horizontally so
- 02:14:35 column stays vertical row stays
- 02:14:37 horizontal but reverse make sure that we
- 02:14:40 start at the bottom and please note that
- 02:14:42 it didn't push the items down to the
- 02:14:44 bottom but it also changed their order
- 02:14:47 item one is now at the bottom then item
- 02:14:49 Q so it really starts at the bottom it's
- 02:14:51 not just pushed down and the items still
- 02:14:54 start from top to bottom the items
- 02:14:56 themselves are ordered to start from top
- 02:14:59 to bottom that is what reverse does here
- 02:15:02 now I will go back to my normal column
- 02:15:05 here because the interesting part is not
- 02:15:08 just how we can push our items around or
- 02:15:11 where we start and if we position them
- 02:15:14 top to bottom or left to right we can
- 02:15:17 also control how the items themselves
- 02:15:18 are distributed within the available
- 02:15:21 space the available space is our green
- 02:15:23 box here right now they're all sitting
- 02:15:25 on top of each other right at the start
- 02:15:27 that is also what we could achieve with
- 02:15:29 our stack layout now what we can do here
- 02:15:33 is we can add justify content as a
- 02:15:36 property here or also with a dash and a
- 02:15:39 lowercase C as a CSS property and the
- 02:15:42 default here is flex start so if I set
- 02:15:46 this if I set this to flex start here on
- 02:15:49 the flexbox layout then you will see
- 02:15:51 that nothing changes in our output
- 02:15:53 because as I mentioned it is the default
- 02:15:55 so dad lets them start at the start of
- 02:15:58 your so called main axis and for column
- 02:16:01 the main axis is from top to bottom for
- 02:16:04 a column reverse the main axis would be
- 02:16:06 bottom to top and for row the main
- 02:16:08 is left to right so main axis is an
- 02:16:11 important curb you should keep in mind
- 02:16:12 it's top to bottom four column left to
- 02:16:15 right four row the opposite of the main
- 02:16:17 axis so four column the opposite is left
- 02:16:22 to right
- 02:16:22 it's called cross axis so main axis four
- 02:16:25 column top to bottom cross axis four
- 02:16:28 column left to right for Flex direction
- 02:16:31 row main axis is left to right cross
- 02:16:34 axis is top to bottom and justify
- 02:16:37 content defines how elements are
- 02:16:40 positioned along that main axis in Flex
- 02:16:43 start make sure they sit at the start of
- 02:16:45 the main axis flex and on the other hand
- 02:16:48 make sure that they are pushed to the
- 02:16:50 end of the main axis so if dad reloads
- 02:16:53 we will see that all the items are now
- 02:16:55 at the bottom of our green box but
- 02:16:57 important they keep the order
- 02:16:59 unlike column reverse it's not the red
- 02:17:02 box at the bottom instead they still are
- 02:17:05 ordered top to bottom but they just are
- 02:17:07 pushed to the end of the layout
- 02:17:09 container
- 02:17:10 now besides flex start and flex end we
- 02:17:13 also have Center and that is great if
- 02:17:15 you want a well center the items in the
- 02:17:18 box so now you can see all three items
- 02:17:21 are absolutely centered in the green box
- 02:17:24 sometimes you also want to have some
- 02:17:26 space between these items and you can do
- 02:17:28 that easily with Flex box to unjustified
- 02:17:31 content you can set space between and
- 02:17:34 this ensures that we have the first
- 02:17:37 element right at the start of the
- 02:17:38 container the last element right at the
- 02:17:42 bottom or at row right at the end of the
- 02:17:44 container I should say and then some
- 02:17:45 space in between and that space you see
- 02:17:48 between the green border and the first
- 02:17:50 and last element that simply is our
- 02:17:53 padding on the flexbox layout otherwise
- 02:17:56 if I remove that there will be no space
- 02:17:58 there so really first element sits right
- 02:18:01 at the start of the Flex box last
- 02:18:03 element sits right at the end and then
- 02:18:05 we got an equal amount of space between
- 02:18:07 all the items in our container here it
- 02:18:11 is now sometimes you don't want to have
- 02:18:13 this distribution but you want to have
- 02:18:16 some space around all elements now this
- 02:18:19 adds the available free space
- 02:18:22 around all elements so now we get an
- 02:18:25 equal amount of space before this
- 02:18:27 element and after this element and then
- 02:18:29 before this element and after the blue
- 02:18:31 element and then before the orange
- 02:18:33 element and after the orange element and
- 02:18:36 this already shows the power of the
- 02:18:38 flexbox layout we can do a lot with it
- 02:18:41 and we really are
- 02:18:42 well flexible regarding our positioning
- 02:18:45 when using it so far I talked about
- 02:18:49 positioning along the main axis and
- 02:18:51 remember we have a flex direction of
- 02:18:53 column here so the main axis is top to
- 02:18:55 bottom what about the cross axis though
- 02:18:58 we can position items along the cross
- 02:19:01 axis by setting a line items here now
- 02:19:05 aligned items and I just split this a
- 02:19:08 cross multiply ins to make it easier to
- 02:19:09 read a line items takes generally
- 02:19:12 comparable values to justify content but
- 02:19:15 not exactly the same ones the default
- 02:19:18 here is actually stretch and that is
- 02:19:20 what since it's the default is currently
- 02:19:22 getting applied this is what's
- 02:19:24 responsible for all the items taking the
- 02:19:26 full width of the container again
- 02:19:28 remember a line items controls
- 02:19:31 positioning along the cross axis so
- 02:19:34 since we have a flex direction of top to
- 02:19:36 bottom the cross axis is left to right
- 02:19:38 so stretch ensures they take the fall
- 02:19:41 with left to right but we don't just
- 02:19:44 have stretch of course we can also set
- 02:19:47 this to flex start for example and if we
- 02:19:49 do so then all the items will be pushed
- 02:19:52 to the start of the cross axis taking
- 02:19:55 only the width they are set to use so
- 02:19:58 here you see they're all moved to the
- 02:20:00 very left just as we have flex start we
- 02:20:04 of course all have flex and to move all
- 02:20:07 the items to the end of our cross axis
- 02:20:11 here they are and unsurprisingly we also
- 02:20:14 have center here we have no space around
- 02:20:18 or space between though because how
- 02:20:20 would that work each item only moves in
- 02:20:22 its own cross axis row you could say
- 02:20:25 here but now they're all centered along
- 02:20:27 the cross axis now always keep in mind
- 02:20:30 this uses a flex direction of column as
- 02:20:33 I switch this to row things start to
- 02:20:36 become
- 02:20:36 interesting because now that you access
- 02:20:38 change and now the main axis is left
- 02:20:40 right and the cross access is top to
- 02:20:42 bottom and therefore it's now centered
- 02:20:45 like this and if I for example set
- 02:20:49 aligned items here to flex start then
- 02:20:52 the items will not be pushed to the left
- 02:20:54 but now the cross access since the Flex
- 02:20:57 direction is Rho the cross access is top
- 02:21:00 to bottom so all the items with Flex
- 02:21:02 start on the illini items property are
- 02:21:04 pushed to the top so you can really have
- 02:21:07 a lot of combinations here and that
- 02:21:09 we're only the important properties on
- 02:21:12 the flexbox layout container if we have
- 02:21:16 a look at the official docks we see we
- 02:21:19 also have another property there flex
- 02:21:21 wrap and then a bunch of properties on
- 02:21:25 the children though the two I show you
- 02:21:27 here are really the most important flex
- 02:21:30 wrap it's interesting too though
- 02:21:32 flexwrap allows you to control whether
- 02:21:35 the elements automatically jump into a
- 02:21:37 new line when they exceeds the space of
- 02:21:40 the container or if they instead should
- 02:21:43 shrink in their size if I set this to no
- 02:21:46 wrap which is one valid value then we
- 02:21:48 can see in effect when I decrease the
- 02:21:51 width of my flexbox layout here because
- 02:21:54 we currently have Rho so the width is
- 02:21:56 important for distributing them across
- 02:21:58 the main axis left to right
- 02:21:59 so with your should be let's say 120
- 02:22:02 keep in mind that every label has a
- 02:22:05 width of 50 so free labels which is the
- 02:22:07 amount we have certainly have more width
- 02:22:10 than our container here so let's see
- 02:22:12 what the result is if I set the width to
- 02:22:15 120 you can see they're all squeezed in
- 02:22:19 there
- 02:22:19 so certainly each item shrank in size
- 02:22:22 it's not having a width of 50 pixels
- 02:22:25 anymore so flex box actually decrease
- 02:22:28 the width off the labels it overrode
- 02:22:30 this rule you could say because we've
- 02:22:33 set this to no wrap we're not allowing
- 02:22:35 items to wrap they're not allowed to
- 02:22:37 overflow either and therefore they
- 02:22:39 shrink in size we can change this by
- 02:22:43 setting it to wrap if we do allow
- 02:22:45 wrapping well then you will see that
- 02:22:47 each item keeps its width or height
- 02:22:50 depending on what your main access is
- 02:22:51 and simply chumps into a new line or
- 02:22:54 column again depending on what your main
- 02:22:57 access is so now we have this result
- 02:22:59 here might look a bit strange but keep
- 02:23:01 in mind we have that spacing here
- 02:23:03 because of the space around rule we set
- 02:23:05 so flexwrap can be interesting to you
- 02:23:08 when you have a scenario where you want
- 02:23:10 to have multiple items in one in the
- 02:23:12 same line and you either must have them
- 02:23:15 in the line so then you should set it to
- 02:23:16 no rep or you are okay with items
- 02:23:19 jumping into a new line or I'm always
- 02:23:22 saying line but of course line could
- 02:23:24 also mean column because line is only
- 02:23:26 correct if we have a flex direction of
- 02:23:28 row if we have a flex direction of
- 02:23:29 column we're talking of the space in a
- 02:23:31 column of course so that was flexwrap
- 02:23:35 now regarding the child properties I'll
- 02:23:38 not go through all of them definitely
- 02:23:40 feel free to explore and play around
- 02:23:41 with these properties on your own for
- 02:23:44 example you can even change the order of
- 02:23:45 elements here flex grow and shrink are
- 02:23:48 important for controlling which items
- 02:23:51 should shrink and by how much if they
- 02:23:53 need to shrink because of not enough
- 02:23:56 space being available as we just had a
- 02:23:58 look at it and the line self can be
- 02:24:00 interesting if you have an item that
- 02:24:02 should be aligned differently on the
- 02:24:04 cross axis than your items like here the
- 02:24:07 default is flex a start but let's say
- 02:24:10 the last item here should I actually
- 02:24:12 have Flex end now I will remove my
- 02:24:16 Whittier again so that we can see this a
- 02:24:17 bit clearer on the flexbox layout and
- 02:24:20 now if I set align self to Flex end for
- 02:24:23 the last label only as this reloads we
- 02:24:27 can indeed see that that last label
- 02:24:29 indeed deviates from the behavior of the
- 02:24:31 other labels so a lot of possibilities
- 02:24:34 there
- 02:24:34 you saw the most common properties and
- 02:24:37 how you use them in this lecture but as
- 02:24:39 I mentioned feel free to play around
- 02:24:41 with them to get a feeling for what you
- 02:24:43 can do there and what you can achieve