Template for live coding is in live-coding-template branch.
##VIDEO Tutorial Angular Connect
npm i -g gulp
npm i -g cordova
npm i -g ionic
npm i -g ios-sim
npm i -g ios-deploy
npm i -g nw
> git clone ...repo
> cd repodir && npm install
> gulp dev:livereload
or simply npm run live
to test web in http://localhost:8000
> cordova create cordova net.tt.boardz BoardZ
> cd cordova
> cordova platform add ios --save
> cordova platform add android --save
> cordova platform add windows --save
> cordova plugin add cordova-plugin-whitelist cordova-plugin-statusbar cordova-plugin-splashscreen cordova-plugin-geolocation cordova-plugin-camera cordova-plugin-crosswalk-webview --save
> gulp cordova:default
> cordova run ios
- For live reload on iOS first open another terminal tab and run
> gulp cordova:watch:ios
- And to debug open
Safari
and then menuDevelop -> Simulator -> select localhost
and you get Develoer Tools connected to running app to debug HTML/CSS/JS/Stack Trace etc...
> cordova run android
For Windows open Win10 VM and copy ./cordova/platform/windows directory in local C:\PROJECTS\windows and
- open
C:\PROJECTS\windows\CordovaApp
solution withVS2015
and set CordovaApp.Windows10Set as Startup Project
and run withF5
###DESKOTP (NWjs: Mac/Win/Linux)
> mkdir nwjs && cd nwjs
> touch package.json && open package.json
and put this inside it
{
"name": "BoardZ!",
"version": "1.0.0",
"main": "www/index.html",
"window": {
"title": "BoardZ! Desktop",
"toolbar": false,
"resizable": true,
"fullscreen": false,
"width": 1024,
"height": 768
}
}
> gulp nwjs:default
> nw .
or simply npm run mac
to run native Mac application, that support Live reload and Debugging pressing SHIFT+CTRL+D
to open Chromium Developer Tools
- The same for other platform that you find in
./nwjs/build --> win32/win64/osx64/linux32/linux64
all Native desktop app!
- NodeJS NodeJS
npm i -g node-static
Installation of a web server- Git-Client (GitHub for Desktop)
- Postman https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop
- WebStorm
- Download and install the platform SDKs and/or emulators for the platform you want to develop for (this might take quite a while… so do this first!)
- Download and install node.js
- Download and install Atom or another editor of your choice (free:
notepad
, Visual Studio Code; commercial: Sublime Text, WebStorm)
The gulp task will build iOS, Windows Phone, Android phone apps as well as desktop apps for Mac OSX, Windows and Linux. To get it working, please do the following:
- Only after cloning the repo:
npm i
within the root folder of this repository - Live reloads:
- Run
gulp dev:livereload
to start a live server, which is best when developing the app - Run
gulp nwjs:watch
and withinnwjs
-foldernw .
for nwjs live reloading - Run
gulp cordova:watch:ios
and within the cordova foldercordova run ios
for cordova live reloading (only works for iOS, not for Android or Windows Phone)
- Run
- Run
gulp
to build all apps in release mode (will executegulp build:all:release
) - Debug Mode: Use the following gulp tasks to build the apps in debug mode
- Run
gulp build:all
to build all apps in debug mode - Run
gulp dist:default
to build the web app in (and usestatic
within the dist/ folder to explore the app) - Run
gulp cordova:default
to build all phone related apps - Run
gulp nwjs:default
to build all desktop related apps
- Run
- Release Mode: Use the following gulp tasks to build the apps in release mode
- Run
gulp build:all:release
to build all apps in debug mode - Run
gulp dist:release
to build the web app in (and usestatic
within the dist/ folder to explore the app) - Run
gulp cordova:release
to build all phone related apps - Run
gulp nwjs:release
to build all desktop related apps
- Run
- To login just use username = password (eg. user: bob, password: bob).
- If you don't want to use the Azure Web API, you can run the server by yourself by starting the BoardGame.Host project with Visual Studio and change the url within the AngularJS app. The server will run on port 9090.
- If starting the server leads into a TargetInvocationException, you'll need to add a url to your urlacl settings by executing the following command (on Windows :)) in an elevated command line:
netsh http add urlacl url=http://+:9090/ user=your_user_name
- Any modern web browser (Chrome, Firefox, Edge, Safari) by simply hosting it
- Mobile platforms (iOS, Android, Windows) by packaging the app using Cordova
- Desktop platforms (Windows, Mac OS X, Linux) by packaging the app using NW.js
- AngularJS, JavaScript framework — HTML enhanced for web apps!
- Angular Translate, i18n for AngularJS apps, made easy
- Angular Translate Static File Loader, loading translation from static json files
- UI Router, AngularJS routing framework
- ngSanitize, service for sanitation
- ngAnimate, service for animatio
- ngNotify, simple, lightweight module for displaying notifications
- Angular Loading Bar, an automatic loading bar
- Bootstrap, responsive layout framework
- AdminLTE, free responsive dashboard template
- Font Awesome, free icon font
- jQuery, JavaScript library required for AdminLTE
- winstore-jscompat, fixes jQuery issues with Windows (Phone) 8 and 8.1 platforms
- FastClick, eliminates the infamous 300 ms lag on touch devices
- three.js, JavaScript library for WebGL and 3D content
- Touch Polyfill, adds touch event support to Internet Explorer 11/Windows (Phone) 8.1
- Leaflet, an open-source JavaScript library for mobile-friendly interactive maps
- Angular Leaflet Directive, Leaflet directive for AngularJS
- Cordova
- Camera Plugin, allows native camera access
- Geolocation Plugin, allows access to geolocation
- Statusbar Plugin, allows modifying the statusbar
- Crosswalk Plugin, adds Crosswalk WebView
- Splashscreen, adds a splashscreen
- Ionic
- NW.js
- nw-builder, builds NW.js apps for Mac OS X, Windows and Linux via CLI