{"id":1140,"date":"2017-08-15T07:00:49","date_gmt":"2017-08-15T14:00:49","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/bringing-user-profile-store-mobile-nativescript-angular\/"},"modified":"2017-08-15T07:00:49","modified_gmt":"2017-08-15T14:00:49","slug":"bringing-user-profile-store-mobile-nativescript-angular","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/ko\/bringing-user-profile-store-mobile-nativescript-angular\/","title":{"rendered":"Bringing Your User Profile Store to Mobile with NativeScript and Angular"},"content":{"rendered":"\n

Continuing down the path of user profile stores, we had previously seen how to create one with Node.js and Couchbase NoSQL<\/a> as well as a web client front-end for it using Angular<\/a>. What if we wanted to take this into a mobile application, which is the norm for all applications as of now.<\/p>\n\n\n\n

There are many different mobile frameworks out there and we’re lucky that some even support Angular, which is what we had used in the previous example. We’re going to see how to convert our client front-end to mobile using NativeScript<\/a> and Angular.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Before going forward, the assumption is that you’ve completely both of the two previous tutorials, one on creating the profile store backend<\/a> and the other on creating the profile store web front-end<\/a>. We’re also going to assume that your development environment is property configured for mobile development, whether that be Android, iOS, or both.<\/p>\n\n\n\n

\"NativeScript<\/p>\n\n\n\n

The flow of events in this application will match what we saw in the web version.<\/p>\n\n\n\n

Create a New NativeScript with Angular Project<\/h2>\n\n\n\n

Assuming that you’ve gotten the NativeScript CLI installed and configured, execute the following to create a new project:<\/p>\n\n\n

[crayon lang=”default” decode=”true”]tns create profile-project-ns –ng[\/crayon]<\/p>\n\n\n\n

The --ng<\/code> flag in the above command is important because it means we are creating an Angular project rather than a NativeScript Core project.<\/p>\n\n\n\n

As of right now, the NativeScript CLI doesn’t share the Angular CLI capabilities of generating components. For this reason, we’re going to have to create each of the HTML and TypeScript files manually.<\/p>\n\n\n\n

If you’re on Mac or Linux, execute the following from within the NativeScript project:<\/p>\n\n\n

[crayon lang=”default” decode=”true”]mkdir -p app\/login
\nmkdir -p app\/register
\nmkdir -p app\/blogs
\nmkdir -p app\/blog
\ntouch app\/login\/login.component.html
\ntouch app\/login\/login.component.ts
\ntouch app\/register\/register.component.html
\ntouch app\/register\/register.component.ts
\ntouch app\/blogs\/blogs.component.html
\ntouch app\/blogs\/blogs.component.ts
\ntouch app\/blog\/blog.component.html
\ntouch app\/blog\/blog.component.ts[\/crayon]<\/p>\n\n\n\n

If you’re on Windows, just create those directories and files manually. If you really wanted to, you could copy these directories and files from your web project from the previous tutorial<\/a>.<\/p>\n\n\n\n

Defining the Components to Represent Each Screen<\/h2>\n\n\n\n

Starting in the same direction as the web version, we’re going to focus on user login. Open the project’s\u00a0app\/login\/login.component.ts<\/strong> file and include the following code:<\/p>\n\n\n

[crayon lang=”default” decode=”true”]import { Component } from ‘@angular\/core’;
\nimport { Http, Headers, RequestOptions } from “@angular\/http”;
\nimport { Router } from “@angular\/router”;
\nimport “rxjs\/Rx”;<\/p>\n

@Component({
\n moduleId: module.id,
\n selector: ‘app-login’,
\n templateUrl: ‘.\/login.component.html’
\n})
\nexport class LoginComponent {<\/p>\n

public input: any;<\/p>\n

constructor(private http: Http, private router: Router) {
\n this.input = {
\n “email”: “”,
\n “password”: “”
\n };
\n }<\/p>\n

public login() {
\n if(this.input.email && this.input.password) {
\n let headers = new Headers({ “content-type”: “application\/json” });
\n let options = new RequestOptions({ headers: headers });
\n this.http.post(“https:\/\/localhost:3000\/login”, JSON.stringify(this.input), options)
\n .map(result => result.json())
\n .subscribe(result => {
\n this.router.navigate([“\/blogs”], { “queryParams”: result });
\n });
\n }
\n }<\/p>\n

}[\/crayon]<\/p>\n\n\n\n

The above code is exactly what we saw in the web version with two exceptions. I’ve removed the CSS reference since we did not create a CSS file on a component basis. I’ve also added a moduleId<\/code> so relative paths could work with our component. These are both Angular related items with nothing to do with NativeScript.<\/p>\n\n\n\n

The HTML is where things are different. Open the project’s\u00a0app\/login\/login.component.html<\/strong> file and include the following XML markup:<\/p>\n\n\n

[crayon lang=”default” decode=”true”]<ActionBar title=”{N} Profile Store”><\/ActionBar>
\n<StackLayout class=”form”>
\n <StackLayout class=”input-field”>
\n <Label text=”Email” class=”label font-weight-bold m-b-5″><\/Label>
\n <TextField class=”input” [(ngModel)]=”input.email” autocapitalizationType=”none”><\/TextField>
\n <StackLayout class=”hr-light”><\/StackLayout>
\n <\/StackLayout>
\n <StackLayout class=”input-field”>
\n <Label text=”Password” class=”label font-weight-bold m-b-5″><\/Label>
\n <TextField class=”input” secure=”true” [(ngModel)]=”input.password” autocapitalizationType=”none”><\/TextField>
\n <StackLayout class=”hr-light”><\/StackLayout>
\n <\/StackLayout>
\n <StackLayout class=”input-field”>
\n <Button class=”btn btn-primary” text=”Login” (tap)=”login()”><\/Button>
\n <\/StackLayout>
\n <StackLayout class=”input-field”>
\n <Label text=”Register here.” [nsRouterLink]=”[‘\/register’]” class=”text-center”><\/Label>
\n <\/StackLayout>
\n<\/StackLayout>[\/crayon]<\/p>\n\n\n\n

NativeScript has its own markup for the UI. The same rules apply in terms of Angular, but creating UI components is just a bit different.<\/p>\n\n\n\n

For example, we are still using the [(ngModel)]<\/code> attributes, but instead of div<\/code> tags, we have StackLayout<\/code> tags.<\/p>\n\n\n\n

Now let’s take a look at the registration component. Open the project’s\u00a0app\/register\/register.component.ts<\/strong> file and include the following TypeScript:<\/p>\n\n\n

[crayon lang=”default” decode=”true”]import { Component } from ‘@angular\/core’;
\nimport { Http, Headers, RequestOptions } from “@angular\/http”;
\nimport { Router } from “@angular\/router”;
\nimport “rxjs\/Rx”;<\/p>\n

@Component({
\n moduleId: module.id,
\n selector: ‘app-register’,
\n templateUrl: ‘.\/register.component.html’
\n})
\nexport class RegisterComponent {<\/p>\n

public input: any;<\/p>\n

public constructor(private http: Http, private router: Router) {
\n this.input = {
\n “firstname”: “”,
\n “lastname”: “”,
\n “email”: “”,
\n “password”: “”
\n };
\n }<\/p>\n

public register() {
\n if(this.input.email && this.input.password) {
\n let headers = new Headers({ “content-type”: “application\/json” });
\n let options = new RequestOptions({ headers: headers });
\n this.http.post(“https:\/\/localhost:3000\/account”, JSON.stringify(this.input), options)
\n .map(result => result.json())
\n .subscribe(result => {
\n this.router.navigate([“\/login”]);
\n });
\n }
\n }<\/p>\n

}[\/crayon]<\/p>\n\n\n\n

Again, the only changes we made in the above code, compared to the previous example, is in the CSS removal and moduleId<\/code> addition.<\/p>\n\n\n\n

Not bad when it comes to creating cross platform web and mobile applications right?<\/p>\n\n\n\n

The HTML for the UI that powers the TypeScript logic is found in the\u00a0app\/register\/register.component.html<\/strong> file and it looks like this:<\/p>\n\n\n

[crayon lang=”default” decode=”true”]<ActionBar title=”{N} Profile Store”><\/ActionBar>
\n<StackLayout class=”form”>
\n <StackLayout class=”input-field”>
\n <Label text=”First Name” class=”label font-weight-bold m-b-5″><\/Label>
\n <TextField class=”input” [(ngModel)]=”input.firstname” autocapitalizationType=”none”><\/TextField>
\n <StackLayout class=”hr-light”><\/StackLayout>
\n <\/StackLayout>
\n <StackLayout class=”input-field”>
\n <Label text=”Last Name” class=”label font-weight-bold m-b-5″><\/Label>
\n <TextField class=”input” [(ngModel)]=”input.lastname” autocapitalizationType=”none”><\/TextField>
\n <StackLayout class=”hr-light”><\/StackLayout>
\n <\/StackLayout>
\n <StackLayout class=”input-field”>
\n <Label text=”Email” class=”label font-weight-bold m-b-5″><\/Label>
\n <TextField class=”input” [(ngModel)]=”input.email” autocapitalizationType=”none”><\/TextField>
\n <StackLayout class=”hr-light”><\/StackLayout>
\n <\/StackLayout>
\n <StackLayout class=”input-field”>
\n <Label text=”Password” class=”label font-weight-bold m-b-5″><\/Label>
\n <TextField class=”input” secure=”true” [(ngModel)]=”input.password” autocapitalizationType=”none”><\/TextField>
\n <StackLayout class=”hr-light”><\/StackLayout>
\n <\/StackLayout>
\n <StackLayout class=”input-field”>
\n <Button class=”btn btn-primary” text=”Register” (tap)=”register()”><\/Button>
\n <\/StackLayout>
\n <StackLayout class=”input-field”>
\n <Label text=”Login here.” [nsRouterLink]=”[‘\/login’]” class=”text-center”><\/Label>
\n <\/StackLayout>
\n<\/StackLayout>[\/crayon]<\/p>\n\n\n\n

The final two components are going to be no different from what we’re already experiencing.<\/p>\n\n\n\n

Open the project’s\u00a0app\/blogs\/blogs.component.ts<\/strong> file and include the following TypeScript code:<\/p>\n\n\n

[crayon lang=”default” decode=”true”]import { Component, OnInit } from ‘@angular\/core’;
\nimport { Http, Headers, RequestOptions } from “@angular\/http”;
\nimport { Router, ActivatedRoute } from “@angular\/router”;
\nimport { Location } from “@angular\/common”;
\nimport “rxjs\/Rx”;<\/p>\n

@Component({
\n moduleId: module.id,
\n selector: ‘app-blogs’,
\n templateUrl: ‘.\/blogs.component.html’
\n})
\nexport class BlogsComponent implements OnInit {<\/p>\n

private sid: string;
\n public entries: Array<any>;<\/p>\n

public constructor(private http: Http, private router: Router, private route: ActivatedRoute, private location: Location) {
\n this.entries = [];
\n }<\/p>\n

public ngOnInit() {
\n this.location.subscribe(() => {
\n let headers = new Headers({ “authorization”: “Bearer ” + this.sid });
\n let options = new RequestOptions({ headers: headers });
\n this.http.get(“https:\/\/localhost:3000\/blogs”, options)
\n .map(result => result.json())
\n .subscribe(result => {
\n this.entries = result;
\n });
\n });
\n this.route.queryParams.subscribe(params => {
\n this.sid = params[“sid”];
\n let headers = new Headers({ “authorization”: “Bearer ” + params[“sid”] });
\n let options = new RequestOptions({ headers: headers });
\n this.http.get(“https:\/\/localhost:3000\/blogs”, options)
\n .map(result => result.json())
\n .subscribe(result => {
\n this.entries = result;
\n });
\n });
\n }<\/p>\n

public create() {
\n this.router.navigate([“\/blog”], { “queryParams”: { “sid”: this.sid } });
\n }<\/p>\n

}[\/crayon]<\/p>\n\n\n\n

No changes to see in the above other than the two previously mentioned, so we can move into our HTML for the page.<\/p>\n\n\n\n

Open the project’s\u00a0app\/blogs\/blogs.component.html<\/strong> file and include the following HTML markup:<\/p>\n\n\n

[crayon lang=”default” decode=”true”]<ActionBar title=”{N} Profile Store”>
\n <ActionItem text=”New” ios.position=”right” (tap)=”create()”><\/ActionItem>
\n <NavigationButton text=”Back”><\/NavigationButton>
\n<\/ActionBar>
\n<GridLayout rows=”*, auto” columns=”*”>
\n <ListView [items]=”entries” class=”list-group” row=”0″ col=”0″>
\n <ng-template let-entry=”item”>
\n <StackLayout class=”list-group-item”>
\n <Label text=”{{ entry.title }}” class=”h2″><\/Label>
\n <Label text=”{{ entry.content }}”><\/Label>
\n <\/StackLayout>
\n <\/ng-template>
\n <\/ListView>
\n <StackLayout row=”1″ col=”0″ padding=”10″ backgroundColor=”#F0F0F0″>
\n <Label text=”Logout” [nsRouterLink]=”[‘\/login’]”><\/Label>
\n <\/StackLayout>
\n<\/GridLayout>[\/crayon]<\/p>\n\n\n\n

Let’s wrap this application up with the final component that our profile store API and web front-end has to offer.<\/p>\n\n\n\n

Open the project’s\u00a0app\/blog\/blog.component.ts<\/strong> file and include this:<\/p>\n\n\n

[crayon lang=”default” decode=”true”]import { Component, OnInit } from ‘@angular\/core’;
\nimport { Http, Headers, RequestOptions } from “@angular\/http”;
\nimport { ActivatedRoute } from “@angular\/router”;
\nimport { Location } from “@angular\/common”;
\nimport “rxjs\/Rx”;<\/p>\n

@Component({
\n moduleId: module.id,
\n selector: ‘app-blog’,
\n templateUrl: ‘.\/blog.component.html’
\n})
\nexport class BlogComponent implements OnInit {<\/p>\n

private sid: string;
\n public input: any;<\/p>\n

public constructor(private http: Http, private route: ActivatedRoute, private location: Location) {
\n this.input = {
\n “title”: “”,
\n “content”: “”
\n };
\n }<\/p>\n

public ngOnInit() {
\n this.route.queryParams.subscribe(params => {
\n this.sid = params[“sid”];
\n });
\n }<\/p>\n

public save() {
\n if(this.input.title && this.input.content) {
\n let headers = new Headers({
\n “content-type”: “application\/json”,
\n “authorization”: “Bearer ” + this.sid
\n });
\n let options = new RequestOptions({ headers: headers });
\n this.http.post(“https:\/\/localhost:3000\/blog”, JSON.stringify(this.input), options)
\n .map(result => result.json())
\n .subscribe(result => {
\n this.location.back();
\n });
\n }
\n }<\/p>\n

}[\/crayon]<\/p>\n\n\n\n

If you didn’t copy over your CSS file, don’t forget to remove it from the @Component<\/code> block as seen in the previous components.<\/p>\n\n\n\n

The HTML UI to go with this TypeScript is found in the project’s\u00a0app\/blog\/blog.component.html<\/strong> file and it looks like the following:<\/p>\n\n\n

[crayon lang=”default” decode=”true”]<ActionBar title=”{N} Profile Store”>
\n <NavigationButton text=”Back”><\/NavigationButton>
\n<\/ActionBar>
\n<StackLayout class=”form”>
\n <StackLayout class=”input-field”>
\n <Label text=”Title” class=”label font-weight-bold m-b-5″><\/Label>
\n <TextField class=”input” [(ngModel)]=”input.title” autocapitalizationType=”none”><\/TextField>
\n <StackLayout class=”hr-light”><\/StackLayout>
\n <\/StackLayout>
\n <StackLayout class=”input-field”>
\n <Label text=”Content” class=”label font-weight-bold m-b-5″><\/Label>
\n <TextView class=”input” [(ngModel)]=”input.content” autocapitalizationType=”none”><\/TextView>
\n <StackLayout class=”hr-light”><\/StackLayout>
\n <\/StackLayout>
\n <StackLayout class=”input-field”>
\n <Button class=”btn btn-primary” text=”Save” (tap)=”save()”><\/Button>
\n <\/StackLayout>
\n<\/StackLayout>[\/crayon]<\/p>\n\n\n\n

As of right now you may be scratching your head on all this NativeScript XML markup. How Angular works with the UI hasn’t changed, but if you’re interested in learning about the NativeScript markup, check out their official documentation<\/a>. Get familiar with the StackLayout<\/code>, GridLayout<\/code> and individual UI component tags.<\/p>\n\n\n\n

Bringing it Together<\/h2>\n\n\n\n

We’ve created all these Angular components for NativeScript, but we haven’t brought them together via the Angular Router.<\/p>\n\n\n\n

In the web version of this guide, the route information was in the\u00a0app.module.ts<\/strong> file. While we could do that, NativeScript broke it out into a separate file.<\/p>\n\n\n\n

Open the project’s\u00a0app\/app.routing.ts<\/strong> file and include the following:<\/p>\n\n\n\n

[crayon lang=”default” decode=”true”]mkdir -p app\/login
\nmkdir -p app\/register
\nmkdir -p app\/blogs
\nmkdir -p app\/blog
\ntouch app\/login\/login.component.html
\ntouch app\/login\/login.component.ts
\ntouch app\/register\/register.component.html
\ntouch app\/register\/register.component.ts
\ntouch app\/blogs\/blogs.component.html
\ntouch app\/blogs\/blogs.component.ts
\ntouch app\/blog\/blog.component.html
\ntouch app\/blog\/blog.component.ts[\/crayon]<\/p>\n0<\/p>\n\n\n\n

A lot of the above code came with our new project template. We imported each of our components, and created a route for them.<\/p>\n\n\n\n

Likewise, the components need to be imported in the project’s\u00a0app\/app.module.ts<\/strong> file. Open this file and include the following:<\/p>\n\n\n\n

[crayon lang=”default” decode=”true”]mkdir -p app\/login
\nmkdir -p app\/register
\nmkdir -p app\/blogs
\nmkdir -p app\/blog
\ntouch app\/login\/login.component.html
\ntouch app\/login\/login.component.ts
\ntouch app\/register\/register.component.html
\ntouch app\/register\/register.component.ts
\ntouch app\/blogs\/blogs.component.html
\ntouch app\/blogs\/blogs.component.ts
\ntouch app\/blog\/blog.component.html
\ntouch app\/blog\/blog.component.ts[\/crayon]<\/p>\n1<\/p>\n\n\n\n

In addition to importing each component and adding them to the declarations<\/code> array, we also imported a few modules such as the NativeScriptHttpModule<\/code> and NativeScriptFormsModule<\/code>. In pure Angular, these are called the HttpModule<\/code> and FormsModule<\/code>.<\/p>\n\n\n\n

In theory, the application is ready to go.<\/p>\n\n\n\n

Resolving App Transport Security Issues (ATS) for iOS<\/h2>\n\n\n\n

Because the Node.js and Couchbase API is running locally, we are using HTTP rather than HTTPS. iOS will throw errors if we try to access HTTP resources.<\/p>\n\n\n\n

This is easily fixable by adding an ATS policy.<\/p>\n\n\n\n

Open the project’s\u00a0app\/App_Resources\/iOS\/Info.plist<\/strong> and add the following alongside the other XML:<\/p>\n\n\n\n

[crayon lang=”default” decode=”true”]mkdir -p app\/login
\nmkdir -p app\/register
\nmkdir -p app\/blogs
\nmkdir -p app\/blog
\ntouch app\/login\/login.component.html
\ntouch app\/login\/login.component.ts
\ntouch app\/register\/register.component.html
\ntouch app\/register\/register.component.ts
\ntouch app\/blogs\/blogs.component.html
\ntouch app\/blogs\/blogs.component.ts
\ntouch app\/blog\/blog.component.html
\ntouch app\/blog\/blog.component.ts[\/crayon]<\/p>\n2<\/p>\n\n\n\n

The above essentially whitelists all HTTP endpoints. It is not safe for production, but safe for testing.<\/p>\n\n\n\n

More information on ATS in NativeScript applications can be read about in a previous article I wrote titled,\u00a0Fix iOS 9 App Transport Security Issues in NativeScript<\/a>.<\/p>\n\n\n\n

Conclusion<\/h2>\n\n\n\n

You just saw how easy it was to take your web client front-end and convert it to mobile using NativeScript and Angular. The user profile store example quickly became a full stack example using the JavaScript stack. We had a Node.js with Couchbase Server<\/a> backend, Angular web front-end, and NativeScript mobile front-end.<\/p>\n\n\n\n

The next step, or option, would be to use the Couchbase Mobile components rather than HTTP calls against the API.<\/p>\n","protected":false},"excerpt":{"rendered":"

Continuing down the path of user profile stores, we had previously seen how to create one with Node.js and Couchbase NoSQL as well as a web client front-end for it using Angular. What if we wanted to take this into a mobile application, which is the norm for all applications as of now. There are […]<\/p>\n","protected":false},"author":63,"featured_media":18,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[127,136,54,163],"tags":[213,272,165,223,273,274],"ppma_author":[148],"class_list":["post-1140","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-application-design","category-best-practices-and-tutorials","category-couchbase-server","category-javascript","tag-angular","tag-front-end","tag-javascript","tag-nativescript","tag-profile-store","tag-typescript"],"yoast_head":"\nBringing Your User Profile Store to Mobile with NativeScript and Angular<\/title>\n<meta name=\"description\" content=\"Learn how to take the user profile store example as seen in the previous tutorials and create a mobile front-end for it using NativeScript and Angular.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.couchbase.com\/blog\/ko\/bringing-user-profile-store-mobile-nativescript-angular\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bringing Your User Profile Store to Mobile with NativeScript and Angular\" \/>\n<meta property=\"og:description\" content=\"Learn how to take the user profile store example as seen in the previous tutorials and create a mobile front-end for it using NativeScript and Angular.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.couchbase.com\/blog\/ko\/bringing-user-profile-store-mobile-nativescript-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"The Couchbase Blog\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/thepolyglotdeveloper\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-15T14:00:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/couchbase-nosql-dbaas.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1800\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Nic Raboy, Developer Advocate, Couchbase\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@nraboy\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nic Raboy, Developer Advocate, Couchbase\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/pt\\\/bringing-user-profile-store-mobile-nativescript-angular\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/pt\\\/bringing-user-profile-store-mobile-nativescript-angular\\\/\"},\"author\":{\"name\":\"Nic Raboy, Developer Advocate, Couchbase\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/person\\\/bb545ebe83bb2d12f91095811d0a72e1\"},\"headline\":\"Bringing Your User Profile Store to Mobile with NativeScript and Angular\",\"datePublished\":\"2017-08-15T14:00:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/pt\\\/bringing-user-profile-store-mobile-nativescript-angular\\\/\"},\"wordCount\":2518,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/pt\\\/bringing-user-profile-store-mobile-nativescript-angular\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/05\\\/couchbase-nosql-dbaas.png\",\"keywords\":[\"Angular\",\"front-end\",\"javascript\",\"nativescript\",\"profile store\",\"TypeScript\"],\"articleSection\":[\"Application Design\",\"Best Practices and Tutorials\",\"Couchbase Server\",\"JavaScript\"],\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/pt\\\/bringing-user-profile-store-mobile-nativescript-angular\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/pt\\\/bringing-user-profile-store-mobile-nativescript-angular\\\/\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/pt\\\/bringing-user-profile-store-mobile-nativescript-angular\\\/\",\"name\":\"Bringing Your User Profile Store to Mobile with NativeScript and Angular\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/pt\\\/bringing-user-profile-store-mobile-nativescript-angular\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/pt\\\/bringing-user-profile-store-mobile-nativescript-angular\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/05\\\/couchbase-nosql-dbaas.png\",\"datePublished\":\"2017-08-15T14:00:49+00:00\",\"description\":\"Learn how to take the user profile store example as seen in the previous tutorials and create a mobile front-end for it using NativeScript and Angular.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/pt\\\/bringing-user-profile-store-mobile-nativescript-angular\\\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/pt\\\/bringing-user-profile-store-mobile-nativescript-angular\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/pt\\\/bringing-user-profile-store-mobile-nativescript-angular\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/05\\\/couchbase-nosql-dbaas.png\",\"contentUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/05\\\/couchbase-nosql-dbaas.png\",\"width\":1800,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/pt\\\/bringing-user-profile-store-mobile-nativescript-angular\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bringing Your User Profile Store to Mobile with NativeScript and Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/\",\"name\":\"The Couchbase Blog\",\"description\":\"Couchbase, the NoSQL Database\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#organization\",\"name\":\"The Couchbase Blog\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/logo.svg\",\"width\":\"1024\",\"height\":\"1024\",\"caption\":\"The Couchbase Blog\"},\"image\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/person\\\/bb545ebe83bb2d12f91095811d0a72e1\",\"name\":\"Nic Raboy, Developer Advocate, Couchbase\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g8863514d8bed0cf6080f23db40e00354\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g\",\"caption\":\"Nic Raboy, Developer Advocate, Couchbase\"},\"description\":\"Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.\",\"sameAs\":[\"https:\\\/\\\/www.thepolyglotdeveloper.com\",\"https:\\\/\\\/www.facebook.com\\\/thepolyglotdeveloper\",\"https:\\\/\\\/x.com\\\/nraboy\"],\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/ko\\\/author\\\/nic-raboy-2\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Bringing Your User Profile Store to Mobile with NativeScript and Angular","description":"Learn how to take the user profile store example as seen in the previous tutorials and create a mobile front-end for it using NativeScript and Angular.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.couchbase.com\/blog\/ko\/bringing-user-profile-store-mobile-nativescript-angular\/","og_locale":"ko_KR","og_type":"article","og_title":"Bringing Your User Profile Store to Mobile with NativeScript and Angular","og_description":"Learn how to take the user profile store example as seen in the previous tutorials and create a mobile front-end for it using NativeScript and Angular.","og_url":"https:\/\/www.couchbase.com\/blog\/ko\/bringing-user-profile-store-mobile-nativescript-angular\/","og_site_name":"The Couchbase Blog","article_author":"https:\/\/www.facebook.com\/thepolyglotdeveloper","article_published_time":"2017-08-15T14:00:49+00:00","og_image":[{"width":1800,"height":630,"url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/couchbase-nosql-dbaas.png","type":"image\/png"}],"author":"Nic Raboy, Developer Advocate, Couchbase","twitter_card":"summary_large_image","twitter_creator":"@nraboy","twitter_misc":{"Written by":"Nic Raboy, Developer Advocate, Couchbase","Est. reading time":"13\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.couchbase.com\/blog\/pt\/bringing-user-profile-store-mobile-nativescript-angular\/#article","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/pt\/bringing-user-profile-store-mobile-nativescript-angular\/"},"author":{"name":"Nic Raboy, Developer Advocate, Couchbase","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/bb545ebe83bb2d12f91095811d0a72e1"},"headline":"Bringing Your User Profile Store to Mobile with NativeScript and Angular","datePublished":"2017-08-15T14:00:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/pt\/bringing-user-profile-store-mobile-nativescript-angular\/"},"wordCount":2518,"commentCount":1,"publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/pt\/bringing-user-profile-store-mobile-nativescript-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/couchbase-nosql-dbaas.png","keywords":["Angular","front-end","javascript","nativescript","profile store","TypeScript"],"articleSection":["Application Design","Best Practices and Tutorials","Couchbase Server","JavaScript"],"inLanguage":"ko-KR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.couchbase.com\/blog\/pt\/bringing-user-profile-store-mobile-nativescript-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.couchbase.com\/blog\/pt\/bringing-user-profile-store-mobile-nativescript-angular\/","url":"https:\/\/www.couchbase.com\/blog\/pt\/bringing-user-profile-store-mobile-nativescript-angular\/","name":"Bringing Your User Profile Store to Mobile with NativeScript and Angular","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/pt\/bringing-user-profile-store-mobile-nativescript-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/pt\/bringing-user-profile-store-mobile-nativescript-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/couchbase-nosql-dbaas.png","datePublished":"2017-08-15T14:00:49+00:00","description":"Learn how to take the user profile store example as seen in the previous tutorials and create a mobile front-end for it using NativeScript and Angular.","breadcrumb":{"@id":"https:\/\/www.couchbase.com\/blog\/pt\/bringing-user-profile-store-mobile-nativescript-angular\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.couchbase.com\/blog\/pt\/bringing-user-profile-store-mobile-nativescript-angular\/"]}]},{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/www.couchbase.com\/blog\/pt\/bringing-user-profile-store-mobile-nativescript-angular\/#primaryimage","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/couchbase-nosql-dbaas.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/couchbase-nosql-dbaas.png","width":1800,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.couchbase.com\/blog\/pt\/bringing-user-profile-store-mobile-nativescript-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.couchbase.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Bringing Your User Profile Store to Mobile with NativeScript and Angular"}]},{"@type":"WebSite","@id":"https:\/\/www.couchbase.com\/blog\/#website","url":"https:\/\/www.couchbase.com\/blog\/","name":"The Couchbase Blog","description":"Couchbase, the NoSQL Database","publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.couchbase.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/www.couchbase.com\/blog\/#organization","name":"The Couchbase Blog","url":"https:\/\/www.couchbase.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/06\/logo.svg","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/06\/logo.svg","width":"1024","height":"1024","caption":"The Couchbase Blog"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/bb545ebe83bb2d12f91095811d0a72e1","name":"Nic Raboy, Developer Advocate, Couchbase","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g8863514d8bed0cf6080f23db40e00354","url":"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g","caption":"Nic Raboy, Developer Advocate, Couchbase"},"description":"Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.","sameAs":["https:\/\/www.thepolyglotdeveloper.com","https:\/\/www.facebook.com\/thepolyglotdeveloper","https:\/\/x.com\/nraboy"],"url":"https:\/\/www.couchbase.com\/blog\/ko\/author\/nic-raboy-2\/"}]}},"acf":[],"authors":[{"term_id":148,"user_id":63,"is_guest":0,"slug":"nic-raboy-2","display_name":"Nic Raboy, Developer Advocate, Couchbase","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/posts\/1140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/users\/63"}],"replies":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/comments?post=1140"}],"version-history":[{"count":0,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/posts\/1140\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/media\/18"}],"wp:attachment":[{"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/media?parent=1140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/categories?post=1140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/tags?post=1140"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/ppma_author?post=1140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}