Building an Instant App with Anirudh Dewani (GDD India '17)

Okay. So let's get started the. Format here is that I will present some slides and, I will talk about instant apps and how, to build an instant app and. Explain the project that we're going to use in the code labs and, after. That we'll start coding so to. Begin first of all thank you all of you who, are here to learn more about in synapse thank you for attending GDD brief, introduction, my, name is Annie Rhoda Bonnie and I'm a developer advocate in the partner engineering or so. What I do is I help top partners, build. Or integrate. With our technologies, over the, last 18 months I've been helping developers, build, in synapse, the, agenda today first. Of all we're gonna discuss, the technology what are insane apps how, do they work, after. That we will look at the tools that, help developers, build in synapse, finally. We will look at the project, topeka which, is a project we will use for. The code labs. All. Right so here's an example of instant app running this is a recorded video. So. You see here the user types. Of query and you have results in the Google Search app and as you click on a result the, app just launches this app is not installed on, the device it's, run instantly, the, Red Bull app here is not installed as you can see it, just runs instantly, provides you the same native experience of, watching, video streaming and all the functionalities, that you would expect in the app. Now. What just happened how did it work how. Did the, user get in the app without going to the Play Store and without installing how, did we know which activity, to launch. So. In synapse our Android apps that run natively so, the key here to understand is that these are native apps these run on Android platform, on top of android framework have access to all the api's and services, and they. Run without prior installation. There. Are many surfaces, that can trigger, instant apps. Some. Of the surfaces are chrome when. You search for something in chrome and there are links that appear red, results you, click on a link and that, can launch an instant then. Google search up like, that video we saw before. Also. Links shared, through hangouts through, emails anywhere, there's a URL and instant. App can launch. Finally. We also integrated, with the launcher, on. On. Pixel, as well, as Play Store so, in place so now next to install, there is a button that says try now for apps that have an instant version this, instantly launches, an app so user can experience your app without friction without the friction of downloading, it and going through the, install process and then.

If They want to they can proceed to install from within the app so. All, this works like I said with a URL so. What what, makes or how can we associate, a URL with, an activity in the app this, is possible, with app links so app links are special, deep links, that. Declare, the, relationship, or that associate, your activities, to, URLs. And you verify. Your app links by, uploading a file to this location which. Is your website comm, slash well-known. Slash assets links dot JSON this is where you associate, your web, app the, domain that you own with. Your Android. App so there can only be one possible. App. That handles, all the links associated, with that domain now. This is a requirement for instant app but, even if you're not building a Nissen app you should go ahead and claim your domain just upload this file, that's what links to our JSON we'll see the tools that help you build this file the structure of this file and then you upload that and your association, is done all your links belong, to, your app there, won't be any dissemination, dialog that says open with Chrome or open them with this app right, so, go ahead and do this anyway for your apps. So. Now let's take a deeper look at what happened so. Here the user clicks on a link which. Was sent to them on an. App that's a travel attractions, app and, the. Link is to a specific. Attraction right it's a details activity, now, how you organize your app there's a list activity, which shows everything and, you step into details, so, this particular link points. To a specific. Attraction. In this case the fishermen. What. Happens then is we. Figured, out that this link is associated, with an app because of Apple Inc's and we, also figured out that the URL is. Represented. By the a particular, activity in your code now. Your code may have a lot of activities, it may be a very big apk we, know which activity, represents the code and. Then. We pull down that specific, chunk of your app. That. Contains. The activity. And. There. It launches, your insta, nap. Now. You might say that downloading, my 20 MB app at my app is 20 megabytes or even more isn't.

A Good idea because it still adds friction, it takes time to download the networks are slow it, costs data, so. How is this how do we make this possible. So. Building an insane app requires you to modularize your. App by features, so. You. Have a big app let's, take the example of a travel app you have an app that has flights hotels. Buses. Car. Rentals and then payments, so, you look at our app as a set of features right, and. Then. You carve out these features into separate modules that's what modernization, is and, then. We only download, the, activity. Or we, only download the feature module, that has the activity, that the. User is trying to reach through, that you are. So. The reasons you should modernize your app because. In synapse are dynamically, composed at runtime, they, need to be modernized so that the download bundle is lean right. You, don't want the experience of downloading, the experience, should match the experience of opening a web page right you, should not have an instant app take 20 30 seconds to download so, they. Need to be lean, again. They. Also need to be made available on, demand so, when the user clicks a particularly URL, we. Load the. Feature, that represents, that particular. URL and as, user clicks a button so. Say in that same example of a travel app I'm done, with my flight bookings now, I wanna book. The hotel so I'm gonna click a button that says add Hotel, to my booking, at that point this is an intent right, a URL intent, that. Tells the system that, hey we need to download the other module the hotel's, module for that feature so, your app is composed. Dynamically. And it's made available aren't, on demand we, didn't download the other modules, right we only downloaded, what was needed and will download what, will be needed based on user action in the, download and module so for example, when, we download the flight's module that module will be cached in the system so. It will be available for faster loading second. Time user tries to access the, flight's. Module. Now. What. Are features, let's look, them at details so, these are discrete user experiences. Right in the case of the travel app it's a flights feature or hotels feature and a payments, feature should the user try, to convert. They. Are tied to one or more activities your. Features should have at least one URL, addressable, activity, or else we cannot download, that feature. But. It can have more activities, so, you can have a set of URLs map, to a single feature which can have two or three activities, that support those set, of URLs. It. Helps user accomplish, a task again. In the case of the flights app the. User is able to find a flight using, this feature. Find. A hotel and then, finally another task could be pay right, so the user. Finds. A flight adds them, to the cart finds. A hotel adds them to the cart and finally. The user wants to pay for this so pay the payments could be a separate, module that's downloaded. And. Applied. When the user actually tries to complete, the transaction. The. Optimization, here comes from the fact that we only download the feature that was required to complete, that user action, so, now let's, look at the tools that mean we. We. Released to help you build in synapse, so, beginning. Android studio 3.0. We. Added support for instant, apps so we have a set of plugins some. Refactoring tools UI. Wizards, and templates that help you will then in cinah. In. We, added a new SDK, the Android apps the. Android in synapse SDK, which, has functionality. Or features that are specific, to in synapse. We. Also enhance the app links assistant, to four URL, handling so, this helps you set up URLs against, your activities, create. Bad asset links got, JSON file and then, upload that. To the web server and then, complete, the association, between the URLs and the, activities. Also. We had a support, in the emulator so your immunity can be used for, local, development off in synapse. Where. It's another talk ad in synapse tomorrow which I'll have a lot more details. We. Also added a new track in Play Store it's called the dev track so, you guys know you must have used the alpha-beta in production, tracks right we also had it at track or development, track.

For. Development, and to do an end-to-end test while developing, what, you want is your app to be uploaded, right because it's instant, should load from the cloud, dynamically. So we are there a development, track which, has less which restrictions. Where you can upload your app and, share. With QA for testing or you know for your processes. In the company. So. Now, let's look at some of the tools. Made. Available with, Android, studio so. We added in two new plugins, that help you represent, feature. Modules, and in, synapse, so we already had a plugin for library we, had a plugin for an app, we. Added two more plugins to, the present future, modules, and to, the present and in celeb so. The plugin for feature to declare module as feature in studio when you create a new module to declare that module as a feature Mario you, add you, apply calm android, dot feature, to it just as you do for library card or Android library, for. Feature Mario's you apply this, plug-in and. When, you use the template or the new module wizard you will see this icon here, for. The feature modules. So. What's the purpose of feature module. When. We started developing the infant the instant app tools we, wanted you we wanted to enable a thing, project, structure Wien. Wanted, to enable a project structure that will allow you to have a single codebase to, build your incent, and install that right, we don't want you to write. A completely, different version which will be your instant happy want you to use the same code as you add features for one those features should be available for your instant and install, that, instant. Apps are not trial, apps they are not demo versions, they are not lies versions, they are your. App should, represent the full functionality of your app, so. To. Enable this, we. Needed a plugin that would, compile. Into. An apk, when applied to. A build of an instant app but, would. Generate. The artifact aar, when. Applied to, an application. Type why. Because. Instant app applauded artifact it's basically a collection of, modular. Apks, write small apks each one of them is a feature apk so, the flights that apk hotels are IBK they're all constructed. Separately, so that and bundled together so that they can be downloaded on the map so. What we wanted to do with inson app is produce, an apk, but, when compiling, your or building your application, as Commodore, Android application, a regular installable, application, this. Feature, plugin. Generates, a aar. Output, so, it's dynamic, in nature on which, top-level. Artifact, it's applied through. Okay. This. Feature module, convert Android our feature should only contain code, that's, specific. To that particular feature. So. The second plug-in we introduced was calmed Android or instant app. This. Basically, produces. A build. Artifact, that. Represents, your instant app essentially. This is a zip file and this, is zip, file has a collection of. Split. Apks. So. In, terms, of Gradle it basically has nothing, you don't do anything you just say this is the output type include, these feature modules, and, it. Produces a zip, file, it. Has no code no resources, no, manifest. Of its own. And. In. The dependency section you basically include the features that you want to bundle, in your insane app now there may be cases I already said that we want we look at instant apps as a complete, app not, a trial or a demo version but there may be some cases where. You have features, that, do. Not apply to an instant app a good example will be offline, video right, an app that allows you to offline, video content, and then watch it later that, functionality. May only be available in your install. That but may not be available as part of an insane, app so. It also allows you you can. Selectively, choose the features that you want to bundle in your insane app and then, add other. Features, other, features for your installable, app this. Is the app links, assistant, tool that helps you create the association between your, two, that helps you create URLs assign them to activities and then create the association between the, web. App as well and the Android package. So. You basically open, this tool and then. You set up some URLs, you select the activity, that maps to this URL in, the manifest, it creates the necessary intent, filters and then.

On. The right side you see the process there you generate. You. Generate an asset links JSON file then. You upload that file and then we've at. That point we verify that the domain belongs to you and these URLs belong to you are associated with your package ID, finally. As part of, the insanity also added the instant app we are also reducing synapse SDK these. Has this SDK has api's and features that are specific, to instant apps. That's. The dependency, you want to add in your Gradle to include the features for, in synapse, the API is for in snaps some. Of the API is there are there's an install API so. When the user has your instant app running and at some point there's a feature that the user wants to use that's only available in your installed app or, the user decides to install your app there's. An API that triggers. The install of your app then, there are cookie and storage API so when. The user moves from, an instant state of your app to the installed, sale of the app we, want to make sure that the transition is seamless so. This API lets you backup and. Transition. Preferences, and data over to the install app so the user context, is not lost right, when the user installs the app we don't want the user to start afresh right he may have already gone through some setup or profile within, your insane app you want to carry that forward. And. Then. There's the in-app context API this is basically, one single method call that says it's instant, app is in, synapse will tell you whether your app is running instantly. Or not so, a good example of usage of this API would be the first API install API you, only want to trigger the installed API if you're running instantly, write cinder code you would say if it's an app called, eaten solid ice. Okay. So those are the new tools but. The tools required to build in synapse now, let's look at the code lab project which is project Topeka, so. It's basically a simple quiz app has, some categories, and some quizzes that you can take a, couple, of activities, a. Very. Simple app we're. Going to use this app to builder, to. Build our tea, for our core laps today. So. This. App is monolithic, code, one. Module the application, module that has everything, in it so. What we'll try to do is first. Create. A base module so, we'll create one base. Feature, module, comm. Dot Android dot feature, right. Apply that plug-in to this module we'll, put all the code there right. And then we'll create and. We'll. Create an instant app module. And then install, that module right so all the it's not very well modularized just all the code lives in one module. And. We. Create the to build artifacts they are installed at and instantly from it in the, second, step we, will create, an additional module additional. Feature module called to pick a UI so, what we'll do there is pull up all the UI code into. This module. So all the activities, UI activities, will move into this topic. A UI, module and we'll, leave the common application, and the. Common. Application, code and the frameworks, and the base libraries, libraries, that would be used across modules, we leave all that in the base, module, all. Right so this is what we're going to do. Now. I want to talk a bit more about the base module right the base feature module the base meteor, module is a special, module you, can only have one base, module in your app and all, other feature modules, should depend on this base. Module. So. Going back to our example of flights and hotels. Those are your feature modules right but, there will be a lot of code that's common right you load some widgets you, note some views, that are used in all your activities, you, have some dependency, injection framework or. Some. Frameworks that are using that apply to all the modules so all that code what you want to do is put that in your base feature module all the, feature modules, depend on that so they have that they. Have all that functionality available to them. Base. Model is also very important because the. Android package managers, system, that it knows about your instant app through your base module that's, the first module that's pulled up when.

A User tries to, access your Instagram through a link that, has a definition, that has a package, ID so, the base module is special, and they'll be in the Gradle file. For the base module you'll, add some special configurations. You. See that tag that says base feature true this basically tells a build system this, is our base module and. There's. A configuration, there called application project. So, bitch here, we basically specify. What are, installed. Package. Name is so that this copies over the package. ID and builds your insane app with the same, package ID and. Then. The base needs to be aware of all your features as well right. So you, say feature to, pick a UI in, the, case of the flight's example, here in your base module you will say this, feature hotel, feature, project, flights. Feature project, rentals so base module is aware of everything this. Is all needed because. When. You trigger a bill what really happens, is the, manifest merger kicks in picks up the manifest from each of the future modules, extract, the activities, the intent filters and then. Combines. Them in, a big manifest, and that's, how the base the system is aware of all the components. In your application. Okay. So now it's time to start coding the, core lab links is again here now. Two things you can do one go through the code lab and try 240, Topeka, or build a instant, Topeka app, the. Other thing you can do is if, you work, on Android projects, and you if you have an Android app you. Can. Start building. Your app as an instant app today, right, we'll help you through that process in, the end you might have something you can go back and demo to your team's right, so, you can either follow the code labs or. If you're a little more comfortable try. With your relapse. Simple. Steps these, are also in the code labs in, the core lab document, convert. We'll begin by converting our application, module to, a base feature module so we move all the court there then. We create a new application module, which generates, our install that and we create an incident module which generates. Our instant, this is same as the block diagram you saw earlier and then. We carve out a separate feature which. Is UI and we pull up the UI. Activities, into that module finally, we deploy and test okay. So. The feedback link is here if you are using your app today, we. Would love if you can give us some information about, your, app and drop some feedback. We'd. Love to help you after this code lab you, know after gdb will, follow up with you so if you're trying with your real app today fill. This form we would love to know about, your, app, the. Code lab link is right there and all the instant app documentation, is available at G dot go slash in synapse so, I'll leave at this slide and then, let's start the collab now all tears are here if, you need help raise, your hand we'll come and answer your questions and help you - yeah. Thank.

2018-01-26 01:28

Other news