神刀安全网

Digitally Transform Sitefinity Sites into Mobile Apps with NativeScript

When you have hundreds of websites in different languages, I believe that the best option to manage them and their content is to use Sitefinity. But having a website is not enough. Even if you have a responsive website, you may need an app in order to distribute your product in more channels via the app stores. Also, the native experience and performance of apps may offer additional benefits.

However, developing a native app can be difficult and painful. You need to start learning new languages and frameworks, which takes time. The only way to start developing an app from day one is to use your current knowledge, so you may ask, "How can I build a native app with web technologies?"

In this article, I’ll show you how you can combine Sitefinity with NativeScript to build powerful mobile apps.

Introducing NativeScript

You need NativeScript . NativeScript is a framework that allows you to build native apps using JavaScript and CSS. You develop and maintain only one code base that cab be built and deployed for both Android and iOS.

For detailed steps on how to install NativeScript on your machine, check the documentation . It shouldn’t take you too long.

Every Sitefinity developer is ready to develop a mobile app. At first glance, Sitefinity and NativeScript seem to have nothing in common and their integration would be difficult. But it turns out that the answer is simple – web services.

Combining Sitefinity and NativeScript gives your application superpowers – you could say that it transforms into a {S}uperma{N}. Let’s look at how this can be done.

Digitally Transform Sitefinity Sites into Mobile Apps with NativeScript

Sitefinity Web Services

The first step is to create RESTFul services. This gives you the ability to manage your data through the mobile app. Using the below approaches, you can do it without programing using the BackEnd interface or, of course, you can do it with code.

Creation

Sitefinity allows you to create an endpoint for each entity with a few clicks. Go to "Administration -> Web services" and choose “Create a web service” and select from the exposed type.

Digitally Transform Sitefinity Sites into Mobile Apps with NativeScript

To review the automatically generate API click on the "Use in your app".

Digitally Transform Sitefinity Sites into Mobile Apps with NativeScript

If you are emotionally attached to coding (like me), you have the option to create a web service with code and to implement every detail in the way you prefer. I want to underline that there isn’t "best" approach to adopt, it always depends.

Retrieve items in a particular language

Once your services are ready, the next important thing is to retrieve the items that you want for a specific language.

When you use the web services from the BackEnd of Sitefinity, this is easily achieved by putting the culture at the end of the request. For example, api/mycustomservice/newsitems?&sf_culture=es returns all items in Spanish .

In case that you are implementing your own services, you will need to pass the required culture as a parameter to the them. Then you could change the current thread’s culture or access the item’s properties using item.Title["es"]; and extract the needed data.

Authentication

Not all of the content is public, so you’ll need to require authentication for those services.

Digitally Transform Sitefinity Sites into Mobile Apps with NativeScript

When Authentication is used, keep in mind that you should use FrontEnd users. Sicne the number of the BackEnd users is limited and you can log in only from one machine/device at a time, this can bring unnecessary complexity. You will need to authenticate once to the service by passing your username and password and after that, you use the returned authentication token by passing it in the headers of the next requests.

Calling Sitefinity services from your app

If you are new to NativeScript, there are some really great getting started guides available – both with Angular 2 or without . NativeScript offers rich collection of controls that can be bound to the retrieved data from the services and displays it in the best possible way. The layout concepts are close to the web development, which should save you time, too – including using CSS to style everything.

HTTP requests

In order to communicate with the Sitefinity services you need to make HTTP requests. For this purpose the http module is required.

