Menu hamburger icon

Tutorial


Integrating Monaca with API.AI

Cover Page

In this article, you will learn how to create a conversational app with Monaca Cloud IDE and api.ai. api.ai is a natural language interactions platform created by Google. We will demonstrate how to integrate Google’s api.ai with Monaca Cloud IDE using Angular 1 and Onsen UI v2. The integration is done based on apiai-cordova-client plugin.

The implemented features of this sample application are:

  • text conversation in a predefined languages: English and Japanese
  • voice conversation in a predefined languages: English and Japanese
  • language settings: currently available languages are English and Japanese

Creating Custom Modifiers

Onsen UI provides native-like styles for all the UI components that presumably work for most of the situations. However, sometimes we want to give our apps a personal touch in the shape of custom styles or animations. Let’s learn how to quickly implement custom “modifiers” to alter the style of our components in this article.


Creating Twitter Single Sign On App with Monaca using Angular 1 and Onsen UI v2

Authentication and Profile Pages

In this article, you will learn how to use Twitter Single Sign On (SSO) with Monaca Cloud IDE using Angular 1 and Onsen UI. The authentication is done by using twitter-connect-plugin. This plugin uses Twitter’s Fabric SDK to enable SSO with your Android and iOS apps. After a successful authentication, the user’s basic information will be displayed in the app.


Transpile projects with Monaca CLI

Monaca CLI is a command-line tool which makes local development of Monaca apps easier. Recently, a new function called “transpile” has been added to Monaca CLI. It can be used to transpile code for React/Angular 2 apps.

We will explain in details about the transpile option.


Creating a Pokémon hybrid app with Angular 2 and Onsen UI

Angular 2 Pokedex App

A couple of months ago we published an article on how to create a Pokedex application using Angular 2. Since then, the stable version of Angular 2 has been released and we have released the RC version of our Angular 2 bindings.

In this article we will use Onsen UI 2 and Angular 2 to create a simple mobile Pokedex app. We will use some of the code from the previous article, but we will integrate it with Onsen UI. We will also take a look at the Monaca CLI, which is a great tool for creating, debugging, and developing apps with Angular 2 and Onsen UI.


Love Pokémon Go? Create your own AR app in Monaca with Wikitude

Recently, Pokémon Go became very popular all over the world. Pokémon Go is using Augmented Reality principles by using smartphone’s camera to recognize objects and draw 3D objects in real-time.

Similarly, if you want to create an AR application in Monaca, Wikitude enables you to do so. It includes GPS location and image recognition through AR contents.

We will show you how to use Wikitude in Monaca app here.


Comparing frameworks: Hello World!

Framework comparison

The fact that Onsen UI is built on top of Web Components makes us proud to be framework agnostic. However, there are so many options out there that we can feel overwhelmed when it comes to choosing a front-end framework to develop with. Especially for those who don’t have a large background in web programming, deciding which framework works better for them could be a tedious task.

Have you already chosen your framework to work with Onsen UI? For those who still don’t have a preference, in this article we show how to make a simple Hello World app with some of the existing alternatives: Vanilla JavaScript, AngularJS, Angular 2, React, Vue.js and Knockout.js.


New Udemy course for beginners: Build your Apache Cordova/PhoneGap app

Title

This time, we have a special treat for all beginners who want to develop beautiful apps, but don’t know where to start. One of our Senior Software Engineers, Bryan Ellis, created a short Udemy course for those that need a little help getting started with Cordova app development. It takes less than 2 hours and is extremely easy to follow. Without any excuses, it’s time to build apps!


Create reusable and future-proof UI components with Custom Elements v1 and Web Components

Custom Elements is a part of Web Components

Onsen UI is a UI component library built on top of Web Components. Web Components is an emerging standard that is designed to make it easy to create reusable UI components using APIs that are native to the browser. One clear advantage of this is that the components that you make are not tied to a single library or frontend framework.

In this article we will take a look at the advantages of using Web Components and also at the Custom Elements v1 API that was recently finalized and is looking to become the de facto standard for registering and adding behavior to custom tags.

Web Components is in my opinion not only a technology for writing encapsulated components that can be plugged into our apps, it is also a way to help us stop reinventing the wheel and implement the same components for every framework or library out there.


Getting Started with Meteor and Onsen UI

Onsen UI + Meteor

