NativeScript - First Steps

Install node and npm on Linux or Mac, set up the node version manager n, and verify node and npm versions to begin native script development.

Configure the correct node version with n for native script. NativeScript supports node 8.15; if you don't see it, install 8.15.0 via the command line and activate it.

Install the native script cli across mac, linux, and windows with npm -g nativescript. Use sudo for permissions and reference the dns shorthand to upgrade to the latest version.

Learn how NativeScript exposes a unified JavaScript API across iOS and Android, using CLIA to call the native APIs, with core modules and plugins for UI, widgets, and fetch.

Learn to create your first native script project from the command line, choose plain javascript, initialize with native script packages, and build a simple hello world app.

Learn how to run a NativeScript app on iOS using a Mac, install Xcode from the App Store, and build for an iPhone to view on iOS.

Trim the hello world in native script by removing boilerplate and comments, leaving a minimal bootstrapped app, and learn how to enhance your native script project.

This lecture introduces JavaScript in native script layouts, explains frame as a container for pages, sets the main page with a hello world label, and teases code behind files.

explore how the code behind file powers the user interface by handling the business logic with javascript, fetching data, and updating UI elements.

Discover how event handlers in NativeScript trigger methods when a page loads, with exporting the function from the code behind and observing a console log as the page initializes.

Learn NativeScript action bar and basic widgets, including setting the action bar data and title, plus basic left or right icon customization.

Learn to create and customize a button in NativeScript, including text, on tap handlers, and console logging, plus styling with primary and active classes, layout considerations, and enabling or disabling.

Learn to create and customize an alert dialog in native script using the load API, with configurable title, message, buttons, and Android/iOS cancel behavior.

Create a custom confirm dialog in nativeScript that returns a promise on close; customize title, message, and button texts, and handle true/false results from user actions.

Learn to use the prompt dialog in NativeScript by configuring title, message, and buttons, and by passing a configuration object with default text and input type.

Learn how a label widget in NativeScript displays text using the text attribute, and how to enable text wrap, set text alignment, and customize background and text colors.

Explore how to create a text field in NativeScript with customizable properties, secure input, keyboard types, return key actions, and max length constraints to build interactive forms.

Load images in a native script app from internet or local resources, using Resources folder or directory, and apply stretch modes such as none, fill, aspect fit, and aspect fill.

Debug native script apps with Chrome dev tools, replacing plain console logs with richer, timed, and profiling insights. Learn to set up Chrome dev tools for debugging.

Use Chrome dev tools and terminal commands to set up debugging for a NativeScript app, enable hot module replacement for live code updates, and inspect console logs.

Discover what data binding is in NativeScript, connect your code-behind logic with the UI, and reflect changes across code and UI using binding and observables.

Create your first binding by accessing the page object on load and setting a binding text with properties like text1 and text2, enabling data binding to the UI.

Master one way data binding in native script and contrast it with two way binding, using a binding context, text field, and label to show updates.

Learn two-way data binding in NativeScript by connecting view and logic so binding context updates reflect in the view and user input updates propagate back to the logic.

Learn to enable two-way data updates between ui and logic in NativeScript by wrapping an object with fromObject and observable to keep the binding context in sync in real time.

Learn absolute layout in NativeScript by positioning components with explicit left and top coordinates from the top-left origin; it's rarely used but useful for games.

Learn how stack layout in native script arranges elements in vertical or horizontal stacks, control orientation, height and weight, and colors, and compare with flex box layout for responsive designs.

Explore NativeScript's flex box layout: define flex direction, justify content, align items, and wrap to build UI layouts with stacked or wrapped items.

Explore grid layout in NativeScript, learning to define rows and columns, place elements by row and column, and use star and auto sizing to create adaptive galleries or layouts.

Create a simple native script game that shows a ball and requires you to stop it before it touches the floor, while tracking score with basic math and physics concepts.

Set up a NativeScript layout and CSS for a game: create a full-screen container, an FBI performance label, and basic styling to initialize the game world.

Set up the native script physics js renderer and create a world with configurable bodies and forces. Install via dns, wire to the page, and render world at 60 fps.

Add a ball to a NativeScript physics world by defining addBall with x,y, a circular body of radius 20, image, and restitution 0.4, and enable edge collision and gravity.

add a wall and a yellow floor to the physics world in NativeScript, using a rectangular floor, center positioning, and color to ensure the ball rests on the floor.

The lecture covers handling the onTap event in a NativeScript game, implementing a 100 ms delay, calculating the click-ball delta, and pushing the ball to make it jump.

Implement applyForce by computing the ball position and touch, deriving a distance vector, normalizing to a unit direction, and applying a sigmoid-scaled inverse-distance force with a magnitude via touch input.

Detect collisions in a NativeScript game by querying if the ball and floor collide, triggering a touch down alert, pausing the physics world, and signaling game over.

Add a reset icon to the action bar and wire an on reset function to restart the game by resetting the ball’s physics state, including velocity, acceleration, and angular velocity.

Learn to add a scoreboard in NativeScript first steps by wiring a two-way bound taps and seconds counter using observable data and a timer, with reset and replay handling.

Explore styling NativeScript applications using css, and become familiar with the options available for css in NativeScript. Learn how css works with NativeScript to create awesome layouts.

Global CSS applies styles across every page in the app, acting as a universal style sheet; you can override it by using a differently named global CSS file and import.

Learn to implement page-specific CSS in NativeScript by using a page.css file named after the page, apply a black background, and understand style specificity from global to page to inline.

Master inline CSS in NativeScript first steps by applying inline styles via style directives to a button, adjusting color, opacity, background, and class-based tweaks for real-world UI.