DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • Ionic App Development Over Other Frameworks: Is It Hyped?
  • Interactive Data Visualization in Ionic 5
  • Ionic Vs. React Native - Which Framework Is Better for Cross-Platform Mobile App Development?
  • Common Problems in Redux With React Native

Trending

  • How to Submit a Post to DZone
  • Designing Databases for Distributed Systems
  • REST vs. Message Brokers: Choosing the Right Communication
  • Best Practices for Writing Clean Java Code
  1. DZone
  2. Coding
  3. Frameworks
  4. Developing Ionic Apps with MobileFirst 7.1

Developing Ionic Apps with MobileFirst 7.1

How to use Ionic with IBM's mobile development framework.

Raymond Camden user avatar by
Raymond Camden
·
Aug. 22, 15 · Tutorial
Like (1)
Save
Tweet
Share
2.56K Views

Join the DZone community and get the full member experience.

Join For Free

time for the last in my series of blog posts on hybrid development with mobilefirst 7.1 . obviously i’ve got more to say about mobilefirst, but this last post will complete the picture so to speak about the development is like in 7.1. i want to give a special shout out to my coworkers carlos santana and karl bishop. they helped quite a bit with the first two blog posts and this one in particular is thanks to carlos. both are smart folks who make my job of telling yall stuff quite a bit easier. with that in mind, before going further, be sure to read my introductory post ( getting started with mobile development and ibm mobilefirst 7.1 ) and my follow up ( developing hybrid mobile apps with ibm mobilefirst 7.1 ).

for this post, i’m going to speak specifically about ionic development and mobilefirst. in general, you can follow much the same path as what i described in the last blog entry . basically make a new mobilefirst project, make a new ionic project, and then copy over the www assets. but you will also want to make sure you include ionic’s keyboard plugin: com.ionic.keyboard . finally, you want to include the code i mentioned that makes use of wlcommoninit. remember, this is the “mobilefirst is ready to go” event.

in general, that would work fine, but there’s a way to make it even easier. as i mentioned, my buddy carlos has been working on this issue and has already made something that will help quite a bit – a set of ionic templates: https://github.com/csantanapr/mfp-ionic-templates . these templates make it easier to work with mobilefirst and ionic. assuming you’ve checked out the repo, you can simply provide the path to the repo when creating a new mobilefirst hybrid project:

shot1









once you’ve created the project, you then need to initialize ionic library values and other settings. luckily carlos made this easy – just run: npm install . this will read in the dependencies defined in package.json and run bower as well. (this means that carlos didn’t need to include a specific ionic javascript library – you’ll always get the latest).

if you crack open the code, you’ll see that app.js has been updated to include mobilefirst specific chores including wlcommoninit. he also includes a bit of code to ensure the app will work in our mobile browser simulator ( using the mobilefirst mobile browser simulator ) and ionic serve as well. to be honest, i kinda felt like it was a mistake to include code that just works in those situations, but i’m glad he included it. he clearly marked them in app.js and if you’re worried about the ‘waste’ of 15 lines of unnecessary javascript code in production, it will be easy to remove it. (and since this is a repo, you can always just check it out and modify it yourself).

here’s an incredibly cool animated gif of the blank starter in action.

untitled4

and there you have it. let me know what you think in the comments below!

Ionic (mobile app framework) mobile app

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Ionic App Development Over Other Frameworks: Is It Hyped?
  • Interactive Data Visualization in Ionic 5
  • Ionic Vs. React Native - Which Framework Is Better for Cross-Platform Mobile App Development?
  • Common Problems in Redux With React Native

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: