Ionic Event — September 28th, 2021

hey everyone welcome to another quarterly launch event from the ionic team i'm max lynch co-founder and ceo here at ionic and i'm so excited to welcome you to the event today we are going to jump right in we've got an awesome agenda we're going to start with updates in ionic framework v6 and some of the awesome new components that we've added then we're going to move into capacitor and some of the new capabilities we've built around the capacitor native runtime then we're going to talk about stencil our web component compiler and then at the very end i'm going to talk about some stuff that you probably haven't seen yet so definitely stick around for that and with that i'm going to pass it off to liam who leads the ionic framework development team so liam you want to take it away thanks max let's take a look at what's new with ionic so ionic is our open source ui toolkit packed with over 100 components that you can use in angular react view and more ionic makes it easy to build an adaptive user interface in your applications and with ionic 6 this experience gets even better with new components improved desktop support and expanded tooling options on top of that we've improved the performance and updated our components to use the latest ios and android designs and through all of this we've maintained an easy upgrade experience so when ionix 6 ships later this year developers will be able to get started with it right away so let's take a look at what's new in ionic 6 starting with the components our first component is the accordion which makes it easy to manage large quantities of data and organize them in an easy to understand way it's packed with functionality like smooth animations keyboard support and reduced motion accessibility so this accordion is incredibly flexible and can be used on both mobile and desktop applications the next component is breadcrumbs which provides important context to users in terms of where they are in your application and how they got there it's fully customizable and collapsible meaning that this component can tackle even the most complex of application setups perhaps one of the biggest changes in ionic 6 is to our date time component daytime pickers are incredibly complex and need to account for many different use cases and configurations we've revamped daytime to use the latest calendar picker styles on ios and android with a modern design localization support and keyboard and screen reader integration this new date time component is a huge step forward for ionic so it's always been important to us to provide rich interactive experiences in ionic apps so we're pleased to be shipping the new bottom sheet feature in ionic 6. as part of ion modal developers will be able to create dynamic sheets that snap to breakpoints and overlay interactive content as shown here in this maps demo we can't wait to see what you build with this so now let's talk about some of the performance and tooling improvements coming in ionic 6. we're shipping a new build of ionic which we call the custom elements build this custom elements build helps bundlers include only the components that you need in your application reducing the overall size of your app this also means we're going to be able to add support for new tooling such as v roll up and es build giving developers access to the modern javascript tooling that they expect in their workflow as part of our design changes we're completely revamping our material design inputs these improvements bring features such as filled and outline modes error and helper text slots and a character counter an ionic 6 will be ios 15 ready and we're keeping an eye on material u as more guidance is released so we've been talking a lot about the ionic 6 beta but how has it been going since we announced ionic 6 earlier this year we've shipped 6 betas fixed over 30 bugs and added over 30 new features many of which were a result of the contributions of our community members so to everyone who has been finding and reporting bugs suggesting new features and making code contributions thank you so much ionix 6 would not be where it is today without your efforts you can get started with the ionic 6 beta today on the link below and submit any feedback you have on our github repo we're looking forward to shipping ionix 6 to you all later this year so that's it for me i'm going to pass things off to josh who's going to show you what's new in capacitor thanks liam capacitor is a foundational piece of ionic's platform it's our open source cross-platform native bridge it allows you to bring web apps to mobile and desktop application using the web knowledge you already have you can access native features using core or community plugins and if you have a favorite cordova plugin you can bring it along for the ride and the reception of capacitor has been amazing we have 600 000 plus monthly installs over 10 000 apps in the mobile app stores and it's powering 15 percent of the apps and app stores today we continue this high quality developer experience focused on staying current with new os releases after each september launch event will support the new ios and android versions an initial testing of ios 15 and android 12 is going very well but now i'd like to talk to you about something completely different and as you know our mission as a company is to empower web developers to build high quality mobile experiences with their existing skills using the web tools and technologies they already know and love we started with a focus on building native ios and android web apps that were powered entirely by the web what the industry originally called hybrid apps or web native as we like to say throughout our history we've seen the web as an alternative to traditional native mobile app development but more recently we've come to realize that the web has a role in native mobile apps as well in fact it's incredibly common for traditional native apps to include some kind of web-based functionality either a mobile checkout flow or product catalog but too often the product experience is clunky as users navigate from a fully native ui to an obvious webview with limited mobile stylings and no access to native features and for native and web developers who collaborate together to create those embedded web views the developer experience is painful and time consuming the stock web views provided by apple and google are bare bones and they require hours and hours of development time just to enable basic functionality and even then they lack the deep native integration that's required to create a great end user experience recognizing the need for a better webview and realizing that capacitor already had much of what we needed to address these challenges we set out to reimagine the webview one that would make it easy to add web-based experiences to an existing native app in a way that is seamless for users and a joy for native and web developers alike so with that i'm incredibly excited to introduce to you ionic's newest product portals ionic portals is a drop-in advanced web view for native ios and android that brings the full power of capacitors runtime to existing native apps portals is our first ever product designed primarily for native developers and this is a huge step in the evolution of our platform and the best part is that it opens the door for web developers to contribute to all areas of mobile development brand new mobile apps and existing native apps here's a quick overview of what it is and how it works teams that need a much more capable and flexible web view component can enable their web teams to add new features and screens to existing native apps in a safe and controlled manner additionally there's an api to expose native functionality to embedded web apps using a robust web to native communication bridge teams can also create their own plugins to expose more complex native functionality remote live updates will be coming soon and did i mention that this product is free to use so here's how it works first the native team adds the portal's ios and android libraries to the native mobile app using cocoapods or maven central next they create a portal which is representation of an area in the web in their native application where they want the web app to exist multiple portals can be added to an app finally the web team takes over integrating their web app and optionally adding additional native features like camera or geo location examples include a checkout flow for an e-commerce app an faq or any number of things what about web developers though now we know most of you joining us today are web developers not native developers however we look at portals as simply another way to get the most out of your web dev skills as we've done since the beginning of ionic this is just another way of empowering you to bring your web skills to native mobile soon will allow web developers to have remote live updates to portals in native mobile apps which brings the ability to update your portal's web apps independently of your native app release cycle we believe that web technology is the best way to build apps and with ionic portals we fulfilled our web native vision so let's jump into a demo and see how it works in action so we're going to take a look at a demo application we created that we're calling portals e-commerce which is an e-commerce application we built to embed a few portals just to show how this works first we're going to take a look at the pod file so this pod file you can see our dependencies here are capacitor ionic portals and capacitor camera which i'll show a little bit later as we look at this application i already have the emulator running and we can see here's a list of different products that are available we can drill into a specific product we could add it to cart and we can look at help and get assistance in this particular product if we look at the other tab for the cart you can see that we have an item in the cart and we can go through checkout process if we'd like and place our order then we can go to a user profile screen and if we'd like we can edit information add a new address add a new payment method and we can even change this photo now this application we worked with a web team to identify what areas of the app we wanted to be portals and what we wanted to stay native so here's what our storyboard looked like we wanted the main tabs to mostly be native so the shop tab is native item detail is native but the help screen is a portal that has a react ionic application embedded within it with the card tab the actual checkout modal is a portal so everything we saw within checkout modal was portal and then everything within the portal the profile tab was a portal as well so let's prove this let's just show for sure that this is how it's working so we go to an item and we go to help and you can see here everything highlighted in blue is actually a web view so all of the content that's displayed within it is coming from this ionic react application that's embedded through a portal let's take a look at the actual code in this case we have a help page view controller where we're setting up the portal we're setting the starting route to be slash help setting that as initial context and then showing the view let's take a look at the corresponding react code here we have the help page and you can see this is fairly straightforward it's just an ionic react view get assistance or lorem ipsum pretty straightforward let's take a look at another page in this case we'll take at the look at the user profile page just to prove again everything highlighted in blue is actually within a web view and when i choose that to choose a photo this is actually native so as i click this button it's coordinating with native in order to take the picture what's the corresponding native code look like in this case the swift code is very similar to what we saw on the previous help page view where we just set the starting route and display the view but for the corresponding react code we're importing the capacitor camera plug-in in order to be able to take the picture we can see here as i click the add icon it's calling the on click handle picture click which goes down to take a picture and for the taking picture we're actually calling camera.getphoto and passing some constraints to it let's take a look at the last view the last portal and we'll add an item to our cart and here as we click checkout we're actually displaying a modal and that entire modal itself is a portal so here you can see the checkout view and in this case we're also subscribing to an event using the portals plugin so when the dismiss event is passed it's dispatching the queue and destroying the modal dismissing it from view and just to prove that this actually is entirely web we'll take a look here and inspect so to see the corresponding react code for this look at the checkout page and you can see that we're importing portals from ionic portals whenever the cancel button is clicked it's publishing the dismiss event which is communicating back to native in order to dismiss this view so that gives you a good idea of how the implementation works and the communication happens from native to web but for web developers we expect them to do development within tools that they're familiar with so in this case most of the development of these pages was done outside of the native application and the development was done using chrome and vs code by web developers and that's because this is in this case a single page app that's been displayed for three different portals the help portal the profile portal and the checkout modal so hopefully this gives you a better idea of what portals is actually doing behind the scenes so with the addition of ionic portals in the ionic stack we now have three ways to deploy your mobile apps as a progressive web app as a web native ios and android app and finally within your existing native apps using portals portals is available right now for free go grab it head to ionic.io portals to get access and to add it to your native apps we've been testing portals internally and with several customers over the past few months and we're excited to see how you use it thanks now i'm going to hand over the mic to ryan who's going to give you an update on stencil thanks josh stencil is ionic's solution for building web components it allows developers to create components using well-known technologies such as typescript and jsx and compiles them into standards compliant web components that run in every browser it powers ionic's library of open source ui components and is used in systems from companies such as apple amazon volkswagen and more now you might have noticed that we've significantly expanded the size of the stencil team as of late thanks to stencil and ionic's continued growth and success we're happy to announce that we've recently added an additional engineer to the team hired a new stencil product manager and brought on a dedicated developer relations person anthony giuliano anthony will be rolling out a bunch of stencil-focused content and new training material over the coming months you'll also see us sponsoring and attending more front-end web and design systems events including jamstack conf coming up in october under the stencil banner we've also been focused on re-engaging with the community through slack github and monthly office hours which gives the community an opportunity to engage directly with the stencil team in an informal manner our next office hours will be on september 30th at 1 pm eastern and we hope to see you there from a technical side the stencil team has been hard at work the last few months to shift features and address existing issues while this includes a lot of behind the scenes work we've shipped two releases thus far with support for puppeteer v10 m1 mac support additional control for rendering components using your own fallback css and various bug fixes but that's not all today i'd like to share one of the larger features we've been working on with a member of our community and that feature is source maps when developing for the web the size of the files that we send to our users devices is an ongoing concern to help improve performance developers often employ various strategies to reduce the size of those files including utilizing tools that rename variables and remove unnecessary white space also known as minifying while this is beneficial for end users it can make debugging applications as developers a bit difficult source maps create mappings between the source code that we write and the generated javascript that is delivered onto a user's device the stencil team has been building on a pr submitted by john jenkins a member of the stencil community to add support for source maps to stencil projects this empowers developers to debug issues while maintaining the context of the code that they wrote let's take a look at what this means in practice on the left hand side within my editor i have a sample component library created by the stencil cli i've configured stencil to minify my application as if this were going to production i can then use my browser's built-in debugger to explore the files that were served to me clicking on my component here we can see the minified results of the primary component that's displayed on the screen if i go back to my editor and pull up the typescript representation for comparison purposes it becomes clear the ways in which this component was minified on the left hand side we can see that multiple variables have been reduced to a single character identifier we can also see that many of the comments in white space were actually stripped out of our component before they were sent to the user this is all done in the name of reducing the size of the file that we transfer over the wire and as i said this is great for my users and performance but comes at a cost of readability when i need to debug the application now one of the things i could do is pretty print this minify javascript here in an attempt to understand it a little bit better and while that helps it's clear that this still doesn't get us back to our original typescript implementation we still have import identifiers that are single character none of our comments are available to us and the general structure of this file is a little bit different from the actual typescript itself keep in mind too that this is a very simple example more complex components are likely to use a larger degree and a wider variety of javascript functionality that might get minified and transformed in other ways making it more difficult to understand what the transpile javascript is actually doing when you're trying to debug your application however with source maps we can strike a balance between the worlds of sending the minimal amount of data we can across the wire in order to help our users as well as giving ourselves some context when we need to debug the application what i've done is i've actually got two servers running right now one is running my component library with outsource maps enabled and in my second tab here i have source maps enabled and what we can see is in source pane we actually can see my original component comparing this to the file on the left hand side we can see that all of the identifiers and variables have their full names all of the comments are there and all of the white spaces there as well what this does is it allows me to gain additional context when i need to debug my application for instance if i were to set a breakpoint in this get text function here and then reload my page because this component is very simple and it's only going to render once on initial page load my debugger is actually breaking for me within get text and i can actually look at the context of all of these variables as if i were debugging this typescript directly from within my ide so i can see that the first member on this component is stencil i can see that middle is undefined and i can see last is don't call me a framework js this is really powerful for developers and that that gives us a lot more context with respect to our debugging capabilities this functionality is going to be a huge productivity boost for stencil developers and take stencil to the next level source maps are the highest upvoted issue in the stencil repository and we're excited to bring this feature to our users source maps will be available in an upcoming release of stencil in the coming weeks we want to take a moment to thank john jenkins for all of their efforts in pushing this functionality forward their work laid a foundation that has been indispensable for the stencil team john from myself and the rest of the stencil team we want to thank you for all the work that you've done it's going to have an immense impact on the community next i want to touch on what the stencil will be doing in the near-term future as the team has picked up momentum in developing stencil we have identified a few places in the project where we'd like to invest time and resources the first of which is further investment in our existing testing infrastructure while stencil has a thorough testing suite we recognize that we could work towards better coverage around some of our newer output targets and are beginning to look into ways in which we could validate a stencil component across all of the output targets we support today in a more efficient manner another is documentation the team recognizes the documentation is an integral part of the developer experience today there are gaps in our documentation that the community has brought to our attention we're looking to start to fill those gaps as a part of an ongoing discussion with the community to bring stencil's documentation to where we know it can be finally we're going to work through issues and features submitted by our users at the end of the day stencil is an open source product and it thrives on its community that's all i have for stencil today but next i'd like to introduce matt cramer who has some exciting updates to share with us on appflow what's up everybody it's matt from the appflow team and today i'm going to start off with an overview of what appflo is will highlight quite possibly one of the coolest customer stories i've ever heard when it comes to the usage of appflow and then we're going to dive into some new product announcements so to kick it off what is appflow appflow is ionic's cloud suite of tools and services that exist to make your life of developing ionic applications and shipping them much easier so that starts off with our live update service which allows you to deploy updates to any part of your web code base so html css javascript images videos all of that stuff can be deployed on the fly without going through the entire app store review process again next up we have native builds native builds allows you to get android and ios binaries at the end of the day so you'll be sitting there with that apk aab ipa file that you can then take and submit to the app stores now if you don't want to do that manually our app store publishing feature allows you to take that binary you just built and then ship it directly to google play google play beta the ios app store or test flight if you don't have a ci cd solution already we also have automation features that allow you to automate all the products we just talked about so wait for a git push automatically perform a live update a native build or an app store publish now let's dive into one of my favorite customer stories i've ever heard and that has to do with live updates so the whole key here is that service allows you to swap out content any web content of your application on the fly and the company i want to talk about today is breeze aviation now breeze aviation is a really cool company it's actually a brand new technology startup airline so they're a tech company that just happens to you know own some airplanes and their entire value proposition is they want to have fares as low as 39.99 but compete with the user experience of all the big league airlines and they do that through ensuring that their costs are managed appropriately they chose ionic so their existing angular development team could use their skills to build an ios app android app and web application without having to go and hire three more development teams unless increasing the cost of their airline so keep those cost downs by getting cross platform with ionic now what about the live update story so when this airline first launched the entire tech team decided we're gonna spend nine hours straight taking tons of different flights on our airline and just talking to our users seeing how the user experience is really working out there in the wild they made it through most of that day and at the end they had one final 55-minute flight to get home the only issue is there was a huge storm in tampa and so they said don't take off yet wait a little bit we're gonna wait for the storm to roll through and then you'll take your 55 minute flight now the issue becomes is any startup knows well that it's really hard to program every single edge case into your application in this situation that delay wasn't actually logged so after 55 minutes had passed all of a sudden that flight disappeared from the application for everyone sitting in the terminal waiting to get to tampa they had customers coming up to them being like how are we gonna get on the plane we don't have our boarding passes even the tech team was freaking out saying like how are we gonna get home like this is the end of our work day we gotta go home and see our families what are we gonna do they called up the engineers at the office the engineers programmed a fix that allowed that flight to come back even though the delay wasn't actually entered correctly so pushed out a live update fixing that duration before the flight would disappear pushed out a live update everybody in the terminal downloaded the new version of the app automatically in the background and bam boarding passes are back everyone could get on the plane and get home and see their families so in the end of the day live updates allowed breeze aviation to get this entire flight off the ground and get these people home which is really really cool that's just one of many awesome stories that i hear every day when it comes to utilizing app flow suite of tools and services so with that let's dive in to what's new and today what i'm here to talk about is our brand new cicd platform integrations now you heard me mention earlier that you can use our automation features if you don't have a ci cd platform now let's say you already do you already use one of the big ones right you're on github you're on travis jenkins azure devops anything that under the sun and you want to use our live update service native build service deploy to app store service in those places but still maintain all of the pipelines all the notification systems all the processes your company already knows and loves you can use our brand new ionic cloud clay in order to pull that off so by using our cloud command line tooling inside any ci cd platform you'll be able to kick off a live update kick off an ios build in fact you don't even need mac hardware in order to kick off an ios build in azure devops for instance which is what i'm going to demo shortly it all just works so what are some of the major improvements we made to the ionic cloud clay first of all we made sure that this entire command line tool adheres to devops best practices and the biggest way it does that is by separating builds and deployments so if you want to perform a build test something and then perform a deployment all of that separated out including the ability to send out a live update after the web build has already been performed now one of the most exciting new features we've added though is the ability to dynamically pass in environment variables through the cloud command line tool to your build so no longer do you have to set up environments directly in app flow you can dynamically pass anything from your pipeline and any other tool right from the command line you can learn more about this at ionic.io docs slash appflow cli but i'm going to show you a full demo we're going to go through a setup in azure devops from 0 to 100 from commit to an app in test flight on my phone let's watch that demo now our objective here is to go from 0 to 100 we have a repository in azure devops and we'd like to get an app on our actual phone through test point every single time we perform a commit now i've already done a lot of work in advance so our full ionic app is up in azure devops i've already connected that to my appflow repository and set up my signing certificates for test flight as well as a destination for test flight and then we also made a personal access token that we're going to use for the command line tool when we set this up as a pipeline in azure devops now what that pipeline looks like is i just made a basic starter pipeline so we connected this to the repo i chose starter it triggers any time a developer commits code to the master branch running on ubuntu we're going to store variable later as a build id what we're going to do first is install the command line tool the ionic cloud client and lock in the version number then we're going to perform an ios build so you can see i on a cloud build ios app store we pass our app id the commit dynamically from azure devops we say hey use the signing cert we already set up download the a ipa file when you're done use uh json output pass that token uh through the variable system so you can see variables i've got my ionic token uh and then over here we take the build id that we get as output store in a variable throw that through azure devops at the end here so that we can use it in one of the next steps now we already have that ipa file running in the pipeline so we're going to save that directly to azure devops artifact system then we're going to run a deployment using appflow as well so ionic cloud deploy ios our app id our build id from the previous build and our destination of test flight yet again passing that token so if we watch this run here we'll see the job is already finished the artifact saved but i'm going to walk through it first the cloud cli installs locked into the version number we want then it runs a full ios build on appflow's mac hardware so even though we're running on ubuntu the full mac build output comes back in azure devops so you can look at it all here you don't need to go back to app flow that finishes successfully and downloads the ipa file locally to the machine then we publish that artifact to azure's artifact system and then we deploy it to testflight yet again running on a mac in appflow and we see that that deployment has finished successfully if we go to the job and we look at that artifact we can say it did indeed save our app.ipa file now all of this kicks off all the things you know and love about azure devops as well i got an email letting me know that my pipeline uh completed successfully i got a slack notification that the pipeline is good in app store connect we can see version four of my app is all ready to go and as a test flight tester i got a notification through email that makes that show automatically and test flight on my device as well so we went from zero to test flight every single time we commit code with just a simple four or five four-step pipeline that we could uh use on repeat you can do this for android as well you can do this for web builds you can do this for live updates everything is possible with all the features you know and love directly in your ci cd tool of choice the next thing i want to talk about is appflow's build stacks now as you might know appflow maintains a set of build stacks that manage all of the dependencies that you need to worry about when performing a build and last week was a big week for apple with the launch of new iphones as well as xcode 13 and ios 15 appflow now supports building ios apps on xcode 13 via our new build stack whenever you're performing in ios build and app flow choose that new stack from the drop down and you'll be able to build on the latest build stack possible and the newest xcode thanks for checking out the latest news for appflow with that i'm going to hand it off to dallas to talk about all things integrations plugins and native thanks matt today i'd like to share some exciting updates related to our growing suite of official native solutions plugins and integrations as any developer knows modern web and mobile experiences do not occur in a vacuum nearly every mobile app must integrate with at least one third-party application or service provider just think about what it takes to deliver reliable analytics in error reporting cloud data storage location services authentication and payment processing it's hard to imagine enabling this functionality without the help of outside providers the truth is most developers must integrate a dozen or more external services just to enable the basic functionality that their users have come to expect today that means finding community plugins or vendor provided integrations researching and mastering an equal number of apis and keeping pace with changes as providers or community contributors push new updates and in some cases the integrations or plugins don't exist at all leaving development teams in charge of building it from scratch all of this adds time and complexity to mobile development and worst of all your users often won't notice the difference because none of this is core to the unique value provided by your application or business our goal at ionic is to change that while we continue to encourage a vibrant ecosystem of open source community plug-ins and vendor-provided apis ionic is working on rapidly expanding the number of official integrations and solutions that will make it easy to integrate with third-party providers especially for the most common use cases like user authentication data storage app distribution and more with full support from ionic and ongoing maintenance and updates provided by our mobile experts for enterprise teams building mission critical apps this new official integration layer will provide unprecedented assurances and peace of mind that the third party services you depend on in your app will just work now and in the future for example solutions like auth connect make it easy to enable secure user authentication in any ionic or capacitor app identity vault simplifies how user secrets are stored and maintained safely on a device with robust biometrics protection we also recently introduced secure storage to enable fast simple and secure mobile data storage and today i'm excited to announce two more solutions that are now added to our growing library the first is ionic payments ionic payments enables you to collect payment from your customers securely efficiently and in a manner familiar to your customers through google pay and apple pay powered by a single cross-platform api you can seamlessly collect payments from your web and mobile applications instead of building your own integration from scratch your team will save development time with a pre-built payment solution that's ready to deploy in minutes and comes with best-in-class security and best of all it's the only enterprise grade solution that's backed by ionic's world-class advisory and engineering support teams available to help ensure your success every step of the way let's take a look at a quick demo showcasing how easy it can be to quickly integrate apple pay into an existing application alright let's take a look at the ionofits application this is a project that the ionic team has put together as a way to showcase various components from the framework as well as parts and pieces from our native ecosystem this is an application built on top of capacitor and we're going to add apple pay to this store experience that way we will allow our users to check out and pay through apple pay we have our code here that's written in angular however the ionic enterprise payments will work regardless of your framework of choice you can use them anywhere so today let's look at the methods that we're going to be implementing the first is is available and what we intend to do with this is to allow the application to know if apple pay is available to use this will come down to are we on an ios device does the user have apple pay enabled and do they have a card set up and configured that will work with our merchant account if all of that works out then this should return true otherwise we need to tell the application that it's not available so that we don't provide that option to our user secondly the other method we need to fill is make payment we need to do something in order to actually charge the card to the user and so we'll be building that out today as well we would typically begin by installing the enterprise apple pay plug-in however for the purposes of this demo i've already pre-installed it so we're just going to jump into coding here we'll begin by adding some of the dependencies from the apple pay plug-in that we will use throughout the rest of this file then we need to begin by configuring apple pay so we're going to set up our merchant identifier on our class here this is going to tell apple pay who we are as the merchant you would set this up in your app store dashboard next we're going to set up our various supported networks now you can choose whichever networks you support as a merchant in this case we've chosen the primary four visa mastercard american express and discover next we have the merchant capabilities and merchant capabilities basically say what type of payment do i accept we've chosen to accept all types for this demo however you can read up on the apple pay documentation in regards to what each of these methods would refer to then we need to set up our country code and our currency code what country are we in and what currency are we accepting currently and then lastly we need to set up this merchant validation url in this authorization url we're not going to cover this too much in this demo today however you need to have a server that's going to actually process your payments the apple pay plugins really are only used to authorize payments that apple doesn't actually do any payment processing that's up to you a payment provider of your choice and so these urls are specifying an an api out somewhere that's going to actually do that there you can read up on this in our documentation in terms of how to actually set these up and integrate with a payment provider if you don't have one already so now that we have all of the configuration in place that we need let's start adding code to our method so that we can build them out let's start with this available let's there is a simple method that we can use on our apple pay class called can make payments and we just provide a couple of configuration options to this the first is our merchant identifier and the second is the networks we support and this will return back this object with a can make payments value and this is a boolean value that will return true or false if the user can make payments so we'll go ahead and return that value from this method and we're ready to go secondly let's look at our make payment now making a payment is going to be a little more involved but it's still just as easy so let's go ahead and take our products and we're going to convert these into this apple pay summary item now apple pay requires a specific format for their data and so in order to provide a generic experience we've provided this apple pay summary item so here we're going to loop through our products and we're going to grab a label the amount that we're charging and we're going to set this type to final telling apple pay that this price is not going to change once we begin the checkout flow next we need to set up our total what is the total cost we are charging the customer so again we've created another summary item here with our total and again we're telling apple pay here that this is the final price this will not change during the checkout flow and now we get down to the meat of this plugin we call make payment request now make payment request has several options all of these are detailed in our documentations but the core of this is that we are passing in all of the configuration options that we've already set up in addition to our line items and our total and everything else will just happen for you using the native apple pay ui there's no more integration that you need to worry about this will return an object with a success property of true or false did it go through or did it not and we can then return that to our application so that our application can then proceed as necessary so let's take a look at what this looks like in our demo application we have this really cool store here with lots of awesome ionic swag to purchase let's say that we want to buy a hat and we've you know we'd love to buy the headband but those just seem to always be sold out so instead we'll get a portal shirt because i mean we're excited for portals we'll jump into our cart here and this will open up here is our cart and we have this option check out with apple pay this is set up to conditionally display only if apple pay is available so we know that this method is working and then we need to actually proceed so if we hit this checkout button you'll see we get the native apple pay interface here that allows us to choose which card we want it shows the total price that we're expected to pay and it's asking us to double click to pay and this will use face id to confirm so i'll go ahead and do that confirm it you'll see the payment gets processed it's done and everything completes and the order goes through now in the case of this demo we're not actually charging money but we can see that in in less than 80 lines of code we have successfully implemented apple pay into our application to learn more about ionic payments and how you can get started today visit ionic.io forward slash payments to schedule a demo with one of our team members next we're rolling out an official integration with microsoft intune microsoft intune is one of the leading mobile device management platforms in the enterprise helping central it teams remotely manage devices or apps in use by employees and it enables the easy single sign-on across the entire organization for businesses building on top of azure active directory and using microsoft intune to manage app and device policies across the organization ionix official intune integration makes it so easy to quickly integrate with intune and brokered microsoft authentication apps and it is considerably easier than the typical native integration especially since we've added straight to the point documentation a simple installation experience and consistent apis across ios and android you can learn more about the ionic microsoft intune if solution at ionic.io forward slash integrations we are excited to continue to build out additional solutions that will grow the ionic platform ecosystem and help keep ionic the best platform for building web native applications now i'll turn it back to max to bring us home all right well i hope you're as excited about those updates as we are we've been really really hard at work trying to build ionic into the best platform for web developers to build amazing apps on every platform that they care about which leads me into a really really big update that i'm excited to share with you today we have been hard at work on an official native platform for windows 10 and 11 that enables ionic developers to build a rich native windows app experience using the same code base they used to build progressive web apps or ios and android apps this is a new platform built on our capacitor technology so it's essentially a new windows platform for capacitor and this is a new product for us we haven't quite opened the floodgates yet but if you're interested in building a windows specific app with deep integration into windows apis definitely check it out go to ionic.io windows we are working with some early teams who are really really excited about building a great native windows experience and if that's you please reach out and get in touch and we'll have more updates on this once it becomes generally available with windows ionix cross-platform story is getting even stronger of course with ionic you can build amazing progressive web apps with any web technology that you want to use and you use the same code to ship awesome native ios and android apps again with the exact same code you use on the web with portals now we have a really interesting new hook into existing native ios and android apps where the web apps that you build using portals can run in any existing native app whether it was built you know the day app store started allowing new native apps or built with traditional native technologies tomorrow and now with windows developers can build amazing native windows desktop experiences again with the same code all based on web standards and using their favorite web stack our mission at ionic has always been to enable web developers to build amazing cross-platform apps with native quality experiences using their favorite web technologies and favorite web stacks and based on web standards our mantra here at ionic is to always bet on the web and this has never led us astray it's why ionic is still here today it's why it's still the choice of web developers to build awesome cross-platform apps for developers who are fully invested in the career of being a web developer who love building web apps who have their favorite web stack we want to enable these developers to build amazing apps on all the platforms they care about with their favorite web technologies and web standards so with that i'd like to invite you all to join our upcoming enterprise summit that's happening later this year if you're a developer at a big company working on mission critical enterprise apps whether that's consumer facing or internal b2e you know business to employee apps we would love to have you join we've got an awesome lineup of speakers joining us developers on teams who have built serious apps on the ionic stack so if you want to learn from their experience if you want to see how big companies are actually putting ionic into production this is a great conference for you we're super excited about this so hope to see you there and with that i'm going to leave you to it if you want to see a recap of this in a text format check out ionic.io recap 21. we've got a blog post going over every update that we made here today and you can share that with other people so again we want to thank you so much for joining us and we'll see you next time

Channel: Ionic

Views: 3,283

Keywords: Ionic, Ionic Framework, Mobile Development, Capacitor

Id: ilafSyOlYAI

Length: 51min 28sec (3088 seconds)

Published: Tue Sep 28 2021