Monaca Mobile Development Blog

Tutorial: Create a Instagram Gallery App with Onsen UI + React

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…

Material Design in Onsen UI

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…

Mocha + Chai.js unit testing for ES6 with Istanbul code coverage

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…

Integrate Charts in your AngularJS Hybrid Apps with NVD3

There are many options out there if you want to display charts in hybrid apps. Since a hybrid app is basically a web application running HTML, JavaScript and CSS, you can use any JavaScript charting library or you can even generate charts in a backend and display them as static images. In this article we will take a look at NVD3 which are reusable charts based on the D3 data visualization library. We will see how it can be used to create a chart using pure JavaScript and also how the chart can be wrapped in an AngularJS directive. Some…

Make a YouTube app with AngularJS and Onsen UI

In this tutorial, we will learn how to consume YouTube Data API v3 JavaScript from our hybrid app with an Onsen UI interface using AngularJS. We will be able to add YouTube functionality to play videos and show them on top of our Onsen UI elements very easily! YouTube Data API v3 is the latest API that Google provides to interact with its famous video platform. They provide code samples for many languages such as Go, Java, .NET, Python, Ruby and, of course, JavaSript. In this tutorial, we will create and set up a basic YouTube player that will run…

LokiJS: in-memory NoSQL datastore for Cordova apps

LokiJS is a lightweight JavaScript in-memory database made by Techfort that provides a document-oriented alternative to the already well known SQLite. For many applications a NoSQL approach could be more preferable than relational data when working with complex object stores. LokiJS gives us the chance to do this in a very efficient way. LokiJS is intended to be used as an in-memory database with the possibility of persisting the data. It is compatible with Node.js (filesystem) and browsers, which means that it can be also used in our hybrid mobile Cordova apps (localStorage and indexedDB). A block of code is…

Onsen UI Roadmap: New release and Onsen 2.0

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…

Tutorial: Onsen UI with ui-router

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…

Develop with your favorite toolings with Monaca Localkit

banner_localkit_en_201506_large

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

img_run

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.

App Preview

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.

preview

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.

DOM Inspection and JavaScript Debugging

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.

inspector

Remote Build

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.

remote_build

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!

Happy Coding!

Follow Onsen UI at Angular U Conference!

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…