Meteor is very well known as a full-stack framework that tremendously simplifies the creation of web apps. Thanks to Cordova we can also use Meteor for hybrid mobile apps and, after the last changes we made to our framework and bindings, we are excited to announce that you can find a robust Meteor Mobile UI framework in Onsen UI.

In this post we show you how to easily combine Meteor with Onsen UI to create beautiful looking mobile apps.


Creating a Pokémon application using the Angular2 CLI

Angular 2 Pokedex App

We recently launched the beta of our Angular2 components for Onsen UI. Angular2 is a brand new framework and people are just starting to get familiar with it. We have decided to start a series of articles to help people get started with the framework. This article is the first in the series and will explain the very basics such as how to set up the environment and how to create and run a simple app.

We will be using the newly released Angular2 CLI tool since it makes it very easy to get started without having to fiddle with things like Webpack and setting up the testing environment and linting.

Since this is the summer of Pokémon, I decided to create a simple sample app that displays a list of Pokémon. The data is fetched from the public PokeAPI. The API is open source and available on GitHub. Please give it a star if you like it! :)

The current app is very simple, all you can do right now is see pictures of all the Pokémon and what their name and number is. We will expand this app in a later article to add more features such as routing and searching.


Real time Chat App with OnsenUI and Horizon!

Horizon, RethinkDB and Onsen UI 2.0

A lot of modern apps like Twitter or Facebook work in real time: They update themselves when new information is available without the user pulling to refresh. With modern real time database like RethinkDB and the JavaScript Framework Horizon this task is as easy as writing any other JavaScript Application. In this tutorial we will build a simple chat app with MobX and the React Components for Onsen UI.


It's all about time: Building a performant Stopwatch with MobX and React - fast

MobX React Stopwatch

In recent posts we spoke a lot about developing React applications with Redux: It enables the users to easily make testable and structured applications. However, writing a Redux application produces a lot of boilerplate code. One framework alternative is MobX, which solves this problem by doing automation using observables.


Time Travel in React Redux apps using the Redux DevTools

Time Travel with the Redux DevTools

In the previous article we showed how to create a simple drawing application with React and manage the state of the app with a Redux store. Now we will talk about how to integrate the Redux DevTools to enable easy debugging and time travel.

The Redux DevTools records dispatched actions and the state of the Redux store at every point in time. This makes it possible to inspect the state and travel back in time to a previous application state without reloading the page or restarting the app.


Improving Your Development Workflow with Webpack, React Hot Loader and Onsen UI

Onsen UI Hot Reloading

One of the great things about React is that there are a lot of tools and libraries available. One of the most popular is the React Hot Reloader by Dan Abramov, who also created Redux. The React Hot Reloader enables developers to make code changes and apply these changes without the application losing its state. In this tutorial we will build a small application step by step to demonstrate the power of Webpack and React and also show how OnsenUI users can benefit from it.


Building Cordova apps with React Components for Onsen UI

Onsen UI environment

With Cordova it is easy to build functional hybrid apps for all the major mobile platforms, including Android, iOS and Windows Phone. However, making the apps look good is a much harder task. Luckily, with the help of the Monaca CLI and React Components for Onsen UI this became much easier. In this blog post we are going to look at some benefits of using these technologies.


Building a Calculator App with Redux and Onsen UI

Redux and Onsen UI

There are many frameworks and concepts around in the JavaScript world. In today’s blog post we are going to write a pure mobile JavaScript application with Onsen UI and Redux, which is a very small but powerful library that enables to write JavaScript applications in a conceptually different way.

Redux is inspired by Flux, which was developed by Facebook. Unlike Flux, Redux is quite flexible and does not require any specific infrastructure like GraphQL. We will use Redux in combination with Onsen UI to build a simple Calculator mobile app. One of the nicest things about this app is that it will look native, both on Android and iOS, due to Onsen’s autostyle feature.


Style your app automatically with Onsen UI

Automatic Styling

As we mentioned in a previous post, we just released a new killer feature called automatic styling for Onsen UI 2.0. This feature allows you to style your app for both iOS and Android automatically with little to no effort.

In this post we will explain how to make a sample To-Do app step by step using as many Onsen UI 2.0 features as we can: implementation in Vanilla JavaScript (framework agnostic), automatic styling, notification promises and combination of Navigator + Tabbar + Splitter (new sliding menu) in the same app.


