NS:IDE - 实现在运行时通过调用 Javascript API 来访问任何原生功能
NS:IDE - 实现在运行时通过调用 Javascript API 来访问任何原生功能。
JavaScript 混合移动开发
共94Star
详细介绍
NS:IDE
NS:IDE is the NativeScript IDE that lets you get 'inside' your device.
Access any native functionality at run-time by calling a Javascript API that binds to the Obj-C (iOS) or Java (Android) run-time.
Features
- Made in NativeScript
- Syntax highlighting
- Very dangerous auto-complete functionality based on
eval()
- Access to the whole native run-time, fully documented on nativescript.org for both iOS and Android (see note below)
- Potential to introduce TypeScript, if a contributor is feeling brave, or at least TypeScript's auto-completion (NativeScript is fully-typed!)
NOTE: I haven't yet implemented Android support because I lack the expertise to produce a syntax highlighter component for it, but it's perfectly possible in future.
Demo
See my teaser tweet for a video demo.
Example screenshots
Example usage
See the 'Examples' tab in-app (or view them in this repo).
See also my grimoire detailing many fun things to invoke.
API Documentation
The built-in auto-complete gets you the method and property names, but doesn't tell you what params to enter into functions. For this, you need to either make a good guess of what the JS-syntax equivalent is from how the native method is invoked (which is easy if the params are all primitives like numbers), or refer to the API documentation.
I myself use my custom TypeScript Playground loaded with the appropriate tns-platform-declarations
for each platform, as the official NativeScript Playground crashes if you add /// <reference path="../tns-platform-declarations/ios.d.ts" />
.
My NativeScript Playground is available:
You can consult the official documentation at: https://docs.nativescript.org
It's also immensely helpful to view the platform declarations directly: https://github.com/NativeScript/NativeScript/tree/master/tns-platform-declarations
Setup
This project assumes the following folder hierarchy:
.
├── nside
└── nativescript-syntax-highlighter
Where nside
is this git repository, and nativescript-syntax-highlighter
is the git repository of my NativeScript Syntax Highlighter plugin. That is to say, they are expected to be siblings.
Get my NativeScript Syntax Highlighter plugin
I haven't published it to npm, so you'll have to clone it from here:
git clone git@github.com:shirakaba/nativescript-syntax-highlighter.git
Install NS:IDE dependencies
In the root directory for this project (nside
), run this command:
npm install
And then maybe make yourself one of these:
(Build and) run
To run for iOS (Android is not supported yet):
# Compile the TypeScript sources to JS.
# (Do this in a separate terminal, as it's an interactive command)
./node_modules/.bin/tsc --watch
# Build-and-run on a simulator or real phone.
# (This is shorthand for "prepare, build and deploy".)
tns run ios
And now maybe make yourself one of these:
Full documentation for tns run ios
here. Useful flags to pass:
--hmr
: activates hot module reloading (I highly recommend it).--bundle
: I fall back to this when webpack starts misbehaving under--hmr
.--clean
: forces a complete rebuild. Useful if you run into caching problems.--emulator
: instructs NativeScript to run the app in the iOS Simulator even if you have your device connected.
Licence
Libraries
The NativeScript libraries are Apache-licensed (NativeScript-Licence.txt
), whereas this project itself use a GPL 3 licence LICENCE.txt
.
NativeScript Syntax Highlighter is Apache 2.0 licensed, and makes use of the MIT-licensed Highlightr iOS native library.
Art
The NS:IDE logo itself is made from images from the Firefox OS emojis under the Creative Commons Attribution 4.0 International (CC BY 4.0) licence. Modifications are as follows, and the Photoshop file can be consulted here (appicon.psd).
u1F50D-leftmagnifyingglass
– colours adjusted, and glass portion made transparentu1F4AC-speechbubble
– colours adjusted, and masked off to show only the speech linesu1F4F1-cellphone
– colours adjustedu1F52C-microscope
– (unused in the end, but present in the Photoshop file)u1F5AE-wiredkeyboard
– (unused in the end, but present in the Photoshop file)
More of my stuff
- LinguaBrowse (iOS) on the App Store – made in Swift
- LinguaBrowse (macOS) on the App Store – made in React Native + TypeScript + Swift
- Plucky Box (iOS) on the App Store, GitHub, expo.io as Android/iOS – made in React Native + TypeScript
- @LinguaBrowse – my Twitter account. I talk about NativeScript, React Native, TypeScript, Chinese, Japanese, and my apps on there.