As you probably already know, Onsen UI is based on AngularJS. Nevertheless, many of our users asked if it’s possible to use it with other frameworks, especially React. In this tutorial, we will show you how to develop a very simple Instagram app by using Onsen UI and React. We will create a simple gallery using React and Onsen UI! Although the current stable version of Onsen UI is 1.3.11, we will be using the development version of Onsen UI 2.0. We are getting close to releasing the alpha version and it is already quite stable. Onsen UI 2.0 is…
We have some exciting news for all of you developing hybrid apps for Android! Onsen UI 2.0 is adding Material Design! Since Onsen UI hybrid app framework can be used to create apps for iOS and Android, it makes sense to provide native-like UI components for both platforms. That’s why we are currently implementing Material Design, adding new components alongside the current iOS based ones. Many users have requested the Material Design support. We’ve listened to those voices and are working hard to make it available for you as soon as possible. Material Design is currently being implemented in parallell…
Testing is very important for finding bugs, verifying the functionality and improving the general stability of a piece of software. Almost all (if not all) developers test their code in some way. One way to test would be to manually run the program and try out all the functions to see if everything is working as expected. Another (and better) way is to write automated tests that are run every time the code changes. In Onsen UI we do end to end testing of all the AngularJS directives using Protractor and we also test the internal logic of the components…
We would like to give you an update on what we’ve been working on lately and what we have in store for the future. Onsen UI 1.3.4 was just released with a bunch of improvements. As we’ve mentioned earlier we’re also hard at work with the next major release of Onsen UI which will be version 2.0. We’re really excited about this release and we hope you are too! We now have a Gitter channel We realized that there hasn’t been a good place for general discussion about Onsen UI so we decided to start a Gitter channel. Come and…
AngularUI Router is perhaps one of the most used modules out there for AngularJS that allows you to organize the parts of your interface into a state machine. Onsen UI doesn’t use URL routing but navigates from one page to another programmatically using the custom elements. However, since in ui-router we can define state transitions and not only URL routes we are able to combine Onsen UI and ui-router in the same app. Learn here how to do it. Routing in Onsen UI Onsen UI uses its own route system and was not meant to be used with an external…
We just released the latest tool in our Monaca platform, Monaca Localkit. Localkit provides a local development option powered by the Monaca Cloud platform, with an intuitive GUI interface.
Monaca Localkit is a standalone application for Windows and Mac OS X. You can download it by accessing the Localkit page, or the Localkit manual page. With Monaca Localkit, all the development can be done on your computer, but you can still use our Cloud powered services for additional features. The features include:
- Creating, editing, debugging and testing Cordova app on the local computer.
- Previewing and inspecting apps in the local computer.
- Debugging and testing app with Monaca Debugger with live-sync using local Wi-Fi connection.
- Built-in inspector with Monaca Debugger via USB debugging.
- Remote build using Monaca Cloud.
In this post, I will highlight some of the fancy features of Monaca Localkit.
Comes with Installer and GUI
Monaca Localkit comes with a standard installer, and packs all features in the GUI. No need to setup platform SDKs and other tools. Localkit works instantly after the setup.
If you want to use it from the command line? Then, you can use Monaca CLI that have the same feature as Localkit but provided as a command line tool.
Localkit have built-in preview and inspecting functionality. Just click on “Preview” button on the project and you will see your app running with the DevTools opened. The changes made to the source code will instantly live-reload the preview window.
But the preview does not run the native code. Therefore, you probably want to run on the device which is described in the next section.
Running on the Device
With installing the complimentary Monaca Debugger, you can run the app on your device that is connected using local Wi-Fi connection. Monaca Debugger is available for Android and iOS devices, and can be downloaded from iOS App Store or Google Play Store.
Once Monaca Debugger is installed on the device and connected to the same network as Localkit, the debugger will find Localkit and ask you for the pairing. After the pairing is done, you can see the device in the Localkit interface.
Localkit built in the debugging tool for DOM inspection and JS debugging, which is known as DevTools. Indeed, we are providing the same functionality of Chrome DevTools into Localkit, for both iOS and Android devices connected to either Mac or Windows machine. Yes, now a Windows machine can debug iOS apps!
To do so, just plug the device into the computer via an USB cable and click Inspect button. It will run flawlessly when you use Android High Performance debugger. However, due to the Apple limitation that they don’t allow public iOS apps to available USB debugging, you need to build a Custom Monaca Debugger to do the job. For more details, please refer to the documentation.
Monaca Localkit gets more power when it connects to Monaca Cloud. Without any local setup, Monaca Remote Build service will build your app for iOS, Android, Windows and Chrome Apps. All configuration can be also done in the simple interface.
Start Developing Right Away!
In this post, I described some of the nice features of Monaca Localkit. Monaca Localkit provides 30-day evaluation period for the users under the Basic (free) plan. Please try the stress-free development environment and share your experience with us!
Dear followers, as many of you probably already know, this week, in San Francisco, the Angular U Conference 2015 will be held. For those of you who never heard of it, Angular U is an Angular conference covering Angular 1.x, 2, TypeScript, ECMAScript 6, Web Components and more. That’s why we couldn’t miss this event! Andreas Argelius, core developer on Onsen UI and Monaca, will attend the event and talk about “Angular + Cordova + Monaca = Killer mobile app development”! From June 22 to 25, at Hyatt Regency, close to San Francisco Airport, AngularJS developers and enthusiasts will meet…