http.request({ url: url, method: "GET" }).then(function (response) {     //http://10.0.2.2:89 or http://10.0.3.2:89 is your localhost because of the VM and the emulator     //E.g. http://10.0.3.2:89/api/mycustomservice/newsitems?$select=Id,Title,PublicationDate      var items = response.content.toJSON();     var array = [];     for (var i = 0; i < items.length; i++) {         array.push(new Observable(items[i]));     }      var newsDataSource = new observableArrayModule.ObservableArray(array);     viewModel.set("newsDataSource", newsDataSource); }, function (e) {     alert("Please review your endpoint. Error message: " + e);     console.log(e); });

Keep in mind that when you are using an emulator you will need to use one of the following addresses to access your localhost: http://10.0.2.2 or http://10.0.3.2. In the provided snippet, my Sitefinity project is hosted on http://localhost:89.

Logging into Sitefinity

In order to access content that needs authorization, you will need to pass the username and the password to the service. Keep in mind that the object which you stringify should be in the format {‘username’: "admin", ‘password’: “P@ss12334” } . It is very important that the properties of the object are placed in single quotes.

 http.request({     url: "http://10.0.3.2:89/api/paidwhitepapers/login",     method: "POST",     headers: { "Content-Type": "application/json" },     content: JSON.stringify({ 'username': viewModel.get(usernameProp), 'password': viewModel.get(passwordProp) }) }).then(function (response) {     var result = response.content.toJSON();     if (result.value == undefined || result.value == null) {         alert("Try again");     }     TOKEN = result.value; //global variable }, function (e) {     alert("Try again. " + e); }); 

The value from the response contains the authentication token.

Once you are authenticated and have the token, you can access the private information by passing it as an authorization header.

http.request({     url: "http://10.0.3.2:89/api/paidwhitepapers/whitepapers",     method: "GET",     headers: { Authorization: TOKEN }})     .then(function (response) {         console.dump(response); }, function (e) {     alert("Please review your endpoint. Error message: " + e);     console.log(e); });

Let’s put all of this together

First we need to bind a NativeScript ListView to a news items collection.

Digitally Transform Sitefinity Sites into Mobile Apps with NativeScript

Here is the markup of the control.

<ListView items="{{ newsDataSource }}" itemTap="{{listViewItemTap}}" class="qlistView">     <ListView.itemTemplate>       <StackLayout>         <Label text="{{ Title }}" textWrap="true" class="qTitleList" />         <Label text="{{ PublicationDate | utcDotNetDateConverter('') }}" textWrap="true" class="qDateList" />       </StackLayout>     </ListView.itemTemplate> </ListView> 

And the CSS used to change the background of the ListView (for the purposes of illustration on how easy it is to style NativeScript with CSS, I am simply changing them to yellow):

 .qlistView {     background-color:yellow; }

The next code snippet shows a single news item view. Since we are using an HTML editor within Sitefinity to create our content, the HtmlView component should be used to properly display the news.

<StackLayout>   <Label text="{{ title }}" textWrap="true" class="qTitleList" />   <Label text="{{ publicationDate | utcDateConverter('') }}" textWrap="true" class="qDateList" />   <HtmlView  html="{{ content }}" /> </StackLayout>

And the JavaScript to get the news item:

http.request({ url: url, method: "GET" }).then(function (response) {     //http://10.0.2.2:89 or http://10.0.3.2:89 is your localhost because of the VM and the emulator     //E.g. http://10.0.3.2:89/api/mycustomservice/newsitems?$select=Id,Title,PublicationDate     var item = response.content.toJSON();     viewModel.set("title", item.Title);     viewModel.set("publicationDate", item.PublicationDate);     viewModel.set("content", item.Content); }, function (e) {     alert("Please review your endpoint. Error message: " + e);     console.log(e); });

The aim of the above snippets and explanations is not to teach you how to use NativeScript, but rather to give you an idea how simple it is to use that technology using your existing knowledge web technologies and Sitefinity.

Testing your services

The best way is to use a http client. My suggestion is to go with Postman . For your convenience I created a simple suite with sample requests that you can modify to your specific endpoints and test accordingly.

Here is a link to Sitefinity’s sample requests collection.

What to expect next

My goal is to eventually provide a fully functional project that implements a real world scenario to help convince you that Sitefinity and NativeScript work well together. Until then, I’d love to hear your thoughts about both products and how you see them in the future.

Digitally Transform Sitefinity Sites into Mobile Apps with NativeScript

Peter Filipov

Peter Filipov (Pepi) is a Developer Advocate focused on Sitefinity. He is passionate about web development and sports. Prior joining the DevRel team, Pepi was one the team leaders in the Telerik Web Components division.

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Digitally Transform Sitefinity Sites into Mobile Apps with NativeScript

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址