This course introduces web developers to NativeScript, an open source framework for building native iOS and Android apps. Learn how a real app is constructed with NativeScript, discover its features, and alternate paths of development.
Want to learn how to build native apps easily with free tools? This course introduces web developers to NativeScript, an open source framework for building native iOS and Android apps. First, you'll see the initial installation of NativeScript and configuring the modern open source Node.js-based ecosystem. The app that you will be building is a native mobile app developed for a fictitious company, RPS, to help its conference attendees view the conference schedule and create their own agendas. You will be guided through the app development process by seeing reasons behind each choice made to implement a feature, as if the author was an employee of RPS that was tasked with building the conference app. In each module, you'll be introduced to a new concept by implementing an app feature. By the end of this course, you'll be better prepared to tackle a full implementation of a real native app using freely available tooling.
Configuring Your Environment The NativeScript CLI, or command-line interface, is a tool that you will use to scaffold, build, and run your applications in your development environment. The CL runs on Windows, Mac, and Linux, and has the same set of commands on these platforms. There are a few tools that the CLI depends on for this operation, such as Node, Android SDK, as well as Xcode on the Mac. Although you don't have to interact with these tools directly during your day-to-day NativeScript development, these tools should be installed as the NativeScript CLI uses them. In this module, we will review the initial setup required to get you going with NativeScript development using the CLI. If you're developing on a Mac, we'll see how to get iOS specific dependencies installed. For all of our environments, I'll show you how to run an installation script to set up dependencies, we'll see how to install Node and the NativeScript CLI, and finally we'll take a look at the tool I'll be using to write code in this course, Visual Studio Code, as well as the NativeScript extension for Visual Studio Code. I'll also show you how to keep your Visual Studio Code app folder looking clean while you're developing.
UI Basics In the last module, we saw how pages are created in NativeScript. Pages are the root of every view and typically have many components nested in them. NativeScript's built-in modules provide many of the components you will use to compose your application user interfaces. You can even create your own custom components and compose those together as well. If this sounds familiar to you, then you've probably worked with other UI frameworks before, WebClient frameworks such as Angular 2 or Aurelia, or several frameworks such as ASP. NET. In this module, we will be introduced to the concepts behind using UI elements in NativeScript and how they translate to native UI elements. We will show top-level UI components and how they interact with lower level components, explain how observables work with property binding and event binding. We will start with layouts, which are also types of components, move on to widget components as we build out our conference app, then we will see how to use data and event binding with our observable ViewModels, and cover gestures and CSS styling. If you need to review what role observables play in the MVVM pattern, please review the core concepts module.
Navigation In the previous module, we used data delivery services to get our app displaying sessions and speakers. We have a bit of a problem, though. Our list on sessions is on one page, and our speaker details is on another page. In this module, we will solve this problem by creating a master detail relationship between the list of sessions on our main page, and the session details page, and we will do this using NativeScript's navigation techniques. We will also add other pages to our app to fulfill the requirements, and demonstrate different navigation options while we do it. We'll discuss two major players in the NativeScript navigation world, the Frame class, which allows us to navigate forwards and backwards, and its counterpart, the NavigationEntry class, which is the configuration object that is used to control navigation. We'll learn how to use two UI components for navigation purposes, the SegmentedBar and the SideDrawer, and we'll see how to spice up your navigation visually using transitions. And throughout the module, we'll apply these techniques to our conference application as we learn about them.
Course Summary NativeScript is an incredible technology to develop native mobile applications. Whether you're a web developer that's always wanted to get into mobile development, but felt like your skills wouldn't deliver the best experience for your app users, or you're a native developer who knows one platform or another, but not both, NativeScript could help you out. This has been an introduction to NativeScript and what it can do for you to help you with your mobile application goals. We've developed the customer conference application for our company, RPS, as we applied what we've learned throughout the course. And you're walking away with basic knowledge about how NativeScript UI components work together, how to architect and organize your applications, how to mock data and fetch real data from remote source, and how to navigate pages and create animations. I'm so glad you've come on this learning journey with me to start learning NativeScript. I've really enjoyed building applications with it myself, and I look forward to sharing even more knowledge on NativeScript with you soon in the next NativeScript course coming to Pluralsight.