August 2016 Summaries

Ionic 2 offers developers an efficient way to create visually appealing app components, including a grid component that simplifies layout processes by eliminating the need for complex CSS coding. Utilizing Ionic's grid component, developers can easily create structured layouts for applications, such as a photo gallery app that uses Ionic Native’s Image Picker plugin to display selected images in a clean, two-column format. The grid component is highly flexible, supporting various attributes for complex layouts and rendering consistently across different platforms and devices by using Ionic 2 with Angular 2. The blog post illustrates how to set up and use the grid functionality with a practical example, emphasizing the advantages of a declarative approach to layout design. For further exploration, readers are encouraged to view the grid component documentation and access the sample app on GitHub.

In an announcement from August 31, 2016, Matt Kremer introduces the Google Maps component for Ionic Creator, highlighting it as a highly requested feature. The component facilitates the integration of Google Maps into projects with ease, providing automatic setup of necessary dependencies, custom directives, and API keys. Users can add maps through a simple drag-and-drop interface, specifying locations and zoom levels, while more advanced customization is available through direct JavaScript and HTML code access. The feature is accessible with a Creator Pro account, which also offers additional benefits like custom code support and mobile package support. Kremer encourages timely subscription to take advantage of a promotional discount and invites users to subscribe to the newsletter for more updates.

Ionic 2 provides an efficient platform for building Progressive Web Apps (PWAs) by offering native-like components and a robust base, thus simplifying the development process. PWAs built with Ionic 2 can seamlessly function as native apps because they are optimized for performance and are designed to be installed on a user's home screen, offering a similar experience to native apps. To transform an Ionic 2 app into a PWA, developers need to add a web manifest and a service worker, which are not automatically provided by Ionic but can be easily implemented. The web manifest allows the app to be installed on the home screen, while the service worker enables offline functionality. Ionic 2 facilitates this process by integrating web technologies that perform well in browsers, making it a practical choice for developers aiming to create efficient and user-friendly PWAs. The company is committed to further enhancing support for PWAs, positioning them as a crucial platform for future Ionic app deployments.

MarketWatch, a financial news and market data app owned by Dow Jones, leverages the Ionic framework to deliver a seamless experience across iOS and Android platforms. The app caters to the MarketWatch.com community and those interested in market news and personal finance, aiming to be a critical resource for financial planning. The development team, with more expertise in web than native development, chose Ionic for its compatibility with web technologies and the ability to reuse existing libraries and plugins. They customized a three-tab template with side menus, ion-lists, slide boxes, and modals, and successfully integrated Urban Airship for notifications and a custom OAuth solution for user connectivity. Challenges included managing plugin updates and syncing their watchlist service, which were addressed with scripts and Angular broadcast events. Despite these hurdles, the team praised Ionic for its performance and plans to add more features, confident in the framework's ability to enhance the app's functionality.

PhoneFlare is an Ionic-based mobile app available on iOS and Android designed to enhance personal safety by allowing users to trigger alarms in unsafe situations through actions like pulling an accessory from the headphone port or pressing a button. Developed by Chris Jarvis, the app supports features such as setting check-in times, sending location-based alerts, and contacting campus safety, with advanced functionalities like audio recording and UDID logging. It is particularly aimed at preventing sexual assaults on campuses but also serves broader demographics like children and the elderly. The development leveraged Ionic and AngularJS for a seamless cross-platform experience, benefiting from the community's support and the ease of using Cordova plugins. Jarvis highlights the advantages of Ionic, such as rapid prototyping without mockup software, intuitive design changes, and live debugging capabilities, all of which contributed to a positive development journey.

NG2-Translate provides a simple solution for localizing apps built with Ionic 2, which is based on Angular 2, by offering a pipe and service with observables and methods to translate both static HTML strings and JavaScript values. This ease of integration allows developers to quickly make their Ionic 2 apps accessible to users in multiple languages, enhancing the app's usability and reach. The library exemplifies the benefits of the Angular 2 ecosystem, which in turn benefits the Ionic 2 framework as it continues to grow and incorporate useful tools and libraries. For developers interested in implementing NG2-Translate, resources are available to guide them through the process, potentially expanding their app's user base significantly.

In a major update, Creator has introduced Custom Code Support, a suite of features that allows users to build dynamic apps within the platform without needing to export locally. This update includes One-Click Addons for easy integration with services like Firebase, Kinvey, and MixPanel, as well as the ability to edit JavaScript controllers directly in Creator, enabling the addition of real data and code. Users can incorporate JavaScript files, Services, Directives, and take advantage of Route Parameters for dynamic page creation. The system also supports Angular or Custom Directives and {{templateTags}}, providing flexibility in app development. Additionally, users can test their apps using Creator Mobile or export them with Package, including Cordova Plugins, to run on Android or iOS devices. This comprehensive update aims to streamline the app-building process, empowering users to develop robust applications entirely online.

