Coding

NativeScript Tutorial for Beginners – Build iOS, Android and Web Apps with NativeScript and Angular

  • 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