Trying out JavaScript ES6 using Babel

Babel

ECMAScript 2015, commonly referred to as “ES6”, is the current version of the ECMAScript Language Specification standard. The support for this new ES6 features is on its way though it will take some time to be fully supported in modern browsers. This blog post will introduce how to use Babel, a JavaScript transpiler, for those who want to try out ES6 in advance.


Build a Places App with Foursquare and Google Maps using Onsen UI and AngularJS

OnsenUI-Places

In this tutorial we are going to learn how to use the Foursquare API and Google Static Maps API to create a Places App with Onsen UI and AngularJS. In this app we will be able to search for a particular place and filter the results by food, shops and outdoor places. There will be also an integrated static map which will lead to the Google Website once clicked.


Create your Kintone app using Monaca

Kintone by cybozu.com

Kintone by Cybozu lets you quickly and easily build your own customized business applications such as daily reports, minutes, time-card, and surveys. It also lets you create applications using Excel or CSV files to satisfy your own needs.

Kintone provides a lot of features in the web browser but here we focus on developing using Kintone API and Monaca to transform your custom business application into a hybrid mobile application.


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

Chai and mocha

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.


Integrate Charts in your AngularJS Hybrid Apps with NVD3

D3.js

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.


Tutorial: Onsen UI with ui-router

Onsen UI Theme Customization

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.


Tutorial: Customizing Onsen UI Themes

Onsen UI Theme Customization

Onsen UI has a wide set of premade themes, which cover a rich set of color combinations. Although the default colors look good, when creating an app with Onsen UI we recommend customizing the theme to give the app a personal touch. Branding is important since it differentiates your app from others and makes it easily recognizable.

How can the developer modify these themes, to give the Onsen UI components the desired colors? There are two ways to accomplish this.

The first one is to use our Theme Roller Tool, which provides, thanks to an intuitive graphical interface, an easy way to customize Onsen UI themes.

The second way to customize themes is by modifying and compiling the Stylus files. Using an automated gulp task and live reloading this approach also powerful and easier to integrate into a normal developer workflow.


Tutorial: create a sample app with Windows Phone 8.1 and Onsen UI

Onsen Windows

As you know, last week we announced the new version of Onsen UI, which offers Windows Phone support. If you have missed it, take a look here. We promised updates and guides about the new tools implemented to develop hybrid applications compatible with Windows Phone 8.1. That’s why, in this tutorial, we will explain how to develop a Cordova app based on Onsen UI and compatible with Windows Universal platform, which includes Windows Phone 8.1.


Using CSS3 Transitions for Smooth Animations

CSS3 Transitions

Este artículo en español

CSS3 provides a way to create transitions between states with really smooth animations. When we want to modify the style of any element, usually changes are applied instantly. With transitions, this behavior is modifiable, allowing us to easily set not only how long does it takes to change but also the way it does with some simple directives. This customization will give us the possibility to change the look and feel of our applications by just including these easy to create transitions instead of inefficient JavaScript animations.


Developing hybrid mobile applications with Onsen UI

Este artículo en español

Hybrid mobile applications have become trendy in the last years. Writing native applications could be hard for casual developers, those who don’t know too much about programming and just want to make a simple app (or not so simple) as quickly as possible. It requires learning different programming languages (and different ways to interact with each device) for every platform where you want to deploy your application, although it certainly has some advantages: best possible performance, full access to the device hardware, etc.


Onsen UI-Tutorial: AngularJS Essentials for Using Onsen UI Part 2

Part 2: Click Events and DOM Manipulation

We are going to learn how to add click events within apps developed with Onsen UI. This blog entry is in response to frequently asked questions from users who are familiar with jQuery but not with AngularJS.

We are going to register click events to buttons, and dynamically change CSS classes of HTML elements.


Onsen UI-Tutorial: AngularJS Essentials for Using Onsen UI Part 1

Part 1: Basics

Since the official release of Onsen UI 1.0, we have been receiving more inquiries relating to AngularJS. Onsen UI is a front-end UI framework built on and optimized for AngularJS and Topcoat, which were developed by Google and Adobe respectively. This means that Onsen UI requires basic knowledge of AngularJS. Therefore, we are going to learn today the helpful basics of AngularJS to use Onsen UI.