Ionic has announced significant performance improvements for its apps on iOS by transitioning from the older UIWebView to the more advanced WKWebView, which Apple now mandates for iOS apps. This update, spearheaded by engineer Manu, promises faster and smoother performance for Ionic apps, addressing technical challenges such as XHR requests, CORS, and memory usage issues. The transition to WKWebView is a drop-in replacement, requiring no changes to app code, and is expected to enhance stability, security, and adherence to web standards. While the plugin is ready for testing within the Ionic community, the team advises against its use in production until a stable version is available. Additionally, Ionic encourages developers to explore Capacitor, its cross-platform app runtime that also utilizes WKWebView by default on iOS.

In part three of a series on building a MEAN stack Ionic 2 Todo app hosted on Heroku, the focus is on enhancing the app's functionality with add, update, and delete features using Angular 2 components. The app's backend, established in previous parts, utilizes a Node.js server with Express to define API endpoints for a MongoDB database. The tutorial explains how to implement these CRUD operations by updating the `TodoService` with HTTP methods to interact with the API and adjust the HomePage component to reflect these changes in the interface. Additionally, the process of incorporating a new TodoEdit page is detailed, allowing users to view and edit individual todos. The overall aim is to demonstrate the integration of Ionic 2 and Angular 2 with a Node.js backend, culminating in a deployable application on Heroku. The guide concludes by encouraging users to commit their changes and deploy the app, highlighting the ease of use provided by Heroku.

In this continuation of a series on building an end-to-end Ionic 2 application, the focus shifts to developing the frontend of a Todo app using Angular 2 and TypeScript. After setting up an Express app and MongoDB database in the previous installment, this part demonstrates how to create an Angular service, `TodoService`, to fetch Todo items from the backend API. The service utilizes Angular's HTTP module and Observables to manage asynchronous data requests. The frontend involves defining a `Todo` class for type-checking and updating the `HomePage` component to display the fetched Todo items using Angular's `*ngFor` directive. Additionally, the text explains how to style the app using SCSS and run both the frontend and backend servers to view the application in action. The series aims to transform the app into a functional Todo manager by expanding the `TodoService` for adding, updating, and deleting Todos in the upcoming final installment.

The blog post outlines the initial steps for creating a full-stack MEAN (MongoDB, Express, AngularJS, Node.js) application using Ionic 2 and deploying it on Heroku. It begins with an introduction to the MEAN stack, highlighting its appeal for JavaScript developers due to its use of a single language and data format across the stack, thereby reducing complexity. The tutorial proceeds with setting up an Ionic 2 app in TypeScript, configuring a Node.js backend with Express, and connecting to a MongoDB database via Heroku's mLab addon. It includes instructions for initializing a Git repository, deploying the app to Heroku, and establishing a basic RESTful API with CRUD operations for managing todos. The post concludes by encouraging readers to prepare for the next part of the series, which will focus on building out the frontend using Angular 2 to display data in the app.

The text provides a detailed walkthrough of using the Image Picker plugin in an Ionic app to access and select multiple photos from the native photo applications on iOS and Android devices. Building on the previous part that introduced the Camera Plugin for selecting a single photo, this segment enhances functionality by allowing users to choose several images at once, which are then returned as file URIs to the app. The author describes the process of setting up the plugin, including installing dependencies, configuring options like maximum image count, and integrating the plugin into the app's code. Once the user selects the images, the app navigates to a gallery page to display them, demonstrating the ease of accessing native device functionalities through Ionic and Cordova.

Alex Muramoto's blog post from August 15, 2016, provides a guide for app developers on how to access photos from the iOS Photos and Android Gallery using Ionic 2 with the Ionic Native Camera plugin. The post explains the process of setting up a new Ionic project, adding the Cordova Camera plugin, and coding a function to retrieve images from a device's native photo app. By utilizing the Camera.getPicture() function and customizing options such as source type, destination type, and image quality, developers can create an app that allows users to select photos from their gallery, with the image then displayed within the app. The post also offers tips on deploying the application to a real device for testing, either through the Ionic View app or direct deployment, and encourages engagement with the Ionic Native community on GitHub.

In an effort to enhance the user experience of an Ionic app with offline support, this tutorial discusses creating a network alert system using Ionic Native Plugins and Angular's HTTP module. The solution involves developing a service that detects the absence of an internet connection and prompts users with an alert, offering them the option to open network settings. By integrating the Ionic Native Diagnostic and Network plugins, the tutorial demonstrates how to create a reusable NetworkService with methods to check for an internet connection and trigger alerts. It further explains how to wrap Angular's HTTP module with a custom SafeHttp service to seamlessly handle network requests and fallback to alerts when offline. The tutorial emphasizes the importance of considering network availability in app design to ensure a smooth user experience, and provides code samples and implementation guidance for developers interested in applying these techniques to their own projects.

The blog post discusses building an Ionic weather app with offline support using SQLite, a mature database with strong compatibility across iOS, Android, and Windows Phone. It outlines the process of setting up the app, which is capable of storing seven days of weather data locally, allowing users to access it offline. The tutorial involves steps such as setting up SQLite tables, importing necessary plugins, and writing functions to save and retrieve data. By leveraging local storage, the app improves not only offline functionality but also overall performance by reducing expensive network requests. The article concludes by hinting at a follow-up post that will address handling situations where data cannot be retrieved from either the database or the network, and invites readers to explore the code on GitHub for further insights.

The eighth episode of the Ionic Show highlights the upcoming release of Ionic 2, featuring discussions by Max and Ben on various topics such as Ionic Cloud, Ionic Native, Progressive Web Apps, and code editing in Ionic Creator. The show also includes a segment on a featured app and even a light-hearted discussion about beer. Additionally, the show has expanded its accessibility by becoming available as a podcast, with episode 8 set to go live later in the week. The blog encourages readers to join their newsletter for updates and mentions related posts about Capacitor and building fast Progressive Web Apps (PWAs) using SvelteKit and Ionic.

Starting in August 2016, the bi-weekly Ionic Newsletter began featuring community-created content, including blogs, tutorials, and demo apps, to increase exposure for Ionic creators and foster engagement beyond social media platforms like Twitter. The initiative aimed to encourage Ionic enthusiasts who might not have a large audience by offering a broader platform for their work through the newsletter, which reportedly generates higher engagement compared to Twitter. Content submission initially involved tweeting at @ionicframework, with curated favorites featured in the newsletter. The Ionic team expressed enthusiasm for the anticipated contributions and emphasized the demand for quality content among their subscribers.

Alex Muramoto's piece outlines the process of enhancing user experience in an Ionic 2 iOS app by integrating Touch ID for login using Ionic Native. The article emphasizes the importance of an easy and secure login process for user retention and app monetization, suggesting that biometric authentication can significantly improve user engagement. Muramoto provides a step-by-step guide to setting up a simple Ionic project, adding the necessary Touch ID plugin, and implementing it within the app's login page. The approach involves checking for Touch ID availability, conditionally displaying the login option, and handling authentication with minimal code. The article concludes by encouraging developers to try the functionality on a physical device, as it is not supported in browsers or emulators, highlighting the ease and cool factor of integrating advanced biometric features into mobile apps.

Ionic 2 Beta 11 introduces several bug fixes and enhancements, laying the groundwork for an upcoming release candidate. Key updates include improved handling of overlay components, updated tabs to align with Material Design specifications, and an upgrade to Angular RC 4, incorporating the new @angular/forms module. Looking ahead, Beta 12 will focus on performance improvements through Ahead-of-Time (AoT) compiling and the use of WKWebView for iOS, as well as URL support for Progressive Web Apps. The build process will transition to Webpack 2, enabling tree shaking to reduce build sizes and improve efficiency, alongside the integration of TypeScript 2.0 and npm for type management. The Ionic team expresses gratitude to the community for its contributions and anticipates delivering a high-quality release candidate soon.

On August 3, 2016, Josh Thomas announced the impending release of Ionic CLI 2.0, inviting developers to test the beta version before its official launch. This new version of the Command Line Interface (CLI) is designed to support both Ionic 1 and Ionic 2 applications, marking a significant upgrade from the 2.0-beta version previously available. Developers can install the beta version of the CLI using a specific npm command, and the Ionic team is actively seeking feedback from the developer community to refine and improve the tool. The announcement also expressed gratitude to contributors and encouraged ongoing participation and feedback via GitHub, while promoting the option to join the Ionic newsletter for regular updates.

Developers looking to test and develop iOS apps without a paid Apple Developer account can now do so using a free Apple ID, Xcode 7 or higher, and iOS 9, although a Mac is still required for Xcode. This setup allows developers to create, build, and run apps on their iOS devices by setting up a provisioning profile and using code signing features in Xcode. While this method is ideal for personal testing and development, it limits sharing with others and testing across multiple devices. To address these limitations, developers can use Ionic View to share apps more broadly or services like Ionic Package and PhoneGap Build to create IPA files for distribution. These tools provide a cost-effective and efficient way to develop and test iOS apps without the need for a paid developer account or direct access to a Mac.